sensitiveIdentify.vue 11.4 KB
<route lang="yaml">
  name: sensitiveIdentify
</route>

<script lang="ts" setup name="sensitiveIdentify">
import TableTools from "@/components/Tools/table_tools.vue";
import { commonPageConfig } from '@/components/PageNav/index';
import { TableColumnWidth } from "@/utils/enum";
import {
  getSensitiveDataTaskList,
  dataSourceTypeList,
  deleteSensitiveDataTask,
  saveSensitiveDataTask,
  updateSensitiveDataTask,
  getDatabase,
  execSensitiveDataTask,
} from '@/api/modules/dataAnonymization';
import { useValidator } from '@/hooks/useValidator';

const router = useRouter()
const { proxy } = getCurrentInstance() as any;
const { required } = useValidator();

const searchItemList = ref([{
  type: "input",
  label: "",
  field: "taskName",
  default: "",
  placeholder: "任务名称",
  clearable: true,
}, {
  type: "select",
  label: "",
  field: "dataSource",
  default: null,
  options: dataSourceTypeList,
  placeholder: "数据来源",
  clearable: true,
  filterable: true,
}])

/** 分页及搜索传参信息配置。 */
const page = ref({
  ...commonPageConfig,
  taskName: '',
  dataSource: null
});

const currTableData = ref();

const tableInfo = ref({
  id: 'data-file-table',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "任务名称", field: "taskName", width: 170 },
    {
      label: "数据来源", field: "dataSource", width: 100, getName: (scope) => {
        return scope.row.dataSource && dataSourceTypeList.find(f => f.value == scope.row.dataSource)?.label || '--';
      }
    },
    { label: "任务状态", field: "sensitiveIdentifyTaskStatus", width: TableColumnWidth.STATE, align: 'center', type: "tag" },
    { label: "执行人", field: "execUserName", width: 100 },
    { label: "执行时间", field: "execTime", width: 170 },
    { label: "修改人", field: "updateUserName", width: 100 },
    { label: "修改时间", field: "updateTime", width: 170 },
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  loading: false,
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 304,
    fixed: 'right',
    btns: (scope) => {
      return [{
        label: '敏感数据查看', value: 'view', disabled: scope.row.status != 'Y', click: (scope) => {
          router.push({
            name: 'sensitiveIdentifyConfig',
            query: {
              guid: scope.row.guid,
              execGuid: scope.row.execGuid,
              taskName: scope.row.taskName
            }
          });
        }
      }, {
        label: '手动执行', value: 'execute', disabled: scope.row.status == 'R', click: (scope) => {
          execSensitiveDataTask(scope.row.guid).then((res: any) => {
            if (res?.code == proxy.$passCode) {
              getTableData();
              proxy.$ElMessage.success('该任务手动执行提交成功');
            } else {
              proxy.$ElMessage.error(res.msg);
            }
          })
        }
      }, {
        label: "编辑", value: "edit", disabled: scope.row.status == 'R', click: (scope) => {
          let row = scope.row;
          currTableData.value = row;
          newCreateTaskDialogInfo.value.visible = true;
          newCreateTaskDialogInfo.value.title = '编辑数据敏感识别任务';
          newCreateTaskDialogInfo.value.type = 'edit';
          newCreateTaskFormItems.value[0].default = row.taskName;
          newCreateTaskFormItems.value[1].default = row.dataSource;
          newCreateTaskFormItems.value[2].default = row.dataSourceGuid || '';
          newCreateTaskFormItems.value[2].visible = row.dataSource == 1;
          newCreateTaskFormItems.value[3].default = row.filePath || [];
          newCreateTaskFormItems.value[3].visible = row.dataSource == 2;
        }
      }, {
        label: "删除", value: "delete", disabled: scope.row.status == 'R', click: (scope) => {
          proxy.$openMessageBox("此操作将永久删除, 是否继续?", () => {
            let guids = [scope.row.guid];
            deleteSensitiveDataTask(guids).then((res: any) => {
              if (res?.code == proxy.$passCode) {
                getTableData();
                proxy.$ElMessage({
                  type: "success",
                  message: "删除成功",
                });
              } else {
                proxy.$ElMessage({
                  type: "error",
                  message: res.msg,
                });
              }
            });
          })
        }
      }, {
        label: '日志', value: 'log', click: (scope) => {
          router.push({
            name: 'sensitiveIdentifyTaskExecLog',
            query: {
              guid: scope.row.guid,
              name: scope.row.taskName,
            }
          });
        }
      }]
    }
  }
})

const toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    page.value.taskName = '';
    page.value.dataSource = null;
  } else {
    page.value.taskName = val.taskName;
    page.value.dataSource = val.dataSource;
  }
  getTableData();
};

const getTableData = () => {
  tableInfo.value.loading = true
  getSensitiveDataTaskList({
    pageIndex: page.value.curr,
    pageSize: page.value.limit,
    taskName: page.value.taskName,
    dataSource: page.value.dataSource
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      const data = res.data || {};
      tableInfo.value.data = data.records?.map(d => {
        d.sensitiveIdentifyTaskStatus = d.status;
        return d;
      }) || []
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      proxy.$ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
    tableInfo.value.loading = false
  })
};

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  getTableData();
};

const dataSourceList = ref([]);

const newCreateTaskFormItems = ref([{
  label: '任务名称',
  type: 'input',
  placeholder: '请输入',
  field: 'taskName',
  maxlength: 15,
  default: '',
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
},
{
  label: '数据来源',
  type: 'select',
  placeholder: '请选择',
  field: 'dataSource',
  default: 1,
  options: dataSourceTypeList,
  props: {
    label: "label",
    value: "value",
  },
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
}, {
  label: '数据源',
  type: 'select',
  placeholder: '请选择',
  field: 'dataSourceGuid',
  default: '',
  options: dataSourceList.value,
  props: {
    label: 'databaseNameZh',
    value: 'guid'
  },
  filterable: true,
  visible: true,
  required: true
}, {
  label: '文件上传',
  tip: '支持扩展名:xlsx、xls、csv,文件大小不超过10MB',
  type: 'upload-file',
  accept: '.xlsx, .xls, .csv',
  limitSize: 10,
  isExcel: true,
  required: true,
  default: <any>[],
  block: true,
  visible: false,
  field: 'file',
}]);

const newCreateTaskFormRules = ref({
  taskName: [required('请输入任务名称')],
  dataSource: [required('请选择数据来源')],
  dataSourceGuid: [required('请选择数据源')],
  file: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value?.length) {
        callback(new Error('请上传文件'))
      } else {
        callback();
      }
    }, trigger: 'change'
  }]
});

const newCreateTaskDialogInfo = ref({
  visible: false,
  size: 550,
  title: "添加数据敏感识别任务",
  type: "",
  formInfo: {
    id: "label-form",
    items: newCreateTaskFormItems.value,
    rules: newCreateTaskFormRules.value,
  },
  submitBtnLoading: false,
  btns: {
    cancel: () => {
      newCreateTaskDialogInfo.value.visible = false;
      newCreateTaskDialogInfo.value.submitBtnLoading = false;
    },
    submit: (btn, info) => {
      let params = Object.assign({}, info, {
        filePath: info.file?.map(f => {
          return {
            name: f.name,
            url: f.url
          }
        }) || []
      });
      delete params.file;
      newCreateTaskDialogInfo.value.submitBtnLoading = true;
      if (newCreateTaskDialogInfo.value.type == 'add') {
        saveSensitiveDataTask(params).then((res: any) => {
          if (res?.code == proxy.$passCode) {
            proxy.$ElMessage.success('标签新建成功');
            newCreateTaskDialogInfo.value.visible = false;
            newCreateTaskDialogInfo.value.submitBtnLoading = false;
            page.value.curr = 1;
            getTableData();
          } else {
            newCreateTaskDialogInfo.value.submitBtnLoading = false;
            proxy.$ElMessage.error(res.msg);
          }
        });
      } else {
        newCreateTaskDialogInfo.value.submitBtnLoading = true;
        params.guid = currTableData.value.guid;
        updateSensitiveDataTask(params).then((res: any) => {
          if (res?.code == proxy.$passCode) {
            proxy.$ElMessage.success('标签编辑成功');
            newCreateTaskDialogInfo.value.visible = false;
            newCreateTaskDialogInfo.value.submitBtnLoading = false;
            getTableData();
          } else {
            newCreateTaskDialogInfo.value.submitBtnLoading = false;
            proxy.$ElMessage.error(res.msg);
          }
        });
      }
    }
  }
});

const handleTaskSelectChange = (val, row, item) => {
  if (item.field == 'dataSource') {
    newCreateTaskFormItems.value[0].default = row.taskName;
    newCreateTaskFormItems.value[1].default = val;
    newCreateTaskFormItems.value[2].default = row.dataSourceGuid || '';
    newCreateTaskFormItems.value[2].visible = val == 1;
    newCreateTaskFormItems.value[3].default = row.file || [];
    newCreateTaskFormItems.value[3].visible = val == 2;
  }
}

const handleCreate = () => {
  newCreateTaskDialogInfo.value.visible = true;
  newCreateTaskDialogInfo.value.title = '添加数据敏感识别任务';
  newCreateTaskDialogInfo.value.type = 'add';
  newCreateTaskFormItems.value[0].default = '';
  newCreateTaskFormItems.value[1].default = 1;
  newCreateTaskFormItems.value[2].default = '';
  newCreateTaskFormItems.value[2].visible = true;
  newCreateTaskFormItems.value[3].default = [];
  newCreateTaskFormItems.value[3].visible = false;
}

onBeforeMount(() => {
  toSearch({});
  getDatabase({ connectStatus: 1 }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      dataSourceList.value = res.data || [];
      newCreateTaskFormItems.value[2].options = dataSourceList.value;
    } else {
      proxy.$ElMessage({
        type: "error",
        message: res.msg,
      });
    }
  })
})

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <!-- 头部搜索 -->
      <TableTools :searchItems="searchItemList" :searchId="'data-label-search'" @search="toSearch" :init="false" />
      <div class="tools_btns">
        <el-button type="primary" @click="handleCreate">新建</el-button>
      </div>
    </div>
    <div class="table_panel_wrap">
      <!-- 右侧标签管理表格 -->
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
    </div>
    <Dialog_form ref="dialogTaskFormRef" :dialogConfigInfo="newCreateTaskDialogInfo"
      @formDialogSelectChange="handleTaskSelectChange"></Dialog_form>
  </div>
</template>

<style lang="scss" scoped>
.table_tool_wrap {
  width: 100%;
  height: 84px !important;
  padding: 0 8px;

  .tools_btns {
    padding: 0px 0 0;
  }
}

.table_panel_wrap {
  width: 100%;
  height: calc(100% - 84px);
  padding: 0px 8px 0;
}
</style>