<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { h } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicDrawer, useDrawerInner } from '@jnpf/ui/drawer';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { Checkbox } from 'ant-design-vue';
|
|
import { delCommonFields, getCommonFieldsList } from '#/api/systemData/commonFields';
|
import { $t } from '#/locales';
|
|
import Form from './Form.vue';
|
|
const { createMessage } = useMessage();
|
const [registerDrawer] = useDrawerInner();
|
const [registerForm, { openModal: openFormModal }] = useModal();
|
const columns: BasicColumn[] = [
|
{
|
title: '列名',
|
dataIndex: 'field',
|
},
|
{
|
title: '说明',
|
dataIndex: 'fieldName',
|
width: 150,
|
},
|
{
|
title: '类型',
|
dataIndex: 'dataType',
|
width: 80,
|
},
|
{
|
title: '长度',
|
dataIndex: 'dataLength',
|
width: 60,
|
},
|
{
|
title: '允许空',
|
dataIndex: 'allowNull',
|
width: 60,
|
align: 'center',
|
customRender: ({ record }) => {
|
return h(Checkbox, { checked: record.allowNull === 1 });
|
},
|
},
|
];
|
const typeOptions: any[] = [
|
{ fullName: '字符串', id: 'varchar' },
|
{ fullName: '整型', id: 'int' },
|
{ fullName: '日期时间', id: 'datetime' },
|
{ fullName: '浮点', id: 'decimal' },
|
{ fullName: '长整型', id: 'bigint' },
|
{ fullName: '文本', id: 'text' },
|
];
|
const [registerTable, { reload }] = useVxeTable({
|
api: getCommonFieldsList,
|
columns,
|
pagination: false,
|
actionColumn: {
|
width: 100,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
afterFetch: (data) => {
|
const list = data.map((o) => ({
|
...o,
|
dataType: getTypeText(o.dataType),
|
}));
|
return list;
|
},
|
});
|
function getTypeText(type) {
|
const item = typeOptions.filter((o) => o.id == type)[0];
|
return item && item.fullName ? item.fullName : '';
|
}
|
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) {
|
delCommonFields(id).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
}
|
</script>
|
<template>
|
<BasicDrawer v-bind="$attrs" @register="registerDrawer" title="常用字段管理" width="700px" class="full-drawer">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">{{ $t('common.addText') }}</a-button>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</BasicDrawer>
|
<Form @register="registerForm" @reload="reload" />
|
</template>
|
