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
    :maxable="true"
    :resizable="true"
    :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>