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 v-loading="loading">
      <div
        class="switch"
        v-if="details && details.processInstanceId"
        :maxable="true"
        style="margin-bottom: 20px"
      >
        <div class="switch_left">
          <ul>
            <li
              v-for="item in tabOptions"
              :key="item.key"
              :class="{ active: activeComp == item.key }"
              @click="activeComp = item.key"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>

      <el-form
        v-if="activeComp == 'main'"
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="130px"
        :disabled="type == 'detail'"
      >
        <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="记录规则事项类型"
                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="记录规则执行方式"
                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="基本信息"
          v-if="form.itemType == 2"
          style="margin-top: 20px"
        ></header-title>

        <template v-if="form.itemType == 2">
          <el-row style="margin-bottom: 20px">
            <el-col :span="8">
              <el-form-item
                v-if="form.recordRulesClassify == 3"
                label="关联设备"
              >
                <el-input
                  v-model="form.deviceName"
                  placeholder="自动带出"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item v-else label="车间区域">
                <el-select
                  v-model="form.workshopAreaId"
                  placeholder="请选择车间区域"
                  filterable
                  clearable
                  style="width: 100%"
                  @change="workshopAreaIdChange"
                >
                  <el-option
                    v-for="item in workshopAreaList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检查开始时间" required prop="checkStartTime">
                <el-date-picker
                  v-model="form.checkStartTime"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                  style="width: 100%"
                  @change="computedDuration"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="检查结束时间"
                required
                prop="checkFinishTime"
              >
                <el-date-picker
                  v-model="form.checkFinishTime"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                  style="width: 100%"
                  @change="computedDuration"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 20px">
            <el-col :span="8">
              <el-form-item label="执行人" required prop="teamId">
                <el-select
                  v-model="form.teamId"
                  placeholder="请选择班组"
                  filterable
                  style="width: 120px"
                  @change="checkTeamList(form.teamId)"
                >
                  <el-option
                    v-for="item in teamList"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="form.executeUsersIds"
                  placeholder="请选择执行人"
                  filterable
                  multiple
                  @change="changeId"
                  style="max-width: 100%"
                >
                  <div class="checkboxWrapper">
                    <el-checkbox v-model="checked" @change="checkChange">
                      全选
                    </el-checkbox>
                  </div>
                  <el-option
                    v-for="item in teamUserList"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工时" required prop="duration">
                <el-input
                  placeholder="请输入"
                  v-model="form.duration"
                  type="number"
                  min="0"
                  step="0.1"
                  @change="durationChagne"
                >
                  <template slot="append">
                    <div style="width: 40px; box-sizing: border-box">小时</div>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检查有效期">
                <el-input
                  placeholder="请输入"
                  v-model="form.checkValidity"
                  type="text"
                >
                  <template slot="append">
                    <div style="width: 40px; box-sizing: border-box">
                      <el-form-item
                        class="checkValidityUnit"
                        style="margin-bottom: 0"
                      >
                        <DictSelection
                          dictName="检查有效期单位"
                          clearable
                          v-model="form.checkValidityUnit"
                          placeholder="单位"
                          style="width: auto"
                        >
                        </DictSelection>
                      </el-form-item>
                    </div>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="margin-bottom: 20px">
            <el-col v-if="form.recordRulesExecuteMethodName" :span="8">
              <el-form-item label="执行方式">
                <el-input
                  v-model="form.recordRulesExecuteMethodName"
                  placeholder="自动带出"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产出物">
                <el-select
                  v-model="form.outputType"
                  placeholder="请选择产出物类型"
                  filterable
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in outputTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结论" required prop="conclusion">
                <el-radio-group v-model="form.conclusion">
                  <el-radio :label="1">合格</el-radio>
                  <el-radio :label="2">不合格</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <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.sourceTaskId"
                >
                </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>

        <material
          v-if="
            form.produceTaskId &&
            form.produceTaskInstanceId &&
            workOrderInfo &&
            reportWorkType == 2 &&
            form.itemType == 2
          "
          ref="materialRef"
          :pickDetails.sync="form.pickDetails"
          :outputDetails.sync="form.outputDetails"
          :preOutputDetails="preOutputDetails"
          :workOrderId="form.workOrderId"
          :ruleId="form.ruleId"
          :produceTaskId="form.produceTaskId"
          :produceTaskName="form.produceTaskName"
          :produceTaskInstanceId="form.produceTaskInstanceId"
          :bomCategoryId="workOrderInfo.bomCategoryId"
          :outputType="form.outputType"
          :categoryId="workOrderInfo.categoryId"
          @refresh="getListByWorkOrderId"
        ></material>

        <header-title
          v-if="form.itemType == 2"
          title="检查项目"
          style="margin-top: 20px"
        ></header-title>

        <ele-pro-table
          v-if="form.itemType == 2"
          v-loading="loading"
          ref="table"
          row-key="id"
          :columns="detailsColumns"
          :datasource="form.details"
          cacheKey="mes-releaseRulesDialong-2510311656"
          :needPage="false"
        >
          <template v-slot:toolkit>
            <el-button
              v-if="form.recordRulesClassify != 4"
              type="primary"
              @click="batchCheck"
              >批量检查</el-button
            >
            <el-button
              v-if="form.recordRulesClassify != 4"
              type="primary"
              @click="batchQualified"
              >批量合格</el-button
            >
          </template>
          <template v-slot:paramValue="{ row }">
            <div v-if="form.recordRulesClassify == 4">
              {{ row.productName || row.name }}
            </div>
            <div v-else>
              {{ row.paramValue }}
            </div>
          </template>
          <template v-slot:toolNames="{ 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>
          <template v-slot:checkUsersIds="{ row }">
            <div>
              <el-select
                v-model="row.checkUsersIds"
                placeholder="请选择检查人"
                filterable
                multiple
                @change="checkUsersIdsChange(row)"
              >
                <el-option
                  v-for="item in activeTeamUserList"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </template>
          <template v-slot:checkStatus="{ row }">
            <div>
              <el-radio-group v-model="row.checkStatus">
                <el-radio :label="1">已检查</el-radio>
                <el-radio :label="0">未检查</el-radio>
              </el-radio-group>
            </div>
          </template>
          <template v-slot:errorMsg="{ row }">
            <div>
              <el-input
                type="text"
                :rows="1"
                placeholder="请输入"
                v-model="row.errorMsg"
              >
                <template v-if="row.unitName" slot="append">
                  <div>{{ row.unitName }}</div>
                </template>
              </el-input>
            </div></template
          >
          <template v-slot:checkResult="{ row }">
            <div>
              <el-radio-group v-model="row.checkResult">
                <el-radio :label="1">合格</el-radio>
                <el-radio :label="0">不合格</el-radio>
              </el-radio-group>
            </div>
          </template>
        </ele-pro-table>
      </el-form>

      <bpmDetail
        v-if="activeComp == 'bpm' && details && details.processInstanceId"
        :id="details.processInstanceId"
      >
      </bpmDetail>
    </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"
          >保存</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 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,
    saveRuleRecord
  } 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 { 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,
    queryListByWorkOrderId,
    saveOrUpdate,
    saveOrUpdateAndSubmit
  } from '@/api/producetaskrecordrulesrecord/index.js';
  import bpmDetail from '@/views/bpm/processInstance/detail.vue';
  import bpmTask from '@/components/bpmTask/bpmTask.vue';
  import { getFactoryarea } from '@/api/aps/index';
  import { getTeam } from '@/api/produce/job.js';
  import material from '@/views/produce/components/prenatalExamination/material.vue';

  export default {
    name: 'editModal',
    mixins: [dictMixins],
    emits: ['reload'],
    components: {
      selectMatterRules,
      selectReleaseRules,
      selectDevices,
      programRulesDialog,
      releaseRulesDialog,
      EquipmentDialog,
      taskDialog,
      SelectUser,
      toolModal,
      bpmDetail,
      bpmTask,
      material
    },
    props: {
      // 1-产前准备，2-过程监测，3-产后检查
      reportWorkType: {
        type: Number,
        default: 1
      }
    },
    watch: {
      'form.details': {
        handler(details) {
          if (this.form.itemType == 2) {
            const any = details.some((i) => i.checkResult === null);

            if (any || details.length === 0) return;

            const every = details.every((i) => i.checkResult == 1);
            this.form.conclusion = every ? 1 : 2;
          }
        },
        deep: true
      }
    },
    data() {
      const formBaseData = {
        id: null,
        code: '',
        // 设备id
        deviceId: null,
        //设备名称
        deviceName: '',
        // 记录规则执行方式，参考字典项：produce_task_config_execute_method
        executeMethod: '2',
        // 执行状态
        executeStatus: 0,
        // 记录规则事项类型，参考字典项：record_rules_item_type
        itemType: '2',
        // 工序ID
        produceTaskId: null,
        produceTaskInstanceId: '',
        produceTaskConfigId: '',
        produceRoutingId: '',
        produceRoutingName: '',
        // 工序名称
        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: [],
        // 物品清单
        pickDetails: [],
        // 本次产出明细
        outputDetails: [],
        executeUsersIds: [],
        workshopAreaId: null,
        workshopArea: '',
        checkStartTime: null,
        checkFinishTime: null,
        executeUsersIds: [],
        executeUsers: [],
        teamId: null,
        duration: null,
        checkValidity: null,
        checkValidityUnit: '',
        recordRulesExecuteMethodName: '',
        recordRulesExecuteMethodId: null,
        conclusion: null,
        outputType: 1
      };

      return {
        loading: false,
        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'
          //   }
          // ],
          checkStartTime: [
            { required: true, message: '请选择检查开始时间', trigger: 'blur' },
            {
              required: true,
              message: '请选择检查开始时间',
              trigger: 'change'
            },
            {
              validator: (rule, value, callback) => {
                if (!value) return callback();
                const now = new Date();
                const start = new Date(value);
                callback();
              },
              trigger: 'blur'
            }
          ],
          checkFinishTime: [
            { required: true, message: '请选择检查完成时间', trigger: 'blur' },
            {
              required: true,
              message: '请选择检查完成时间',
              trigger: 'change'
            },
            {
              validator: (rule, value, callback) => {
                if (!value) return callback();
                const start = new Date(this.form.checkStartTime);
                const finish = new Date(value);
                if (finish <= start) {
                  callback(new Error('结束时间必须大于开始时间'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ],
          conclusion: [
            { required: true, message: '请选择结论', trigger: 'blur' },
            { required: true, message: '请选择结论', trigger: 'change' }
          ],
          duration: [
            { required: true, message: '请输入工时', trigger: 'blur' },
            { required: true, message: '请输入工时', trigger: 'change' },
            {
              validator: (rule, value, callback) => {
                if (value === '' || value === null) {
                  callback();
                } else if (Number(value) <= 0) {
                  callback(new Error('工时必须大于0'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ],
          teamId: [
            { required: true, message: '请选择班组', trigger: 'blur' },
            { required: true, message: '请选择班组', trigger: 'change' }
          ]
        },
        details: null,
        tabOptions: [
          { key: 'main', name: '事项信息' },
          { key: 'bpm', name: '流程详情' }
        ],
        activeComp: 'main',
        workshopAreaList: [],
        checked: false,
        teamUserList: [],
        teamList: [],
        teamAllList: [],
        preOutputDetails: [],
        outputTypeList: [
          { label: '原材料', value: 1 },
          { label: '在制品', value: 2 },
          { label: 'BOM标准产出', value: 3 }
        ]
      };
    },
    computed: {
      reportWorkTypeName() {
        switch (this.reportWorkType) {
          case 1:
            return '产前准备';
          case 2:
            return '过程监测';

          default:
            return '产后检查';
        }
      },
      // 规则详情表头
      detailsColumns() {
        let list = [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            label: '检查内容',
            prop: 'paramValue',
            minWidth: 120,
            slot: 'paramValue'
          }
        ];

        if (this.form.recordRulesClassify != '4') {
          list = [
            ...list,
            {
              label: '检查工具',
              prop: 'toolNames',
              minWidth: 120,
              slot: 'toolNames'
            },
            {
              label: '检查人',
              prop: 'checkUsersIds',
              minWidth: 120,
              slot: 'checkUsersIds'
            },
            {
              label: '检查情况',
              prop: 'checkStatus',
              minWidth: 120,
              slot: 'checkStatus'
            },
            {
              label: '描述',
              prop: 'errorMsg',
              minWidth: 120,
              slot: 'errorMsg'
            },
            {
              label: '检查结果',
              prop: 'checkResult',
              minWidth: 120,
              slot: 'checkResult'
            }
          ];
        } else {
          list.push({
            label: '描述',
            prop: 'errorMsg',
            minWidth: 120,
            slot: 'errorMsg'
          });
        }
        return list;
      },
      activeTeamUserList() {
        return this.teamUserList.filter((user) =>
          this.form.executeUsersIds.includes(user.id)
        );
      }
    },
    created() {
      this.requestDict('记录规则报工类型');
      this.requestDict('记录规则执行方式');
      this.requestDict('记录规则事项类型');
      this.getWorkOrderList();
      if (localStorage.getItem('singleUserInfo') == '1') {
        const data = JSON.parse(localStorage.getItem('chooseUserInfo'));
        this.getTeamList(data.teamId);
      } else {
        this.getTeamList(this.$store.state.user.info.teamId);
      }
      this.getWorkshopArea();
    },
    methods: {
      // 外部调用，打开弹窗
      open(type, data) {
        console.log('data', type, data);
        this.type = type;
        this.form.reportWorkType = this.reportWorkType;
        if (type == 'add') {
          this.title = `新增${this.reportWorkTypeName}事项`;
        } else if (type == 'edit') {
          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 if (type == 'detail') {
          this.title = `${this.reportWorkTypeName}事项`;
          this.form.workOrderId = data.workOrderId;
          this.form.id = data.id;
          if (this.form.workOrderId) {
            this.getProductTaskList(this.form.workOrderId);
            // 根据工单id 获取详情
            this.getWorkOrderById(this.form.workOrderId);
            this.getDetias();
          }
        } else {
        }
        this.visible = true;
      },
      // 查询详情
      async getDetias() {
        this.loading = true;
        const data = await producetaskrulerecordGetById(this.form.id);
        data.tools = data.tools || [];
        this.details = data;
        console.log('data 详情', data);
        this.$util.assignObject(this.form, data);
        this.form.details = this.form.details.map((i) => {
          return {
            ...i,
            toolNames: i.tools.map((i) => i.toolName).join(',')
          };
        });
        // 工时毫秒转小时
        this.form.duration = (this.form.duration / (1000 * 60 * 60)).toFixed(2);
        this.form.executeUsersIds = this.form.executeUsers.map((i) => i.userId);
        this.form.teamId =
          this.form.executeUsers.length > 0
            ? this.form.executeUsers[0].teamId
            : '';
        // 加载班组人员列表
        if (this.form.teamId) {
          const index = this.teamList.findIndex(
            (item) => item.id == this.form.teamId
          );
          this.teamUserList = this.teamAllList[index];
        }
        console.log('this.form', this.form);
        this.loading = false;
        this.getListByWorkOrderId();
      },
      // 查询规则详情
      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(',')
            };
          });
          console.log('this.form.details', this.form.details);
        }
      },
      // 关闭时清理表单
      handleClose() {
        this.form = JSON.parse(JSON.stringify(this.formBaseData));
        this.produceTaskList = [];
        this.details = null;
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate();
          this.visible = false;
        });
      },
      // 修改规则事项类型
      itemTypeChange() {
        this.form.executeMethod = this.form.itemType;
        this.form.ruleId = null;
        this.form.ruleName = '';
        this.form.details = [];
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate();
        });
      },
      // 去选择设备
      selectDeviceId() {
        if (this.type == 'detail') return;
        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() {
        if (this.type == 'detail') return;
        this.$refs.selectReleaseRulesRef.open(
          this.reportWorkType,
          this.form.produceTaskId
        );
      },
      // 选择记录规则
      chooseReleaseRules(rules) {
        console.log('rules', rules);
        this.form.ruleId = rules?.id;
        this.form.ruleName = rules?.name;
        this.form.recordRulesClassify = rules?.classify + '';
        this.form.recordRulesExecuteMethodId = rules?.executeMethodId;
        this.form.recordRulesExecuteMethodName = rules?.executeMethodName;
        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.brandNo = '';

          this.produceTaskList = [];
        }
        this.form.produceTaskId = null;
        this.form.produceTaskName = '';
        this.form.produceTaskInstanceId = '';
      },
      // 获取工序列表
      async getProductTaskList(id) {
        const data = await getTaskInstanceList(id);
        console.log('data 工序列表', data);
        this.produceTaskList = data.filter(
          (i) => i.taskId != '-2' && i.taskId != '-1'
        );
        // 赋值工序实例id
        this.form.produceTaskInstanceId = data.find(
          (i) => i.sourceTaskId == this.form.produceTaskId
        )?.taskId;
      },
      // 选择工序
      produceTaskIdChange() {
        const prodceTask = this.produceTaskList.find(
          (i) => i.sourceTaskId == this.form.produceTaskId
        );
        if (prodceTask) {
          this.form.produceTaskName = prodceTask.taskTypeName;
          this.form.produceTaskInstanceId = prodceTask.taskId;
        }

        if (this.form.ruleId) {
          // 清空记录规则
          this.form.ruleId = null;
          this.form.ruleName = null;
          this.form.recordRulesClassify = null;
          this.form.recordRulesExecuteMethodId = null;
          this.form.recordRulesExecuteMethodName = null;
          this.$message.warning(
            '工序变更，已清空已选择的记录规则，请选择工序下的记录规则'
          );
        }

        // 查询物料信息
        this.getListByWorkOrderId();
      },
      // 执行
      submit() {
        this.$refs.formRef.validate(async (valid) => {
          if (!valid) {
            return '';
          }
          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) {
            // 验证产出物数量;
            const valid = this.$refs.materialRef.validateOutputQuantities();
            if (!valid) {
              return;
            }
            this.releaseRulesSaveOrSubmit('submit');
          } else {
            // 任务确认
            this.saveRuleRecord();
          }
        });
      },
      // 保存
      save() {
        console.log('this.form', this.form);

        this.$refs.formRef.validate(async (valid) => {
          if (!valid) {
            return '';
          }

          try {
            if (this.form.itemType == 2) {
              // 验证产出物数量;
              const valid = this.$refs.materialRef.validateOutputQuantities();
              if (!valid) {
                return;
              }

              // 记录规则保存
              return this.releaseRulesSaveOrSubmit('save');
            }

            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;
          }
        });
      },
      // 记录规则保存或者 一键报工
      async releaseRulesSaveOrSubmit(type) {
        if (this.form.executeUsersIds.length == 0) {
          this.$message.warning('请选择执行人！');
          return;
        }

        if (this.form.duration <= 0) {
          this.$message.warning('工时必须大于0！');
          return;
        }

        // 报工需要验证 缓存不验证 排除 recordRulesClassify ==4 物料添加 的情况
        if (type == 'submit' && this.form.recordRulesClassify != '4') {
          // 验证检查项目
          const detailRequired = this.form.details.some((i) => {
            return (
              i.checkResult == null ||
              !i.checkStatus ||
              i.checkUsers?.length == 0
            );
          });

          if (detailRequired) {
            return this.$message.warning(
              '请先完善 检查人、检查情况、检查结果 内容！'
            );
          }
        }

        const body = JSON.parse(JSON.stringify(this.form));

        // 工时小时转毫秒
        body.duration = Number(body.duration);
        body.duration = body.duration * 60 * 60 * 1000;

        this.butLoading = true;
        console.log('body', body);
        try {
          if (type == 'submit') {
            await saveOrUpdateAndSubmit(body);
            this.$message.success('报工成功！');
          } else {
            const id = await saveOrUpdate(body);
            this.form.id = id;
            this.$message.success('保存成功！');
          }
          this.butLoading = false;

          // 返回
          this.handleClose();
          this.$emit('reload');
        } catch (error) {
          this.butLoading = false;
        }
      },
      // 任务确认报工
      async saveRuleRecord() {
        this.butLoading = true;
        await saveRuleRecord(this.form);
        this.$message.success('报工成功！');
        this.butLoading = false;
        // 返回
        this.handleClose();
        this.$emit('reload');
      },
      // 执行完成
      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.teamName) + '-' + 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 = '';
      },
      async getListByWorkOrderId(type = '') {
        if (!this.form.produceTaskId || this.reportWorkType != 2) return;
        // 查询物料信息
        const materialObject = await queryListByWorkOrderId({
          workOrderId: this.form.workOrderId,
          recordId: this.form.id,
          produceTaskId: this.form.produceTaskId,
          ruleId: this.form.ruleId
        });

        console.log('materialObject 物料信息', materialObject);
        if (type == '') {
          this.addForm.outputDetails = materialObject.outputDetails;
          this.addForm.pickDetails = materialObject.pickDetails.map((i) => {
            // 物料清单中如果存在则 selected 设置为 true
            const any = this.addForm.outputDetails.find(
              (j) => j.categoryId === i.categoryId
            );
            if (any) {
              i.selected = true;
            } else {
              i.selected = false;
            }
            return i;
          });
          this.preOutputDetails = materialObject.preOutputDetails;
        }

        if (type == 'output') {
          this.addForm.outputDetails = materialObject.outputDetails;
          this.addForm.pickDetails = this.addForm.pickDetails.map((i) => {
            // 物料清单中如果存在则 selected 设置为 true
            const any = this.addForm.outputDetails.find(
              (j) => j.categoryId === i.categoryId
            );
            if (any) {
              i.selected = true;
            } else {
              i.selected = false;
            }
            return i;
          });
        }
      },
      // qualifiedQuantityMax 最大合格数量
      qualifiedQuantityMax(row) {
        return row.reportQuantity - row.noQualifiedQuantity;
      },
      noQualifiedQuantityMax(row) {
        return row.reportQuantity - row.qualifiedQuantity;
      },
      // 批量检查
      batchCheck() {
        this.form.details = this.form.details.map((i) => {
          i.checkStatus = 1;
          return i;
        });
      },
      // 批量合格
      batchQualified() {
        this.form.details = this.form.details.map((i) => {
          i.checkResult = 1;
          return i;
        });
      },
      workshopAreaIdChange(e) {
        const area = this.workshopAreaList.find((i) => i.id === e);
        if (area) {
          this.form.workshopArea = area.name;
        } else {
          this.form.workshopArea = '';
        }
      },
      // 查询车间区域
      async getWorkshopArea() {
        const data = await getFactoryarea({
          pageNum: 1,
          size: 999,
          type: 3
        });
        console.log('list', data.list);
        this.workshopAreaList = data.list;
      },
      // 计算工时
      computedDuration() {
        if (
          this.form.checkStartTime &&
          this.form.checkFinishTime &&
          this.form.executeUsersIds.length > 0
        ) {
          const start = new Date(this.form.checkStartTime);
          const finish = new Date(this.form.checkFinishTime);
          const diff = finish - start; // 毫秒差值
          const hours = diff / (1000 * 60 * 60); // 转换为小时
          const totalDuration = hours * this.form.executeUsersIds.length;
          this.form.duration = totalDuration.toFixed(1);
        }
      },
      checkTeamList(id) {
        this.form.executeUsersIds = [];
        const index = this.teamList.findIndex((item) => item.id == id);
        this.teamUserList = this.teamAllList[index];
        console.log('this.teamUserList', this.teamUserList);
      },
      async getTeamList(id) {
        const ids = id.split(',');
        this.teamList = [];
        this.teamUserList = [];
        const list = ids.map((item) => getTeam(item));

        const dataList = await Promise.all(list);

        dataList.forEach((item) => {
          this.teamList.push({
            name: item.name,
            id: item.id
          });

          this.teamAllList.push(item.userVOList);
        });
      },
      changeId() {
        if (this.form.executeUsersIds.length == this.teamUserList.length) {
          this.checked = true;
        } else {
          this.checked = false;
        }

        // 同步 executeUsers
        this.form.executeUsers = this.form.executeUsersIds
          .map((id) => {
            const user = this.teamUserList.find((item) => item.id === id);
            console.log('user', user);
            if (user) {
              return {
                teamId: this.form.teamId,
                teamName: this.teamList.find(
                  (team) => team.id == this.form.teamId
                )?.name,
                userId: user.id,
                userName: user.name
              };
            } else {
              return null;
            }
          })
          .filter((item) => item !== null);

        console.log('this.form.executeUsers', this.form.executeUsers);

        this.computedDuration();

        // 同步详情执行人
        this.form.details.forEach((detail) => {
          detail.checkUsersIds = this.form.executeUsersIds;
          detail.checkUsers = this.form.executeUsers;
        });
      },
      checkChange() {
        this.form.executeUsersIds = [];
        if (this.checked) {
          this.form.executeUsersIds = this.teamUserList.map((item) => item.id);
        } else {
          this.form.executeUsersIds = [];
        }
      },
      durationChagne() {
        // 保留小数后一位
        if (this.form.duration && this.form.duration.toString().includes('.')) {
          this.form.duration = Number(this.form.duration).toFixed(1);
        }
      },
      checkUsersIdsChange(row) {
        // 同步 checkUsers
        row.checkUsers = row.checkUsersIds.map((i) => {
          const user = this.activeTeamUserList.find((item) => item.id === i);
          return {
            teamId: this.form.teamId,
            teamName: this.teamList.find((team) => team.id == this.form.teamId)
              ?.name,
            userId: user.id,
            userName: user.name
          };
        });

        console.log('row', row);
      }
    }
  };
</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;
    }
  }

  .checkboxWrapper {
    padding: 8px 20px;
    border-bottom: 1px solid #ccc;
  }
</style>