<script lang="ts" setup>
|
import { computed, reactive, toRefs, unref } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
import { buildBitUUID } from '@jnpf/utils';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { invoiceDetailIds, ocrMap } from '../../helper/ocrMap';
|
|
interface State {
|
dataForm: any;
|
selectedRowKeys: string[];
|
drawingList: any[];
|
activeData: any;
|
isEdit: boolean;
|
}
|
|
const emit = defineEmits(['register', 'confirm']);
|
const state = reactive<State>({
|
dataForm: {
|
storageType: 1,
|
},
|
selectedRowKeys: [],
|
drawingList: [],
|
activeData: {},
|
isEdit: false,
|
});
|
const { dataForm, selectedRowKeys, isEdit } = toRefs(state);
|
const [registerModal, { closeModal }] = useModalInner(init);
|
const storageTypeOptions = [
|
{ fullName: '存为新字段', id: 1 },
|
{ fullName: '存到已有字段', id: 2 },
|
];
|
|
const getColumns = computed(() => {
|
const fullName = { title: '识别字段', dataIndex: 'fullName', key: 'fullName', width: 250 };
|
const defJnpfKey = { title: '控件类型', dataIndex: 'defJnpfKey', key: 'defJnpfKey', width: 250 };
|
const jnpfKey = { title: '选择控件', dataIndex: 'jnpfKey', key: 'jnpfKey', width: 250 };
|
return [fullName, state.dataForm.storageType == 1 && !state.isEdit ? defJnpfKey : jnpfKey];
|
});
|
const getTableBindValues = computed(() => ({
|
size: 'small',
|
rowKey: 'id',
|
dataSource: state.dataForm.transferList,
|
columns: unref(getColumns),
|
pagination: false,
|
scroll: { y: state.isEdit ? 490 : 360 },
|
rowSelection: state.isEdit ? undefined : { columnWidth: 50, selectedRowKeys, onChange: onSelectChange },
|
}));
|
|
function init(data) {
|
state.selectedRowKeys = [];
|
state.activeData = cloneDeep(data.activeData) || [];
|
state.isEdit = !!state.activeData.__config__?.transferList?.length;
|
state.drawingList = data.drawingList || [];
|
state.dataForm.transferList = state.isEdit ? state.activeData.__config__?.transferList : cloneDeep(ocrMap[`${state.activeData.ocrType}List`]);
|
state.dataForm.storageType = state.activeData.__config__.storageType || 1;
|
}
|
function getFieldOptions(record) {
|
const list: any[] = [];
|
const loop = (data, parent?) => {
|
if (!data) return;
|
if (data.__config__ && data.__config__.children && Array.isArray(data.__config__.children)) {
|
loop(data.__config__.children, data);
|
}
|
if (Array.isArray(data)) data.forEach((d) => loop(d, parent));
|
if (data.__config__ && data.__config__.jnpfKey && record.supportJnpfKey.includes(data.__config__.jnpfKey)) {
|
const isTableChild = parent && parent.__config__ && parent.__config__.jnpfKey === 'table';
|
if (
|
(isTableChild && !invoiceDetailIds.includes(record.id)) ||
|
(!isTableChild && invoiceDetailIds.includes(record.id) && data.__config__.jnpfKey == 'inputNumber')
|
)
|
return;
|
list.push({
|
id: data.__config__.formId,
|
fullName: isTableChild ? `${parent.__config__.label}-${data.__config__.label}` : data.__config__.label,
|
});
|
}
|
};
|
loop(state.drawingList);
|
return list;
|
}
|
function getCompName(jnpfKey) {
|
if (jnpfKey == 'textarea') return '多行输入';
|
if (jnpfKey == 'datePicker') return '日期选择';
|
if (jnpfKey == 'inputNumber') return '数字输入';
|
return '单行输入';
|
}
|
function onSelectChange(selectedRowKeys) {
|
state.selectedRowKeys = selectedRowKeys;
|
}
|
function handleSubmit() {
|
if (!state.isEdit) {
|
state.dataForm.transferList = state.dataForm.transferList.map((o) => ({
|
...o,
|
formId: state.selectedRowKeys.includes(o.id) ? (state.dataForm.storageType == 2 ? o.formId : `formItemOcr${buildBitUUID()}`) : '',
|
}));
|
}
|
emit('confirm', state.dataForm, state.isEdit);
|
closeModal();
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="识别规则配置" :width="800" @ok="handleSubmit" destroy-on-close>
|
<a-form :model="dataForm" layout="vertical" :colon="false">
|
<a-form-item label="识别的内容如何存储" v-if="!isEdit">
|
<jnpf-radio v-model:value="dataForm.storageType" :options="storageTypeOptions" />
|
</a-form-item>
|
<a-form-item label="识别内容输出">
|
<a-table v-bind="getTableBindValues">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'defJnpfKey'"> {{ getCompName(record.defJnpfKey) }} </template>
|
<template v-if="column.key === 'jnpfKey'">
|
<jnpf-select v-model:value="record.formId" :options="getFieldOptions(record)" show-search />
|
</template>
|
</template>
|
</a-table>
|
</a-form-item>
|
</a-form>
|
</BasicModal>
|
</template>
|
