kd-aiot-frontend/src/views/rulesManagement/releaseRules/components/permitAdd.vue

<template>
  <ele-modal
    :title="dialogTitle"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="80%"
    :maxable="true"
    append-to-body
    destroy-on-close
  >
    <el-form
      label-width="115px"
      :model="formData"
      :rules="formRules"
      ref="formRef"
      v-loading="loading"
      :disabled="type == 'detail'"
    >
      <el-row style="margin-bottom: 15px">
        <el-col :span="8">
          <el-form-item label="记录规则类型" prop="classify" required>
            <el-select
              style="width: 100%"
              v-model="formData.classify"
              placeholder="请选择"
              :disabled="type == 'processEdit'"
            >
              <el-option
                v-for="item in recordSheet"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录规则编码" prop="code">
            <el-input
              v-model="formData.code"
              :disabled="true"
              placeholder="系统自动生成"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录规则版本">
            <el-input
              :value="versionText"
              disabled
              placeholder="系统自动生成"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 15px">
        <el-col :span="8">
          <el-form-item label="记录规则名称" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入"
              :disabled="type == 'processEdit'"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="启用日期" required prop="startDate">
            <el-date-picker
              v-model="formData.startDate"
              type="date"
              placeholder="请选择启用日期"
              style="width: 100%"
              :disabled="type == 'processEdit'"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="停用日期" required prop="stopDate">
            <el-date-picker
              v-model="formData.stopDate"
              type="date"
              placeholder="请选择停用日期"
              style="width: 100%"
              :disabled="type == 'processEdit'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.classify == 3" style="margin-bottom: 15px">
        <el-col :span="8">
          <el-form-item label="关联设备" prop="deviceName" required>
            <el-input
              v-model="formData.deviceName"
              placeholder="请选择设备"
              :readonly="true"
            >
              <template #append>
                <el-button @click="selectDeviceId">选择设备</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 15px">
        <el-col :span="8">
          <el-form-item label="模块分类" required prop="reportWorkType">
            <dict-selection
              v-model="formData.reportWorkType"
              dictName="记录规则报工类型"
              placeholder="请选择模块"
              :clearable="false"
              :isProhibit="type == 'processEdit'"
            ></dict-selection>
          </el-form-item>
        </el-col>
        <el-col v-if="formData.reportWorkType == 2" :span="8">
          <el-form-item label="关联工序">
            <el-input
              v-model="formData.produceTaskName"
              @click.native="openProduceTaskDialog"
              readonly
              placeholder="关联工序"
              clearable
              :disabled="type == 'processEdit'"
            >
              <i
                v-if="formData.produceTaskName"
                slot="suffix"
                class="el-input__icon el-icon-close"
                size="24"
                @click.stop="clearProductTask"
              ></i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="formData.reportWorkType == 2" :span="8">
          <el-form-item label="是否有执行方式" label-width="130px">
            <el-radio-group
              v-model="formData.isExecuteMethod"
              @change="executeMethodChange"
            >
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 15px">
        <el-col :span="24">
          <el-form-item label="周期" prop="frequencyValue" required>
            <rule-cycle
              ref="cycleMultipleRef"
              :formData="formData"
              :pageType="type"
              :isBindPlan="type == 'processEdit'"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <header-title title="规则明细">
        <el-button
          v-if="formData.isExecuteMethod"
          type="primary"
          @click="addExecuteMethod"
          >添加执行方式</el-button
        >
      </header-title>

      <el-tabs
        v-if="formData.isExecuteMethod"
        v-model="formData.executeMethodTitle"
        type="card"
        closable
        @tab-remove="deleteExecuteMethod"
      >
        <el-tab-pane
          :key="item"
          v-for="item in formData.executeMethodList"
          :label="item"
          :name="item"
        >
          {{ item.content }}
        </el-tab-pane>
      </el-tabs>

      <ele-pro-table
        ref="table"
        :columns="bankColumns"
        :datasource="detailsList"
        :need-page="false"
        row-key="id"
        class="table_list"
        :cache-key="cacheKeyUrl"
      >
        <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>

            <el-form-item
              v-if="formData.isExecuteMethod"
              label="编辑执行方式:"
              label-width="110px"
              style="margin-bottom: 0"
            >
              <el-input type="text" v-model="executeMethodTitleComputed" />
            </el-form-item>
          </div>
        </template>

        <template v-slot:paramType="{ row }">
          <el-select
            v-model="row.paramType"
            placeholder="请选择参数类型"
            size="mini"
          >
            <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-select>
        </template>

        <template v-slot:paramValue="{ row }">
          <!-- 根据参数类型渲染不同的输入组件 -->
          <el-link
            v-if="formData.classify == '4'"
            :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: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:executeMethodTitle="{ row }">
          <!-- <el-select v-model="row.executeMethodTitle" clearable size="mini">
            <el-option
              v-for="item in formData.executeMethodList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select> -->
          {{ row.executeMethodTitle }}
        </template>

        <template v-slot:action="{ row }">
          <el-link
            v-if="type != 'detail'"
            type="danger"
            :underline="false"
            icon="el-icon-delete"
            @click="deleteRow(row)"
          >
            删除
          </el-link>
        </template>
      </ele-pro-table>
    </el-form>
    <template v-slot:footer>
      <el-button
        v-if="type != 'detail' && type != 'processEdit'"
        :loading="btnLoading"
        type="primary"
        @click="saveAndPublish"
      >
        保存并发布
      </el-button>
      <el-button
        v-if="type != 'detail' && type != 'processEdit'"
        :loading="btnLoading"
        type="primary"
        @click="confirm"
      >
        保存
      </el-button>
      <el-button
        v-if="type == 'processEdit'"
        :loading="btnLoading"
        type="primary"
        @click="processEditSave"
      >
        保存
      </el-button>
      <el-button :loading="btnLoading" @click="handleClose">取消</el-button>
    </template>

    <toolModal ref="toolModalRef" @chooseModal="chooseModal" />

    <toolModal ref="toolModalTowRef" @chooseModal="chooseModalProduct" />

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

    <ProductModal
      ref="ProductModalRef"
      @changeProduct="changeProduct"
    ></ProductModal>

    <processModal
      ref="processModalRef"
      @chooseProcess="processChooseProcess"
    ></processModal>
  </ele-modal>
</template>

<script>
  import { getByCode } from '@/api/system/dictionary-data';
  // import RuleCycle from '../../matterRules/components/rule-cycle.vue';
  import RuleCycle from './rule-cycle.vue';
  import OperationGuideDialog from '@/views/rulesManagement/matterRules/components/operationGuideDialog.vue';
  import Details from './details.vue';
  import dictMixins from '@/mixins/dictMixins';
  import toolModal from './toolModal.vue';
  import MaterialAdd from '../../components/MaterialAdd.vue';
  import {
    recordrulesSave,
    recordrulesDetailPage,
    recordrulesUpdate,
    recordrulesPublish,
    recordrulesSaveAndPublish,
    recordrulesUpdateVersion,
    recordrulesCyclePage,
    recordrulesGetById
  } from '@/api/recordrules/index';
  import ProductModal from '@/components/selectProduct/ProductModal.vue';
  import { getTreeByPid } from '@/api/classifyManage';
  import processModal from './processModal.vue';
  import ProductModalCorrelation from './ProductModal.vue';
  import productionAPI from '@/api/technology/production/index.js';

  export default {
    components: {
      OperationGuideDialog,
      RuleCycle,
      Details,
      ProductModal,
      MaterialAdd,
      toolModal,
      processModal,
      ProductModalCorrelation
    },
    mixins: [dictMixins],
    computed: {
      bankColumns() {
        return [
          {
            width: 110,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            prop: 'paramType',
            label: '参数类型',
            align: 'center',
            slot: 'paramType',
            minWidth: 110
          },
          {
            prop: 'paramValue',
            label: '参数内容',
            align: 'center',
            slot: 'paramValue',
            minWidth: 261
          },
          {
            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
          },
          {
            prop: 'executeMethodTitle',
            label: '执行方式',
            align: 'center',
            slot: 'executeMethodTitle',
            minWidth: 110
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 110,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ];
      },
      versionText() {
        if (this.type == 'change') {
          return '系统自动生成';
        }
        return (
          this.formData.bigVersion +
          this.formData.versionMark +
          this.formData.smallVersion
        );
      },
      productColumns() {
        return [
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center',
            reserveSelection: true
          },
          {
            prop: 'code',
            label: '产品编码'
          },
          {
            prop: 'name',
            label: '产品名称',
            showOverflowTooltip: true
          },
          {
            prop: 'brandNum',
            label: '牌号'
          },
          {
            prop: 'modelType',
            label: '型号'
          },
          {
            prop: 'specification',
            label: '规格'
          },
          {
            prop: 'measuringUnit',
            label: '计量单位'
          },
          {
            prop: 'packingUnit',
            label: '包装单位'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 110,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ];
      },
      cacheKeyUrl() {
        return `main-permit-add-2510181429-reportWorkType`;
      },
      detailsList() {
        if (this.formData.isExecuteMethod) {
          return this.formData.details.filter(
            (i) => i.executeMethodTitle == this.formData.executeMethodTitle
          );
        } else {
          return this.formData.details;
        }
      },
      executeMethodTitleComputed: {
        get() {
          return this.formData.executeMethodTitle;
        },
        set(value) {
          // 更改 明细表的 executeMethodTitle
          this.formData.details = this.formData.details.map((i) => {
            if (i.executeMethodTitle == this.formData.executeMethodTitle) {
              return {
                ...i,
                executeMethodTitle: value
              };
            }
            return i;
          });

          this.formData.executeMethodList = this.formData.executeMethodList.map(
            (i) => {
              if (i == this.formData.executeMethodTitle) {
                return value;
              }
              return i;
            }
          );

          this.formData.executeMethodTitle = value;

          if (!value) {
            this.$message.warning('执行方式不能为空！');
          }
        }
      }
    },
    data() {
      const formDateBase = {
        id: null,
        classify: null,
        deviceId: null,
        deviceName: '',
        frequencyUnit: 2,
        frequencyValue: null,
        name: '',
        details: [],
        recordRulesCycleList: [],
        startDate: null,
        stopDate: null,
        version: 1,
        code: '',
        fromId: null,
        // 模块分类 参考字典项：record_rules_report_work_type
        reportWorkType: '1',
        // 执行方式
        isExecuteMethod: 0,
        produceTaskConfigs: [],
        // 执行方式列表
        executeMethodList: [],
        // 执行方式 活跃项
        executeMethodTitle: '',
        bigVersion: '',
        versionMark: '',
        smallVersion: '',
        produceTaskId: '',
        produceTaskName: ''
      };

      return {
        dialogTitle: '',
        visible: false,
        formDateBase,
        formData: JSON.parse(JSON.stringify(formDateBase)),
        formRules: {
          name: [
            { required: true, message: '请输入规则名称', trigger: 'blur' }
          ],
          frequencyValue: [
            { required: true, message: '请选择周期', trigger: 'blur' },
            { required: true, message: '请选择周期', trigger: 'change' }
          ],
          frequencyUnit: [
            { required: true, message: '请选择频率单位', trigger: 'change' }
          ],
          classify: [
            { required: true, message: '请选择规则类型', trigger: 'change' }
          ],
          // startDate 启用日期要大于当前时间
          // stopDate 停用时间要大于当前时间并且大于启用日期
          startDate: [
            { required: true, message: '请选择启用日期', trigger: 'blur' },
            { required: true, message: '请选择启用日期', trigger: 'change' },
            { validator: this.validateStartDate, trigger: 'change' }
          ],
          stopDate: [
            { required: true, message: '请选择停用时间', trigger: 'change' },
            { validator: this.validateStopDate, trigger: 'change' }
          ],
          deviceName: [
            { required: true, message: '请输入选择设备', trigger: 'blur' }
          ],
          reportWorkType: [
            { required: true, message: '请选择模块分类', trigger: 'change' },
            { required: true, message: '请选择模块分类', trigger: 'blur' }
          ]
        },
        recordSheet: [], // 记录表
        current: {},
        dataIndex: null,
        showEdit: false,
        btnLoading: false,
        currentRow: null,
        type: '',
        // 产品分类
        productCategory: [],
        loading: false,
        produceTaskCode: ''
      };
    },
    mounted() {
      this.getByCodeData();
      this.getProductCategory();
      console.log('this.formData 2233', this.formData);
    },
    methods: {
      open(row, type, title) {
        this.dialogTitle = title;
        this.type = type;
        console.log('type', type, row);

        if (
          type == 'edit' ||
          type == 'detail' ||
          type == 'change' ||
          type == 'clone'
        ) {
          this.getDetils(row.id);
        }

        // 过程监测临时修改
        if (type == 'processEdit') {
          this.processEditSetValue(row);
        }

        if (type == 'add') {
          this.formData.version = 1;

          // 启用日期 默认为 今天
          this.formData.startDate = new Date();
          // 停用日期 默认为 2099-12-31
          this.formData.stopDate = new Date('2099-12-31 00:00:00');
        }

        this.visible = true;

        console.log('this.formData', this.formData);
      },
      // 过程监测 修改规则详情
      async processEditSetValue(row) {
        const data = await recordrulesGetById(row.rulesId);

        const info = JSON.parse(JSON.stringify(row));
        data.executeMethodList = info.produceTaskConfigRuleDetails.map((i) => {
          return i.executeMethodTitle;
        });
        // 去重
        data.executeMethodList = [...new Set(data.executeMethodList)].filter(
          (i) => i
        );

        data.details = info.produceTaskConfigRuleDetails;
        if (data.executeMethodList.length) {
          data.executeMethodTitle = data.executeMethodList[0] || '';
        } else {
          data.executeMethodTitle = '';
        }

        this.$util.assignObject(this.formData, data);
        if (data.executeMethodList.length) {
          this.formData.isExecuteMethod = 1;
        }

        this.$nextTick(() => {
          this.$refs.cycleMultipleRef?.setRecordRulesCycleList(
            this.formData.recordRulesCycleList
          );
        });

        this.formData.startDate = new Date(info.startDate);
        this.formData.stopDate = new Date(info.stopDate);
        this.formData.classify = this.formData.classify + '';
        this.formData.reportWorkType = this.formData.reportWorkType + '';

        this.loading = false;
      },
      async getDetils(id) {
        this.loading = true;
        try {
          const data = await recordrulesGetById(id);

          if (data.isExecuteMethod) {
            data.executeMethodList = Object.keys(data.detailMap).map((i) => {
              return i;
            });

            data.details = Object.values(data.detailMap).flat();
            data.executeMethodTitle = data.executeMethodList[0] || '';
          } else {
            data.executeMethodList = [];
            data.details = data.details || [];
            data.executeMethodTitle = '';
          }

          this.$util.assignObject(this.formData, data);

          this.$nextTick(() => {
            this.$refs.cycleMultipleRef?.setRecordRulesCycleList(
              this.formData.recordRulesCycleList
            );
          });

          this.formData.startDate = new Date(data.startDate);
          this.formData.stopDate = new Date(data.stopDate);
          this.formData.classify = this.formData.classify + '';
          this.formData.reportWorkType = this.formData.reportWorkType + '';

          if (this.type == 'change') {
            this.formData.fromId = id;
            this.formData.id = null;
          }

          if (this.type == 'clone') {
            this.formData.fromId = null;
            this.formData.id = null;
            this.formData.produceTaskId = null;
            this.formData.produceTaskName = null;
          }

          this.loading = false;
        } catch (error) {
          this.loading = false;
        }
      },
      async getByCodeData() {
        let res = await getByCode('record_sheet');
        let list = res.data.map((item) => {
          let values = Object.keys(item);
          return {
            value: values[0],
            label: item[values[0]]
          };
        });
        this.recordSheet = list;
      },
      itemDel(index) {
        this.formData.details.splice(index, 1);
      },
      /* 打开操作手册编辑款 */
      openOperationGuideDialogDialog(row, index) {
        this.$refs.operationGuideDialog.open(row, index);
      },
      handleClose() {
        // 清空表单数据
        this.formData = JSON.parse(JSON.stringify(this.formDateBase));
        this.$refs['formRef'].resetFields();
        this.visible = false;
      },
      // 保存
      confirm() {
        console.log('this.formData', this.formData);

        // 验证表单规则
        this.$refs.formRef.validate(async (valid) => {
          if (!valid) {
            return false;
          }
          if (this.formData.details.length == 0) {
            return this.$message.warning('至少条件一条规则项');
          }

          if (this.formData.isExecuteMethod) {
            // 判断 formData.executeMethodList中的item 是否在details中有一条executeMethodTitle的数据

            if (this.formData.executeMethodList.length == 0) {
              return this.$message.warning(`请添加执行方式`);
            }

            for (const item of this.formData.executeMethodList) {
              if (!item) {
                return this.$message.warning(`执行方式不能为空！`);
              }

              const exists = this.formData.details.some(
                (detail) => detail.executeMethodTitle === item
              );
              if (!exists) {
                this.$message.warning(
                  `请为执行方式 "${item}" 添加至少一条规则项`
                );
                return false;
              }
            }
          }

          try {
            this.btnLoading = true;

            const body = this.formatBody();

            if (this.type == 'add' || this.type == 'clone') {
              await recordrulesSave(body);
            } else if (this.type == 'change') {
              await recordrulesUpdateVersion(body);
            } else {
              // 编辑
              body.fromId = null;
              await recordrulesUpdate(body);
            }

            this.btnLoading = false;
            this.$message.success('操作成功');

            this.handleClose();
            this.$emit('reload');
          } catch (error) {
            this.btnLoading = false;
          }
        });
      },
      // 保存并发布
      saveAndPublish() {
        // 验证表单规则
        this.$refs.formRef.validate(async (valid) => {
          if (!valid) {
            return false;
          }
          if (this.formData.details.length == 0) {
            return this.$message.warning('至少条件一条规则项');
          }

          if (this.formData.isExecuteMethod) {
            // 判断 formData.executeMethodList中的item 是否在details中有一条executeMethodTitle的数据

            if (this.formData.executeMethodList.length == 0) {
              return this.$message.warning(`请添加执行方式`);
            }

            for (const item of this.formData.executeMethodList) {
              if (!item) {
                return this.$message.warning(`执行方式不能为空！`);
              }

              const exists = this.formData.details.some(
                (detail) => detail.executeMethodTitle === item
              );
              if (!exists) {
                this.$message.warning(
                  `请为执行方式 "${item}" 添加至少一条规则项`
                );
                return false;
              }
            }
          }

          // 判断参数类型是否选择
          for (const detail of this.formData.details) {
            if (!detail.paramType) {
              return this.$message.warning('请选择规则明细中的参数类型！');
            }
          }

          try {
            this.btnLoading = true;

            const body = this.formatBody();

            if (this.type != 'saveAndPublish') {
              await recordrulesSaveAndPublish(body);
            } else {
              this.$emit('processSave', body);
            }

            this.btnLoading = false;
            this.$message.success('操作成功');

            this.handleClose();
            this.$emit('reload');
          } catch (error) {
            this.btnLoading = false;
          }
        });
      },
      // 数据格式化
      formatBody() {
        this.formData.recordRulesCycleList =
          this.$refs.cycleMultipleRef.recordRulesCycleList
            .map((i) => {
              // 根据月日时分排序计算权重排序
              let sortNum = 0;
              if (i.month) {
                sortNum += i.month * 60 * 24 * 30;
              }
              if (i.day) {
                sortNum += i.day * 60 * 24;
              }
              if (i.hour) {
                sortNum += i.hour * 60;
              }

              if (i.minute) {
                sortNum += i.minute * 1;
              }

              return { ...i, sortNum };
            })
            .sort((a, b) => a.sortNum - b.sortNum)
            .map((i, index) => {
              return { ...i, sortNum: index + 1 };
            });

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

        body.startDate = this.$util.toDateString(
          body.startDate,
          'yyyy-MM-dd HH:mm:ss'
        );

        body.stopDate = this.$util.toDateString(
          body.stopDate,
          'yyyy-MM-dd HH:mm:ss'
        );

        return body;
      },
      // startDate 启用日期要大于当前时间
      validateStartDate(rule, value, callback) {
        const startDate = this.formData.startDate;
        if (!startDate) {
          return callback(new Error('启用日期不能为空'));
        }

        // 启用日期大于等于今天
        // const today = new Date();
        // today.setHours(0, 0, 0, 0); // 设置为当天的开始时间
        // if (new Date(startDate) < today) {
        //   return callback(new Error('启用日期必须大于等于当前日期'));
        // }

        callback();
      },
      // stopDate 停用时间要大于当前时间并且大于启用日期
      validateStopDate(rule, value, callback) {
        const startDate = this.formData.startDate;
        const stopDate = this.formData.stopDate;
        if (
          stopDate &&
          startDate &&
          new Date(stopDate) <= new Date(startDate)
        ) {
          return callback(new Error('停用时间必须大于启用日期'));
        }

        callback();
      },
      // 去选择设备
      selectDeviceId() {
        this.$refs.deviceSelectDialog.open([]);
      },
      // 选择设备回调
      chooseEquipment(data, index, categoryId) {
        console.log('data', data, index, categoryId);
        this.formData.deviceId = data[0]?.id || null;
        this.formData.deviceName = data[0]?.name || '';
      },
      // 添加
      addRow() {
        this.formData.details.push({
          id: new Date().getTime(),
          defaultValue: '',
          maxValue: null,
          minValue: null,
          paramType: null,
          paramValue: null,
          remark: '',
          symbol: null,
          tools: [],
          unitName: null,
          productName: '',
          productCode: '',
          executeMethodTitle: this.formData.executeMethodTitle
        });
        console.log('this.formData.details', this.formData.details);
      },
      deleteRow(row) {
        const index = this.formData.details.indexOf(row);
        if (index !== -1) {
          this.formData.details.splice(index, 1);
        }
      },
      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
            // rulesDetailId: this.currentRow.id,
            // rulesId: this.formData.id
          };
        });
      },
      // 规则明细表
      async recordrulesDetailPage(row) {
        const { list } = await recordrulesDetailPage({
          // deptId: row.deptId,
          pageNum: 1,
          rulesId: row.id,
          size: 9999
        });
        console.log('list 数据', list);
        this.formData.details = list;
      },
      // 清空工具
      clearTool(row) {
        row.tools = [];
      },
      // 查询 recordrulesCyclePage
      async recordrulesCyclePage(row) {
        const { list } = await recordrulesCyclePage({
          pageNum: 1,
          size: 9999,
          recordRulesId: row.id,
          orderBy: 'descending'
        });
        console.log('list 周期数据', list);
        this.formData.recordRulesCycleList = list;
        this.$nextTick(() => {
          this.$refs.cycleMultipleRef.setRecordRulesCycleList(list);
        });
      },
      // 去选择产品
      selectProduct(row) {
        this.currentRow = row;
        this.$refs.ProductModalRef.open();
      },
      // 选择产品
      changeProduct(current) {
        console.log('current', current);
        this.currentRow.productName = current.name;
        this.currentRow.productCode = current.code;
      },
      // 选择物品 产品、物料等
      selectChooseModalProduct(row) {
        this.currentRow = row;
        this.$refs.toolModalTowRef.open([], '选择物品');
      },
      chooseModalProduct(current) {
        console.log('current', current);
        this.currentRow.productName = current[0].name;
        this.currentRow.productCode = current[0].code;
        console.log('this.currentRow', this.currentRow);
      },
      // 清空产品
      clearProduct(row) {
        row.productName = '';
        row.productCode = '';
      },
      // 获取产品分类
      async getProductCategory() {
        let { data } = await getTreeByPid(9);
        console.log('产品分类', data);
        this.productCategory = data;
      },
      // 选择工序
      openProduceTaskDialog() {
        this.$refs.processModalRef.open();
      },
      // 工序
      processChooseProcess(process) {
        console.log('选择的工序', process);
        this.formData.produceTaskId = process.id;
        this.formData.produceTaskName = process.name;
      },
      // 添加执行方式
      addExecuteMethod() {
        this.$prompt('', '请输入执行方式', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator(value) {
            if (!value) {
              return '执行方式不能为空！';
            }
            return true;
          }
        })
          .then(({ value }) => {
            console.log('value', value);
            if (!value) {
              return this.$message.warning('执行方式不能为空！');
            }

            if (this.formData.executeMethodList.includes(value)) {
              return this.$message.warning('执行方式已存在！');
            }
            this.formData.executeMethodList.push(value);

            if (this.formData.executeMethodList.length == 1) {
              // 默认高亮
              this.formData.executeMethodTitle = value;
            }
          })
          .catch((err) => {
            console.log('取消输入执行方式', err);
          });
      },
      // 删除执行方式
      deleteExecuteMethod(item) {
        // 如果this.formData.details总包含item 则不能删除
        const exists = this.formData.details.some(
          (detail) => detail.executeMethodTitle === item
        );
        if (exists) {
          return this.$message.warning(
            `执行方式 "${item}" 已被规则项使用，不能删除`
          );
        }
        this.formData.executeMethodList =
          this.formData.executeMethodList.filter((i) => i != item);
      },
      // 是否有执行方式改变
      executeMethodChange() {
        if (!this.formData.isExecuteMethod) {
          this.formData.details = this.formData.details.map((i) => {
            return {
              ...i,
              executeMethodTitle: ''
            };
          });
          this.formData.executeMethodList = [];
        } else {
          if (this.formData.executeMethodList.length == 0) {
            // 添加一个默认执行方式
            this.formData.executeMethodList.push('无执行方式');

            this.formData.details = this.formData.details.map((i) => {
              return {
                ...i,
                executeMethodTitle: '无执行方式'
              };
            });

            this.formData.executeMethodTitle = '无执行方式';
          }
        }
      },
      clearProductTask() {
        this.formData.produceTaskId = '';
        this.formData.produceTaskName = '';
      },
      // 过程监测修改 保存
      processEditSave() {
        // 只验证详情内容
        if (this.formData.details.length == 0) {
          return this.$message.warning('至少条件一条规则项');
        }

        if (this.formData.isExecuteMethod) {
          // 判断 formData.executeMethodList中的item 是否在details中有一条executeMethodTitle的数据

          if (this.formData.executeMethodList.length == 0) {
            return this.$message.warning(`请添加执行方式`);
          }

          for (const item of this.formData.executeMethodList) {
            if (!item) {
              return this.$message.warning(`执行方式不能为空！`);
            }

            const exists = this.formData.details.some(
              (detail) => detail.executeMethodTitle === item
            );
            if (!exists) {
              this.$message.warning(
                `请为执行方式 "${item}" 添加至少一条规则项`
              );
              return false;
            }
          }
        }

        // 判断参数类型是否选择
        for (const detail of this.formData.details) {
          if (!detail.paramType) {
            return this.$message.warning('请选择规则明细中的参数类型！');
          }
        }

        this.$emit('processSave', this.formatBody());
        this.handleClose();
      }
    }
  };
</script>

<style scoped lang="scss">
  .operationGuide_box {
    width: 100%;
    height: 48px;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    padding: 5px 10px;

    .left_content {
      width: 50%;
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid #c0c4cc;
      border-radius: 10px;
      margin-right: 10px;
      overflow-y: auto;
    }
    .right_content {
      flex: 1;
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid #c0c4cc;
      border-radius: 10px;
      overflow-y: auto;
    }
  }

  ::v--deep .table_list {
    .el-form-item {
      .el-form-item__content {
        margin-left: 0;
      }
    }
  }
</style>