kd-aiot-frontend-pcs/src/views/recordComponents/programRulesDialog.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @close="handleClose"
    append-to-body
    resizable
    maxable
    width="80%"
  >
    <header-title title="基本信息"></header-title>
    <el-form
      ref="formRef"
      :model="addForm"
      :rules="rules"
      label-width="120px"
      :disabled="type === 'detail'"
      v-loading="loading"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="计划配置单号" prop="code">
            <el-input
              v-model="addForm.code"
              size="small"
              placeholder="自动带出"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="计划配置名称" prop="name">
            <el-input
              v-model="addForm.name"
              size="small"
              placeholder="请输入"
              :disabled="type === 'dispatch'"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="自动派单" prop="autoOrder">
            <el-select
              v-model="addForm.autoOrder"
              size="small"
              style="width: 100%"
              :disabled="type === 'dispatch'"
            >
              <el-option :value="1" label="是"></el-option>
              <el-option :value="0" label="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="计划完成时长" prop="duration">
            <div style="display: flex">
              <el-input
                type="number"
                v-model="addForm.duration"
                size="small"
                placeholder="请输入"
                @input="formDataDurationTime"
                :disabled="type === 'dispatch'"
              >
                <template #suffix>分钟</template>
              </el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" prop="type">
            <el-select
              v-model="addForm.type"
              size="small"
              @change="typeChange"
              style="width: 100%"
              :disabled="addForm.autoOrder == 1 && type === 'dispatch'"
            >
              <el-option :value="1" label="班组"></el-option>
              <el-option :value="0" label="个人"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="dispatchStatus && addForm.type == 1">
          <el-form-item label="班组" prop="teamId">
            <el-select
              v-model="addForm.teamId"
              size="small"
              @change="teamChange()"
              style="width: 100%"
            >
              <el-option
                :value="i.id"
                :label="i.name"
                v-for="i in teamAllList"
                :key="i.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="dispatchStatus && addForm.type == 1">
          <el-form-item label="场站" prop="productLineId">
            <el-select
              v-model="addForm.productLineId"
              placeholder="请选择场站"
              filterable
              style="width: 100%"
            >
              <el-option
                v-for="item in productLineList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
                @click.native="addForm.productLineName = item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="dispatchStatus && addForm.type == 0">
          <el-form-item label="部门" prop="groupId">
            <deptSelect
              v-model="addForm.groupId"
              @changeGroup="searchDeptNodeClick"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="dispatchStatus && addForm.type == 0">
          <el-form-item label="负责人" prop="executeIdList">
            <el-select
              v-model="addForm.executeIdList"
              size="small"
              style="width: 100%"
              multiple
              filterable
              @change="executeIdListChange"
              key="executeIdList"
            >
              <el-option
                v-for="item in executorList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="审核人" prop="approvalUserId">
            <el-select
              v-model="addForm.approvalUserId"
              size="small"
              clearable
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in uerList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="紧急程度" prop="urgent">
            <DictSelection
              dictName="紧急程度"
              clearable
              v-model="addForm.urgent"
              :disabled="type === 'dispatch'"
            >
            </DictSelection>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="关联记录规则" required prop="ruleName">
            <div class="mask-box" @click="handleAddTab">
              <el-input
                v-model="addForm.ruleName"
                placeholder="请选择记录规则"
                size="small"
                readonly
                :disabled="type === 'dispatch'"
              >
                <template #append>
                  <el-button size="small">选择规则</el-button>
                </template>
              </el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关联对象" prop="associatedObject">
            <el-select
              v-model="addForm.associatedObject"
              size="small"
              style="width: 100%"
            >
              <el-option :value="1" label="车间"></el-option>
              <el-option :value="2" label="设备"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="addForm.associatedObject == 1">
          <el-form-item label="关联车间" required prop="workshopPlanName">
            <div class="mask-box" @click="openWorkShops(1)">
              <el-input
                v-model="addForm.workshopPlanName"
                placeholder="请选择关联车间"
                size="small"
                readonly
                :disabled="type === 'dispatch'"
              >
                <template #append>
                  <el-button size="small">选择车间</el-button>
                </template>
              </el-input>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="addForm.associatedObject == 2">
          <el-form-item label="关联设备" required prop="deviceName">
            <div class="mask-box" @click="openWorkShops(2)">
              <el-input
                v-model="addForm.deviceName"
                placeholder="请选择关联设备"
                size="small"
                readonly
                :disabled="type === 'dispatch'"
              >
                <template #append>
                  <el-button size="small">选择设备</el-button>
                </template>
              </el-input>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              resize="none"
              v-model="addForm.remark"
              :rows="2"
              placeholder="请详细说明"
              size="small"
              :disabled="type === 'dispatch'"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <header-title title="规则明细" style="margin-top: 20px"> </header-title>

      <el-tabs
        v-if="addForm.recordTemplateStyle == '4'"
        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>

      <ele-pro-table
        ref="table"
        :columns="bankColumns"
        :datasource="detialsDatasource"
        :need-page="false"
        row-key="id"
        class="table_list"
        cache-key="workshop-record-plan-details-item-2511201537"
      >
        <template v-slot:toolbar>
          <div style="display: flex; align-items: center; gap: 10px">
            <el-button
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="addRow()"
            >
              新建
            </el-button>
          </div>
        </template>

        <template v-slot:sortNum="{ row }">
          <el-input-number
            style="width: 80px"
            v-model.number="row.sortNum"
            placeholder="请输入排序"
            size="mini"
            type="number"
            :min="1"
            controls-position="right"
          ></el-input-number>
        </template>

        <template v-slot:paramType="{ row }">
          <el-select
            v-model="row.paramType"
            placeholder="请选择参数类型"
            size="mini"
            @change="paramTypeChange(row)"
          >
            <el-option label="数值" :value="1" />
            <el-option label="选择" :value="2" />
            <el-option label="上下限" :value="3" />
            <el-option label="规格" :value="4" />
            <el-option label="时间" :value="5" />
            <el-option label="范围" :value="6" />
            <el-option label="文本" :value="7" />
            <!-- <el-option label="枚举" :value="8" /> -->
            <el-option label="计算" :value="9" />
          </el-select>
        </template>

        <template v-slot:paramValue="{ row }">
          <!-- 根据参数类型渲染不同的输入组件 -->
          <el-link
            v-if="addForm.recordTemplateStyle == '3'"
            :underline="false"
            style="cursor: pointer"
          >
            <div class="ele-cell">
              <div @click="selectChooseModalProduct(row)">
                {{ row.productName ? row.productName : '请选择产品' }}
              </div>
              <i
                v-if="row.tools.length == 0"
                class="el-icon-arrow-down"
                @click="selectChooseModalProduct(row)"
              ></i>
              <i v-else class="el-icon-close" @click="clearProduct(row)"></i>
            </div>
          </el-link>
          <el-input
            v-else
            v-model="row.paramValue"
            placeholder="请输入参数内容"
            size="mini"
            type="textarea"
            rows="1"
            autosize
          ></el-input>
        </template>

        <template v-slot:formula="{ row }">
          <div v-if="row.paramType == 9" class="formula-builder">
            <div class="formula-builder__selects">
              <!-- 选择参数：从已填的非计算参数内容里取 -->
              <el-select
                v-model="row._paramSelect"
                placeholder="选择参数"
                size="mini"
                style="width: 100px; margin-right: 8px; flex-shrink: 0"
                @change="paramSelectChange($event, row)"
              >
                <el-option
                  v-for="item in getSelectOptionsByDetails(
                    row.statisticsType,
                    item
                  )"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

              <!-- 选择运算符 -->
              <el-select
                v-model="row._opSelect"
                :key="row._opSelect + '_opSelect'"
                placeholder="选择符号"
                size="mini"
                style="width: 100px; flex-shrink: 0"
                @change="opSelectChange($event, row)"
              >
                <el-option
                  v-for="op in opSelectOptions"
                  :key="op"
                  :label="op"
                  :value="op"
                />
              </el-select>

              <!-- 替换或者追加 -->
              <el-select
                v-if="row.activeIndex != undefined"
                v-model="row._replaceOrAppend"
                :key="row._replaceOrAppend + 'row._replaceOrAppend'"
                placeholder="选择"
                size="mini"
                style="width: 80px; margin-left: 8px; flex-shrink: 0"
              >
                <el-option key="append" label="追加" value="append" />
                <el-option key="replace" label="替换" value="replace" />
              </el-select>
            </div>

            <!-- 已组装公式标签展示 -->
            <div
              v-if="row.formulaParts && row.formulaParts.length"
              style="display: inline-flex; flex-wrap: wrap; max-width: 100%"
            >
              <el-tag
                v-for="(p, index) in row.formulaParts"
                :key="index"
                size="mini"
                closable
                :type="row.activeIndex === index ? 'primary' : 'info'"
                @click="formulaPartsTagClick(index, row)"
                @close="tagItemDelete(index, row)"
              >
                {{ p }}
              </el-tag>
            </div>

            <!-- 公式字符串展示（只读） -->
            <el-input
              v-if="row.formulaParts && row.formulaParts.length"
              :value="row.formulaParts.join('')"
              size="mini"
              type="textarea"
              disabled
              placeholder="公式"
              style="margin-top: 6px"
            />
          </div>
        </template>

        <template v-slot:defaultValue="{ row }">
          <el-row>
            <el-col :span="12">
              <!-- <el-select
                v-if="row.paramType != 7"
                v-model="row.symbol"
                placeholder="请选择"
                size="mini"
              >
                <el-option label=">" value=">"> </el-option>
                <el-option label="<" value="<"> </el-option>
                <el-option label="!=" value="!="> </el-option>
                <el-option label=">=" value=">="> </el-option>
                <el-option label="<=" value="<="> </el-option>
                <el-option label="~~" value="~~"> </el-option>
                <el-option label="+-" value="+-"> </el-option>
                <el-option label="......" value="......"> </el-option>
              </el-select> -->
              <DictSelection
                v-if="row.paramType != 7"
                clearable
                dictName="数学字符"
                v-model="row.symbol"
                placeholder="请选择逻辑"
                size="mini"
              ></DictSelection>
            </el-col>
            <el-col :span="row.paramType != 7 ? 12 : 24">
              <el-input
                v-model="row.defaultValue"
                placeholder="请输入默认值"
                size="mini"
              ></el-input>
            </el-col>
          </el-row>
        </template>
        <template v-slot:maxValue="{ row }">
          <el-input
            v-if="row.paramType == 3 || row.paramType == 6"
            v-model="row.maxValue"
            placeholder="请输入参数上限"
            size="mini"
          ></el-input>
        </template>
        <template v-slot:minValue="{ row }">
          <el-input
            v-if="row.paramType == 3 || row.paramType == 6"
            v-model="row.minValue"
            placeholder="请输入参数下限"
            size="mini"
          ></el-input>
        </template>
        <template v-slot:unitName="{ row }">
          <!-- <el-input
            v-model="row.unitName"
            placeholder="请输入参数单位"
            size="mini"
          ></el-input> -->
          <DictSelection
            v-if="row.paramType != 7"
            dictName="工艺参数单位"
            clearable
            filterable
            v-model="row.unitName"
            size="mini"
          >
          </DictSelection>
        </template>
        <template v-slot:toolName="{ row }">
          <el-link :underline="false" style="cursor: pointer">
            <div class="ele-cell">
              <div @click="handleAdd(row)">
                {{
                  row.tools && row.tools.length > 0
                    ? row.tools.map((i) => i.toolName).join(',')
                    : '请选择'
                }}
              </div>
              <i
                v-if="row.tools.length == 0"
                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:toolCodes="{ row }">
          <el-input
            :value="
              row.tools && row.tools.length > 0
                ? row.tools.map((i) => i.toolCode).join(',')
                : ''
            "
            placeholder="工具自动带出"
            disabled
            size="mini"
          ></el-input>
        </template>
        <template v-slot:remark="{ row }">
          <el-input
            v-model="row.remark"
            placeholder="请输入"
            size="mini"
          ></el-input>
        </template>

        <template v-slot:action="{ row }">
          <el-link
            v-if="type != 'detail'"
            type="danger"
            :underline="false"
            icon="el-icon-delete"
            @click="deleteRow(item, row)"
          >
            删除
          </el-link>
        </template>
      </ele-pro-table>
    </el-form>

    <template v-slot:footer>
      <el-button
        v-if="type != 'detail'"
        type="primary"
        @click="submit"
        :loading="butLoading"
        >{{ type == 'dispatch' ? '派单' : '保存' }}</el-button
      >
      <el-button @click="handleClose">取消</el-button>
    </template>

    <selectReleaseRules
      ref="selectReleaseRulesRef"
      @chooseRules="chooseRules"
      :classify="classify"
    ></selectReleaseRules>

    <selectWorkshop
      ref="selectWorkshopRef"
      @confirm="confirmWorkshops"
    ></selectWorkshop>

    <toolModal ref="toolModalTowRef" @chooseModal="chooseModalProduct" />
    <MaterialAdd ref="MaterialAddRef" @chooseEquipment="confirmWorkshops" />
    <toolModal ref="toolModalRef" @chooseModal="chooseModal" />
  </ele-modal>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import { getUserPage } from '@/api/system/organization';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import { getCode } from '@/api/login/index.js';
  import selectReleaseRules from '@/components/selectReleaseRules/select-release-rules.vue';
  import selectWorkshop from '@/components/selectWorkshop/selectWorkshop.vue';
  import {
    getRecordRulesPlanDetail,
    save,
    update,
    recordrulesGetById,
    recordrulesplanManualDispatchOrder
  } from '@/api/recordRules/index.js';
  import toolModal from '@/BIZComponents/toolModal.vue';
  import MaterialAdd from '@/components/common/MaterialAdd.vue';
  import { getteampage } from '@/api/main/index.js';

  const formBaseData = {
    address: '',
    areaId: 0,
    areaName: '',
    autoOrder: 1,
    code: '',
    configCode: '',
    configType: 1,
    createUserName: '',
    detailList: [],
    duration: null,
    executeUsers: [],
    factoryId: null,
    factoryName: '',
    id: null,
    name: '',
    planEndTime: '',
    planStartTime: '',
    remark: '',
    ruleId: null,
    ruleName: '',
    status: 0,
    type: 0,
    updateUserName: '',
    urgent: 1,
    workshopCode: '',
    workshopId: null,
    workshopName: '',
    workshopPlanId: null,
    workshopPlanName: '',
    recordRulesClassify: null,
    recordTemplateStyle: null,
    reportWorkType: null,
    executeIdList: [],
    associatedObject: 1,
    deviceName: '',
    deviceId: '',
    deviceCode: '',
    planType: 2,
    groupId: '', // 部门id
    teamId: '', // 班组id
    teamName: '', // 班组id
    productLineId: null,
    productLineName: ''
  };
  export default {
    props: {
      planType: {
        type: Number,
        default: 2
      }
    },
    mixins: [dictMixins, tableColumnsMixin],
    components: {
      deptSelect,
      selectReleaseRules,
      selectWorkshop,
      toolModal,
      MaterialAdd
    },
    data() {
      return {
        visible: false,
        title: '新增记录计划配置',
        activeIndex: 0,
        classify: '',
        addForm: JSON.parse(JSON.stringify(formBaseData)),
        rules: {
          name: [
            { required: true, message: '请输入计划配置名称', trigger: 'blur' }
          ],
          autoOrder: [
            { required: true, message: '请选择是否自动派单', trigger: 'change' }
          ],
          ruleId: [
            { required: true, message: '请选择规则名称', trigger: 'change' }
          ],
          duration: [
            { required: true, message: '请输入计划完成时长', trigger: 'blur' }
          ],
          deviceName: [
            { required: true, message: '请选择设备', trigger: 'change' }
          ],
          // categoryId: [
          //   { required: true, message: '请选择设备类别', trigger: 'change' }
          // ],
          groupId: [
            { required: true, message: '请选择部门', trigger: 'change' }
          ],
          teamId: [
            { required: true, message: '请选择班组', trigger: 'change' }
          ],
          executeIdList: [
            { required: true, message: '请选择人员', trigger: 'change' }
          ],
          urgent: [
            { required: true, message: '请选择紧急程度', trigger: 'change' }
          ],
          ruleName: [
            { required: true, message: '请选择规则名称', trigger: 'change' }
          ],
          workshopPlanName: [
            { required: true, message: '请选择车间区域', trigger: 'change' }
          ]
        },
        executorList: [],
        uerList: [],
        // 执行方式列表
        executeMethodList: [],
        // 1-成品统计，2-物料统计，3-工序统计"
        statisticsType: '1',
        statisticsTypeList: [
          { label: '成品统计', value: '1' },
          { label: '物料统计', value: '2' },
          { label: '工序统计', value: '3' }
        ],
        opSelectOptions: ['+', '-', '*', '/', '%', '(', ')'],
        butLoading: false,
        teamAllList: [],
        productLineList: [],
        loading: false,
        type: 'add' // 弹窗类型 add-新增 edit-编辑 detail-查看
      };
    },
    computed: {
      dispatchStatus() {
        return (
          (this.addForm.autoOrder &&
            (this.type == 'add' ||
              this.type == 'edit' ||
              this.type == 'detail')) ||
          (!this.addForm.autoOrder && this.type == 'dispatch')
        );
      },
      // 当前用户信息
      loginUser() {
        return this.$store.state.user?.info;
      },
      workshopsColumns() {
        return [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            prop: 'workshopCode',
            label: '车间编码'
          },
          {
            label: '车间名称',
            prop: 'workshopName'
          },
          {
            label: '所属工厂',
            prop: 'factoryName'
          },
          {
            label: '所属厂房',
            prop: 'workshopPlanName',
            slot: 'factory'
          },
          {
            label: '所属区域',
            prop: 'areaName'
          },
          {
            label: '详细地址',
            prop: 'address'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 110,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ];
      },
      bankColumns() {
        const list = [
          {
            width: 110,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            prop: 'sortNum',
            label: '排序',
            align: 'center',
            slot: 'sortNum',
            minWidth: 110
          },
          {
            prop: 'paramType',
            label: '参数类型',
            align: 'center',
            slot: 'paramType',
            minWidth: 110
          },
          {
            prop: 'paramValue',
            label: '参数内容',
            align: 'center',
            slot: 'paramValue',
            minWidth: 261
          },
          {
            prop: 'formula',
            label: '计算公式',
            align: 'center',
            slot: 'formula',
            minWidth: 300
          },
          {
            prop: 'defaultValue',
            label: '默认值',
            align: 'center',
            slot: 'defaultValue',
            minWidth: 150
          },
          {
            prop: 'maxValue',
            label: '参数上限',
            align: 'center',
            slot: 'maxValue',
            minWidth: 110
          },
          {
            prop: 'minValue',
            label: '参数下限',
            align: 'center',
            slot: 'minValue',
            minWidth: 110
          },
          {
            prop: 'unitName',
            label: '参数单位',
            align: 'center',
            slot: 'unitName',
            minWidth: 110
          },
          {
            prop: 'toolName',
            label: '工具名称',
            align: 'center',
            slot: 'toolName',
            minWidth: 110
          },
          {
            prop: 'toolCodes',
            label: '工具编码',
            align: 'center',
            slot: 'toolCodes',
            minWidth: 110
          },
          {
            prop: 'remark',
            label: '备注',
            align: 'center',
            slot: 'remark',
            minWidth: 110
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 110,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ];
        if (this.addForm.recordTemplateStyle != '4') {
          // 过滤掉 计算公式 列
          return list.filter((i) => i.prop != 'formula');
        }
        return list;
      },
      // 过滤明细数据源
      detialsDatasource() {
        // 如果是模板样式4，过滤统计类型
        if (this.addForm.recordTemplateStyle == '4') {
          return this.addForm.detailList.filter(
            (i) => i.statisticsType == this.statisticsType
          );
        }
        return this.addForm.detailList;
      }
    },
    created() {
      // 获取审核人列表、巡点检人员
      this.getUserList();
      // 获取所有班组
    },
    methods: {
      // 外部调用，打开弹窗
      async open(type, data, classify) {
        console.log('type data', type, data);
        this.classify = classify;
        this.type = type;
        await this.getAllTeamList();
        if (type == 'add') {
          this.title = '新增记录计划配置';
          this.getOrderCode();
        } else if (type == 'edit') {
          this.title = '修改记录计划配置';
          this.getDetail(data.id);
        } else if (type == 'dispatch') {
          this.title = '派单';
          this.getDetail(data.id);
        } else {
          this.title = '查看记录计划配置';
          this.getDetail(data.id);
        }

        this.visible = true;

        this.$nextTick(() => {
          this.$refs.formRef.clearValidate();
        });
      },
      // 查询详情
      async getDetail(id) {
        this.loading = true;
        const data = await getRecordRulesPlanDetail(id);
        console.log('记录计划配置详情', data);
        this.$util.assignObject(this.addForm, data);
        // 处理回显数据
        if (this.addForm.type === 0) {
          // 个人
          this.addForm.executeIdList = this.addForm.executeUsers.map(
            (item) => item.userId
          );
          this.addForm.groupId = this.addForm.executeUsers[0]?.groupId || '';
          this.searchDeptNodeClick(this.addForm.groupId);
        } else {
          this.teamChange(true);
        }

        // if (this.type === 'dispatch') {
        //   // 自动派单
        //   this.addForm.autoOrder = 1;
        // }

        this.loading = false;

        console.log('this.addForm', this.addForm);
      },
      // 关闭时清理表单
      handleClose() {
        this.addForm = JSON.parse(JSON.stringify(formBaseData));
        this.$nextTick(() => {
          this.$refs.formRef.clearValidate();
          this.visible = false;
        });
      },
      // 构建数据
      formMateBody() {
        // 通过校验，构建数据
        const body = JSON.parse(JSON.stringify(this.addForm));

        return body;
      },
      // 提交
      submit() {
        console.log('this.addForm', this.addForm);
        this.$refs.formRef.validate(async (valid) => {
          if (valid) {
            if (!this.addForm.detailList?.length) {
              return this.$message.error('规则明细不能为空');
            }
            this.butLoading = true;

            try {
              // 赋值创建人和更新人
              if (this.addForm.id) {
                this.addForm.updateUserName = this.loginUser?.name || '';
              } else {
                this.addForm.createUserName = this.loginUser?.name || '';
              }

              const body = this.formMateBody();
              body.planType = this.planType;

              if (this.type == 'dispatch') {
                await recordrulesplanManualDispatchOrder(body);
                this.$message.success('派单成功');
              } else {
                let api = this.addForm.id ? update : save;
                await api(body);
                this.$message.success('保存成功');
              }
              this.butLoading = false;

              this.$emit('reload');

              this.handleClose();
            } catch (error) {
              this.butLoading = false;
            }
          }
        });
      },
      // 过滤计划完成时长
      formDataDurationTime(value) {
        if (value > 0) {
          this.addForm.duration = value.replace(/^[0]+/, '');
        } else {
          this.addForm.duration = 0;
        }
      },
      typeChange() {
        this.addForm.groupId = '';
        this.addForm.teamId = '';
        this.addForm.teamName = '';
        this.addForm.executeIdList = [];
        this.addForm.productLineName = '';
        this.addForm.productLineId = '';
        this.productLineList = [];
      },
      //选择部门(搜索)
      async searchDeptNodeClick(info, data) {
        if (info) {
          // 根据部门获取人员
          const params = { groupId: info };
          await this.getUserList(params);
        } else {
          this.addForm.groupId = null;
        }
      },
      // 获取审核人列表、巡点检人员
      async getUserList(params) {
        try {
          let data = { pageNum: 1, size: -1 };
          // 如果传了参数就是获取部门人员数据
          if (params) {
            data = Object.assign(data, params);
          }
          const res = await getUserPage(data);
          if (params) {
            this.executorList = res.list;
          } else {
            this.uerList = res.list;
          }
        } catch (error) {}
      },
      // 获取自动生成的单号
      async getOrderCode() {
        const data = await getCode('record_rules_plan_code');
        this.addForm.code = data;
      },
      // 选择记录规则
      handleAddTab() {
        // 添加tab
        this.$refs.selectReleaseRulesRef.open(
          '',
          '',
          this.addForm.ruleId ? [this.addForm.ruleId] : []
        );
      },
      async chooseRules(rules) {
        console.log('选择的规则', rules);

        // 查询规则明细，回显规则明细数据
        const data = await recordrulesGetById(rules.id);

        // 处理详情的 公式 字段
        data.details.forEach((item) => {
          if (item.paramType == 9 && item.formula) {
            // formula格式为[A][+][b][*][C] 拆分 -> ['A','+','b','*','C']
            if (item.formula) {
              const matches = item.formula.match(/\[([^\]]+)\]/g);
              if (matches) {
                this.$set(
                  item,
                  'formulaParts',
                  matches.map((m) => m.slice(1, -1)).filter(Boolean)
                );
              }
            } else {
              this.$set(item, 'formulaParts', []);
            }
            this.$set(item, '_paramSelect', null);
            this.$set(item, '_opSelect', null);
            this.$set(item, '_replaceOrAppend', '');
          }
        });

        console.log('规则明细数据', data.details);

        this.addForm.ruleId = rules.id;
        this.addForm.ruleName = rules.name;
        this.addForm.detailList = data.details;
        this.addForm.recordRulesClassify = rules.classify;
        this.addForm.recordTemplateStyle = rules.recordTemplateStyle;
        this.addForm.reportWorkType = rules.reportWorkType;
      },
      // 打开选择车间弹窗
      openWorkShops(type) {
        if (type == 1) {
          this.$refs.selectWorkshopRef.open();
        } else {
          this.$refs.MaterialAddRef.open();
        }
      },
      confirmWorkshops(info) {
        console.log('info', info);
        if (this.addForm.associatedObject == 1) {
          this.addForm.workshopId = info.workshopId;
          this.addForm.workshopName = info.workshopName;
          this.addForm.workshopPlanId = info.workshopPlanId;
          this.addForm.workshopPlanName = info.workshopPlanName;
          this.addForm.address = info.extInfo.location;
          this.addForm.areaId = info.areaId;
          this.addForm.areaName = info.areaName;
          this.addForm.factoryId = info.factoryId;
          this.addForm.factoryName = info.factoryName;
        } else {
          this.addForm.deviceId = info.id;
          this.addForm.deviceCode = info.code;
          this.addForm.deviceName = info.name;
        }
      },
      // 添加
      addRow() {
        // 最大sortNum 值 +1
        let sortNum = 1;
        if (this.addForm.detailList.length > 0) {
          const maxSortNum = Math.max(
            ...this.addForm.detailList.map((i) => i.sortNum || 0)
          );
          sortNum = maxSortNum + 1;
        }

        this.addForm.detailList.push({
          id: new Date().getTime(),
          defaultValue: '',
          maxValue: null,
          minValue: null,
          paramType: null,
          paramValue: null,
          remark: '',
          symbol: null,
          tools: [],
          unitName: null,
          productName: '',
          productCode: '',
          // 1-成品统计，2-物料统计，3-工序统计"
          statisticsType:
            this.addForm.recordTemplateStyle == '4'
              ? this.statisticsType
              : null,
          // 公式
          formula: '',
          _paramSelect: null,
          _opSelect: null,
          _replaceOrAppend: '',
          formulaParts: [],
          sortNum
        });
        console.log('currentTab item', this.addForm);
      },
      // 类型变化
      paramTypeChange(row) {
        if (row.pageType != 9) {
          // 清空
          row.formulaParts = [];
          row.formula = '';
        }
      },
      // 选择物品 产品、物料等
      selectChooseModalProduct(row) {
        this.currentRow = row;
        this.$refs.toolModalTowRef.open([], '选择物品');
        alert(1);
      },
      chooseModalProduct(current) {
        this.currentRow.productName = current.name;
        this.currentRow.productCode = current.code;
        this.currentRow.unitName = current.weightUnit;
        console.log('this.currentRow', this.currentRow);
      },
      // 清空产品
      clearProduct(row) {
        row.productName = '';
        row.productCode = '';
      },
      // 基于详情返回selectOptions
      getSelectOptionsByDetails(statisticsType, item) {
        let paramTypeOptions = [];
        for (const detail of item.details.filter(
          (i) => i.statisticsType == statisticsType
        )) {
          if (detail.paramType != 9 || !detail.paramType) {
            paramTypeOptions.push({
              value: detail.paramValue,
              label: detail.paramValue
            });
          }
        }
        // 过滤空值
        paramTypeOptions = paramTypeOptions.filter((i) => i.value);
        // 追加一个 （要求生产数量）
        paramTypeOptions.push({
          value: '要求生产数量',
          label: '要求生产数量'
        });
        return paramTypeOptions;
      },
      paramSelectChange(val, row) {
        if (!val) return;
        row.formulaParts = row.formulaParts || [];
        if (row.activeIndex != undefined) {
          if (!row._replaceOrAppend || row._replaceOrAppend === 'replace') {
            row.formulaParts.splice(row.activeIndex, 1, val);
          } else if (row._replaceOrAppend === 'append') {
            row.formulaParts.splice(row.activeIndex + 1, 0, val);
            // 追加后activeIndex后移一位
            this.$set(row, 'activeIndex', row.activeIndex + 1);
          }
          // row.activeIndex = undefined;
        } else {
          row.formulaParts.push(val);
        }
        row.formula = row.formulaParts.map((p) => `[${p}]`).join('');
        row._paramSelect = null;
      },
      opSelectChange(val, row) {
        if (!val) return;
        row.formulaParts = row.formulaParts || [];
        if (row.activeIndex != undefined) {
          if (!row._replaceOrAppend || row._replaceOrAppend === 'replace') {
            row.formulaParts.splice(row.activeIndex, 1, val);
          } else if (row._replaceOrAppend === 'append') {
            row.formulaParts.splice(row.activeIndex + 1, 0, val);
            // 追加后activeIndex后移一位
            this.$set(row, 'activeIndex', row.activeIndex + 1);
          }
          // row.activeIndex = undefined;
        } else {
          row.formulaParts.push(val);
        }
        row.formula = row.formulaParts.map((p) => `[${p}]`).join('');
        row._opSelect = null;
      },
      tagItemDelete(index, row) {
        if (this.type == 'detail') return;
        row.formulaParts.splice(index, 1);
        row.formula = row.formulaParts.map((p) => `[${p}]`).join('');
      },
      formulaPartsTagClick(index, row) {
        if (this.type == 'detail') return;

        if (!row._replaceOrAppend) {
          // 默认追加
          row._replaceOrAppend = 'append';
        }

        if (row.activeIndex && row.activeIndex === index) {
          this.$set(row, 'activeIndex', undefined);
        } else {
          this.$set(row, 'activeIndex', index);
        }
      },
      handleAdd(row) {
        this.currentRow = row;
        this.$refs.toolModalRef.open(row.toolCodes);
      },
      chooseModal(data) {
        console.log('data', data);
        this.currentRow.tools = data.map((i) => {
          return {
            toolCode: i.code,
            toolName: i.name
          };
        });
      },
      // 清空工具
      clearTool(row) {
        row.tools = [];
      },
      deleteRow(time, row) {
        const index = this.addForm.detailList.findIndex(
          (item) => item.id === row.id
        );
        if (index !== -1) {
          this.addForm.detailList.splice(index, 1);
        }
      },
      // 负责人变更 同步执行人列表
      executeIdListChange() {
        this.addForm.executeUsers = this.addForm.executeIdList.map((userId) => {
          const user = this.executorList.find((u) => u.id === userId);
          return {
            userId: user.id,
            userName: user.name,
            groupId: user.groupId,
            groupName: user.groupName
          };
        });
        console.log('this.addForm.executeUsers', this.addForm.executeUsers);
      },

      async getAllTeamList() {
        const { list } = await getteampage({
          pageNum: 1,
          size: -1
        });
        console.log('teamAllList 班组', list);
        this.teamAllList = list;
      },
      teamChange(init) {
        // console.log('this.addForm.teamId', this.addForm.teamId);
        // 当前班组
        const currentTeam = this.teamAllList.find(
          (item) => item.id === this.addForm.teamId
        );
        this.addForm.teamName = currentTeam.name;
        if (!init) {
          this.addForm.productLineName = '';
          this.addForm.productLineId = '';
        }
        this.productLineList = [];
        currentTeam.factoryWorkstationVOList.forEach((item) => {
          if (
            !this.productLineList.find((p) => p.id === item.productionLineId)
          ) {
            this.productLineList.push({
              name: item.productionLineName,
              id: item.productionLineId
            });
          }
        });

        // if (currentTeam) {
        //   // 同步执行人
        //   this.addForm.executeUsers = [
        //     {
        //       teamId: currentTeam.id,
        //       teamName: currentTeam.name
        //     }
        //   ];
        // }
      }
    }
  };
</script>

<style scoped lang="scss">
  :deep(.el-form) {
    .el-form-item:last-child {
      margin-bottom: 22px !important;
    }
  }

  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
  }

  .mask-box {
    position: relative;

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

  .footer-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
  }
</style>