Recientemente, al reparar el error planteado por la prueba, encontré un fenómeno: cuando se cancela la segunda ventana emergente, se cancela la primera, pero el contenido de la segunda ventana emergente no se cancela. Porque la segunda es una mesa seleccionada por radio. Así que cancela la selección.
Mire primero la operación original
pregunta
El primer paso es hacer clic en Agregar y seleccionar el nombre del material.
El segundo paso, haga clic en el material para mostrar la ventana emergente de selección de material
El tercer paso es hacer clic en Guardar, volver a la capa superior, asignar el nombre del material y hacer clic en Cancelar
¡Agregue un nuevo clic para descubrir o mostrar el contenido del segundo paso! ! ! , entonces es insoportable. ¿Por qué no vuelve a solicitar la interfaz después de volver a mostrarla después de cerrarla?
Solución
Veamos cómo lo resuelve el código ahora.
La primera capa de la ventana emergente
//html
<template>
<BasicModal
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
:width="1000"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" style="margin: 20px 0">
<template #materialName="{ model, field }">
<InputSearch
placeholder="请选择物料名称"
v-model:value="model[field]"
:readonly="true"
@search="handleSearch()"
@click="handleSearch()"
:disabled="isUpdate"
/>
</template>
</BasicForm>
</BasicModal>
<bdAllMarBasClass @register="registerBdMarBasClassModal" @success="handleBdMarBasClassSuccess" />
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { InputSearch } from 'ant-design-vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { addFormSchema } from './data';
//第二层物料弹窗
import bdAllMarBasClass from '/@/views/tableModal/bdAllMarBasClass/index.vue';
import { useModal } from '/@/components/Modal';
const emits = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const rowId = ref('');
const materialClassIds = ref('');
const [registerBdMarBasClassModal, { openModal: openBdMarBasClassModal }] = useModal();
// 物料表单table
const [registerForm, { setFieldsValue, resetFields, validate, getFieldsValue }] = useForm({
labelWidth: 100,
schemas: addFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 12,
},
});
//弹窗
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
rowId.value = data.record.id;
setFieldsValue({
...data.record,
isUpdate: isUpdate.value,
});
}
});
//弹窗标题
const getTitle = computed(() => (!unref(isUpdate) ? '新增库存预警指标' : '编辑库存预警指标'));
function handleSearch() {
openBdMarBasClassModal(true, getFieldsValue());
}
async function handleBdMarBasClassSuccess({ values }) {
setFieldsValue({
materialCode: values[0].code,
materialName: values[0].name,
materialTypeCode: values[0].materialClassCode,
materialTypeName: values[0].materialClassName,
spec: values[0].materialSpec,
model: values[0].materialType,
typeId: values[0].parentId,
});
materialClassIds.value = values[0].parentId;
}
async function handleSubmit() {
try {
const values = await validate();
setModalProps({ confirmLoading: true });
closeModal();
emits('success', {
isUpdate: unref(isUpdate),
values: { ...values, id: rowId.value },
});
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style>
.ant-calendar-picker,
.ant-input-number {
width: 100%;
}
</style>
De hecho, ¿cuál es el método más importante mencionado anteriormente? Es el método getFieldsvalue, que obtiene todos los valores en su formulario, y luego puede juzgar si necesita restablecer el valor de la segunda ventana emergente cambiando el valor del formulario.
La segunda capa de la ventana emergente
//物料页面
<template>
<BasicModal
width="80%"
v-bind="$attrs"
@register="registerModal"
title="选择物料"
okText="保存"
@ok="handleSubmit"
>
<PageWrapper contentClass="flex">
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" style="max-height: 500px" />
<BasicTable
class="w-3/4 xl:w-4/5"
style="padding-top: 4px"
@register="registerTable"
:maxHeight="400"
:searchInfo="searchInfo"
/>
</PageWrapper>
</BasicModal>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { PageWrapper } from '/@/components/Page';
import { BasicTable, useTable } from '/@/components/Table';
import { bdMaterialList } from '/@/api/basicarchives/archives';
import { columns, searchFormSchema } from './data';
import DeptTree from './DeptTree.vue';
const emit = defineEmits(['success', 'register']);
const searchInfo = reactive<Recordable>({});
const [registerTable, { getSelectRows, reload, clearSelectedRowKeys, getForm }] = useTable({
columns: columns,
rowKey: 'id',
useSearchForm: true,
api: bdMaterialList,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
immediate: false,
rowSelection: { type: 'radio' },
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
if (data.materialCode === undefined && searchInfo.materialClassIds) {
getForm().resetFields();
clearSelectedRowKeys();
reload();
}
setModalProps({ confirmLoading: false });
});
function handleSelect(key) {
searchInfo.materialClassIds = key;
reload();
}
async function handleSubmit() {
const checkList = getSelectRows();
try {
setModalProps({ confirmLoading: true });
closeModal();
emit('success', {
values: checkList,
});
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
De hecho, lo más importante es usar clearSelectedRowKeys, getForm y luego juzgar si el valor existe al abrir la ventana para ver si la tabla está vacía.
Consejos
Un pequeño truco descubierto por accidente, cómo abrir el segundo valor del modal no existe, entonces la segunda ventana emergente abierta solo activará el evento useModalInner una vez. (Es decir, si no se pasa el siguiente getFieldsValue)
Esta es la solución para la visualización de la tabla emergente que no se actualiza durante el desarrollo de vben. Espero que sea útil para el desarrollo futuro de todos.