| | |
| | | icon: 'ant-design:delete-outlined', |
| | | color: 'error', |
| | | popConfirm: { |
| | | title: '是否确认删除?', |
| | | placement: 'left', |
| | | title: '是否确认删除', |
| | | placement: 'left', |
| | | confirm: handleDelete.bind(null, record), |
| | | }, |
| | |
| | | <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> |