fix: 修复数据源配置错误、修改更多弹窗按钮的渲染方式

src/api/support/data-source-api.js

@@ -0,0 +1,5 @@
+import { getRequest ,postRequest} from '/src/lib/axios';
+
+export const dataSourceApi = ()=>{
+    
+}

src/views/support/data-source/components/data-source-drawer.vue

@@ -3,29 +3,21 @@
         :drawer-extra-props="drawerOptions.drawerExtraProps" :visible="drawerOptions.visible" @ok="handleOk"
         @cancel="handleCancel" @close="handleClose">
         <template #footer>
-            <div class="drawer-footer" >
+            <div class="drawer-footer">
                 <a-button type="primary" @click="handleOk">保存</a-button>
                 <a-button type="primary" @click="handleCancel">测试</a-button>
-                <a-dropdown>
+                <a-dropdown v-for="item in moreButton">
                     <template #overlay>
-                        <a-menu @click="handleMenuClick">
-                            <a-menu-item key="1">
-                                <UserOutlined />
-                                1st menu item
-                            </a-menu-item>
-                            <a-menu-item key="2">
-                                <UserOutlined />
-                                2nd menu item
-                            </a-menu-item>
-                            <a-menu-item key="3">
-                                <UserOutlined />
-                                3rd item
+                        <a-menu>
+                            <a-menu-item v-for="children in item.children"  @click="children.onClick">
+                                <component :is="getIcon(children.icon)" />
+                                {{ children.name }}
                             </a-menu-item>
                         </a-menu>
                     </template>
-                    <a-button>
-                        更多
-                        <RightOutlined />
+                    <a-button @click="item.onClick">
+                        {{item.name}}
+                        <component :is="getIcon(item.icon)" />
                     </a-button>
                 </a-dropdown>
             </div>
@@ -37,27 +29,56 @@
 </template>
 
 <script setup lang="jsx">
+import { ref } from 'vue';
+import * as icons from '@ant-design/icons-vue';
+
 import BsDrawer, { useBsDrawer } from '/@/components/BsUi/Drawer/index.js';
 import BsForm, { useBsForm } from '/@/components/BsUi/Form/index.js';
-import { ref } from 'vue';
+import { DISPLAY_STATE, REQUIRED_STATE } from '/@/components/BsUi/constant';
+/* 更多弹窗按钮 */
+const moreButton = [
+    {
+        name: '更多',
+        icon: 'RightOutlined',
+        onClick:()=>{
+        
+        },
+        children: [
+            {
+                key: 0,
+                name: '测试1',
+                icon: 'SafetyCertificateOutlined',
+                onClick: () => {
 
-const bsFormRef = ref(null);
+                }
+            },
+            {
+                key: 1,
+                name: '测试2',
+                icon: '',
+                onClick: () => {
 
-const {
-    setDrawerPropsValue: setDVal,
-    drawerOptions,
-    getDrawerPropsValue: getDVal,
-} = useBsDrawer({
-    drawerOptions: {
-        width: '500px',
-        title: '新增数据源',
-        visible: false,
-        drawerExtraProps: {
-            destroyOnClose: true,
-            maskClosable: true
-        },
-    },
-});
+                }
+            },
+            {
+                key: 2,
+                name: '测试3',
+                icon: '',
+                onClick: () => {
+
+                }
+            },
+        ]
+    }
+]
+
+function getIcon(name) {
+    return icons[name]
+}
+
+/* 表单 */
+const bsFormRef = ref(null);
+const formData = ref([])
 
 const { formOptions } = useBsForm({
     formOptions: {
@@ -69,9 +90,9 @@ const { formOptions } = useBsForm({
                     placeholder: '请输入数据源名称',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -90,9 +111,9 @@ const { formOptions } = useBsForm({
                     placeholder: '请选择数据库类型',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -112,9 +133,9 @@ const { formOptions } = useBsForm({
                     unCheckedChildren: "关闭"
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -133,9 +154,9 @@ const { formOptions } = useBsForm({
                     placeholder: '请输入服务器IP',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -154,9 +175,9 @@ const { formOptions } = useBsForm({
                     placeholder: '请输入端口号',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -175,9 +196,9 @@ const { formOptions } = useBsForm({
                     placeholder: '请输入数据库名称',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -196,9 +217,9 @@ const { formOptions } = useBsForm({
                     placeholder: '请输入用户名',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -217,9 +238,9 @@ const { formOptions } = useBsForm({
                     placeholder: '请输入数据库名称',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -239,9 +260,9 @@ const { formOptions } = useBsForm({
                     unCheckedChildren: "否"
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -261,9 +282,9 @@ const { formOptions } = useBsForm({
                     type: 'number',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -283,9 +304,9 @@ const { formOptions } = useBsForm({
                     type: 'number',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -304,9 +325,9 @@ const { formOptions } = useBsForm({
                     placeholder: '请选择所属机构',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -326,9 +347,9 @@ const { formOptions } = useBsForm({
                     type: 'number',
                 },
                 field: 'name',
-                sort: true,
-                visible: true,
-                required: true,
+                sort: '1',
+                visible: DISPLAY_STATE.VISIBLE,
+                required: REQUIRED_STATE.REQUIRED,
                 formItemExtraProps: {
                     rules: [
                         {
@@ -342,9 +363,7 @@ const { formOptions } = useBsForm({
             },
         ],
 
-        formData: {
-            name: '',
-        },
+        formData: formData.value,
         formId: 'formId',
         formExtraProps: {
             labelCol: { span: 5 },
@@ -352,6 +371,22 @@ const { formOptions } = useBsForm({
         },
     },
 });
+/* 抽屉 */
+const {
+    setDrawerPropsValue: setDVal,
+    drawerOptions,
+    getDrawerPropsValue: getDVal,
+} = useBsDrawer({
+    drawerOptions: {
+        width: '500px',
+        title: '新增数据源',
+        visible: false,
+        drawerExtraProps: {
+            destroyOnClose: true,
+            maskClosable: true
+        },
+    },
+});
 
 const closeDrawer = () => {
     setDVal('visible', false);
@@ -374,9 +409,15 @@ const handleClose = async () => {
     setDVal('visible', false);
 };
 
-const showDrawer = () => {
+const showDrawer = (isEdit, record) => {
     setDVal('visible', true);
-    setDVal('title', '修改标题');
+    if (isEdit) {
+        setDVal('title', '修改数据源');
+        formData.value = record
+    } else {
+        setDVal('title', '新增数据源');
+        formData.value = []
+    }
 };
 
 defineExpose({
@@ -384,7 +425,7 @@ defineExpose({
 });
 </script>
 <style scoped lang="scss">
-.drawer-footer{
+.drawer-footer {
     display: flex;
     gap: 10px;
 }

src/views/support/data-source/index.vue

@@ -16,17 +16,21 @@
 <script setup lang="jsx">
   import { pick } from 'lodash';
   import { ref, onMounted, h } from 'vue';
+  import { Modal } from 'ant-design-vue';
 
   import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
 
   import dataSourceDrawer from './components/data-source-drawer.vue';
+  import { dataSourceApi } from '/@/api/support/data-source-api';
   const dataSourceDrawerRef = ref(null);
   const {
     tableOptions,
     setTablePropsValue: setValue,
     getTablePropsValue: getValue,
+    fetchTableData,
   } = useBsTable({
     tableOptions: {
+      url: '',
       gridOptions: {
         loading: false,
         columns: [
@@ -53,8 +57,7 @@
                   checked-children='连接中'
                   un-checked-children='已禁用'
                   type='primary'
-                >
-                </a-switch>,
+                ></a-switch>,
               ],
             },
           },
@@ -78,7 +81,48 @@
             field: 'name',
             title: '显示顺序',
           },
+          {
+            field: 'opt',
+            title: '操作',
+            width: '120px',
+            fixed: 'right',
+            slots: {
+              default({ row, column }) {
+                return (
+                  <div>
+                    <a-button
+                      type='link'
+                      size='small'
+                      disabled={false}
+                      onClick={() => {
+                        handleEdit(row);
+                      }}
+                    >
+                      编辑
+                    </a-button>
+                    <a-button
+                      type='link'
+                      size='small'
+                      danger
+                      disabled={false}
+                      onClick={() => {
+                        confirmDelete(row);
+                      }}
+                    >
+                      删除
+                    </a-button>
+                  </div>
+                );
+              },
+            },
+          },
         ],
+        data: [
+          {
+            id: 1,
+            name: '测试数据',
+          },
+        ], // 模拟数据源
       },
       searchConfig: {
         enabled: true,
@@ -104,7 +148,7 @@
         enabled: true,
         pageSize: 10,
         pageNum: 1,
-        total: 100,
+        // total: 100,
         onChange: () => {
           fetchTableData();
         },
@@ -114,6 +158,10 @@
           fetchTableData();
         },
       },
+      tableSearchBeforeBiz() {
+        const searchParams = getValue('searchConfig.data');
+        setValue('searchConfig.data', { ...searchParams, otherField: 'abc' });
+      },
     },
   });
   const getSearchParams = () => {
@@ -122,37 +170,49 @@
   const getPageInfo = () => {
     return pick(getValue('pagerConfig.pageInfo'), ['pageNum', 'pageSize']);
   };
+  /* 加载 */
 
-  const fetchTableData = () => {
-    setValue('gridOptions.loading', true);
-
-    const params = {
-      ...getSearchParams(),
-      ...getPageInfo(),
-    };
-
-    setTimeout(() => {
-      setValue('gridOptions.data', [
-        {
-          id: '1111111',
-          name: 'John Doe',
-        },
-      ]);
-
-      setValue('gridOptions.loading', false);
-    }, 1000);
-  };
   onMounted(() => {
     console.log('表格已加载');
     fetchTableData();
   });
   /* 新增按钮 */
   const openEditDrawer = () => {
-    dataSourceDrawerRef.value.showDrawer();
+    openDrawer(false, null);
+  };
+  /* 更改连接数据源状态 */
+  const handleChangeDisabled = (checked, rowData) => {
+    console.log(checked, rowData);
+  };
+  /* 编辑 */
+  const handleEdit = (record) => {
+    openDrawer(true, record);
   };
-  const handleChangeDisabled = (checked,rowData) => { 
-    console.log(checked,rowData);
-    
+  /* 打开抽屉 */
+  const openDrawer = (isEdit, record) => {
+    if (isEdit) {
+      dataSourceDrawerRef.value.showDrawer(isEdit, record);
+    } else {
+      dataSourceDrawerRef.value.showDrawer(isEdit, null);
+    }
+  };
+  /* 删除弹窗 */
+  const confirmDelete = (dataId, dataName) => {
+    Modal.confirm({
+      title: '警告',
+      content: `确定要删除【${dataName}】数据源吗?`,
+      okText: '删除',
+      okType: 'danger',
+      onOk() {
+        deleteDataSource(dataId);
+      },
+      cancelText: '取消',
+      onCancel() {},
+    });
+  };
+  /* 删除事件 */
+  const deleteDataSource = (dataId) => {
+
   };
 </script>
 <style scoped lang="scss"></style>