kd-aiot-frontend/src/views/rulesManagement/releaseRules/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <search @search="reload" />
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :cache-key="cacheKeyUrl"
      >
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="addPermit(null, 'add', '新增记录规则')"
          >
            新建
          </el-button>
        </template>
        <!-- <template v-slot:status="{ row }"> </template> -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-document-copy"
            @click="addPermit(row, 'clone', '克隆记录规则')"
          >
            克隆
          </el-link>

          <el-link
            v-if="row.publishStatus === 1 && !row.isUpdatedVersion"
            type="success"
            :underline="false"
            icon="el-icon-finished"
            @click="addPermit(row, 'change', '变更记录规则')"
          >
            变更
          </el-link>

          <!-- <el-popconfirm
            v-if="row.publishStatus == 1"
            class="ele-action"
            title="确定要撤销此条数据吗？"
            @confirm="recordrulesRevokePublish(row)"
          >
            <template v-slot:reference>
              <el-link type="warning" :underline="false" icon="el-icon-delete">
                撤销
              </el-link>
            </template>
          </el-popconfirm> -->

          <el-link
            v-if="row.publishStatus != 1"
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="addPermit(row, 'edit', '修改记录规则')"
          >
            修改
          </el-link>

          <el-popconfirm
            v-if="row.publishStatus != 1"
            class="ele-action"
            title="确定要发布此条数据吗？"
            @confirm="publish(row)"
          >
            <template v-slot:reference>
              <el-link
                type="primary"
                :underline="false"
                icon="el-icon-position"
              >
                发布
              </el-link>
            </template>
          </el-popconfirm>

          <el-link
            v-if="row.publishStatus == 1"
            type="primary"
            :underline="false"
            icon="el-icon-tickets"
            @click="openHistory(row)"
          >
            历史版本
          </el-link>

          <el-popconfirm
            v-if="row.publishStatus != 1"
            class="ele-action"
            title="确定要删除此条数据吗？"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>

        <template v-slot:code="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="addPermit(row, 'detail', '记录规则详情')"
            >{{ row.code }}</el-link
          >
        </template>
      </ele-pro-table>
    </el-card>
    <permitAdd ref="permitAddRef" @reload="reload" />
    <historyModal ref="historyModalRef" />
  </div>
</template>

<script>
  import search from './components/search.vue';
  import permitAdd from './components/permitAdd.vue';
  import {
    recordrulesPage,
    recordrulesDeletes,
    recordrulesPublish,
    recordrulesRevokePublish
  } from '@/api/recordrules/index';
  import tabMixins from '@/mixins/tableColumnsMixin';
  import dictMixins from '@/mixins/dictMixins';
  import historyModal from './components/historyModal.vue';

  export default {
    components: { search, permitAdd, historyModal },
    mixins: [tabMixins, dictMixins],
    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: 'classify',
            label: '记录规则分类',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return this.getDictValue('记录规则类型', row.classify);
            }
          },
          {
            prop: 'reportWorkType',
            label: '模块分类',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (row) => {
              return this.getDictValue('记录规则报工类型', row.reportWorkType);
            }
          },
          {
            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: 'right'
          }
        ];
      }
    },
    data() {
      return {
        loading: false,
        cacheKeyUrl: 'maindata-25922-recordrules-index'
      };
    },
    created() {
      this.requestDict('记录规则类型');
      this.requestDict('规则周期');
    },
    methods: {
      addPermit(row, type, title) {
        this.$refs.permitAddRef.open(row, type, title);
      },
      async remove(row) {
        try {
          console.log('row', row);
          await recordrulesDeletes([row.id]);
          this.$message.success('删除成功');
          this.reload();
        } catch (error) {
          this.$message.error('删除失败');
        }
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return recordrulesPage({ pageNum: page, size: limit, ...where });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },
      // 发布
      async publish(row) {
        // 判断时间
        const startDate = new Date(row.startDate);
        const stopDate = new Date(row.stopDate);

        if (startDate >= stopDate) {
          return this.$message.warning('请先修改规则停用时间！');
        }

        try {
          await recordrulesPublish(row.id);
          this.$message.success('发布成功');
          this.reload();
        } catch (error) {
          this.$message.error('发布失败');
        }
      },
      // 撤销
      async recordrulesRevokePublish(row) {
        try {
          await recordrulesRevokePublish(row.id);
          this.$message.success('撤销成功');
          this.reload();
        } catch (error) {
          this.$message.error('撤销失败');
        }
      },
      // 历史版本
      openHistory(row) {
        this.$refs.historyModalRef.open(row.id);
      }
    }
  };
</script>