feat:表格完善

src/router/constant.ts

@@ -14,11 +14,8 @@ export const readyRouteName = {
   accidents: 'accidents',
   roads: 'roads',
   tabulation: 'tabulation',
-  ask: 'ask',
   gena4: 'gena4',
-  explorate: 'explorate',
-  extract: 'extract',
-  identification: 'identification',
+  tables: 'tables',
   demo: 'demo',
 } as const;
 
@@ -54,10 +51,7 @@ export const readyRouteMeta: RouteMetaRaw = {
   [readyRouteName.roads]: { title: '道路照片' },
   [readyRouteName.tabulation]: { title: '制表' },
   [readyRouteName.gena4]: { title: '生成A4' },
-  [readyRouteName.ask]: { title: '询问笔录' },
-  [readyRouteName.explorate]: { title: '道路交通事故现场勘查笔录' },
-  [readyRouteName.extract]: { title: '当事人血样（尿样）提取登记表' },
-  [readyRouteName.identification]: { title: '道路交通事故认定书（简易程序）' },
+  [readyRouteName.tables]: { title: '道路交通事故现场勘查笔录' },
   [readyRouteName.demo]: { title: '表格' },
 };
 

src/router/info.ts

@@ -1,107 +1,80 @@
-import { modeFlags, ModeFlag } from "@/store/sys";
-import { ComputedRef } from "vue";
-import { RouteRecordRaw } from "vue-router";
-import {
-  RouteNameRaw,
-  RouteMetaRaw,
-  readyRouteMeta,
-  readyRouteName,
-  defRouteName,
-} from "./constant";
+import { modeFlags, ModeFlag } from '@/store/sys';
+import { ComputedRef } from 'vue';
+import { RouteRecordRaw } from 'vue-router';
+import { RouteNameRaw, RouteMetaRaw, readyRouteMeta, readyRouteName, defRouteName } from './constant';
 
-export type RouteAtom<
-  T extends ModeFlag = any,
-  key = RouteNameRaw<T>[keyof RouteNameRaw<T>]
-> = {
+export type RouteAtom<T extends ModeFlag = any, key = RouteNameRaw<T>[keyof RouteNameRaw<T>]> = {
   path: string;
   name: key;
   meta: key extends keyof RouteMetaRaw<T> ? RouteMetaRaw<T>[key] : never;
-  component: RouteRecordRaw["component"];
+  component: RouteRecordRaw['component'];
   redirect?: string;
   children?: RoutesRaw<T>;
 };
 
 export type RoutesRaw<T extends ModeFlag = any> = RouteAtom<T>[];
 
-import graphic from "@/views/graphic/index.vue";
+import graphic from '@/views/graphic/index.vue';
 export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> = [
   {
-    path: "/graphic/:mode/:action/:id",
+    path: '/graphic/:mode/:action/:id',
     name: readyRouteName.graphic,
     meta: readyRouteMeta.graphic,
-    component: () => import("@/views/graphic/index.vue"),
+    component: () => import('@/views/graphic/index.vue'),
   },
   {
-    path: "/scene",
+    path: '/scene',
     name: readyRouteName.scene,
     meta: readyRouteMeta.scene,
-    component: () => import("@/views/scene/index.vue"),
+    component: () => import('@/views/scene/index.vue'),
   },
   {
-    path: "/home",
+    path: '/home',
     name: readyRouteName.home,
     meta: readyRouteMeta.home,
-    component: () => import("@/views/scene/home.vue"),
+    component: () => import('@/views/scene/home.vue'),
   },
   {
-    path: "/photos",
+    path: '/photos',
     name: readyRouteName.photos,
     meta: readyRouteMeta.photos,
-    component: () => import("@/views/photos/index.vue"),
+    component: () => import('@/views/photos/index.vue'),
   },
   {
-    path: "/accidents",
+    path: '/accidents',
     name: readyRouteName.accidents,
     meta: readyRouteMeta.accidents,
-    component: () => import("@/views/accidents/index.vue"),
+    component: () => import('@/views/accidents/index.vue'),
   },
   {
-    path: "/gena4/:id1/:id2",
+    path: '/gena4/:id1/:id2',
     name: readyRouteName.gena4,
     meta: readyRouteMeta.gena4,
-    component: () => import("@/views/accidents/print.vue"),
+    component: () => import('@/views/accidents/print.vue'),
   },
   {
-    path: "/roads",
+    path: '/roads',
     name: readyRouteName.roads,
     meta: readyRouteMeta.roads,
-    component: () => import("@/views/roads/index.vue"),
+    component: () => import('@/views/roads/index.vue'),
   },
   {
-    path: "/tabulation/:id",
+    path: '/tabulation/:id',
     name: readyRouteName.tabulation,
     meta: readyRouteMeta.tabulation,
-    component: () => import("@/views/roads/tabulation.vue"),
+    component: () => import('@/views/roads/tabulation.vue'),
   },
   {
-    path: "/ask/:id",
-    name: readyRouteName.ask,
-    meta: readyRouteMeta.ask,
-    component: () => import("@/views/tables/ask.vue"),
+    path: '/tables/:name',
+    name: readyRouteName.tables,
+    meta: readyRouteMeta.tables,
+    component: () => import('@/views/tables/index.vue'),
   },
   {
-    path: "/explorate/:id",
-    name: readyRouteName.explorate,
-    meta: readyRouteMeta.explorate,
-    component: () => import("@/views/tables/explorate.vue"),
-  },
-  {
-    path: "/extract/:id",
-    name: readyRouteName.extract,
-    meta: readyRouteMeta.extract,
-    component: () => import("@/views/tables/extract.vue"),
-  },
-  {
-    path: "/identification/:id",
-    name: readyRouteName.identification,
-    meta: readyRouteMeta.identification,
-    component: () => import("@/views/tables/identification.vue"),
-  },
-  {
-    path: "/demo/:id",
+    path: '/demo/:id',
     name: readyRouteName.demo,
     meta: readyRouteMeta.demo,
-    component: () => import("@/views/tables/demo.vue"),
+    component: () => import('@/views/tables/demo.vue'),
   },
 ];
 

src/views/scene/index.vue

@@ -114,43 +114,51 @@ const goItem = (item) => {
   if (item.id == 8) {
     return;
   }
-  router.push(`/demo/${item.id}`);
+  // router.push(`/demo/${item.id}`);
+  router.push(`/tables/${item.type}`);
 };
 const list = ref([
   {
     id: 1,
     icon: 'prospect',
     name: '勘查笔录',
+    type: 'explorate',
   },
   {
     id: 2,
     icon: 'inquiry',
     name: '询问笔录',
+    type: 'ask?type=1',
   },
   {
     id: 3,
     icon: 'question',
     name: '讯问笔录',
+    type: 'ask?type=2',
   },
   {
     id: 4,
     icon: 'accident',
     name: '事故认定',
+    type: 'identification',
   },
   {
     id: 5,
     icon: 'blood',
     name: '血样登记表',
+    type: 'extract',
   },
   {
     id: 6,
     icon: 'items',
     name: '遗留物品清单',
+    type: 'legacy',
   },
   {
     id: 7,
     icon: 'authorization',
     name: '授权委托书',
+    type: 'author',
   },
   {
     id: 8,

src/views/tables/ask.vue

@@ -15,7 +15,8 @@
       <span>次</span>
     </div>
 
-    <h2 class="title">询问/<span class="through">讯问</span>笔录</h2>
+    <h2 class="title" v-if="type == '1'">询问/<span class="through">讯问</span>笔录</h2>
+    <h2 class="title" v-else><span class="through">询问</span>/讯问笔录</h2>
     <div class="container">
       <div class="line">
         <span>时间</span>
@@ -28,7 +29,8 @@
         <div class="write-line left" contenteditable></div>
       </div>
       <div class="line">
-        <span>询问/<span class="through">讯问</span>人</span>
+        <span v-if="type == '1'">询问/<span class="through">讯问</span>人</span>
+        <span v-else><span class="through">询问</span>/讯问人</span>
         <div class="write-line" contenteditable></div>
         <span>工作单位</span>
         <div class="write-line" contenteditable></div>
@@ -40,7 +42,8 @@
         <div class="write-line" contenteditable></div>
       </div>
       <div class="line">
-        <span>被询问/<span class="through">讯问</span>人</span>
+        <span v-if="type == '1'">被询问/<span class="through">讯问</span>人</span>
+        <span v-else>被<span class="through">询问</span>/讯问人</span>
         <div style="flex: 0.5" class="write-line" contenteditable></div>
         <span>性别</span>
         <div style="flex: 0.3" class="write-line" contenteditable></div>
@@ -65,7 +68,8 @@
         <div class="write-line left" contenteditable></div>
       </div>
       <div class="line worap">
-        <span style="line-height: 40px"> (口头传唤/被扭送/自动投案的被询问/<span class="through">讯问</span>人于</span>
+        <span v-if="type == '1'" style="line-height: 40px"> (口头传唤/被扭送/自动投案的被询问/<span class="through">讯问</span>人于</span>
+        <span v-else style="line-height: 40px"> (口头传唤/被扭送/自动投案的被<span class="through">询问</span>/讯问人于</span>
         <div class="write-line" style="width: 40%" contenteditable></div>
         <span style="line-height: 40px"> 到达，</span>
         <div class="write-line" style="" contenteditable></div>
@@ -76,7 +80,7 @@
       </div>
       <div class="more-line">
         <textarea v-if="!downMode" v-model="text" name=""></textarea>
-        <div class="downMode">{{ text }}</div>
+        <div v-if="downMode" class="downMode">{{ text }}</div>
         <div class="more-line-box">
           <div class="item"></div>
           <div class="item"></div>
@@ -88,7 +92,8 @@
       </div>
     </div>
     <div class="bottom-name">
-      <span>被询问人:</span>
+      <span v-if="type == '1'">被询问人:</span>
+      <span v-else>被讯问人:</span>
       <div style="flex: 1" contenteditable></div>
     </div>
   </div>
@@ -96,6 +101,7 @@
 
 <script setup>
 import { reactive, ref, toRefs, onBeforeMount, onMounted, defineProps } from 'vue';
+import { router } from '@/router';
 const props = defineProps({
   downMode: {
     type: Boolean,
@@ -103,6 +109,7 @@ const props = defineProps({
   },
 });
 const text = ref('');
+const type = ref(router.currentRoute.value.query.type);
 </script>
 <style lang="scss" scoped>
 div[contenteditable] {

src/views/tables/extract.vue

@@ -80,22 +80,6 @@
 
 <script setup lang="ts">
 import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
-import html2canvas from 'html2canvas';
-import { downloadImage, uploadImage } from '@/store/sync';
-import Message from '@/components/base/components/message/message.vue';
-const layoutRef = ref<HTMLDivElement>();
-const downMode = ref(false);
-const getLayoutImage = async () => {
-  downMode.value = true;
-  await nextTick();
-  console.error(layoutRef.value);
-  const canvas = await html2canvas(layoutRef.value);
-  Message.success({ msg: '已保存至相册', time: 2000 });
-  downMode.value = false;
-  const blob = await new Promise<Blob>((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.95));
-  await downloadImage(blob, '12312.jpg');
-  // return await uploadImage(blob);
-};
 </script>
 <style lang="scss" scoped>
 td[contenteditable] {
@@ -147,10 +131,10 @@ td[contenteditable] {
             align-items: center;
             justify-content: flex-start;
             input {
-            width: 100%;
-            height: 100%;
-            text-align: center;
-          }
+              width: 100%;
+              height: 100%;
+              text-align: center;
+            }
           }
           input {
             width: 100%;

src/views/tables/explorate.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, onActivated } from 'vue';
 import { router } from '@/router';
 import Swiper from 'swiper';
 import 'swiper/swiper.min.css';
@@ -49,8 +49,9 @@ import legacy from './legacy.vue';
 import ask from './ask.vue';
 // const eleList = ref([one, two, three, four]);
 // const eleList = ref([authorOne, authorTwo]);
-const eleList = ref([ask]);
+const eleList = ref([]);
 
+const tableType = ref<string | string[]>();
 const downMode = ref(false);
 const getLayoutImage = async () => {
   downMode.value = true;
@@ -69,27 +70,59 @@ const getLayoutImage = async () => {
 
   // return await uploadImage(blob);
 };
-onMounted(() => {
-  var swiper = new Swiper('.mySwiper', {
-    on: {
-      init: function (swiper) {
-        // for (let i = 0; i < imageList.value.length; i++) {
-        //     vmZoom.value[i] = document.getElementById(`vmRef_${i}`)
-        //     zoomElement(vmZoom.value[i])
-        // }
-      },
-      transitionStart: function (swiper) {
-        // alert(swiper.previousIndex)
-        // console.log(vmZoom.value[swiper.previousIndex].style.transform)
-        // let scale = getTransform(vmZoom.value[swiper.previousIndex])
-      },
+const initTables = () => {
+  tableType.value = router.currentRoute.value.params.name;
+  switch (tableType.value) {
+    case 'explorate':
+      eleList.value = [one, two, three, four];
+      break;
+    case 'ask':
+      eleList.value = [ask];
+      break;
+    case 'author':
+      eleList.value = [authorOne, authorTwo];
+      break;
+    case 'legacy':
+      eleList.value = [legacy];
+      break;
+    case 'extract':
+      eleList.value = [extract];
+      break;
+    case 'identification':
+      eleList.value = [identification];
+      break;
+  }
+};
+const mySwiper = ref(null);
+onActivated(() => {
+  initTables();
+  mySwiper.value = null;
+  nextTick(() => {
+    mySwiper.value = new Swiper('.mySwiper', {
+      on: {
+        init: function (swiper) {
+          console.error(swiper)
+          swiper.slideTo(0);
+
+          // for (let i = 0; i < imageList.value.length; i++) {
+          //     vmZoom.value[i] = document.getElementById(`vmRef_${i}`)
+          //     zoomElement(vmZoom.value[i])
+          // }
+        },
+        transitionStart: function (swiper) {
+          // alert(swiper.previousIndex)
+          // console.log(vmZoom.value[swiper.previousIndex].style.transform)
+          // let scale = getTransform(vmZoom.value[swiper.previousIndex])
+        },
 
-      touchStart: function (swiper, event) {
-        // console.log(swiper.previousIndex)
+        touchStart: function (swiper, event) {
+          // console.log(swiper.previousIndex)
+        },
       },
-    },
+    });
   });
 });
+onMounted(() => {});
 </script>
 <style lang="scss" scoped>
 .mySwiper {

src/views/tables/legacy.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="legacy">
-    <h2 class="title">当事人血样（尿样）提取登记表</h2>
+    <h2 class="title">道路交通事故现场遗留物品清单</h2>
     <table>
       <tr>
         <td colspan="7" style="text-align: left">