<script lang="ts" setup>
|
import { computed, nextTick, reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { buildAiFields } from '#/components/FormGenerator/src/helper/aiUtils';
|
import { vModelIgnoreList } from '#/components/FormGenerator/src/helper/config';
|
|
import { inputComponents, selectComponents, systemComponents } from '../helper/componentMap';
|
|
interface State {
|
list: any[];
|
selectedRowKeys: string[];
|
}
|
|
const emit = defineEmits(['register', 'reload']);
|
const state = reactive<State>({
|
list: [],
|
selectedRowKeys: [],
|
});
|
const { list, selectedRowKeys } = toRefs(state);
|
const { createMessage } = useMessage();
|
const [registerModal, { closeModal }] = useModalInner(init);
|
const columns = [
|
{ title: '字段名称', dataIndex: 'label', key: 'label', width: 200 },
|
{ title: '字段类型', dataIndex: 'jnpfKey', key: 'jnpfKey', width: 200 },
|
];
|
const jnpfKeyOptions = [...inputComponents, ...selectComponents, ...systemComponents];
|
const ignoreList = new Set(['popupAttr', 'relationFormAttr', 'table', ...vModelIgnoreList]);
|
|
const getJnpfKeyOptions = computed(() =>
|
jnpfKeyOptions.filter((o) => !ignoreList.has(o.__config__.jnpfKey)).map((o) => ({ id: o.__config__.label, fullName: o.__config__.jnpfKey })),
|
);
|
|
function init(data) {
|
state.list = cloneDeep(data.list).find((o) => o.isMain)?.fields || [];
|
state.selectedRowKeys = state.list.map((o) => o.fieldName);
|
}
|
function onSelectChange(selectedRowKeys) {
|
state.selectedRowKeys = selectedRowKeys || [];
|
}
|
function handleSubmit() {
|
const list = state.list.filter((o) => state.selectedRowKeys.includes(o.fieldName));
|
const fields = buildAiFields([{ fields: list, isMain: true }]);
|
if (!fields.length) return createMessage.warning('请至少选择一个字段');
|
emit('reload', fields);
|
nextTick(() => closeModal());
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" width="600px" class="jnpf-ai-field-Modal" @register="registerModal" title="推荐字段" @ok="handleSubmit" destroy-on-close>
|
<a-table
|
size="small"
|
row-key="fieldName"
|
:data-source="list"
|
:columns="columns"
|
:pagination="false"
|
:row-selection="{ columnWidth: 50, selectedRowKeys, onChange: onSelectChange }">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'label'">
|
<jnpf-input v-model:value="record.fieldTitle" placeholder="请输入" allow-clear :maxlength="100" />
|
</template>
|
<template v-if="column.key === 'jnpfKey'">
|
<jnpf-select v-model:value="record.fieldComponent" :options="getJnpfKeyOptions" show-search allow-clear />
|
</template>
|
</template>
|
</a-table>
|
</BasicModal>
|
</template>
|
<style lang="scss">
|
.jnpf-ai-field-Modal {
|
.scrollbar {
|
padding: 0 !important;
|
}
|
|
.ant-table-wrapper {
|
min-height: 400px;
|
}
|
}
|
</style>
|
