新增数据质量报告页面

src/views/dataQuality/dataSheet/task/qualityReport/data.ts

 import { BasicColumn, FormSchema } from '@/components/Table';
 import { DescItem } from '@/components/Description';
+import { c } from 'node_modules/vite/dist/node/types.d-aGj9QkWt';
 
 export const columns: BasicColumn[] = [
   {
@@ -95,41 +96,58 @@ export const modEditColumns: BasicColumn[] = [
 ];
 export const ruleSchema: FormSchema[] = [
   {
-    field: 'type',
-    label: '过滤类型',
-    component: 'RadioGroup',
-    colProps: { lg: 22 },
+    field: 'path',
+    label: '路径',
+    component: 'TreeSelect',
     componentProps: {
-      options: [
-        { label: '黑名单', value: '0' },
-        { label: '白名单', value: '1' },
+      treeData: [
+        {
+          label: 'system',
+          value: 'system',
+          children: [
+            { label: 'discover2', value: 'discover2' },
+            { label: 'tmp', value: 'tmp' },
           ],
         },
-    defaultValue: '0',
-    required: true,
+        { label: 'discover', value: 'discover' },
+      ],
     },
-  {
-    field: 'baseRule',
-    label: '库规则',
-    component: 'InputTextArea',
-    colProps: { lg: 22 },
+    colProps: { lg: 24 },
     defaultValue: 'system|discover|tmp',
     required: true,
   },
   {
-    field: 'tableRule',
-    label: '表规则',
-    component: 'InputTextArea',
-    colProps: { lg: 22 },
-    defaultValue:
-      'tdt_,TDT_VIEW,baymax_tmp_,TDT_ROCK_VIEW_,TDT_ROCK_TABLE_,TDTTABLEEXTERNAL,TDTTABLE_PERSISTENT',
+    field: 'fileName',
+    label: '文件名称',
+    component: 'Input',
+    colProps: { lg: 24 },
+    componentProps: {},
+    defaultValue: '白名单test',
     required: true,
   },
   {
-    field: 'rule',
-    label: '规则检验',
+    field: 'description',
+    label: '描述',
     component: 'Input',
-    colProps: { lg: 22 },
+    colProps: { lg: 24 },
+  },
+  {
+    field: 'fileType',
+    label: '文件类型',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    colProps: { lg: 24 },
+    defaultValue: '质量白名单',
+  },
+  {
+    field: 'tableName',
+    label: '名单存储表名',
+    component: 'Input',
+    componentProps: {},
+    colProps: { lg: 24 },
+    required: true,
   },
 ];
 export const detailHookColumns: BasicColumn[] = [

src/views/dataQuality/dataSheet/task/qualityReport/detailModal.vue

@@ -6,15 +6,22 @@
     :title="title"
     @ok="handleSubmit"
   >
-    <Description size="middle" :bordered="false" title="Hook插件" />
+    <BasicForm @register="registerForm" />
+    <Description size="middle" :bordered="false" title="问题数据示例" />
     <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleAddWhite" v-if="isWhite"
+          >添加问题数据到白名单</a-button
+        >
+        <a-button type="primary" @click="reload">设置问题规则</a-button>
+      </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'status'">
           <Tag color="success" v-if="record.status === '1'">up</Tag>
         </template>
       </template>
     </BasicTable>
-    <Description
+    <!-- <Description
       size="middle"
       :bordered="false"
       title="Kafka服务"
@@ -22,18 +29,22 @@
       :data="refundData"
       :schema="refundSchema"
     />
-    <BasicTable @register="registerKafkaTable" />
+    <BasicTable @register="registerKafkaTable" /> -->
   </BasicModal>
+  <whiteListModal @register="registerWhiteListModal" />
 </template>
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue';
-  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicModal, useModalInner, useModal } from '@/components/Modal';
   import { useMessage } from '@/hooks/web/useMessage';
   import { BasicTable, useTable } from '@/components/Table';
   import Description from '@/components/Description/src/Description.vue';
   import { detailHookColumns, KafkaColumns, refundSchema } from './data';
-  import { detailHookData, KafkaData, refundData } from './kinshipOperationsData';
+  import { detailHookData, KafkaData, detailModalSchema } from './kinshipOperationsData';
   import { Tag } from 'ant-design-vue';
+  import { useForm, BasicForm } from '@/components/Form';
+  import { downloadByData } from '@/utils/file/download';
+  import whiteListModal from './modEditModal.vue';
 
   defineOptions({ name: 'KnowledgeModal' });
 
@@ -41,9 +52,14 @@
   const { createMessage } = useMessage();
   const title = ref();
   const tableData = ref([]);
+  const isWhite = ref(true);
+  const [
+    registerWhiteListModal,
+    { setModalProps: setWhiteListModalProps, openModal: openWhiteListModal },
+  ] = useModal();
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
   //初始化表单
-  const [registerTable, { reload }] = useTable({
+  const [registerTable, { reload, getForm, getRowSelection }] = useTable({
     api: async () => {
       const response = {
         pageNum: '1',
@@ -66,6 +82,10 @@
     bordered: false,
     showIndexColumn: false,
     scroll: { y: 300 },
+    rowSelection: {
+      type: 'checkbox',
+    },
+
     actionColumn: {
       width: '120px',
       title: '操作',
@@ -86,9 +106,19 @@
     showIndexColumn: false,
     scroll: { y: 300 },
   });
+  const [registerForm] = useForm({
+    labelWidth: 100,
+    schemas: detailModalSchema,
+    showActionButtonGroup: false,
+    actionColOptions: { span: 24 },
+  });
   async function handleSubmit() {
     closeModal();
   }
+  /**添加数据到白名单按钮*/
+  function handleAddWhite() {
+    openWhiteListModal(true, {});
+  }
   onMounted(() => {
     tableData.value = detailHookData;
   });

src/views/dataQuality/dataSheet/task/qualityReport/index.vue

@@ -5,6 +5,12 @@
     fixedHeight
     contentClass="flex flex-col overflow-y-auto h-screen"
   >
+    <div class="flex flex-row justify-end mb-3">
+      <a-button type="primary" @click="handleExport" class="w-1/10 xl:w-1/10"
+        >导出问题数据</a-button
+      >
+      <a-button type="primary" @click="handleExport" class="w-1/10 xl:w-1/10">导出报告</a-button>
+    </div>
     <BasicForm @register="registerForm" class="h-1/5 xl:h-1/5" />
     <div class="h-1/5 xl:h-1/5">图表占位1</div>
     <div class="h-2/5 xl:h-2/5" contentClass="flex flex-row"
@@ -13,9 +19,7 @@
     </div>
     <div class="h-1/5 xl:h-1/5 height-100">
       <BasicTable @register="registerTableRight" :searchInfo="searchInfo" class="height-100">
-        <template #toolbar>
-          <a-button type="primary" @click="refresh">刷新</a-button>
-        </template>
+        <template #toolbar> </template>
         <template #bodyCell="{ column, record }">
           <!-- <template v-if="column.key === 'status'">
             <Tag color="error" v-if="record.status === '0'">失败</Tag>
@@ -37,7 +41,7 @@
                   label: '',
                   onClick: handleDetail.bind(null),
                   tooltip: '查看详情',
-                  ifShow: record.result !== '通过',
+                  ifShow: record.status === '0',
                 },
                 // {
                 //   icon: 'clarity:link-line',
@@ -56,6 +60,7 @@
       </BasicTable>
     </div>
   </PageWrapper>
+  <detail-modal @register="registerDetailModal" />
 </template>
 <script lang="ts" setup>
   import { reactive } from 'vue';
@@ -72,6 +77,8 @@
   import detailModal from './detailModal.vue';
   import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
   import { formSchema } from '../mainBody.data';
+  import { getRoleListByPage, deleteById, exportRoleList } from '@/api/system/role/role';
+  import { downloadByData } from '@/utils/file/download';
 
   defineOptions({ name: 'KnowledgeBase' });
   const state = reactive({
@@ -103,7 +110,7 @@
   //   //   dataIndex: 'action',
   //   // },
   // });
-  const [registerTableRight, { reload: reloadRight }] = useTable({
+  const [registerTableRight, { reload: reloadRight, getForm }] = useTable({
     dataSource: DataRight,
     title: '规则清单',
     striped: false,
@@ -149,7 +156,14 @@
   }
   function handleDetail() {
     openDetailModal(true, {
-      title: '血缘插件详情',
+      title: '问题规则',
     });
   }
+  //导出报告
+  async function handleExport() {
+    console.log('导出----');
+    const params = Object.assign({}, getForm().getFieldsValue());
+    const data = await exportRoleList(params);
+    downloadByData(data, '报告' + '.xlsx');
+  }
 </script>

src/views/dataQuality/dataSheet/task/qualityReport/kinshipOperationsData.ts

@@ -256,3 +256,213 @@ export const formSchemaRight: any[] = [
     },
   },
 ];
+export const detailModalSchema: any[] = [
+  {
+    field: 'source',
+    component: 'Input',
+    label: '数据库:',
+    componentProps: {
+      disabled: true,
+      placeholder: 'mob_data',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'dataTable',
+    component: 'Input',
+    label: '数据表/主体:',
+    componentProps: {
+      disabled: true,
+      placeholder: 'menber_relationship_info',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'field',
+    component: 'Input',
+    label: '字段:',
+    componentProps: {
+      disabled: true,
+      placeholder: 'menber_identity',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'ruleName',
+    component: 'Input',
+    label: '规则名称:',
+    componentProps: {
+      disabled: true,
+      placeholder: 'menber_identity公民身份号码',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'ruleType',
+    component: 'Input',
+    label: '规则类型:',
+    componentProps: {
+      disabled: true,
+      placeholder: 'menber_identity公民身份号码',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'problemCount',
+    component: 'Input',
+    label: '问题记录数:',
+    componentProps: {
+      disabled: true,
+      placeholder: '16723',
+      style: { width: '100%' },
+      colProps: {
+        lg: 24,
+        md: 24,
+      },
+    },
+  },
+  {
+    field: 'reportDimension',
+    component: 'Input',
+    label: '报告维度:',
+    componentProps: {
+      disabled: true,
+      placeholder: '',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'ruleDesc',
+    component: 'Input',
+    label: '规则描述:',
+    componentProps: {
+      disabled: true,
+      placeholder: '',
+      style: { width: '100%' },
+    },
+  },
+];
+export const whiteListData: any[] = [
+  {
+    field: 'requestTitle',
+    component: 'Input',
+    label: '申请标题',
+    componentProps: {
+      required: true,
+      placeholder: '',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'requestReason',
+    component: 'Input',
+    label: '申请理由',
+    componentProps: {
+      required: true,
+      placeholder: '',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'requester',
+    component: 'Input',
+    label: '申请人',
+    componentProps: {
+      // required: true,
+      disabled: true,
+      placeholder: 'admin',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'requesterOrg',
+    component: 'Input',
+    label: '申请人组织',
+    componentProps: {
+      // required: true,
+      disabled: true,
+      placeholder: '-',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'whiteList',
+    component: 'Select',
+    label: '白名单',
+    componentProps: {
+      required: true,
+      // disabled: true,
+      placeholder: '-',
+      style: { width: '100%' },
+      options: [
+        {
+          label: 'tyh',
+          value: 'tyh',
+        },
+        {
+          label: 'tyh2',
+          value: 'tyh2',
+        },
+      ],
+    },
+  },
+  {
+    field: 'LinkSubject',
+    component: 'Input',
+    label: '名单关联主体',
+    componentProps: {
+      // required: true,
+      disabled: true,
+      placeholder: '/质量主体/共享工作区/tyh',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'SourceInfo',
+    component: 'Input',
+    label: '来源信息',
+    componentProps: {
+      // required: true,
+      disabled: true,
+      placeholder: '',
+      style: { width: '100%' },
+      colProps: {
+        lg: 24,
+        md: 24,
+      },
+    },
+  },
+  {
+    field: 'QualityTask',
+    component: 'Input',
+    label: '质量任务',
+    componentProps: {
+      // required: true,
+      disabled: true,
+      placeholder: 'tyh',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'QualityRule',
+    component: 'Input',
+    label: '质量规则',
+    componentProps: {
+      // required: true,
+      disabled: true,
+      placeholder: 'tyh-1',
+      style: { width: '100%' },
+    },
+  },
+  {
+    field: 'TaskBatch',
+    component: 'Input',
+    label: '任务批次',
+    componentProps: {
+      // required: true,
+      disabled: true,
+      placeholder: '2023-08-16 14:30:00 ~ 2023-08-17 14:30:00',
+      style: { width: '100%' },
+    },
+  },
+];

src/views/dataQuality/dataSheet/task/qualityReport/modEditModal.vue

@@ -6,13 +6,10 @@
     :title="title"
     @ok="handleSubmit"
   >
-    <Alert
-      show-icon
-      message="维护血缘插件与数据连接的映射关系，标识插件中的血缘在以下连接所关联的数据源中展示。"
-    />
+    <BasicForm @register="registerForm" />
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleDeleteIds">新增映射</a-button>
+        <a-button type="primary" @click="handleNewWhiteFast">快速创建白名单</a-button>
       </template>
       <template #bodyCell="{ column }">
         <template v-if="column.key === 'action'">
@@ -34,22 +31,34 @@
       </template>
     </BasicTable>
   </BasicModal>
+  <new-white-list-fast-modal @register="registerNewWhiteListFastModal" />
 </template>
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue';
-  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicModal, useModalInner, useModal } from '@/components/Modal';
   import { useMessage } from '@/hooks/web/useMessage';
   import { BasicTable, TableAction, useTable } from '@/components/Table';
+  import { BasicForm, useForm } from '@/components/Form';
   import { Alert } from 'ant-design-vue';
   import { modEditColumns } from './data';
-  import { modEditData } from './kinshipOperationsData';
+  import { modEditData, whiteListData } from './kinshipOperationsData';
+  import newWhiteListFastModal from './newWhiteListFastModal.vue';
 
   defineOptions({ name: 'KnowledgeModal' });
 
   const emit = defineEmits(['success', 'register']);
   const { createMessage } = useMessage();
-  const title = ref();
+  const title = '申请更新白名单';
+  const isNew = ref(true);
   const tableData = ref([]);
+  const [registerNewWhiteListFastModal, { openModal: openNewWhiteFastModal }] = useModal();
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    baseColProps: { lg: 12, md: 24 },
+    schemas: whiteListData,
+    showActionButtonGroup: false,
+    actionColOptions: {},
+    labelWidth: 150,
+  });
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
   //初始化表单
   const [registerTable, { reload }] = useTable({
@@ -84,16 +93,16 @@
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     await reload();
     setModalProps({ confirmLoading: false });
-    title.value = data.title;
+    // title.value = data.title;
   });
 
   async function handleSubmit() {
     closeModal();
     createMessage.success('提交成功');
   }
-  /** 批量删除按钮*/
-  function handleDeleteIds() {
-    createMessage.success('刷新成功!');
+  /** 快速新建白名单弹窗按钮*/
+  function handleNewWhiteFast() {
+    openNewWhiteFastModal();
   }
   /** 删除按钮*/
   function handleDelete() {

src/views/dataQuality/dataSheet/task/qualityReport/newWhiteListFastModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  // import { recommendData } from '@/views/metadata/metadataData';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { ruleSchema } from './data';
+
+  defineOptions({ name: 'KnowledgeModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const title = ref();
+  const tableData = ref([]);
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: ruleSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+
+  async function handleSubmit() {
+    closeModal();
+    createMessage.success('提交成功');
+    await resetFields();
+  }
+  onMounted(() => {
+    // tableData.value = recommendData;
+  });
+</script>

src/views/dataQuality/dataSheet/task/taskOperation/index.vue

@@ -148,4 +148,11 @@
       title: '血缘插件详情',
     });
   }
+  //导出报告
+  async function handleExport() {
+    console.log('导出----');
+    const params = Object.assign({}, getForm().getFieldsValue());
+    const data = await exportRoleList(params);
+    downloadByData(data, '报告' + '.xlsx');
+  }
 </script>