<script lang="ts" setup>
|
import type { TreeActionType, TreeItem } from '@jnpf/ui';
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { nextTick, onMounted, reactive, ref, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicLeftTree } from '@jnpf/ui';
|
import { useDrawer } from '@jnpf/ui/drawer';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { delDictionaryData, getDictionaryDataList, getDictionaryType } from '#/api/systemData/dictionary';
|
import { $t } from '#/locales';
|
import { useBaseStore } from '#/store';
|
|
import TypeList from './components/index.vue';
|
import Form from './Form.vue';
|
|
defineOptions({ name: 'SysDataDictionary' });
|
|
const { createMessage } = useMessage();
|
const baseStore = useBaseStore();
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
|
const columns: BasicColumn[] = [
|
{ title: '名称', dataIndex: 'fullName' },
|
{ title: '编码', dataIndex: 'enCode' },
|
{ title: '排序', dataIndex: 'sortCode', width: 70, align: 'center' },
|
{ title: '状态', dataIndex: 'enabledMark', width: 70, align: 'center', slots: { default: 'enabledMark' } },
|
];
|
const searchInfo = reactive({
|
typeId: '',
|
isTree: 0,
|
});
|
const tableSetting = reactive({
|
expand: false,
|
});
|
const leftDropDownActions = [
|
{
|
label: '分类管理',
|
onClick: handleTypeManage,
|
},
|
];
|
const leftTreeRef = ref<Nullable<TreeActionType>>(null);
|
const treeLoading = ref(false);
|
const treeData = ref<TreeItem[]>([]);
|
const [registerTable, { reload, setLoading, getForm }] = useVxeTable({
|
api: getDictionaryDataList,
|
columns,
|
immediate: false,
|
pagination: false,
|
isTreeTable: true,
|
useSearchForm: true,
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
],
|
},
|
actionColumn: {
|
width: 100,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
});
|
|
function getTableActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.editText'),
|
onClick: addOrUpdateHandle.bind(null, record.id),
|
},
|
{
|
label: $t('common.delText'),
|
color: 'error',
|
modelConfirm: {
|
onOk: handleDelete.bind(null, record.id),
|
},
|
},
|
];
|
}
|
function initData(isInit = false) {
|
treeLoading.value = true;
|
if (isInit) setLoading(true);
|
getDictionaryType().then((res) => {
|
treeData.value = res.data.list;
|
nextTick(() => {
|
if (isInit) {
|
searchInfo.typeId = (unref(treeData)[0] as any).id;
|
searchInfo.isTree = (unref(treeData)[0] as any).isTree;
|
}
|
const leftTree = unref(leftTreeRef);
|
leftTree?.setSelectedKeys([searchInfo.typeId]);
|
tableSetting.expand = !!searchInfo.isTree;
|
if (isInit) searchInfo.typeId && reload();
|
treeLoading.value = false;
|
});
|
});
|
}
|
function reloadTree() {
|
treeData.value = [];
|
initData();
|
}
|
function handleTreeSelect(id) {
|
if (!id || searchInfo.typeId === id) return;
|
searchInfo.typeId = id;
|
const leftTree = unref(leftTreeRef);
|
const selectedNode = leftTree?.getSelectedNode(searchInfo.typeId);
|
searchInfo.isTree = (selectedNode as TreeItem).isTree;
|
tableSetting.expand = !!searchInfo.isTree;
|
getForm().resetFields();
|
}
|
function addOrUpdateHandle(id = '') {
|
openFormModal(true, {
|
id,
|
...searchInfo,
|
});
|
}
|
function handleDelete(id) {
|
delDictionaryData(id).then((res) => {
|
createMessage.success(res.msg);
|
baseStore.setDictionaryList();
|
reload();
|
});
|
}
|
function handleTypeManage() {
|
openDrawer(true);
|
}
|
function onOpenChange(visible: boolean) {
|
if (!visible) reloadTree();
|
}
|
|
onMounted(() => {
|
initData(true);
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-left">
|
<BasicLeftTree
|
title="字典分类"
|
ref="leftTreeRef"
|
:tree-data="treeData"
|
:loading="treeLoading"
|
@reload="reloadTree"
|
@select="handleTreeSelect"
|
:drop-down-actions="leftDropDownActions" />
|
</div>
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable" :search-info="searchInfo" :table-setting="tableSetting">
|
<template #tableTitle>
|
<a-button
|
type="primary"
|
pre-icon="icon-ym icon-ym-btn-add"
|
@click="addOrUpdateHandle()"
|
:disabled="searchInfo.typeId === '0' || searchInfo.typeId === '1'">
|
{{ $t('common.addText') }}
|
</a-button>
|
</template>
|
<template #enabledMark="{ record }">
|
<a-tag :color="record.enabledMark == 1 ? 'success' : 'error'">{{ record.enabledMark == 1 ? '启用' : '禁用' }}</a-tag>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<Form @register="registerForm" @reload="reload" />
|
<TypeList @register="registerDrawer" @open-change="onOpenChange" />
|
</div>
|
</template>
|
