welfare-admin/src/views/course/CourseAdd.vue

<template>
  <a-card :bordered="false" :title="pageName">
    <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" :style="{ display: 'ln', width: '100%' }" />
          </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" :max="1"></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 {
      pageName: this.$route.query.id ? '课程编辑' : '课程新增',
      dataValue: 1,
      form: {
        coverPath: '',
        tags: [],
        courseTags: [],
        type: this.$route.query.type,
        // fileList: [] // 上传附件
      },
      url: '',
      previewVisible: false,
      fileList: [],
      previewImage: [],
      dictPerson: [],
      dictCourseType: [], // 课程类别
      industry: [],
      dictCourseTag: [],
    }
  },
  components: {
    DbUpload,
    courseAdd,
    getCourseDetails,
  },
  created() {
    this.dictionaryDropDown()
    if(this.$route.query.id) this.loadData();
  },

  methods: {
    //加载数据
    loadData() {
      if (this.$route.query.id) {
        getCourseDetails({ id: this.$route.query.id }).then((res) => {
          this.form = res.data
          this.form.isRequired = this.form.isRequired + ''
          this.fileList = JSON.parse(this.form.coverPath)
          this.form.tags = []
          this.form.courseTags.forEach((item, index) => {
            this.form.tags.push(item.dictValue.toString())
          })
        })
      }
    },

    save() {
      this.form.hour = this.dataValue;
      this.form.coverPath = JSON.stringify(this.fileList)
      courseAdd(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.info('保存成功')
          //新增完成后直接返回课程列表
          this.goback()
        }
      })
    },

    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() {
      console.log('this.$route.query.type', this.$route.query.type)
      this.$router.push({
        // /course/CourseList/sys
        path: '/course/CourseList/' + this.$route.query.type,
        query: {
          courseName: this.$route.query.courseName,
        },
      })
    },

    //标签选择器
    handleTagChange(value) {
      this.form.tags = value
    },
  },
}
</script>