You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.1 KiB
109 lines
3.1 KiB
<template> |
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> |
|
<BasicTable @register="registerTable" @row-click="clickSubTable" class="w-2/4 xl:w-2/4"> |
|
<template #toolbar> |
|
<a-button type="primary" @click="handleCreate">新增字典</a-button> |
|
</template> |
|
<template #action="{ record }"> |
|
<TableAction |
|
:actions="[ |
|
{ |
|
icon: 'clarity:note-edit-line', |
|
onClick: handleEdit.bind(null, record), |
|
}, |
|
{ |
|
icon: 'ant-design:delete-outlined', |
|
color: 'error', |
|
popConfirm: { |
|
title: '是否确认删除', |
|
confirm: handleDelete.bind(null, record), |
|
}, |
|
}, |
|
]" |
|
/> |
|
</template> |
|
</BasicTable> |
|
<DictDataTable ref="dictSubRef" class="w-2/4 xl:w-2/4" /> |
|
<DictModal @register="registerModal" @success="handleSuccess" /> |
|
</PageWrapper> |
|
</template> |
|
<script lang="ts"> |
|
import { defineComponent, ref } from 'vue'; |
|
// 引入基础组件 |
|
import { PageWrapper } from '/@/components/Page'; |
|
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|
// 插入数据内容 |
|
import { columns, searchFormSchema} from './dict.data'; |
|
// 通过API接口获取日志 |
|
import { list, remove } from '/@/api/controller/system/dict'; |
|
import { useModal } from '/@/components/Modal'; |
|
import DictModal from './DictModal.vue'; |
|
import DictDataTable from './DictDataTable.vue'; |
|
import { useMessage } from '/@/hooks/web/useMessage'; |
|
|
|
export default defineComponent({ |
|
components: { BasicTable, PageWrapper, DictModal, DictDataTable, TableAction }, |
|
setup() { |
|
const { createMessage } = useMessage(); |
|
const dictSubRef = ref(); |
|
const [registerModal, { openModal }] = useModal(); |
|
const [registerTable, { reload }] = useTable({ |
|
title: '字典列表', |
|
api: list, |
|
columns, |
|
formConfig: { |
|
labelWidth: 100, |
|
schemas: searchFormSchema, |
|
}, |
|
useSearchForm: true, |
|
showTableSetting: true, |
|
bordered: true, |
|
showIndexColumn: false, |
|
actionColumn: { |
|
width: 80, |
|
title: '操作', |
|
dataIndex: 'action', |
|
slots: { customRender: 'action' }, |
|
fixed: undefined, |
|
}, |
|
}); |
|
|
|
function handleCreate() { |
|
openModal(true, { |
|
isUpdate: false, |
|
}); |
|
} |
|
function handleEdit(record: Recordable) { |
|
openModal(true, { |
|
record, |
|
isUpdate: true, |
|
}); |
|
} |
|
|
|
async function handleDelete(record: Recordable) { |
|
await remove({ id: record.id }); |
|
createMessage.success('删除成功!'); |
|
handleSuccess(); |
|
} |
|
|
|
function clickSubTable(record: Recordable) { |
|
dictSubRef.value.filterByDictType(record); |
|
} |
|
|
|
function handleSuccess() { |
|
reload(); |
|
} |
|
|
|
return { |
|
registerTable, |
|
registerModal, |
|
clickSubTable, |
|
handleCreate, |
|
handleEdit, |
|
handleDelete, |
|
handleSuccess, |
|
dictSubRef, |
|
}; |
|
}, |
|
}); |
|
</script>
|
|
|