<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { computed, onMounted, ref, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useDrawer } from '@jnpf/ui/drawer';
|
import { usePopup } from '@jnpf/ui/popup';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
import { downloadByUrl } from '@jnpf/utils';
|
|
import { Grid as VxeGrid } from 'vxe-table';
|
|
import { delDataModel, exportTable, getDataModelFieldList, getDataModelList } from '#/api/systemData/dataModel';
|
import { getDataSourceSelector } from '#/api/systemData/dataSource';
|
import { $t } from '#/locales';
|
|
import FieldList from './components/index.vue';
|
import Form from './Form.vue';
|
import Preview from './Preview.vue';
|
|
defineOptions({ name: 'DataCenterDataModel' });
|
|
const { createMessage } = useMessage();
|
const [registerForm, { openPopup: openFormPopup }] = usePopup();
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
const [registerPopup, { openPopup: openPreviewPopup }] = usePopup();
|
const linkId = ref('0');
|
const dbType = ref('MySQL');
|
|
const columns: BasicColumn[] = [
|
{ title: '表名', dataIndex: 'table', width: 300 },
|
{ title: '说明', dataIndex: 'tableName' },
|
];
|
const childColumns: any = [
|
{ title: '', width: 50 },
|
{ title: $t('component.table.index'), type: 'seq', width: 50, align: 'center' },
|
{ title: '字段', field: 'field' },
|
{ title: '说明', field: 'fieldName' },
|
{ title: '类型', field: 'dataType', width: 120 },
|
{ title: '长度', field: 'dataLength', width: 80 },
|
{ title: '允许空', field: 'allowNull', width: 60, align: 'center', slots: { default: 'allowNull' } },
|
{ title: '默认值', field: 'defaults', width: 100 },
|
];
|
const [registerTable, { reload, getForm }] = useVxeTable({
|
api: getDataModelList,
|
columns,
|
useSearchForm: true,
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
{
|
field: 'linkId',
|
label: '数据连接',
|
component: 'Select',
|
defaultValue: unref(linkId),
|
componentProps: { placeholder: '请选择', allowClear: false, showSearch: true, fieldNames: { options: 'children' }, onChange: onLinkIdChange },
|
},
|
],
|
},
|
actionColumn: {
|
width: 150,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
afterFetch: (data) => {
|
const list = data.map((o) => ({
|
...o,
|
id: o.table + Math.random(),
|
}));
|
return list;
|
},
|
showExpandColumn: true,
|
expandConfig: {
|
lazy: true,
|
loadMethod({ row }) {
|
return new Promise((resolve) => {
|
getDataModelFieldList(unref(linkId), row.table)
|
.then((res) => {
|
row.childTable = res.data.list;
|
resolve(row);
|
})
|
.catch(() => {});
|
});
|
},
|
},
|
});
|
|
const getUploadUrl = computed(() => `/api/system/DataModel/${unref(linkId)}/Actions/Import`);
|
|
function getTableActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.editText'),
|
onClick: addOrUpdateHandle.bind(null, record.table),
|
},
|
{
|
label: $t('common.delText'),
|
color: 'error',
|
modelConfirm: {
|
onOk: handleDelete.bind(null, record.table),
|
},
|
},
|
];
|
}
|
function getDropDownActions(record): ActionItem[] {
|
return [
|
{
|
label: '打开数据',
|
onClick: handlePreview.bind(null, record.table),
|
},
|
{
|
label: $t('common.exportText'),
|
modelConfirm: {
|
content: '您确定要导出该表, 是否继续?',
|
onOk: handleExport.bind(null, record.table),
|
},
|
},
|
];
|
}
|
function onLinkIdChange(val, item) {
|
linkId.value = val;
|
dbType.value = item.dbType;
|
setTimeout(() => {
|
reload({ page: 1 });
|
}, 0);
|
}
|
function addOrUpdateHandle(table = '') {
|
openFormPopup(true, {
|
table,
|
linkId: unref(linkId),
|
dbType: unref(dbType),
|
});
|
}
|
function handleDelete(table) {
|
delDataModel(unref(linkId), table).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
}
|
function handlePreview(table) {
|
openPreviewPopup(true, { table, linkId: unref(linkId) });
|
}
|
function handleExport(table) {
|
exportTable(unref(linkId), table).then((res) => {
|
downloadByUrl({ url: res.data.url });
|
});
|
}
|
function handleFieldManage() {
|
openDrawer(true);
|
}
|
async function getOptions() {
|
const res = await getDataSourceSelector();
|
const list = res.data.list.filter((o) => o.children && o.children.length);
|
if (list[0] && list[0].children && list[0].children.length) list[0] = list[0].children[0];
|
delete list[0].children;
|
dbType.value = list[0].dbType || 'MySQL';
|
getForm().updateSchema({ field: 'linkId', componentProps: { options: list } });
|
}
|
|
onMounted(() => {
|
getOptions();
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="addOrUpdateHandle()">{{ $t('common.addText') }}</a-button>
|
<jnpf-upload-btn :url="getUploadUrl" accept=".bdb" @on-success="reload" />
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-common" @click="handleFieldManage()">常用字段</a-button>
|
</template>
|
<template #expandedRowRender="{ record }">
|
<VxeGrid :data="record.childTable || []" :columns="childColumns" size="small" :min-height="0">
|
<template #allowNull="{ row }">
|
<a-checkbox :checked="row.allowNull === 1" />
|
</template>
|
</VxeGrid>
|
</template>
|
<template #action="{ record }">
|
<TableAction stop-button-propagation :actions="getTableActions(record)" :drop-down-actions="getDropDownActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<Form @register="registerForm" @reload="reload" />
|
<FieldList @register="registerDrawer" />
|
<Preview @register="registerPopup" />
|
</div>
|
</template>
|
