kd-aiot-frontend-eam/src/views/maintenance/components/programRulesDialog.vue

<template>
  <ele-modal
    width="80%"
    :visible="visible"
    v-if="visible"
    :append-to-body="true"
    custom-class="ele-dialog-form"
    :title="dialogTitle"
    @update:visible="updateVisible"
  >
    <header-title title="基本信息"></header-title>
    <el-form
      ref="addFormRef"
      :model="addForm"
      :rules="addFormRules"
      label-width="120px"
    >
      <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
              :disabled="dialogTitle === '派单'"
              v-model="addForm.name"
              size="small"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="自动派单" prop="autoOrder">
            <el-select
              :disabled="dialogTitle === '派单'"
              v-model="addForm.autoOrder"
              size="small"
              style="width: 100%"
              @change="autoOrderChange"
            >
              <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"
                :disabled="dialogTitle === '派单'"
                v-model="addForm.duration"
                size="small"
                placeholder="请输入"
                @input="formDataDurationTime"
              >
                <template #suffix>分钟</template>
              </el-input>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="addForm.autoOrder">
          <el-form-item label="部门" prop="groupId">
            <deptSelect
              v-model="addForm.groupId"
              @changeGroup="searchDeptNodeClick"
              :disabled="isBindPlan"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="addForm.autoOrder">
          <el-form-item label="负责人" prop="executeId">
            <el-select
              v-model="addForm.executeId"
              size="small"
              style="width: 100%"
              :disabled="isBindPlan"
              multiple
              filterable
            >
              <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
              :disabled="dialogTitle === '派单'"
              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="dialogTitle === '派单'"
            >
            </DictSelection>
          </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"
              :disabled="dialogTitle === '派单'"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-button
        v-if="dialogTitle.includes('新增')"
        type="primary"
        size="small"
        style="margin-bottom: 10px"
        @click="handleAddTab"
        >添加规则</el-button
      >

      <el-tabs
        v-model="tabsValue"
        type="card"
        :closable="dialogTitle !== '派单'"
        @tab-click="handleTab"
        @tab-remove="removeTab"
      >
        <el-tab-pane
          v-for="(item, ruleIdListIndex) in ruleIdList"
          :key="item.ruleId"
          :label="item.name"
          :name="item.ruleId"
        >
          <div class="el-tab_box">
            <div class="equipmentList_box">
              <header-title title="设备列表">
                <div v-if="dialogTitle !== '派单'">
                  <el-button
                    size="small"
                    icon="el-icon-plus"
                    class="ele-btn-icon"
                    type="primary"
                    @click="handleAdd(ruleIdList, ruleIdListIndex)"
                    >新增</el-button
                  >
                </div>
              </header-title>
              <el-table :data="item.equipmentList" border>
                <el-table-column label="序号" type="index" width="50">
                </el-table-column>
                <el-table-column label="设备名称" align="center" prop="name">
                  <template slot-scope="{ row, $index }">
                    <template>
                      {{ row.name }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="编号" align="center" prop="codeNumber">
                  <template slot-scope="{ row, $index }">
                    <template>
                      {{ row.codeNumber }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="固资编码" align="center" prop="fixCode">
                  <template slot-scope="{ row, $index }">
                    <template>
                      {{ row.fixCode }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="dialogTitle !== '派单'"
                  label="操作"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="deleteEquipment(scope.$index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="ruleMatters_box">
              <header-title title="规则事项">
                <div v-if="dialogTitle !== '派单'">
                  <el-button
                    size="small"
                    icon="el-icon-plus"
                    class="ele-btn-icon"
                    type="primary"
                    @click="addPostscript"
                    >新增</el-button
                  >
                </div>
              </header-title>
              <el-table :data="item.ruleItems" border>
                <el-table-column label="序号" width="50">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="事项" prop="name" width="100">
                  <template slot-scope="scope">
                    <div v-if="scope.row.isNew">
                      <el-input
                        v-model="scope.row.name"
                        placeholder="请输入内容"
                      ></el-input>
                    </div>
                    <div v-else>
                      <span>{{ scope.row.name }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="内容" prop="content" width="200">
                  <template slot-scope="scope">
                    <div v-if="scope.row.isNew">
                      <el-input
                        v-model="scope.row.content"
                        placeholder="请输入内容"
                      ></el-input>
                    </div>
                    <div v-else>
                      <span>{{ scope.row.content }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作指导" prop="operationGuide">
                  <template slot-scope="scope">
                    <div
                      class="operationGuide_box"
                      @click="
                        openOperationGuideDialogDialog(
                          scope.row.operationGuide,
                          scope.$index
                        )
                      "
                    >
                      <div class="left_content">
                        <template v-if="scope.row.operationGuide">
                          <div
                            v-for="(item, index) in scope.row.operationGuide
                              .toolList"
                            :key="item.id"
                            >{{ index + 1 }}.{{ item.name }}</div
                          >
                        </template>
                      </div>
                      <div class="right_content">
                        <template v-if="scope.row.operationGuide">
                          <div
                            v-for="(item, index) in scope.row.operationGuide
                              .procedureList"
                            :key="item.id"
                            >{{ index + 1 }}.{{ item.content }}</div
                          >
                        </template>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="标准" prop="norm" width="100">
                  <template slot-scope="scope">
                    <div v-if="scope.row.isNew">
                      <el-input
                        v-model="scope.row.norm"
                        placeholder="请输入内容"
                      ></el-input>
                    </div>
                    <div v-else>
                      <span>{{ scope.row.norm }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="dialogTitle !== '派单'"
                  label="操作"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-button type="text" @click="deleteItem(scope.$index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="save">
        {{ dialogTitle === '派单' ? '派单' : '保存' }}</el-button
      >
    </template>
    <!-- 新增设备 -->
    <MaterialAdd ref="productRefs" @chooseEquipment="chooseEquipment">
    </MaterialAdd>
    <!--  -->
    <operation-guideDialog ref="operationGuideDialog" @save="saveEdit" />
    <!-- 添加规则 -->
    <ele-modal
      width="800px"
      :visible="addDialog"
      :append-to-body="true"
      title="规则配置"
      :close-on-click-modal="true"
      @update:visible="closeAdd"
    >
      <el-select
        v-model="ruleObj.ruleId"
        size="small"
        style="width: 100%"
        @change="handleRuleNameChange"
        :disabled="isBindPlan"
        filterable
      >
        <el-option
          v-for="item in ruleNameList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
          @click.native="ruleChange(item)"
        ></el-option>
      </el-select>
      <template v-slot:footer>
        <el-button @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="addRule"> 添加 </el-button>
      </template>
    </ele-modal>
  </ele-modal>
</template>

<script>
  import { getDetail, getCode } from '@/api/ruleManagement/matter';
  import {
    getRule,
    getCategory,
    getAssetList,
    getInfoById
  } from '@/api/ruleManagement/plan';
  import { saveOrUpdate } from '@/api/maintenance/patrol_maintenance';
  import { getUserPage } from '@/api/system/organization';
  import { getTreeByType } from '@/api/classifyManage';
  import MaterialAdd from './MaterialAdd.vue';
  import OperationGuideDialog from './operationGuideDialog.vue';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import { pageList } from '@/api/technology/version/version.js';
  import { getById } from '@/api/maintenance/patrol_maintenance';
  import { getFile } from '@/api/system/file';
  import { deepClone } from 'ele-admin/lib/utils/core';

  export default {
    components: {
      MaterialAdd,
      deptSelect,
      OperationGuideDialog
    },
    props: {
      dialogTitle: {
        type: String,
        default: () => {
          return '新增巡检点计划配置';
        }
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      const defaultForm = {
        id: null,
        code: '',
        name: '',
        modelType: '',
        brandNum: '',
        specification: '',
        measuringUnit: '',

        bomList: []
      };
      return {
        ruleIndex: 0, // 规则index
        ruleId: '',
        formLabel: '',
        isBindPlan: false,
        ruleObj: {
          ruleId: '',
          name: '',
          code: '',
          equipmentList: []
        },
        ruleIdList: [],
        addForm: {
          id: '',
          code: '', // 计划配置单号
          name: '', // 计划配置名称
          autoOrder: 1, // 自动派单
          ruleId: '', // 规则id
          ruleName: '', // 规则名称
          duration: null, // 计划完成时长
          categoryId: '', // 设备类别id
          approvalUserId: '', // 审核人id
          groupId: '', // 巡点检部门code
          executeId: [], // 巡点检人员id
          executorPhone: '',
          status: 1, // 状态
          remark: '', // 备注
          urgent: '1'
        },
        ruleNameList: [], // 规则列表
        uerList: [], // 审核人列表
        executorList: [], // 业务人员列表
        defaultForm,
        // 表单数据
        form: {
          ...defaultForm
        },

        versionList: [],

        // 表单验证规则
        addFormRules: {
          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' }
          ],
          executeId: [
            { required: true, message: '请选择巡点检人员', trigger: 'change' }
          ],
          urgent: [
            { required: true, message: '请选择紧急程度', trigger: 'change' }
          ]
        },

        columns: [
          {
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            label: '子项编号',
            prop: 'subCode',
            action: 'subCode'
          },
          {
            label: '物料名称',
            prop: 'categoryName',
            action: 'categoryName'
          },

          {
            label: '是否回收料',
            prop: 'isReworkBom',
            action: 'isReworkBom',
            slot: 'isReworkBom',
            width: 95
          },

          {
            label: '物料编码',
            prop: 'categoryCode'
          },
          {
            label: '牌号',
            prop: 'brandNum'
          },
          {
            label: '型号',
            prop: 'modelType'
          },
          {
            label: '数量',
            prop: 'count'
          },
          {
            label: '计量单位',
            prop: 'unit'
          },

          {
            label: '附件',
            slot: 'bomArtFiles',
            action: 'bomArtFiles',
            minWidth: 100
          },

          {
            label: '单位',
            prop: 'weightUnit'
          },

          {
            label: '备注',
            prop: 'remark'
          }
        ],

        statusList: [
          { label: '草稿', value: -1 },
          { label: '失效', value: 0 },
          { label: '生效', value: 1 }
        ],

        // 提交状态
        loading: false,

        categoryId: null,

        current: null,

        materialShow: false,

        tabsList: [],
        tableData: [],

        taskId: null,

        addDialog: false,
        tabsValue: null
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    watch: {
      visible(val) {
        if (val) {
          // 获取审核人列表数据
          this.getUserList();
          // 获取规则名称
          this._getRuleNameList();
        }
      }
    },
    methods: {
      // 初始化
      async init(row, tips) {
        console.log(row);
        console.log(tips);
        if (row) {
          this.getInfo(row.id, tips);
        } else {
          //  获取计划配置单号
          this.getOrderCode(tips);
          this.addForm = {
            code: '', // 计划配置单号
            name: '', // 计划配置名称
            autoOrder: 1, // 自动派单
            ruleId: '', // 规则id
            ruleName: '', // 规则名称
            duration: null, // 计划完成时长
            categoryId: '', // 设备类别id
            approvalUserId: '', // 审核人id
            groupId: '', // 巡点检部门code
            executeId: [], // 巡点检人员id
            executorPhone: '',
            status: 1, // 状态
            remark: '', // 备注
            urgent: '1'
          };
          this.ruleIdList = [];
          this.isBindPlan = false;
          this.planRuleEquiList = [];
          //   this.matterRulesList = [];
        }
        this.formLabel = this.dialogTitle.includes('巡点检')
          ? '巡点检'
          : this.dialogTitle.includes('保养')
          ? '保养'
          : this.dialogTitle.includes('量具送检')
          ? '量具送检'
          : '盘点';
        const typeOptions = {
          巡点检: 1,
          保养: 2,
          维修: 3,
          计划性维修: 4,
          量具送检: 5
        };
        this.addForm.type = typeOptions[this.formLabel];
        // const planRuleTypeObj = {
        //   巡点检: 'PATROL',
        //   保养: 'MAINTAIN',
        //   量具送检: '',
        //   盘点: 'INVENTORY'
        // };
        // this.addForm.planType = planRuleTypeObj[this.formLabel];
      },
      autoOrderChange(val) {
        if (val == 0) {
          this.addForm.executeId = '';
          this.addForm.groupId = '';
        }
      },
      ruleChange(item) {
        this.ruleObj.name = item.name;
        this.ruleObj.code = item.code;
      },
      save() {
        console.log(this.addForm);
        console.log(this.ruleIdList);
        if (this.ruleIdList && this.ruleIdList.length > 0) {
          this.$refs.addFormRef.validate(async (valid) => {
            console.log(valid);
            if (valid) {
              const planDeviceList = this.ruleIdList.map((ruleItem) => {
                return ruleItem.equipmentList.map((item) => {
                  return {
                    // equiCode: item.code,
                    // equiName: item.name,
                    deviceId: item.id,
                    codeNumber: item.codeNumber,
                    // equiModel: item.modelType,
                    equiLocation: item.position[0].pathName,
                    equiLocationCode: item.position[0].pathIds,
                    workItems: ruleItem.ruleItems ? ruleItem.ruleItems : []
                    // categoryId: item.category.categoryLevelId,
                    // categoryName: item.category.categoryLevelName
                    // sparePart: ruleItem.sparePart ? obj.sparePart : []
                  };
                });
              });
              let boolen = planDeviceList.every((item) => item.length > 0);
              console.log(planDeviceList);
              if (!boolen) {
                this.$message.error('请添加设备！');
                return false;
              }
              let sendMsg = this.ruleIdList.map((item, index) => {
                return {
                  ...this.addForm,
                  ruleId: item.ruleId,
                  categoryId: item.categoryId,
                  planDeviceList: planDeviceList[index],
                  executorId: this.addForm.executeId
                    ? this.addForm.executeId.join(',')
                    : ''
                };
              });
              let type = '';
              if (this.dialogTitle === '派单') {
                type = '派单';
              } else {
                type = this.dialogTitle.includes('新增') ? '新增' : '编辑';
              }
              try {
                let res = await saveOrUpdate(sendMsg);
                if (res) {
                  this.$message.success(type + '成功！');
                  this.$emit('done');
                }
              } catch (error) {
                this.$message.error(type + '失败！');
              }
            }
          });
        } else {
          this.$message.error('请添加规则！');
        }
      },
      // 保存操作指导数据
      saveEdit(data, index) {
        console.log(this.matterRulesList);
        console.log(data);
        console.log(index);
        this.$set(
          this.ruleIdList[this.ruleIndex].ruleItems[index],
          'operationGuide',
          data
        );
      },
      /* 打开操作手册编辑款 */
      openOperationGuideDialogDialog(row, index) {
        if (this.dialogTitle !== '派单') {
          this.$refs.operationGuideDialog.open(row, index);
        }
      },
      deleteEquipment(index) {
        this.ruleIdList[this.ruleIndex].equipmentList.splice(index, 1);
      },
      deleteItem(index) {
        if (this.ruleIdList[this.ruleIndex].ruleItems.length > 1) {
          this.ruleIdList[this.ruleIndex].ruleItems.splice(index, 1);
        } else {
          this.$message.error('至少要有一个规则事项！');
        }
      },
      addPostscript() {
        console.log(
          'this.matterRulesList---------------',
          this.matterRulesList
        );
        this.ruleIdList[this.ruleIndex].ruleItems.push({
          sort: null,
          name: '',
          content: '',
          norm: '',
          isNew: true,
          operationGuide: {
            procedureList: [],
            toolList: []
          }
        });
      },
      async getInfo(id, tips) {
        console.log(id);
        try {
          const res = await getById(id);
          console.log('res----------', res);
          this.addForm = res.data;
          this.addForm.id = res.data.planId;
          if (this.dialogTitle === '派单') {
            this.addForm.autoOrder = 1;
          }
          this.isBindPlan = res.isBindPlan;
          // this.categoryEquipment(res.categoryLevelId);
          this.ruleIdList = [
            {
              id: res.data.id,
              ruleId: res.data.ruleId,
              name: res.data.name,
              code: res.data.code,
              categoryId: res.data.categoryId,
              equipmentList: res.data.planDeviceList.map((item) => {
                return {
                  name: item.substance.name,
                  position: item.substance.position,
                  id: item.substance.id,
                  fixCode: item.substance.fixCode,
                  codeNumber: item.substance.codeNumber
                  // category: {
                  //   categoryLevelId: item.categoryId,
                  //   categoryLevelName: item.categoryName
                  // }
                };
              }),
              ruleItems: res.data.planDeviceList[0].workItems
            }
          ];
          console.log(this.ruleIdList);
          this.tabsValue = this.ruleIdList[0].ruleId;
          // const params = { groupId: res.data.groupId };
          // this.getUserList(params);
          // this._getMatterRulesDetails(res.ruleId);
          this.$set(this.addForm, 'code', res.data.code);
          this.$set(this.addForm, 'urgent', JSON.stringify(res.data.urgent));
          this.$set(this.addForm, 'executeId', res.data.executeId.split(','));
          this.$set(this.addForm, 'imageUrl', {});
          console.log(this.rootData);
          // const rep = await getTreeByType(0);
          // console.log('sasas', res);
          // const ids = this.findTopLevelAncestorId(
          //   rep.data,
          //   res.categoryLevelId
          // );
          // this.rootId = ids;
          // //   await this._getEquipmentList(res.categoryLevelId, this.isBindPlan);
          // let keys = [];
          // res.deviceInfo.map((item) => {
          //   keys.push(item.substanceId);
          // });
          // this.$nextTick(() => {
          //   this.$refs.equiListTree.setCheckedKeys(keys);
          // });
          // this.clickedTreeNode = true;
        } catch (error) {
          console.log(error);
        }
      },
      // 获取设备分类数据
      async categoryEquipment(id) {
        const params = { categoryLevelId: id, pageNum: 1, size: -1 };
        console.log('params==', params);
        const data = await getCategory(params);
        console.log(data);
        this.equipmentList = data.list;
      },
      // 选择设备
      chooseEquipment(data, index, categoryId) {
        this.$set(
          this.ruleIdList[index],
          'equipmentList',
          this.ruleIdList[index].equipmentList.concat(data)
        );
        this.$set(this.ruleIdList[index], 'categoryId', categoryId);
        console.log(this.ruleIdList);
      },
      // 获取计划配置单号
      async getOrderCode(tips) {
        if (tips.includes('巡点检')) {
          const data = await getCode('patrolconfig_code');
          this.$set(this.addForm, 'code', data);
        }
        if (tips.includes('保养')) {
          const code = await getCode('maintainconfig_code');
          this.$set(this.addForm, 'code', code);
        }
        if (tips.includes('量具送检')) {
          const code = await getCode('quantity_code');
          this.$set(this.addForm, 'code', code);
        }
      },
      //选择部门(搜索)
      searchDeptNodeClick(info, data) {
        if (info) {
          // 根据部门获取人员
          this.addForm.groupName = data.name;
          const params = { groupId: info };
          this.getUserList(params);
        } else {
          this.addForm.groupId = null;
        }
      },
      // 过滤计划完成时长
      formDataDurationTime(value) {
        if (value > 0) {
          this.addForm.duration = value.replace(/^[0]+/, '');
        } else {
          this.addForm.duration = 0;
        }
      },
      // 获取审核人列表、巡点检人员
      async getUserList(params) {
        try {
          let data = { pageNum: 1, size: -1 };
          // 如果传了参数就是获取巡点检人员数据
          if (params) {
            data = Object.assign(data, params);
          }
          const res = await getUserPage(data);
          console.log('res------------', res);
          if (params) {
            this.executorList = res.list;
          } else {
            this.uerList = res.list;
          }
        } catch (error) {}
      },
      // 获取规则名列表
      async _getRuleNameList() {
        if (
          this.dialogTitle === '新增保养计划配置' ||
          this.dialogTitle === '编辑保养计划配置'
        ) {
          const res = await getRule({
            status: 1,
            type: 2,
            pageNum: 1,
            size: -1
          });
          if (res.list) {
            this.ruleNameList = res.list || [];
          }
        }
        if (
          this.dialogTitle === '新增巡点检计划配置' ||
          this.dialogTitle === '编辑巡点检计划配置'
        ) {
          const res = await getRule({
            status: 1,
            type: 1,
            pageNum: 1,
            size: -1
          });
          if (res.list) {
            this.ruleNameList = res.list || [];
          }
        }
        if (
          this.dialogTitle === '新增量具送检计划配置' ||
          this.dialogTitle === '编辑量具送检计划配置'
        ) {
          const res = await getRule({
            status: 1,
            type: 5,
            pageNum: 1,
            size: -1
          });
          if (res.list) {
            this.ruleNameList = res.list || [];
          }
        }
      },
      downloadFile(file) {
        getFile({ objectName: file.storePath }, file.name);
      },

      openEdit(index) {
        this.current = this.form.bomList[index];
        console.log(this.current);
        this.materialShow = true;
      },

      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return [];
      },

      async getVersionList() {
        const res = await pageList({
          pageNum: 1,
          size: 100
        });

        this.versionList = res.list;
      },

      handleAdd(ruleIdList, ruleIdListIndex) {
        this.$refs.productRefs.open(ruleIdList, ruleIdListIndex);
      },

      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },

      handleAddTab() {
        this.tableData = this.tabsList;
        this.addDialog = true;
      },

      handleTab(e) {
        this.ruleIndex = e.index;
        // this.ruleIdList[e.index].ruleItems = this._getMatterRulesDetails(this.ruleId)
      },

      removeTab(targetName) {
        this.$confirm('是否删除当前工序?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.ruleIdList.forEach((e, index) => {
              if (e.ruleId == targetName) {
                this.ruleIdList.splice(index, 1);
                this.$nextTick(() => {
                  if (this.ruleIdList.length == 1) {
                    this.tabsValue = this.ruleIdList[0].ruleId;
                  }
                });
              }
            });
          })
          .catch(() => {});
      },

      /*关闭选择参数*/
      closeAdd() {
        this.addDialog = false;
      },
      // 规则名称下拉触发
      handleRuleNameChange(val) {
        this.ruleId = val;
        console.log('val----', val);
        // this._getMatterRulesDetails(val);
      },
      // 封装 - 获取规则下面的详情数据及事项
      async _getMatterRulesDetails(val) {
        const res = await getDetail(val);
        return res.ruleItems;
        // console.log('res------', res);
        // this.matterRulesList = res.ruleItems;
      },
      async addRule() {
        console.log(this.ruleIdList);
        console.log(this.ruleId);
        let boolen = this.ruleIdList.every((item) => {
          return this.ruleId != item.ruleId;
        });
        if (boolen) {
          console.log(this.ruleNameList);
          this.ruleObj.ruleItems = await this._getMatterRulesDetails(
            this.ruleId
          );
          this.ruleIdList.push(deepClone(this.ruleObj));
          console.log('this.ruleIdList--------', this.ruleIdList);
          this.addDialog = false;
          this.$nextTick(() => {
            if (this.ruleIdList.length == 1) {
              this.tabsValue = this.ruleIdList[0].ruleId;
            }
          });
        } else {
          this.$message.error('请误重复添加规则');
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
  }
  ::v-deep .el-tab_box {
    display: flex;
    margin-top: 10px;
    height: 300px;
    width: 100%;
    .equipmentList_box {
      flex: 1;
      height: 100%;
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      .divider {
        flex: 0 0 50px;
        .title {
          height: 35px;
        }
      }
      .el-table {
        overflow: auto;
      }
    }
    .ruleMatters_box {
      flex: 3;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .divider {
        flex: 0 0 50px;
        .title {
          height: 35px;
        }
      }
      .el-table {
        overflow: auto;
        .operationGuide_box {
          width: 100%;
          height: 50px;
          display: flex;
          overflow: hidden;
          cursor: pointer;
          .left_content {
            flex: 0 0 200px;
            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;
          }
        }
      }
      .el-table::before {
        display: none;
      }
    }
  }
</style>