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.
117 lines
3.2 KiB
117 lines
3.2 KiB
<template> |
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> |
|
<BasicTable @register="registerTable"> |
|
<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> |
|
<DictDataModal @register="registerModal" @success="handleSuccess" /> |
|
</PageWrapper> |
|
</template> |
|
<script lang="ts"> |
|
import { defineComponent, ref, reactive } from 'vue'; |
|
// 引入基础组件 |
|
import { PageWrapper } from '/@/components/Page'; |
|
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|
// 插入数据内容 |
|
import { columns, searchFormSchema } from './dictdata.data'; |
|
// 通过API接口获取日志 |
|
import { list, remove } from '/@/api/system/dictdata'; |
|
import { useModal } from '/@/components/Modal'; |
|
import DictDataModal from './DictDataModal.vue'; |
|
import { useMessage } from '/@/hooks/web/useMessage'; |
|
|
|
export default defineComponent({ |
|
components: { BasicTable, PageWrapper, DictDataModal, TableAction }, |
|
setup() { |
|
const { createMessage } = useMessage(); |
|
|
|
let dictType = ref<string>(''); |
|
let record = reactive({ |
|
dictType: '', |
|
parentId: 0, |
|
}); |
|
|
|
const [registerModal, { openModal }] = useModal(); |
|
const [registerTable, { reload, setProps }] = useTable({ |
|
title: '>>字典项列表', |
|
api: list, |
|
columns, |
|
formConfig: { |
|
labelWidth: 120, |
|
schemas: searchFormSchema, |
|
}, |
|
useSearchForm: true, |
|
showTableSetting: true, |
|
bordered: true, |
|
showIndexColumn: false, |
|
actionColumn: { |
|
width: 80, |
|
title: '操作', |
|
dataIndex: 'action', |
|
slots: { customRender: 'action' }, |
|
fixed: undefined, |
|
}, |
|
immediate: false, |
|
}); |
|
|
|
function filterByDictType(records: Recordable) { |
|
setProps({ searchInfo: { dictType: records.type } }); |
|
record.dictType = records.type; |
|
record.parentId = records.id; |
|
reload(); |
|
} |
|
|
|
function handleCreate() { |
|
openModal(true, { |
|
record, |
|
isUpdate: true, |
|
}); |
|
} |
|
function handleEdit(record: Recordable) { |
|
openModal(true, { |
|
record, |
|
isUpdate: true, |
|
}); |
|
} |
|
|
|
async function handleDelete(record: Recordable) { |
|
await remove({ id: record.id }); |
|
createMessage.success('删除成功!'); |
|
handleSuccess(); |
|
} |
|
|
|
function handleSuccess() { |
|
reload(); |
|
} |
|
return { |
|
registerTable, |
|
registerModal, |
|
handleCreate, |
|
handleEdit, |
|
handleDelete, |
|
handleSuccess, |
|
filterByDictType, |
|
dictType |
|
}; |
|
}, |
|
}); |
|
</script>
|
|
|