kd-aiot-frontend-mes/src/views/produce/components/prenatalExamination/releaseRulesDialog.vue

<template>
  <ele-modal
    width="80%"
    :visible="visible"
    append-to-body
    custom-class="ele-dialog-form"
    :title="title"
    :close-on-click-modal="false"
    :before-close="handleBeforeClose"
    maxable
  >
    <header-title title="基本信息"></header-title>
    <el-form
      :model="addForm"
      :rules="formRules"
      ref="ruleFormRef"
      label-width="150px"
      v-loading="loading"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="记录规则名称" required>
            <el-input
              v-model="addForm.ruleName"
              placeholder="自动带出"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录规则分类" required>
            <DictSelection
              dictName="记录规则类型"
              clearable
              v-model="addForm.recordRulesClassify"
              disabled
            >
            </DictSelection>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            v-if="ruleInfo && ruleInfo.classify == 3"
            label="关联设备"
          >
            <el-input
              v-model="addForm.deviceName"
              placeholder="自动带出"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item v-else label="车间区域">
            <el-select
              v-model="addForm.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-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="当前工序">
            <el-input
              v-model="addForm.produceTaskName"
              placeholder="当前工序"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查开始时间" required prop="checkStartTime">
            <el-date-picker
              v-model="addForm.checkStartTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              style="width: 100%"
              :picker-options="{
                disabledDate: (time) => time.getTime() > Date.now()
              }"
              @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="addForm.checkFinishTime"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              style="width: 100%"
              :picker-options="{
                disabledDate: (time) => time.getTime() > Date.now()
              }"
              @change="computedDuration"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="执行人" required prop="teamId">
            <el-select
              v-model="addForm.teamId"
              placeholder="请选择班组"
              filterable
              style="width: 120px"
              @change="checkTeamList(addForm.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="addForm.executeUsersIds"
              placeholder="请选择执行人"
              filterable
              multiple
              @change="changeId"
            >
              <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="addForm.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="addForm.checkValidity"
              type="text"
            >
              <template slot="append">
                <div style="width: 40px; box-sizing: border-box">
                  <el-form-item>
                    <DictSelection
                      dictName="检查有效期单位"
                      clearable
                      v-model="addForm.checkValidityUnit"
                      placeholder="单位"
                      style="width: auto"
                    >
                    </DictSelection>
                  </el-form-item>
                </div>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-if="addForm.recordRulesExecuteMethodName" :span="8">
          <el-form-item label="执行方式" required>
            <el-input
              v-model="addForm.recordRulesExecuteMethodName"
              placeholder="自动带出"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            v-if="addForm.produceTaskId && addForm.reportWorkType == 2"
            label="产出物"
          >
            <el-select
              v-model="addForm.outputType"
              placeholder="请选择产出物类型"
              filterable
              style="width: 100%"
              :disabled="preOutputDetails.some((i) => i.outputType == 2)"
            >
              <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="addForm.conclusion">
              <el-radio :label="1">合格</el-radio>
              <el-radio :label="2">不合格</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

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

    <header-title title="检查项目" :style="`margin-top: 20px`"></header-title>

    <template v-if="addForm.recordRulesClassify == 10">
      <el-tabs v-model="statisticsType" type="card">
        <el-tab-pane
          v-for="i in statisticsTypeList"
          :label="i.label"
          :name="i.value"
          :key="i.value"
        >
        </el-tab-pane>
      </el-tabs>
      <statistics
        ref="statisticsRef"
        :details.sync="addForm.details"
        :statisticsType="statisticsType"
        :produceTaskId="addForm.produceTaskId"
        :workOrderId="addForm.workOrderId"
        :routingId="addForm.produceRoutingId"
        :ruleId="addForm.ruleId"
      ></statistics>
    </template>

    <ele-pro-table
      v-if="addForm.recordRulesClassify && addForm.recordRulesClassify != 10"
      v-loading="loading"
      ref="table"
      row-key="id"
      :columns="detailsColumns"
      :datasource="addForm.details"
      cacheKey="mes-releaseRulesDialong-2510281408"
      :needPage="false"
    >
      <template v-slot:toolkit>
        <el-button
          v-if="addForm.recordRulesClassify != 4"
          type="primary"
          @click="batchCheck"
          >批量检查</el-button
        >
        <el-button
          v-if="addForm.recordRulesClassify != 4"
          type="primary"
          @click="batchQualified"
          >批量合格</el-button
        >
      </template>
      <template v-slot:paramValue="{ row }">
        <div v-if="addForm.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>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="modal-footer">
        <el-button
          v-if="
            $hasPermission('mes:producetaskrecordrulesrecord:res') &&
            productionInfo &&
            productionInfo.executeStatus == 2
          "
          :loading="butLoading"
          type="primary"
          @click="submit('submit-reset')"
        >
          重新一键报工
        </el-button>

        <el-button
          v-if="$hasPermission('mes:producetaskrecordrulesrecord:sus')"
          :loading="butLoading"
          type="primary"
          @click="submit('submit')"
          :disabled="productionInfo && productionInfo.executeStatus == 2"
        >
          一键报工
        </el-button>

        <template
          v-if="$hasPermission('mes:producetaskrecordrulesrecord:logicdelete')"
        >
          <el-popconfirm
            v-if="
              productionInfo &&
              productionInfo.recordId != null &&
              productionInfo.executeStatus == 1
            "
            title="您确定要清空缓存吗？"
            @confirm="clearCache"
          >
            <el-button slot="reference" :loading="butLoading" type="primary">
              清空缓存
            </el-button>
          </el-popconfirm>
        </template>

        <el-button
          v-if="$hasPermission('mes:producetaskrecordrulesrecord:saveorupdate')"
          :loading="butLoading"
          type="primary"
          @click="submit('cache')"
          :disabled="productionInfo && productionInfo.executeStatus == 2"
        >
          缓存
        </el-button>

        <el-button
          v-if="productionInfo && productionInfo.executeStatus == 2"
          @click="handleBeforeClose"
        >
          关闭
        </el-button>
      </div>
    </template>

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

<script>
  import {
    recordRulesDetailPage,
    getRecordRulesDetail
  } from '@/api/recordRules/index.js';
  import DictSelection from '@/components/Dict/DictSelection.vue';
  import SelectUser from '@/components/select/SelectUser/index.vue';
  import {
    saveOrUpdateAndSubmit,
    saveOrUpdate,
    logicDelete,
    getById,
    queryListByWorkOrderId,
    resetSubmit
  } from '@/api/producetaskrecordrulesrecord/index';
  import toolModal from '@/views/batchRecord/components/toolModal.vue';
  import { getTeam } from '@/api/produce/job.js';
  import { getFactoryarea } from '@/api/aps/index';
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import material from './material.vue';
  import statistics from './statistics.vue';

  export default {
    components: { SelectUser, toolModal, material, statistics },
    mixins: [dictMixins, tableColumnsMixin],
    emits: ['reload'],
    props: {
      isTempRecord: {
        type: Number,
        default: 0
      }
    },
    watch: {
      'addForm.details': {
        handler(details) {
          // 排除 物料添加 和 生产统计 的情况
          if (
            this.addForm.recordRulesClassify == '10' ||
            this.addForm.recordRulesClassify == '4'
          )
            return;
          const any = details.some((i) => i.checkResult === null);

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

          const every = details.every((i) => i.checkResult == 1);
          this.addForm.conclusion = every ? 1 : 2;
          console.log('this.addForm.conclusion', this.addForm.conclusion);
        },
        deep: true
      }
    },
    data() {
      const formDate = {
        id: null,
        workshopArea: '',
        workshopAreaId: null,
        checkFinishTime: '',
        checkStartTime: '',
        checkValidity: null,
        checkValidityUnit: '',
        conclusion: null,
        isTempRecord: this.isTempRecord,
        details: [],
        deviceId: 0,
        deviceName: '',
        batchNo: '',
        executeMethod: 0,
        formingNum: 0,
        itemType: 0,
        produceRoutingId: 0,
        produceRoutingName: '',
        produceTaskConfigId: 0,
        produceTaskId: 0,
        produceTaskName: '',
        productCode: '',
        productModel: '',
        productName: '',
        recordRulesClassify: null,
        ruleId: 0,
        ruleName: '',
        reportWorkType: 0,
        specification: '',
        workOrderCode: '',
        workOrderId: 0,
        itemTaskName: '',
        brandNo: '',
        duration: null,
        // 执行人
        executeUsersIds: [],
        executeUsers: [
          // {
          //   teamId: 0,
          //   teamName: '',
          //   userId: 0,
          //   userName: ''
          // }
        ],
        // 班组id
        teamId: '',
        // 物料字段name
        pickDetails: [],
        // 本次产出明细
        outputDetails: [],
        recordRulesExecuteMethodId: null,
        recordRulesExecuteMethodName: '',
        // 	产出类型 1-原材料，2-在制品，3.BOM标准产出
        outputType: 1
      };

      return {
        visible: false,
        formDate,
        addForm: JSON.parse(JSON.stringify(formDate)),
        formRules: {
          checkStartTime: [
            { required: true, message: '请选择检查开始时间', trigger: 'blur' },
            {
              required: true,
              message: '请选择检查开始时间',
              trigger: 'change'
            },
            {
              validator: (rule, value, callback) => {
                if (!value) return callback();
                const start = new Date(value).getTime();
                const now = Date.now();
                if (start > now) {
                  callback(new Error('开始时间不能超过当前时间'));
                } else {
                  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.addForm.checkStartTime).getTime();
                const finish = new Date(value).getTime();
                const now = Date.now();
                if (finish <= start) {
                  callback(new Error('结束时间必须大于开始时间'));
                } else if (finish > now) {
                  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' }
          ]
        },
        productionInfo: null,
        list: [],
        ruleInfo: null,
        showSelectUser: false,
        currentRow: null,
        butLoading: false,
        // 工艺路线
        workOrderInfo: null,
        // 加载中 loading
        loading: false,
        checked: false,
        teamUserList: [],
        teamList: [],
        teamAllList: [],
        workshopAreaList: [],
        // 上到工序的 产出明细
        preOutputDetails: [],
        // 汇总产出明细
        sumOutputDetails: [],
        outputTypeList: [
          { label: '原材料', value: 1 },
          { label: '在制品', value: 2 },
          { label: 'BOM标准产出', value: 3 }
        ],
        // 1-成品统计，2-物料统计，3-工序统计"
        statisticsType: '1',
        statisticsTypeList: [
          { label: '成品统计', value: '1' },
          { label: '物料统计', value: '2' },
          { label: '工序统计', value: '3' }
        ]
      };
    },
    computed: {
      title() {
        if (this.addForm.recordRulesClassify) {
          const dictValue = this.getDictValue(
            '记录规则类型',
            this.addForm.recordRulesClassify
          );
          return dictValue + '记录表';
        }
        return '记录表';
      },
      activeTeamUserList() {
        return this.teamUserList.filter((user) =>
          this.addForm.executeUsersIds.includes(user.id)
        );
      },
      // 规则详情表头
      detailsColumns() {
        let list = [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            label: '检查内容',
            prop: 'paramValue',
            minWidth: 120,
            slot: 'paramValue'
          }
        ];

        if (this.addForm.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;
      }
    },
    mounted() {
      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(productionInfo, workOrderInfo) {
        console.log(
          'productionInfo, workOrderInfo',
          productionInfo,
          workOrderInfo
        );
        this.visible = true;
        this.productionInfo = productionInfo;
        this.workOrderInfo = workOrderInfo;

        // 存在缓存记录
        if (this.productionInfo.recordId != null) {
          // 查询详情
          this.getCacheInfo();
        } else {
          this.addForm.batchNo = workOrderInfo.batchNo;
          this.addForm.executeMethod = productionInfo.executeMethod;
          this.addForm.formingNum = workOrderInfo.formingNum;
          this.addForm.itemType = productionInfo.itemType;
          this.addForm.produceRoutingId = workOrderInfo.produceRoutingId;
          this.addForm.produceRoutingName = workOrderInfo.produceRoutingName;
          this.addForm.produceTaskConfigId = productionInfo.produceTaskConfigId;
          this.addForm.produceTaskId = productionInfo.produceTaskId;
          this.addForm.produceTaskName = productionInfo.produceTaskName;
          this.addForm.productCode = workOrderInfo.productCode;
          this.addForm.productModel = workOrderInfo.model;
          this.addForm.productName = workOrderInfo.productName;
          this.addForm.reportWorkType = productionInfo.reportWorkType;
          this.addForm.specification = workOrderInfo.specification;
          this.addForm.workOrderCode = workOrderInfo.code;
          this.addForm.workOrderId = workOrderInfo.id;
          this.addForm.brandNo = productionInfo.brandNo;
          this.addForm.recordRulesExecuteMethodId =
            productionInfo.recordRulesExecuteMethodId;
          this.addForm.recordRulesExecuteMethodName =
            productionInfo.recordRulesExecuteMethodName;
          this.addForm.ruleId = productionInfo.ruleId;

          // 临时添加存在规则详情

          if (
            this.productionInfo.details &&
            this.productionInfo.details.length > 0
          ) {
            this.addForm.details = this.productionInfo.details.map((i) => {
              i.toolNames = i.tools.map((j) => j.toolName).join(',');
              return i;
            });
          } else {
            this.getRuleList();
          }
        }

        console.log('this.productionInfo', this.productionInfo);
        console.log('this.addForm', this.addForm);
        this.$nextTick(() => {
          this.getListByWorkOrderId();
          this.getRuleInfo();
        });
      },
      // 获取详情
      async getCacheInfo() {
        this.loading = true;
        try {
          const data = await getById(this.productionInfo.recordId);
          console.log('dat 缓存', data);
          data.details = data.details.map((i) => {
            i.toolNames = i.tools.map((j) => j.toolName).join(',');
            i.checkUsersIds = i.checkUsers.map((j) => j.userId);
            return i;
          });
          this.$util.assignObject(this.addForm, data);
          // 工时毫秒转小时
          this.addForm.duration = (
            this.addForm.duration /
            (1000 * 60 * 60)
          ).toFixed(2);
          this.addForm.recordRulesClassify += '';
          if (this.addForm.details?.length == 0) {
            this.getRuleList();
          }

          this.addForm.executeUsersIds = this.addForm.executeUsers.map(
            (i) => i.userId
          );

          this.addForm.teamId =
            this.addForm.executeUsers.length > 0
              ? this.addForm.executeUsers[0].teamId
              : '';

          // 加载班组人员列表
          if (this.addForm.teamId) {
            const index = this.teamList.findIndex(
              (item) => item.id == this.addForm.teamId
            );
            this.teamUserList = this.teamAllList[index];
          }

          if (this.addForm.outputType == null) {
            this.addForm.outputType = 1;
          }

          this.getListByWorkOrderId();

          this.loading = false;
        } catch (error) {
          this.loading = false;
        }
      },
      // 物料信息查询
      async getListByWorkOrderId(type = '') {
        console.log(
          'type 物料信息',
          type,
          this.productionInfo.produceTaskId,
          this.addForm.reportWorkType
        );
        if (
          !this.productionInfo.produceTaskId ||
          this.addForm.reportWorkType != 2
        )
          return;
        // 查询物料信息
        const materialObject = await queryListByWorkOrderId({
          workOrderId: this.addForm.workOrderId,
          recordId: this.productionInfo.recordId,
          produceTaskId: this.productionInfo.produceTaskId,
          ruleId: this.addForm.ruleId
        });

        console.log('materialList 物料信息', materialObject);

        this.addForm.outputDetails = materialObject.outputDetails.map((i) => {
          i.reportQuantityCopy = i.reportQuantity;

          const sumItem = materialObject.sumOutputDetails.find(
            (item) => item.categoryCode === i.categoryCode
          );

          if (sumItem) {
            i.sumQualifiedQuantity = sumItem.sumQualifiedQuantity;
            i.sumNoQualifiedQuantity = sumItem.sumNoQualifiedQuantity;
            i.sumReportQuantity = sumItem.sumReportQuantity;
          } else {
            i.sumQualifiedQuantity = 0;
            i.sumNoQualifiedQuantity = 0;
            i.sumReportQuantity = 0;
          }

          return i;
        });

        const pickDetails = materialObject.pickDetails.map((i) => {
          // 物料清单中如果存在则 selected 设置为 true
          const any = this.addForm.outputDetails.find(
            (j) => j.categoryCode === i.categoryCode
          );
          if (any) {
            i.selected = true;
          } else {
            i.selected = false;
          }

          const sumItem = materialObject.sumOutputDetails.find(
            (item) => i.categoryCode === item.categoryCode
          );

          if (sumItem) {
            i.sumQualifiedQuantity = sumItem.sumQualifiedQuantity;
            i.sumNoQualifiedQuantity = sumItem.sumNoQualifiedQuantity;
            i.sumReportQuantity = sumItem.sumReportQuantity;
          } else {
            i.sumQualifiedQuantity = 0;
            i.sumNoQualifiedQuantity = 0;
            i.sumReportQuantity = 0;
          }

          return i;
        });

        const preOutputDetails = materialObject.preOutputDetails.map((i) => {
          i.quantity = i.qualifiedQuantity;

          // 物料清单中如果存在则 selected 设置为 true
          const any = this.addForm.outputDetails.find(
            (j) => j.categoryCode === i.categoryCode
          );
          if (any) {
            i.selected = true;
          } else {
            i.selected = false;
          }

          const sumItem = materialObject.sumOutputDetails.find(
            (item) => i.categoryCode === item.categoryCode
          );

          if (sumItem) {
            i.sumQualifiedQuantity = sumItem.sumQualifiedQuantity;
            i.sumNoQualifiedQuantity = sumItem.sumNoQualifiedQuantity;
            i.sumReportQuantity = sumItem.sumReportQuantity;
          } else {
            i.sumQualifiedQuantity = 0;
            i.sumNoQualifiedQuantity = 0;
            i.sumReportQuantity = 0;
          }

          return i;
        });

        this.preOutputDetails = preOutputDetails;

        this.sumOutputDetails = materialObject.sumOutputDetails;

        this.addForm.pickDetails = [
          ...preOutputDetails.map((i) => i),
          ...pickDetails
        ];

        //  this.preOutputDetails 是否存在outputType=2的数据
        const hasInProcess = this.preOutputDetails.some(
          (i) => i.outputType == 2
        );
        if (hasInProcess) {
          // 产出物为在制品
          this.addForm.outputType = 2;
          // 不可选择
        }
      },
      // 规则信息
      async getRuleInfo() {
        const data = await getRecordRulesDetail(this.productionInfo.ruleId);
        this.ruleInfo = data;
        console.log('this.ruleInfo', this.ruleInfo);
        if (this.productionInfo.recordId == null) {
          // 赋值表单信息
          this.addForm.recordRulesClassify = this.ruleInfo.classify + '';
          this.addForm.ruleId = this.ruleInfo.id;
          this.addForm.ruleName = this.ruleInfo.name;
          this.addForm.deviceId = this.ruleInfo.deviceId;
          this.addForm.deviceName = this.ruleInfo.deviceName;
        }
      },
      // 查询记录规则 事项列表
      async getRuleList() {
        const { list } = await recordRulesDetailPage({
          rulesId: this.productionInfo.ruleId,
          pageNum: 1,
          size: 9999
        });
        // 添加必要参数
        this.addForm.details = list.map((i) => {
          return {
            ...i,
            id: null,
            checkResult: null,
            checkStatus: null,
            checkStatusDesc: i.defaultValue || '',
            errorMsg: '',
            checkUsers: [],
            checkUsersIds: [],
            paramValue: i.paramValue,
            toolNames: i.tools.map((i) => i.toolName).join(',')
          };
        });

        console.log('this.addForm 添加规则', this.addForm, list);
      },
      handleBeforeClose() {
        this.addForm = JSON.parse(JSON.stringify(this.formDate));
        this.workOrderInfo = null;
        this.productionInfo = null;
        this.statisticsType = '1';
        console.log('this.$refs.ruleFormRef', this.addForm);
        this.$nextTick(() => {
          this.$refs.ruleFormRef.clearValidate();
          this.visible = false;
        });
      },
      // 提交
      submit(type) {
        console.log('this.addForm', this.addForm);
        // 验证表单
        this.$refs.ruleFormRef.validate(async (valid) => {
          if (!valid) {
            return;
          }

          if (this.addForm.executeUsersIds.length == 0) {
            this.$message.warning('请选择执行人！');
            return;
          }

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

          // 报工需要验证 缓存不验证 排除 recordRulesClassify ==4 物料添加 == 10生产统计 的情况
          if (
            type.includes('submit') &&
            this.addForm.recordRulesClassify != '4' &&
            this.addForm.recordRulesClassify != '10'
          ) {
            // 验证检查项目
            const detailRequired = this.addForm.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.addForm));

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

          if (this.$refs.materialRef) {
            // 验证产出物数量
            const materialValid =
              await this.$refs.materialRef.validateOutputQuantities();
            if (!materialValid) {
              return;
            }
          }

          if (
            this.$refs.statisticsRef &&
            type != 'cache' &&
            type != 'submit-reset'
          ) {
            // 验证统计项目
            const valid = this.$refs.statisticsRef.validateStatisticsFilled();
            if (!valid) {
              return;
            }
          }

          // 提交
          this.butLoading = true;
          try {
            if (type == 'submit') {
              await saveOrUpdateAndSubmit(body);
              this.$message.success('报工成功！');
            } else if (type == 'submit-reset') {
              await resetSubmit(body);
              this.$message.success('重新报工成功！');
            } else {
              const id = await saveOrUpdate(body);
              this.addForm.id = id;
              this.$message.success('缓存成功！');
            }
            this.butLoading = false;

            // 返回
            this.$emit('reload');

            this.handleBeforeClose();
          } catch (error) {
            this.butLoading = false;
          }
        });
      },
      async clearCache() {
        if (!this.productionInfo || !this.productionInfo.recordId) {
          this.$message.warning('无缓存记录！');
          return;
        }
        try {
          this.butLoading = true;
          await logicDelete(this.productionInfo.recordId);
          this.butLoading = false;
          this.productionInfo.recordId = null;
          this.addForm.workshopArea = '';
          this.addForm.workshopAreaId = null;
          this.addForm.checkFinishTime = null;
          this.addForm.checkStartTime = null;
          this.addForm.checkValidity = null;
          this.addForm.checkValidityUnit = '';
          this.addForm.conclusion = null;
          this.addForm.id = null;
          this.addForm.duration = 0;
          this.addForm.executeUsers = [];
          this.addForm.executeUsersIds = [];
          this.addForm.pickDetails = [];
          this.addForm.outputDetails = [];

          this.getRuleList();
          this.$message.success('缓存清空成功！');
          this.productionInfo.executeStatus = 0;
          if (this.addForm.isTempRecord) {
            this.handleBeforeClose();
          } else {
            this.$nextTick(() => {
              this.$refs.ruleFormRef.clearValidate();
            });
          }
          this.$emit('reload');
        } catch (error) {
          this.butLoading = false;
        }
      },
      // 选择工具
      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 = '';
      },
      checkTeamList(id) {
        this.addForm.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.addForm.executeUsersIds.length == this.teamUserList.length) {
          this.checked = true;
        } else {
          this.checked = false;
        }

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

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

        this.computedDuration();

        // 同步详情执行人
        this.addForm.details.forEach((detail) => {
          detail.checkUsersIds = this.addForm.executeUsersIds;
          detail.checkUsers = this.addForm.executeUsers;
        });
      },
      checkChange() {
        this.addForm.executeUsersIds = [];
        if (this.checked) {
          this.addForm.executeUsersIds = this.teamUserList.map(
            (item) => item.id
          );
        } else {
          this.addForm.executeUsersIds = [];
        }
      },
      // 计算工时
      computedDuration() {
        if (
          this.addForm.checkStartTime &&
          this.addForm.checkFinishTime &&
          this.addForm.executeUsersIds.length > 0
        ) {
          const start = new Date(this.addForm.checkStartTime);
          const finish = new Date(this.addForm.checkFinishTime);
          const diff = finish - start; // 毫秒差值
          const hours = diff / (1000 * 60 * 60); // 转换为小时
          const totalDuration = hours * this.addForm.executeUsersIds.length;
          this.addForm.duration = totalDuration.toFixed(1);
        }
      },
      durationChagne() {
        // 保留小数后一位
        if (
          this.addForm.duration &&
          this.addForm.duration.toString().includes('.')
        ) {
          this.addForm.duration = Number(this.addForm.duration).toFixed(1);
        }
      },
      checkUsersIdsChange(row) {
        // 同步 checkUsers
        row.checkUsers = row.checkUsersIds.map((i) => {
          const user = this.activeTeamUserList.find((item) => item.id === i);
          return {
            teamId: this.addForm.teamId,
            teamName: this.teamList.find(
              (team) => team.id == this.addForm.teamId
            )?.name,
            userId: user.id,
            userName: user.name
          };
        });

        console.log('row', row);
      },
      // 查询车间区域
      async getWorkshopArea() {
        const data = await getFactoryarea({
          pageNum: 1,
          size: 999,
          type: 3
        });
        console.log('list', data.list);
        this.workshopAreaList = data.list;
      },
      workshopAreaIdChange(e) {
        const area = this.workshopAreaList.find((i) => i.id === e);
        if (area) {
          this.addForm.workshopArea = area.name;
        } else {
          this.addForm.workshopArea = '';
        }
      },
      // 批量检查
      batchCheck() {
        this.addForm.details = this.addForm.details.map((i) => {
          i.checkStatus = 1;
          return i;
        });
      },
      // 批量合格
      batchQualified() {
        this.addForm.details = this.addForm.details.map((i) => {
          i.checkResult = 1;
          return i;
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .modal-body {
    padding: 16px;
    min-height: 100px;
  }
  .modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }

  .el-form-item .el-form-item {
    margin-bottom: -5px;
  }

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

  ::v-deep .el-select__tags {
    flex-wrap: nowrap;
    overflow: auto;
  }

  /* 输入框最大宽度*/
  ::v-deep .el-select__tags-text {
    max-width: 90px;
  }

  /* 底部滚动条的高度*/
  ::v-deep .el-select__tags::-webkit-scrollbar {
    height: 2px !important;
  }
</style>