FaModal 中 使用FaImageUpload 时，系统的文件管理器窗口打开后FaModal消失
系统是： mac sequoia 15.6.1
chrome: 140.0.7339.133（正式版本） (arm64)
firefox: 142.0.1 (aarch64)
1. FaModal 中 使用FaImageUpload 时，文件管理器窗口打开后FaModal消失
当点击上传图标后, 系统的文件管理器(选择图片) 打开后 FaModal消失，
然后跳转到. http://localhost:xxxxx?el-id-2458-45=0#/xxx/xxxx
然后列表页面自动刷新，导致无法后续的FaModal界面操作
2. 在列表页面打开后（还没有点击编辑按钮），就自动触发了一次 FaModal组件绑定的 handleClose，
<img width="1920" height="442" alt="Image" src="https://github.com/user-attachments/assets/dc89dda4-1377-4313-b5d1-25127bf9bb7b" />
```
function handleClose() {
console.warn('your clicked handleClose')
// showDialogModal.value = false
}
```
```
<route lang="yaml">
meta:
title: xxx管理
icon: ant-design:home-twotone
</route>
<script setup lang="ts">
import type { VxePagerEvents } from 'vxe-pc-ui'
import { ref } from 'vue'
import { toast } from 'vue-sonner'
import VxeUITable from 'vxe-table'
import { useComicsStore } from '@/store/modules/comics'
import { truncateString } from '@/utils/index'
// import Command from '../admin/components/command.vue'
// import Alert from './components/alert.vue'
// import Command from './components/command.vue'
const { reload } = useMainPage()
const settingsStore = useSettingsStore()
watch(() => settingsStore.currentColorScheme, () => {
VxeUITable.setTheme(settingsStore.currentColorScheme!)
}, {
immediate: true,
})
interface IFormData {
id: number
comic_id: number
name: string | null
title: string
pic: string
sort: string
vip_required: number
vip_tips: string
content: string
}
const formData = ref<IFormData>({
id: 0,
comic_id: 0,
name: '',
title: '',
pic: '',
sort: '',
vip_required: 0,
vip_tips: '',
content: '',
})
const formDataPics = ref<string[]>([])
const showDialogModal = shallowRef(false)
interface RowVO {
id: number
comic_id: number
name: string
title: string
pic: string
sort: number
vip_required: number
vip_tips: string
content: string
}
interface IComic {
id: number
name: string
img: string
total: number
tag: string
update_status: number
free_status: number
belong: number
status: number
}
const loading = ref(false)
const tableData = ref<RowVO[]>([])
const comicsList = ref<IComic[]>([])
const searchForm = ref({
comic_id: '',
name: '',
title: '',
vip_required: '',
vip_tips: '',
})
const pageVO = reactive<{ total: number, currentPage: number, pageSize: number }>({
total: 0,
currentPage: 1,
pageSize: 10,
})
// 前端分页
async function handlePageData() {
loading.value = true
const data = {
pageSize: pageVO.pageSize,
page: pageVO.currentPage,
}
await useComicsStore().getComicsChapterList(data)
tableData.value = useComicsStore().chapterList
pageVO.total = useComicsStore().chapterTotal
loading.value = false
}
async function getAllComicList() {
const data = {
pageSize: 1000,
page: 1,
}
await useComicsStore().getComicsList(data)
comicsList.value = useComicsStore().comicsList
}
const pageChange: VxePagerEvents.PageChange = ({ pageSize, currentPage }) => {
pageVO.currentPage = currentPage
pageVO.pageSize = pageSize
console.warn('pageVO', pageVO)
handlePageData()
}
function handleEdit(row: any) {
showDialogModal.value = !showDialogModal.value
console.warn('-----', showDialogModal.value)
console.warn(row)
const copyRow = { ...row }
const initData = {
id: copyRow.id,
comic_id: copyRow.comic_id,
name: copyRow.name,
title: copyRow.title,
pic: copyRow.pic,
sort: copyRow.sort,
vip_required: copyRow.vip_required,
vip_tips: copyRow.vip_tips,
content: copyRow.content,
}
formData.value = initData
console.warn('row----------', formData)
}
async function handleSearch() {
loading.value = true
// console.log('searchForm----', searchForm.value)
const data = {
pageSize: pageVO.pageSize,
page: pageVO.currentPage,
...searchForm.value,
}
await useComicsStore().searchChapter(data)
tableData.value = useComicsStore().chapterList
pageVO.total = useComicsStore().chapterTotal
loading.value = false
}
function onToggle(fold: boolean) {
// toast(fold ? '收起' : '展开')
}
function handleClose() {
console.warn('your clicked handleClose')
// showDialogModal.value = false
}
function handleEditConfirm() {
console.warn('your clicked handleConfirm')
console.warn('formData----', formData.value)
// return
useComicsStore().updateChapterRow(formData.value).then((res) => {
console.warn('res', res)
if (res.status === 200 && res.code === 1) {
showDialogModal.value = false
formData.value = {}
toast.success('更新成功')
reload()
}
})
}
function handleAfterUpload(res) {
console.warn('handleAfterUpload----res----', res)
return res
}
function handleUploadSuccess(res) {
console.warn('handleUploadSuccess', res)
}
function handleCancel() {
console.warn('your clicked handleCancel')
// formData.value = {}
// showDialogModal.value = false
}
onMounted(async () => {
await handlePageData()
await getAllComicList()
})
</script>
<template>
<div>
<!-- <Alert /> -->
<FaPageHeader title="章节列表">
<template #description>
<div class="space-y-2">
<p>描述。</p>
<!-- <p>
安装命令：
<Command text="pnpm add xe-utils vxe-table" />
</p> -->
</div>
</template>
</FaPageHeader>
<FaPageMain>
<FaSearchBar :show-toggle="true" @toggle="onToggle">
<template #default="{ fold, toggle }">
<ElForm :model="searchForm" size="default" label-width="120px">
<ElRow>
<ElCol :span="6">
<ElFormItem label="章节标题">
<ElInput v-model="searchForm.title" placeholder="请输入章节标题" clearable />
</ElFormItem>
</ElCol>
<!-- <ElCol :span="6">
<ElFormItem label="章节名称">
<ElInput v-model="searchForm.name" placeholder="请输入章节名称" clearable />
</ElFormItem>
</ElCol> -->
<ElCol :span="12">
<ElFormItem label="所属漫画">
<ElSelect v-model="searchForm.comic_id" clearable placeholder="请选择漫画">
<ElOption v-for="item in comicsList" :key="item.id" :label="item.name" :value="item.id" />
</ElSelect>
</ElFormItem>
</ElCol>
</ElRow>
<ElRow v-show="!fold">
<ElCol :span="6">
<ElFormItem label="是否需要VIP">
<ElSelect v-model="searchForm.vip_required" clearable placeholder="请选择">
<ElOption label="否" :value="1" />
<ElOption label="是" :value="2" />
</ElSelect>
</ElFormItem>
</ElCol>
</ElRow>
<!-- <ElRow v-show="!fold">
<ElCol :span="24">
<ElFormItem label="复选框">
<ElCheckbox :value="true">
备选项
</ElCheckbox>
<ElCheckbox :value="false">
备选项
</ElCheckbox>
</ElFormItem>
</ElCol>
</ElRow> -->
<ElRow justify="start" align="middle">
<ElCol :span="6">
<ElFormItem>
<ElButton type="primary" @click="handleSearch">
<template #icon>
<FaIcon name="i-ep:search" />
</template>
搜索
</ElButton>
<!-- <ElButton>导出</ElButton>
<ElButton type="primary" link>
查看已导出记录
</ElButton> -->
</ElFormItem>
</ElCol>
</ElRow>
</ElForm>
</template>
</FaSearchBar>
</FaPageMain>
<FaPageMain>
<vxe-table
border
:loading="loading"
:data="tableData"
align="center"
>
<!-- <vxe-column type="seq" width="70" /> -->
<vxe-column field="id" title="id" width="70" />
<vxe-column field="title" title="标题" width="100" />
<!-- <vxe-column field="name" title="名称" width="100" /> -->
<vxe-column field="pic" title="封面" width="120" />
<vxe-column field="content" title="内容" width="">
<template #default="{ row }">
{{ truncateString(row.content) }}
</template>
</vxe-column>
<vxe-column field="comic.name" title="所属xx" width="120" />
<vxe-column field="sort" title="排序" width="70" />
<vxe-column title="是否需VIP" width="100">
<template #default="{ row }">
<div v-if="row.vip_required === 0">
否
</div>
<div v-if="row.vip_required === 1">
是
</div>
</template>
</vxe-column>
<vxe-column field="vip_tips" title="VIP提示文案" width="100" />
<vxe-column title="操作" width="150">
<template #default="{ row }">
<FaButtonGroup>
<FaButton variant="outline" size="sm" @click="handleEdit(row)">
编辑
</FaButton>
<FaButton variant="destructive" size="sm">
删除
</FaButton>
</FaButtonGroup>
</template>
</vxe-column>
</vxe-table>
<vxe-pager
v-model:current-page="pageVO.currentPage"
v-model:page-size="pageVO.pageSize"
:total="pageVO.total"
:layouts="['Home', 'PrevPage', 'Number', 'NextPage', 'End', 'Sizes', 'Total']"
@page-change="pageChange"
/>
</FaPageMain>
<FaModal
:maximizable="true"
:model-value="showDialogModal"
:closable="false"
:header="true"
:footer="true"
title="编辑"
:maximize="false"
:show-cancel-button="true"
:close-on-press-escape="false"
:close-on-click-overlay="false"
@close="handleClose"
@confirm="handleEditConfirm"
@cancel="handleCancel"
>
<!-- <template #header>
这是header
</template> -->
<template #default>
<ElForm :model="formData" size="large" :label-width="90">
<ElRow>
<ElCol :span="24">
<ElFormItem label="章节标题">
<ElInput v-model="formData.title" placeholder="请输入章节标题" clearable />
</ElFormItem>
</ElCol>
</ElRow>
<ElRow>
<ElCol :span="24">
<ElFormItem label="章节封面">
<FaImageUpload
:model-value="formDataPics"
name="pic"
action="/xxxx/cover/upload"
:after-upload="handleAfterUpload"
:ext="['jpeg', 'jpg', 'png', 'gif']"
@on-success="handleUploadSuccess"
/>
<!-- <ElInput v-model="formData.pic" placeholder="请上传章节封面" clearable /> -->
</ElFormItem>
</ElCol>
</ElRow>
<ElRow>
<ElCol :span="24">
<ElFormItem label="漫画内容">
<FaTextarea v-model="formData.content" placeholder="请上传章节封面" clearable />
</ElFormItem>
</ElCol>
</ElRow>
<ElRow>
<ElCol :span="24">
<ElFormItem label="所属漫画">
<ElSelect v-model="formData.comic_id" clearable placeholder="请选择所属漫画">
<ElOption v-for="item in comicsList" :key="item.id" :label="item.name" :value="item.id" />
</ElSelect>
</ElFormItem>
</ElCol>
</ElRow>
<ElRow>
<ElCol :span="24">
<ElFormItem label="排序">
<ElInputNumber v-model="formData.sort" placeholder="请输入章节排序" clearable />
</ElFormItem>
</ElCol>
</ElRow>
<ElRow>
<ElCol :span="24">
<ElFormItem label="免费/VIP">
<ElRadioGroup v-model="formData.vip_required">
<ElRadio :value="0">
免费
</ElRadio>
<ElRadio :value="1">
VIP
</ElRadio>
</ElRadioGroup>
</ElFormItem>
</ElCol>
</ElRow>
<ElRow>
<ElCol :span="24">
<ElFormItem label="VIP提示文案">
<ElInput v-model="formData.vip_tips" placeholder="请输VIP提示文案" clearable />
</ElFormItem>
</ElCol>
</ElRow>
</ElForm>
</template>
</FaModal>
</div>
</template>
<style scoped>
.text-emphasis {
text-emphasis-style: "❤";
}
.title-info {
--uno: flex items-center gap-4;
img {
--uno: block w-12 h-12;
}
h1 {
--uno: m-0 text-2xl;
}
h2 {
--uno: m-0 text-base text-secondary-foreground/50 font-normal;
}
}
</style>
```
关闭于 2025-09-14 1 条评论