opms_frontend/src/views/work/train/head/components/Detail.vue

<template>
  <el-dialog append-to-body :title="title" :visible.sync="dialogFormVisible" @close="close">
    <el-descriptions class="margin-top" :column="2" border>
      <el-descriptions-item>
        <template slot="label">培训主题</template>
        {{ detail.trainTitle }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">培训日期</template>
        {{ detail.trainDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">培训开始时间</template>
        {{ detail.trainConcreteStartTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">培训结束时间</template>
        {{ detail.trainConcreteEndTime }}
      </el-descriptions-item>
    </el-descriptions>

    <vxe-table
      ref="feedBackRef"
      class="mt10"
      border
      resizable
      show-overflow
      :data="detail.feedbackDetailList"
      :edit-config="{ trigger: 'click', mode: 'cell' }"
      style="height: 300px">
      <vxe-column type="seq" width="60" />
      <vxe-column field="saleName" title="销售工程师" width="100" />
      <vxe-column field="distributorName" title="渠道名称" width="100" />

      <vxe-column field="trainingPersNum" title="参训人数" width="100">
        <template #default="{ row }" v-if="type == 'edit'">
          <vxe-input
            v-model.number="row.trainingPersNum"
            type="text"
            :disabled="type == 'detail'"
            placeholder="请输入参训人数" />
        </template>
        <template #default="{ row }" v-else>
          {{ row.trainingPersNum }}
        </template>
      </vxe-column>
      <vxe-column field="distributorFeedback" title="经销商反馈">
        <template #default="{ row }" v-if="type == 'edit'">
          <vxe-input
            v-model="row.distributorFeedback"
            type="text"
            :disabled="type == 'detail'"
            placeholder="请输入经销商反馈" />
        </template>
        <template #default="{ row }" v-else>
          {{ row.distributorFeedback }}
        </template>
      </vxe-column>
    </vxe-table>

    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button v-if="!form.id" :loading="loading" type="primary" @click="save">确 定</el-button>
    </template>

    <!-- 选择支持人员弹窗 -->
    <select-user ref="selectUser" @save="selectUser" />
    <!-- 选择经销商弹窗 -->
    <select-distributor ref="selectDistributor" :multiple="true" :query-params="queryParams" @save="saveDistributors" />
  </el-dialog>
</template>

<script>
  import api from '@/api/work/trainHead'
  import to from 'await-to-js'
  import typeApi from '@/api/work/type'
  import SelectUser from '@/components/select/SelectUser'
  import { mapGetters } from 'vuex'
  import SelectDistributor from '@/components/select/SelectDistributor'

  export default {
    name: 'WorkOrderEdit',
    components: {
      SelectUser,
      SelectDistributor,
    },
    props: {
      businessInfo: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        sexList: [
          { distributorId: 1, distributorName: 'a' },
          { distributorId: 2, distributorName: 'b' },
          { distributorId: 3, distributorName: 'c' },
        ],
        userList: [
          { saleId: 1, saleName: '工程师1' },
          { saleId: 2, saleName: '工程师2' },
          { saleId: 3, saleName: '工程师3' },
        ],
        type: '',
        row: {},
        index: 0,
        queryParams: {
          distType: '',
        },
        loading: false,
        form: {
          id: undefined,
          trainTitle: undefined,
          trainDate: undefined,
          trainConcreteStartTime: undefined,
          trainConcreteEndTime: undefined,
          feedbackList: [],
        },
        rules: {
          trainTitle: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          trainDate: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          trainConcreteStartTime: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
          trainConcreteEndTime: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }],
        },
        title: '',
        dialogFormVisible: false,
        orderTypeList: [],
        dingtalkForm: undefined,
        detail: {
          id: '',
          trainTitle: '',
          trainDate: '',
          trainConcreteStartTime: '',
          trainConcreteEndTime: '',
          feedbackDetailList: [],
        },
      }
    },
    computed: {
      ...mapGetters({
        userId: 'user/id',
        nickName: 'user/nickName',
      }),
    },
    mounted() {},
    methods: {
      DeleteData(row) {
        const $table = this.$refs.feedBackRef
        $table.remove(row)
      },
      createFeedBack() {
        const $table = this.$refs.feedBackRef

        $table.insertAt(
          {
            sale: {},
            distributorList: [],
          },
          0
        )
        // if (this.form.feedbackList == undefined) {
        //   this.form.feedbackList = []
        // }
        // this.form.feedbackList.push({
        //   saleId: '',
        //   saleName: '',
        //   distributorId: '',
        //   distributorName: '',
        // })
      },
      deleteFeedBack(row) {
        // const index = this.form.feedbackList.findIndex((item) => {
        //   item == row
        // })
        // this.form.feedbackList.splice(index, 1)
        const $table = this.$refs.feedBackRef
        $table.remove(row)
      },
      async getOrderTypeList() {
        this.orderTypeList.splice(0, this.orderTypeList.length)
        const { data } = await typeApi.getList()
        for (let item of data.list) {
          this.orderTypeList.push(item)
        }
        this.changeOrderType()
      },
      changeOrderType() {},
      // handleUploadFile(file) {
      //   this.form.file = file
      // },
      handleSelectUser(rowIndex) {
        // Object.assign(this.row, rowIndex)
        this.index = rowIndex
        // const index = this.form.feedbackList.findIndex(item=>{
        //   item==row
        // })
        this.$refs.selectUser.open()
      },
      selectUser(val) {
        if (val && val.length > 0) {
          // const $table = this.$refs.feedBackRef

          // const index = this.form.feedbackList.findIndex((item) => {
          //   item == this.row
          // })

          this.$refs.feedBackRef.updateData(this.index, { saleId: val[0].id })
          this.$refs.feedBackRef.updateData(this.index, { saleName: val.map((item) => item.nickName).join() })
          console.log(' this.$refs.feedBackRef', this.$refs.feedBackRef)
          let data = this.$refs.feedBackRef.getRecordset()
          console.log('data', data)

          // this.row.saleId = val[0].id
          // this.row.saleName = val.map((item) => item.nickName).join()

          // this.$refs.feedBackRef.reload()

          // console.log('index', this.index)
          // console.log("val-------",val);
          // console.log("item",this.row);
          // console.log('this.form.feedbackList[index]', this.form.feedbackList[index])
          // this.row.saleId = val[0].id
          // this.row.saleName = val.map((item) => item.nickName).join()
          // this.form.feedbackList[this.index] = {
          //   saleId: val[0].id,
          //   saleName: val.map((item) => item.nickName).join(),
          //   distributorId: this.row.distributorId,
          //   distributorName: this.row.distributorName,
          // }
          console.log('this.form.feedbackList', this.form.feedbackList)

          console.log('row222', this.row)
        }
      },
      async showEdit(id, type) {
        console.log('id222', id)
        console.log('type', type)
        this.loading = false
        if (type == 'edit') {
          this.title = '反馈'
        } else {
          this.title = '详情'
        }
        this.type = type
        // this.form.saleId = this.userId
        // this.form.saleName = this.nickName
        this.listLoading = true
        const [err, res] = await to(api.getFeedBackDetail({ id: id }))
        if (err) return (this.listLoading = false)

        this.detail = res.data || {}

        // this.$nextTick(() => this.$refs.table.doLayout())

        this.dialogFormVisible = true
      },
      close() {
        // this.$refs['dingTalkFrom'].resetForm()
        // this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      //
      handleSelectDistributor(type) {
        this.queryParams.distType = type
        this.$refs.selectDistributor.open()
      },
      // 选中数据
      saveDistributors() {},
      async save() {
        // const $table = this.$refs.feedBackRef
        // let insertList = $table.getInsertRecords()
        // let removeList = $table.getRemoveRecords()
        // let updateList = $table.getUpdateRecords()
        // if (insertList.length > 0) {
        //   insertList.map((item) => (item.operate = '10'))
        // }
        // if (updateList.length > 0) {
        //   updateList.map((item) => (item.operate = '20'))
        // }
        // if (removeList.length > 0) {
        //   removeList.map((item) => (item.operate = '30'))
        // }
        console.log('detail.feedbackDetailList', this.detail.feedbackDetailList)
        // this.detail.feedbackDetailList = [...insertList, ...updateList, ...removeList]
        // console.log(" this.detail.feedbackDetailList", this.detail.feedbackDetailList);
        // return
        const { msg } = await api.FeedBackTrain({ feedBackTrainList: this.detail.feedbackDetailList })
        // this.loading = false
        this.$baseMessage(msg, 'success', 'vab-hey-message-success')
        this.$emit('fetch-data')
        this.close()
      },
    },
  }
</script>