处理影像资料，重复进入页面数据不改变的问题

src/layout/index.vue

@@ -37,7 +37,8 @@
                 <div class="hc-header-content">
                     <div class="hc-header-cascader-box">
                         <div class="project-name-box">{{ projectInfo.projectAlias }} / {{ contractInfo.name }}</div>
-                        <el-cascader ref="ElCascaderRef" v-model="projectValue" :clearable="userInfo?.role_id === '1123598816738675201'"
+                        <el-cascader ref="ElCascaderRef" v-model="projectValue"
+                                     :clearable="userInfo?.role_id === '1123598816738675201'"
                                      :filterable="userInfo?.role_id === '1123598816738675201'"
                                      :options="projectContract"
                                      :props="projectProps" placeholder="请选择项目"
@@ -51,7 +52,7 @@
             <el-main id="hc-main-box" class="hc-main-box">
                 <router-view v-if="reloadRouter" v-slot="{ Component }">
                     <transition name="fade-transform">
-                        <keep-alive :max="10" exclude="home,home-index,home-config">
+                        <keep-alive :max="10" exclude="home,home-index,home-config,other-file-view,other-file-form">
                             <component :is="Component" :msgCount="msgCount"/>
                         </keep-alive>
                     </transition>

src/layout/modules/TopMenuBar.vue

@@ -52,7 +52,7 @@ watch(() => [
 //设置菜单数据
 const setBarMenuData = () => {
     const {key, path, title} = barRoutes.value
-    if (key !== 'home-index') {
+    if (['home', 'home-index'].indexOf(key) === -1) {
         const index = barMenuData.value.findIndex(item => item.key === key)
         if (index === -1) {
             barMenuData.value.push({path, key: key, title: title})

src/views/other-file/image-view.vue

@@ -1,25 +1,27 @@
 <template>
     <div class="hc-layout-box">
-        <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'">
+        <div :style="'width:' + leftWidth + 'px;'" class="hc-layout-left-box">
             <template v-if="dataType === 1">
                 <div class="hc-project-box">
                     <div class="hc-project-icon-box">
                         <HcIcon name="stack"/>
                     </div>
                     <div class="ml-2 project-name-box">
-                        <span class="text-xl text-cut project-alias">{{projectInfo['projectAlias']}}</span>
-                        <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
+                        <span class="text-xl text-cut project-alias">{{ projectInfo['projectAlias'] }}</span>
+                        <div class="text-xs text-cut project-name">{{ projectInfo['name'] }}</div>
                     </div>
                 </div>
                 <div class="hc-tree-box">
                     <el-scrollbar>
-                        <WbsTree :autoExpandKeys="TreeAutoExpandKeys" :projectId="projectId" :contractId="contractId" @nodeTap="nodeWbsElTreeClick"/>
+                        <WbsTree :autoExpandKeys="TreeAutoExpandKeys" :contractId="contractId" :projectId="projectId"
+                                 @nodeTap="nodeWbsElTreeClick"/>
                     </el-scrollbar>
                 </div>
             </template>
-            <div class="hc-tree-box date-tree" v-else>
+            <div v-else class="hc-tree-box date-tree">
                 <el-scrollbar>
-                    <HcTreeData :datas="dateElTreeData" :autoExpandKeys="TreeExpandedKeys" @nodeTap="dateWbsElTreeClick"/>
+                    <HcTreeData :autoExpandKeys="TreeExpandedKeys" :datas="dateElTreeData"
+                                @nodeTap="dateWbsElTreeClick"/>
                 </el-scrollbar>
             </div>
             <!--左右拖动-->
@@ -29,19 +31,21 @@
             <HcCard :scrollbar="false" actionSize="lg">
                 <template #header>
                     <HcTooltip keys="image-data-add">
-                        <el-button type="primary" hc-btn :disabled="!queryKey && dataType === 1" @click="addFormFile">
+                        <el-button :disabled="!queryKey && dataType === 1" hc-btn type="primary" @click="addFormFile">
                             <HcIcon name="add_box"/>
                             <span>新增文件</span>
                         </el-button>
                     </HcTooltip>
                     <HcTooltip keys="image-data-download">
-                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" :loading="downloadLoading" @click="downloadClick">
+                        <el-button :disabled="tableCheckedKeys.length <= 0" :loading="downloadLoading" hc-btn
+                                   @click="downloadClick">
                             <HcIcon name="download"/>
                             <span>下载</span>
                         </el-button>
                     </HcTooltip>
                     <HcTooltip keys="image-data-del">
-                        <el-button hc-btn :disabled="tableCheckedKeys.length <= 0" :loading="delLoading" @click="delClick">
+                        <el-button :disabled="tableCheckedKeys.length <= 0" :loading="delLoading" hc-btn
+                                   @click="delClick">
                             <HcIcon name="delete"/>
                             <span>删除</span>
                         </el-button>
@@ -49,37 +53,41 @@
                 </template>
                 <template #extra>
                     <div class="w-60">
-                        <el-input v-model="searchForm.queryStr" size="large" placeholder="根据题名名称或拍摄者搜索" clearable @keyup="keyUpEvent"/>
+                        <el-input v-model="searchForm.queryStr" clearable placeholder="根据题名名称或拍摄者搜索"
+                                  size="large" @keyup="keyUpEvent"/>
                     </div>
                     <div class="ml-2">
-                        <el-button type="primary" size="large" @click="searchClick">搜索</el-button>
+                        <el-button size="large" type="primary" @click="searchClick">搜索</el-button>
                     </div>
                 </template>
-                <HcTable ref="tableListRef" :column="tableListColumn" :datas="tableListData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
+                <HcTable ref="tableListRef" :column="tableListColumn" :datas="tableListData" :loading="tableLoading"
+                         isCheck @selection-change="tableSelectionChange">
                     <template #info="{row}">
                         <div class="hc-table-col-item">
-                            <div class="img-box" v-if="row.type !== 1">
-                                <HcImg class="hc-image" :src="setImageUrl(row.imageUrl)"/>
+                            <div v-if="row.type !== 1" class="img-box">
+                                <HcImg :src="setImageUrl(row.imageUrl)" class="hc-image"/>
                             </div>
-                            <div class="img-box" v-else>
+                            <div v-else class="img-box">
                                 <video :src="row.imageUrl">
                                     您的浏览器不支持 video
                                 </video>
                             </div>
                             <div class="content-box">
-                                <div class="text-cut title">{{row.title}}</div>
-                                <div class="shootingUser">拍摄者：{{row.shootingUser}}</div>
-                                <div class="shootingTimeStr">拍摄时间：{{row.shootingTimeStr}}</div>
-                                <div class="fileSize">文件大小：{{row.fileSize}}</div>
+                                <div class="text-cut title">{{ row.title }}</div>
+                                <div class="shootingUser">拍摄者：{{ row.shootingUser }}</div>
+                                <div class="shootingTimeStr">拍摄时间：{{ row.shootingTimeStr }}</div>
+                                <div class="fileSize">文件大小：{{ row.fileSize }}</div>
                             </div>
                         </div>
                     </template>
                     <template #operate="{row}">
                         <HcTooltip keys="image-data-preview">
-                            <el-button type="primary" size="small" text :loading="previewLoading" @click="previewClick(row)">查看</el-button>
+                            <el-button :loading="previewLoading" size="small" text type="primary"
+                                       @click="previewClick(row)">查看
+                            </el-button>
                         </HcTooltip>
                         <HcTooltip keys="image-data-edit">
-                            <el-button type="primary" size="small" text @click="editClick(row)">编辑</el-button>
+                            <el-button size="small" text type="primary" @click="editClick(row)">编辑</el-button>
                         </HcTooltip>
                     </template>
                 </HcTable>
@@ -99,8 +107,9 @@
             </HcCard>
         </div>
         <!--视频预览 弹框-->
-        <el-dialog v-model="previewVideoModal" title="预览" width="47rem" destroy-on-close class="hc-modal-border">
-            <video class="preview-video" :src="previewVideoUrl" controls="controls" autoplay="autoplay" v-if="previewVideoUrl">
+        <el-dialog v-model="previewVideoModal" class="hc-modal-border" destroy-on-close title="预览" width="47rem">
+            <video v-if="previewVideoUrl" :src="previewVideoUrl" autoplay="autoplay" class="preview-video"
+                   controls="controls">
                 您的浏览器不支持 video
             </video>
         </el-dialog>
@@ -129,28 +138,38 @@ const isCollapse = ref(useAppState.getCollapse)
 //路由参数
 const routerQuery = useRoutes?.query;
 //存储目录格式 1按部位存储，2按日期存储
-const dataId = routerQuery?.id || '';
-const dataType = parseInt(routerQuery?.type + '') || 1;
-const fileType = parseInt(routerQuery?.fileType + '') || 2;
+const dataId = ref(routerQuery?.id || '')
+const dataType = ref(parseInt(routerQuery?.type + '') || 1);
+const fileType = ref(parseInt(routerQuery?.fileType + '') || 2);
 
 //监听
 watch(() => [
     useAppState.getCollapse,
     useAppState.getContractId
-], ([Collapse,ContractId]) => {
+], ([Collapse, ContractId]) => {
     isCollapse.value = Collapse
-    contractId.value=ContractId
+    contractId.value = ContractId
 })
+
+//监听路由参数改变
+watch(() => [
+    useRoutes?.query
+], ([query]) => {
+    dataId.value = query?.id || ''
+    dataType.value = parseInt(query?.type + '') || 1
+    fileType.value = parseInt(query?.fileType + '') || 2
+    initMounted()
+}, {deep: true})
+
 watch(contractId, (val) => {
-    if(val){
+    if (val) {
         console.log(val)
         router.push({
             path: '/other-file/image-data',
-     })
+        })
     }
-      
-   
-    })
+})
+
 //自动展开缓存
 const TreeAutoExpandKeys = ref([])
 const TreeExpandedKeys = ref([])
@@ -158,18 +177,23 @@ const TreeCurrentNodeKey = ref(getStoreData('TreeCurrentNodeKey') || '')
 
 //渲染完成
 onMounted(() => {
+    initMounted()
+})
+
+const initMounted = () => {
+    console.log('onMounted')
     const nodeKey = TreeCurrentNodeKey.value
-    if (dataType === 1) {
+    if (dataType.value === 1) {
         TreeAutoExpandKeys.value = getStoreData('TreeExpandKeys') || []
     } else {
         TreeExpandedKeys.value = getStoreData('TreeExpandedKeys') || []
     }
-    if (dataType === 2 && dataId) {
+    if (dataType.value === 2 && dataId.value) {
         getYearDateTree()
         queryKey.value = nodeKey
-        console.log(  queryKey.value,'  queryKey.value');
-        if(isNaN(queryKey.value) && !isNaN(Date.parse(queryKey.value))){
-        　queryKey.value = ''
+        //console.log(queryKey.value, '  queryKey.value');
+        if (isNaN(queryKey.value) && !isNaN(Date.parse(queryKey.value))) {
+            queryKey.value = ''
         }
         searchForm.value.queryDate = nodeKey
         searchForm.value.current = 1;
@@ -177,15 +201,15 @@ onMounted(() => {
     } else {
         queryKey.value = ''
     }
-})
+}
 
 //获取时间结构
 const dateElTreeData = ref([])
 const getYearDateTree = async () => {
-    const { error, code, data } = await imageApi.getYearDateTree({
+    const {error, code, data} = await imageApi.getYearDateTree({
         projectId: projectId.value,
         contractId: contractId.value,
-        classifyId: dataId
+        classifyId: dataId.value
     })
     //处理数据
     if (!error && code === 200) {
@@ -198,7 +222,7 @@ const getYearDateTree = async () => {
 const nodeDataInfo = ref({})
 const dateWbsElTreeClick = ({data, keys, key}) => {
     // queryKey.value = key
-        queryKey.value = ''
+    queryKey.value = ''
     nodeDataInfo.value = data
     //缓存自动展开
     TreeExpandedKeys.value = keys
@@ -214,11 +238,11 @@ const dateWbsElTreeClick = ({data, keys, key}) => {
 
 //项目树被点击
 const nodeWbsElTreeClick = ({data, keys}) => {
-      searchForm.value.wbsIdsStr = data?.primaryKeyId || ''
+    searchForm.value.wbsIdsStr = data?.primaryKeyId || ''
     if (data.leaf === true) {
         nodeDataInfo.value = data
         queryKey.value = data['primaryKeyId'] || ''
-        
+
         //缓存自动展开
         TreeAutoExpandKeys.value = keys
         setStoreData('TreeExpandKeys', keys)
@@ -241,7 +265,7 @@ const nodeWbsElTreeClick = ({data, keys}) => {
 //搜索和分页数据
 const queryKey = ref(null)
 const searchForm = ref({
-    queryStr: null, classifyId: dataId, wbsIdsStr: null,
+    queryStr: null, classifyId: dataId.value, wbsIdsStr: null,
     current: 1, size: 20, total: 0
 })
 
@@ -274,9 +298,9 @@ const tableListRef = ref(null)
 const tableLoading = ref(false)
 const tableListData = ref([])
 const tableListColumn = ref([
-    {key:'info', name: '文件详情'},
-    {key:'textContent', name: '文字说明'},
-    {key:'operate', name: '操作', align: 'center', width: '140'},
+    {key: 'info', name: '文件详情'},
+    {key: 'textContent', name: '文字说明'},
+    {key: 'operate', name: '操作', align: 'center', width: '140'},
 ])
 const getTableData = async () => {
     tableLoading.value = true
@@ -300,7 +324,7 @@ const getTableData = async () => {
 const tableCheckedKeys = ref([]);
 const tableSelectionChange = (rows) => {
     tableCheckedKeys.value = rows.filter((item) => {
-        return (item??'') !== '';
+        return (item ?? '') !== '';
     })
 }
 
@@ -323,7 +347,7 @@ const previewVideoUrl = ref('')
 const previewVideoModal = ref(false)
 const previewLoading = ref(false)
 const previewClick = async (item) => {
-    const {id,type,imageUrl,margePdfUrl} = item
+    const {id, type, imageUrl, margePdfUrl} = item
     if (parseInt(type) === 1) {
         if (imageUrl) {
             previewVideoUrl.value = imageUrl
@@ -332,7 +356,7 @@ const previewClick = async (item) => {
             window.$message?.warning('暂无可预览的资料文件');
         }
     } else if (parseInt(type) === 2) {
-        if(margePdfUrl) {
+        if (margePdfUrl) {
             window.open(margePdfUrl, "_blank");
         } else {
             previewLoading.value = true
@@ -343,7 +367,7 @@ const previewClick = async (item) => {
             previewLoading.value = false
             if (!error && code === 200 && isString(data)) {
                 item.margePdfUrl = data
-                window.open(data,"_blank");
+                window.open(data, "_blank");
             } else {
                 window.$message?.warning('预览资料文件异常');
             }
@@ -357,9 +381,9 @@ const addFormFile = () => {
         path: '/other-file/image-form',
         query: {
             wbsId: queryKey.value,  //树节点ID
-            dataType: dataType,     //存储目录格式 1按部位存储，2按日期存储
-            fileType: fileType,     //文件类型，1视频文件，2图片文件
-            classifyId: dataId,     //classifyId,分类ID,
+            dataType: dataType.value,     //存储目录格式 1按部位存储，2按日期存储
+            fileType: fileType.value,     //文件类型，1视频文件，2图片文件
+            classifyId: dataId.value,     //classifyId,分类ID,
         }
     })
 }
@@ -370,9 +394,9 @@ const editClick = ({id}) => {
         path: '/other-file/image-form',
         query: {
             wbsId: queryKey.value,  //树节点ID
-            dataType: dataType,     //存储目录格式 1按部位存储，2按日期存储
-            fileType: fileType,     //文件类型，1视频文件，2图片文件
-            classifyId: dataId,     //classifyId,分类ID,
+            dataType: dataType.value,     //存储目录格式 1按部位存储，2按日期存储
+            fileType: fileType.value,     //文件类型，1视频文件，2图片文件
+            classifyId: dataId.value,     //classifyId,分类ID,
             id: id  //数据ID
         }
     })
@@ -392,11 +416,11 @@ const downloadClick = async () => {
     if (rows.length > 0) {
         downloadLoading.value = true
         const ids = rowsToId(rows)
-        const { error, disposition, res } = await imageApi.batchDownloadFileToZip({ids: ids}, false)
+        const {error, disposition, res} = await imageApi.batchDownloadFileToZip({ids: ids}, false)
         //判断状态
         if (!error) {
             if (disposition) {
-                downloadBlob(res,disposition)
+                downloadBlob(res, disposition)
             } else {
                 window.$message?.error('下载异常')
             }
@@ -445,14 +469,14 @@ const goToBack = () => {
 }
 
 //左右拖动，改变树形结构宽度
-const leftWidth = ref(dataType === 1 ? 382 : 220);
+const leftWidth = ref(dataType.value === 1 ? 382 : 220);
 const onmousedown = () => {
     const leftNum = isCollapse.value ? 142 : 272
     document.onmousemove = (ve) => {
         const diffVal = ve.clientX - leftNum;
-        const minWidth = dataType === 1 ? 310 : 200
-        const maxWidth = dataType === 1 ? 900 : 300
-        if(diffVal >= minWidth && diffVal <= maxWidth) {
+        const minWidth = dataType.value === 1 ? 310 : 200
+        const maxWidth = dataType.value === 1 ? 900 : 300
+        if (diffVal >= minWidth && diffVal <= maxWidth) {
             leftWidth.value = diffVal;
         }
     }