自助建表-页面

src/views/scriptDevelopment/auditStrategy/addRulesMode.vue

@@ -28,7 +28,7 @@
                 <Icon icon="ant-design:delete-outlined" :size="25"  :color="'#ED6F6F'" />
               </div>
             </CheckboxGroup>
-            <p style="margin-left: 100px; font-size: 11px">多个用户用英文逗号分隔</p>
+
           </div>
           <BasicForm @register="registerForm" />
 

src/views/scriptDevelopment/auditStrategy/batchSetDatabaseUsersModal.vue

@@ -14,7 +14,6 @@
 
 
     <BasicForm @register="registerForm" />
-    <p style="margin-left: 100px; margin-top: -20px; font-size: 11px">多个用户用英文逗号分隔</p>
 
   </BasicModal>
 

src/views/scriptDevelopment/auditStrategy/mainBody.data.ts

@@ -40,7 +40,9 @@ export const formSchema: any[] = [
     label: '数据库用户',
     component: 'Input',
     colProps: { lg: 24, md: 24 },
-
+    itemProps: {
+      extra: '多个用户用英文逗号分隔',
+    },
 
     componentProps: {
       placeholder: 'user001,user002',

src/views/scriptDevelopment/functionManagement/DeptTree.vue

@@ -26,7 +26,7 @@
       :clickRowToExpand="false"
       :defaultExpandAll="true"
       :treeData="treeDataTwo"
-      :fieldNames="{ key: 'selectedDeptId', title: 'label' }"
+      :fieldNames="{ key: 'selectedDeptId', title: 'name' }"
       @select="handleSelect"
 
     />
@@ -39,6 +39,7 @@ import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
 
 import { Nullable } from '@vben/types';
 import { treeDataList, treeDataListTwo } from './mock';
+import { tableList } from './mock'
 import Icon from "@/components/Icon/Icon.vue";
 
 defineOptions({ name: 'DeptTree' });
@@ -51,6 +52,8 @@ const treeRef1 = ref<Nullable<TreeActionType>>(null);
 const treeRef2 = ref<Nullable<TreeActionType>>(null);
 
 async function fetch() {
+  // 合并树形数据和表格数据
+  treeData.value = mergeTreeDataWithTableList(treeDataListTwo, tableList);
   treeData.value = treeDataList;
   treeDataTwo.value = treeDataListTwo;
   await nextTick(() => {
@@ -59,6 +62,24 @@ async function fetch() {
   });
 }
 
+// 合并数据的函数
+function mergeTreeDataWithTableList(treeDataListTwo, tableList) {
+  return treeDataListTwo.map((treeNode) => {
+    // 找到对应的tableList项，合并name属性
+    const tableItem = tableList.find((item) => item.selectedDeptId === treeNode.selectedDeptId);
+    if (tableItem) {
+      treeNode.name = tableItem.name; // 将tableList中的name添加到treeNode
+    }
+
+    // 如果有子节点，递归处理
+    if (treeNode.children && treeNode.children.length > 0) {
+      treeNode.children = mergeTreeDataWithTableList(treeNode.children, tableList);
+    }
+
+    return treeNode;
+  });
+}
+
 function getTree(treeRef) {
   const tree = unref(treeRef);
   if (!tree) {

src/views/scriptDevelopment/functionManagement/mock.ts

@@ -53,19 +53,19 @@ export const treeDataList = [
 ];
 export const treeDataListTwo = [
   {
-    label: '预置函数',
+    name: '预置函数',
     selectedDeptId: 21,
     children: [
       {}
     ],
   },
   {
-    label: '自定义函数',
+    name: '自定义函数',
     selectedDeptId: 22,
     children: [
-      { label: 'named_struct', selectedDeptId: 23 },
-      { label: 'Aggregate', selectedDeptId: 24 },
-      { label: 'Scalar', selectedDeptId: 25 },
+      { selectedDeptId: 23 },
+      { selectedDeptId: 24 },
+      { selectedDeptId: 25 },
     ],
   },
 ];

src/views/scriptDevelopment/selfServiceTableCreation/DeptTree.vue

+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      ref="treeRef"
+      toolbar
+      search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="false"
+      :defaultExpandAll="true"
+      :treeData="treeData"
+      :fieldNames="{ key: 'selectedDeptId', title: 'name', }"
+      @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 { tableList, treeDataList } from './mock';
+
+  defineOptions({ name: 'DeptTree' });
+
+  const emit = defineEmits(['select']);
+
+  const treeData = ref<TreeItem[]>([]);
+  const treeRef = ref<Nullable<TreeActionType>>(null);
+
+  // 合并数据的函数
+  function mergeTreeDataWithTableList(treeDataList, tableList) {
+    return treeDataList.map((treeNode) => {
+      // 找到对应的tableList项，合并name属性
+      const tableItem = tableList.find((item) => item.selectedDeptId === treeNode.selectedDeptId);
+      if (tableItem) {
+        treeNode.name = tableItem.name; // 将tableList中的name添加到treeNode
+      }
+
+      // 如果有子节点，递归处理
+      if (treeNode.children && treeNode.children.length > 0) {
+        treeNode.children = mergeTreeDataWithTableList(treeNode.children, tableList);
+      }
+
+      return treeNode;
+    });
+  }
+
+  async function fetch() {
+    // 合并树形数据和表格数据
+    treeData.value = mergeTreeDataWithTableList(treeDataList, tableList);
+
+    await nextTick(() => {
+      getTree(treeRef).expandAll(true);
+    });
+  }
+
+  function getTree(treeRef) {
+    const tree = unref(treeRef);
+    if (!tree) {
+      throw new Error('tree is null!');
+    }
+    return tree;
+  }
+
+  function handleSelect(selectedDeptId) {
+    emit('select', selectedDeptId[0]);
+    console.log('selectedDeptId:', selectedDeptId);
+  }
+
+  onMounted(() => {
+    fetch();
+  });
+</script>

src/views/scriptDevelopment/selfServiceTableCreation/addFieldsModal.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 { formSchema } from './mainBody.data';
+
+
+
+defineOptions({ name: 'AccountModal' });
+
+const emit = defineEmits(['success', 'register']);
+const isUpdate = ref(true);
+const rowId = ref('');
+
+
+
+
+//获取接口数据并放在下拉框里（这里是打开了一个弹框）
+//初始化表单
+const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+  labelWidth: 100,
+  baseColProps: { lg: 24, md: 24 },
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+});
+//初始化弹框
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  resetFields();
+  setModalProps({ confirmLoading: false });
+  isUpdate.value = !!data?.isUpdate;
+  if (unref(isUpdate)) {
+
+    // 通过id获取行详情信息
+    // 塞值
+    setFieldsValue({
+      ...data.record,
+    });
+  }
+
+
+});
+
+const getTitle = computed(() => ('添加字段'));
+
+
+
+
+async function handleSubmit() {
+  try {
+    const values = await validate();
+    setModalProps({ confirmLoading: true });
+    // TODO custom api
+    closeModal();
+    emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>
+<style lang="scss" scoped>
+.choseOB_title{
+  font-weight: 600;
+}
+::v-deep.ant-checkbox-group{
+  display: grid;
+}
+.checkRow{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 5px;
+}
+.addDialogBG{
+
+  background-color:  #E8ECF7;
+  width: 100%;
+  height: 400px;
+}
+</style>

src/views/scriptDevelopment/selfServiceTableCreation/editAuditRulesModal.vue

+<template >
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex" >
+
+    <PageWrapper dense contentFullHeight fixedHeight contentClass="flex flex-col"  class="toolbar"  style="width: 910px; ">
+      <div class="toolbar" style="background: white; " >
+        <div class="tools"  >
+          <a-button type="primary" style="float: right; margin: 10px 15px 10px 0" >保存</a-button>
+          <a-button type="primary" style="float: right; margin: 10px 15px 10px 0" @click="sqlStatement">生成建表语句</a-button>
+        </div>
+      </div>
+
+      <BasicForm
+          style="background: white; margin-top: -50px"
+          size="middle"
+          :bordered="false"
+          :column="2"
+          @register="registerGuideModeForm"
+
+      >
+        <template #tableConfiguration>
+            <h1 class="title-text">表配置</h1>
+        </template>
+
+      </BasicForm>
+
+      <div style="background: white">
+        <h1 class="title-text">字段配置</h1>
+      </div>
+
+      <BasicTable
+        @register="registerTable"
+        style="width: 960px; height: 160px; overflow: hidden;"
+      >
+
+        <template #bodyCell="{ column }">
+          <template v-if="column.key === 'action'">
+            <TableAction
+                :actions="[
+                  {
+                    icon: 'ant-design:delete-outlined',
+
+                  },
+                ]"
+            />
+          </template>
+        </template>
+      </BasicTable>
+
+     <div style=" background: white; ">
+       <a-button type="primary" style="margin-left: 5px; margin-bottom: -10px; " @click="addFields">添加字段</a-button>
+     </div>
+
+      <BasicForm
+          style="background: white;"
+          size="middle"
+          :bordered="false"
+          :column="2"
+
+          @register="partitionConfigurationTemplate"
+
+      >
+        <template #tableConfiguration>
+          <h1 class="title-text" style="width: 525px;margin-bottom:-30px;margin-top: 3px;">分区配置</h1>
+          <h1 class="title-text" style="margin-bottom:-30px; margin-top: 10px; margin-left: 520px;">分桶配置</h1>
+        </template>
+        <template #delete>
+          <Icon icon="ant-design:delete-outlined" :size="25"/>
+        </template>
+
+      </BasicForm>
+
+      <div style=" background: white;">
+        <a-button type="primary" style="margin-left: 5px; margin-top: -10px; ">添加分区键</a-button>
+      </div>
+
+    </PageWrapper>
+    <generateTableBuildingStatementsMode @register="registerModal" />
+    <addFieldsModal @register="FieldsModal" />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+import {ref, } from 'vue';
+import {PageWrapper} from "@/components/Page";
+import {fieldConfigurationList} from "./mock";
+import {fieldConfiguration, personSchema, personSchemaTwo} from "./mainBody.data";
+import {BasicForm, useForm} from "@/components/Form";
+import {BasicTable, TableAction, useTable} from "@/components/Table";
+import Icon from "@/components/Icon/Icon.vue";
+import {useModal} from "@/components/Modal";
+import generateTableBuildingStatementsMode from './generateTableBuildingStatementsMode.vue';
+import addFieldsModal from './addFieldsModal.vue';
+
+// 初始化 info 为一个响应式对象
+const info = ref({...fieldConfigurationList[0]});
+
+const [registerModal, { openModal }] = useModal();
+const [FieldsModal, { openModal:addFieldConfiguration }] = useModal();
+
+const [
+  registerTable,
+  { },
+] = useTable({
+
+  api: async (params) => {
+    const response = {
+      total: fieldConfigurationList.length,
+      data: [],
+    };
+
+    //过滤data中的数据，取出等于params.deptId的数据
+    return { ...response,data: fieldConfigurationList };
+  },
+  rowKey: 'businessId',
+
+
+  columns: fieldConfiguration,
+  formConfig: {
+    labelWidth: 10,
+    autoSubmitOnEnter: false,
+
+  },
+
+  useSearchForm: false,
+  showIndexColumn: false,
+  showTableSetting: false,
+  bordered: false,
+  pagination:false,
+  handleSearchInfoFn(info) {
+    console.log('handleSearchInfoFn', info);
+    return info;
+  },
+  actionColumn: {
+    width: 60,
+    title: '操作',
+    dataIndex: 'action',
+  },
+});
+
+function sqlStatement() {
+  openModal(true, {
+    isUpdate: false,
+  });
+}
+
+function addFields() {
+  addFieldConfiguration(true, {
+    isUpdate: false,
+  });
+}
+
+const [registerGuideModeForm] = useForm({
+  labelWidth: 100,
+  schemas: personSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+
+});
+
+const [partitionConfigurationTemplate] = useForm({
+  labelWidth: 100,
+  schemas: personSchemaTwo,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+
+});
+
+
+
+</script>
+
+<style scoped>
+
+.title-text{
+
+  font-weight: bold;
+  margin-top: 0;
+  color: #1a1a1a;
+  width: 313px;
+  margin-left: 38px;
+}
+
+.ant-table-body{
+  height: 0;
+}
+
+</style>

src/views/scriptDevelopment/selfServiceTableCreation/generateTableBuildingStatementsMode.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+
+
+          <BasicForm @register="registerForm">
+            <template #ruleContentSlot>
+              <div class="editor">
+                <CodeEditor
+                  v-model:value="sql"
+                />
+              </div>
+            </template>
+          </BasicForm>
+
+  </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 { formSchema } from './mainBody.data';
+import CodeEditor from "@/components/CodeEditor/src/CodeEditor.vue";
+import {tableList} from "./mock";
+
+
+defineOptions({ name: 'AccountModal' });
+
+const emit = defineEmits(['success', 'register']);
+const isUpdate = ref(true);
+const rowId = ref('');
+const sql = ref(tableList[0].sql);
+
+
+
+//获取接口数据并放在下拉框里（这里是打开了一个弹框）
+//初始化表单
+const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+  labelWidth: 100,
+  baseColProps: { lg: 24, md: 24 },
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  actionColOptions: {
+    span: 23,
+  },
+});
+//初始化弹框
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  resetFields();
+  setModalProps({ confirmLoading: false });
+  isUpdate.value = !!data?.isUpdate;
+  if (unref(isUpdate)) {
+
+    // 通过id获取行详情信息
+    // 塞值
+    setFieldsValue({
+      ...data.record,
+    });
+  }
+
+
+});
+
+const getTitle = computed(() => ('生成建表语句'));
+
+
+
+
+async function handleSubmit() {
+  try {
+    const values = await validate();
+    setModalProps({ confirmLoading: true });
+    // TODO custom api
+    closeModal();
+    emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>
+<style lang="scss" scoped>
+.choseOB_title{
+  font-weight: 600;
+}
+::v-deep.ant-checkbox-group{
+  display: grid;
+}
+.checkRow{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 5px;
+}
+.addDialogBG{
+
+  background-color:  #E8ECF7;
+  width: 100%;
+  height: 400px;
+}
+</style>

src/views/scriptDevelopment/selfServiceTableCreation/index.vue

+<template>
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex" >
+    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    <editAuditRulesModal
+      style="background: #cc0000;"
+      class="w-3/4 xl:w-4/5"
+      v-if="isSpecificDeptSelected"
+      :deptId="selectedDeptId"
+    />
+    <BasicTable
+      @register="registerTable"
+      class="w-3/4 xl:w-4/5"
+      :searchInfo="searchInfo"
+      v-else
+    >
+      <template #bodyCell="{ column }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+                  {
+                    icon: 'ant-design:form-outlined',
+
+                  },
+                  {
+                    icon: 'ant-design:exclamation-circle-outlined',
+
+                  },
+                  {
+                    icon: 'ant-design:ellipsis-outlined',
+                  },
+                ]"
+          />
+        </template>
+      </template>
+
+      <template #toolbar>
+        <a-input style="width: 200px; margin-right: auto" placeholder="输入关键字搜索" allowClear />
+        <a-button type="primary">复制到</a-button>
+        <a-button type="primary">删除</a-button>
+        <a-button type="primary">移动</a-button>
+        <a-button type="primary">导出</a-button>
+        <a-button type="primary">导出模版</a-button>
+        <a-button type="primary">导入</a-button>
+        <a-button type="primary">新建文件夹</a-button>
+        <a-button type="primary">新建文件</a-button>
+      </template>
+
+    </BasicTable>
+
+
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import { reactive, computed  } from 'vue';
+import {BasicTable, TableAction, useTable} from '@/components/Table';
+import { PageWrapper } from '@/components/Page';
+import DeptTree from './DeptTree.vue';
+import { ref } from 'vue';
+import { tableList } from './mock';
+import { columns } from './mainBody.data';
+
+import EditAuditRulesModal from "./editAuditRulesModal.vue";
+
+defineOptions({ name: 'AccountManagement' });
+
+
+const isSpecificDeptSelected = computed(() => {
+  return [23, 24, 25].includes(selectedDeptId.value);
+});
+
+
+// 选中的部门ID
+const selectedDeptId = ref<string | null>(null);
+
+const searchInfo = reactive<Recordable>({});
+const [
+  registerTable,
+  { },
+] = useTable({
+
+  api: async (params) => {
+    console.log('tableList', tableList);
+    const response = {
+      pageNu: '1',
+      pageSize: '10',
+      pages: '1',
+      total: tableList.length,
+      code: '',
+      message: '',
+      data: tableList,
+    };
+
+    return { ...response };
+  },
+  rowKey: 'businessId',
+
+
+  columns,
+  formConfig: {
+    labelWidth: 10,
+    autoSubmitOnEnter: true,
+
+  },
+  rowSelection: true,
+  useSearchForm: false,
+  showIndexColumn: false,
+  showTableSetting: false,
+  bordered: true,
+  handleSearchInfoFn(info) {
+    console.log('handleSearchInfoFn', info);
+    return info;
+  },
+  actionColumn: {
+
+    width: 170,
+    title: '操作',
+    dataIndex: 'action',
+  },
+});
+
+
+// 处理选择节点事件
+const handleSelect = (deptId) => {
+  selectedDeptId.value = deptId;
+
+  console.log('选择节点selectedDeptId:', deptId);
+}
+
+
+</script>
+
+

src/views/scriptDevelopment/selfServiceTableCreation/mainBody.data.ts

+import {BasicColumn, FormSchema} from '@/components/Table';
+
+
+
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 150,
+    sorter: true,
+
+  },
+  {
+    title: '数据库',
+    dataIndex: 'database',
+    width: 220,
+    sorter: true,
+  },
+  {
+    title: '表类型',
+    dataIndex: 'tableType',
+    width: 220,
+    sorter: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'creationTime',
+    width: 120,
+    sorter: true,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 120,
+    sorter: true,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'owner',
+    width: 120,
+    sorter: true,
+  },
+
+];
+
+export const fieldConfiguration: BasicColumn[] = [
+  {
+    title: '排序',
+    dataIndex: 'sort',
+    width: 50,
+
+  },
+  {
+    title: '字段中文名',
+    dataIndex: 'fieldChineseName',
+    width: 150,
+    edit: true,
+    editComponent: 'Input',
+  },
+  {
+    title: '字段英文名',
+    dataIndex: 'fieldEnglishName',
+    width: 120,
+    edit: true,
+    editComponent: 'Input',
+  },
+  {
+    title: '字段类型',
+    dataIndex: 'tableType',
+    width: 120,
+    edit: true,
+    editComponent: 'Select',
+    editComponentProps: {
+      options: [
+        {
+          label: 'string',
+          value: '1',
+        },
+        {
+          label: 'varchar',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    title: '字段长度',
+    dataIndex: 'fieldType',
+    width: 100,
+    edit: true,
+    editComponent: 'Input',
+  },
+  {
+    title: '字段精度',
+    dataIndex: 'fieldAccuracy',
+    width: 100,
+    edit: true,
+  },
+  {
+    title: '非空',
+    dataIndex: 'nonEmpty',
+    width: 60,
+    edit: true,
+    editComponent: 'Checkbox',
+    slots:{ customRender:'nonEmpty'}
+  },
+
+];
+
+export const personSchemaTwo: FormSchema[] = [
+  {
+    field: 'tableConfiguration',
+    slot: 'tableConfiguration',
+  },
+  {
+    field: 'disclosure',
+    component: 'RadioGroup',
+    label: '分区类型',
+    colProps: {
+      span: 12,
+    },
+
+    componentProps: {
+      options: [
+        {
+          label: '单值分区',
+          value: '1',
+        },
+        {
+          label: '范围分区',
+          value: '2',
+        },
+
+      ],
+    },
+  },
+  {
+    field: 'bucketButton',
+    label: '分桶键',
+    colProps: { lg: 11, md: 11 },
+    component: 'Input',
+    itemProps: {
+      extra: '分桶 键尽量选值域均匀、重复率不高的字段',
+    },
+  },
+  {
+    field: 'giveAnExample',
+    label: '分区健',
+    colProps: { lg: 9, md: 9 },
+    component: 'Input',
+    itemProps: {
+      extra: '建议分区键选择日期字段或地区字段',
+    },
+  },
+  {
+    field: 'PartitionHealth',
+    component: 'Select',
+    colProps: {
+      span: 3,
+    },
+    componentProps: {
+      options: [
+        {
+          label: 'String',
+          value: '1',
+        },
+        {
+          label: 'varchar',
+          value: '2',
+
+        },
+      ],
+    },
+  },
+  {
+    field: 'partitionKeyDeletion',
+    slot: 'delete',
+  },
+  {
+    field: 'numberOfBucketsDivided',
+    label: '分桶个数',
+    colProps: { lg: 11, md: 11 },
+    component: 'Input',
+  },
+  {
+    field: 'partitionHealth',
+    label: '分区键',
+    colProps: { lg: 9, md: 9 },
+    component: 'Input',
+    itemProps: {
+      extra: '建议分区键选择日期字段或地区字段',
+    },
+  },
+  {
+    field: 'partitionHealthTwoSelect',
+    component: 'Select',
+    colProps: {
+      span: 3,
+    },
+    componentProps: {
+      options: [
+        {
+          label: 'String',
+          value: '1',
+        },
+        {
+          label: 'varchar',
+          value: '2',
+
+        },
+      ],
+    },
+  },
+  {
+    field: 'partitionHealthTwoInput',
+    colProps: { lg: 3, md: 3 },
+    component: 'Input',
+  },
+  {
+    field: 'partitionKeyDeletion',
+    slot: 'delete',
+  },
+
+
+]
+
+export const personSchema: FormSchema[] = [
+
+  {
+    field: 'tableConfiguration',
+    slot: 'tableConfiguration',
+  },
+  {
+    field: 'disclosure',
+    component: 'RadioGroup',
+    label: '表所有权',
+    colProps: {
+      span: 16,
+    },
+    // itemProps: {
+    //   extra: '客户、邀评人默认被分享',
+    // },
+    componentProps: {
+      options: [
+        {
+          label: '内表',
+          value: '1',
+        },
+        {
+          label: '外表',
+          value: '2',
+        },
+
+      ],
+    },
+  },
+
+  {
+    field: 'dataConnection ',
+    label: '表类型',
+    colProps: { lg: 11, md: 11 },
+    component: 'Select',
+    required: true,
+    componentProps: {
+      options: [
+        { label: 'orc', value: '1' },
+      ],
+    },
+
+  },
+
+
+  {
+    field: 'classPath',
+    label: '表中文名',
+    colProps: { lg: 11, md: 11 },
+    component: 'Input',
+    required: true,
+  },
+
+  {
+    field: 'ruleDescription',
+    label: '表英文名',
+    colProps: { lg: 11, md: 11 },
+    component: 'Input',
+
+  },
+  {
+    field: 'operator',
+    label: '库名',
+    colProps: { lg: 11, md: 11 },
+    component: 'Input',
+  },
+
+
+
+];
+
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'classPath',
+    label: '表中文名',
+    colProps: { lg: 22, md: 22 },
+    component: 'Input',
+
+  },
+
+  {
+    field: 'ruleDescription',
+    label: '表英文名',
+    colProps: { lg: 22, md: 22 },
+    component: 'Input',
+    required: true,
+
+  },
+  {
+    field: 'ruleHandling',
+    label: '字段类型',
+    colProps: { lg: 22, md: 22, },
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'String', value: '1' },
+        { label: 'varchar', value: '2' },
+
+      ],
+    },
+  },
+  {
+    field: 'ruleDescription',
+    label: 'not null',
+    colProps: { lg: 22, md: 22 },
+    component: 'Checkbox',
+
+
+  },
+
+]

src/views/scriptDevelopment/selfServiceTableCreation/mock.ts

+
+
+export const tableList: any[] = [
+  {
+    selectedDeptId: 23,
+    name: 'text',
+    database: 'customerdb',
+    tableType:'ORC',
+    creationTime: '2019/11/17 10:34:48',
+    updateTime: '2019/11/17 11:17:00',
+    owner: 'admin',
+    sql:
+        'CREATE TABLE `customerdb.customertable`{\n' +
+        '   `ID` STRING COMMENT `用户ID`NOT NULL,\n' +
+        '   `name` VARCHAR(255) COMMENT `姓名`,\n' +
+        '} COMMENT `客户信息表`\n' +
+        'PARTITIONED BY RANGE {\n' +
+        '   `phone` STRING,\n' +
+        '   `email` VARCHAR(255),\n' +
+        '}\n'+
+        'CLUSTERED BY (`ID`) INTO 3 BUCKETS\n'+
+        'STORED AS ORC;'
+  },
+
+];
+
+export const fieldConfigurationList: any[] = [
+  {
+
+    fieldChineseName: '用户ID',
+    fieldEnglishName: 'ID',
+    tableType: 'string',
+    fieldType: '',
+    fieldAccuracy: '',
+    nonEmpty: true,
+  },
+  {
+
+    fieldChineseName: '姓名',
+    fieldEnglishName: 'name',
+    tableType: 'varchar',
+    fieldType: '255',
+    fieldAccuracy: '',
+    nonEmpty: true,
+  },
+];
+
+export const treeDataList = [
+  {
+    name: '自助建表文件',
+    selectedDeptId: 21,
+    children: [
+      {selectedDeptId: 23 },
+
+    ],
+  },
+
+];

src/views/scriptDevelopment/sqlAudit/DeptTree.vue

@@ -26,7 +26,7 @@
       :clickRowToExpand="false"
       :defaultExpandAll="true"
       :treeData="treeDataTwo"
-      :fieldNames="{ key: 'selectedDeptId', title: 'label' }"
+      :fieldNames="{ key: 'selectedDeptId', title: 'name' }"
       @select="handleSelect"
 
     />
@@ -40,6 +40,7 @@ import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
 import { Nullable } from '@vben/types';
 import { treeDataList, treeDataListTwo } from './mock';
 import Icon from "@/components/Icon/Icon.vue";
+import {tableList} from "./mock";
 
 defineOptions({ name: 'DeptTree' });
 
@@ -51,6 +52,8 @@ const treeRef1 = ref<Nullable<TreeActionType>>(null);
 const treeRef2 = ref<Nullable<TreeActionType>>(null);
 
 async function fetch() {
+  // 合并树形数据和表格数据
+  treeData.value = mergeTreeDataWithTableList(treeDataListTwo, tableList);
   treeData.value = treeDataList;
   treeDataTwo.value = treeDataListTwo;
   await nextTick(() => {
@@ -59,6 +62,26 @@ async function fetch() {
   });
 }
 
+// 合并数据的函数
+function mergeTreeDataWithTableList(treeDataListTwo, tableList) {
+  return treeDataListTwo.map((treeNode) => {
+    // 找到对应的tableList项，合并name属性
+    const tableItem = tableList.find((item) => item.selectedDeptId === treeNode.selectedDeptId);
+    if (tableItem) {
+      treeNode.name = tableItem.name; // 将tableList中的name添加到treeNode
+    }
+
+    // 如果有子节点，递归处理
+    if (treeNode.children && treeNode.children.length > 0) {
+      treeNode.children = mergeTreeDataWithTableList(treeNode.children, tableList);
+    }
+
+    return treeNode;
+  });
+}
+
+
+
 function getTree(treeRef) {
   const tree = unref(treeRef);
   if (!tree) {

src/views/scriptDevelopment/sqlAudit/mock.ts

@@ -72,18 +72,18 @@ export const treeDataList = [
 ];
 export const treeDataListTwo = [
   {
-    label: '提示规则',
+    name: '提示规则',
     selectedDeptId: 21,
     children: [
     ],
   },
   {
-    label: '错误问题规则',
+    name: '错误问题规则',
     selectedDeptId: 22,
     children: [
-      { label: 'has_agg', selectedDeptId: 23 },
-      { label: 'is_Param_Of_Agg', selectedDeptId: 24 },
-      { label: 'is_Location_Exists', selectedDeptId: 25 },
+      {selectedDeptId: 23 },
+      {selectedDeptId: 24 },
+      {selectedDeptId: 25 },
     ],
   },
 ];