From 46c3d28c5633baaddad0da441185310b9360a45b Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期三, 03 七月 2024 14:56:21 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/system/menu/index.vue | 127 ++++++++++++++++++-----------------------
1 files changed, 56 insertions(+), 71 deletions(-)
diff --git a/src/views/demo/system/menu/index.vue b/src/views/demo/system/menu/index.vue
index 3d8dc76..8578b35 100644
--- a/src/views/demo/system/menu/index.vue
+++ b/src/views/demo/system/menu/index.vue
@@ -16,8 +16,7 @@
icon: 'ant-design:delete-outlined',
color: 'error',
popConfirm: {
- title: '鏄惁纭鍒犻櫎?',
- placement: 'left',
+ title: '鏄惁纭鍒犻櫎',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
@@ -30,82 +29,68 @@
<MenuDrawer @register="registerDrawer" @success="handleSuccess" />
</div>
</template>
-<script lang="ts">
- import { defineComponent, nextTick } from 'vue';
+<script lang="ts" setup>
+ import { nextTick } from 'vue';
- import { BasicTable, useTable, TableAction } from '/@/components/Table';
- import { getMenuList } from '/@/api/demo/system';
+ import { BasicTable, useTable, TableAction } from '@/components/Table';
+ import { getMenuList } from '@/api/demo/system';
- import { useDrawer } from '/@/components/Drawer';
+ import { useDrawer } from '@/components/Drawer';
import MenuDrawer from './MenuDrawer.vue';
import { columns, searchFormSchema } from './menu.data';
- export default defineComponent({
- name: 'MenuManagement',
- components: { BasicTable, MenuDrawer, TableAction },
- setup() {
- const [registerDrawer, { openDrawer }] = useDrawer();
- const [registerTable, { reload, expandAll }] = useTable({
- title: '鑿滃崟鍒楄〃',
- api: getMenuList,
- columns,
- formConfig: {
- labelWidth: 120,
- schemas: searchFormSchema,
- },
- isTreeTable: true,
- pagination: false,
- striped: false,
- useSearchForm: true,
- showTableSetting: true,
- bordered: true,
- showIndexColumn: false,
- canResize: false,
- actionColumn: {
- width: 80,
- title: '鎿嶄綔',
- dataIndex: 'action',
- // slots: { customRender: 'action' },
- fixed: undefined,
- },
- });
+ defineOptions({ name: 'MenuManagement' });
- function handleCreate() {
- openDrawer(true, {
- isUpdate: false,
- });
- }
-
- function handleEdit(record: Recordable) {
- openDrawer(true, {
- record,
- isUpdate: true,
- });
- }
-
- function handleDelete(record: Recordable) {
- console.log(record);
- }
-
- function handleSuccess() {
- reload();
- }
-
- function onFetchSuccess() {
- // 婕旂ず榛樿灞曞紑鎵�鏈夎〃椤�
- nextTick(expandAll);
- }
-
- return {
- registerTable,
- registerDrawer,
- handleCreate,
- handleEdit,
- handleDelete,
- handleSuccess,
- onFetchSuccess,
- };
+ const [registerDrawer, { openDrawer }] = useDrawer();
+ const [registerTable, { reload, expandAll }] = useTable({
+ title: '鑿滃崟鍒楄〃',
+ api: getMenuList,
+ columns,
+ formConfig: {
+ labelWidth: 120,
+ schemas: searchFormSchema,
+ },
+ isTreeTable: true,
+ pagination: false,
+ striped: false,
+ useSearchForm: true,
+ showTableSetting: true,
+ bordered: true,
+ showIndexColumn: false,
+ canResize: false,
+ actionColumn: {
+ width: 80,
+ title: '鎿嶄綔',
+ dataIndex: 'action',
+ // slots: { customRender: 'action' },
+ fixed: undefined,
},
});
+
+ function handleCreate() {
+ openDrawer(true, {
+ isUpdate: false,
+ });
+ }
+
+ function handleEdit(record: Recordable) {
+ openDrawer(true, {
+ record,
+ isUpdate: true,
+ });
+ }
+
+ function handleDelete(record: Recordable) {
+ console.log(record);
+ }
+
+ function handleSuccess() {
+ reload();
+ }
+
+ function onFetchSuccess() {
+ // 婕旂ず榛樿灞曞紑鎵�鏈夎〃椤�
+ nextTick(expandAll);
+ }
</script>
--
Gitblit v1.9.3