kd-aiot-frontend-qms/src/components/releaseRules/index.vue

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="80%"
    :visible.sync="visible"
    title="选择模板"
    :close-on-click-modal="false"
    :maxable="true"
    :resizable="true"
    append-to-body
  >
    <div class="ele-body">
      <el-card shadow="never" v-loading="loading">
        <ele-split-layout
          width="230px"
          allow-collapse
          :right-style="{ overflow: 'hidden' }"
        >
          <div>
            <div class="ele-border-lighter sys-organization-list">
              <el-tree
                :data="typeTree"
                default-expand-all
                @node-click="handleNodeClick"
                highlight-current
                ref="treeRef"
                node-key="id"
                :expand-on-click-node="false"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <div>
                    <span>{{
                      data.type == 'templateStyle' ? '模板-' : ''
                    }}</span>
                    {{ node.label }}</div
                  >
                  <span> </span>
                </span>
              </el-tree>
            </div>
          </div>
          <template v-slot:content>
            <search @search="reload" />
            <ele-pro-table
              ref="table"
              :columns="columns"
              :datasource="datasource"
              row-key="id"
              :initLoad="false"
              @cell-click="cellClick"
            >
              <template v-slot:action="{ row }">
                <el-radio class="radio" v-model="radio" :label="row.id">
                  <i></i>
                </el-radio>
              </template>
            </ele-pro-table>
          </template>
        </ele-split-layout> </el-card
    ></div>
    <template v-slot:footer>
      <el-button type="primary" @click="save"> 确定 </el-button>
      <el-button @click="visible = false"> 返回 </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import search from './search.vue';
  import dictMixins from '@/mixins/dictMixins';
  import { recordrulesPage, recordrulesTypePage } from '@/api/main/index';
  export default {
    components: { search },
    mixins: [dictMixins],

    data() {
      return {
        visible: false,
        radio: null,
        current: {},
        loading: false,
        type: '',
        typeTree: [],
        treeNode: null
      };
    },
    computed: {
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '记录规则编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            slot: 'code'
          },
          {
            prop: 'name',
            label: '记录规则名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'industryType',
            label: '行业类别',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return this.getDictValue('行业类别', row.industryType);
            }
          },
          {
            prop: 'businessType',
            label: '业务分类',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return this.getDictValue('业务类型', row.businessType);
            }
          },
          {
            prop: 'reportWorkType',
            label: '模块划分',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return this.getDictValue('记录规则报工类型', row.reportWorkType);
            }
          },
          {
            prop: 'classify',
            label: '应用场景',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return this.getDictValue('记录规则类型', row.classify);
            }
          },
          {
            prop: 'recordTemplateStyle',
            label: '模板样式',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return this.getDictValue(
                '记录表模板样式',
                row.recordTemplateStyle
              );
            }
          },
          {
            prop: 'executeMethodName',
            label: '执行方式',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'produceTaskName',
            label: '工序名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'version',
            label: '版本号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return `${row.versionSymbol}${row.bigVersion}${row.versionMark}${row.smallVersion}`;
            }
          },
          {
            prop: 'fromName',
            label: '来源版本',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'startDate',
            label: '启用日期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return this.$util.toDateString(row.startDate, 'yyyy-MM-dd');
            }
          },
          {
            prop: 'stopDate',
            label: '停用日期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return this.$util.toDateString(row.stopDate, 'yyyy-MM-dd');
            }
          },
          {
            prop: '',
            label: '周期',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row) => {
              return (
                row.frequencyValue +
                this.getDictValue('规则周期', row.frequencyUnit)
              );
            }
          },
          {
            prop: 'createUserName',
            label: '创建人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'enable',
            label: '是否启用',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return row.enable ? '启用' : '停用';
            }
          },
          {
            prop: 'publishStatus',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              switch (row.publishStatus) {
                case 0:
                  return '草稿';
                case 1:
                  return '已发布';
                case 2:
                  return '已撤销';
                default:
                  return '';
              }
            }
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 260,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'left'
          }
        ];
      }
    },
    created() {},
    methods: {
      open(type) {
        this.visible = true;
        this.type = type;
        this.getTypeList();
      },
      // 类型列表
      async getTypeList() {
        const { list = [] } = await recordrulesTypePage({
          pageNum: 1,
          size: 99999
        });
        this.typeTree = [];
        console.log('type list', list);

        const industryMap = new Map();

        list
          .filter((item) => [this.type].includes(item.reportWorkType))
          .forEach((item) => {
            // industry
            let industryNode = industryMap.get(item.industryType);
            if (!industryNode) {
              industryNode = {
                id: 'industry-' + item.industryType,
                type: 'industry',
                value: item.industryType,
                label: item.industryName,
                children: [],
                item,
                _businessMap: new Map()
              };
              industryMap.set(item.industryType, industryNode);
            }

            // business
            let businessNode = industryNode._businessMap.get(item.businessType);
            if (!businessNode) {
              businessNode = {
                id: `business-${item.industryType}-${item.businessType}`,
                type: 'business',
                value: item.businessType,
                label: item.businessName,
                children: [],
                item,
                _reportMap: new Map()
              };
              industryNode._businessMap.set(item.businessType, businessNode);
              industryNode.children.push(businessNode);
            }

            // reportWork
            let reportNode = businessNode._reportMap.get(item.reportWorkType);
            if (!reportNode) {
              reportNode = {
                id: `report-${item.industryType}-${item.businessType}-${item.reportWorkType}`,
                type: 'reportWork',
                value: item.reportWorkType,
                label: item.reportWorkName,
                children: [],
                item,
                _sceneMap: new Map()
              };
              businessNode._reportMap.set(item.reportWorkType, reportNode);
              businessNode.children.push(reportNode);
            }

            // scene
            let sceneNode = reportNode._sceneMap.get(item.sceneType);
            if (!sceneNode) {
              sceneNode = {
                id: `scene-${item.industryType}-${item.businessType}-${item.reportWorkType}-${item.sceneType}`,
                type: 'scene',
                value: item.sceneType,
                label: item.sceneName,
                children: [],
                item,
                _templateMap: new Map()
              };
              reportNode._sceneMap.set(item.sceneType, sceneNode);
              reportNode.children.push(sceneNode);
            }

            // template style
            let templateNode = sceneNode._templateMap.get(
              item.templateStyleType
            );
            if (!templateNode) {
              templateNode = {
                id: `template-${item.industryType}-${item.businessType}-${item.reportWorkType}-${item.sceneType}-${item.templateStyleType}`,
                type: 'templateStyle',
                value: item.templateStyleType,
                label: item.templateStyleName,
                item,
                children: []
              };
              sceneNode._templateMap.set(item.templateStyleType, templateNode);
              sceneNode.children.push(templateNode);
            }

            // 原始数据
            templateNode.item = item;
          });

        const clean = (node) => {
          delete node._businessMap;
          delete node._reportMap;
          delete node._sceneMap;
          delete node._templateMap;
          node.children && node.children.forEach(clean);
        };

        const tree = Array.from(industryMap.values());
        tree.forEach(clean);

        this.typeTree = tree; // 结果树

        if (!this.treeNode) {
          // 默认选中第一个节点
          this.treeNode = this.typeTree.length > 0 ? this.typeTree[0] : null;
          if (this.treeNode) {
            // 默认选中节点
            this.$nextTick(() => {
              this.$refs.treeRef.setCurrentKey(this.treeNode.id);
              this.handleNodeClick(this.treeNode);
            });
          }
        }
      },

      handleNodeClick(data) {
        this.treeNode = data;
        this.reload();
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        const typeWhere = {};
        if (this.treeNode && this.treeNode.item) {
          if (this.treeNode.type === 'industry') {
            typeWhere.industryType = this.treeNode.item.industryType;
          } else if (this.treeNode.type === 'business') {
            typeWhere.industryType = this.treeNode.item.industryType;
            typeWhere.businessType = this.treeNode.item.businessType;
          } else if (this.treeNode.type === 'reportWork') {
            typeWhere.industryType = this.treeNode.item.industryType;
            typeWhere.businessType = this.treeNode.item.businessType;
            typeWhere.reportWorkType = this.treeNode.item.reportWorkType;
          } else if (this.treeNode.type === 'scene') {
            typeWhere.industryType = this.treeNode.item.industryType;
            typeWhere.businessType = this.treeNode.item.businessType;
            typeWhere.reportWorkType = this.treeNode.item.reportWorkType;
            typeWhere.classify = this.treeNode.item.sceneType;
          } else {
            typeWhere.industryType = this.treeNode.item.industryType;
            typeWhere.businessType = this.treeNode.item.businessType;
            typeWhere.reportWorkType = this.treeNode.item.reportWorkType;
            typeWhere.classify = this.treeNode.item.sceneType;
            typeWhere.recordTemplateStyle =
              this.treeNode.item.templateStyleType;
          }
        }

        return recordrulesPage({
          pageNum: page,
          size: limit,
          ...where,
          ...typeWhere
        });
      },
      // 单击获取id
      cellClick(row) {
        this.current = row;
        this.radio = row.id;
      },
      save() {
        this.visible = false;
        this.$emit('success', this.current);
        this.radio = null;
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      }
    },

    watch: {}
  };
</script>