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

<template>
  <a-card :bordered="false" title="系統新增">
    <a-form-model :model="form">
      <div style="width: 100%; height: 40px; margin-bottom: 8px; margin-left: 80%">
          <a-button type="primary" @click="goback">返回</a-button>
      </div>
      <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-select v-model="form.courseType" placeholder="--请选择--">
              <a-select-option value="1"> 商业 </a-select-option>
              <a-select-option value="2"> 政务 </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 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">
          <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 in personType" :key="item.id"> {{ 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 }">
            <a-upload action="/dawa/sys/oss/upload?sourceId=course" list-type="picture-card" :file-list="fileList" :headers="getToken()" @change="handleChange" @preview="handlePreview">
              <div v-if="fileList.length < 1">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>

            <!-- <a-upload name="file" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" action="" :headers="getToken()" :change="onSuccess">
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
              <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">封面图片</div>
              </div>
            </a-upload> -->
          </a-form-model-item>
        </a-col>
      </a-row>
        <div style="width: 100%; height: 40px; margin-bottom: 8px; margin-left: 50%">
          <a-button type="primary" @click="save">保存</a-button>
        </div>
    </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'

export default {
  name: 'step1',
  data() {
    return {
      dataValue: 1,
      form: {},
      personType: [
        { id: '1', name: '人员类别1' },
        { id: '2', name: '人员类别2' },
        { id: '3', name: '人员类别3' },
      ],
      
      previewVisible: false,
      fileList: [],
      previewImage :[

      ]

    }
  },
  components: {
    courseAdd,
    getCourseDetails
  },
  created() {
    if (this.$route.query.id) {
      getCourseDetails({ id: this.$route.query.id }).then(res => {
        this.form = res.data;

        this.form.courseType = this.form.courseType + '';
        this.form.industryInvolved = this.form.industryInvolved + '';
        this.form.isRequired = this.form.isRequired + '';

      });
    }
  },
  methods: {
    //获取字典值
    // getPersonType() {
    //   return dictGet(Object.assign(parameter)).then((res) => {
    //     return res
    //   })
    // },

    //显示页面上的数字
    onChange(dataValue) {
      console.log('changed', dataValue)
    },
    save() {
      console.log(this.form)
      courseAdd(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.info('保存成功')
          //新增完成后直接返回课程列表
          this.$router.push({ path: '/course/CourseList', query: {} })
        }
      })
    },

    //返回
    goback(){
      this.$router.push({path:"/course/CourseList",query:{} })
    },

    getToken() {
      let hreader = {};
      hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN);
      return hreader;
    },
    onSuccess(file) {
      console.log('1---', 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;
    },

  },

}

// 图片预览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>