kd-aiot-frontend/src/views/technology/production/components/user-setting-matter-process.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>

    <el-form :model="params" label-width="115px" style="margin-top: 20px">
      <el-row :gutter="20" style="margin-bottom: 10px">
        <el-col :span="10">
          <el-form-item label="关联产品方式">
            <el-select
              v-model="relateProductMethod"
              placeholder="请选择关联产品方式"
              style="width: 100%"
            >
              <el-option
                v-for="item in relateProductMethodOpeions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="relateProductMethod == 1" :span="10">
          <el-form-item label="关联产品分类">
            <ele-tree-select
              multiple
              clearable
              :data="productCategory"
              v-model="params.categoryLevels"
              placeholder="请选择关联产品分类"
              default-expand-all
              labelKey="name"
              valueKey="id"
              @change="getMatterList"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <template v-if="relateProductMethod == 2">
        <div style="margin-bottom: 20px">
          <header-title title="关联产品">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="relateProductSelect"
            >
              选择产品
            </el-button>
          </header-title>

          <ele-pro-table
            ref="productTableRef"
            :columns="productColumns"
            :datasource="params.products"
            :needPage="false"
            row-key="id"
            cache-key="user-setting-matter-process-product-2510181402"
          >
            <template v-slot:action="{ row }">
              <el-link
                type="danger"
                :underline="false"
                icon="el-icon-delete"
                @click="productColumnsDeleteRow(row)"
              >
                删除
              </el-link>
            </template>
          </ele-pro-table>
        </div>
      </template>
    </el-form>

    <ele-pro-table
      ref="table"
      :columns="bankColumns"
      :datasource="datasource"
      :need-page="false"
      class="table_list"
      @refresh="getMatterList"
      cache-key="user-setting-matter-process-2510181058"
    >
      <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"
      notProduceTaskConfig
    />

    <ProductModal
      ref="ProductModalCorrelationRef"
      @changeProduct="changeRelateProduct"
      multiple
    ></ProductModal>
  </ele-modal>
</template>

<script>
  import {
    produceTaskRecordRules,
    produceTaskRecordRulesBatchSave,
    produceTaskRecordRulesGetById
  } 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 { getTreeByPid } from '@/api/classifyManage';
  import ProductModal from '@/components/selectProduct/ProductModal.vue';

  export default {
    name: 'UserSettingMatter',
    mixins: [dictMixins, tableColumnsMixin],
    components: { userSettingMatterAdd, ProductModal },
    data() {
      return {
        visible: false,
        // 	记录规则报工类型 产前、过程、产后
        reportWorkType: '2',
        // 事项列表
        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,
        relateProductMethod: null,
        params: {
          categoryLevels: [],
          products: []
        },
        relateProductMethodOpeions: [
          { label: '不关联', value: 0 },
          { label: '关联分类', value: 1 },
          { label: '关联产品', value: 2 }
        ],
        // 产品分类
        productCategory: []
      };
    },
    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');
      },
      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: 'measuringUnit',
            label: '计量单位'
          },
          {
            prop: 'packingUnit',
            label: '包装单位'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 110,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ];
      }
    },
    created() {
      this.getProductCategory();
    },
    methods: {
      // 获取产品分类
      async getProductCategory() {
        let { data } = await getTreeByPid(9);
        console.log('产品分类', data);
        this.productCategory = data;
      },
      updateVisible(val) {
        this.visible = val;
      },
      openSetting(row) {
        console.log('row', row);
        this.currentRow = row;
        this.visible = true;
        this.getMatterList();
      },
      // 查询事项数据
      async getMatterList() {
        const { list } = await produceTaskRecordRules({
          // 工序id
          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,
          produceTaskName: this.currentRow.name,
          reportWorkType: this.reportWorkType
        });
        this.addPOs.push({
          ...matter,
          id: id,
          produceTaskId: this.currentRow.id,
          produceTaskName: this.currentRow.name,
          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,
            produceTaskName: this.currentRow.name,
            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,
            produceTaskName: this.currentRow.name,
            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 = '2';
      },
      // 关联产品
      relateProductSelect() {
        this.$refs.ProductModalCorrelationRef.open(this.params.products);
      },
      changeRelateProduct(array) {
        console.log('paroduct list ', array);

        this.params.products = [
          ...this.params.products,
          ...array.filter(
            (i) => !this.params.products.some((cat) => cat.id === i.id)
          )
        ];
      }
    }
  };
</script>

<style scoped></style>