kd-aiot-frontend-eom/src/views/purchasingManage/producerManage/components/certificateQualificationsDialog.vue

<template>
  <ele-modal custom-class="ele-dialog-form long-dialog-form"
             :centered="true" :visible.sync="certificateQualificationsDialogFlag" :title="title"
             append-to-body
             :close-on-click-modal="false" width="70%" :before-close="cancel">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="证书资质" name="QC">
        <el-form ref="form" :model="form" class="el-form-box">
          <headerTitle title="基本信息"/>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label-width="50px" label="名称" prop="name"
                            :rules=" {required: true, message: '请输入',trigger: 'blur' }">
                <el-input v-model="form.name" :disabled="type=='view'" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效时间:" prop="date" label-width="90px">
                <el-date-picker
                  :disabled="type=='view'"
                  v-model="form.date"
                  style="width: 100%;"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label-width="50px" label="备注">
                <el-input type="textarea" v-model="form.remark" :disabled="type=='view'" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="附件:" prop="accessory" label-width="90px">
                <fileUpload
                  v-if="type!=='view'"
                  v-model="form.accessory"
                  module="main"
                  :showLib="false"
                  :limit="10"/>
                <div v-else>
                  <el-link
                    v-for="link in form.accessory"
                    :key="link.id"
                    type="primary"
                    :underline="false"
                    @click="downloadFile(link)">
                    {{ link.name }}
                  </el-link>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <headerTitle title="资质信息"/>
          <ele-pro-table ref="linkTable" :columns="columns" :datasource="form.detailsList"  height="300px"
                         :need-page="false">
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>

              <el-button v-if="type!=='view'" type="primary" @click="handleAdd">添加</el-button>
            </template>
            <template v-slot:name="scope">
              <el-form-item :prop="'detailsList.' + scope.$index + '.name'" :rules="{
            required: true,
            message: '',
            trigger: 'change'
          }">
                <el-select v-if="type!=='view'" v-model="scope.row.name" clearable
                           @change="(val)=>handleChangeType(val,scope.row)">
                  <el-option :disabled="disabledToType(scope.row).includes(item.dictCode)"
                             v-for="item in dictList" :value="item.dictCode"
                             :label="item.dictValue"></el-option>
                </el-select>
                <!--                <DictSelection v-if="type!=='view'" clearable dictName="客户/生产厂家资质类型" v-model="scope.row.type"-->
                <!--                               @itemChange="(val)=>handleChangeType(val,scope.row)"></DictSelection>-->
                <span v-else>{{ getLabelName(dictList,scope.row.name)  }}</span>
              </el-form-item>

            </template>
            <template v-slot:code="scope">
              <el-form-item :prop="'detailsList.' + scope.$index + '.code'" :rules="{
            required: true,
            message: '',
            trigger: 'blur'
          }">
                <el-input v-model="scope.row.code" :disabled="type=='view'" clearable></el-input>
              </el-form-item>

            </template>
            <template v-slot:businessRange="scope">
              <el-form-item :prop="'detailsList.' + scope.$index + '.businessRange'">
                <el-input type="textarea" v-model="scope.row.businessRange" :disabled="type=='view'" clearable></el-input>
              </el-form-item>
            </template>
            <template v-slot:startTime="scope">
              <el-form-item inline-message :prop="'detailsList.' + scope.$index + '.startTime'" :rules="{
            required: false,
            message: '',
            trigger: 'change'

          }">
                <el-date-picker
                  :disabled="type=='view'"
                  v-model="scope.row.startTime"
                  type="date"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>

            </template>
            <template v-slot:endTime="scope">
              <el-form-item :prop="'detailsList.' + scope.$index + '.endTime'"
                            :rules="{
            required: false,
            validator: validateEndDate(scope.row,scope.$index),
            trigger: ['blur','change']
          }">
                <el-date-picker
                  :disabled="type=='view'"
                  v-model="scope.row.endTime"
                  type="date"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>

            </template>
            <template v-slot:noticePersonName="scope">
              <el-form-item :prop="'detailsList.' + scope.$index + '.noticePersonName'" :rules="{
            required: true,
            message: '',
            trigger: ['blur','change']

          }">
                <el-input
                  :disabled="type=='view'"
                  @click.native="openStaffSelection(scope.$index)"
                  v-model="scope.row.noticePersonName"
                  placeholder="请选择"
                ></el-input>
              </el-form-item>

            </template>
            <template v-slot:accessory="scope">
              <el-form-item :prop="'detailsList.' + scope.$index + '.accessory'" :rules="{
            required: true,
            message: '',
            trigger: ['change','blur']
          }">
                <fileUpload
                  v-if="type!=='view'"
                  v-model="scope.row.accessory"
                  module="main"
                  :showLib="false"
                  :limit="10"/>
                <div v-else>
                  <el-link
                    v-for="link in scope.row.accessory"
                    :key="link.id"
                    type="primary"
                    :underline="false"
                    @click="downloadFile(link)">
                    {{ link.name }}
                  </el-link>
                </div>
              </el-form-item>

            </template>
            <template v-slot:type="scope">
              <el-form-item :prop="'detailsList.' + scope.$index + '.type'">
                <el-select v-if="type!=='view'" v-model="scope.row.type" clearable>
                  <el-option v-for="item in typeList" :value="item.dictCode"
                             :label="item.dictValue"></el-option>
                </el-select>
                <!--                <DictSelection v-if="type!=='view'" clearable dictName="客户/生产厂家资质类型" v-model="scope.row.type"-->
                <!--                               @itemChange="(val)=>handleChangeType(val,scope.row)"></DictSelection>-->
                <span v-else>{{ getLabelName(typeList,scope.row.type)  }}</span>
              </el-form-item>

            </template>
            <template v-slot:level="scope">
              <el-form-item :prop="'detailsList.' + scope.$index + '.level'">
                <el-select v-if="type!=='view'" v-model="scope.row.level" clearable>
                  <el-option v-for="item in levelOptions" :value="item.dictCode"
                             :label="item.dictValue"></el-option>
                </el-select>
                <!--                <DictSelection v-if="type!=='view'" clearable dictName="客户/生产厂家资质类型" v-model="scope.row.type"-->
                <!--                               @itemChange="(val)=>handleChangeType(val,scope.row)"></DictSelection>-->
                <span v-else>{{ getLabelName(levelOptions,scope.row.type)  }}</span>
              </el-form-item>
            </template>
            <template v-slot:remark="scope">
              <el-form-item :prop="'detailsList.' + scope.$index + '.remark'">
                <el-input type="textarea" :disabled="type=='view'" v-model="scope.row.remark"></el-input>
              </el-form-item>
            </template>
            <template v-slot:status="scope">
              <el-form-item :prop="'detailsList.' + scope.$index + '.status'">
                <el-tag v-if="scope.row.status" :type="statusTagTypeList[scope.row.status]">
                  {{ statusList[scope.row.status] }}
                </el-tag>
              </el-form-item>
            </template>
            <template v-slot:isRequired="{ column }">
              <span class="is-required">{{ column.label }}</span>
            </template>
            <template v-slot:action="{ row, $index }">
              <el-popconfirm
                class="ele-action"
                title="确定要删除该信息吗？"
                @confirm="handleRemove($index)"
              >
                <template v-slot:reference>
                  <el-link
                    v-if="type!=='view'"
                    type="danger"
                    :underline="false"
                    icon="el-icon-delete"
                  >
                    删除
                  </el-link>
                </template>
              </el-popconfirm>
            </template>

          </ele-pro-table>

        </el-form>

      </el-tab-pane>
      <el-tab-pane v-if="form.processInstanceId" label="流程详情" name="processInstance">
        <bpmDetail :id="form.processInstanceId"></bpmDetail>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" v-if="activeName=='QC'">
      <el-button v-if="type!=='view'" type="primary" @click="handleSave(false)">保存</el-button>
      <el-button v-if="type!=='view'" type="primary" plan @click="handleSave(true)">提交</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
    <staffSelection
      ref="staffSelection"
      @confirm="confirmStaffSelection"
    ></staffSelection>

  </ele-modal>
</template>
<script>
import FileUpload from "@/components/upload/fileUpload.vue";
import staffSelection from "@/components/staffSelection/staffSelection.vue";
import {
  contactQcPackDetailAPI,
  contactQcPackSaveAPI,
  contactQcPackUpdateAPI,
  contactQcSubmit
} from "@/api/saleManage/contact";
import {getFile} from "@/api/system/file";
import bpmDetail from "@/views/bpm/processInstance/detail.vue";
import {mapActions, mapGetters} from "vuex";
import dictEnum from "@/enum/dict";

export default {
  name: "certificateQualificationsDialog",
  components: {bpmDetail, FileUpload, staffSelection},
  props: {
    certificateQualificationsDialogFlag: Boolean,
    contactInfo: Object,
    typeInfo: String
  },
  data() {
    return {
      title: '',
      type: '',
      activeName: 'QC',
      defaultData: {
        accessory: [],
        name: "",
        noticePersonId: "",
        noticePersonName: "",
        num: "",
        remark: "",
        businessRange: "",
        type: "",
        endTime: "",
        startTime: ""
      },
      form: {
        accessory:[],
        detailsList: [],
        relationName: '',
        name: '',
        date: [],
        remark: '',

      },
      curIndex: null,
      levelOptions: [
        {
          dictValue: '初级',
          dictCode: '1'
        },
        {
          dictValue: '中级',
          dictCode: '2'
        },
        {
          dictValue: '高级',
          dictCode: '3'
        }
      ],
      statusList: {
        10: '有效',
        20: '无效',
        30: '已过期',
      },
      statusTagTypeList: {
        10: 'success',
        20: 'info',
        30: 'danger',
      },
    }
  },
  computed: {
    ...mapGetters(['dict']),
    dictList() {
      return this.dict[dictEnum['客户/生产厂家资质类型']] || [];
    },
    typeList() {
      return this.dict[dictEnum['工种类型']] || [];
    },
    columns() {
      return [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '名称',
          prop: 'name',
          slot: 'name',
          headerSlot: 'isRequired',
          minWidth: 180,
          align: 'center'
        },
        {
          label: '编号',
          prop: 'code',
          slot: 'code',
          headerSlot: 'isRequired',
          minWidth: 120,
          align: 'center'
        },
        {
          label: '许可/经营范围',
          prop: 'businessRange',
          slot: 'businessRange',
          minWidth: 140,
          align: 'center'
        },
        {
          label: '有效期起始日期',
          prop: 'startTime',
          slot: 'startTime',
          // headerSlot: 'isRequired',
          minWidth: 160,
          align: 'center'
        },
        {
          label: '有效期截止日期',
          prop: 'endTime',
          slot: 'endTime',
          // headerSlot: 'isRequired',
          minWidth: 160,
          align: 'center'
        },
        {
          label: '通知人',
          prop: 'noticePersonName',
          slot: 'noticePersonName',
          headerSlot: 'isRequired',
          minWidth: 140,
          align: 'center'
        },
        {
          label: '附件',
          prop: 'accessory',
          slot: 'accessory',
          headerSlot: 'isRequired',
          minWidth: 140,
        },
        {
          label: '等级',
          prop: 'level',
          slot: 'level',
          minWidth: 140,
          align: 'center'
        },
        {
          label: '分类',
          prop: 'type',
          slot: 'type',
          minWidth: 140,
          align: 'center'
        },
        {
          label: '备注',
          prop: 'remark',
          slot: 'remark',
          minWidth: 140,
          align: 'center'
        },
        {
          label: '状态',
          prop: 'status',
          slot: 'status',
          align: 'center',
        },
        {
          action: 'action',
          slot: 'action',
          label: '操作',
          align: 'center',
          fixed:'right'
        }
      ]
    },
    disabledToType() {
      return (row) => {
        let list = this.form.detailsList.map(item => item.name)
        let dictCodeList = this.dictList.map(item => item.dictCode)
        let intersectionList = list.filter((v) => dictCodeList.indexOf(v) > -1)
        intersectionList = intersectionList.filter(v => row.name !== v)
        return intersectionList
      }
    },
  },
  created() {
    this.requestDict('客户/生产厂家资质类型');
    this.requestDict('工种类型');
  },
  methods: {
    ...mapActions('dict', ['requestDict']),
    getLabelName(arr,id){
      if(!id) return ''
      return arr.find(item=>item.dictCode == id)?.dictValue
    },
    //删除资质
    handleRemove(index) {
      this.form.detailsList.splice(index, 1)
    },
    //结束日期验证
    validateEndDate(row, index) {
      return (rule, value, callback) => {
        //new Error('')
        if (!value) return callback()
        if (
          row.endTime &&
          row.startTime &&
          value < row.startTime
        ) {
          callback(new Error('截止日期不能小于起始日期'))
        } else {
          callback()
        }
      }
    },
    //页面初始化
    init(type, row = {}) {
      this.title = type == 'add' ? '新增' : type == 'update' ? '修改' : '详情'
      this.type = type
      if (type !== 'add') {
        this.getCertificateInfo(row)
      }
    },
    async getCertificateInfo(row) {
      this.form = await contactQcPackDetailAPI(row.id)
      this.form.date = [this.form.startTime, this.form.endTime]
    },
    //打开选择负责人弹窗
    openStaffSelection(index) {
      this.curIndex = index
      this.$refs.staffSelection.open([]);
    },
    //选择负责人回调
    confirmStaffSelection(data) {
      this.form.detailsList[this.curIndex].noticePersonName = data.map((item) => item.name).toString();
      this.form.detailsList[this.curIndex].noticePersonId = data.map((item) => item.id).toString();
    },
    //新增
    handleAdd() {
      this.form.detailsList.push({...this.defaultData})
    },
    //修改资质证书
    handleChangeType(val, row) {
      if (!val) return row.name = ''
      row.name = this.dictList.find(i => i.dictCode == val)?.dictValue || ''

    },
    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },
    //保存/提交
    handleSave(isSub) {
      let msg = this.typeInfo == '1' ? '请保存客户信息后新增资质':'请保存生产厂家信息后新增资质'
      if (!this.contactInfo.id) return this.$message.success(msg)
      this.$refs.form.validate(async (valid) => {
        console.log(1111,valid);
        if (!valid) return this.$message.warning('有必填项未填写，请检查')
        if (!this.form.detailsList.length) return this.$message.warning('至少保存一条资质信息')
        this.form.certificationType = this.typeInfo
        this.form.relationId = this.contactInfo.id
        this.form.relationName = this.contactInfo.name
        this.form.startTime = this.form.date[0]
        this.form.endTime = this.form.date[1]
        let api = this.type == 'add' ? contactQcPackSaveAPI : contactQcPackUpdateAPI
        let id = await api(this.form)
        if (isSub) {
          await contactQcSubmit({businessId: id, certificationType: this.typeInfo})
        }
        this.$message.success('保存成功')
        this.$emit('reload')
        this.cancel()
      })

    },
    //关闭弹窗
    cancel() {
      this.$emit('update:certificateQualificationsDialogFlag', false)
    },
  }

}
</script>
<style scoped lang="scss">
:deep.el-form-item {
  margin-bottom: 0
}
</style>