kd-aiot-frontend/src/views/rulesManagement/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"
    :maxable="true"
  >
    <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
              v-model="addForm.name"
              size="small"
              placeholder="请输入"
              :disabled="isBindPlan"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="自动派单" prop="autoOrder">
            <el-select
              v-model="addForm.autoOrder"
              size="small"
              style="width: 100%"
              :disabled="isBindPlan"
            >
              <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="请输入"
                :disabled="isBindPlan"
                @input="formDataDurationTime"
              >
                <template #suffix>分钟</template>
              </el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="!dialogTitle.includes('量具送检')">
          <el-form-item label="类型" prop="type">
            <el-select
              v-model="addForm.type"
              :disabled="isBindPlan"
              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="
            dispatchType &&
            addForm.type == 1 &&
            !dialogTitle.includes('量具送检')
          "
        >
          <el-form-item label="班组" prop="teamId">
            <el-select
              v-model="addForm.teamId"
              :disabled="isBindPlan"
              size="small"
              @change="teamChange"
              :key="'teamId'"

              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="
            dispatchType &&
            addForm.type == 0 &&
            !dialogTitle.includes('量具送检')
          "
        >
          <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="
            dispatchType &&
            addForm.type == 0 &&
            !dialogTitle.includes('量具送检')
          "
        >
          <!-- <el-form-item label="负责人" prop="executeIdList">
            <el-select v-model="addForm.executeIdList" 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-form-item label="负责人" prop="executeIdList">
            <el-select
              v-model="addForm.executeIdList"
              :disabled="isBindPlan"
              size="small"
              :key="'executeIdList'"
              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" v-if="!dialogTitle.includes('量具送检')">
          <el-form-item label="审核人" prop="approvalUserId">
            <el-select
              v-model="addForm.approvalUserId"
              size="small"
              clearable
              style="width: 100%"
              :disabled="isBindPlan"
              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="isBindPlan"
            >
            </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="isBindPlan"
            ></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
        @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>
                  <el-button
                    size="small"
                    icon="el-icon-plus"
                    class="ele-btn-icon"
                    type="primary"
                    :disables="hasCategoryId"
                    @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 }">
                    <template>
                      {{ row.name }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="编号" align="center" prop="codeNumber">
                  <template slot-scope="{ row }">
                    <template>
                      {{ row.codeNumber }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="固资编码" align="center" prop="fixCode">
                  <template slot-scope="{ row }">
                    <template>
                      {{ row.fixCode }}
                    </template>
                  </template>
                </el-table-column>
                <el-table-column 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>
                  <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="categoryCode"
                  width="100"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.isNew">
                      <el-input
                        v-model="scope.row.categoryCode"
                        placeholder="请输入零部件编码"
                      ></el-input>
                    </div>
                    <div v-else>
                      <span>{{ scope.row.categoryCode }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="零部件名称"
                  prop="categoryName"
                  width="100"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.row.isNew">
                      <el-input
                        v-model="scope.row.categoryName"
                        placeholder="请输入零部件名称"
                      ></el-input>
                    </div>
                    <div v-else>
                      <span>{{ scope.row.categoryName }}</span>
                    </div>
                  </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,
                          scope.row.isNew
                        )
                      "
                    >
                      <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 label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button
                      v-if="scope.row.isNew"
                      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="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="save"> 保存 </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="false"
      @update:visible="closeAdd"
      :maxable="true"
    >
      <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.code + '-' + item.name"
          @click.native="ruleChange(item)"
        ></el-option>
      </el-select>
      <template v-slot:footer>
        <el-button @click="closeAdd">取消</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,
    saveOrUpdate,
    getInfoById
  } from '@/api/ruleManagement/plan';
  import { getUserPage } from '@/api/system/organization';
  import { getTreeByType } from '@/api/classifyManage';
  import MaterialAdd from './MaterialAdd.vue';
  import OperationGuideDialog from '@/views/rulesManagement/matterRules/components/operationGuideDialog.vue';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import { pageList } from '@/api/technology/version/version.js';
  import {
    bomDelete,
    saveBatch,
    bomTaskList,
    bomTaskDelete,
    getByTaskId
  } from '@/api/material/BOM';
  import { getteampage } from '@/api/workforceManagement/team';

  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: {
          code: '', // 计划配置单号
          name: '', // 计划配置名称
          type: 0, // 默认个人
          autoOrder: 1, // 自动派单
          ruleId: '', // 规则id
          ruleName: '', // 规则名称
          duration: null, // 计划完成时长
          categoryId: '', // 设备类别id
          approvalUserId: '', // 审核人id
          groupId: '', // 巡点检部门code
          executeIdList: [], // 巡点检人员id
          executorPhone: '',
          status: 1, // 状态
          remark: '', // 备注
          urgent: '1',
          teamId: '', // 班组id
          executeUsers: [] // 执行人
        },
        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' }
          ],
          executeIdList: [
            { required: true, message: '请选择人员', trigger: 'change' }
          ],
          teamId: [
            { required: true, message: '请选择班组', trigger: 'change' }
          ],
          urgent: [
            { required: true, message: '请选择紧急程度', trigger: 'change' }
          ],
          type: [{ 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,

        hasCategoryId: false,
        getByIdData: {},
        modelType: '',
        teamAllList: []
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      },
      dispatchType() {
        return (
          (this.addForm.autoOrder &&
            (this.modelType == 'add' || this.modelType == 'edit')) ||
          (!this.addForm.autoOrder && this.modelType == 'dispatch')
        );
      }
    },
    watch: {
      visible(val) {
        if (val) {
          this.formLabel = this.dialogTitle.includes('巡点检')
            ? '巡点检'
            : this.dialogTitle.includes('运行记录')
            ? '运行记录'
            : this.dialogTitle.includes('保养')
            ? '保养'
            : this.dialogTitle.includes('检修')
            ? '检修'
            : '盘点';
          // 获取审核人列表数据
          this.getUserList();
          // 获取规则名称
          this._getRuleNameList();
        }
      }
    },
    mounted() {
      this.getAllTeamList();
      this.getUserList({ groupId: '1' });
    },
    methods: {
      // 初始化
      async init(type, row, tips) {
        console.log(row);
        console.log(tips);
        this.modelType = type;
        if (row) {
          this.getInfo(row.id);
        } else {
          //  获取计划配置单号
          this.getOrderCode(tips);
          this.addForm = {
            code: '', // 计划配置单号
            name: '', // 计划配置名称
            autoOrder: 1, // 自动派单
            type: 0, // 默认个人
            ruleId: '', // 规则id
            ruleName: '', // 规则名称
            duration: null, // 计划完成时长
            categoryId: '', // 设备类别id
            approvalUserId: '', // 审核人id
            groupId: '', // 巡点检部门code
            executeIdList: [], // 巡点检人员id
            executorPhone: '',
            status: 1, // 状态
            remark: '', // 备注
            urgent: '1',
            teamId: '', // 班组id
            executeUsers: [] // 执行人
          };
          this.ruleIdList = [];
          this.isBindPlan = false;
          this.planRuleEquiList = [];
          //   this.matterRulesList = [];
        }
      },
      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
            }
          ];
        }
      },
      typeChange(v) {
        console.log('typeChange', v, this.addForm.executeIdList);
        // this.addForm.groupId = '';
        // this.addForm.executeIdList = [];
        // this.addForm.teamId = '';
        // this.addForm.executeUsers = [];
        this.$set(this.addForm, 'executeUsers', []);
        this.$set(this.addForm, 'groupId', '');
        this.$set(this.addForm, 'executeIdList', []);
        this.$set(this.addForm, 'teamId', '');

        this.$forceUpdate();
      },
      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) {
              //   this.addForm.deviceInfo = selectList.map((item) => {
              //     return {
              //       substanceId: item.id,
              //       sparePart: item.sparePart ? item.sparePart : [],
              //       totalCost: item.totalCost
              //     };
              //   });
              this.addForm.executeId =
                this.addForm.executeIdList &&
                this.addForm.executeIdList.toString();

              this.addForm.ruleType = this.dialogTitle.includes('巡点检')
                ? 1
                : this.dialogTitle.includes('保养')
                ? 2
                : this.dialogTitle.includes('运行记录')
                ? 5
                : this.dialogTitle.includes('检修')
                ? 7
                : 4;
              console.log(this.ruleIdList);
              this.addForm.isBindPlan = this.isBindPlan;
              let planConfigAddOrUpdatePOList = this.ruleIdList.map((item) => {
                return {
                  id: item.id,
                  ruleId: item.ruleId,
                  ruleName: item.name,
                  ruleCode: item.code,
                  categoryId: item.categoryId,
                  deviceInfo: item.equipmentList.map((item) => {
                    return {
                      // substanceId: this.dialogTitle.includes('新增')
                      //   ? item.position[0]?.substanceId
                      //   : item.id,
                      substanceId: item.id,
                      // 前端回显字段
                      id: item.id,
                      codeNumber: item.codeNumber,
                      name: item.name,
                      fixCode: item.fixCode,
                      categoryId: item.category.categoryLevelId,
                      categoryName: item.category.categoryLevelName
                    };
                  }),
                  ruleMatters: item.ruleItems
                };
              });
              const planConfigAddOrUpdatePOListIds =
                planConfigAddOrUpdatePOList.map((i) => i.id);
              console.log(planConfigAddOrUpdatePOList);
              let boolen = planConfigAddOrUpdatePOList.every(
                (item) => item.deviceInfo.length > 0
              );
              if (!boolen) {
                this.$message.error('请添加设备！');
                return false;
              }
              this.addForm.ruleName = this.ruleIdList
                .map((item) => item.name)
                .join(',');
              this.addForm.ruleCode = this.ruleIdList
                .map((item) => item.code)
                .join(',');
              this.addForm.planConfigAddOrUpdatePOList =
                planConfigAddOrUpdatePOList;
              this.addForm.ruleId = '0'; // 无效后台验证
              let sendMsg = deepClone(this.addForm);
              const type = this.dialogTitle.includes('新增') ? '新增' : '编辑';
              try {
                let res = await saveOrUpdate(sendMsg);
                if (res) {
                  this.$message.success(type + '成功！');
                  this.$emit('done');
                }
              } catch (error) {
                console.log(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, isNew) {
        console.log(isNew, 'isNew');

        if (isNew) {
          this.$refs.operationGuideDialog.open(row, index);
        }
      },
      deleteEquipment(index) {
        this.ruleIdList[this.ruleIndex].equipmentList.splice(index, 1);
      },
      deleteItem(index) {
        this.ruleIdList[this.ruleIndex].ruleItems.splice(index, 1);
      },
      addPostscript() {
        // console.log(
        //   'this.matterRulesList---------------',
        //   this.matterRulesList
        // );
        this.ruleIdList[this.ruleIndex].ruleItems.push({
          sort: null,
          name: '',
          content: '',
          norm: '',
          isNew: true,
          operationGuide: {
            procedureList: [],
            toolList: []
          }
        });
        console.log(this.ruleIdList, '225');
      },
      async getInfo(id) {
        console.log(id);
        try {
          const res = await getInfoById(id);
          console.log('res----------', res);
          // this.addForm = res;

          this.isBindPlan = res.isBindPlan;
          this.categoryEquipment(res.categoryLevelId);
          this.ruleIdList = res.planConfigVOList.map((item) => {
            return {
              id: item.id,
              ruleId: item.ruleId,
              name: item.ruleName,
              code: item.ruleCode,
              categoryId: item.categoryId,
              equipmentList: item.deviceInfo.map((item) => {
                return {
                  name: item.name,
                  id: item.id,
                  fixCode: item.fixCode,
                  codeNumber: item.codeNumber,
                  category: {
                    categoryLevelId: item.categoryId,
                    categoryLevelName: item.categoryName
                  }
                };
              }),
              ruleItems: item.ruleMatters
            };
          });

          // 处理回显数据
          if (res.type === 0) {
            // 个人
            res.executeIdList = res.executeUsers.map((item) => item.userId);

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

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

            // this.addForm.teamId = ''
            // this.$set(this.addForm, 'teamId', '');

            groupIds.map((item) => {
              this.searchDeptNodeClick(item);
            });
          } else {
            // 班组
            res.teamId = res.executeUsers?.[0]?.teamId || '';
            // this.$set(this.addForm, 'groupId', '');
            // this.$set(this.addForm, 'executeIdList', []);
            // this.addForm.groupId = ''
            // this.addForm.executeIdList = []
          }
          this.tabsValue = this.ruleIdList[0].ruleId;
          if (res.groupId) {
            const params = { groupId: res.groupId };
            this.getUserList(params);
          }
          this.$set(this, 'addForm', res);
          // this._getMatterRulesDetails(res.ruleId);
          this.$set(this.addForm, 'code', res.code);
          this.$set(this.addForm, 'urgent', JSON.stringify(res.urgent));
          // this.$set(this.addForm, 'executeIdList', res.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) {}
      },
      // 获取设备分类数据
      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);
        }
        if (tips.includes('运行记录')) {
          const code = await getCode('runRecord_code');
          this.$set(this.addForm, 'code', code);
        }
        if (tips.includes('检修')) {
          const code = await getCode('service_code');
          this.$set(this.addForm, 'code', code);
        }
      },
      //选择部门(搜索)
      async searchDeptNodeClick(info, data) {
        console.log('searchDeptNodeClick', info, data);
        if (info) {
          // 根据部门获取人员
          // this.addForm.groupName = data.name;
          const params = { groupId: info };
          await this.getUserList(params);
          // if (this.addForm.type == 1) {
          //   this.addForm.executeIdList = this.executorList.map(
          //     (item) => item.id
          //   );
          // }
        } else {
          this.addForm.groupId = null;
        }
      },
      // 负责人变更 同步执行人列表
      executeIdListChange(v) {
        console.log('executeIdListChange', v);
        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);
      },
      // 过滤计划完成时长
      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() {
        const typeMap = {
          新增巡点检计划配置: 1,
          编辑巡点检计划配置: 1,
          新增保养计划配置: 2,
          编辑保养计划配置: 2,
          新增量具送检计划配置: 5,
          编辑量具送检计划配置: 5,
          新增运行记录配置: 6,
          编辑运行记录配置: 6,
          新增检修配置: 7,
          编辑检修配置: 7
        };

        const ruleType = typeMap[this.dialogTitle];
        if (ruleType) {
          const res = await getRule({
            status: 1,
            type: ruleType,
            pageNum: 1,
            size: -1
          });
          console.log(res, 'resresresresres');
          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);
      },

      async getCategoryBomFn(taskId) {
        const res = await getByTaskId(this.categoryId, taskId);
        this.form.bomList = res;
      },

      remove(row) {
        bomDelete([row.id])
          .then((message) => {
            this.$message.success(message);
            this.getCategoryBomFn();
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },

      done(taskId) {
        this.materialShow = false;
        this.getCategoryBomFn(taskId);
      },

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

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

      removeTab(targetRuleId) {
        this.$confirm('是否删除当前规则?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            console.log('targetName', targetRuleId);
            console.log('this.ruleIdList', this.ruleIdList);

            this.ruleIdList = this.ruleIdList.filter(
              (item) => item.ruleId != targetRuleId
            );

            console.log('this.ruleIdList', this.ruleIdList);

            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.getRulesDetails(val);
      },
      async getRulesDetails(val) {
        const res = await getDetail(val);
        console.log('res------', res);
        this.getByIdData = res;
        this.hasCategoryId = res?.categoryId;
      },
      // 封装 - 获取规则下面的详情数据及事项
      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
          );

          for (let i = 0; i < this.ruleObj.ruleItems.length; i++) {
            const id = this.getByIdData?.categoryId;
            const name = this.getByIdData?.categoryName;

            this.ruleObj.ruleItems[i].categoryId = id;
            this.ruleObj.ruleItems[i].categoryName = name;

            this.ruleObj.ruleItems[i].isNew = true;
          }

          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('请误重复添加规则');
        }
      },

      // 保存
      saveBatchFn() {
        let arr = [];
        arr = this.tabsList.map((m) => {
          return {
            taskId: m.id,
            sort: m.sort,
            categoryId: this.categoryId
          };
        });

        saveBatch(arr).then((res) => {
          this.taskListHead();
        });
      },

      taskListHead(isFirst) {
        console.log(isFirst);
        bomTaskList(this.categoryId).then((res) => {
          let arr = [];
          arr = res.map((m) => {
            return {
              oldId: m.id,
              sourceTaskId: m.id,
              id: m.taskId,
              name: m.taskName
            };
          });
          this.tabsList = arr;

          if (isFirst && this.tabsList.length > 0) {
            this.tabsValue = this.tabsList[0].id;
            this.getCategoryBomFn(this.tabsList[0].id);
          }
        });
      }
    }
  };
</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;

      .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>