脱敏规则

src/api/system/dataDesensitization/index.js

@@ -0,0 +1,91 @@
+import request from '@/utils/request';
+
+//新增脱敏规则
+export async function saveDatadesensitizetype(data) {
+  const res = await request.post('/sys/datadesensitizetype/save', data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+//修改脱敏规则
+export async function updateDatadesensitizetype(data) {
+  const res = await request.put('/sys/datadesensitizetype/update', data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+//删除脱敏规则
+export async function deleteDatadesensitizetype(data) {
+  const res = await request.delete('/sys/datadesensitizetype/delete', { data });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+//脱敏规则详情
+export async function detailDatadesensitizetype(id) {
+  const res = await request.get(`/sys/datadesensitizetype/getById/${id}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+//脱敏规则分页
+export async function pageDatadesensitizetype(params) {
+  const res = await request.get(`/sys/datadesensitizetype/page`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+//新增数据脱敏
+export async function saveDatadesensitizerule(data) {
+  const res = await request.post('/sys/datadesensitizerule/save', data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+//修改数据脱敏
+export async function updateDatadesensitizerule(data) {
+  const res = await request.put('/sys/datadesensitizerule/update', data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+//删除数据脱敏
+export async function deleteDatadesensitizerule(id, f) {
+  const res = await request.delete('/sys/datadesensitizerule/delete', data);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+//数据脱敏详情
+export async function detailDatadesensitizerule(id) {
+  const res = await request.get(`/sys/datadesensitizerule/getById/${id}`);
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+//数据脱敏分页
+export async function datadesensitizerulePage(params) {
+  const res = await request.get(`/sys/datadesensitizerule/page`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/system/dataDesensitization/components/AddRules.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="container">
+    <!-- 单据弹窗 -->
+    <ele-modal
+      append-to-body
+      :title="title"
+      :before-close="handleClose"
+      custom-class="ele-dialog-form long-dialog-form"
+      :visible.sync="visible"
+      :close-on-click-modal="false"
+      :maxable="true"
+      :resizable="true"
+      width="50%"
+    >
+      <el-form
+        label-width="100px"
+        ref="form"
+        :model="form"
+        :rules="rules"
+        style="margin-top: 30px; padding-right: 20px"
+      >
+        <el-form-item label="规则名称" prop="dataName">
+          <el-input placeholder="请输入" v-model="form.dataName"></el-input>
+        </el-form-item>
+
+        <el-form-item label="保留前几位" prop="prefixKeep">
+          <el-input placeholder="请输入" v-model="form.prefixKeep"></el-input>
+        </el-form-item>
+
+        <el-form-item label="替换字符" prop="replaceChar">
+          <el-input
+            placeholder="请输入"
+            v-model="form.replaceChar"
+            maxlength="1"
+            show-word-limit
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="保留后几位" prop="suffixKeep">
+          <el-input placeholder="请输入" v-model="form.suffixKeep"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleClose">关 闭</el-button>
+        <el-button size="small" @click="sumbit" type="primary" v-click-once
+          >确 认</el-button
+        >
+      </div>
+    </ele-modal>
+  </div>
+</template>
+<script>
+  import dictMixins from '@/mixins/dictMixins';
+  import { copyObj } from '@/utils/util';
+  import { deepClone } from '@/utils/index';
+  // import fileMain from '@/components/upload/fileUpload';
+
+  import {
+    saveDatadesensitizetype,
+    detailDatadesensitizetype,
+    updateDatadesensitizetype
+  } from '@/api/system/dataDesensitization';
+
+  export default {
+    mixins: [dictMixins],
+    components: {
+      // fileUpload
+    },
+    props: {
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      isUpdate: {
+        type: Boolean,
+        default: false
+      },
+      id: {
+        type: String,
+        default: () => ''
+      }
+    },
+    data() {
+      return {
+        ruleId: '',
+        title: '',
+        form: {
+          dataName: '',
+          prefixKeep: 0,
+          replaceChar: '*',
+          suffixKeep: 0
+        },
+        rules: {
+          dataName: [
+            { required: true, message: '请输入规则名称', trigger: 'blur' }
+          ],
+          prefixKeep: [
+            { required: true, message: '请输入保留位数', trigger: 'blur' }
+          ],
+          suffixKeep: [
+            { required: true, message: '请输入保留位数', trigger: 'blur' }
+          ]
+        },
+
+        // 提交状态
+        loading: false
+        // 是否是修改
+      };
+    },
+    created() {
+      this.init();
+    },
+    methods: {
+      async init() {
+        this.title = this.isUpdate ? '修改' : '新增';
+        if (this.isUpdate) {
+          this.ruleId = this.id;
+          const res = await detailDatadesensitizetype(this.ruleId);
+          console.log(res);
+          this.form.dataName = res.dataName;
+          this.form.prefixKeep = res.prefixKeep;
+          this.form.replaceChar = res.replaceChar;
+          this.form.suffixKeep = res.suffixKeep;
+        }
+      },
+
+      //表单验证
+      getValidate() {
+        return new Promise((resolve, reject) => {
+          this.$refs.form.validate((valid) => {
+            if (!valid) {
+              reject(false);
+            } else {
+              resolve(true);
+            }
+          });
+        });
+      },
+
+      //保存
+      async sumbit() {
+        this.loading = true;
+        let valid;
+        try {
+          const res = await this.getValidate();
+          valid = res;
+        } catch (error) {
+          valid = error;
+        }
+        if (!valid) return;
+
+        if (!this.isUpdate) {
+          try {
+            await saveDatadesensitizetype(this.form);
+            this.$message.success('新增成功');
+            this.cancel();
+          } catch (error) {}
+        } else {
+          try {
+            const params = Object.assign({}, this.form, { id: this.ruleId });
+            console.log(params);
+            await updateDatadesensitizetype(params);
+            this.$message.success('修改成功');
+            this.cancel();
+          } catch (error) {}
+        }
+      },
+      cancel() {
+        this.$emit('success');
+        this.$emit('update:id', '');
+        this.$emit('update:isUpdate', false);
+        this.$emit('update:visible', false);
+      },
+      handleClose() {
+        this.cancel();
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  //   .container {
+  //     padding: 10px 0;
+  //   }
+</style>

src/views/system/dataDesensitization/components/RulesList.vue

@@ -0,0 +1,246 @@
+<template>
+  <div>
+    <ele-modal
+      title="规则列表"
+      :visible.sync="visible"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      width="70%"
+      :maxable="true"
+      :resizable="true"
+    >
+      <el-card shadow="never">
+        <ele-pro-table
+          ref="table"
+          :columns="columns"
+          :datasource="datasource"
+          row-key="id"
+          :selection.sync="selection"
+          height="calc(100vh - 350px)"
+          class="dict-table"
+        >
+          <!-- 表头工具栏 -->
+          <template v-slot:toolbar>
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-plus"
+              class="ele-btn-icon"
+              @click="addRules"
+            >
+              新建
+            </el-button>
+            <el-button
+              size="small"
+              type="danger"
+              el-icon-delete
+              class="ele-btn-icon"
+              @click="allDelBtn"
+              :disabled="selection?.length === 0"
+            >
+              批量删除
+            </el-button>
+          </template>
+
+          <!-- 操作列 -->
+          <template v-slot:action="{ row }">
+            <el-link
+              type="primary"
+              :underline="false"
+              icon="el-icon-edit"
+              @click="editRules(row.id)"
+            >
+              修改
+            </el-link>
+
+            <el-popconfirm
+              class="ele-action"
+              title="确定要删除此信息吗？"
+              @confirm="remove(row.id)"
+            >
+              <template v-slot:reference>
+                <el-link type="danger" :underline="false" icon="el-icon-delete">
+                  删除
+                </el-link>
+              </template>
+            </el-popconfirm>
+          </template>
+        </ele-pro-table>
+      </el-card>
+    </ele-modal>
+
+    <AddRules
+      @success="successHandler"
+      v-if="rulesVisible"
+      :visible.sync="rulesVisible"
+      :isUpdate.sync="isUpdate"
+      :id="ruleId"
+    ></AddRules>
+  </div>
+</template>
+
+<script>
+  import AddRules from './AddRules.vue';
+  import {
+    pageDatadesensitizetype,
+    deleteDatadesensitizetype
+  } from '@/api/system/dataDesensitization';
+  export default {
+    name: 'RulesList',
+    components: {
+      AddRules
+    },
+    props: {
+      visible: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        selection: [],
+        rulesVisible: false,
+        isUpdate: false,
+        ruleId: ''
+      };
+    },
+    methods: {
+      //批量删除
+      async allDelBtn() {
+        if (this.selection?.length === 0) return;
+        let ids = this.selection.map((item) => item.id);
+        console.log(this.selection);
+        console.log(ids);
+        await deleteDatadesensitizetype(ids);
+        this.selection = [];
+        this.reload();
+      },
+      async remove(id) {
+        await deleteDatadesensitizetype([id]);
+        this.reload();
+      },
+      async datasource({ page, limit, where, order }) {
+        let res = await pageDatadesensitizetype({
+          pageNum: page,
+          size: limit,
+          ...where
+        });
+        return res;
+      },
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where: where });
+      },
+      handleClose() {
+        this.$emit('update:visible', false);
+      },
+      successHandler() {
+        this.reload();
+      },
+      addRules() {
+        this.rulesVisible = true;
+      },
+      editRules(id) {
+        this.ruleId = id;
+        this.isUpdate = true;
+        this.rulesVisible = true;
+      }
+    },
+    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: 'dataName',
+            label: '规则名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'prefixKeep',
+            label: '保留前几位',
+            align: 'center',
+            width: 100,
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'replaceChar',
+            label: '替换字符',
+            align: 'center',
+            width: 100,
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'suffixKeep',
+            label: '保留后几位',
+            align: 'center',
+            width: 100,
+            showOverflowTooltip: true
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 220,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true,
+            fixed: 'right'
+          }
+        ];
+        return arr;
+      }
+    },
+    created() {
+      console.log('created');
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .tree_col {
+    border: 1px solid #eee;
+    padding: 10px 0;
+    box-sizing: border-box;
+    height: 500px;
+    overflow: auto;
+  }
+
+  .table_col {
+    padding-left: 10px;
+
+    ::v-deep .el-table th.el-table__cell {
+      background: #f2f2f2;
+    }
+  }
+
+  .pagination {
+    text-align: right;
+    padding: 10px 0;
+  }
+
+  .btns {
+    text-align: center;
+    padding: 10px 0;
+  }
+
+  .topsearch {
+    margin-bottom: 15px;
+  }
+</style>

src/views/system/dataDesensitization/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="container">
+    <ele-pro-table
+      style="height: 100%"
+      ref="table"
+      :columns="columns"
+      :datasource="datasource"
+      :selection.sync="selection"
+      row-key="id"
+      :page-size="20"
+      @columns-change="handleColumnChange"
+      :cache-key="cacheKeyUrl"
+      height="calc(100% - 100px)"
+    >
+      <!-- 表头工具栏 -->
+      <template v-slot:toolbar>
+        <el-button
+          size="small"
+          type="primary"
+          icon="el-icon-plus"
+          class="ele-btn-icon"
+          @click="addEditHandler('add')"
+          v-if="$hasPermission('main:team:save')"
+        >
+          新建
+        </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="addEditHandler('edit', row)"
+          v-if="$hasPermission('main:team:update')"
+        >
+          修改
+        </el-link>
+        <el-popconfirm
+          class="ele-action"
+          title="确定要删除此角色吗？"
+          @confirm="remove(row)"
+          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
+      v-if="desensitizeruleVisible"
+      :visible.sync="desensitizeruleVisible"
+    ></AddDesensitizerule>
+  </div>
+</template>
+
+<script>
+  import tabMixins from '@/mixins/tableColumnsMixin';
+  import { datadesensitizerulePage } from '@/api/system/dataDesensitization';
+  import RulesList from './components/RulesList';
+  import AddDesensitizerule from './components/AddDesensitizerule';
+  export default {
+    mixins: [tabMixins],
+    components: {
+      RulesList,
+      AddDesensitizerule
+    },
+    data() {
+      return {
+        rulesVisible: false,
+        desensitizeruleVisible: false,
+        selection: [],
+        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: 'functionName',
+            label: '功能名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'moduleName',
+            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;
+      }
+    },
+    methods: {
+      async datasource({ page, limit, where, order }) {
+        let res = await datadesensitizerulePage({
+          ...where,
+          pageNum: page,
+          size: limit
+        });
+        return res;
+      },
+      addEditHandler() {
+        this.desensitizeruleVisible = true;
+      },
+      openRules() {
+        this.rulesVisible = true;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    width: 100%;
+    height: 100%;
+  }
+</style>