<script lang="ts" setup>
|
import { computed, onMounted, ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
import { inputComponents, selectComponents, systemComponents } from '#/components/FormGenerator/src/helper/componentMap';
|
|
const props = defineProps(['conf', 'tableList']);
|
defineExpose({ getData });
|
const { createMessage } = useMessage();
|
|
const ignoreList = new Set(['alert', 'button', 'calculate', 'dateCalculate', 'divider', 'link', 'table', 'text']);
|
const columns = [
|
{ title: '序号', width: 50, align: 'center', customRender: ({ index }) => index + 1, fixed: 'left' },
|
{ title: '名称', dataIndex: 'fieldName', key: 'fieldName', width: 200 },
|
{ title: '字段', dataIndex: 'fieldId', key: 'fieldId', width: 200 },
|
{ title: '数据表', dataIndex: 'tableName', key: 'tableName', width: 200 },
|
{ title: '控件类型', dataIndex: 'jnpfKey', key: 'jnpfKey', width: 150 },
|
{ title: '必填', dataIndex: 'required', key: 'required', width: 50, align: 'center' },
|
{ title: '多选', dataIndex: 'multiple', key: 'multiple', width: 50, align: 'center' },
|
{ title: '操作', dataIndex: 'action', key: 'action', width: 50, align: 'center', fixed: 'right' },
|
];
|
const componentList = ref<any[]>([]);
|
|
const getTableOptions = computed(() => props.tableList.map((o) => ({ id: o.table, fullName: o.table })));
|
|
function getData() {
|
return new Promise((resolve) => {
|
if (!exist()) return;
|
resolve({ formData: props.conf, target: 1 });
|
});
|
}
|
function getComponentList() {
|
const realInputComponents = inputComponents
|
.filter((o) => !ignoreList.has(o.__config__.jnpfKey))
|
.map((o) => ({ id: o.__config__.jnpfKey, fullName: o.__config__.label }));
|
const realSelectComponents = selectComponents
|
.filter((o) => !ignoreList.has(o.__config__.jnpfKey))
|
.map((o) => ({ id: o.__config__.jnpfKey, fullName: o.__config__.label }));
|
const realSystemComponents = systemComponents.map((o) => ({ id: o.__config__.jnpfKey, fullName: o.__config__.label }));
|
componentList.value = [
|
{
|
id: '1',
|
fullName: '基础控件',
|
children: realInputComponents,
|
},
|
{
|
id: '2',
|
fullName: '高级控件',
|
children: realSelectComponents,
|
},
|
{
|
id: '3',
|
fullName: '系统控件',
|
children: realSystemComponents,
|
},
|
];
|
}
|
function exist() {
|
let isOk = true;
|
for (let i = 0; i < props.conf.length; i++) {
|
const e = props.conf[i];
|
if (!e.fieldName) {
|
createMessage.warning('名称不能为空');
|
isOk = false;
|
break;
|
}
|
if (!e.fieldId) {
|
createMessage.warning('字段不能为空');
|
isOk = false;
|
break;
|
}
|
const idNum = props.conf.filter((o) => o.fieldId == e.fieldId);
|
if (idNum.length > 1) {
|
createMessage.warning(`字段'${e.fieldId}'已重复`);
|
isOk = false;
|
break;
|
}
|
}
|
return isOk;
|
}
|
function handleDelItem(index) {
|
props.conf.splice(index, 1);
|
}
|
function handleAdd() {
|
const item = { fieldName: '', fieldId: '', tableName: '', jnpfKey: '', required: false, multiple: false };
|
props.conf.push(item);
|
}
|
onMounted(() => {
|
getComponentList();
|
});
|
</script>
|
<template>
|
<jnpf-group-title content="表单字段" :bordered="false" />
|
<a-table :data-source="conf" :columns="columns" size="small" :pagination="false" row-key="id" :scroll="{ x: 'max-content' }">
|
<template #bodyCell="{ column, record, index }">
|
<template v-if="column.key === 'fieldName'">
|
<a-input v-model:value="record.fieldName" placeholder="输入名称" allow-clear />
|
</template>
|
<template v-if="column.key === 'fieldId'">
|
<a-input v-model:value="record.fieldId" placeholder="输入字段" allow-clear />
|
</template>
|
<template v-if="column.key === 'tableName'">
|
<jnpf-select v-model:value="record.tableName" :options="getTableOptions" show-search allow-clear :dropdown-match-select-width="false" />
|
</template>
|
<template v-if="column.key === 'jnpfKey'">
|
<jnpf-select v-model:value="record.jnpfKey" :options="componentList" :field-names="{ options: 'children' }" show-search allow-clear />
|
</template>
|
<template v-if="column.key === 'required' || column.key === 'multiple'">
|
<a-checkbox v-model:checked="record[column.key]" />
|
</template>
|
<template v-if="column.key === 'action'">
|
<a-button class="action-btn" type="link" color="error" @click="handleDelItem(index)" size="small">删除</a-button>
|
</template>
|
</template>
|
</a-table>
|
<div class="table-add-action" @click="handleAdd">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add">新增一行</a-button>
|
</div>
|
</template>
|
