fix: 表格的表单搜索无法在modal/drawer中使用 https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IB0960

This commit is contained in:
dap 2024-11-14 14:51:29 +08:00
parent a814bed79e
commit 36c6a65d22
5 changed files with 12 additions and 42 deletions

View File

@ -37,7 +37,9 @@ const formOptions: VbenFormProps = {
// eslint-disable-next-line no-use-before-define // eslint-disable-next-line no-use-before-define
const { formApi, reload } = tableApi; const { formApi, reload } = tableApi;
await formApi.resetForm(); await formApi.resetForm();
await reload(); const formValues = formApi.form.values;
formApi.setLatestSubmissionValues(formValues);
await reload(formValues);
}, },
}; };

View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Recordable } from '@vben/types'; import type { Recordable } from '@vben/types';
import { nextTick, ref } from 'vue'; import { ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui'; import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
@ -79,24 +79,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
}, },
}); });
const init = ref(true);
const [RoleAssignDrawer, drawerApi] = useVbenDrawer({ const [RoleAssignDrawer, drawerApi] = useVbenDrawer({
connectedComponent: roleAssignDrawer, connectedComponent: roleAssignDrawer,
/**
* TODO: 等待官方修复
* 临时解决方案 for https://github.com/vbenjs/vue-vben-admin/issues/4752
* 通过在关闭时使用v-if切换来造成Modal的重新渲染
* 目前Modal逻辑为每次打开 内部的元素会重新mount 但是Modal本身不会重新渲染
* 该方案会造成关闭动画丢失(应该放在afterClose中)
* @param isOpen 是否打开
*/
onOpenChange: async (isOpen) => {
if (!isOpen) {
init.value = false;
await nextTick();
init.value = true;
}
},
}); });
function handleAdd() { function handleAdd() {
@ -172,6 +156,6 @@ function handleMultipleAuthCancel() {
</Popconfirm> </Popconfirm>
</template> </template>
</BasicTable> </BasicTable>
<RoleAssignDrawer v-if="init" @reload="tableApi.query()" /> <RoleAssignDrawer @reload="tableApi.query()" />
</Page> </Page>
</template> </template>

View File

@ -73,7 +73,9 @@ const formOptions: VbenFormProps = {
// eslint-disable-next-line no-use-before-define // eslint-disable-next-line no-use-before-define
const { formApi, reload } = tableApi; const { formApi, reload } = tableApi;
await formApi.resetForm(); await formApi.resetForm();
await reload(); const formValues = formApi.form.values;
formApi.setLatestSubmissionValues(formValues);
await reload(formValues);
}, },
// //
fieldMappingTime: [ fieldMappingTime: [

View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Recordable } from '@vben/types'; import type { Recordable } from '@vben/types';
import { nextTick, onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui'; import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
@ -182,20 +182,8 @@ function handleMultiDelete() {
}); });
} }
const init = ref(true);
const [TableImportModal, tableImportModalApi] = useVbenModal({ const [TableImportModal, tableImportModalApi] = useVbenModal({
connectedComponent: tableImportModal, connectedComponent: tableImportModal,
/**
* TODO: 等待官方修复
* 临时解决方案 for https://github.com/vbenjs/vue-vben-admin/issues/4752
* 通过在关闭时使用v-if切换来造成Modal的重新渲染
* 目前Modal逻辑为每次打开 内部的元素会重新mount 但是Modal本身不会重新渲染
*/
async onClosed() {
init.value = false;
await nextTick();
init.value = true;
},
}); });
function handleImport() { function handleImport() {
@ -298,6 +286,6 @@ function handleImport() {
</template> </template>
</BasicTable> </BasicTable>
<CodePreviewModal /> <CodePreviewModal />
<TableImportModal v-if="init" @reload="tableApi.query()" /> <TableImportModal @reload="tableApi.query()" />
</Page> </Page>
</template> </template>

View File

@ -229,14 +229,8 @@ async function init() {
} }
props.api?.setState?.({ gridOptions: defaultGridOptions }); props.api?.setState?.({ gridOptions: defaultGridOptions });
// form vben-form query // form vben-form query
extendProxyOptions( extendProxyOptions(props.api, defaultGridOptions, () =>
props.api, formApi.getLatestSubmissionValues(),
defaultGridOptions,
() =>
// readonly
cloneDeep(formApi.form.values),
//
// formApi.getLatestSubmissionValues(),
); );
} }