fix: 修改需求

src/views/roads/index.vue

@@ -1,16 +1,42 @@
 <template>
   <MainPanel>
     <template v-slot:header>
-      <Header :count="selects.length" :title="`现场图管理（${sortPhotos.length}）`" type="return_l" :on-back="() => onBack()">
-        <ui-button :type="selectMode ? 'primary' : 'normal'" @click="selectMode = !selectMode" width="96px" style="margin-right: 16px" v-if="sortPhotos.length">
-          {{ selectMode ? '取消' : '选择' }}
+      <Header
+        :count="selects.length"
+        :title="`现场图管理（${sortPhotos.length}）`"
+        type="return_l"
+        :on-back="() => onBack()"
+      >
+        <ui-button
+          :type="selectMode ? 'primary' : 'normal'"
+          @click="selectMode = !selectMode"
+          width="96px"
+          style="margin-right: 16px"
+          v-if="sortPhotos.length"
+        >
+          {{ selectMode ? "取消" : "选择" }}
+        </ui-button>
+        <ui-button
+          v-if="!selectMode"
+          type="primary"
+          @click="router.push({ name: writeRouteName.photos })"
+          width="96px"
+        >
+          新增
         </ui-button>
-        <ui-button v-if="!selectMode" type="primary" @click="router.push({ name: writeRouteName.photos })" width="96px"> 新增 </ui-button>
         <template v-slot:center="{ count }">
           <template v-if="count"> 已选择 {{ count }} 张 </template>
           <div v-else class="filter-type">
-            <span :class="{ active: currentType === TypeEnum.Draw }" @click="() => (currentType = TypeEnum.Draw)">绘图</span>
-            <span :class="{ active: currentType === TypeEnum.Table }" @click="() => (currentType = TypeEnum.Table)">制表</span>
+            <span
+              :class="{ active: currentType === TypeEnum.Draw }"
+              @click="() => (currentType = TypeEnum.Draw)"
+              >绘图</span
+            >
+            <span
+              :class="{ active: currentType === TypeEnum.Table }"
+              @click="() => (currentType = TypeEnum.Table)"
+              >制表</span
+            >
           </div>
         </template>
       </Header>
@@ -25,14 +51,25 @@
       :getURL="(data) => data?.table?.url || data.url"
     >
       <template v-slot="{ data }">
-        <p v-if="currentType === TypeEnum.Table">{{ data.title || '默认标题' }}</p>
+        <p v-if="currentType === TypeEnum.Table">{{ data.title || "默认标题" }}</p>
       </template>
     </Photos>
 
-    <ActionMenus class="select-menus" :menus="selectMenus" dire="row" v-if="selects.length" />
+    <ActionMenus
+      class="select-menus"
+      :menus="selectMenus"
+      dire="row"
+      v-if="selects.length"
+    />
   </MainPanel>
 
-  <FillSlide :getURL="(data) => data?.table?.url || data.url" :data="sortPhotos" v-model:active="active" @quit="active = null" v-if="active">
+  <FillSlide
+    :getURL="(data) => data?.table?.url || data.url"
+    :data="sortPhotos"
+    v-model:active="active"
+    @quit="active = null"
+    v-if="active"
+  >
     <template v-slot:foot>
       <ActionMenus class="menus" :menus="menus" dire="row" />
     </template>
@@ -40,29 +77,33 @@
 </template>
 
 <script setup lang="ts">
-import MainPanel from '@/components/main-panel/index.vue';
-import FillSlide from '@/components/fill-slide/index.vue';
-import { roadPhotos, RoadPhoto } from '@/store/roadPhotos';
-import ActionMenus from '@/components/group-button/index.vue';
-import { router, writeRouteName } from '@/router';
-import { computed, onDeactivated, reactive, ref, watchEffect } from 'vue';
-import { Mode } from '@/views/graphic/menus';
-import UiButton from '@/components/base/components/button/index.vue';
-import Header from '@/components/photos/header.vue';
-import Photos from '@/components/photos/index.vue';
-import ButtonPane from '@/components/button-pane/index.vue';
-import UiIcon from '@/components/base/components/icon/index.vue';
-import { useConfirm } from '@/hook';
-import { api } from '@/store/sync';
-import { photos } from '@/store/photos';
-import { getId } from '@/utils';
+import MainPanel from "@/components/main-panel/index.vue";
+import FillSlide from "@/components/fill-slide/index.vue";
+import { roadPhotos, RoadPhoto } from "@/store/roadPhotos";
+import ActionMenus from "@/components/group-button/index.vue";
+import { readyRouteName, router, writeRouteName } from "@/router";
+import { computed, onDeactivated, reactive, ref, watchEffect } from "vue";
+import { Mode } from "@/views/graphic/menus";
+import UiButton from "@/components/base/components/button/index.vue";
+import Header from "@/components/photos/header.vue";
+import Photos from "@/components/photos/index.vue";
+import ButtonPane from "@/components/button-pane/index.vue";
+import UiIcon from "@/components/base/components/icon/index.vue";
+import { useConfirm } from "@/hook";
+import { api } from "@/store/sync";
+import { photos } from "@/store/photos";
+import { getId } from "@/utils";
 
 const enum TypeEnum {
-  Draw,
-  Table,
+  Draw = "draw",
+  Table = "table",
 }
 const currentType = ref(TypeEnum.Draw);
-const sortPhotos = computed(() => roadPhotos.value.filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table)).reverse());
+const sortPhotos = computed(() =>
+  roadPhotos.value
+    .filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table))
+    .reverse()
+);
 const onBack = () => {
   let back = router.currentRoute.value.query.back;
   if (back) {
@@ -77,9 +118,9 @@ const selectMode = ref(false);
 const selects = ref<RoadPhoto[]>([]);
 const menus = computed(() => [
   {
-    key: 'copy',
-    icon: 'copy',
-    text: '复制',
+    key: "copy",
+    icon: "copy",
+    text: "复制",
     onClick: () => {
       const copy = JSON.parse(JSON.stringify(active.value)) as RoadPhoto;
       copy.id = getId();
@@ -90,31 +131,31 @@ const menus = computed(() => [
     },
   },
   {
-    key: 'tabulation',
-    icon: 'tabulation',
+    key: "tabulation",
+    icon: "tabulation",
     hide: currentType.value === TypeEnum.Table,
-    text: '制表',
+    text: "制表",
     onClick: () => gotoDraw(active.value, true),
   },
   {
-    key: 'road',
-    icon: 'edit',
-    text: '修改',
+    key: "road",
+    icon: "edit",
+    text: "修改",
     onClick: () => gotoDraw(),
   },
   {
-    key: 'del',
-    icon: 'del',
-    text: '删除',
+    key: "del",
+    icon: "del",
+    text: "删除",
     onClick: () => delPhoto(),
   },
 ]);
 
 const selectMenus = [
   {
-    key: 'del',
-    icon: 'del',
-    text: '删除',
+    key: "del",
+    icon: "del",
+    text: "删除",
     onClick: () => delSelects(),
   },
 ];
@@ -125,6 +166,16 @@ watchEffect(() => {
   }
 });
 
+watchEffect(() => {
+  const route = router.currentRoute.value;
+  if (route.name === readyRouteName.roads) {
+    console.log(route.params);
+    if (route.params.type) {
+      currentType.value = route.params.type as TypeEnum;
+    }
+  }
+});
+
 const delPhotoRaw = (roadPhoto = active.value) => {
   const index = roadPhotos.value.indexOf(roadPhoto);
   const reset = active.value ? roadPhotos.value.indexOf(active.value) : -1;
@@ -170,7 +221,7 @@ const gotoDraw = (road = active.value, forece = false) => {
   } else {
     router.push({
       name: writeRouteName.graphic,
-      params: { mode: Mode.Road, id: road.id, action: 'update' },
+      params: { mode: Mode.Road, id: road.id, action: "update" },
     });
   }
 };
@@ -230,7 +281,7 @@ onDeactivated(() => {
 
       &::after {
         position: absolute;
-        content: '';
+        content: "";
         bottom: 0;
         margin-bottom: -14px;
         left: 0;

src/views/roads/tabulation.vue

@@ -253,7 +253,7 @@ const saveHandler = genUseLoading(async () => {
     ...history.value.value,
     url: await getLayoutImage(),
   };
-  router.replace({ name: writeRouteName.roads });
+  router.replace({ name: writeRouteName.roads, params: {type: 'table'} });
 });
 </script>