数据质量规则-编辑

src/views/dataQuality/rule/index.vue

@@ -3,20 +3,22 @@
     <div class="w-1/4 xl:w-1/5">
       <Tabs default-active-key="1">
         <Tabs.TabPane key="1" tab="数据库">
-          <BasicTree :treeData="treeData" defaultExpandLevel="1" />
+          <BasicTree :treeData="treeData" :checkable="true" defaultExpandLevel="1" />
         </Tabs.TabPane>
         <Tabs.TabPane key="2" tab="规则组">
-          <BasicTree :treeData="treeData1" defaultExpandLevel="1" />
+          <BasicTree :treeData="treeData1" :checkable="true" defaultExpandLevel="1" />
         </Tabs.TabPane>
         <Tabs.TabPane key="3" tab="质量主体">
-          <BasicTree :treeData="treeData2" defaultExpandLevel="1" />
+          <BasicTree :treeData="treeData2" :checkable="true" defaultExpandLevel="1" />
         </Tabs.TabPane>
       </Tabs>
     </div>
     <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
       <template #toolbar>
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0">编辑</a-button>
-        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0">删除</a-button>
+        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0" @click="handleEditMore">编辑</a-button>
+        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0" danger
+          >删除</a-button
+        >
         <a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
           >移入规则组</a-button
         >
@@ -35,12 +37,19 @@
             :actions="[
               {
                 icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
               },
               {
                 icon: 'ion:chevron-down-circle-outline',
               },
               {
-                icon: 'ion:trash-outline',
+                // 删除
+                icon: 'ant-design:delete-outlined',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleRemove.bind(null, record),
+                },
                 color: 'error',
               },
             ]"
@@ -49,22 +58,26 @@
       </template>
     </BasicTable>
     <RuleModel @register="ruleModal" />
+    <RuleMoreUpdate @register="ruleMoreUpdateModel" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
-  import { searchFormSchema } from '@/views/dataWarehousePlanning/logicalModel/model.data';
   import { BasicTree } from '@/components/Tree';
-  import { ruleTable } from '@/views/dataQuality/rule/rule.data';
+  import { ruleFormSchema, ruleTable } from '@/views/dataQuality/rule/rule.data';
   import { Tabs } from 'ant-design-vue';
   import { ruleData, treeData, treeData1, treeData2 } from './ruleData';
   import RuleModel from './ruleModel.vue';
+  import RuleMoreUpdate from './ruleMoreUpdateModel.vue'
   import { useModal } from '@/components/Modal';
   import { useRouter } from 'vue-router';
+  import {useMessage} from "@/hooks/web/useMessage";
   // 模态框
   const { push } = useRouter();
+  const { createMessage, createConfirm } = useMessage();
   const [ruleModal, { openModal: openRuleModel }] = useModal();
+  const [ruleMoreUpdateModel, { openModal: openRuleMoreUpdateModel }] = useModal();
   // 新增
   function handleAdd() {
     openRuleModel(true, {
@@ -77,6 +90,29 @@
       path: '/dataQuality/ruleMoreAdd',
     });
   }
+
+  /**
+   * 列表编辑
+   */
+  function handleEdit(record) {
+    openRuleModel(true, {
+      record,
+      isUpdate: true
+    })
+  }
+
+  /**
+   * 批量编辑
+   */
+  function handleEditMore() {
+    openRuleMoreUpdateModel(true, {
+
+    })
+  }
+  /** 列表删除 */
+  function handleRemove(record) {
+    createMessage.success('删除成功!');
+  }
   const [
     registerTable,
     { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
@@ -102,7 +138,7 @@
     showIndexColumn: false,
     formConfig: {
       labelWidth: 120,
-      schemas: searchFormSchema,
+      schemas: ruleFormSchema,
       autoSubmitOnEnter: true,
     },
     useSearchForm: true,

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

 import {BasicColumn} from "@/components/Table";
-
+export const ruleFormSchema = [
+  {
+    field: 'name',
+    component: 'Input',
+    componentProps: {
+      placeholder: '搜索规则',
+    },
+    colProps: { lg: 4, md: 4 },
+  },
+  {
+    field: 'group',
+    label: '规则组',
+    labelWidth: '60',
+    component: 'Select',
+    componentProps: {
+      placeholder: '',
+    },
+    colProps: { lg: 5, md: 5 },
+  },
+  {
+    field: 'task',
+    label: '质量任务',
+    labelWidth: '60',
+    component: 'Select',
+    componentProps: {
+      placeholder: '',
+    },
+    colProps: { lg: 5, md: 5 },
+  },
+  {
+    field: 'model',
+    label: '质量模板',
+    labelWidth: '60',
+    component: 'Select',
+    componentProps: {
+      placeholder: '',
+    },
+    colProps: { lg: 5, md: 5 },
+  },
+  {
+    field: 'mainBody',
+    label: '质量主体',
+    labelWidth: '60',
+    component: 'Select',
+    componentProps: {
+      placeholder: '',
+    },
+    colProps: { lg: 5, md: 5 },
+  },
+];
 export const ruleTable: BasicColumn[] = [
   {
     title: '质量规则',
@@ -8,7 +57,7 @@ export const ruleTable: BasicColumn[] = [
   },
   {
     title: '数据源',
-    dataIndex: 'dataSouce',
+    dataIndex: 'dataSource',
     width:  120,
   },
   {
@@ -49,7 +98,7 @@ export const ruleTable: BasicColumn[] = [
 ];
 export const ruleModelFormSchema: any[] = [
   {
-    field: 'ruleName',
+    field: 'rule',
     label: '规则名称',
     required: true,
     component: 'Input',
@@ -65,13 +114,13 @@ export const ruleModelFormSchema: any[] = [
     field: 'group',
     label: '所属规则组',
     slot: 'group',
-    component: 'Select',
     colProps: { lg: 24, md: 24 },
   },
   {
-    field: 'dataSouce',
+    field: 'dataSource',
     label: '检查数据源',
     required: true,
+    slot: 'dataSource',
     component: 'Select',
     colProps: { lg: 24, md: 24 },
   },
@@ -80,6 +129,11 @@ export const ruleModelFormSchema: any[] = [
     label: '关键模板',
     required: true,
     component: 'Select',
+    componentProps: {
+      options: [
+        { label: '公民身份号码', value: '公民身份号码' },
+      ],
+    },
     colProps: { lg: 24, md: 24 },
   },
   {
@@ -203,3 +257,23 @@ export const rulePreviewColumns = [
     width: 100,
   },
 ];
+export const ruleMoreUpdateModelFormSchema = [
+  {
+    field: 'date1',
+    label: 'date1',
+    component: 'DatePicker',
+    colProps: { lg: 12, md: 12 },
+  },
+  {
+    field: 'number',
+    label: 'number',
+    component: 'Input',
+    colProps: { lg: 12, md: 12 },
+  },
+  {
+    field: 'value1',
+    label: 'value1',
+    component: 'Input',
+    colProps: { lg: 12, md: 12 },
+  },
+];

src/views/dataQuality/rule/ruleData.ts

@@ -14,13 +14,19 @@ export const treeData: TreeItem[] = [
 ];
 export const treeData1: TreeItem[] = [
   {
-    title: '规则组资源',
+    title: '全部规则组',
     key: '0-0',
     children: [
-      { title: 'ArgoDB_Dev01', key: '0-0-0' },
-      { title: 'ArgoDB_Gov01', key: '0-0-1' },
-      { title: 'ArgoDB_Sev01', key: '0-0-2' },
-      { title: 'MySQL_Public', key: '0-0-3' },
+      { title: 'tyh', key: '0-0-0', icon: 'ion:folder-outline' },
+      { title: '毕业生-mob', key: '0-0-1', icon: 'ion:folder-outline' },
+      { title: '毕业生-moca', key: '0-0-2', icon: 'ion:folder-outline' },
+      { title: '毕业生-moe', key: '0-0-3', icon: 'ion:folder-outline' },
+      { title: '毕业生-test', key: '0-0-4', icon: 'ion:folder-outline' },
+      { title: '毕业生-普通表', key: '0-0-5', icon: 'ion:folder-outline' },
+      { title: '毕业生-主体', key: '0-0-6', icon: 'ion:folder-outline' },
+      { title: '谭永辉', key: '0-0-7', icon: 'ion:folder-outline' },
+      { title: '唯一性', key: '0-0-8', icon: 'ion:folder-outline' },
+      { title: '未分组规则', key: '0-0-9', icon: 'ion:folder-outline' },
     ],
   },
 ];
@@ -40,7 +46,7 @@ export const ruleData: any[] = [
   {
     businessId: 1,
     rule: 'identity公用规则',
-    dataSouce: 'ArgoDB_Gov01',
+    dataSource: 'ArgoDB_Gov01',
     catalog: null,
     database: 'dmp01',
     dataTable: 'landing_graduat',
@@ -52,7 +58,7 @@ export const ruleData: any[] = [
   {
     businessId: 2,
     rule: 'identity公用规则',
-    dataSouce: 'ArgoDB_Gov01',
+    dataSource: 'ArgoDB_Gov01',
     catalog: null,
     database: 'dmp01',
     dataTable: 'landing_lowinc',

src/views/dataQuality/rule/ruleModel.vue

@@ -7,6 +7,67 @@
     @ok="handleSubmit"
   >
     <BasicForm @register="registerForm">
+      <template #group="{ model, field }">
+        <div style="display: flex">
+          <div style="flex: 1">
+            <Select
+              :options="[
+                {
+                  label: 'tyh',
+                  value: 'tyh',
+                },
+                {
+                  label: '毕业生-mob',
+                  value: '毕业生-mob',
+                },
+                {
+                  label: '毕业生-moca',
+                  value: '毕业生-moca',
+                },
+                {
+                  label: '毕业生-moe',
+                  value: '毕业生-moe',
+                },
+                {
+                  label: '毕业生-test',
+                  value: '毕业生-test',
+                },
+              ]"
+              v-model:value="model[field]"
+            />
+          </div>
+          <div>
+            <a-button type="primary">新建规则组</a-button>
+          </div>
+        </div>
+      </template>
+      <template #dataSource="{ model, field }">
+        <Select
+          :disabled="isUpdate"
+          :options="[
+            {
+              label: 'ArgoDB_Dev01',
+              value: 'ArgoDB_Dev01',
+            },
+            {
+              label: 'ArgoDB_Gov01',
+              value: 'ArgoDB_Gov01',
+            },
+            {
+              label: 'ArgoDB_Sev01',
+              value: 'ArgoDB_Sev01',
+            },
+            {
+              label: 'MySQL_Public',
+              value: 'MySQL_Public',
+            },
+          ]"
+          v-model:value="model[field]"
+        />
+      </template>
+      <template #dataSourceTxt="{ model, field }">
+        {{ model[field] }}
+      </template>
       <template #config>
         <div>
           <BasicTable @register="configTable">
@@ -36,7 +97,7 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, computed } from 'vue';
+  import { ref, computed, unref, onMounted } from 'vue';
   import { Select } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '@/components/Modal';
   import { BasicForm, useForm } from '@/components/Form';
@@ -50,10 +111,10 @@
   import { configData, taskData } from '@/views/dataQuality/rule/ruleData';
 
   const isUpdate = ref(true);
-  const getTitle = computed(() => (isUpdate.value ? '编辑规则' : '新建规则'));
+  const rowId = ref('');
+  const getTitle = computed(() => (isUpdate.value ? '质量规则详情' : '新建规则'));
   //获取接口数据并放在下拉框里（这里是打开了一个弹框）
   //初始化表单
-
   const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
     labelWidth: 100,
     baseColProps: { lg: 12, md: 24 },
@@ -69,9 +130,17 @@
   });
   //初始化弹框
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-    resetFields();
+    await resetFields();
     setModalProps({ confirmLoading: false });
     isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
   });
   const [configTable, { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection }] =
     useTable({
@@ -124,7 +193,6 @@
     bordered: true,
     pagination: false,
   });
-
   /**确定按钮*/
   async function handleSubmit() {
     await validate();

src/views/dataQuality/rule/ruleMoreUpdateModel.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { ruleMoreUpdateModelFormSchema } from '@/views/dataQuality/rule/rule.data';
+
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const getTitle = computed(() => (isUpdate.value ? '质量规则详情' : '新建规则'));
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: ruleMoreUpdateModelFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+    // 确认按钮配置
+    submitButtonOptions: {
+      text: '提交新版本',
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+    }
+  });
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    closeModal();
+  }
+</script>