kd-aiot-frontend-qms/src/views/inspectionProjectTask/components/inspectionProjectTaskSend.vue

<template>
  <ele-modal
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :title="type == 1 ? '检测派单' : '检测请托'"
    :visible.sync="visible"
    :maxable="true"
    @close="cancel"
  >
    <header-title
      :title="recordingMethod == 1 ? '检测项信息' : '样品信息'"
    ></header-title>
    <ele-pro-table
      :needPage="false"
      :columns="tableColumns"
      :datasource="list"
      :selection.sync="selection"
      rowKey="id"
      ref="table"
    ></ele-pro-table>
    <header-title title="派单信息"></header-title>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      class="el-form-box"
      label-width="120px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="工单记录方法：" prop="recordingMethod">
            <el-select
              style="width: 100%"
              v-model="recordingMethod"
              placeholder="请选择"
              :disabled="isDisabled"
              @change="recordingMethodChange"
            >
              <el-option
                v-for="item in recordingMethodList"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="recordingMethod == 1">
          <el-form-item label="任务记录方法：" prop="recordingMethod1">
            <el-select
              style="width: 100%"
              v-model="recordingMethod1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in recordingMethodList"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item
            :label="type == 1 ? '任务单号' : '检测请托单号'"
            prop="code"
          >
            <el-input
              v-model="form.code"
              placeholder=" "
              disabled
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="任务名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入"
            ></el-input> </el-form-item></el-col
      ></el-row>
      <el-row v-if="type == 1">
        <el-col :span="8">
          <el-form-item label="执行部门" prop="executeDeptId">
            <deptSelect
              v-model="form.executeDeptId"
              @changeGroup="searchDeptNodeClick"
              filterable
              company-scope
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="执行人" prop="executeUserId">
            <userSelect
              v-model="form.executeUserId"
              :group-id="form.executeDeptId"
              :label="form.executeUserName"
              @change="changeExecutor"
              :placeholder="form.executeDeptId ? '请选择人员' : '请先选择部门'"
            /> </el-form-item></el-col
      ></el-row>
      <el-row v-else>
        <el-col :span="8">
          <el-form-item label="接收部门" prop="receiveDeptId">
            <deptSelect
              v-model="form.receiveDeptId"
              @changeGroup="searchDeptNodeClick"
              ref="deptSelect"
              filterable
              company-scope
            /> </el-form-item
        ></el-col>
        <el-col :span="8">
          <el-form-item label="接收人" prop="receiveUserId">
            <userSelect
              v-model="form.receiveUserId"
              :group-id="form.receiveDeptId"
              :label="form.receiveUserName"
              @change="changeExecutor"
              :placeholder="form.receiveDeptId ? '请选择人员' : '请先选择部门'"
            /> </el-form-item></el-col
      ></el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="要求完成时间" prop="requiredCompletionTime">
            <el-date-picker
              v-model="form.requiredCompletionTime"
              style="width: 100%"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder=" "
            >
            </el-date-picker> </el-form-item
        ></el-col>
      </el-row>
    </el-form>

    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        确认
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import {
    qualityInspectionItemDispatching,
    qualityInspectionItemRequest
  } from '@/api/inspectionProjectTask';
  import { getById, updateRecordingMethod } from '@/api/inspectionWork';
  import {
    getById as getQualityInspectionItemById,
    updateRequestentrust
  } from '@/api/inspectionProjectRequest';
  import { inspectionProjectStatus } from '@/enum/dict.js';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import userSelect from '@/components/CommomSelect/user-select.vue';
  import { recordingMethodList } from '@/utils/util.js';
  import { getCode } from '@/api/login/index.js';
  const defaultForm = {
    id: null,
    executeDeptId: '',
    executeDeptName: '',
    executeUserId: '',
    executeUserName: '',
    receiveUserId: '',
    receiveUserName: '',
    name: '',
    code: '',
    qualityWorkOrderId: '',
    requiredCompletionTime: '',
    type: 1
  };
  export default {
    components: { deptSelect, userSelect },

    data() {
      return {
        type: 1,
        recordingMethodList,
        pgaeName: '',
        form: { ...defaultForm },
        selection: [],
        list: [],
        templateLis: [],
        qualitySampleList: [],
        rules: {
          executeDeptId: [
            { required: true, message: '请选择部门', trigger: 'blur' }
          ],
          executeUserId: [
            { required: true, message: '请选择人员', trigger: 'blur' }
          ],
          receiveDeptId: [
            { required: true, message: '请选择部门', trigger: 'blur' }
          ],
          // receiveUserId: [
          //   { required: true, message: '请选择人员', trigger: 'blur' }
          // ],
          name: [
            { required: true, message: '请输入任务名称', trigger: 'blur' }
          ],
          requiredCompletionTime: [
            { required: true, message: '请输入要求完成日期', trigger: 'blur' }
          ]
        },
        templateIdS: [],
        loading: false,
        visible: false,
        clientEnvironmentId: 0,
        recordingMethod: 1,
        recordingMethod1: 1
      };
    },
    computed: {
      isDisabled() {
        if (
          this.isUpdate == 1 ||
          this.list.filter((item) => item.status != 0).length
        ) {
          return true;
        }

        return false;
      },
      tableColumns() {
        return this.recordingMethod == 1
          ? [
              {
                width: 45,
                type: 'index',
                columnKey: 'index',
                align: 'center',
                fixed: 'left'
              },
              {
                width: 45,
                type: 'selection',
                columnKey: 'selection',
                align: 'center',
                selectable: (row, index) => {
                  return row.status == 0 || this.templateIdS.includes(row.id);
                }
              },
              {
                minWidth: 150,
                prop: 'qualitySchemeTemplateCode',
                align: 'center',
                label: '检测方案编码',
                showOverflowTooltip: true
              },
              {
                minWidth: 120,
                prop: 'qualitySchemeTemplateName',
                align: 'center',
                label: '检测方案名称',
                showOverflowTooltip: true
              },
              {
                minWidth: 100,
                prop: 'categoryLevelClassName',
                align: 'center',
                label: '检测类型',
                showOverflowTooltip: true
              },
              {
                minWidth: 130,
                prop: 'inspectionCode',
                align: 'center',
                label: '检测项编码',
                showOverflowTooltip: true
              },
              {
                minWidth: 120,
                prop: 'inspectionName',
                align: 'center',
                label: '检测项名称',
                showOverflowTooltip: true
              },
              {
                minWidth: 150,
                prop: 'defaultValue',
                align: 'center',
                label: '工艺参数',
                showOverflowTooltip: true
              },
              {
                minWidth: 150,
                prop: 'status',
                align: 'center',
                formatter: (row) => {
                  return (
                    inspectionProjectStatus.find(
                      (item) => item.value === row.status
                    )?.label || ''
                  );
                },

                label: '状态',
                showOverflowTooltip: true
              }
            ]
          : [
              {
                width: 45,
                type: 'index',
                columnKey: 'index',
                align: 'center',
                fixed: 'left'
              },
              {
                width: 45,
                type: 'selection',
                columnKey: 'selection',
                fixed: 'left',
                align: 'center',
                selectable: (row, index) => {
                  return row.status == 0 || this.templateIdS.includes(row.id);
                }
              },
              {
                label: '样品编码',
                prop: 'sampleCode',
                minWidth: '200',
                align: 'center',
                fixed: 'left'
              },
              {
                label: '编码',
                minWidth: '200',
                prop: 'categoryCode',
                align: 'center',
                fixed: 'left'
              },
              {
                label: '名称',
                minWidth: '150',
                prop: 'categoryName',
                align: 'center'
              },
              {
                label: '批次号',
                minWidth: '150',
                prop: 'batchNo',
                align: 'center'
              },
              {
                label: '发货条码',
                minWidth: '150',
                prop: 'barcodes',
                align: 'center'
              },
              {
                label: '包装编码',
                minWidth: '150',
                prop: 'packageNo',
                align: 'center'
              },
              {
                label: '包装数量',
                minWidth: '150',
                prop: 'packingQuantity',
                align: 'center'
              },
              { label: '包装单位', prop: 'packingUnit', align: 'center' },
              { label: '样品数量', prop: 'measureQuantity', align: 'center' },
              { label: '计量单位', prop: 'measureUnit', align: 'center' },
              {
                label: '供应商名称',
                prop: 'supplierName',
                align: 'center',
                width: '120'
              },
              {
                label: '供应商代号',
                prop: 'supplierCode',
                align: 'center',
                width: '120'
              },
              {
                label: '物料代号',
                prop: 'materielDesignation',
                align: 'center',
                slot: 'materielDesignation',
                width: '120'
              },
              {
                label: '客户代号',
                prop: 'clientCode',
                align: 'center',
                slot: 'clientCode',
                width: '120'
              },
              {
                label: '刻码',
                prop: 'engrave',
                align: 'center',
                slot: 'engrave',
                width: '120'
              },
              {
                label: '机型',
                prop: 'modelKey',
                align: 'center',
                showOverflowTooltip: true
              },
              {
                label: '颜色',
                prop: 'colorKey',
                align: 'center',
                showOverflowTooltip: true
              },
              {
                label: '型号',
                prop: 'modelType',
                align: 'center',
                showOverflowTooltip: true
              },
              {
                label: '规格',
                prop: 'specification',
                align: 'center',
                showOverflowTooltip: true
              },
              {
                label: '电压等级',
                prop: 'voltage',
                align: 'center',
                showOverflowTooltip: true
              },
              {
                label: '重量',
                prop: 'weight',
                align: 'center',
                slot: 'weight',
                width: '120'
              },
              {
                label: '重量单位',
                prop: 'weightUnit',
                align: 'center',
                width: 100
              },
              {
                label: '仓库',
                prop: 'warehouseName',
                align: 'center',
                width: 100
              },
              { label: '货区', prop: 'areaName', align: 'center' },
              { label: '货架', prop: 'goodsShelfName', align: 'center' },
              { label: '货位', prop: 'goodsAllocationName', align: 'center' },
              { label: '生产日期', prop: 'productionDate', align: 'center' },
              { label: '采购日期', prop: 'purchaseDate', align: 'center' },
              {
                minWidth: 150,
                prop: 'status',
                align: 'center',
                formatter: (row) => {
                  return (
                    inspectionProjectStatus.find(
                      (item) => item.value === row.status
                    )?.label || ''
                  );
                },

                label: '状态',
                fixed: 'right',
                showOverflowTooltip: true
              }
            ];
      }
    },

    created() {},
    methods: {
      async open(row, type, pgaeName) {
        this.recordingMethod = row.recordingMethod;
        this.clientEnvironmentId =
          this.$store.state.user.info.clientEnvironmentId;
        this.type = type;
        this.pgaeName = pgaeName;
        this.visible = true;
        this.templateIdS = [];
        if (pgaeName == 'inspectionProjectRequest') {
          this.form = await getQualityInspectionItemById(row.id);
          const list =
            row.recordingMethod == 1
              ? this.form.templateList
              : this.form.sampleList;
          if (list.length) {
            this.templateIdS = list.map((item) => item.id);
          }
        } else {
          this.form.qualityWorkOrderId = row.id;
          if (this.type == 2 && this.clientEnvironmentId == 9) {
            this.$nextTick(() => {
              this.$refs.deptSelect?.locateByName('BM1801');
            });
          }
        }
        //获取工单检测方案
        await getById(this.form.qualityWorkOrderId).then(async (res) => {
          this.templateList = res.data.templateList;
          this.qualitySampleList = res.data.qualitySampleList;
          if (!this.form.name) {
            this.form.name = this.qualitySampleList[0].categoryName+ await getCode('inspection_project_task_name');
          }
          this.recordingMethodChange();
          this.$nextTick(() => {
            this.$refs.table.setSelectedRowKeys(this.templateIdS);
          });
        });
      },
      recordingMethodChange() {
        this.list =
          this.recordingMethod == 1
            ? this.templateList
            : this.qualitySampleList;
      },
      searchDeptNodeClick(info, row) {
        let depKey = this.type == 1 ? 'executeDeptId' : 'receiveDeptId';
        let depNameKey = this.type == 1 ? 'executeDeptName' : 'receiveDeptName';
        let userKey = this.type == 1 ? 'executeUserId' : 'receiveUserId';
        let userNameKey =
          this.type == 1 ? 'executeUserName' : 'receiveUserName';

        if (info) {
          this.form[depKey] = info;
          this.form[depNameKey] = row.name;
        } else {
          this.form[depKey] = null;
          this.form[depNameKey] = null;
        }
        // 部门变化后人员范围变化，清空已选人员
        this.form[userKey] = null;
        this.form[userNameKey] = null;
      },
      // 选中/清空人员
      changeExecutor(user) {
        let userKey = this.type == 1 ? 'executeUserId' : 'receiveUserId';
        let userNameKey =
          this.type == 1 ? 'executeUserName' : 'receiveUserName';
        if (user) {
          this.form[userKey] = user.id;
          this.form[userNameKey] = user.name;
        } else {
          this.form[userKey] = null;
          this.form[userNameKey] = null;
        }
      },
      save() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          if (this.selection.length == 0) {
            return this.$message.warning('请至少选择一条数据');
          }
          this.loading = true;
          let api =
            this.type == 1
              ? qualityInspectionItemDispatching
              : this.type == 2
              ? this.pgaeName == 'inspectionProjectRequest'
                ? updateRequestentrust
                : qualityInspectionItemRequest
              : '';

          if (this.recordingMethod == 2) {
            this.form.sampleQuantity = this.selection
              .map((item) => item.measureQuantity)
              .reduce((a, b) => a + Number(b), 0);
          }
          let data = {
            ...this.form,
            recordingMethod: this.recordingMethod,
            detailList: this.selection.map((item) => {
              return {
                [this.recordingMethod == 1
                  ? 'qualityPlanTemplateId'
                  : 'sampleId']: item.id
              };
            })
          };
          if (this.recordingMethod == 1 && this.recordingMethod1 == 2) {
            data.recordingMethodList = this.qualitySampleList.map((item) => {
              return {
                sampleId: item.id
              };
            });
          }

          api(data)
            .then((msg) => {
              this.loading = false;
              updateRecordingMethod({
                id: this.form.qualityWorkOrderId,
                recordingMethod: this.recordingMethod
              });
              this.$emit('reload');
              this.cancel();
            })
            .catch((e) => {
              this.loading = false;
            });
        });
      },
      cancel() {
        this.visible = false;
        this.$refs.form.clearValidate();
        this.form = { ...defaultForm };
        this.list = [];
      }
    }
  };
</script>

<style lang="scss" scoped></style>