修改数据源管理

src/views/dataSourceManage/dataSource/DataSourceDrawer.vue

 <template>
   <!-- 数据源-连接-新增或修改 抽屉 -->
-  <BasicDrawer
+  <BasicModal
     v-bind="$attrs"
-    @register="registerDrawer"
+    @register="registerModal"
     showFooter
     :title="getTitle"
-    width="500px"
+    width="40%"
     @ok="handleSubmit"
   >
     <BasicForm @register="registerForm" />
-  </BasicDrawer>
+  </BasicModal>
 </template>
 <script lang="ts" setup>
   import { ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '@/components/Form';
-  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
   import { useMessage } from '@/hooks/web/useMessage';
   import { formSchema } from '@/views/dataSourceManage/dataSource/dataSource.data';
   import { addDataSource, updateDataSource } from '@/api/system/dataSource/dataSource';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '@/components/Modal';
 
   defineOptions({ name: 'DataSourceDrawer' });
   const emit = defineEmits(['success', 'register']);
@@ -26,9 +27,9 @@
   const connectId = ref(null);
 
   // 初始化抽屉
-  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     resetFields();
-    setDrawerProps({ confirmLoading: false });
+    setModalProps({ confirmLoading: false });
     handleType.value = data?.handleType;
     setFieldsValue({
       ...data?.record,
@@ -36,7 +37,6 @@
     // 更新表单的 disabled 属性
     setProps({ disabled: data?.handleType === 'view' });
   });
-
   const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
     labelWidth: 90,
     baseColProps: { span: 24 },
@@ -64,14 +64,13 @@
   async function handleSubmit() {
     try {
       const formData = await validate();
-      setDrawerProps({ confirmLoading: true });
       // 编辑
       if (unref(handleType)) {
         formData.id = connectId.value;
         updateDataSource(formData).then((res) => {
           if (res.code === 200) {
             createMessage.success('编辑成功');
-            closeDrawer();
+            closeModal();
             emit('success', {
               handleType: unref(handleType),
               values: { ...formData, id: connectId.value },
@@ -92,7 +91,7 @@
         addDataSource(paramsAdd).then((res) => {
           if (res.code === 200) {
             createMessage.success('新增成功');
-            closeDrawer();
+            closeModal();
             emit('success', {
               handleType: unref(handleType),
               values: { ...formData, id: connectId.value },
@@ -101,7 +100,7 @@
         });
       }
     } finally {
-      setDrawerProps({ confirmLoading: false });
+      setModalProps({ confirmLoading: false });
     }
   }
 </script>

src/views/dataSourceManage/dataSource/dataSource.data.ts

@@ -192,3 +192,36 @@ export const restColumns: BasicColumn[] = [
     edit: true,
   },
 ];
+export const pageConfigFormSchema: FormSchema[] = [
+  {
+    field: 'flag',
+    label: '映射策略',
+    component: 'RadioGroup',
+    colProps: { lg: 24, md: 24 },
+    componentProps: {
+      options: [
+        { label: '全部生效', value: '0' },
+        { label: '数据库生效', value: '1' },
+      ],
+    },
+    required: true,
+  },
+];
+export const pageConfigColumns: BasicColumn[] = [
+  {
+    title: '分层名称',
+    dataIndex: 'pageConfigName',
+    width: 150,
+  },
+  {
+    title: '分层英文名称',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '映射规则',
+    dataIndex: 'rule',
+    width: 150,
+    edit: true,
+  },
+];

src/views/dataSourceManage/dataSource/index.vue

@@ -2,6 +2,7 @@
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
     <BasicTable @register="registerTable">
       <template #toolbar>
+        <a-button type="primary" @click="pageConfig">默认分层配置</a-button>
         <a-button type="primary" @click="handleDataSourceReplace">数据源替换</a-button>
         <a-button type="primary" @click="handleReload">刷新</a-button>
         <a-button type="primary" @click="handleAdd">新增</a-button>
@@ -48,6 +49,7 @@
     <DataSourceDrawer @register="registerDataSourceDrawer" />
     <ConnectModal @register="registerConnectModal" />
     <RestModal @register="registerRestModal" />
+    <PageConfigModal @register="registerpageConfigModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -59,17 +61,18 @@
   import { columns, searchFormSchema } from '@/views/dataSourceManage/dataSource/dataSource.data';
   import ConnectModal from '@/views/dataSourceManage/connect/ConnectModal.vue';
   import DataSourceDrawer from '@/views/dataSourceManage/dataSource/DataSourceDrawer.vue';
-  import { useDrawer } from '@/components/Drawer';
   import { dataSourceListData } from '@/views/dataSourceManage/dataSource/dataSourceData';
   import RestModal from './resetModal.vue';
+  import PageConfigModal from './pageConfigModal.vue';
 
   defineOptions({ name: 'AccountManagement' });
   const { createMessage } = useMessage();
   const [registerModal, { openModal }] = useModal();
   const tableData = ref([]);
-  const [registerDataSourceDrawer, { openDrawer: openDataSourceDrawer }] = useDrawer();
+  const [registerDataSourceDrawer, { openModal: openDataSourceDrawer }] = useModal();
   const [registerConnectModal, { openModal: openConnectModal }] = useModal();
   const [registerRestModal, { openModal: openRestModal }] = useModal();
+  const [registerpageConfigModal, { openModal: openpageConfigModal }] = useModal();
   const [registerTable, { reload, getForm }] = useTable({
     api: async () => {
       const response = {
@@ -105,7 +108,9 @@
   function handleDataSourceReplace() {
     openRestModal(true, {});
   }
-
+  function pageConfig() {
+    openpageConfigModal(true, {});
+  }
   /** 刷新 按钮 */
   function handleReload() {
     reload();

src/views/dataSourceManage/dataSource/index1.vue

-<template>
-  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <BasicTable @register="registerTable">
-      <template #toolbar>
-        <a-button type="primary" @click="handleDataSourceReplace">数据源替换</a-button>
-        <a-button type="primary" @click="handleReload">刷新</a-button>
-        <a-button type="primary" @click="handleAdd">新增</a-button>
-      </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'action'">
-          <TableAction
-            :actions="[
-              {
-                icon: 'ant-design:signature-outlined',
-                // label: '重命名',
-                onClick: handleRename.bind(null, record),
-              },
-              {
-                icon: 'ant-design:api-outlined',
-                // label: '查看连接',
-                onClick: handleViewConnect.bind(null, record),
-              },
-              {
-                icon: 'clarity:note-edit-line',
-                // label: '编辑数据源',
-                onClick: handleEdit.bind(null, record),
-              },
-              {
-                icon: 'clarity:info-standard-line',
-                // label: '查看详情',
-                onClick: handleViewDetails.bind(null, record),
-              },
-              {
-                icon: 'ant-design:delete-outlined',
-                // label: '删除',
-                color: 'error',
-                popConfirm: {
-                  title: '是否确认删除',
-                  placement: 'left',
-                  confirm: handleDelete.bind(null, record),
-                },
-              },
-            ]"
-          />
-        </template>
-      </template>
-    </BasicTable>
-  </PageWrapper>
-  <DataSourceDrawer @register="registerDataSourceDrawer"/>
-  <ConnectModal @register="registerConnectModal"/>
-</template>
-<script lang="ts" setup>
-import {ref} from 'vue';
-import {PageWrapper} from '@/components/Page';
-import {BasicTable, useTable, TableAction} from '@/components/Table';
-import {useMessage} from '@/hooks/web/useMessage';
-import {useModal} from '@/components/Modal';
-import {useDrawer} from '@/components/Drawer';
-import {columns, searchFormSchema} from "@/views/dataSourceManage/dataSource/dataSource.data";
-import {
-  getDataSourceListByPage,
-  deleteById
-} from "@/api/system/dataSource/dataSource";
-import DataSourceDrawer from "@/views/dataSourceManage/dataSource/DataSourceDrawer.vue";
-import ConnectModal from "@/views/dataSourceManage/connect/ConnectModal.vue";
-
-const {createMessage} = useMessage();
-const [registerDataSourceDrawer, {openDrawer: openDataSourceDrawer}] = useDrawer();
-const [registerConnectModal, {openModal: openConnectModal}] = useModal();
-
-const [registerTable, {reload, getForm}] = useTable({
-  api: getDataSourceListByPage,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-  },
-  useSearchForm: true,
-  showTableSetting: false,
-  bordered: true,
-  showIndexColumn: false,
-  actionColumn: {
-    width: 200,
-    title: '操作',
-    dataIndex: 'action',
-    fixed: undefined,
-  },
-});
-
-/** 数据源替换 按钮 */
-function handleDataSourceReplace() {
-  createMessage.info('正在进行数据源替换');
-  setTimeout(() => {
-    createMessage.success('数据源替换成功');
-    reload();
-  }, Math.floor(Math.random() * 2000) + 100)
-}
-
-/** 刷新 按钮 */
-function handleReload() {
-  reload();
-}
-
-/** 新增 按钮 */
-function handleAdd() {
-  openDataSourceDrawer(true, {
-    handleType: 'add',
-  })
-}
-
-/** 重命名 按钮 */
-function handleRename(record: Recordable) {
-  openDataSourceDrawer(true, {
-    handleType: 'rename',
-    record
-  })
-}
-
-/** 查看连接 按钮 */
-function handleViewConnect(record: Recordable) {
-  openConnectModal(true, {
-    handleType: 'view',
-    record
-  })
-}
-
-/** 编辑数据源 按钮 */
-function handleEdit(record: Recordable) {
-  openDataSourceDrawer(true, {
-    handleType: 'edit',
-    record
-  })
-}
-
-/** 查看详情 按钮 */
-function handleViewDetails(record: Recordable) {
-  openDataSourceDrawer(true, {
-    handleType: 'view',
-    record
-  })
-}
-
-/** 删除 按钮 */
-async function handleDelete(record: Recordable) {
-  await deleteById(record.id);
-  await reload();
-}
-
-/** 成功时返回的方法 */
-function handleSuccess() {
-  reload();
-}
-</script>

src/views/dataSourceManage/dataSource/pageConfigModal.vue

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    showFooter
+    :title="getTitle"
+    width="50%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+    <BasicTable @register="registerTable" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useModalInner } from '@/components/Modal';
+  import BasicModal from '@/components/Modal/src/BasicModal.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { pageConfigData } from '@/views/dataSourceManage/dataSource/dataSourceData';
+  import {
+    pageConfigColumns,
+    pageConfigFormSchema,
+  } from '@/views/dataSourceManage/dataSource/dataSource.data';
+  import { BasicForm, useForm } from '@/components/Form';
+
+  defineOptions({ name: 'ResetNameModal' });
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+
+  // 初始化弹窗
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {});
+
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: pageConfigFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+
+  const [registerTable, { reload, getForm }] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: pageConfigData.length,
+        code: '',
+        message: '',
+        data: [],
+      };
+      return { ...response, data: pageConfigData };
+    },
+    columns: pageConfigColumns,
+    pagination: false,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: false,
+  });
+
+  const getTitle = ref('数据分层映射规则配置');
+
+  /** 确认按钮 */
+  function handleSubmit() {
+    createMessage.success('修改配置成功');
+    resetFields;
+    closeModal();
+  }
+</script>