244 lines
8.0 KiB
Vue
244 lines
8.0 KiB
Vue
<template>
|
|
<a-card :bordered="false" title="系統新增">
|
|
<template slot="extra">
|
|
<a-button type="primary" @click="goback">返回</a-button>
|
|
<a-button type="primary" @click="save">保存</a-button>
|
|
</template>
|
|
<a-form-model :model="form">
|
|
<a-row>
|
|
<!-- 课程名称 -->
|
|
<a-col :span="18" :offset="3">
|
|
<a-form-model-item label="课程名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
|
|
<a-input v-model="form.courseName" v-decorator="['courseName', { rules: [{ required: true, message: '请填写课程名称' }] }]" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
|
|
<!-- 课程类别 -->
|
|
<a-col :span="9" :offset="3">
|
|
<a-form-model-item label="课程类别" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
|
|
<a-tree-select v-model="form.courseType" :tree-data="dictCourseType" placeholder="请选择课程类别"></a-tree-select>
|
|
|
|
<!-- <a-select v-model="form.courseType" placeholder="--请选择--">
|
|
<a-select-option v-for="(item, index) in dictCourseType" :key="index" :value="item.value">
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select> -->
|
|
</a-form-model-item>
|
|
</a-col>
|
|
|
|
<!-- 课件大小 -->
|
|
<a-col :span="9">
|
|
<a-form-item label="课时" :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }">
|
|
<a-input-number id="hour" v-model="dataValue" :min="1" :max="1000" @change="onChange" :style="{ display: 'ln', width: '100%' }" />
|
|
{{ dataValue }}分钟
|
|
</a-form-item>
|
|
</a-col>
|
|
|
|
<!-- 学习内容简介 -->
|
|
<a-col :span="18" :offset="3">
|
|
<a-form-model-item label="学习内容" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
|
|
<a-input v-model="form.learningContent" type="textarea" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
|
|
<!-- 所属行业 -->
|
|
<a-col :span="9" :offset="3">
|
|
<a-form-model-item label="所属行业" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
|
|
<a-select v-model="form.industryInvolved" placeholder="--请选择--">
|
|
<a-select-option v-for="(item, index) in industry" :key="index" :value="item.value">
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
|
|
<!-- 是否为必修课程 -->
|
|
<a-col :span="9">
|
|
<a-form-model-item label="是否为必修" :label-col="{ span: 6 }" :wrapper-col="{ span: 6 }">
|
|
<a-select v-model="form.isRequired" placeholder="--请选择--">
|
|
<a-select-option value="1"> 是 </a-select-option>
|
|
<a-select-option value="0"> 否 </a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
|
|
<!-- 选择岗位-人员类型 -->
|
|
<a-col :span="9" :offset="3">
|
|
<a-form-model-item label="选择岗位" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
|
|
<a-select v-model="form.job" placeholder="--请选择--">
|
|
<a-select-option v-for="(item, index) in dictPerson" :key="index" :value="item.value">
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
|
|
<!-- 备注 -->
|
|
<a-col :span="18" :offset="3">
|
|
<a-form-model-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
|
|
<a-input v-model="form.remark" type="textarea" />
|
|
</a-form-model-item>
|
|
</a-col>
|
|
|
|
<!-- 上传封面图片 -->
|
|
<a-col :span="18" :offset="3">
|
|
<a-form-model-item label="上传封面图片" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
|
|
<db-upload v-model="fileList"></db-upload>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
|
|
<!-- 标签选择器 -->
|
|
<a-col :span="18" :offset="3">
|
|
<a-form-model-item label="课程标签" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
|
|
<a-select mode="tags" style="width: 100%" placeholder="标签选择或新增" @change="handleTagChange" :value="this.form.tags">
|
|
<a-select-option v-for="(item,index) in dictCourseTag" :key="index" :value="item.value">
|
|
{{ item.name }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form-model>
|
|
</a-card>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
import { courseAdd, getCourseDetails } from '@/api/course/course'
|
|
import storage from 'store'
|
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
|
|
import { dictToTree } from '@/utils/util'
|
|
import DbUpload from '@/components/DbUpload/DbUpload.vue'
|
|
|
|
export default {
|
|
name: 'step1',
|
|
data() {
|
|
return {
|
|
dataValue: 1,
|
|
form: {
|
|
coverPath: '',
|
|
tags: [],
|
|
courseTags: [],
|
|
// fileList: [] // 上传附件
|
|
},
|
|
url: '',
|
|
previewVisible: false,
|
|
fileList: [],
|
|
previewImage: [],
|
|
dictPerson: [],
|
|
dictCourseType: [], // 课程类别
|
|
industry: [],
|
|
dictCourseTag: [],
|
|
}
|
|
},
|
|
components: {
|
|
DbUpload,
|
|
courseAdd,
|
|
getCourseDetails
|
|
},
|
|
created() {
|
|
this.dictionaryDropDown()
|
|
if (this.$route.query.id) {
|
|
getCourseDetails({ id: this.$route.query.id }).then((res) => {
|
|
this.form = res.data
|
|
this.form.isRequired = this.form.isRequired + ''
|
|
|
|
this.form.tags = []
|
|
this.form.courseTags.forEach((item, index) => {
|
|
this.form.tags.push(item.dictValue.toString())
|
|
})
|
|
})
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
//显示页面上的数字
|
|
onChange(dataValue) {},
|
|
save() {
|
|
courseAdd(this.form).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message.info('保存成功')
|
|
//新增完成后直接返回课程列表
|
|
this.$router.push({ path: '/course/CourseList', query: {} })
|
|
}
|
|
})
|
|
},
|
|
|
|
dictionaryDropDown() {
|
|
this.formLoading = false
|
|
// 行业
|
|
dictionaryDropDown({ dictionaryCode: '0007' }).then((res) => {
|
|
this.industry = res.data
|
|
})
|
|
// 课程类别
|
|
dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
|
|
// 词典转树结构
|
|
this.dictCourseType = dictToTree(res.data, [], 0)
|
|
})
|
|
// 人员类型
|
|
dictionaryDropDown({ dictionaryCode: '0005' }).then((res) => {
|
|
this.dictPerson = res.data
|
|
})
|
|
// 标签项 默认选中的多选框
|
|
dictionaryDropDown({ dictionaryCode: '0008' }).then((res) => {
|
|
const tagList = res.data
|
|
for (let i = 0; i < tagList.length; i++) {
|
|
tagList[i].value = tagList[i].value.toString()
|
|
}
|
|
this.dictCourseTag = tagList
|
|
})
|
|
},
|
|
|
|
//返回
|
|
goback() {
|
|
this.$router.push({
|
|
path: '/course/CourseList/'+this.$route.query.type,
|
|
query: {
|
|
courseName: this.$route.query.courseName,
|
|
},
|
|
})
|
|
},
|
|
|
|
getToken() {
|
|
let hreader = {}
|
|
hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
|
|
return hreader
|
|
},
|
|
onSuccess(file) {},
|
|
handleCancel() {
|
|
this.previewVisible = false
|
|
},
|
|
async handlePreview(file) {
|
|
if (!file.url && !file.preview) {
|
|
file.preview = await getBase64(file.originFileObj)
|
|
}
|
|
this.previewImage = file.url || file.preview
|
|
this.previewVisible = true
|
|
},
|
|
// 处理文件上传，并且获取图片路径
|
|
handleChange({ fileList }) {
|
|
this.fileList = fileList
|
|
this.fileList.file = fileList[0]
|
|
this.form.coverPath = this.fileList.file.response.url
|
|
},
|
|
|
|
//标签选择器
|
|
handleTagChange(value) {
|
|
this.form.tags = value
|
|
},
|
|
},
|
|
}
|
|
|
|
// 图片预览Base64
|
|
function getBase64(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader()
|
|
reader.readAsDataURL(file)
|
|
reader.onload = () => resolve(reader.result)
|
|
reader.onerror = (error) => reject(error)
|
|
})
|
|
}
|
|
</script>
|