| 提交 | 用户 | age | ||
| 37669d | 1 | <template> |
| 551fe5 | 2 | <PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> |
| V | 3 | <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> |
| 4 | <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5"> | |
| 37669d | 5 | <template #toolbar> |
| b7ce74 | 6 | <a-button type="primary" @click="handleCreate">新增账号</a-button> |
| 37669d | 7 | </template> |
| V | 8 | <template #action="{ record }"> |
| 9 | <TableAction | |
| 10 | :actions="[ | |
| 11 | { | |
| 3b8ca4 | 12 | icon: 'clarity:note-edit-line', |
| 37669d | 13 | onClick: handleEdit.bind(null, record), |
| V | 14 | }, |
| 15 | { | |
| 3b8ca4 | 16 | icon: 'ant-design:delete-outlined', |
| 37669d | 17 | color: 'error', |
| V | 18 | popConfirm: { |
| 19 | title: '是否确认删除', | |
| 20 | confirm: handleDelete.bind(null, record), | |
| 21 | }, | |
| 22 | }, | |
| 23 | ]" | |
| 24 | /> | |
| 25 | </template> | |
| 26 | </BasicTable> | |
| 4628d9 | 27 | <AccountModal @register="registerModal" @success="handleSuccess" /> |
| 551fe5 | 28 | </PageWrapper> |
| 37669d | 29 | </template> |
| V | 30 | <script lang="ts"> |
| 31 | import { defineComponent } from 'vue'; | |
| 32 | ||
| 33 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; | |
| 34 | import { getAccountList } from '/@/api/demo/system'; | |
| 551fe5 | 35 | import { PageWrapper } from '/@/components/Page'; |
| V | 36 | import DeptTree from './DeptTree.vue'; |
| 37669d | 37 | |
| V | 38 | import { useModal } from '/@/components/Modal'; |
| 39 | import AccountModal from './AccountModal.vue'; | |
| 40 | ||
| 41 | import { columns, searchFormSchema } from './account.data'; | |
| 42 | ||
| 43 | export default defineComponent({ | |
| 44 | name: 'AccountManagement', | |
| 551fe5 | 45 | components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction }, |
| 37669d | 46 | setup() { |
| V | 47 | const [registerModal, { openModal }] = useModal(); |
| 4628d9 | 48 | const [registerTable, { reload }] = useTable({ |
| 37669d | 49 | title: '账号列表', |
| V | 50 | api: getAccountList, |
| 51 | columns, | |
| 52 | formConfig: { | |
| 53 | labelWidth: 120, | |
| 54 | schemas: searchFormSchema, | |
| 55 | }, | |
| 56 | useSearchForm: true, | |
| 57 | showTableSetting: true, | |
| 3b8ca4 | 58 | bordered: true, |
| 37669d | 59 | actionColumn: { |
| 3b8ca4 | 60 | width: 80, |
| 37669d | 61 | title: '操作', |
| V | 62 | dataIndex: 'action', |
| 63 | slots: { customRender: 'action' }, | |
| 64 | }, | |
| 65 | }); | |
| 66 | ||
| 4628d9 | 67 | function handleCreate() { |
| 37669d | 68 | openModal(true, { |
| V | 69 | isUpdate: false, |
| 70 | }); | |
| 71 | } | |
| 72 | ||
| 73 | function handleEdit(record: Recordable) { | |
| b93f20 | 74 | console.log(record); |
| 37669d | 75 | openModal(true, { |
| V | 76 | record, |
| 77 | isUpdate: true, | |
| 78 | }); | |
| 79 | } | |
| 80 | ||
| 81 | function handleDelete(record: Recordable) { | |
| 82 | console.log(record); | |
| 83 | } | |
| 84 | ||
| 4628d9 | 85 | function handleSuccess() { |
| V | 86 | reload(); |
| 87 | } | |
| 88 | ||
| 7156e4 | 89 | function handleSelect(deptId = '') { |
| 551fe5 | 90 | reload({ searchInfo: { deptId } }); |
| V | 91 | } |
| 92 | ||
| 37669d | 93 | return { |
| V | 94 | registerTable, |
| 95 | registerModal, | |
| 4628d9 | 96 | handleCreate, |
| 37669d | 97 | handleEdit, |
| V | 98 | handleDelete, |
| 4628d9 | 99 | handleSuccess, |
| 551fe5 | 100 | handleSelect, |
| 37669d | 101 | }; |
| V | 102 | }, |
| 103 | }); | |
| 104 | </script> | |
