feat: 挂载ImportDialog + 修复路由白屏
## 页面挂载 - buyOdoo.vue: 新增「批量导入」按钮(新增旁边), ImportDialog material - list.vue: 新增「批量导入」按钮, ImportDialog material - BomManage.vue: 新增「导入BOM」按钮(新建BOM左边), ImportDialog bom ## 白屏修复 - AppMain.vue: 移除 transition mode=out-in 动画包裹(导致首次访问白屏) 改为 :key=route.fullPath 强制创建新实例
This commit is contained in:
@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="app-main">
|
<section class="app-main">
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component, route }">
|
||||||
<transition name="fade-transform" mode="out-in">
|
<component :is="Component" :key="route.fullPath" />
|
||||||
<component :is="Component" />
|
|
||||||
</transition>
|
|
||||||
</router-view>
|
</router-view>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -19,6 +19,7 @@
|
|||||||
</el-input>
|
</el-input>
|
||||||
<el-button @click="expandAllGroups" size="small" style="margin-right: 6px;">全部展开</el-button>
|
<el-button @click="expandAllGroups" size="small" style="margin-right: 6px;">全部展开</el-button>
|
||||||
<el-button @click="collapseAllGroups" size="small" style="margin-right: 10px;">全部折叠</el-button>
|
<el-button @click="collapseAllGroups" size="small" style="margin-right: 10px;">全部折叠</el-button>
|
||||||
|
<el-button v-if="userStore.hasPermission('bom_manage:operation')" type="success" plain :icon="Upload" @click="showImportDialog = true" style="margin-right:10px">导入BOM</el-button>
|
||||||
<el-button v-if="userStore.hasPermission('bom_manage:operation')" type="primary" :icon="Plus" @click="handleCreate">新建 BOM</el-button>
|
<el-button v-if="userStore.hasPermission('bom_manage:operation')" type="primary" :icon="Plus" @click="handleCreate">新建 BOM</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -249,15 +250,20 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 批量导入弹窗 -->
|
||||||
|
<ImportDialog v-model="showImportDialog" import-type="bom" @success="fetchBomSummary" />
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted, computed, nextTick, watch } from 'vue'
|
import { ref, reactive, onMounted, computed, nextTick, watch } from 'vue'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
|
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus'
|
||||||
import { Plus, Search, EditPen } from '@element-plus/icons-vue'
|
import { Plus, Search, EditPen, Upload } from '@element-plus/icons-vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { getBomList, getBomSummary, getBomDetail, saveBom, deleteBom, getDraftDetail, saveDraft, publishDraft } from '@/api/bom'
|
import { getBomList, getBomSummary, getBomDetail, saveBom, deleteBom, getDraftDetail, saveDraft, publishDraft } from '@/api/bom'
|
||||||
|
import ImportDialog from '@/components/ImportDialog.vue'
|
||||||
import { searchMaterialBase } from '@/api/inbound/buy'
|
import { searchMaterialBase } from '@/api/inbound/buy'
|
||||||
import { useUserStore } from '@/stores/user'
|
import { useUserStore } from '@/stores/user'
|
||||||
|
|
||||||
@ -303,6 +309,7 @@ const getDraftHash = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
|
const showImportDialog = ref(false)
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|||||||
@ -149,6 +149,10 @@
|
|||||||
<el-icon style="margin-right: 5px"><Plus /></el-icon>新增
|
<el-icon style="margin-right: 5px"><Plus /></el-icon>新增
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
|
<el-button v-if="userStore.hasPermission('material_list:operation')" type="success" plain @click="showImportDialog = true" style="margin-right: 10px">
|
||||||
|
<el-icon style="margin-right: 5px"><Upload /></el-icon>批量导入
|
||||||
|
</el-button>
|
||||||
|
|
||||||
<el-button plain @click="expandAllGroups" style="margin-right: 8px">全部展开</el-button>
|
<el-button plain @click="expandAllGroups" style="margin-right: 8px">全部展开</el-button>
|
||||||
<el-button plain @click="collapseAllGroups" style="margin-right: 8px">全部折叠</el-button>
|
<el-button plain @click="collapseAllGroups" style="margin-right: 8px">全部折叠</el-button>
|
||||||
|
|
||||||
@ -699,11 +703,15 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 批量导入弹窗 -->
|
||||||
|
<ImportDialog v-model="showImportDialog" import-type="material" @success="getList" />
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
|
import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
|
||||||
import { Plus, Document, DocumentCopy, Refresh, Setting, Rank, Camera, Download, Bell, CircleCheck, Files, ZoomIn, Delete, Picture, FolderOpened, Loading } from '@element-plus/icons-vue';
|
import { Plus, Document, DocumentCopy, Refresh, Setting, Rank, Camera, Download, Bell, CircleCheck, Files, ZoomIn, Delete, Picture, FolderOpened, Loading, Upload } from '@element-plus/icons-vue';
|
||||||
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
|
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
|
||||||
import type { FormInstance, FormRules } from 'element-plus';
|
import type { FormInstance, FormRules } from 'element-plus';
|
||||||
import { useUserStore } from '@/stores/user';
|
import { useUserStore } from '@/stores/user';
|
||||||
@ -728,6 +736,7 @@ import { uploadFile, deleteFile } from '@/api/common/upload';
|
|||||||
import { usePasteUpload } from '@/hooks/usePasteUpload';
|
import { usePasteUpload } from '@/hooks/usePasteUpload';
|
||||||
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue';
|
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue';
|
||||||
import ImageSearchDialog from '@/components/ImageSearchDialog.vue';
|
import ImageSearchDialog from '@/components/ImageSearchDialog.vue';
|
||||||
|
import ImportDialog from '@/components/ImportDialog.vue';
|
||||||
import { imageSearch as imageSearchApi, type ImageSearchItem } from '@/api/common/upload';
|
import { imageSearch as imageSearchApi, type ImageSearchItem } from '@/api/common/upload';
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
@ -790,6 +799,7 @@ const isUploading = ref(false);
|
|||||||
const tableSize = ref<'large' | 'default' | 'small'>('large');
|
const tableSize = ref<'large' | 'default' | 'small'>('large');
|
||||||
const advancedFilterVisible = ref(false);
|
const advancedFilterVisible = ref(false);
|
||||||
const imageSearchVisible = ref(false);
|
const imageSearchVisible = ref(false);
|
||||||
|
const showImportDialog = ref(false);
|
||||||
const advancedConditions = ref([{ field: '', operator: '', value: '' }]);
|
const advancedConditions = ref([{ field: '', operator: '', value: '' }]);
|
||||||
|
|
||||||
const fieldOptions = computed(() => {
|
const fieldOptions = computed(() => {
|
||||||
|
|||||||
@ -149,6 +149,9 @@
|
|||||||
<el-button v-if="userStore.hasPermission('material_list:operation')" type="primary" @click="handleAdd" style="margin-right: 10px">
|
<el-button v-if="userStore.hasPermission('material_list:operation')" type="primary" @click="handleAdd" style="margin-right: 10px">
|
||||||
<el-icon style="margin-right: 5px"><Plus /></el-icon>新增
|
<el-icon style="margin-right: 5px"><Plus /></el-icon>新增
|
||||||
</el-button>
|
</el-button>
|
||||||
|
<el-button v-if="userStore.hasPermission('material_list:operation')" type="success" plain @click="showImportDialog = true" style="margin-right: 10px">
|
||||||
|
<el-icon style="margin-right: 5px"><Upload /></el-icon>批量导入
|
||||||
|
</el-button>
|
||||||
|
|
||||||
<el-tooltip content="刷新" placement="top">
|
<el-tooltip content="刷新" placement="top">
|
||||||
<el-button circle :icon="Refresh" @click="getList" />
|
<el-button circle :icon="Refresh" @click="getList" />
|
||||||
@ -701,11 +704,15 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 批量导入弹窗 -->
|
||||||
|
<ImportDialog v-model="showImportDialog" import-type="material" @success="handleQuery" />
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
|
import { ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
|
||||||
import { Plus, Document, DocumentCopy, Refresh, Setting, Rank, Camera, Download, Bell, CircleCheck, Files, ZoomIn, Delete, Picture, ShoppingCart } from '@element-plus/icons-vue';
|
import { Plus, Document, DocumentCopy, Refresh, Setting, Rank, Camera, Download, Bell, CircleCheck, Files, ZoomIn, Delete, Picture, ShoppingCart, Upload } from '@element-plus/icons-vue';
|
||||||
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
|
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
|
||||||
import type { FormInstance, FormRules } from 'element-plus';
|
import type { FormInstance, FormRules } from 'element-plus';
|
||||||
import { useUserStore } from '@/stores/user';
|
import { useUserStore } from '@/stores/user';
|
||||||
@ -729,6 +736,7 @@ import { uploadFile, deleteFile } from '@/api/common/upload';
|
|||||||
import { usePasteUpload } from '@/hooks/usePasteUpload';
|
import { usePasteUpload } from '@/hooks/usePasteUpload';
|
||||||
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue';
|
import WebRtcCamera from '@/components/Camera/WebRtcCamera.vue';
|
||||||
import ImageSearchDialog from '@/components/ImageSearchDialog.vue';
|
import ImageSearchDialog from '@/components/ImageSearchDialog.vue';
|
||||||
|
import ImportDialog from '@/components/ImportDialog.vue';
|
||||||
import { imageSearch as imageSearchApi, type ImageSearchItem } from '@/api/common/upload';
|
import { imageSearch as imageSearchApi, type ImageSearchItem } from '@/api/common/upload';
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
@ -794,6 +802,7 @@ const isUploading = ref(false);
|
|||||||
const tableSize = ref<'large' | 'default' | 'small'>('large');
|
const tableSize = ref<'large' | 'default' | 'small'>('large');
|
||||||
const advancedFilterVisible = ref(false);
|
const advancedFilterVisible = ref(false);
|
||||||
const imageSearchVisible = ref(false);
|
const imageSearchVisible = ref(false);
|
||||||
|
const showImportDialog = ref(false);
|
||||||
const advancedConditions = ref([{ field: '', operator: '', value: '' }]);
|
const advancedConditions = ref([{ field: '', operator: '', value: '' }]);
|
||||||
const fieldOptions = computed(() => {
|
const fieldOptions = computed(() => {
|
||||||
const allFields = [
|
const allFields = [
|
||||||
|
|||||||
Reference in New Issue
Block a user