<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { reactive, ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { delArea, getAreaList } from '#/api/system/area';
|
import { $t } from '#/locales';
|
|
import Form from './Form.vue';
|
|
defineOptions({ name: 'SysDataArea' });
|
|
const key = ref(Date.now());
|
const { createMessage } = useMessage();
|
const columns: BasicColumn[] = [
|
{ title: '区域名称', dataIndex: 'fullName', minWidth: 100 },
|
{ title: '区域编码', dataIndex: 'enCode', minWidth: 100 },
|
{ title: '排序', dataIndex: 'sortCode', width: 70, align: 'center' },
|
{ title: '状态', dataIndex: 'enabledMark', width: 70, align: 'center', slots: { default: 'enabledMark' } },
|
];
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
const searchInfo = reactive({
|
nodeId: -1,
|
});
|
const loading = ref(false);
|
const [registerTable, { reload }] = useVxeTable({
|
api: getAreaList,
|
columns,
|
searchInfo: { nodeId: -1 },
|
isTreeTable: true,
|
showIndexColumn: false,
|
defaultExpandAllRows: false,
|
pagination: false,
|
tableSetting: {
|
expand: false,
|
redo: false,
|
},
|
afterFetch: (data) => {
|
const list = data.map((o) => {
|
const obj = o;
|
if (obj.hasChildren) obj.children = [];
|
return obj;
|
});
|
return list;
|
},
|
treeConfig: {
|
lazy: true,
|
expandAll: false,
|
loadMethod({ row }) {
|
return new Promise((resolve) => {
|
if (row.children?.length) return;
|
searchInfo.nodeId = row.id;
|
getAreaList(searchInfo).then((res) => {
|
const list = res.data.list.map((o) => {
|
const obj = o;
|
if (obj.hasChildren) obj.children = [];
|
return obj;
|
});
|
resolve(list);
|
});
|
});
|
},
|
},
|
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 addOrUpdateHandle(id = '') {
|
openFormModal(true, { id });
|
}
|
function handleDelete(id) {
|
delArea(id).then((res) => {
|
createMessage.success(res.msg);
|
reloadTable();
|
});
|
}
|
function reloadTable() {
|
key.value = Date.now();
|
reload();
|
}
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable" :loading="loading" :key="key">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">{{ $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="reloadTable" />
|
</div>
|
</template>
|
