<script lang="ts" setup>
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { nextTick, reactive, ref, toRefs } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
interface State {
|
dataForm: any;
|
formRules: any;
|
options: any[];
|
}
|
|
const emit = defineEmits(['register', 'confirm']);
|
const formElRef = ref<FormInstance>();
|
const state = reactive<State>({
|
dataForm: {
|
businessKeyList: [],
|
businessKeyTip: '',
|
},
|
formRules: {
|
businessKeyList: [{ required: true, message: '必填', trigger: 'change', type: 'array' }],
|
businessKeyTip: [{ required: true, message: '必填', trigger: 'change' }],
|
},
|
options: [],
|
});
|
const { dataForm, formRules, options } = toRefs(state);
|
const [registerModal, { closeModal }] = useModalInner(init);
|
const allowList = new Set([
|
'areaSelect',
|
'cascader',
|
'checkbox',
|
'datePicker',
|
'groupSelect',
|
'input',
|
'inputNumber',
|
'location',
|
'organizeSelect',
|
'posSelect',
|
'radio',
|
'roleSelect',
|
'select',
|
'textarea',
|
'timePicker',
|
'treeSelect',
|
'userSelect',
|
'usersSelect',
|
]);
|
|
function init(data) {
|
getOptions(data.drawingList || []);
|
nextTick(() => {
|
formElRef.value?.clearValidate();
|
state.dataForm.businessKeyList = data.businessKeyList;
|
state.dataForm.businessKeyTip = data.businessKeyTip;
|
});
|
}
|
function getOptions(drawingList) {
|
let list: any[] = [];
|
const loop = (data, parent?) => {
|
if (!data) return;
|
if (data.__config__ && data.__config__?.jnpfKey !== 'table' && 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.__vModel__ && allowList.has(data.__config__.jnpfKey)) {
|
list.push({
|
id: data.__vModel__,
|
fullName: data.__config__.label,
|
});
|
}
|
};
|
loop(drawingList);
|
list = list.filter((o) => !o.id.includes('_jnpf_'));
|
state.options = list;
|
}
|
async function handleSubmit() {
|
try {
|
const values = await formElRef.value?.validate();
|
if (!values) return;
|
emit('confirm', { ...state.dataForm });
|
closeModal();
|
} catch {}
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="规则设置" @ok="handleSubmit" :min-height="100">
|
<a-form :colon="false" :label-col="{ style: { width: '80px' } }" :model="dataForm" :rules="formRules" ref="formElRef">
|
<p class="business-tip">选择需要设为业务主键的表单字段</p>
|
<a-form-item label="联合字段" name="businessKeyList">
|
<jnpf-select v-model:value="dataForm.businessKeyList" :options="options" multiple show-search />
|
</a-form-item>
|
<a-form-item label="提示语" name="businessKeyTip">
|
<jnpf-input v-model:value="dataForm.businessKeyTip" placeholder="请输入" />
|
</a-form-item>
|
</a-form>
|
</BasicModal>
|
</template>
|
<style lang="scss">
|
.business-tip {
|
padding: 0 4px;
|
margin-bottom: 10px;
|
color: var(--text-color-label);
|
}
|
</style>
|
