opms_frontend/src/views/work/train/sale/components/Edit.vue

<template>
  <el-dialog append-to-body :title="title" :visible.sync="dialogFormVisible" @close="close('form')">
    <el-form ref="form" label-width="120px" :model="form" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="渠道名称" prop="distributorName">
            <el-input
              v-model="form.distributorName"
              readonly
              suffix-icon="el-icon-search"
              @focus="handleSelectDistributor" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="主营产品" prop="mainProduct">
            <el-input v-model="form.mainProduct" :rows="2" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="主要客户" prop="mainCustomer">
            <el-input v-model="form.mainCustomer" :rows="2" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="参训人员及职位" prop="trainees">
            <el-input v-model="form.trainees" :rows="2" type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="期望培训日期" prop="expectTrainDate">
            <el-date-picker
              v-model="form.expectTrainDate"
              placeholder="选择期望培训日期"
              style="width: 100%"
              type="date"
              value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="期望时间" prop="expectTime">
            <el-time-picker
              v-model="form.expectTime"
              end-placeholder="结束时间"
              format="HH:mm"
              is-range
              placeholder="选择时间范围"
              range-separator="至"
              start-placeholder="开始时间"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="培训主题" prop="trainTitle">
            <el-input v-model="form.trainTitle" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="讲师要求" prop="instructorRequire">
            <el-select v-model="form.instructorRequire" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in options" :key="item.nickName" :label="item.nickName" :value="item.nickName" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="渠道关注要点" prop="focusPoint">
            <el-input v-model="form.focusPoint" :rows="2" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="close('form')">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="save">确 定</el-button>
    </template>
    <!-- 选择经销商弹窗 -->
    <select-distributor ref="selectDistributor" @save="selectDistributor" />
  </el-dialog>
</template>

<script>
  import Api from '@/api/work/trainSale'
  import userApi from '@/api/system/user'
  import to from 'await-to-js'
  import SelectDistributor from '@/components/select/SelectDistributor'

  export default {
    name: 'WorkOrderEdit',
    components: { SelectDistributor },
    props: {
      businessInfo: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        loading: false,
        form: {
          distributorName: undefined,
          mainProduct: undefined,
          mainCustomer: undefined,
          trainees: undefined,
          expectTrainDate: undefined,
          expectStartTime: undefined,
          expectEndTime: undefined,
          trainTitle: undefined,
          instructorRequire: undefined,
          focusPoint: undefined,
          expectTime: [new Date(2016, 9, 10, 0, 0), new Date(2016, 9, 10, 23, 59)],
        },
        rules: {
          distributorName: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          mainProduct: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          mainCustomer: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          trainees: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          expectTrainDate: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          expectTime: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          trainTitle: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          instructorRequire: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          focusPoint: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
        },
        title: '',
        dialogTyte: '',
        dialogFormVisible: false,
        dingtalkForm: undefined,
        options: [],
      }
    },
    mounted() {},
    methods: {
      async getUser() {
        const [err, res] = await to(userApi.getList({ orderBy: 'userName', pageNum: 1, pageSize: 100, status: '10' }))
        if (err) return
        if (res.code == 200 && res.data) {
          this.options = res.data.list
        }
      },
      showEdit(row) {
        this.getUser()
        this.loading = false
        if (!row) {
          this.title = '添加'
          this.dialogTyte = 'add'
        } else {
          this.title = '编辑'
          this.dialogTyte = 'edit'
          this.form = Object.assign({}, row)
          let time = []
          time.push(new Date(this.form.expectStartTime), new Date(this.form.expectEndTime))
          this.form.expectTime = time
        }
        this.dialogFormVisible = true
      },
      close(formName) {
        this.$refs[formName].resetFields()
        this.form = this.$options.data().form
        if (this.dingtalkForm && this.dingtalkForm.items) {
          this.dingtalkForm.items.splice(0, this.dingtalkForm.items.length)
        }
        this.dialogFormVisible = false
      },
      handleSelectDistributor() {
        this.$refs.selectDistributor.open()
      },
      selectDistributor(val) {
        if (val && val.length > 0) {
          this.form.distributorId = val[0].id
          this.form.distributorName = val.map((item) => item.distName).join()
        }
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            let start = this.form.expectTime[0].setHours(this.form.expectTime[0].getHours() + 8)
            let end = this.form.expectTime[1].setHours(this.form.expectTime[1].getHours() + 8)
            this.form.expectStartTime = new Date(start)
            this.form.expectEndTime = new Date(end)
            if (this.dialogTyte === 'add') {
              const { msg } = await Api.doAdd(this.form)
              this.loading = false
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
              this.$emit('fetch-data')
              this.close('form')
            } else if (this.dialogTyte === 'edit') {
              const { msg } = await Api.doEdit(this.form)
              this.loading = false
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
              this.$emit('fetch-data')
              this.close('form')
            }
          } else {
            return false
          }
        })
      },
    },
  }
</script>