<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;
|
}
|
|
const emit = defineEmits(['register', 'confirm', 'close']);
|
|
const formElRef = ref<FormInstance>();
|
const state = reactive<State>({
|
dataForm: {
|
nodeList: [],
|
},
|
});
|
const { dataForm } = toRefs(state);
|
const [registerModal, { changeOkLoading }] = useModalInner(init);
|
|
function init(data) {
|
changeOkLoading(false);
|
state.dataForm.nodeList = data.errorData.map((o) => ({
|
...o,
|
value: [],
|
rules: [{ required: true, message: `必填`, trigger: 'change', type: 'array' }],
|
key: Date.now(),
|
}));
|
nextTick(() => {
|
formElRef.value?.clearValidate();
|
});
|
}
|
async function handleSubmit() {
|
try {
|
const values = await formElRef.value?.validate();
|
if (!values) return;
|
const nodeList = {};
|
for (let i = 0; i < state.dataForm.nodeList.length; i++) {
|
nodeList[state.dataForm.nodeList[i].nodeCode] = state.dataForm.nodeList[i].value;
|
}
|
changeOkLoading(true);
|
emit('confirm', nodeList);
|
} catch {}
|
}
|
async function onClose() {
|
emit('close');
|
return true;
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="异常处理" @ok="handleSubmit" :min-height="52" destroy-on-close :close-func="onClose">
|
<a-form :colon="false" :label-col="{ style: { width: '100px' } }" :model="dataForm" ref="formElRef">
|
<a-form-item :label="item.nodeName" :name="['nodeList', i, 'value']" v-for="(item, i) in dataForm.nodeList" :key="i" :rules="item.rules">
|
<jnpf-user-select v-model:value="item.value" multiple placeholder="请选择" :key="item.key" />
|
</a-form-item>
|
</a-form>
|
</BasicModal>
|
</template>
|
