kd-aiot-frontend-mes/src/views/batchRecord/components/editModal.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @close="handleClose"
    resizable
    maxable
    width="80%"
  >
    <div>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
        <header-title title="事项信息"></header-title>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8">
            <el-form-item label="记录编码">
              <el-input
                v-model="form.code"
                placeholder="系统自动生成"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型" required prop="itemType">
              <DictSelection
                dictName="记录规则事项类型"
                clearable
                v-model="form.itemType"
                @change="itemTypeChange"
              >
              </DictSelection>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="执行方式" required prop="executeMethod">
              <DictSelection
                dictName="记录规则执行方式"
                clearable
                v-model="form.executeMethod"
                disabled
              >
              </DictSelection>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              v-if="form.itemType == '1'"
              label="选择设备"
              required
              prop="deviceName"
            >
              <div class="mask-box" @click="selectDeviceId">
                <el-input
                  v-model="form.deviceName"
                  placeholder="请选择设备"
                  size="small"
                  :readonly="true"
                >
                  <template #append>
                    <el-button size="small">选择设备</el-button>
                  </template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>

          <el-col v-if="form.itemType == '3'" :span="8">
            <el-form-item label="关联任务">
              <el-input
                v-model="form.itemTaskName"
                placeholder="请输入任务名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="form.itemType == '2'" :span="8">
            <el-form-item label="关联记录规则" required prop="ruleName">
              <div class="mask-box" @click="selectReleaseId">
                <el-input
                  v-model="form.ruleName"
                  placeholder="请选择记录规则名称"
                  size="small"
                  readonly
                >
                  <template #append>
                    <el-button size="small">选择规则</el-button>
                  </template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col v-if="form.itemType == '2'" :span="8">
            <el-form-item label="记录规则分类">
              <DictSelection
                dictName="记录规则类型"
                v-model="form.recordRulesClassify"
                disabled
              >
              </DictSelection>
            </el-form-item>
          </el-col>
          <el-col v-if="form.itemType == '1'" :span="8">
            <el-form-item label="关联事项规则" required prop="ruleName">
              <div class="mask-box" @click="selectRulesId">
                <el-input
                  v-model="form.ruleName"
                  placeholder="请选择设备有关计划规则，如保养规则，巡点检规则等"
                  size="small"
                  readonly
                >
                  <template #append>
                    <el-button size="small">选择规则</el-button>
                  </template>
                </el-input>
              </div>
            </el-form-item></el-col
          >
        </el-row>

        <header-title title="关联产品" style="margin-top: 20px"></header-title>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8">
            <el-form-item label="生产工单号" prop="workOrderCode">
              <el-select
                v-model="form.workOrderCode"
                placeholder="请选择生产工单"
                style="width: 100%"
                filterable
                remote
                clearable
                :remote-method="getWorkOrderList"
                @change="workOrderCodeChange"
              >
                <el-option
                  v-for="item in workOrderList"
                  :key="item.id"
                  :label="item.code"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工序名称" prop="produceTaskId">
              <el-select
                v-model="form.produceTaskId"
                placeholder="请选择工序"
                style="width: 100%"
                @change="produceTaskIdChange"
              >
                <el-option
                  v-for="item in produceTaskList"
                  :key="item.taskId"
                  :label="item.taskTypeName"
                  :value="item.taskId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="牌号">
              <el-input
                v-model="form.brandNo"
                placeholder="请输入牌号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8">
            <el-form-item
              label="产品编码"
              :required="form.recordRulesClassify != '4'"
              :prop="form.recordRulesClassify != '4' ? 'productCode' : ''"
            >
              <el-input
                v-model="form.productCode"
                placeholder="请选择产品信息"
                @click.native="openProductDialog"
                readonly
              >
                <template #append>
                  <el-button size="small">选择产品</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="产品名称"
              :required="form.recordRulesClassify != '4'"
              :prop="form.recordRulesClassify != '4' ? 'productName' : ''"
            >
              <el-input
                v-model="form.productName"
                placeholder="请选择产品信息"
                @click.native="openProductDialog"
                readonly
              >
                <template #append>
                  <el-button size="small">选择产品</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批次号" prop="batchNo">
              <el-input
                v-model="form.batchNo"
                placeholder="请输入"
                :disabled="Boolean(form.workOrderId)"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8">
            <el-form-item label="规格" prop="specification">
              <el-input
                v-model="form.specification"
                placeholder="请输入"
                :disabled="Boolean(form.workOrderId)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号" prop="productModel">
              <el-input
                v-model="form.productModel"
                placeholder="请输入"
                :disabled="Boolean(form.workOrderId)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="要求生产数量"
              :prop="form.recordRulesClassify != '4' ? 'formingNum' : ''"
            >
              <el-input
                v-model.number="form.formingNum"
                placeholder="请输入"
                :disabled="Boolean(form.workOrderId)"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <header-title
          v-if="form.executeMethod == 2"
          title="检查项目"
          style="margin-top: 20px"
        ></header-title>
        <!-- 记录规则 -->
        <div v-if="form.executeMethod == 2">
          <el-table :data="form.details" style="width: 100%">
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column label="检查内容">
              <template slot-scope="scope">
                <div v-if="form.recordRulesClassify == 4">
                  {{ scope.row.productName || scope.row.name }}
                </div>
                <div v-else>
                  {{ scope.row.paramValue }}
                </div>
              </template>
            </el-table-column>

            <el-table-column v-if="form.recordRulesClassify != '4'" label="检查工具">
              <template slot-scope="{ row }">
                <el-link :underline="false" style="cursor: pointer">
                  <div class="ele-cell">
                    <div @click="handleAdd(row)">
                      {{ row.toolNames ? row.toolNames : '请选择' }}
                    </div>
                    <i
                      v-if="!row.toolNames"
                      class="el-icon-arrow-down"
                      @click="handleAdd(row)"
                    ></i>
                    <i v-else class="el-icon-close" @click="clearTool(row)"></i>
                  </div>
                </el-link>
              </template>
            </el-table-column>

            <el-table-column v-if="form.recordRulesClassify != '4'" label="检查人">
              <template slot-scope="scope">
                <div
                  @click="openSelectUser(scope.row)"
                  style="display: flex; align-items: center; cursor: pointer"
                >
                  <div>{{ showCheckUserNames(scope.row.checkUsers) }}</div
                  ><i class="el-icon-caret-bottom"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="form.recordRulesClassify != '4'" label="检查情况">
              <template slot-scope="scope">
                <div>
                  <el-radio-group v-model="scope.row.checkStatus">
                    <el-radio :label="1">已检查</el-radio>
                    <el-radio :label="0">未检查</el-radio>
                  </el-radio-group>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="描述">
              <template slot-scope="scope">
                <div>
                  <el-input
                    type="text"
                    :rows="1"
                    placeholder="请输入"
                    v-model="scope.row.errorMsg"
                  >
                    <template v-if="scope.row.unitName" slot="append">
                      <div>{{ scope.row.unitName }}</div>
                    </template>
                  </el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="form.recordRulesClassify != '4'" label="检查结果">
              <template slot-scope="scope">
                <div>
                  <el-radio-group v-model="scope.row.checkResult">
                    <el-radio :label="1">合格</el-radio>
                    <el-radio :label="0">不合格</el-radio>
                  </el-radio-group>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>

    <template v-if="type == 'detail'" v-slot:footer>
      <el-button @click="handleClose" :loading="butLoading">关 闭</el-button>
    </template>

    <template v-else v-slot:footer>
      <template
        v-if="
          ($hasPermission('mes:producetaskrulerecord:tempsu') ||
            $hasPermission('mes:producetaskrulerecord:tempsus')) &&
          form.executeMethod == '1'
        "
      >
        <el-button
          v-if="$hasPermission('mes:producetaskrulerecord:tempsu')"
          type="primary"
          @click="save"
          :loading="butLoading"
          :disabled="form.executeStatus != 0"
          >保存</el-button
        >

        <el-button
          v-if="$hasPermission('mes:producetaskrulerecord:tempsus')"
          type="primary"
          @click="submit"
          :loading="butLoading"
          >执行</el-button
        >
      </template>
      <template
        v-if="
          ($hasPermission('mes:producetaskrecordrulesrecord:saveorupdate') ||
            $hasPermission('mes:producetaskrecordrulesrecord:sus')) &&
          form.executeMethod == '2'
        "
      >
        <el-button
          v-if="$hasPermission('mes:producetaskrecordrulesrecord:saveorupdate')"
          type="primary"
          @click="save"
          :loading="butLoading"
          :disabled="form.executeStatus != 0"
          >保存</el-button
        >
        <el-button
          v-if="$hasPermission('mes:producetaskrecordrulesrecord:sus')"
          type="primary"
          @click="submit"
          :loading="butLoading"
          >执行</el-button
        >
      </template>

      <template v-if="form.executeMethod == '3'">
        <el-button
          type="primary"
          @click="save"
          :loading="butLoading"
          :disabled="form.executeStatus != 0"
          >保存</el-button
        >
        <el-button type="primary" @click="submit" :loading="butLoading"
          >执行</el-button
        >
      </template>
      <el-button @click="handleClose" :loading="butLoading">取 消</el-button>
    </template>

    <selectDevices
      ref="deviceSelectDialog"
      selectType="single"
      @chooseEquipment="chooseEquipment"
    ></selectDevices>

    <selectMatterRules
      ref="selectMatterRulesRef"
      @chooseRules="chooseRules"
      :filterType="[1, 2, 5]"
    ></selectMatterRules>

    <selectReleaseRules
      ref="selectReleaseRulesRef"
      @chooseRules="chooseReleaseRules"
      :notProduceTaskConfig="reportWorkType == 2"
    ></selectReleaseRules>

    <programRulesDialog
      ref="programRulesDialogRef"
      :dialogTitle="dialogTitle"
      @reload="reload"
      :isTempRecord="1"
    />

    <releaseRulesDialog
      v-model="showReleaseRulesDialog"
      ref="releaseRulesDialogRef"
      @reload="reload"
      :isTempRecord="1"
    />

    <taskDialog ref="taskDialogRef" @reload="reload" :isTempRecord="1" />

    <EquipmentDialog ref="EquipmentDialogRef" isMultiple="0" @choose="choose" />

    <!-- 选择用户 -->
    <SelectUser
      ref="SelectUserRef"
      v-model="showSelectUser"
      multipleSelect
      @selectUserFinished="selectUserFinished"
    ></SelectUser>

    <toolModal ref="toolModalRef" @chooseModal="chooseModal" />
  </ele-modal>
</template>

<script>
  import { submit } from '@/api/entrust';
  import dictMixins from '@/mixins/dictMixins';
  import selectMatterRules from '@/components/selectMatterRules/select-matter-rules.vue';
  import selectReleaseRules from '@/components/selectReleaseRules/select-release-rules.vue';
  import selectDevices from '@/components/selectDevices/index.vue';
  import { produceOrder } from '@/api/aps/index.js';
  import { getTaskInstanceList } from '@/api/produce/job.js';
  import { tempSaveOrUpdate } from '@/api/producetaskrulerecord/index.js';
  import programRulesDialog from '@/views/produce/components/prenatalExamination/programRulesDialog.vue';
  import releaseRulesDialog from '@/views/produce/components/prenatalExamination/releaseRulesDialog.vue';
  import taskDialog from '@/views/produce/components/prenatalExamination/taskDialog.vue';
  import { saveOrUpdate } from '@/api/producetaskrecordrulesrecord/index';
  import { getById } from '@/api/produceOrder/index.js';
  import EquipmentDialog from './EquipmentDialog.vue';
  import { recordRulesDetailPage } from '@/api/recordRules/index.js';
  import SelectUser from '@/components/select/SelectUser/index.vue';
  import toolModal from './toolModal.vue';
  import { getById as producetaskrulerecordGetById } from '@/api/producetaskrecordrulesrecord/index.js';

  export default {
    name: 'editModal',
    mixins: [dictMixins],
    emits: ['reload'],
    components: {
      selectMatterRules,
      selectReleaseRules,
      selectDevices,
      programRulesDialog,
      releaseRulesDialog,
      EquipmentDialog,
      taskDialog,
      SelectUser,
      toolModal
    },
    props: {
      // 1-产前准备，2-过程监测，3-产后检查
      reportWorkType: {
        type: Number,
        default: 1
      }
    },
    data() {
      const formBaseData = {
        id: null,
        // 设备id
        deviceId: null,
        //设备名称
        deviceName: '',
        // 记录规则执行方式，参考字典项：record_rules_execute_method
        executeMethod: '1',
        // 执行状态
        executeStatus: 0,
        // 记录规则事项类型，参考字典项：record_rules_item_type
        itemType: '1',
        // 工序ID
        produceTaskId: null,
        // 工序名称
        produceTaskName: '',
        // 记录规则报工类型，参考字典项：record_rules_report_work_type
        reportWorkType: null,
        // 规则id，包括事项规则id，记录规则id，根据事项类型区分
        ruleId: null,
        // 	规则名称
        ruleName: '',
        // 任务id
        taskId: null,
        itemTaskName: '',
        // mes生产工单表工单号 code
        workOrderCode: '',
        // workOrderId mes生产工单表id
        workOrderId: null,
        // 产品编码
        productCode: null,
        // 产品型号
        productModel: null,
        // 产品名称
        productName: null,
        // 记录规则分类，字典项：record_sheet
        recordRulesClassify: '',
        // 产品批次号
        batchNo: '',
        // 牌号
        brandNo: '',
        // 产品规格
        specification: '',
        // 要求生产数量
        formingNum: null,
        // 是否临时执行
        isTempRecord: 1,
        // 记录规则详情
        details: []
      };

      return {
        visible: false,
        title: '',
        formBaseData,
        form: JSON.parse(JSON.stringify(formBaseData)),
        // 生产工单列表
        workOrderList: [],
        //工序名称列表
        produceTaskList: [],
        // 工单信息
        workOrderInfo: null,
        butLoading: false,
        showReleaseRulesDialog: false,
        dialogTitle: '',
        showSelectUser: false,
        currentRow: null,
        type: '',
        rules: {
          itemType: [
            { required: true, message: '请选择规则事项类型', trigger: 'blur' }
          ],
          deviceName: [
            { required: true, message: '请选择设备', trigger: 'blur' }
          ],
          ruleName: [
            { required: true, message: '请选择规则', trigger: 'blur' },
            { required: true, message: '请选择规则', trigger: 'change' }
          ],
          productCode: [
            {
              required: true,
              message: '请输入产品编码',
              trigger: 'blur'
            },
            {
              required: true,
              message: '请输入产品编码',
              trigger: 'change'
            }
          ],
          productName: [
            {
              required: true,
              message: '请输入产品名称',
              trigger: 'blur'
            },
            {
              required: true,
              message: '请输入产品编码',
              trigger: 'change'
            }
          ],
          formingNum: [
            {
              required: true,
              message: '请输入要求生产数量',
              trigger: 'blur'
            },
            {
              required: true,
              message: '请输入产品编码',
              trigger: 'change'
            }
          ],
          produceTaskId: [
            {
              validator: (rule, value, callback) => {
                if (this.form.workOrderCode) {
                  if (!this.form.produceTaskId) {
                    callback(new Error('请选择工序'));
                  }
                }
                callback();
              },
              trigger: 'blur'
            }
          ]
        }
      };
    },
    computed: {
      reportWorkTypeName() {
        switch (this.reportWorkType) {
          case 1:
            return '产前准备';
          case 2:
            return '过程监测';

          default:
            return '产后检查';
        }
      }
    },
    created() {
      this.requestDict('记录规则报工类型');
      this.requestDict('记录规则执行方式');
      this.requestDict('记录规则事项类型');
      this.getWorkOrderList();
    },
    methods: {
      // 外部调用，打开弹窗
      open(type, data) {
        console.log('data', type, data);
        this.type = type;
        if (type == 'add') {
          this.title = `新增${this.reportWorkTypeName}事项`;
        } else if (type == 'edit' || type == 'detail') {
          this.title = `编辑${this.reportWorkTypeName}事项`;
          this.form.workOrderId = data.workOrderId;
          this.form.id = data.id;
          console.log('this.form', this.form);
          if (this.form.workOrderId) {
            this.getProductTaskList(this.form.workOrderId);
            // 根据工单id 获取详情
            this.getWorkOrderById(this.form.workOrderId);
            this.getDetias();
          }
        } else {
        }
        this.visible = true;
      },
      // 查询详情
      async getDetias() {
        const data = await producetaskrulerecordGetById(this.form.id);
        data.tools = data.tools || [];
        this.$util.assignObject(this.form, data);
        this.form.details = this.form.details.map((i) => {
          return {
            ...i,
            toolNames: i.tools.map((i) => i.toolName).join(',')
          };
        });
        console.log('this.form', this.form);
      },
      // 查询规则详情
      async getRulesDetias() {
        if (this.form.ruleId) {
          const { list } = await recordRulesDetailPage({
            pageNum: 1,
            size: 999,
            rulesId: this.form.ruleId
          });
          this.form.details = list.map((i) => {
            return {
              ...i,
              id: null,
              checkResult: null,
              checkStatus: null,
              checkStatusDesc: i.defaultValue || '',
              errorMsg: '',
              checkUsers: [],
              paramValue: i.paramValue,
              toolNames: i.tools.map((i) => i.toolName).join(',')
            };
          });
        }
      },
      // 关闭时清理表单
      handleClose() {
        this.form = JSON.parse(JSON.stringify(this.formBaseData));
        this.produceTaskList = [];
        this.$refs.formRef && this.$refs.formRef.resetFields();
        this.visible = false;
      },
      // 修改规则事项类型
      itemTypeChange() {
        this.form.executeMethod = this.form.itemType;
        this.form.ruleId = null;
        this.form.ruleName = '';
        this.form.details = [];
      },
      // 去选择设备
      selectDeviceId() {
        this.$refs.deviceSelectDialog.open([]);
      },
      // 设备选
      chooseEquipment(data, index, categoryId) {
        console.log('data', data, index, categoryId);
        this.form.deviceId = data?.id;
        this.form.deviceName = data?.name;
      },
      // 去选择记录规则
      selectReleaseId() {
        this.$refs.selectReleaseRulesRef.open();
      },
      // 选择记录规则
      chooseReleaseRules(rules) {
        console.log('rules', rules);
        this.form.ruleId = rules?.id;
        this.form.ruleName = rules?.name;
        this.form.recordRulesClassify = rules?.classify + '';
        this.getRulesDetias();
        // 重置表单验证
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate([
            'productCode',
            'productName',
            'formingNum'
          ]);
        });
      },
      // 去选择事项规则
      selectRulesId() {
        this.$refs.selectMatterRulesRef.open([this.form.ruleId]);
      },
      // 选择事项规则
      chooseRules(rules) {
        console.log('rules', rules);
        this.form.ruleId = rules?.id;
        this.form.ruleName = rules?.name;
      },
      // 获取生产工单号
      async getWorkOrderList(code = '') {
        if (typeof code != 'string') {
          code = '';
        }
        const { list } = await produceOrder({
          code,
          pageNum: 1,
          size: 50
        });
        console.log('生产工单', list);
        this.workOrderList = list;
      },
      // 选择生产工单
      workOrderCodeChange(code) {
        console.log('code', code);
        if (code) {
          const workOrder = this.workOrderList.find((i) => i.code == code);
          console.log('workOrder', workOrder);
          this.workOrderInfo = workOrder;
          this.form.workOrderId = workOrder.id;
          // 赋值产品信息
          this.form.productCode = workOrder.productCode;
          this.form.productModel = workOrder.productModel;
          this.form.productName = workOrder.productName;
          this.form.batchNo = workOrder.batchNo;
          this.form.specification = workOrder.specification;
          this.form.formingNum = workOrder.formingNum;
          this.form.brandNo = workOrder.brandNo;
          this.getProductTaskList(workOrder.id);
        } else {
          this.workOrderInfo = null;
          this.form.workOrderId = null;
          // 赋值产品信息
          this.form.productCode = null;
          this.form.productModel = null;
          this.form.productName = '';
          this.form.batchNo = '';
          this.form.specification = null;
          this.form.formingNum = null;
          this.form.produceTaskId = null;
          this.form.produceTaskName = '';
          this.form.brandNo = '';

          this.produceTaskList = [];
        }
      },
      // 获取工序列表
      async getProductTaskList(id) {
        const data = await getTaskInstanceList(id);
        console.log('data 工序列表', data);
        this.produceTaskList = data;
      },
      // 选择工序
      produceTaskIdChange() {
        const prodceTask = this.produceTaskList.find(
          (i) => i.taskId == this.form.produceTaskId
        );
        if (prodceTask) {
          this.form.produceTaskName = prodceTask.taskTypeName;
        }
      },
      // 执行
      submit() {
        this.$refs.formRef.validate((valid) => {
          if (!valid) {
            return '';
          }
          this.form.reportWorkType = this.reportWorkType;
          console.log('this.form', this.form);

          if (this.form.executeMethod == 1) {
            // 设备保养计划相关逻辑
            this.dialogTitle = '新增设备保养计划';
            this.$refs.programRulesDialogRef.init(
              this.form,
              this.workOrderInfo ? this.workOrderInfo : this.form,
              {
                name: this.form.produceTaskName
              }
            );
          } else if (this.form.executeMethod == 2) {
            this.$refs.releaseRulesDialogRef.open(
              this.form,
              this.workOrderInfo ? this.workOrderInfo : this.form
            );
          } else {
            // 任务确认
            this.$refs.taskDialogRef.open(
              this.form,
              this.workOrderInfo ? this.workOrderInfo : this.form
            );
          }
        });
      },
      // 保存
      save() {
        this.$refs.formRef.validate(async (valid) => {
          if (!valid) {
            return '';
          }
          this.form.reportWorkType = this.reportWorkType;
          console.log('this.form', this.form);
          try {
            this.butLoading = true;

            const id = await tempSaveOrUpdate(this.form);
            this.form.id = id;

            this.$message.success('保存成功！');
            this.$emit('reload');

            // this.handleClose();
            this.butLoading = false;
          } catch (error) {
            this.butLoading = false;
          }
        });
      },
      // 执行完成
      reload() {
        this.$emit('reload');
        this.handleClose();
      },
      // 获取工单详情
      async getWorkOrderById(id) {
        const data = await getById(id);
        console.log('工单详情', data);
        this.workOrderInfo = data;
      },
      openProductDialog() {
        if (this.form.workOrderId) {
          return this.$message.warning('已选择生产工单，不能修改产品信息');
        }
        this.$refs.EquipmentDialogRef.open();
      },
      // 选择产品
      choose(data) {
        console.log('data', data);
        const info = data[0];
        if (info) {
          this.form.productCode = info.code;
          this.form.productName = info.name;
          this.form.productModel = info.model;
          this.form.specification = info.specification;
        }
      },
      showCheckUserNames(userList) {
        if (userList.length == 0) return '请选择部门-选择员工';

        return userList
          .map((i) => {
            return i.groupName + '-' + i.userName;
          })
          .join(',');
      },
      openSelectUser(row) {
        this.currentRow = row;
        console.log('row', row);
        this.showSelectUser = true;
      },
      selectUserFinished(userInfo) {
        console.log('userInfo', userInfo);
        this.currentRow.checkUsers = userInfo.map((i) => {
          // 构建参数和接口的对应上
          return { ...i, userName: i.name, userId: i.id };
        });
      },
      // 选择工具
      handleAdd(row) {
        this.currentRow = row;
        this.$refs.toolModalRef.open(row.tools.map((i) => i.toolCode));
      },
      chooseModal(data) {
        console.log('data', data);
        this.currentRow.tools = data.map((i) => {
          return {
            toolCode: i.code,
            toolName: i.name
          };
        });
        this.currentRow.toolNames = this.currentRow.tools
          .map((i) => i.toolName)
          .join(',');
      },
      clearTool(row) {
        row.tools = [];
        row.toolNames = '';
      }
    }
  };
</script>

<style scoped lang="scss">
  .mask-box {
    position: relative;

    &::after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0);
      cursor: pointer;
    }
  }
</style>