kd-aiot-frontend/src/views/technology/production/components/user-setting-matter.vue

<template>
  <ele-modal
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    title="配置事项"
    @update:visible="updateVisible"
    :maxable="true"
    :before-close="handleClose"
    width="60%"
  >
    <el-tabs v-model="reportWorkType" type="card">
      <el-tab-pane
        v-for="i in tabPaneList"
        :label="i.dictValue"
        :name="i.dictCode"
        :key="i.dictCode"
      ></el-tab-pane>
    </el-tabs>
    <div style="margin: 10px 0"></div>
    <ele-pro-table
      ref="table"
      :columns="bankColumns"
      :datasource="datasource"
      :need-page="false"
      class="table_list"
    >
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="openAddMatter"
        >
          新建
        </el-button>
      </template>

      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-popconfirm
          class="ele-action"
          title="确定要删除此事项吗？"
          @confirm="delMatter(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>

        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="openEditMatter(row)"
        >
          详情
        </el-link>
      </template>
    </ele-pro-table>

    <template v-slot:footer>
      <el-button type="primary" @click="saveMatterList" :loading="butLoading">
        确定
      </el-button>

      <el-button @click="handleClose">取消</el-button>
    </template>

    <userSettingMatterAdd
      ref="userSettingMatterAddRef"
      @addMatter="addMatter"
      @editMatter="editMatter"
    />
  </ele-modal>
</template>

<script>
  import {
    produceTaskRecordRules,
    produceTaskRecordRulesBatchSave
  } from '@/api/producetaskrecordrules';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import dictMixins from '@/mixins/dictMixins';
  import userSettingMatterAdd from './user-setting-matter-add.vue';
  import { mapGetters } from 'vuex';
  import { addMaterial } from '@/api/material/list';

  export default {
    name: 'UserSettingMatter',
    mixins: [dictMixins, tableColumnsMixin],
    components: { userSettingMatterAdd },
    data() {
      return {
        visible: false,
        // 	记录规则报工类型 产前、过程、产后
        reportWorkType: '1',
        // 事项列表
        matterList: [],
        // 表格列
        bankColumns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center'
          },
          {
            prop: 'itemType',
            label: '类型',
            align: 'center',
            formatter: (row) => {
              return this.getDictValue('记录规则事项类型', row.itemType);
            }
          },
          {
            prop: 'executeMethod',
            label: '执行方式',
            align: 'center',
            formatter: (row) => {
              return this.getDictValue('记录规则执行方式', row.executeMethod);
            }
          },
          {
            prop: 'rulesName',
            label: '名称',
            align: 'center',
            formatter: (row) => {
              return row.rulesName || row.itemTaskName;
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            align: 'center',
            slot: 'action'
          }
        ],
        // 当前行数据
        currentRow: null,
        // 添加事项列表
        addPOs: [],
        deletedIds: [],
        updatePOs: [],
        butLoading: false
      };
    },
    computed: {
      ...mapGetters(['dict']),
      // 根据报工类型过滤事项
      datasource() {
        return this.matterList.filter(
          (item) => item.reportWorkType == this.reportWorkType
        );
      },
      tabPaneList() {
        const list = this.dict['record_rules_report_work_type'] || [];
        // 排除过程监测
        return list.filter((item) => item.dictCode != '2');
        // return list;
      }
    },
    created() {},
    methods: {
      updateVisible(val) {
        this.visible = val;
      },
      openSetting(row) {
        console.log('row', row);
        this.currentRow = row;
        this.visible = true;
        this.getMatterList(row);
      },
      // 查询事项数据
      async getMatterList() {
        const { list } = await produceTaskRecordRules({
          produceTaskId: this.currentRow.id,
          pageNum: 1,
          size: 9999
          // reportWorkType: this.reportWorkType
        });
        console.log('list', list);
        // 表格数据
        this.matterList = list;
      },
      // 删除事项
      async delMatter(row) {
        if (row.isUsing) {
          return this.$message.warning('事项正在使用中，无法删除');
        }

        // 事项列表过滤
        this.matterList = this.matterList.filter((item) => item.id !== row.id);
        // 如果是临时id，直接前端删除
        if (row.id.includes('tem')) {
          this.addPOs = this.addPOs.filter((item) => item.id !== row.id);
        } else {
          this.deletedIds.push(row.id);
        }
        // updatePOs 过滤
        this.updatePOs = this.updatePOs.filter((item) => item.id !== row.id);
      },
      // 打开添加事项
      openAddMatter() {
        this.$refs.userSettingMatterAddRef.openAdd();
      },
      openEditMatter(row) {
        this.$refs.userSettingMatterAddRef.openEdit(row);
      },
      addMatter(matter) {
        console.log('matter', matter);
        const id = 'tem' + new Date().getTime();
        // 添加事项
        this.matterList.push({
          ...matter,
          id: id,
          produceTaskId: this.currentRow.id,
          reportWorkType: this.reportWorkType
        });
        this.addPOs.push({
          ...matter,
          id: id,
          produceTaskId: this.currentRow.id,
          reportWorkType: this.reportWorkType
        });
        this.handleSort();
      },
      editMatter(matter) {
        console.log('matter', matter);
        // 编辑事项
        this.matterList = this.matterList.map((item) => {
          if (item.id === matter.id) {
            return {
              ...item,
              ...matter
            };
          }
          return item;
        });
        // 如果不是临时id，加入updatePOs
        if (!matter.id.includes('tem')) {
          // 先过滤掉之前的
          this.updatePOs = this.updatePOs.filter(
            (item) => item.id !== matter.id
          );
          this.updatePOs.push({
            ...matter,
            produceTaskId: this.currentRow.id,
            reportWorkType: this.reportWorkType
          });
        } else {
          // 如果是临时id，直接更新addPOs
          this.addPOs = this.addPOs.map((item) => {
            if (item.id === matter.id) {
              return {
                ...item,
                ...matter
              };
            }
            return item;
          });
        }
        this.handleSort();
      },
      // 事项排序 根据matterList的顺序
      handleSort() {
        this.matterList = this.matterList.map((item, index) => {
          item.sortNum = index;
          return item;
        });
        this.addPOs = this.addPOs.map((item) => {
          const matter = this.matterList.find((m) => m.id === item.id);
          if (matter) {
            return {
              ...item,
              sortNum: matter.sortNum
            };
          }
          return item;
        });
        this.updatePOs = this.updatePOs.map((item) => {
          const matter = this.matterList.find((m) => m.id === item.id);
          if (matter) {
            return {
              ...item,
              sortNum: matter.sortNum
            };
          }
          return item;
        });
      },
      // 确定保存事项
      async saveMatterList() {
        console.log('this.matterList', this.matterList);
        try {
          this.butLoading = true;

          await produceTaskRecordRulesBatchSave({
            addPOs: this.addPOs,
            deletedIds: this.deletedIds,
            produceTaskId: this.currentRow.id,
            updatePOs: this.updatePOs
          });
          this.$message.success('保存成功');
          this.handleClose();
          this.butLoading = false;
        } catch (error) {
          this.butLoading = false;
        }
      },
      // 关闭弹窗、清空数据
      handleClose() {
        this.visible = false;
        this.matterList = [];
        this.addPOs = [];
        this.deletedIds = [];
        this.updatePOs = [];
        this.butLoading = false;
        this.reportWorkType = '1';
      }
    }
  };
</script>

<style scoped></style>