fix: 表格的表单搜索无法在modal/drawer中使用 https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IB0960
This commit is contained in:
parent
a814bed79e
commit
36c6a65d22
@ -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);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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: [
|
||||||
|
@ -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>
|
||||||
|
@ -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(),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user