批量创建

src/views/dataQuality/rule/rule.data.ts

@@ -4,47 +4,47 @@ export const ruleTable: BasicColumn[] = [
   {
     title: '质量规则',
     dataIndex: 'rule',
-    width:  88,
+    width:  120,
   },
   {
     title: '数据源',
     dataIndex: 'dataSouce',
-    width:  88,
+    width:  120,
   },
   {
     title: '目录',
     dataIndex: 'catalog',
-    width:  88,
+    width:  120,
   },
   {
     title: '数据库',
     dataIndex: 'database',
-    width:  88,
+    width:  120,
   },
   {
     title: '数据表/主体',
     dataIndex: 'dataTable',
-    width:  88,
+    width:  120,
   },
   {
     title: '字段',
     dataIndex: 'field',
-    width:  88,
+    width:  120,
   },
   {
     title: '质量模板',
     dataIndex: 'model',
-    width:  88,
+    width:  120,
   },
   {
     title: '规则组',
     dataIndex: 'group',
-    width:  88,
+    width:  120,
   },
   {
     title: '质量维度',
     dataIndex: 'dimension',
-    width:  88,
+    width:  120,
   },
 ];
 export const ruleModelFormSchema: any[] = [
@@ -146,3 +146,60 @@ export const taskColumn: BasicColumn[] = [
     width: 120,
   },
 ];
+export const rulePreviewFormSchema: any[] = [
+  {
+    field: 'ruleName',
+    component: 'Input',
+    componentProps: {
+      placeholder: '搜索规则',
+    },
+    colProps: { lg: 8, md: 8 },
+  },
+];
+export const rulePreviewColumns = [
+  {
+    title: '质量规则',
+    dataIndex: 'ruleName',
+    width: 100,
+  },
+  {
+    title: '数据源',
+    dataIndex: 'dataSource',
+    width: 100,
+  },
+  {
+    title: '目录',
+    dataIndex: 'catalog',
+    width: 100,
+  },
+  {
+    title: '数据库',
+    dataIndex: 'database',
+    width: 100,
+  },
+  {
+    title: '数据表',
+    dataIndex: 'dataTable',
+    width: 100,
+  },
+  {
+    title: '字段',
+    dataIndex: 'field',
+    width: 100,
+  },
+  {
+    title: '质量模板',
+    dataIndex: 'model',
+    width: 100,
+  },
+  {
+    title: '规则组',
+    dataIndex: 'ruleGroup',
+    width: 100,
+  },
+  {
+    title: '参数',
+    dataIndex: 'config',
+    width: 100,
+  },
+];

src/views/dataQuality/rule/ruleData.ts

@@ -77,4 +77,97 @@ export const configData: any[] = [
   },
 ];
 export const taskData: any[] = null;
-
+export const ruleMoreAddData: any[] = [
+  {
+    title: '数据库对象资源',
+    key: '0-0',
+    children: [
+      { title: 'ArgoDB_Dev01', key: '0-0-0', icon: 'ant-design:table-outlined',
+        children: [
+          { title: '表', key: '0-0-0-0', icon: 'ant-design:table-outlined',
+            children: [
+              { title: 'city', key: '0-0-0-0-0', icon: 'ant-design:table-outlined',
+                children: [
+                  { title: 'id', key: '0-0-0-0-0-0', icon: 'ant-design:insert-row-left-outlined' },
+                  { title: 'coumtry', key: '0-0-0-0-0-1', icon: 'ant-design:insert-row-left-outlined' },
+                  { title: 'brief', key: '0-0-0-0-0-2', icon: 'ant-design:insert-row-left-outlined' },
+                  { title: 'NumOfCities', key: '0-0-0-0-0-3', icon: 'ant-design:insert-row-left-outlined' },
+                  { title: 'capital', key: '0-0-0-0-0-4', icon: 'ant-design:insert-row-left-outlined' },
+                ],
+              },
+              { title: 'mysql_ince_dm0', key: '0-0-0-0-1', icon: 'ant-design:table-outlined',
+                children: [],
+              },
+              { title: 'mysql_ince_dm1', key: '0-0-0-0-2', icon: 'ant-design:table-outlined',
+                children: [],
+              },
+              { title: 'mysql_ince_dm10', key: '0-0-0-0-3', icon: 'ant-design:table-outlined',
+                children: [],
+              },
+              { title: 'mysql_ince_dm100', key: '0-0-0-0-4', icon: 'ant-design:table-outlined',
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+      { title: 'ArgoDB_Gov01', key: '0-0-1', icon: 'ant-design:table-outlined', },
+      { title: 'ArgoDB_Sev01', key: '0-0-2', icon: 'ant-design:table-outlined', },
+      { title: 'MySQL_Public', key: '0-0-3', icon: 'ant-design:table-outlined', },
+    ],
+  },
+];
+export const modelList: any[] = [
+  {
+    name: '长度检查[0,30]',
+  },
+  {
+    name: '关键字检查（非空）',
+  },
+];
+export const ruleMoreData = [
+  {
+    ruleName: 'id关键字检查(.．',
+    dataSource: '014mysql',
+    catalog: '',
+    database: 'bc_test',
+    dataTable: 'city',
+    field: 'id',
+    model: '关键字检查(非空)',
+    ruleGroup: '测试',
+    config: 'table_a = city,co...',
+  },
+  {
+    ruleName: 'country长度..',
+    dataSource: '014mysql',
+    catalog: '',
+    database: 'bc_test',
+    dataTable: 'city',
+    field: 'country',
+    model: '长度检查[0,30]',
+    ruleGroup: '测试',
+    config: 'table_a = city,co...',
+  },
+  {
+    ruleName: '目id长度检查[0...',
+    dataSource: '014mysql',
+    catalog: '',
+    database: 'bc_test',
+    dataTable: 'city',
+    field: 'id',
+    model: '长度检查[0,30]',
+    ruleGroup: '测试',
+    config: 'table_a = city,co...',
+  },
+  {
+    ruleName: 'country关键...',
+    dataSource: '014mysql',
+    catalog: '',
+    database: 'bc_test',
+    dataTable: 'city',
+    field: 'country',
+    model: '关键字检查(非空)',
+    ruleGroup: '测试',
+    config: 'table_a = city,co...',
+  },
+];

src/views/dataQuality/rule/ruleModel.vue

@@ -40,10 +40,14 @@
   import { Select } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
-  import {configColumn, ruleModelFormSchema, taskColumn} from '@/views/dataQuality/rule/rule.data';
+  import {
+    configColumn,
+    ruleModelFormSchema,
+    taskColumn,
+  } from '@/views/dataQuality/rule/rule.data';
   import BasicTable from '@/components/Table/src/BasicTable.vue';
   import { useTable } from '@/components/Table';
-  import {configData, taskData} from '@/views/dataQuality/rule/ruleData';
+  import { configData, taskData } from '@/views/dataQuality/rule/ruleData';
 
   const isUpdate = ref(true);
   const getTitle = computed(() => (isUpdate.value ? '编辑规则' : '新建规则'));

src/views/dataQuality/rule/ruleMoreAdd.vue

 <template>
-  <PageWrapper title="质量规则批量创建" dense contentFullHeight fixedHeight contentClass="flex">
-
+  <PageWrapper title="质量规则批量创建" contentBackground headerSticky>
+    <template #extra>
+      <a-button @click="goback"><RollbackOutlined /></a-button>
+      <a-button @click="goback"><CheckOutlined /></a-button>
+    </template>
+    <template #footer>
+      <div>
+        <div style="display: flex">
+          <div style="flex: 1">
+            <div style="font-size: 18px; margin-left: 20px">选择数据</div>
+            <RadioButtonGroup
+              style="margin-left: 30px"
+              @change="changeTree"
+              :options="labelName"
+              v-model:value="radioGroup"
+            />
+            <BasicTree :treeData="ruleMoreAddData" defaultExpandLevel="4" :checkable="true" />
+          </div>
+          <div style="margin: 0 20px; flex: 4">
+            <div style="display: flex">
+              <div style="font-size: 18px; flex: 1">已选择模板</div>
+              <a-button type="primary">添加质量模板</a-button>
+            </div>
+            <div style="margin: 20px">
+              <Tag
+                closable
+                v-for="item in modelList"
+                style="
+                  width: 100%;
+                  height: 40px;
+                  margin-top: 5px;
+                  font-size: 18px;
+                  line-height: 40px;
+                  padding-left: 20px;
+                "
+                color="#55acee"
+              >
+                <template #icon>
+                  <PicLeftOutlined />
+                </template>
+                {{ item.name }}
+              </Tag>
+            </div>
+          </div>
+        </div>
+        <div style="display: flex">
+          <div style="font-size: 18px"> 所属规则组 </div>
+          <Select
+            mode="multiple"
+            :options="[
+              {
+                label: '测试',
+                value: '测试',
+              },
+              {
+                label: '测试1',
+                value: '测试1',
+              },
+            ]"
+            style="flex: 1"
+          />
+          <div>
+            <a-button type="primary">新建规则组</a-button>
+          </div>
+        </div>
+        <BasicTable title="质量规则预览" @register="registerTable">
+          <template #toolbar>
+            <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
+              ><EditOutlined
+            /></a-button>
+            <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
+              ><DeleteOutlined
+            /></a-button>
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'ant-design:edit-outlined',
+                    onClick: handleEdit.bind(null, record),
+                  },
+                  {
+                    // 删除
+                    icon: 'ant-design:delete-outlined',
+                    popConfirm: {
+                      title: '是否确认删除',
+                      placement: 'left',
+                      confirm: handleRemove.bind(null, record),
+                    },
+                    color: 'error',
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </div>
+    </template>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
+  import {
+    PicLeftOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    RollbackOutlined,
+    CheckOutlined,
+  } from '@ant-design/icons-vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { Select, Tag } from 'ant-design-vue';
   import { PageWrapper } from '@/components/Page';
+  import { BasicTree } from '@/components/Tree';
+  import RadioButtonGroup from '@/components/Form/src/components/RadioButtonGroup.vue';
+  import { ruleMoreAddData, modelList, ruleMoreData } from './ruleData';
+  import { rulePreviewColumns, rulePreviewFormSchema } from './rule.data';
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+  const radioGroup = ref('1');
+  const labelName = [
+    {
+      label: '数据库对象资源',
+      value: '1',
+    },
+    {
+      label: '主体资源',
+      value: '2',
+    },
+  ];
+  function changeTree() {}
+  function handleEdit(record) {}
+  function goback() {
+    router.back()
+  }
+  /** 列表删除 */
+  function handleRemove(record) {
+    createMessage.success('删除成功!');
+  }
+  const [
+    registerTable,
+    { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
+  ] = useTable({
+    title: '质量规则预览',
+    // 定高
+    scroll: { y: 150 },
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: ruleMoreData.length,
+        code: '',
+        message: '',
+        data: ruleMoreData,
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    columns: rulePreviewColumns,
+    rowSelection: true,
+    showIndexColumn: false,
+    striped: false,
+    formConfig: {
+      labelWidth: 80,
+      schemas: rulePreviewFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    pagination: true,
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
 </script>
+<style lang="less" scoped>
+  .vben-tree {
+    background: none;
+  }
+</style>

src/views/dataQuality/task/details/index.vue

@@ -37,8 +37,8 @@
 </template>
 
 <script lang="ts" setup>
-import {reactive,ref, unref, onDeactivated, onMounted, computed} from 'vue';
-import Icon from '@/components/Icon/Icon.vue';
+import {reactive,ref, unref, onDeactivated, onMounted, computed} from 'vue';`
+import Icon from '@/components/Icon/Icon.vue';`
 import { Card, Col, Row, Space, message,Tabs,Badge } from 'ant-design-vue';
 import referenceRelationship from './referenceRelationship/index.vue';
 import Setup from './setup/index.vue'