|
| 1 | +<template> |
| 2 | + <PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> |
| 3 | + <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> |
| 4 | + <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5"> |
| 5 | + <template #toolbar> |
| 6 | + <a-button type="primary" @click="handleCreate">新增导航</a-button> |
| 7 | + </template> |
| 8 | + <template #action="{ record }"> |
| 9 | + <TableAction |
| 10 | + :actions="[ |
| 11 | + { |
| 12 | + icon: 'clarity:note-edit-line', |
| 13 | + onClick: handleEdit.bind(null, record), |
| 14 | + }, |
| 15 | + { |
| 16 | + icon: 'ant-design:delete-outlined', |
| 17 | + color: 'error', |
| 18 | + popConfirm: { |
| 19 | + title: '是否确认删除', |
| 20 | + confirm: handleDelete.bind(null, record), |
| 21 | + }, |
| 22 | + }, |
| 23 | + ]" |
| 24 | + /> |
| 25 | + </template> |
| 26 | + </BasicTable> |
| 27 | + <AccountModal @register="registerModal" @success="handleSuccess" /> |
| 28 | + </PageWrapper> |
| 29 | +</template> |
| 30 | +<script lang="ts"> |
| 31 | + import { defineComponent } from 'vue'; |
| 32 | +
|
| 33 | + import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
| 34 | + import { delNavDetail, getNavDetailList } from "/@/api/nav/nav"; |
| 35 | + import { PageWrapper } from '/@/components/Page'; |
| 36 | + import DeptTree from './NavListTree.vue'; |
| 37 | +
|
| 38 | + import { useModal } from '/@/components/Modal'; |
| 39 | + import AccountModal from './NavListModal.vue'; |
| 40 | +
|
| 41 | + import { columns, searchFormSchema } from './list.data'; |
| 42 | +
|
| 43 | + export default defineComponent({ |
| 44 | + name: 'AccountManagement', |
| 45 | + components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction }, |
| 46 | + setup() { |
| 47 | + const [registerModal, { openModal }] = useModal(); |
| 48 | + const [registerTable, { reload, updateTableDataRecord }] = useTable({ |
| 49 | + title: '导航列表', |
| 50 | + api: getNavDetailList, |
| 51 | + rowKey: 'id', |
| 52 | + columns, |
| 53 | + formConfig: { |
| 54 | + labelWidth: 120, |
| 55 | + schemas: searchFormSchema, |
| 56 | + }, |
| 57 | + useSearchForm: true, |
| 58 | + showTableSetting: true, |
| 59 | + bordered: true, |
| 60 | + actionColumn: { |
| 61 | + width: 80, |
| 62 | + title: '操作', |
| 63 | + dataIndex: 'action', |
| 64 | + slots: { customRender: 'action' }, |
| 65 | + }, |
| 66 | + }); |
| 67 | +
|
| 68 | + function handleCreate() { |
| 69 | + openModal(true, { |
| 70 | + isUpdate: false, |
| 71 | + }); |
| 72 | + } |
| 73 | +
|
| 74 | + function handleEdit(record: Recordable) { |
| 75 | + console.log(record); |
| 76 | + openModal(true, { |
| 77 | + record, |
| 78 | + isUpdate: true, |
| 79 | + }); |
| 80 | + } |
| 81 | +
|
| 82 | + function handleDelete(record: Recordable) { |
| 83 | + delNavDetail(record); |
| 84 | + reload(); |
| 85 | + } |
| 86 | +
|
| 87 | + function handleSuccess({ isUpdate, values }) { |
| 88 | + if (isUpdate) { |
| 89 | + // 演示不刷新表格直接更新内部数据。 |
| 90 | + // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中 |
| 91 | + const result = updateTableDataRecord(values.id, values); |
| 92 | + console.log(result); |
| 93 | + } else { |
| 94 | + reload(); |
| 95 | + } |
| 96 | + } |
| 97 | +
|
| 98 | + function handleSelect(deptId = '') { |
| 99 | + console.log(deptId); |
| 100 | + reload({ searchInfo: { deptId } }); |
| 101 | + } |
| 102 | +
|
| 103 | + return { |
| 104 | + registerTable, |
| 105 | + registerModal, |
| 106 | + handleCreate, |
| 107 | + handleEdit, |
| 108 | + handleDelete, |
| 109 | + handleSuccess, |
| 110 | + handleSelect, |
| 111 | + }; |
| 112 | + }, |
| 113 | + }); |
| 114 | +</script> |
0 commit comments