admin/src/pages/system/courseManager/courseList/add.vue

<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
        <li class="flex-h">
          <span>课程主图：<em>*</em></span>
          <div class="flex-item">
            <div>
              <el-upload
                class="avatar-uploader"
                action='string'
                :http-request="toolClass.upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="detail.CourseImg" :src="detail.CourseImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>课程名称：<em>*</em></span>
          <div class="flex-item">
            <div style="width: 50%;">
              <el-input
                placeholder="请输入课程名称"
                v-model="detail.CourseName"
                clearable
                >
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>课程类型：<em>*</em></span>
          <div class="flex-item">
            <div style="width: 50%;">
              <el-select v-model="detail.LocationId" placeholder="请选择">
                <el-option
                  v-for="item in location"
                  :key="item.LocationId"
                  :label="item.LocationName"
                  :value="item.LocationId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>课程价格：<em>*</em></span>
          <div class="flex-item">
            <div style="width: 200px;">
              <el-input
                placeholder="请输入课程价格"
                v-model="detail.Price"
                clearable
                >
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>案场：<em>*</em></span>
          <div class="flex-item">
            <div style="width: 50%;">
              <el-select v-model="CaseId" placeholder="请选择">
                <el-option
                  v-for="item in cases"
                  :key="item.CaseId"
                  :label="item.CaseName"
                  :value="item.CaseId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>开课人数：<em>*</em></span>
          <div class="flex-item">
            <div style="width: 200px;">
              <el-input
                placeholder="请输入开课人数"
                v-model="detail.MaxNum"
                clearable
                >
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>最小开课人数：<em>*</em></span>
          <div class="flex-item">
            <div style="width: 200px;">
              <el-input
                placeholder="请输入开课人数"
                v-model="detail.MinNum"
                clearable
                >
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>课时数：<em>*</em></span>
          <div class="flex-item">
            <div style="width: 200px;">
              <el-input
                placeholder="请输入课时数"
                v-model="detail.CourseNum"
                clearable
                >
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>课程时间：<em>*</em></span>
          <div class="flex-item">
            <div>
              <el-date-picker
                value-format="yyyy-MM-ddT00:00:00Z"
                :picker-options="pickerOptions"
                v-model="detail.BeginDate"
                type="date"
                placeholder="选择起始日期">
              </el-date-picker>
              <span style="line-height:40px;">至</span>
              <el-date-picker
                value-format="yyyy-MM-ddT23:59:59Z"
                :picker-options="pickerOptions"
                v-model="detail.EndDate"
                type="date"
                placeholder="选择截止日期">
              </el-date-picker>
              <!-- <el-date-picker
                v-model="courseDate"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                :picker-options="pickerOptions">
              </el-date-picker> -->
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>课程计划备注：</span>
          <div class="flex-item">
            <div style="width: 50%;">
              <el-input
                type="textarea"
                maxlength="10"
                autosize
                placeholder="请输入备注"
                v-model="detail.Remark"
                clearable
                >
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>课程标签：</span>
          <div class="flex-item">
            <div style="width: 50%;">
              <el-select
              style="width:100%"
                v-model="tags"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择课程标签">
                <el-option
                  v-for="item in tagList.list"
                  :key="item.TagId"
                  :label="item.TagName"
                  :value="item.TagId"
                  :value-key="item.TagId"
                  >
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>课程简介：</span>
          <div class="flex-item">
            <div style="width: 50%;">
              <el-input
                type="textarea"
                autosize
                placeholder="请输入课程简介"
                v-model="detail.CourseDesc"
                clearable
                >
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>是否精选课程：<em>*</em></span>
          <div class="flex-item">
            <div>
              <el-radio v-model="detail.IsSelect" :label="1">是</el-radio>
              <el-radio v-model="detail.IsSelect" :label="0">否</el-radio>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click="submit">保存</el-button>
          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'

const { mapState: mapCourseState, mapActions: mapCourseActions } = createNamespacedHelpers('course')
const { mapState: mapLocationState, mapActions: mapLocationActions } = createNamespacedHelpers('cms')
const { mapState: mapTagState, mapActions: mapTagActions } = createNamespacedHelpers('coursetag')

export default {
  name: '',
  data () {
    return {
      // pickerOptions: {
      //   shortcuts: [{
      //     text: '最近一周',
      //     onClick (picker) {
      //       const end = new Date()
      //       const start = new Date()
      //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      //       picker.$emit('pick', [start, end])
      //     }
      //   }, {
      //     text: '最近一个月',
      //     onClick (picker) {
      //       const end = new Date()
      //       const start = new Date()
      //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      //       picker.$emit('pick', [start, end])
      //     }
      //   }, {
      //     text: '最近三个月',
      //     onClick (picker) {
      //       const end = new Date()
      //       const start = new Date()
      //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      //       picker.$emit('pick', [start, end])
      //     }
      //   }]
      // },
    }
  },
  computed: {
    ...mapLocationState({
      location: x => x.location
    }),
    ...mapCourseState({
      detail: x => x.courseInfo
    }),
    ...mapState({
      cases: x => x.app.cases.list,
      caseid: x => x.app.cases.default,
      orgid: x => x.app.user.OrgId,
    }),
    ...mapTagState({
      tagList: x => x.tagList
    }),
    CaseId: {
      get () {
        return this.detail.CaseId || this.caseid
      },
      set (val) {
        this.UpdateInfo({ ...this.detail, CaseId: val })
      }
    },
    pickerOptions () {
      var beginDate = Date.now() - 24 * 60 * 60 * 1000
      return {
        disabledDate (time) {
          return time.getTime() < beginDate
        }
      }
    },
    courseDate: {
      get () {
        return this.detail.BeginDate && this.detail.EndDate ? [this.detail.BeginDate, this.detail.EndDate] : []
      },
      set (val) {
        this.UpdateInfo({ ...this.detail, BeginDate: val[0], EndDate: val[1] })
      },
    },
    tags: {
      get () {
        return (this.detail.CourseTags || []).map(x => x.TagId)
      },
      set (val) {
        let v = val.map(x => {
          return {
            TagId: x,
          }
        })
        this.UpdateInfo({ ...this.detail, CourseTags: v })
      }
    },
  },
  components: {},
  methods: {
    ...mapCourseActions([
      'GetCourseByID',
      'AddCourse',
      'UpdateCourse',
      'UpdateInfo',
    ]),
    ...mapLocationActions([
      'updateLocationInfo',
    ]),
    ...mapTagActions([
      'GetCourseTagList',
    ]),
    handleAvatarSuccess (res, file) {
      this.UpdateInfo({ ...this.detail, CourseImg: res.result.url })
    },
    upLoad (item) {
      this.toolClass.upload(item).then((res) => { this.handleAvatarSuccess(res, item.file) })
    },
    checkFn (arr) {
      for (var n = 0; n < arr.length; n++) {
        if (arr[n].type === 'isNull' && !arr[n].target) {
          this.$message({
            message: arr[n].errorMsg,
            type: 'error'
          })
          return false
        }
      }
      return true
    },
    submit () { // 提交数据
      var checkOff = this.checkFn([{
        target: Boolean(this.detail.CourseImg || ''),
        errorMsg: '课程主图不能为空',
        type: 'isNull'
      }, {
        target: Boolean(this.detail.CourseName || ''),
        errorMsg: '课程名称不能为空',
        type: 'isNull'
      }, {
        target: Boolean(this.detail.LocationId || ''),
        errorMsg: '课程类型不能为空',
        type: 'isNull'
      }, {
        target: Boolean(this.detail.Price || ''),
        errorMsg: '课程价格不能为空',
        type: 'isNull'
      }, {
        target: Boolean(this.detail.MaxNum || ''),
        errorMsg: '开课人数不能为空',
        type: 'isNull'
      }, {
        target: Boolean(this.detail.MinNum || ''),
        errorMsg: '最小开课人数不能为空',
        type: 'isNull'
      }, {
        target: Boolean(this.detail.CourseNum || ''),
        errorMsg: '课时数不能为空',
        type: 'isNull'
      }, {
        target: Boolean(this.detail.BeginDate || ''),
        errorMsg: '起始日期不能为空',
        type: 'isNull'
      }, {
        target: Boolean(this.detail.EndDate || ''),
        errorMsg: '截止日期不能为空',
        type: 'isNull'
      }, {
        target: Boolean(String(this.detail.IsSelect) || ''),
        errorMsg: '是否精选课程不能为空',
        type: 'isNull'
      }])
      if (!checkOff) {
        return false
      }
      const { id } = this.$route.query
      if (!id || id === '') {
        this.UpdateInfo({ ...this.detail, CourseId: '' })
      }
      const _that = this
      this.detail.tagids = this.tags.map(x => {
        let tagfilter = (_that.tagList.list || []).filter(tag => tag.TagId === x)
        if (tagfilter.length > 0) {
          return tagfilter[0].TagName + ':' + tagfilter[0].TagId
        } else {
          return x
        }
      }).join(',')
      if ((this.detail.CourseId || '') === '') {
        this.detail.OrgId = this.orgid
        if (!this.detail.CaseId || this.detail.CaseId === '') {
          this.detail.CaseId = this.caseid
        }
        this.AddCourse({ ...this.detail, callback: _that.afterSave })
      } else {
        this.UpdateCourse({ ...this.detail, callback: _that.afterSave })
      }
    },
    afterSave () {
      this.$message({
        type: 'success',
        message: '操作成功'
      })
      this.$router.push({ name: 'courseList' })
    },
    cancel () {
      this.$router.push({ name: 'courseList' })
    }
  },
  mounted () {
    this.updateLocationInfo(false)
    this.GetCourseTagList({ pagesize: 100 })
    const { id } = this.$route.query
    if (id && id !== '') {
      this.GetCourseByID({ id: id })
    } else {
      // this.SetNull()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>