kd-aiot-frontend/src/views/system/dataDesensitization/index.vue

<template>
  <div class="container">
    <div class="top-se">
      <seek-page :seekList="seekList" @search="reload"></seek-page>
    </div>

    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      :selection.sync="selectionList"
      row-key="id"
      :page-size="20"
      @columns-change="handleColumnChange"
      :cache-key="cacheKeyUrl"
      height="calc(100vh - 330px)"
      full-height="calc(100vh - 176px)"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="addHandler"
          v-if="$hasPermission('main:team:save')"
        >
          新建
        </el-button>

        <el-button
          size="small"
          type="danger"
          el-icon-delete
          class="ele-btn-icon"
          @click="allDelBtn"
          :disabled="selectionList?.length === 0"
        >
          批量删除
        </el-button>

        <el-button
          type="success"
          class="ele-btn-icon"
          size="small"
          @click="openRules"
        >
          脱敏规则表
        </el-button>
      </template>
      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="editHandler(row.id)"
          v-if="$hasPermission('main:team:update')"
        >
          修改
        </el-link>
        <el-popconfirm
          class="ele-action"
          title="确定要删除此数据吗？"
          @confirm="deleteHandler(row.id)"
          v-if="$hasPermission('main:team:delete')"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>

    <RulesList v-if="rulesVisible" :visible.sync="rulesVisible"></RulesList>

    <AddDesensitizerule
      @success="successHandler"
      v-if="desensitizeruleVisible"
      :visible.sync="desensitizeruleVisible"
      :isUpdate.sync="isUpdate"
      :id="dataId"
    ></AddDesensitizerule>
  </div>
</template>

<script>
  import tabMixins from '@/mixins/tableColumnsMixin';
  import {
    datadesensitizerulePage,
    deleteDatadesensitizerule
  } from '@/api/system/dataDesensitization';
  import RulesList from './components/RulesList';
  import AddDesensitizerule from './components/AddDesensitizerule';
  export default {
    mixins: [tabMixins],
    components: {
      RulesList,
      AddDesensitizerule
    },
    data() {
      return {
        selectionList: [],
        rulesVisible: false,
        desensitizeruleVisible: false,
        isUpdate: false,
        dataId: '',
        cacheKeyUrl: 'mainData-system-dataDesensitization'
      };
    },
    computed: {
      columns() {
        let arr = [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            fixed: 'left',
            reserveSelection: true
          },
          {
            width: 55,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'moduleName',
            label: '脱敏页面',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'functionName',
            label: '脱敏名称',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'requestUri',
            label: '请求接口',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 220,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ];
        return arr;
      },
      seekList() {
        return [
          {
            label: '脱敏页面：',
            value: 'moduleName',
            type: 'input',
            placeholder: ''
          },
          {
            label: '脱敏名称：',
            value: 'functionName',
            type: 'input',
            placeholder: ''
          },

          {
            label: '请求接口：',
            value: 'requestUri',
            type: 'input',
            placeholder: ''
          }
        ];
      }
    },
    methods: {
      async datasource({ page, limit, where, order }) {
        let res = await datadesensitizerulePage({
          ...where,
          pageNum: page,
          size: limit
        });
        return res;
      },
      addHandler() {
        this.desensitizeruleVisible = true;
      },
      editHandler(id) {
        this.dataId = id;
        this.isUpdate = true;
        this.desensitizeruleVisible = true;
      },
      async deleteHandler(id) {
        await deleteDatadesensitizerule([id]);
        this.reload();
      },
      search() {},

      async allDelBtn() {
        if (!this.selectionList.length) return;
        let ids = this.selectionList.map((item) => item.id);
        await deleteDatadesensitizerule(ids);
        this.selection = [];
        this.reload();
      },

      openRules() {
        this.rulesVisible = true;
      },
      successHandler() {
        this.reload();
      },
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
  }

  .top-se {
    background-color: #fff;
    padding: 20px;
    height: 100px;
  }
</style>