Browse Source

refactor(知识类型): 优化表单和表格字段顺序及抽屉组件使用

重构知识类型配置,调整表单和表格字段顺序以提升一致性
使用 useVbenDrawer 替代手动 ref 管理抽屉组件
weieryang 2 months ago
parent
commit
eeb8dac914

+ 15 - 14
apps/web-ele/src/views/knowledge/type/config-data.tsx

46
     },
46
     },
47
     fieldName: 'id',
47
     fieldName: 'id',
48
   },
48
   },
49
-  {
50
-    component: 'Input',
51
-    fieldName: 'icon',
52
-    label: '知识图标',
53
-    // 使用插槽自定义上传组件
54
-    rules: 'required',
55
-  },
49
+
56
   {
50
   {
57
     component: 'Input',
51
     component: 'Input',
58
     fieldName: 'name',
52
     fieldName: 'name',
75
     },
69
     },
76
     rules: 'required',
70
     rules: 'required',
77
   },
71
   },
78
-
72
+  {
73
+    component: 'Input',
74
+    fieldName: 'icon',
75
+    label: '知识图标',
76
+    // 使用插槽自定义上传组件
77
+    rules: 'required',
78
+  },
79
   {
79
   {
80
     component: 'Input',
80
     component: 'Input',
81
     fieldName: 'admin',
81
     fieldName: 'admin',
122
     width: 60,
122
     width: 60,
123
   },
123
   },
124
   {
124
   {
125
+    field: 'icon',
126
+    slots: { default: 'icon' },
127
+    title: '类别图标',
128
+    minWidth: 100,
129
+  },
130
+  {
125
     field: 'id',
131
     field: 'id',
126
     title: '类别ID',
132
     title: '类别ID',
127
     width: 80,
133
     width: 80,
131
     title: '类别名称',
137
     title: '类别名称',
132
     minWidth: 120,
138
     minWidth: 120,
133
   },
139
   },
134
-  {
135
-    field: 'icon',
136
-    slots: { default: 'icon' },
137
-    title: '类别图标',
138
-    minWidth: 100,
139
-  },
140
+
140
   {
141
   {
141
     field: 'description',
142
     field: 'description',
142
     title: '类别描述',
143
     title: '类别描述',

+ 9 - 14
apps/web-ele/src/views/knowledge/type/index.vue

5
 
5
 
6
 import type { VxeGridProps } from '#/adapter/vxe-table';
6
 import type { VxeGridProps } from '#/adapter/vxe-table';
7
 
7
 
8
-import { ref } from 'vue';
9
 import { useRouter } from 'vue-router';
8
 import { useRouter } from 'vue-router';
10
 
9
 
11
-import { Page } from '@vben/common-ui';
10
+import { Page, useVbenDrawer } from '@vben/common-ui';
12
 
11
 
13
 import { ElImage, ElMessageBox } from 'element-plus';
12
 import { ElImage, ElMessageBox } from 'element-plus';
14
 
13
 
74
   return mockData;
73
   return mockData;
75
 };
74
 };
76
 
75
 
76
+// 定义侧拉
77
+const [TypeDrawerCom, typeDrawerApi] = useVbenDrawer({
78
+  connectedComponent: TypeDrawer,
79
+});
80
+
77
 const deleteKnowledgeType = async (ids: string[]) => {
81
 const deleteKnowledgeType = async (ids: string[]) => {
78
   // 模拟删除操作
82
   // 模拟删除操作
79
   // console.log('删除知识库类别', ids);
83
   // console.log('删除知识库类别', ids);
134
   gridOptions,
138
   gridOptions,
135
 });
139
 });
136
 
140
 
137
-// 抽屉组件引用
138
-const typeDrawerRef = ref();
139
-
140
 // 新增知识库类别
141
 // 新增知识库类别
141
 const handleAdd = () => {
142
 const handleAdd = () => {
142
   // 调用抽屉组件的open方法
143
   // 调用抽屉组件的open方法
143
-  const drawerApi = typeDrawerRef.value?.getDrawerApi?.();
144
-  if (drawerApi) {
145
-    drawerApi.setData({ isUpdate: false }).open();
146
-  }
144
+  typeDrawerApi.setData({ isUpdate: false }).open();
147
 };
145
 };
148
 
146
 
149
 // 编辑知识库类别
147
 // 编辑知识库类别
150
 const handleEdit = (row: KnowledgeType) => {
148
 const handleEdit = (row: KnowledgeType) => {
151
   // 调用抽屉组件的open方法
149
   // 调用抽屉组件的open方法
152
-  const drawerApi = typeDrawerRef.value?.getDrawerApi?.();
153
-  if (drawerApi) {
154
-    drawerApi.setData({ id: row.id, isUpdate: true }).open();
155
-  }
150
+  typeDrawerApi.setData({ id: row.id, isUpdate: true }).open();
156
 };
151
 };
157
 
152
 
158
 // 查看知识库类别详情
153
 // 查看知识库类别详情
203
     </BasicTable>
198
     </BasicTable>
204
 
199
 
205
     <!-- 抽屉组件 -->
200
     <!-- 抽屉组件 -->
206
-    <TypeDrawer @reload="BasicTableApi.reload()" />
201
+    <TypeDrawerCom />
207
   </Page>
202
   </Page>
208
 </template>
203
 </template>