质量参数-定义全局参数类

src/views/dataQuality/dataSheet/rule/parameter/DeptTree.vue

+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      title="质量模版"
+      ref="treeRef"
+      toolbar
+      search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="true"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'businessId', title: 'QualityName' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { nextTick, onMounted, ref, unref } from 'vue';
+  import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
+  import { Nullable } from '@vben/types';
+  import { TreeData } from './mock';
+
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select']);
+
+  const treeData = ref<TreeItem[]>([]);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+
+  async function fetch() {
+    treeData.value = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
+    await nextTick(() => {
+      getTree().expandAll(true);
+    });
+  }
+  function getTree() {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+
+
+  /**数组对象转成树*/
+  function handleTree(data, id, parentId, children, rootId) {
+    id = id || 'id';
+    parentId = parentId || 'parentId';
+    children = children || 'children';
+    rootId =
+      rootId ||
+      Math.min.apply(
+        Math,
+        data.map((item) => {
+          return item[parentId];
+        }),
+      ) ||
+      0;
+    // 对源数据深度克隆
+    const cloneData = JSON.parse(JSON.stringify(data));
+    // 循环所有项
+    const treeData = cloneData.filter((father) => {
+      const branchArr = cloneData.filter((child) => {
+        // 返回每一项的子级数组
+        return father[id] === child[parentId];
+      });
+      branchArr.length > 0 ? (father.children = branchArr) : '';
+      // 返回第一层
+      return father[parentId] === rootId;
+    });
+    return treeData !== '' ? treeData : data;
+  }
+
+  function handleSelect(keys) {
+    emit('select', keys[0]);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/dataQuality/dataSheet/rule/parameter/edit.vue

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+
+    <PageWrapper dense contentFullHeight fixedHeight contentClass="flex flex-col" class="toolbar" style="width: 910px;">
+      <div class="toolbar">
+        <div class="tools">
+          <a-button @click="handleRun">运行</a-button>
+        </div>
+      </div>
+
+      <a-input placeholder="请输入sql语句"  v-model:value="sql"
+               style="width: 910px; margin-bottom: 224px;  margin-right: auto" default-value="" allowClear />
+      <div class="w-full">
+        <Card style="margin-bottom: 8px">
+          <Tabs defaultActiveKey="基本信息" @change="handleChangeTab">
+            <TabPane tab="基本信息" key="基本信息">
+              <div style="height: 300px; overflow: auto">
+                <BasicForm @register="registerInfoForm" />
+              </div>
+            </TabPane>
+            <TabPane tab="参数配置" key="参数配置">
+              <div style="height: 300px; overflow: auto">
+                <BasicTable @register="registerTable" />
+              </div>
+            </TabPane>
+            <TabPane tab="SQL语法" key="SQL语法">
+              <div style="height: 300px; overflow: auto">
+
+              </div>
+            </TabPane>
+          </Tabs>
+        </Card>
+      </div>
+      <RunModal @register="registerRunModal" />
+      <SelectDatasourceModal @register="registerSelectDatasourceModal" />
+    </PageWrapper>
+
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import {onMounted, reactive, ref} from 'vue';
+
+import { PageWrapper } from '@/components/Page';
+
+import { useModal } from '@/components/Modal';
+import DeptTree from './DeptTree.vue';
+
+import {useRoute} from 'vue-router';
+
+import SelectDatasourceModal
+  from "@/views/dataQuality/dataSheet/template/selectDatasourceModal.vue";
+import { configurationTableList } from './mock';
+import {Card, TabPane, Tabs} from "ant-design-vue";
+import {BasicForm, FormSchema, useForm} from "@/components/Form";
+import BasicTable from "../../../../../components/Table/src/BasicTable.vue";
+import RunModal from "@/views/dataQuality/dataSheet/rule/parameter/runModal.vue";
+import {useTable} from "@/components/Table";
+
+defineOptions({ name: '' });
+const sql = ref('');
+const searchInfo = reactive<Recordable>({});
+const businessId = ref();
+const route = useRoute();
+
+const formSchemaTemplate: FormSchema[] = [
+  {
+    field: 'name',
+    label: '模板名称',
+    component: 'Input',
+    colProps: { lg: 12, md: 12 },
+    componentProps: {
+      defaultValue: '值域检查',
+      readonly: true,
+      style: {
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+  {
+    field: 'templateNumber',
+    label: '模板编号',
+    component: 'Input',
+    colProps: { lg: 12, md: 12 },
+    componentProps: {
+      readonly: true,
+      style: {
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+  {
+    field: 'description',
+    label: '模版描述',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入模版描述',
+    },
+  },
+  {
+    field: 'category',
+    label: '分类',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择分类',
+      options: [
+        { label: '规范性', value: '规范性' },
+        // 其他选项...
+      ],
+    },
+  },
+];
+
+
+const [registerInfoForm, { setFieldsValue, updateSchema }] = useForm({
+  labelWidth: 100,
+  baseColProps: { lg: 24, md: 24 },
+  schemas: formSchemaTemplate,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+});
+
+const columns = [
+  {
+    title: '参数',
+    dataIndex: 'parameter',
+    key: 'parameter',
+  },
+  {
+    title: '参数类型',
+    dataIndex: 'type',
+    key: 'type',
+    edit: true,
+    // editable: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: [
+        {
+          label: '数据表类',
+          value: '1',
+        },
+        {
+          label: '数据字段类',
+          value: '2',
+        },
+        {
+          label: '公共代码类',
+          value: '3',
+        },
+        {
+          label: '全局参数类',
+          value: '4',
+        },
+      ],
+    },
+  },
+  {
+    title: '描述（选填）',
+    dataIndex: 'description',
+    key: 'description',
+    edit: true,
+    editable: true,
+    editComponent: 'Input',
+  },
+];
+
+const [registerRunModal, { openModal: openRunModal }] = useModal();
+const [registerSelectDatasourceModal] = useModal();
+
+function handleChangeTab(key: string) {
+  // 处理标签页切换逻辑...
+}
+
+
+function handleRun() {
+  const data = configurationTableList.filter((item) => item.businessId == businessId.value);
+  openRunModal(true, {
+    ...data[0],
+  });
+}
+
+const [registerTable] = useTable({
+  api: async () => {
+    const data = configurationTableList.filter((item) => item.businessId == businessId.value);
+    const response = {
+      pageNu: '1',
+      pageSize: '10',
+      pages: '1',
+      total: data[0].params.length,
+      code: '',
+      message: '',
+      data: data[0].params,
+    };
+    return { ...response };
+  },
+  rowKey: 'key',
+  columns,
+  showIndexColumn: false,
+  showTableSetting: false,
+  handleSearchInfoFn(info) {
+    return info;
+  },
+});
+
+
+/** 部门树的select*/
+function handleSelect(deptId = '') {
+  searchInfo.deptId = deptId;
+
+}
+
+/**初始化*/
+onMounted(() => {
+  businessId.value = route.query.id;
+  const data = configurationTableList.filter((item) => item.businessId == businessId.value);
+  sql.value = data[0].sql;
+  if (route.query.disabled !== '0') {
+    updateSchema([
+      {
+        field: 'description',
+        componentProps: {
+          readonly: true,
+          disabled: true,
+          placeholder: '',
+        },
+      },
+      {
+        field: 'category',
+        componentProps: {
+          readonly: true,
+          disabled: true,
+          placeholder: '',
+        },
+      },
+    ]);
+  }
+  setFieldsValue({
+    ...data[0],
+  });
+});
+
+</script>
+
+<style scoped>
+.sql-editor {
+  font-family: Arial, sans-serif;
+}
+.navbar {
+  margin-bottom: 20px;
+}
+.container {
+  max-width: 800px;
+}
+pre {
+  background-color: #f5f5f5;
+  padding: 10px;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+.toolbar {
+  margin-top: 15px;
+  width: 960px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background-color: white;
+  padding: 0 16px;
+}
+
+.tools {
+  display: flex;
+  align-items: center;
+}
+
+.tools label {
+  margin-right: 20px;
+  font-size: 18px;
+}
+
+.tools select,
+.tools button {
+  padding: 5px;
+  margin-bottom: 10px;
+  margin-right: 50px;
+  font-size: 18px;
+  border: none;
+  background-color: white;
+  cursor: pointer;
+}
+
+.editor {
+  background-color: white;
+  height: 560px;
+  border: 1px solid #d9d9d9;
+  padding: 16px;
+  margin-bottom: 8px;
+}
+
+.editor textarea {
+  width: 960px;
+  height: 100%;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  resize: none;
+}
+
+
+</style>

src/views/dataQuality/dataSheet/rule/parameter/index.vue

 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <BasicTable @register="registerTable" :searchInfo="searchInfo" :rowSelection="rowSelection">
+    <BasicTable @register="registerTable" :searchInfo="searchInfo">
       <template #toolbar>
-        <a-button type="primary" @click="handleImport">导入</a-button>
-        <a-button :disabled="getRowSelection().selectedRowKeys <=0" type="primary" @click="handleExport">导出</a-button>
+        <a-button type="primary" >导入</a-button>
+        <a-button  type="primary" >导出</a-button>
         <a-button type="primary" @click="handleCreate">新建</a-button>
       </template>
       <template #bodyCell="{ column, record }">
@@ -14,7 +14,7 @@
               {
                 icon: 'clarity:note-edit-line',
                 label: '编辑',
-                onClick: handleEdit.bind(null, record),
+                onClick: handleEdit.bind(null, record,0),
               },
 
               {
@@ -32,8 +32,9 @@
         </template>
       </template>
     </BasicTable>
-    <sensitiveTypeModal @register="registerModal" @success="handleSuccess" />
-    <importModal @register="registerImport" @success="handleImportSuccess" />
+    <RuleEditModel :is-add="isAdd" @register="ruleEditModal" />
+    <sensitiveTypeModal @success="handleSuccess" />
+    <importModal @register="registerImport"  />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -43,20 +44,21 @@ import { PageWrapper } from '@/components/Page';
 import { useMessage } from '@/hooks/web/useMessage';
 import { useModal } from '@/components/Modal';
 import sensitiveTypeModal from './parameterTypeModal.vue';
-import importModal from './importModal.vue';
 import { columns, searchFormSchema } from './parameterType.data';
 import {tableList} from "@/views/dataQuality/dataSheet/rule/parameter/mock";
 
-import { useRoute, onBeforeRouteLeave } from 'vue-router';
-import { router } from '@/router';
 
+
+import RuleEditModel from "@/views/dataQuality/dataSheet/rule/parameter/parameterEditModel.vue";
+import {router} from "@/router";
+import ImportModal from "@/views/dataQuality/dataSheet/rule/rulesExport.vue";
+const isAdd = ref(true);
 defineOptions({ name: 'safetyLevelManage' });
-const { createMessage,createConfirm } = useMessage();
-const route = useRoute();
-const [registerModal, { openModal }] = useModal();
-const [registerImport, { openModal: openImportModal }] = useModal();
+const { createMessage } = useMessage();
+const [ruleEditModal, { openModal: openRuleEditModel }] = useModal();
+const [registerImport] = useModal();
 const searchInfo = reactive<Recordable>({});
-const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,getRowSelection }] = useTable({
+const [registerTable, { reload, updateTableDataRecord, getRowSelection }] = useTable({
   showIndexColumn:false,
   title: '质量参数',
   api: async (params) => {
@@ -73,15 +75,11 @@ const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,ge
     return { ...response};
   },
   rowKey: 'businessId',
-  rowSelection: true,
   columns,
   formConfig: {
     labelWidth: 120,
     schemas: searchFormSchema,
     autoSubmitOnEnter: true,
-    resetFunc: () => {
-      searchInfo.deptId = '';
-    },
   },
   useSearchForm: true,
   showTableSetting: false,
@@ -100,26 +98,27 @@ const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm,ge
 
 
 
-function handleImport() {
-  openImportModal(true, {
-  });
-}
+
 
 
 /** 新增按钮*/
 function handleCreate() {
-  openModal(true, {
+  isAdd.value = true
+  openRuleEditModel(true, {
     isUpdate: false,
   });
 }
 /** 编辑按钮*/
-function handleEdit(record: Recordable) {
-  openModal(true, {
-    record,
-    isUpdate: true,
+function handleEdit(record: Recordable, disabled: number) {
+  // console.log('record', record.businessId);
+  router.push({
+    path: '/dataQuality/edit',
+    query: {
+      id: record.businessId,
+      disabled: String(disabled),
+    },
   });
 }
-
 /** 重置密码弹窗确定按钮*/
 /** 删除按钮*/
 function handleDelete(record: Recordable) {

src/views/dataQuality/dataSheet/rule/parameter/mock.ts

@@ -2,11 +2,154 @@
 
 export const tableList: any[] = [
   {
-    "name" : "参数测试1",
-    businessId: 309,
-    "describe" : "说明文档",
-    "type" : "数值类",
-    "ParameterValues" : "12",
+    businessId: 1,
+    name : "参数测试1",
+    describe : "说明文档",
+    type : "数值类",
+    ParameterValues : "12",
   },
 
 ]
+export const configData: any[] = [
+  {
+    config: 'table_a',
+    type: '数据表类',
+    describe: '-',
+    value: 'blood_relation_ctas',
+  },
+  {
+    config: 'column_a',
+    type: '数据字段类',
+    describe: '-',
+    value: 'mysql_idc_sample0.id',
+  },
+  {
+    config: 'args',
+    type: '全局参数类',
+    describe: '-',
+    value: 'check_date',
+  },
+];
+export const TreeData: any[] = [
+  {
+    businessId: 100,
+    QualityName: '内置模版',
+    anotherName: '内置模版',
+    parentId: 0,
+    location: '/内置模版',
+    icon: 'ant-design:folder-open-outlined',
+  },
+  {
+    businessId: 101,
+    QualityName: '非空',
+    anotherName: '非空',
+    parentId: 100,
+    ancestors: '0,100',
+    icon: 'ant-design:folder-open-outlined',
+  },
+  {
+    businessId: 102,
+    QualityName: '长度检测',
+    anotherName: '长度检测',
+    parentId: 100,
+    ancestors: '0,100',
+    location: '/内置模版/长度检测',
+    icon: 'ant-design:folder-open-outlined',
+  },
+  {
+    businessId: 103,
+    QualityName: '关键字',
+    anotherName: '关键字',
+    parentId: 100,
+    ancestors: '0,100',
+    location: '/内置模版/关键字',
+    icon: 'ant-design:folder-open-outlined',
+  },
+  {
+    businessId: 201,
+    QualityName: '',
+    anotherName: '',
+    parentId: 101,
+    ancestors: '0,100,102',
+    icon: 'ant-design:partition-outlined',
+  },
+  {
+    businessId: 202,
+    QualityName: '',
+    anotherName: '',
+    parentId: 102,
+    ancestors: '0,100,102',
+    icon: 'ant-design:partition-outlined',
+  },
+  {
+    businessId: 202,
+    QualityName: '',
+    anotherName: '',
+    parentId: 103,
+    ancestors: '0,100,102',
+
+    icon: 'ant-design:partition-outlined',
+  },
+  {
+    businessId: 204,
+    QualityName: '主键编号唯一',
+    anotherName: '主键编号唯一',
+    parentId: 100,
+    ancestors: '0,100,101',
+    icon: 'ant-design:partition-outlined',
+  },
+  {
+    businessId: 204,
+    QualityName: '日期逻辑',
+    anotherName: '日期逻辑',
+    parentId: 100,
+    ancestors: '0,100,101',
+    icon: 'ant-design:partition-outlined',
+  },
+];
+
+export const configurationTableList: any[] = [
+  {
+    businessId: 1,
+    name: '值域检查(数值大于零)',
+    dataSource: [
+      { icon: '🧩', text: 'INCEPTOR' },
+      { icon: '🧩', text: 'GBASE' },
+    ],
+    templateNumber: 'BIDQ000041',
+    createTime: '2023/05/23 14:36:04',
+    updateTime: '2023/05/23 14:36:05',
+    owner: 'admin',
+    workgroup: '默认工作组',
+    description: '这是模板描述',
+    category: '规范性',
+    sql:
+      'SELECT COUNT(*)\n' +
+      'FROM $(table a}\n' +
+      'WHERE ${column a}IS NOT NULL AND ${column a}NOT IN (${range a})',
+    params: [
+      {
+        key: '1',
+        parameter: 'table_a',
+        type: '数据表类',
+        description: '数据表',
+        value: '默认工作组/数据库a/数据表a',
+      },
+      {
+        key: '2',
+        parameter: 'column_a',
+        type: '数据字段类',
+        description: '数据字段',
+        value: '默认工作组/数据库a/数据表a/字段a',
+      },
+      {
+        key: '3',
+        parameter: 'range_a',
+        type: '公共代码类',
+        description: '值域',
+        value: '公共代码/数据范围a',
+      },
+    ],
+  },
+
+];

src/views/dataQuality/dataSheet/rule/parameter/parameterEditModel.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #group="{ model, field }">
+        <div style="display: flex">
+          <div style="flex: 1">
+            <Select
+              :options="[
+                {
+                  label: '规则组1',
+                  value: '规则组1',
+                },
+                {
+                  label: '规则组2',
+                  value: '规则组2',
+                },
+
+
+              ]"
+              v-model:value="model[field]"
+            />
+          </div>
+          <div>
+            <a-button type="primary" @click="handleAddGroup">新建规则组</a-button>
+          </div>
+        </div>
+      </template>
+      <template #dataSource="{ model, field }">
+        <Select
+          :disabled="isUpdate"
+          :options="[
+            {
+              label: 'inceptor',
+              value: 'inceptor',
+            },
+          ]"
+          v-model:value="model[field]"
+        />
+      </template>
+      <template #dataSourceTxt="{ model, field }">
+        {{ model[field] }}
+      </template>
+      <template #config>
+        <div>
+          <BasicTable @register="configTable">
+            <template #value="{ record }">
+              <Select
+                :options="[
+                  {
+                    label: 'blood_relation_ctas',
+                    value: 'blood_relation_ctas',
+                  },
+                  {
+                    label: 'mysql_idc_sample0.id',
+                    value: 'mysql_idc_sample0.id',
+                  },
+                  {
+                    label: 'check_date',
+                    value: 'check_date',
+                  },
+                ]"
+                style="width: 88px"
+                v-model:value="record.value"
+              />
+            </template>
+          </BasicTable>
+        </div>
+      </template>
+      <template #task>
+        <div> <BasicTable @register="taskTable" /></div>
+      </template>
+    </BasicForm>
+    <RuleGroupAddModel @register="ruleGroupAddModel" />
+    <AddNewVersion @register="addNewVersion" @handle-submit-new-version="handleSubmitNewVersion" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, defineProps} from 'vue';
+  import { Select } from 'ant-design-vue';
+  import { BasicModal, useModalInner, useModal } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+import {
+  configColumn,
+  ruleEditModelFormSchema, ruleModelFormSchema,
+  taskColumn,
+} from '@/views/dataQuality/dataSheet/rule/parameter/parameterType.data';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+
+  import { useTable } from '@/components/Table';
+  import { configData } from '@/views/dataQuality/dataSheet/rule/parameter/mock';
+
+  const props = defineProps({
+    disabled: { type: Boolean, default: false },
+    isAdd: { type: Boolean, default: false },
+  });
+  const isUpdate = ref(true);
+  const rowId = ref('');
+  const getTitle = computed(() => (isUpdate.value ? '质量规则详情' : '新建规则'));
+  function handleAddGroup() {
+    openRuleGroupAddModel(true, {
+      isUpdate: false,
+    });
+  }
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  const [ruleGroupAddModel, { openModal: openRuleGroupAddModel }] = useModal();
+  const [addNewVersion, { openModal: openAddNewVersion }] = useModal();
+  //初始化表单
+  const [registerForm, { setFieldsValue, resetSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    // schemas: props.isAdd ? ruleModelFormSchema : ruleEditModelFormSchema,
+    showActionButtonGroup: false,
+    disabled: props.disabled,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    await resetFields();
+    setModalProps({
+      confirmLoading: false,
+      okText: props.disabled ? '回滚' : props.isAdd ? '确定' : '提交新版本',
+    });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      // 获取行数据的id
+      rowId.value = data.record.businessId;
+      // 塞值
+      await setFieldsValue({
+        ...data.record,
+      });
+      await resetSchema([...ruleEditModelFormSchema]);
+    } else {
+      await resetSchema([...ruleModelFormSchema]);
+    }
+  });
+  const [configTable] =
+    useTable({
+      title: '',
+      // 定高
+      scroll: { y: 175 },
+      api: async (params) => {
+        console.log('params:', params);
+        const response = {
+          pageNu: '1',
+          pageSize: '10',
+          pages: '1',
+          total: configData.length,
+          code: '',
+          message: '',
+          data: configData,
+        };
+        return { ...response };
+      },
+      rowKey: 'businessId',
+      columns: configColumn,
+      striped: false,
+      showIndexColumn: false,
+      showTableSetting: false,
+      bordered: true,
+      pagination: false,
+    });
+  const [taskTable] = useTable({
+    title: '',
+    // 定高
+    scroll: { y: 150 },
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        code: '',
+        message: '',
+      };
+      return { ...response };
+    },
+    rowKey: 'businessId',
+    columns: taskColumn,
+    striped: false,
+    showIndexColumn: false,
+    showTableSetting: false,
+    bordered: true,
+    pagination: false,
+  });
+  /**确定按钮*/
+  async function handleSubmit() {
+    await validate();
+    openAddNewVersion(true, {
+      isUpdate: false,
+    });
+  }
+  /**确定按钮*/
+  async function handleSubmitNewVersion(describe) {
+    closeModal();
+  }
+</script>

src/views/dataQuality/dataSheet/rule/parameter/parameterType.data.ts

-import { getAllRoleList } from '@/api/system/role/role';
+
 import { BasicColumn, FormSchema } from '@/components/Table';
 
-import { h } from 'vue';
-import { Switch } from 'ant-design-vue';
-import { useMessage } from '@/hooks/web/useMessage';
-import { changeFlagApi } from '@/api/system/user/user';
 // 引入开关组件
-type CheckedType = boolean | string | number;
 
 /** 列表筛选项*/
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'name',
     label: '',
-    icon: 'clarity:note-edit-line',
-    icon: 'ant-design:file-search-outlined',
     component: 'Input',
     colProps: { span: 4 },
     componentProps: {
@@ -54,7 +47,7 @@ export const columns: BasicColumn[] = [
 export const formSchema: any[] = [
   {
     field: 'name',
-    label: '名称',
+    label: '规则名称',
     component: 'Input',
     rules: [
       {
@@ -66,7 +59,7 @@ export const formSchema: any[] = [
   {
     field: 'describe',
     component: 'InputTextArea',
-    label: '描述',
+    label: '规则描述',
     componentProps: {
       placeholder: '请输入描述',
       rows: 4,
@@ -74,32 +67,23 @@ export const formSchema: any[] = [
   },
   {
     field: 'sort',
-    label: '最低安全分级',
+    label: '所属规则组',
     component: 'Select',
     componentProps: {
       options: [
-        { label: 'G1', value: 'G1' },
-        { label: 'G2', value: 'G2' },
-        { label: 'G3', value: 'G3' },
+        { label: '规则组1', value: '规则组1' },
+        { label: '规则组2', value: '规则组2' },
       ],
     },
-    rules: [
-      {
-        required: true,
-        message: '请选择推荐保护动作',
-      },
-    ],
   },
   {
     field: 'protectAction',
-    label: '推荐脱敏算法',
+    label: '检查数据源',
     component: 'Select',
     componentProps: {
       options: [
-        { label: 'BlockFront', value: 'BlockFront' },
-        { label: 'Delete', value: 'Delete' },
-        { label: 'Mask', value: 'Mask' },
-        { label: 'Base64', value: 'Base64' },
+        { label: 'inceptor', value: 'inceptor' },
+
       ],
     },
     rules: [
@@ -111,10 +95,175 @@ export const formSchema: any[] = [
   },
   {
     field: 'params',
-    label: '算法参数',
+    label: '关联模板',
     component: 'Input',
 
   },
 
-
 ]
+
+export const ruleModelFormSchema: any[] = [
+  {
+    field: 'rule',
+    label: '规则名称',
+    required: true,
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'distinct',
+    label: '规则描述',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'group',
+    label: '所属规则组',
+    slot: 'group',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'dataSource',
+    label: '检查数据源',
+    required: true,
+    slot: 'dataSource',
+    component: 'Select',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'model',
+    label: '关键模板',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '质量模板', value: '质量模板' },
+        { label: '内置模版', value: '内置模版' },
+        { label: '非空检查(不为NULL)', value: '非空检查(不为NULL)' },
+
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'config',
+    label: '参数配置',
+    slot: 'config',
+    colProps: { lg: 24, md: 24 },
+  },
+
+  {
+    field: 'preview',
+    label: 'SQL预览',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入描述',
+      rows: 4,
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+
+];
+export const ruleEditModelFormSchema: any[] = [
+  {
+    field: 'rule',
+    label: '规则名称',
+    required: true,
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'distinct',
+    label: '规则描述',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'group',
+    label: '所属规则组',
+    slot: 'group',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'dataSource',
+    label: '检查数据源',
+    required: true,
+    slot: 'dataSource',
+    component: 'Select',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'dataSource',
+    label: '数据源',
+    slot: 'dataSourceTxt',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'model',
+    label: '关键模板',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      options: [{ label: '公民身份号码', value: '公民身份号码' }],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'config',
+    label: '参数配置',
+    slot: 'config',
+    colProps: { lg: 24, md: 24 },
+  },
+
+  {
+    field: 'preview',
+    label: 'SQL预览',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入描述',
+      rows: 4,
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'task',
+    label: '关联质量任务',
+    slot: 'task',
+    colProps: { lg: 24, md: 24 },
+  },
+];
+export const configColumn: BasicColumn[] = [
+  {
+    title: '参数',
+    dataIndex: 'config',
+    width: 60,
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    width: 60,
+  },
+  {
+    title: '描述',
+    dataIndex: 'describe',
+    width: 60,
+  },
+  {
+    title: '值',
+    dataIndex: 'value',
+    slots: { customRender: 'value' },
+    width: 60,
+  },
+];
+export const taskColumn: BasicColumn[] = [
+  {
+    title: '质量任务',
+    dataIndex: 'task',
+    width: 120,
+  },
+  {
+    title: '质量任务描述',
+    dataIndex: 'describe',
+    width: 120,
+  },
+];

src/views/dataQuality/dataSheet/rule/parameter/parameterTypeModal.vue

@@ -4,21 +4,20 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import {ref, computed, unref, reactive} from 'vue';
+import {ref, computed, unref} from 'vue';
 import { BasicModal, useModalInner } from '@/components/Modal';
 import { BasicForm, useForm } from '@/components/Form';
 import { formSchema } from './parameterType.data';
 
-import { useMessage } from '@/hooks/web/useMessage';
+
 defineOptions({ name: 'AccountModal' });
 
 const emit = defineEmits(['success', 'register']);
-const { createMessage } = useMessage();
 const isUpdate = ref(true);
 const rowId = ref('');
 //获取接口数据并放在下拉框里（这里是打开了一个弹框）
 //初始化表单
-const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
   labelWidth: 100,
   baseColProps: { lg: 24, md: 24 },
   schemas: formSchema,
@@ -44,7 +43,7 @@ const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data
 
 });
 
-const getTitle = computed(() => (!unref(isUpdate) ? '新建敏感类型' : '编辑敏感类型'));
+const getTitle = computed(() => (!unref(isUpdate) ? '新建规则' : '编辑规则'));
 
 
 

src/views/dataQuality/dataSheet/rule/parameter/runModal.vue

+<template>
+  <BasicModal width="40%" v-bind="$attrs" @register="registerModal" title="运行" @ok="handleSubmit">
+    <p>请填写当前SQL中引用的参数的值</p>
+    <BasicTable @register="registerTable" style="height: 370px">
+      <template #value="{ text, record }">
+        <div class="control-group">
+          <a-cascader
+            style="width: 100%"
+            :value="text"
+            placeholder="Please select"
+            showSearch
+            change-on-select
+            :options="options"
+          />
+        </div>
+      </template>
+    </BasicTable>
+    <div style="width: 100%; margin-top: 20px; height: 120px" v-show="isRun">
+      <span>运行结果：0</span>
+    </div>
+    <template #footer>
+      <a-button @click="handleCancel">取消</a-button>
+      <a-button type="primary" @click="handleRun">运行</a-button>
+    </template>
+  </BasicModal>
+  <FindPath @register="registerFindPathModal" @success="handleSuccess" />
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { configurationTableList } from './mock';
+  import FindPath from '@/views/dataQuality/dataSheet/template/findPath.vue';
+
+
+  import { Cascader as ACascader, CascaderProps } from 'ant-design-vue';
+
+  const value = ref<string[]>([]);
+  const emit = defineEmits(['success', 'register']);
+  const businessId = ref();
+  const isRun = ref(false);
+  const options: CascaderProps['options'] = [
+    {
+      value: '数据库对象资源',
+      label: '数据库对象资源',
+      children: [
+        {
+          value: '数据中台工作区01',
+          label: '数据中台工作区01',
+          children: [
+            {
+              value: 'ArgoDB_Dev01',
+              label: 'ArgoDB_Dev01',
+              children: [
+                {
+                  value: 'dmtp01',
+                  label: 'dmtp01',
+                  children: [
+                    {
+                      value: 'eligible_graduates_list',
+                      label: 'eligible_graduates_list',
+                    },
+                    {
+                      value: 'graduates_info',
+                      label: 'graduates_info',
+                    },
+                    {
+                      value: 'graduates_info_id_masked',
+                      label: 'graduates_info_id_masked',
+                    },
+                    {
+                      value: 'landing_graduates_info',
+                      label: 'landing_graduates_info',
+                    },
+                    {
+                      value: 'landing_member_relationship_info',
+                      label: 'landing_member_relationship_info',
+                    },
+                    {
+                      value: 'lowincome_family_children_list',
+                      label: 'lowincome_family_children_list',
+                    },
+                    {
+                      value: 'lowincome_family_info',
+                      label: 'lowincome_family_info',
+                    },
+                    {
+                      value: 'lowincome_graduates_area_ratio',
+                      label: 'lowincome_graduates_area_ratio',
+                    },
+                    {
+                      value: 'lowincome_graduates_cnt',
+                      label: 'lowincome_graduates_cnt',
+                    },
+                    {
+                      value: 'lowincome_graduates_employment_cls',
+                      label: 'lowincome_graduates_employment_cls',
+                    },
+                    {
+                      value: 'lowincome_graduates_employment_rat',
+                      label: 'lowincome_graduates_employment_rat',
+                    },
+                    {
+                      value: 'test',
+                      label: 'test',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: '公共资源',
+      label: '公共资源',
+      children: [
+        {
+          value: '公共代码',
+          label: '公共代码',
+          children: [
+            {
+              value: '范围a',
+              label: '范围a',
+              children: [
+                {
+                  value: 'dmtp01',
+                  label: 'dmtp01',
+                  children: [
+                    {
+                      value: 'eligible_graduates_list',
+                      label: 'eligible_graduates_list',
+                    },
+                    {
+                      value: 'graduates_info',
+                      label: 'graduates_info',
+                    },
+                    {
+                      value: 'graduates_info_id_masked',
+                      label: 'graduates_info_id_masked',
+                    },
+                    {
+                      value: 'landing_graduates_info',
+                      label: 'landing_graduates_info',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ];
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    console.log(data);
+    businessId.value = data.businessId;
+    setModalProps({ confirmLoading: false });
+  });
+
+  const columns = [
+    {
+      title: '参数',
+      dataIndex: 'parameter',
+      key: 'parameter',
+    },
+    {
+      title: '参数类型',
+      dataIndex: 'type',
+      key: 'type',
+    },
+    {
+      title: '模板描述',
+      dataIndex: 'description',
+      key: 'description',
+    },
+    {
+      title: '值',
+      dataIndex: 'value',
+      key: 'value',
+      width: 250,
+      slots: { customRender: 'value' },
+    },
+  ];
+
+  const [registerTable] = useTable({
+    api: async () => {
+      const data = configurationTableList.filter((item) => item.businessId == businessId.value);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: data[0].params.length,
+        code: '',
+        message: '',
+        data: data[0].params,
+      };
+      return { ...response };
+    },
+    rowKey: 'key',
+    columns,
+    showIndexColumn: false,
+    showTableSetting: false,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeModal();
+  }
+  function handleCancel() {
+    closeModal();
+  }
+  function handleRun() {
+    isRun.value = true;
+  }
+
+  const [registerFindPathModal] = useModal();
+
+  const selectedPath = ref('');
+  function handleSuccess(path) {
+    selectedPath.value = path;
+    console.log('Selected Path:', selectedPath.value);
+    // 在这里处理接收到的路径信息
+  }
+</script>
+<style scoped>
+  .control-group {
+    display: flex;
+    align-items: center;
+  }
+</style>

src/views/dataQuality/dataSheet/rule/parameter/selectDatasourceModal.vue

+<template>
+  <BasicModal
+    width="500px"
+    v-bind="$attrs"
+    @register="registerModal"
+    title="选择数据源类型"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <div class="modal-content">
+      <p>当前数据源类型:</p>
+      <span>{{ currentDataSource }}</span>
+      <br />
+      <p>选择需要转换的数据类型</p>
+      <ACheckboxGroup v-model:value="selectedDataTypes" class="checkbox-group">
+        <ACheckbox :value="'DB2'">DB2</ACheckbox>
+        <ACheckbox :value="'HIVE'">HIVE</ACheckbox>
+        <ACheckbox :value="'IMPALA'">IMPALA</ACheckbox>
+        <ACheckbox :value="'INCEPTOR'">INCEPTOR</ACheckbox>
+        <ACheckbox :value="'MYSQL'">MYSQL</ACheckbox>
+        <ACheckbox :value="'ORACLE'">ORACLE</ACheckbox>
+        <ACheckbox :value="'SQL_SERVER'">SQL_SERVER</ACheckbox>
+      </ACheckboxGroup>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { Checkbox as ACheckbox, CheckboxGroup as ACheckboxGroup } from 'ant-design-vue';
+
+  // 定义发射的事件
+  const emit = defineEmits(['success', 'register']);
+
+  // 当前数据源类型
+  const currentDataSource = ref('ARGODB');
+
+  // 已选择的数据类型
+  const selectedDataTypes = ref<string[]>(['INCEPTOR', 'MYSQL']);
+
+  // 初始化模态框
+  const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
+    if (data && data.currentDataSource) {
+      currentDataSource.value = data.currentDataSource;
+    }
+    setModalProps({ confirmLoading: false });
+  });
+
+  // 提交处理
+  const handleSubmit = () => {
+    // 发射 success 事件，并附带已选择的数据类型
+    emit('success', selectedDataTypes.value);
+    closeModal();
+  };
+
+  // 取消处理
+  const handleCancel = () => {
+    closeModal();
+  };
+</script>
+<style scoped>
+  .modal-content {
+    padding: 20px;
+  }
+
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .checkbox-item {
+    margin-bottom: 10px;
+  }
+</style>