kd-aiot-frontend/src/views/rulesManagement/recordPlan/components/programRulesDialog.vue

<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @close="handleClose"
    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="请输入"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="记录计划分类" prop="planType">
            <el-select
              v-model="addForm.planType"
              size="small"
              style="width: 100%"
            >
              <el-option :value="1" label="车间检查记录"></el-option>
              <el-option :value="2" label="生产记录"></el-option>
              <el-option :value="3" label="注汽检查记录"></el-option>
              <el-option :value="4" label="固废记录"></el-option>
              <el-option :value="5" label="蒸汽质量检查记录"></el-option>
            </el-select>
          </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%"
            >
              <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"
              >
                <template #suffix>分钟</template>
              </el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" prop="autoOrder">
            <el-select
              v-model="addForm.type"
              size="small"
              @change="typeChange"
              style="width: 100%"
            >
              <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="addForm.autoOrder && 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="addForm.autoOrder && 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="addForm.autoOrder && addForm.type == 0">
          <el-form-item label="负责人" prop="executeIdList">
            <el-select
              v-model="addForm.executeIdList"
              size="small"
              style="width: 100%"
              multiple
              filterable
              @change="executeIdListChange"
            >
              <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"
            >
            </DictSelection>
          </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">
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="addForm.status"
              active-text="开"
              inactive-text="关"
              :active-value="1"
              :inactive-value="0"
            />
          </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"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-button
        type="primary"
        size="small"
        style="margin-bottom: 10px"
        @click="handleAddTab"
        >添加规则</el-button
      >
      <el-tabs
        v-model="tabsValue"
        type="card"
        :closable="type != 'detail'"
        @tab-click="handleTab"
        @tab-remove="removeTab"
      >
        <el-tab-pane
          v-for="item in addForm.children"
          :key="item.ruleId"
          :label="item.ruleName"
          :name="item.ruleId"
        >
          <header-title
            title="车间区域"
            style="margin-top: 20px"
            v-if="addForm.associatedObject == 1"
          >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="openWorkShops(1)"
              >新增</el-button
            >
          </header-title>

          <ele-pro-table
            ref="table"
            v-if="addForm.associatedObject == 1"
            :columns="workshopsColumns"
            :datasource="item.workshops"
            :need-page="false"
          >
            <template v-slot:action="{ row }">
              <el-link
                v-if="type != 'detail'"
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="item.workshops.splice(item.workshops.indexOf(row), 1)"
              >
                删除
              </el-link>
            </template>
          </ele-pro-table>
          <header-title
            title="设备"
            style="margin-top: 20px"
            v-if="addForm.associatedObject == 2"
          >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="openWorkShops(2)"
              >新增</el-button
            >
          </header-title>

          <ele-pro-table
            ref="table"
            v-if="addForm.associatedObject == 2"
            :columns="equipmentColumns"
            :datasource="item.deviceInfo"
            :need-page="false"
          >
            <template v-slot:action="{ row }">
              <el-link
                v-if="type != 'detail'"
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="
                  item.deviceInfo.splice(item.deviceInfo.indexOf(row), 1)
                "
              >
                删除
              </el-link>
            </template>
          </ele-pro-table>
          <header-title title="规则明细" style="margin-top: 20px">
          </header-title>

          <el-tabs
            v-if="item.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(item)"
            :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(item)"
                >
                  新建
                </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="item.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-tab-pane>
      </el-tabs>
    </el-form>

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

    <selectReleaseRules
      ref="selectReleaseRulesRef"
      @chooseRules="chooseRules"
      :businessType="1"
    ></selectReleaseRules>

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

    <toolModal
      ref="toolModalTowRef"
      @chooseModal="chooseModalProduct"
      :multiple="false"
    />

    <toolModal ref="toolModalRef" @chooseModal="chooseModal" />
    <!-- 新增设备 -->
    <MaterialAdd ref="productRefs" @chooseEquipment="chooseEquipment">
    </MaterialAdd>
  </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/ruleManagement/matter';
  import selectReleaseRules from '@/components/selectReleaseRules/select-release-rules.vue';
  import selectWorkshop from '@/components/selectWorkshop/selectWorkshop.vue';
  import {
    recordrulesGetById,
    recordrulesPlanConfigGetById,
    recordrulesPlanConfigSaveOrUpdate
  } from '@/api/recordrules/index';
  import toolModal from '@/views/rulesManagement/releaseRules/components/toolModal.vue';
  import MaterialAdd from '@/views/rulesManagement/components/MaterialAdd.vue';
  import { getteampage } from '@/api/workforceManagement/team';
  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: {
      deptSelect,
      selectReleaseRules,
      selectWorkshop,
      toolModal,
      MaterialAdd
    },
    data() {
      const formBaseData = {
        approvalUserId: null,
        approvalUserName: '',
        autoOrder: 1,
        code: '',
        configType: 1,
        createUserName: '',
        duration: null,
        associatedObject: 1,
        planType: 1,
        executeUsers: [
          // {
          //   groupId: 0,
          //   groupName: '',
          //   teamId: 0,
          //   teamName: '',
          //   userId: 0,
          //   userName: ''
          // }
        ],
        executeIdList: [],
        children: [],
        details: [],
        id: null,
        name: '',
        nextExecuteTime: '',
        remark: '',
        ruleId: null,
        ruleName: '',
        status: 1,
        type: 0,
        updateUserName: '',
        urgent: '1',
        groupId: '', // 部门id
        teamId: '', // 班组id
        lastExecuteTime: ''
      };

      return {
        visible: false,
        title: '新增记录计划配置',
        formBaseData,
        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' }
          ],
          categoryLevelId: [
            { 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' }
          ]
        },
        executorList: [],
        uerList: [],
        tabsValue: '',
        // 执行方式列表
        executeMethodList: [],
        // 1-成品统计，2-物料统计，3-工序统计"
        statisticsType: '1',
        statisticsTypeList: [
          { label: '成品统计', value: '1' },
          { label: '物料统计', value: '2' },
          { label: '工序统计', value: '3' }
        ],
        opSelectOptions: ['+', '-', '*', '/', '%', '(', ')'],
        butLoading: false,
        teamAllList: [],
        loading: false,
        type: 'add' // 弹窗类型 add-新增 edit-编辑 detail-查看
      };
    },
    computed: {
      // 当前用户信息
      loginUser() {
        return this.$store.state.user?.info;
      },
      equipmentColumns() {
        return [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            prop: 'name',
            label: '设备名称'
          },
          {
            label: '设备编号',
            prop: 'codeNumber'
          },
          {
            label: '固资编码',
            prop: 'fixCode'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 110,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ];
      },
      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'
          }
        ];
        const current = this.addForm.children.find(
          (item) => item.ruleId === this.tabsValue
        );
        if (current && current.recordTemplateStyle != '4') {
          // 过滤掉 计算公式 列
          return list.filter((i) => i.prop != 'formula');
        }
        return list;
      }
    },
    created() {
      // 获取审核人列表、巡点检人员
      this.getUserList();
      // 获取所有班组
      this.getAllTeamList();
    },
    methods: {
      // 外部调用，打开弹窗
      open(type, data) {
        console.log('type data', type, data);
        this.type = type;

        if (type == 'add') {
          this.title = '新增记录计划配置';
          this.getOrderCode();
        } else if (type == 'edit') {
          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 recordrulesPlanConfigGetById(id);
        console.log('记录计划配置详情', data);
        this.$util.assignObject(this.addForm, data);
        this.addForm.urgent = this.addForm.urgent + '';
        // 处理回显数据
        if (this.addForm.type === 0) {
          // 个人
          this.addForm.executeIdList = this.addForm.executeUsers.map(
            (item) => item.userId
          );

          let groupIds = this.addForm.executeUsers
            .map((i) => i.groupId)
            .filter((i) => i);
          groupIds = Array.from(new Set(groupIds));

          if (groupIds.includes('1')) {
            // 包含全部部门，置空
            this.addForm.groupId = '1';
          } else {
            this.addForm.groupId = this.addForm.executeUsers[0]?.groupId || '1';
          }

          groupIds.map((item) => {
            this.searchDeptNodeClick(item);
          });
        } else {
          // 班组
          this.addForm.teamId = this.addForm.executeUsers[0]?.teamId || '';
        }
        this.tabsValue = this.addForm.children[0]?.ruleId || '';

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

        body.ruleName = body.children.map((item) => item.ruleName).join(',');

        body.children.forEach((rule) => {
          // 父级字段赋值
          rule.approvalUserId = body.approvalUserId;
          rule.approvalUserName = body.approvalUserName;
          rule.autoOrder = body.autoOrder;
          rule.code = body.code;
          rule.configType = body.configType;
          rule.createUserName = body.createUserName;
          rule.duration = body.duration;
          rule.executeUsers = body.executeUsers;
          rule.name = body.name;
          rule.nextExecuteTime = body.nextExecuteTime;
          rule.remark = body.remark;
          rule.status = body.status;
          rule.type = body.type;
          rule.updateUserName = body.updateUserName;
          rule.urgent = body.urgent;
          rule.lastExecuteTime = body.lastExecuteTime;
        });

        return body;
      },
      // 提交
      submit() {
        console.log('this.addForm', this.addForm);
        this.$refs.formRef.validate(async (valid) => {
          if (valid) {
            // 判断 children
            if (this.addForm.children.length == 0) {
              this.$message.warning('请至少添加一个记录规则');
              return;
            }

            // 判断 每个规则的车间区域
            for (const rule of this.addForm.children) {
              if (
                rule.workshops.length == 0 &&
                this.addForm.associatedObject == '1'
              ) {
                this.$message.warning(
                  `规则【${rule.ruleName}】请至少添加一个车间区域`
                );
                return;
              }
              if (
                rule.deviceInfo.length == 0 &&
                this.addForm.associatedObject == '2'
              ) {
                this.$message.warning(
                  `规则【${rule.ruleName}】请至少添加一个设备`
                );
                return;
              }
            }

            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();

              console.log('body', body);

              await recordrulesPlanConfigSaveOrUpdate(body);
              this.butLoading = false;

              this.$message.success('保存成功');
              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.executeIdList = [];
      },
      //选择部门(搜索)
      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_config_code');
        this.addForm.code = data;
      },
      handleTab(e) {
        this.ruleIndex = e.index;
      },
      removeTab(targetName) {
        this.$confirm('是否删除当前记录规则?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // 删除tab
            this.addForm.children = this.addForm.children.filter(
              (item) => item.ruleId !== targetName
            );
          })
          .catch(() => {});
      },
      // 选择记录规则
      handleAddTab() {
        // 添加tab
        this.$refs.selectReleaseRulesRef.open(
          '',
          '',
          this.addForm.children.map((i) => i.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.children.push({
          ruleId: rules.id,
          ruleName: rules.name,
          details: data.details,
          children: [],
          workshops: [],
          deviceInfo: [],
          classify: rules.classify,
          recordTemplateStyle: rules.recordTemplateStyle,
          reportWorkType: rules.reportWorkType
        });

        if (this.addForm.children.length === 1) {
          this.tabsValue = this.addForm.children[0].ruleId;
        }
      },
      // 打开选择车间弹窗
      openWorkShops(type) {
        if (type == 1) {
          this.$refs.selectWorkshopRef.open();
        } else {
          this.$refs.productRefs.open([]);
        }
      },
      chooseEquipment(data) {
        const currentTab = this.addForm.children.find(
          (item) => item.ruleId === this.tabsValue
        );
        if (currentTab) {
          currentTab.deviceInfo = [...currentTab.deviceInfo, ...data];
        }
      },
      confirmWorkshops(list) {
        console.log('list', list);
        // 给当前tab添加车间数据
        const currentTab = this.addForm.children.find(
          (item) => item.ruleId === this.tabsValue
        );
        if (currentTab) {
          currentTab.workshops = [
            ...currentTab.workshops,
            ...list.map((i) => {
              return {
                workshopId: i.id,
                workshopCode: i.code,
                workshopName: i.name,
                address: i.extInfo.location,
                areaId: i.areaId,
                areaName: i.areaName,
                factoryId: i.factoryId,
                factoryName: i.factoryName,
                remark: i.remark,
                workshopPlanId: i.workshopPlanId,
                workshopPlanName: i.workshopPlanName,
                createUserName: this.loginUser?.name || ''
              };
            })
          ];

          console.log('currentTab', currentTab);
        }
      },
      // 添加
      addRow(item) {
        // 最大sortNum 值 +1
        let sortNum = 1;
        if (item.details.length > 0) {
          const maxSortNum = Math.max(
            ...item.details.map((i) => i.sortNum || 0)
          );
          sortNum = maxSortNum + 1;
        }

        item.details.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:
            item.recordTemplateStyle == '4' ? this.statisticsType : null,
          // 公式
          formula: '',
          _paramSelect: null,
          _opSelect: null,
          _replaceOrAppend: '',
          formulaParts: [],
          sortNum
        });
        console.log('currentTab item', item);
      },
      // 类型变化
      paramTypeChange(row) {
        if (row.pageType != 9) {
          // 清空
          row.formulaParts = [];
          row.formula = '';
        }
      },
      // 选择物品 产品、物料等
      selectChooseModalProduct(row) {
        this.currentRow = row;
        this.$refs.toolModalTowRef.open([], '选择物品');
      },
      chooseModalProduct(current) {
        console.log('current', 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 = time.details.findIndex((item) => item.id === row.id);
        if (index !== -1) {
          time.details.splice(index, 1);
        }
      },
      // 过滤明细数据源
      detialsDatasource(item) {
        // 如果是模板样式4，过滤统计类型
        if (item.recordTemplateStyle == '4') {
          return item.details.filter(
            (i) => i.statisticsType == this.statisticsType
          );
        }
        return item.details;
      },
      // 负责人变更 同步执行人列表
      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() {
        console.log('this.addForm.teamId', this.addForm.teamId);
        // 当前班组
        const currentTeam = this.teamAllList.find(
          (item) => item.id === this.addForm.teamId
        );
        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;
  }
</style>