数据本地化

src/components/base/editor/input-canvas/index.vue

@@ -0,0 +1,26 @@
+<!--  -->
+<template>
+  <div>
+    <!-- <input type="text" /> -->
+    <div class="content">{{ value }}</div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted, defineProps } from "vue";
+const props = defineProps(["value", "downMode"]);
+</script>
+<style lang="scss" scoped>
+input {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/store/sync.ts

@@ -14,6 +14,7 @@ import { baseURL } from "@/dbo/main";
 import { defaultUses, uses } from "@/store/SVGLabel";
 import { imageRotate } from "@/utils/image-rotate";
 import { sceneSeting } from "./sceneSeting";
+import { tables } from "./tables";
 
 const global = window as any;
 
@@ -234,7 +235,8 @@ const loadStore = async () => {
   accidentPhotos.value = data?.accidentPhotos || [];
   roadPhotos.value = data?.roadPhotos || [];
   uses.value = data?.uses || defaultUses;
-
+  tables.value = data?.tables || null;
+  
   syncSceneStore();
 };
 
@@ -266,6 +268,7 @@ const syncSceneStore = () => {
       uses: uses.value,
       accidentPhotos: accidentPhotos.value,
       roadPhotos: roadPhotos.value,
+      tables : tables.value,
     }),
     (data) => {
       updateSceneStore(data);

src/store/tables.ts

@@ -0,0 +1,3 @@
+import { ref } from "vue";
+
+export const tables = ref({});

src/views/tables/ask.vue

@@ -2,7 +2,7 @@
 <template>
   <!-- <iframe style="width:100%;height: 100%;" src="./static/html/FG.html" frameborder="0"></iframe> -->
 
-  <div class="ask-content">
+  <div class="ask-content" :class="{ downMode }" v-if="data">
     <!-- <Write v-if="isWrite" :text="text" :textIndex="textIndex" @onTextConfirm="onTextConfirm"> </Write> -->
     <div v-show="!isWrite" class="num-box">
       <span>第</span>
@@ -13,7 +13,10 @@
     </div>
     <div v-show="!isWrite" class="num-box" style="padding-right: 114px">
       <span>第</span>
-      <div class="input-box" contenteditable></div>
+      <div class="input-box">
+        <input style="text-align: center; width: 100%" type="text" v-model="data.times" />
+        <div class="content-box">{{ data.times }}</div>
+      </div>
       <span>次</span>
     </div>
 
@@ -22,62 +25,120 @@
     <div class="container" v-show="!isWrite">
       <div class="line">
         <span>时间</span>
-        <div class="write-line" contenteditable></div>
+        <div class="write-line">
+          <input type="text" v-model="data.startTime" />
+          <div class="content-box">{{ data.startTime }}</div>
+        </div>
         <span>至</span>
-        <div class="write-line" contenteditable></div>
+        <div class="write-line">
+          <input type="text" v-model="data.endTime" />
+          <div class="content-box">{{ data.endTime }}</div>
+        </div>
       </div>
       <div class="line">
         <span>地点</span>
-        <div class="write-line left" contenteditable></div>
+        <div class="write-line left">
+          <input type="text" v-model="data.address" />
+          <div class="content-box">{{ data.address }}</div>
+        </div>
       </div>
       <div class="line">
         <span v-if="type == '1'">询问/<span class="through">讯问</span>人</span>
         <span v-else><span class="through">询问</span>/讯问人</span>
-        <div class="write-line" contenteditable></div>
+        <div class="write-line">
+          <input type="text" v-model="data.asker" />
+          <div class="content-box">{{ data.asker }}</div>
+        </div>
         <span>工作单位</span>
-        <div class="write-line" contenteditable></div>
+        <div class="write-line">
+          <input type="text" v-model="data.askCompany" />
+          <div class="content-box">{{ data.askCompany }}</div>
+        </div>
       </div>
       <div class="line">
         <span>记录人</span>
-        <div class="write-line" contenteditable></div>
+        <div class="write-line">
+          <input type="text" v-model="data.reporter" />
+          <div class="content-box">{{ data.reporter }}</div>
+        </div>
         <span>工作单位</span>
-        <div class="write-line" contenteditable></div>
+        <div class="write-line">
+          <input type="text" v-model="data.reporterCompany" />
+          <div class="content-box">{{ data.reporterCompany }}</div>
+        </div>
       </div>
       <div class="line">
         <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>
+        <div style="flex: 0.5" class="write-line">
+          <input type="text" v-model="data.askerBy" />
+          <div class="content-box">{{ data.askerBy }}</div>
+        </div>
         <span>性别</span>
-        <div style="flex: 0.3" class="write-line" contenteditable></div>
+        <div style="flex: 0.3" class="write-line">
+          <input type="text" v-model="data.sex" />
+          <div class="content-box">{{ data.sex }}</div>
+        </div>
         <span>年龄</span>
-        <div style="flex: 0.3" class="write-line" contenteditable></div>
+        <div style="flex: 0.3" class="write-line">
+          <input type="text" v-model="data.age" />
+          <div class="content-box">{{ data.age }}</div>
+        </div>
         <span>出生日期</span>
-        <div class="write-line" contenteditable></div>
+        <div class="write-line">
+          <input type="text" v-model="data.birth" />
+          <div class="content-box">{{ data.birth }}</div>
+        </div>
       </div>
       <div class="line">
         <span>身份证件种类及号码</span>
-        <div class="write-line" contenteditable></div>
-        <span>是否人大代表</span>
+        <div class="write-line">
+          <input type="text" v-model="data.id" />
+          <div class="content-box">{{ data.id }}</div>
+        </div>
+        <div v-for="(i, index) in isnotList.options" @click="checkOptions(isnotList, index)">
+          <ui-icon :type="data.NPC.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+          <span>{{ i.title }}</span>
+        </div>
+        <span>人大代表</span>
       </div>
       <div class="line">
         <span>现住址</span>
-        <div class="write-line" contenteditable></div>
+        <div class="write-line">
+          <input type="text" v-model="data.adressNow" />
+          <div class="content-box">{{ data.adressNow }}</div>
+        </div>
         <span>联系方式</span>
-        <div style="flex: 0.3" class="write-line" contenteditable></div>
+        <div style="flex: 0.3" class="write-line">
+          <input type="text" v-model="data.phoneNumber" />
+          <div class="content-box">{{ data.phoneNumber }}</div>
+        </div>
       </div>
       <div class="line">
         <span>户籍所在地</span>
-        <div class="write-line left" contenteditable></div>
+        <div class="write-line left">
+          <input type="text" v-model="data.residence" />
+          <div class="content-box">{{ data.residence }}</div>
+        </div>
       </div>
       <div class="line worap">
         <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>
+        <div class="write-line" style="width: 40%">
+          <input type="text" v-model="data.reachTime" />
+          <div class="content-box">{{ data.reachTime }}</div>
+        </div>
         <span style="line-height: 40px"> 到达，</span>
-        <div class="write-line" style="" contenteditable></div>
+        <div class="write-line" style="">
+          <input type="text" v-model="data.leaveTime" />
+          <div class="content-box">{{ data.leaveTime }}</div>
+        </div>
         <span style="line-height: 40px"> 离开，</span>
         <span style="line-height: 40px"> 本人签名：</span>
-        <div class="write-line" style="" contenteditable></div>
+        <div class="write-line" style="">
+          <input type="text" v-model="data.sign" />
+          <div class="content-box">{{ data.sign }}</div>
+        </div>
         <span> ）。</span>
       </div>
       <div class="more-line" @click="goWrite" id="line-box">
@@ -93,60 +154,130 @@
     <div class="bottom-name" v-show="!isWrite">
       <span v-if="type == '1'">被询问人:</span>
       <span v-else>被讯问人:</span>
-      <div style="flex: 1" contenteditable></div>
+      <div style="flex: 1">
+        <input type="text" v-model="data.askerBys" />
+        <div class="content-box">{{ data.askerBys }}</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, toRefs, onBeforeMount, onMounted, defineProps, defineEmits } from 'vue';
-import { router } from '@/router';
-import Write from './write/index.vue';
-import { bus } from '@/hook/useGraphic';
+import { reactive, ref, toRefs, onBeforeMount, onMounted, defineProps, defineEmits } from "vue";
+import { router } from "@/router";
+import Write from "./write/index.vue";
+import { bus } from "@/hook/useGraphic";
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "./data";
+
+const data = ref(null);
 const props = defineProps({
   downMode: {
     type: Boolean,
     default: false,
   },
+  isDownloadShow: { type: Boolean, default: false },
   text: {
     type: String,
-    default: '',
+    default: "",
   },
   page: {
     type: Number,
     default: 1,
   },
 });
-const emits = defineEmits(['onTextConfirm', 'goWrite']);
+
+const isnotList = ref({
+  check: 0,
+  type: "NPC",
+  options: [
+    {
+      id: 1,
+      title: "是",
+    },
+    {
+      id: 2,
+      title: "否",
+    },
+  ],
+});
+const checkOptions = (item, index) => {
+  item.check = item.options[index].id;
+  data.value[item.type].check = item.check;
+};
+const emits = defineEmits(["onTextConfirm", "goWrite"]);
 const isWrite = ref(false);
 // const text = ref('');
 const type = ref(router.currentRoute.value.query.type);
 // const page = ref(1);
 const textIndex = ref(0);
-const onTextConfirm = (data) => {
-  text.value = data.text;
-  // page.value = data.page;
-  isWrite.value = false;
-  emits('onTextConfirm', data);
-};
+// const onTextConfirm = (data) => {
+//   console.error(data);
+//   text.value = data.text;
+//   // page.value = data.page;
+//   isWrite.value = false;
+//   emits("onTextConfirm", data);
+// };
 
 const goWrite = () => {
   let text = window.getSelection();
   textIndex.value = text.anchorOffset;
 
   // isWrite.value = true;
-  emits('goWrite', { textIndex: textIndex.value });
+  emits("goWrite", { textIndex: textIndex.value });
 };
 // const handlerBus = (data) => {
 //   console.error(data);
 //   textIndex.value = data.textIndex;
 //   isWrite.value = true;
 // };
+const saveHandler = () => {
+  const origin = tables.value;
+  data.value.text = props.text;
+  data.value.page = props.page;
+
+  let json = {};
+
+  if (type.value == "1") {
+    json = { type: "askOne", data: data.value };
+  } else {
+    json = { type: "askTwo", data: data.value };
+  }
+  return json;
+};
+defineExpose({ saveHandler });
 onMounted(() => {
-  // bus.on('goWrite', handlerBus);
+  if (props.isDownloadShow) {
+  } else {
+    if (type.value == "1") {
+      setData("askOne");
+    } else {
+      setData("askTwo");
+    }
+  }
+  if (type.value == "1") {
+    if (tablesInfo.askOne) {
+      data.value = tablesInfo.askOne;
+    }
+  } else {
+    if (tablesInfo.askTwo) {
+      data.value = tablesInfo.askTwo;
+    }
+    console.error(tablesInfo);
+  }
 });
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.left {
+    justify-content: flex-start;
+  }
+}
 div[contenteditable] {
   outline: none;
 }
@@ -163,6 +294,18 @@ div[contenteditable] {
   overflow: auto;
   font-family: SimSun-Regular, SimSun;
   box-sizing: border-box;
+  overflow-x: hidden;
+  .content-box {
+    display: none;
+  }
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   .num-box {
     display: flex;
     align-items: center;
@@ -215,6 +358,10 @@ div[contenteditable] {
         padding: 0 10px;
         outline: none;
         flex: 1;
+        input {
+          width: 100%;
+          text-align: center;
+        }
         &.left {
           text-align: left;
         }

src/views/tables/author/author-one.vue

@@ -1,80 +1,88 @@
 <!--  -->
 <template>
-  <div class="author">
+  <div class="author" :class="{ downMode }" v-if="data">
     <h2 class="title">授权委托书</h2>
     <div class="content">
-      <div class="item">
-        <span>委托人：</span>
-        <div class="input-box" style="width: 100px"><input /></div>
-        <span>性别：</span>
-        <div class="input-box" style="width: 60px"><input /></div>
-        <span>年龄：</span>
-        <div class="input-box" style="width: 60px"><input /></div>
-        <span>身份证号：</span>
-        <div class="input-box" style="flex: 1"><input /></div>
-      </div>
-      <div class="item">
-        <span>住址：</span>
-        <div style="flex: 1" class="input-box"><input /></div>
-        <span>联系方式：</span>
-        <div class="input-box"><input /></div>
-      </div>
-      <div class="item">
-        <span>委托人：</span>
-        <div class="input-box" style="width: 100px"><input /></div>
-        <span>性别：</span>
-        <div class="input-box" style="width: 60px"><input /></div>
-        <span>年龄：</span>
-        <div class="input-box" style="width: 60px"><input /></div>
-        <span>身份证号：</span>
-        <div class="input-box" style="flex: 1"><input /></div>
-      </div>
-      <div class="item">
-        <span>住址：</span>
-        <div style="flex: 1" class="input-box"><input /></div>
-        <span>联系方式：</span>
-        <div class="input-box"><input /></div>
-      </div>
-      <div class="item">
-        <span>委托人：</span>
-        <div class="input-box" style="width: 100px"><input /></div>
-        <span>性别：</span>
-        <div class="input-box" style="width: 60px"><input /></div>
-        <span>年龄：</span>
-        <div class="input-box" style="width: 60px"><input /></div>
-        <span>身份证号：</span>
-        <div class="input-box" style="flex: 1"><input /></div>
-      </div>
-      <div class="item">
-        <span>住址：</span>
-        <div style="flex: 1" class="input-box"><input /></div>
-        <span>联系方式：</span>
-        <div class="input-box"><input /></div>
-      </div>
-      <!--  -->
+      <template v-for="(i, index) in data.authorList">
+        <div class="item">
+          <span>委托人：</span>
+          <div class="input-box" style="min-width: 100px">
+            <input style="width: 100px" v-model="i.name" />
+            <div class="content-box">{{ i.name }}</div>
+          </div>
+          <span>性别：</span>
+          <div class="input-box" style="min-width: 60px">
+            <input style="width: 60px" v-model="i.sex" />
+            <div class="content-box">{{ i.sex }}</div>
+          </div>
+          <span>年龄：</span>
+          <div class="input-box" style="min-width: 60px">
+            <input style="width: 60px" v-model="i.age" />
+            <div class="content-box">{{ i.age }}</div>
+          </div>
+          <span>身份证号：</span>
+          <div class="input-box" style="flex: 1">
+            <input style="width: 100%" v-model="i.id" />
+            <div class="content-box">{{ i.id }}</div>
+          </div>
+        </div>
+        <div class="item">
+          <span>住址：</span>
+          <div style="flex: 1" class="input-box">
+            <input style="width: 100%" v-model="i.address" />
+            <div class="content-box">{{ i.address }}</div>
+          </div>
+          <span>联系方式：</span>
+          <div class="input-box">
+            <input style="width: 100%" v-model="i.phoneNum" />
+            <div class="content-box">{{ i.phoneNum }}</div>
+          </div>
+        </div>
+      </template>
 
       <div class="item" style="margin-top: 100px">
         <span>受委托人姓名：</span>
-        <div style="flex: 1" class="input-box"><input /></div>
+        <div style="flex: 1" class="input-box">
+          <input style="width: 100%" v-model="data.authorBy.name" />
+          <div class="content-box">{{ data.authorBy.name }}</div>
+        </div>
         <span>性别：</span>
-        <div class="input-box" style="width: 60px"><input /></div>
+        <div class="input-box" style="min-width: 60px">
+          <input style="width: 60px" v-model="data.authorBy.sex" />
+          <div class="content-box">{{ data.authorBy.sex }}</div>
+        </div>
         <span>年龄：</span>
-        <div class="input-box" style="width: 60px"><input /></div>
+        <div class="input-box" style="min-width: 60px">
+          <input style="width: 60px" v-model="data.authorBy.age" />
+          <div class="content-box">{{ data.authorBy.age }}</div>
+        </div>
         <span>身份证号：</span>
       </div>
       <div class="item">
-        <div style="flex: 1" class="input-box"><input /></div>
+        <div style="flex: 1" class="input-box">
+          <input style="width: 100%" v-model="data.authorBy.id" />
+          <div class="content-box">{{ data.authorBy.id }}</div>
+        </div>
         <span>工作单位：</span>
-        <div class="input-box" style="width: 330px"><input /></div>
+        <div class="input-box" style="min-width: 330px">
+          <input style="width: 330px" v-model="data.authorBy.company" />
+          <div class="content-box">{{ data.authorBy.company }}</div>
+        </div>
         <span>住址及联系方式：</span>
       </div>
       <div class="item">
-        <div style="flex: 1" class="input-box"><input /></div>
+        <div style="flex: 1" class="input-box">
+          <input style="width: 100%" v-model="data.authorBy.addressPhoneNum" />
+          <div class="content-box">{{ data.authorBy.addressPhoneNum }}</div>
+        </div>
       </div>
 
       <div class="item" style="margin-top: 120px">
         <div style="text-indent: 2em">现委托上述受委托人参与：</div>
-        <div style="flex: 1" class="input-box"><input /></div>
+        <div style="flex: 1" class="input-box">
+          <input style="width: 100%" v-model="data.message" />
+          <div class="content-box">{{ data.message }}</div>
+        </div>
         <span>一案</span>
       </div>
       <div class="item">
@@ -82,13 +90,16 @@
       </div>
       <div class="item" style="margin-top: 100px">
         <span>受托人：</span>
-        <div class="input-box"><input /></div>
+        <div class="input-box">
+          <input style="width: 100%" v-model="data.authorBy.name" />
+          <div class="content-box">{{ data.authorBy.name }}</div>
+        </div>
         <span>代理权限为：</span>
       </div>
 
       <div class="check-item" @click="checkOptions(checkData, index)" v-for="(i, index) in checkData.options">
         <div style="display: inline-block">
-          <ui-icon :type="checkData.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+          <ui-icon :type="data.options.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
           <span>{{ i.title }}</span>
         </div>
       </div>
@@ -97,25 +108,64 @@
 </template>
 
 <script setup>
-import { reactive, ref, toRefs, onBeforeMount, onMounted } from 'vue';
+import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "../data";
+const props = defineProps({
+  downMode: { type: Boolean, default: false },
+  isDownloadShow: { type: Boolean, default: false },
+});
+const data = ref(null);
 const checkOptions = (item, index) => {
   item.check = item.options[index].id;
+  data.value[item.type].check = item.check;
 };
 const checkData = ref({
   check: 0,
+  type: "options",
   options: [
     {
       id: 1,
-      title: '一般代理。即代理为参与诉讼、调解，提供法律帮助。',
+      title: "一般代理。即代理为参与诉讼、调解，提供法律帮助。",
     },
     {
       id: 2,
-      title: '特别授权，代为起诉，陈述事实，参加辩论和调解，代为提出、承认、放弃或变更赔偿请求， 提起反诉或上诉，签收法律文书。',
+      title: "特别授权，代为起诉，陈述事实，参加辩论和调解，代为提出、承认、放弃或变更赔偿请求， 提起反诉或上诉，签收法律文书。",
     },
   ],
 });
+
+const saveHandler = () => {
+  return { type: "author", data: data.value };
+};
+
+defineExpose({ saveHandler, data });
+onMounted(() => {
+  if (props.isDownloadShow) {
+  } else {
+    setData("author");
+  }
+
+  if (tablesInfo.author) {
+    data.value = tablesInfo.author;
+  }
+});
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-bottom: 1px solid #000;
+  padding: 0 10px;
+  box-sizing: border-box;
+  &.left {
+    justify-content: flex-start;
+  }
+}
 .input-box {
   input {
     width: 100%;
@@ -123,6 +173,7 @@ const checkData = ref({
     border-bottom: 1px solid #000;
     padding: 0 10px;
     box-sizing: border-box;
+    text-align: center;
   }
 }
 .author {
@@ -133,6 +184,17 @@ const checkData = ref({
   font-family: SimHei-Regular, SimHei;
   font-size: 24px;
   font-weight: 400;
+  .content-box {
+    display: none;
+  }
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   .title {
     text-align: center;
     margin-bottom: 70px;

src/views/tables/author/author-two.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="author">
+  <div class="author" :class="{ downMode }" v-if="data">
     <div class="content">
       <!-- <div class="check-item" @click="checkOptions(checkData1, index)" v-for="(i, index) in checkData1.options">
         <div class="item">
@@ -23,27 +23,39 @@
 
       <div class="item" style="margin-top: 200px">
         <span style="padding-left: 20px">委托人（签名）：</span>
-        <div style="flex: 1" contenteditable></div>
+        <div style="flex: 1">
+          <input type="text" v-model="data.authorSign" />
+        </div>
       </div>
       <div class="item" style="margin-top: 100px">
         <span>受委托人（签名）：</span>
-        <div style="flex: 1" contenteditable></div>
+        <div style="flex: 1">
+          <input type="text" v-model="data.authorBySign" />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, toRefs, onBeforeMount, onMounted } from 'vue';
+import { reactive, ref, toRefs, onBeforeMount, onMounted } from "vue";
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "../data";
+const props = defineProps({
+  downMode: { type: Boolean, default: false },
+  isDownloadShow: { type: Boolean, default: false },
+});
+const data = ref(null);
 const checkOptions = (item, index) => {
   item.check = item.options[index].id;
+  data.value[item.type].check = item.check;
 };
 const checkData1 = ref({
   check: 0,
   options: [
     {
       id: 1,
-      title: '...',
+      title: "...",
     },
   ],
 });
@@ -52,24 +64,54 @@ const checkData = ref({
   options: [
     {
       id: 1,
-      title: '...',
+      title: "...",
     },
     {
       id: 2,
-      title: '一般代理。即代理为参与诉讼、调解，提供法律帮助。',
+      title: "一般代理。即代理为参与诉讼、调解，提供法律帮助。",
     },
     {
       id: 3,
-      title: '特别授权，代为起诉，陈述事实，参加辩论和调解，代为提出、承认、放弃或变更赔偿请求， 提起反诉或上诉，签收法律文书。',
+      title: "特别授权，代为起诉，陈述事实，参加辩论和调解，代为提出、承认、放弃或变更赔偿请求， 提起反诉或上诉，签收法律文书。",
     },
     {
       id: 4,
-      title: '...',
+      title: "...",
     },
   ],
 });
+
+const saveHandler = () => {
+  return { type: "author", data: data.value };
+};
+
+defineExpose({ saveHandler, data });
+onMounted(() => {
+  if (props.isDownloadShow) {
+  } else {
+    setData("author");
+  }
+
+  if (tablesInfo.author) {
+    data.value = tablesInfo.author;
+  }
+});
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-bottom: 1px solid #000;
+  padding: 0 10px;
+  box-sizing: border-box;
+  &.left {
+    justify-content: flex-start;
+  }
+}
 div[contenteditable] {
   outline: none;
 }
@@ -90,6 +132,17 @@ div[contenteditable] {
   font-family: SimHei-Regular, SimHei;
   font-size: 24px;
   font-weight: 400;
+  .content-box {
+    display: none;
+  }
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   .title {
     text-align: center;
     margin-bottom: 70px;

src/views/tables/data/index.ts

@@ -0,0 +1,221 @@
+import { tables } from "@/store/tables";
+
+let data = {
+  explorateOne: {
+    explorateType: null,
+    explorateCompany: "",
+    explorateTime: "",
+    accidentTime: "",
+    technicalLevel: "",
+    administrativeLevel: { check: "", value: "" },
+    cityRoad: "",
+    roadSide: "",
+    roadPart: "",
+    roadName: "",
+    roadNum: "",
+    longitude: "",
+    latitude: "",
+    addressDesc: "",
+    weather: { check: "", value: "" },
+    environments: [
+      { check: "", value: "" },
+      { check: "", value: "" },
+      { check: "", value: "" },
+      { check: "", value: "" },
+      { check: "", value: "" },
+      { check: "", value: "" },
+      { check: "", value: "" },
+      { check: "", value: "" },
+      { check: "", value: "" },
+      { check: "", value: "" },
+    ],
+    explorateSign: "",
+    reportSign: "",
+    clientSign: "",
+    witnessSign: "",
+  },
+  explorateTwo: {
+    cameraInfo: { check: "", value: "" },
+    dieNum: "",
+    doctorSign: "",
+    hurtNum: "",
+    hurtDieGo: "",
+    desc: "",
+    dangerousInfo: { check: "", value: "" },
+    reachs: { check: "" },
+    list: [
+      ["", "", "", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", "", "", ""],
+    ],
+    explorateSign: "",
+    reportSign: "",
+    clientSign: "",
+    witnessSign: "",
+  },
+  explorateThree: {
+    groundTrace: "",
+    carTrace: "",
+    bodyTrace: "",
+    meterialEvidence: "",
+    other: "",
+    explorateSign: "",
+    reportSign: "",
+    clientSign: "",
+    witnessSign: "",
+  },
+  explorateFour: {
+    driversInfoList: [
+      ["", "", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", "", ""],
+    ],
+    carsInfoList: [
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+    ],
+    measureDesc: "",
+    otherDesc: "",
+  },
+  askOne: {
+    times: "",
+    startTime: "",
+    endTime: "",
+    adress: "",
+    asker: "",
+    askCompany: "",
+    reporter: "",
+    reporterCompany: "",
+    askerBy: "",
+    sex: "",
+    age: "",
+    birth: "",
+    id: "",
+    NPC: { check: "", value: "" },
+    adressNow: "",
+    phoneNumber: "",
+    residence: "",
+    reachTime: "",
+    leaveTime: "",
+    sign: "",
+    text: "",
+    askerBys: "",
+    page: 1,
+  },
+  askTwo: {
+    times: "",
+    startTime: "",
+    endTime: "",
+    adress: "",
+    asker: "",
+    askCompany: "",
+    reporter: "",
+    reporterCompany: "",
+    askerBy: "",
+    sex: "",
+    age: "",
+    birth: "",
+    id: "",
+    NPC: { check: "", value: "" },
+    adressNow: "",
+    phoneNumber: "",
+    residence: "",
+    reachTime: "",
+    leaveTime: "",
+    sign: "",
+    text: "",
+    askerBys: "",
+    page: 1,
+  },
+  identification: {
+    id: "",
+    time: "",
+    weather: "",
+    address: "",
+    list: [
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+    ],
+    optionsOne: { check: "", client: "", police: "", seal: "" },
+    optionsTwo: { client: "", police: "", seal: "" },
+  },
+  extract: {
+    name: "",
+    sex: "",
+    id: "",
+    time: "",
+    adress: "",
+    extractTime: "",
+    extractAdress: "",
+    aNumber: "",
+    aVolume: "",
+    bNumber: "",
+    bVolume: "",
+    disinfect: "",
+    sealing: "",
+    extractUnit: "",
+    extractMumber: "",
+    notice: "",
+    extractBySign: "",
+    witnessSign: "",
+    policeSign: "",
+    company: "",
+  },
+  legacy: {
+    accidentTime: "",
+    accidentAddress: "",
+    partySign: "",
+    policeSign: "",
+    list: [
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+      ["", "", "", "", "", "", ""],
+    ],
+  },
+  author: {
+    authorList: [
+      { name: "", sex: "", age: "", id: "", address: "", phoneNum: "" },
+      { name: "", sex: "", age: "", id: "", address: "", phoneNum: "" },
+      { name: "", sex: "", age: "", id: "", address: "", phoneNum: "" },
+    ],
+    authorBy: {
+      sex: "",
+      age: "",
+      id: "",
+      company: "",
+      addressPhoneNum: "",
+    },
+    message: "",
+    options: { check: "", value: "" },
+    authorSign: "",
+    authorBySign: "",
+  },
+};
+
+export let tablesInfo = JSON.parse(JSON.stringify(data));
+export const resetData = () => {
+  tablesInfo = JSON.parse(JSON.stringify(data));
+};
+export const setData = (type) => {
+  if (tables && tables.value[type]) {
+    tablesInfo[type] = JSON.parse(JSON.stringify(tables.value[type]));
+  }
+  // return tablesInfo;
+};

src/views/tables/explorate-four.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="explorate">
+  <div class="explorate" v-if="data">
     <div>
       <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
 
@@ -19,17 +19,19 @@
               <td>备注</td>
             </tr>
 
-            <tr>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
+            <tr v-for="(i, index) in data.driversInfoList">
+              <td v-for="(j, j_index) in i">
+                <div><input type="text" /></div>
+              </td>
+              <!-- <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td> -->
             </tr>
-            <tr>
+            <!-- <tr>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
@@ -68,7 +70,7 @@
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
-            </tr>
+            </tr> -->
           </table>
         </div>
         <div class="table-excel">
@@ -83,17 +85,18 @@
               <td>驾乘人员情况</td>
               <td>其他信息</td>
             </tr>
-
-            <tr>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
+            <tr v-for="(i, index) in data.carsInfoList">
+              <td v-for="(j, j_index) in i">
+                <div><input type="text" /></div>
+              </td>
+              <!-- <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td> -->
             </tr>
-            <tr>
+            <!-- <tr>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
@@ -110,40 +113,51 @@
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
               <td><div contenteditable></div></td>
-            </tr>
+            </tr> -->
           </table>
         </div>
         <div class="table-body">
           <div class="item column">
             <span>八、现场采取强制措施情况</span>
-            <div contenteditable></div>
+            <div>
+              <textarea v-model="data.measureDesc" name="" id="" cols="30" rows="10"></textarea>
+            </div>
           </div>
         </div>
         <div class="table-body no-border">
           <div class="item column">
             <span>九、勘查现场的交通警察认为应当记录的其他情况</span>
-            <div contenteditable></div>
+            <div>
+              <textarea v-model="data.otherDesc" name="" id="" cols="30" rows="10"></textarea>
+            </div>
           </div>
         </div>
-
         <div class="sign-box">
           <div>
             <span>现场勘查人员签名：</span>
-            <div contenteditable></div>
+            <div>
+              <input type="text" v-model="data.explorateSign" />
+            </div>
           </div>
           <div>
             <span>记录人签名：</span>
-            <div contenteditable></div>
+            <div>
+              <input type="text" v-model="data.reportSign" />
+            </div>
           </div>
         </div>
         <div class="sign-box">
           <div>
             <span>当事人签名：</span>
-            <div contenteditable></div>
+            <div>
+              <input type="text" v-model="data.clientSign" />
+            </div>
           </div>
           <div>
             <span>见证人签名：</span>
-            <div contenteditable></div>
+            <div>
+              <input type="text" v-model="data.witnessSign" />
+            </div>
           </div>
         </div>
       </div>
@@ -157,7 +171,33 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from "vue";
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "./data";
+
+const props = defineProps({
+  downMode: { type: Boolean, default: false },
+  isDownloadShow: { type: Boolean, default: false },
+});
+const data = ref(null);
+const saveHandler = () => {
+  return { type: "explorateFour", data: data.value };
+};
+const saveStore = () => {
+  // return new Promise((res, rej) => {
+  // origin["legacy"] = JSON.parse(JSON.stringify(data.value));
+  // });
+};
+defineExpose({ saveHandler, data });
+onMounted(() => {
+  if (props.isDownloadShow) {
+  } else {
+    setData("explorateFour");
+  }
+  if (tablesInfo.explorateFour) {
+    data.value = tablesInfo.explorateFour;
+  }
+});
 </script>
 <style lang="scss" scoped>
 .explorate {
@@ -182,6 +222,11 @@ import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
         border: 1px solid #000;
         tr {
           // border-bottom: 1px solid #000;
+          &:first-of-type {
+            td {
+              padding: 10px 14px;
+            }
+          }
           &:last-of-type {
             td {
               border-bottom: none;
@@ -189,7 +234,7 @@ import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
           }
         }
         td {
-          padding: 10px 14px;
+          padding: 0 5px;
           box-sizing: border-box;
           text-align: center;
           max-width: 11%;
@@ -201,6 +246,11 @@ import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
           }
           > div {
             outline: none;
+            input {
+              width: 100%;
+              height: 100%;
+              text-align: center;
+            }
           }
         }
       }
@@ -237,16 +287,26 @@ import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
         border-bottom: none;
       }
       .item {
-        display: flex;
+        // display: flex;
         margin-bottom: 10px;
-        &.column {
-          flex-direction: column;
-          height: 130px;
-          > div {
-            outline: none;
+        > span {
+          display: block;
+        }
+        > div {
+          height: 110px;
+          textarea {
+            width: 100%;
             height: 100%;
           }
         }
+        &.column {
+          // flex-direction: column;
+          height: 130px;
+          // > div {
+          //   outline: none;
+          //   height: 100%;
+          // }
+        }
       }
     }
   }

src/views/tables/explorate-one.vue

@@ -7,7 +7,7 @@
       </Header>
     </template> -->
 
-  <div class="explorate" :class="{ downMode }">
+  <div class="explorate" :class="{ downMode }" v-if="data">
     <div ref="layoutRef">
       <h2 class="title">道路交通事故现场勘查笔录</h2>
 
@@ -15,21 +15,28 @@
         <div class="wrapper">
           <div class="header">
             <div class="item" v-for="(i, index) in sceneTypes.options" @click="checkLevel(sceneTypes, index)">
-              <ui-icon :type="sceneTypes.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+              <ui-icon :type="data.explorateType == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
               <span>{{ i.title }}</span>
             </div>
           </div>
           <div class="info">
             <div>勘查单位</div>
-            <div class="input-box" contenteditable></div>
+            <!-- <div class="input-box" contenteditable v-html="data.explorateCompany"></div> -->
+            <div class="input-box">
+              <input type="text" v-model="data.explorateCompany" />
+            </div>
           </div>
           <div class="info">
             <div>勘查时间</div>
-            <div class="input-box" contenteditable></div>
+            <div class="input-box">
+              <input type="text" v-model="data.explorateTime" />
+            </div>
           </div>
           <div class="info">
             <div>事故时间</div>
-            <div class="input-box" contenteditable></div>
+            <div class="input-box">
+              <input type="text" v-model="data.accidentTime" />
+            </div>
           </div>
           <div class="time">
             <div class="name">事故地点</div>
@@ -56,7 +63,7 @@
                             <ui-icon :type="administrativeLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                             <span>{{ i.title }}</span>
                             <div class="input-box" style="flex: 1" v-if="i.id == 5">
-                              <input type="text" />
+                              <input type="text" v-model="data.administrativeLevel.value" />
                             </div>
                           </div>
                         </div>
@@ -104,9 +111,13 @@
               <div class="road-info">
                 <div class="road-name">路名</div>
                 <div class="road-msg">
-                  <div class="road-name-text" contenteditable></div>
+                  <div class="road-name-text input-box">
+                    <input type="text" v-model="data.roadName" />
+                  </div>
                   <div class="road-num">路号（公路）</div>
-                  <div class="road-num-text" contenteditable></div>
+                  <div class="road-num-text input-box">
+                    <input type="text" v-model="data.roadNum" />
+                  </div>
                 </div>
               </div>
               <div class="road-pos">
@@ -117,17 +128,23 @@
                     <div class="pos-msg" style="height: 30px">
                       <div class="longitude">
                         <span>经度:</span>
-                        <div contenteditable></div>
+                        <div class="input-box">
+                          <input type="text" v-model="data.longitude" />
+                        </div>
                       </div>
                       <div class="latitude">
                         <span>纬度:</span>
-                        <div contenteditable></div>
+                        <div>
+                          <input type="text" v-model="data.latitude" />
+                        </div>
                       </div>
                     </div>
                   </div>
                   <div class="pos-item">
                     <div class="pos-item-name" style="height: 54px">地点描述</div>
-                    <div class="pos-msg desc" style="height: 54px" contenteditable></div>
+                    <div class="pos-msg desc input-box" style="height: 54px">
+                      <input type="text" v-model="data.addressDesc" />
+                    </div>
                   </div>
                 </div>
               </div>
@@ -141,7 +158,7 @@
                 <ui-icon :type="weatherList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
                 <span>{{ i.title }}</span>
                 <div class="input-box" v-if="i.id == 10">
-                  <input type="text" />
+                  <input type="text" v-model="data.weather.value" />
                 </div>
               </div>
             </div>
@@ -157,11 +174,11 @@
                       <ui-icon :type="i.check == j.id ? 'rb_y' : 'rb_n'"></ui-icon>
                       <span>{{ j.name }}</span>
                       <div class="input-box" v-if="j_index == i.options.length - 1">
-                        <input type="text" />
+                        <input type="text" v-model="data.environments[index].value" />
                       </div>
                     </div>
                     <div class="input-box" v-if="!i.options.length">
-                      <input type="text" />
+                      <input type="text" v-model="data.environments[index].value" />
                     </div>
                   </div>
                   <!-- <div class="input-box" v-if="index == environments.length - 1">
@@ -174,21 +191,29 @@
           <div class="sign-box">
             <div>
               <span>现场勘查人员签名：</span>
-              <div contenteditable></div>
+              <div>
+                <input type="text" v-model="data.explorateSign" />
+              </div>
             </div>
             <div>
               <span>记录人签名：</span>
-              <div contenteditable></div>
+              <div>
+                <input type="text" v-model="data.reportSign" />
+              </div>
             </div>
           </div>
           <div class="sign-box">
             <div>
               <span>当事人签名：</span>
-              <div contenteditable></div>
+              <div>
+                <input type="text" v-model="data.clientSign" />
+              </div>
             </div>
             <div>
               <span>见证人签名：</span>
-              <div contenteditable></div>
+              <div>
+                <input type="text" v-model="data.witnessSign" />
+              </div>
             </div>
           </div>
         </div>
@@ -209,6 +234,17 @@ import { downloadImage, uploadImage } from "@/store/sync";
 import Message from "@/components/base/components/message/message.vue";
 import Header from "@/components/photos/header.vue";
 import MainPanel from "@/components/main-panel/index.vue";
+import UiInput from "@/components/base/components/input/index.vue";
+import { genUseLoading } from "@/hook";
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "./data";
+
+const props = defineProps({
+  downMode: { type: Boolean, default: false },
+  isDownloadShow: { type: Boolean, default: false },
+});
+const data = ref(null);
+
 const layoutRef = ref<HTMLDivElement>();
 const downMode = ref(false);
 const getLayoutImage = async () => {
@@ -224,6 +260,7 @@ const getLayoutImage = async () => {
 };
 const sceneTypes = ref({
   check: 0,
+  type: "explorateType",
   options: [
     { id: 1, title: "现场勘查" },
     { id: 2, title: "补充勘查" },
@@ -231,6 +268,7 @@ const sceneTypes = ref({
 });
 const roadPartList = ref({
   check: 0,
+  type: "roadPart",
   options: [
     { id: 1, title: "普通路段" },
     { id: 2, title: "高架路段" },
@@ -244,6 +282,7 @@ const roadPartList = ref({
   ],
 });
 const roadSideList = ref({
+  type: "roadSide",
   check: 0,
   options: [
     { id: 1, title: "三枝分叉口" },
@@ -255,6 +294,7 @@ const roadSideList = ref({
 });
 const cityRoadList = ref({
   check: 0,
+  type: "cityRoad",
   options: [
     { id: 1, title: "城市快速路" },
     { id: 2, title: "一般城市道路" },
@@ -267,6 +307,7 @@ const cityRoadList = ref({
 
 const administrativeLevel = ref({
   check: 0,
+  type: "administrativeLevel",
   options: [
     { id: 1, title: "国道" },
     { id: 2, title: "省道" },
@@ -286,9 +327,16 @@ const administrativeLevel = ref({
 });
 const checkLevel = (item, index) => {
   item.check = item.options[index].id;
+  if (item.type == "administrativeLevel" || item.type == "weather") {
+    data.value[item.type].check = item.check;
+  } else {
+    data.value[item.type] = item.check;
+  }
+  console.log(data.value);
 };
 const technicalLevel = ref({
   check: 0,
+  type: "technicalLevel",
   options: [
     { id: 1, title: "高速" },
     { id: 2, title: "一级" },
@@ -312,6 +360,7 @@ const technicalLevel = ref({
 });
 const weatherList = ref({
   check: 0,
+  type: "weather",
   options: [
     { id: 1, title: "晴" },
     { id: 2, title: "阴" },
@@ -352,6 +401,7 @@ const weatherList = ref({
 
 const checkEnvironItem = (item, index, j_index) => {
   environments.value[index].check = item.id;
+  data.value.environments[index].check = item.id;
 };
 const environments = ref([
   {
@@ -465,8 +515,32 @@ const environments = ref([
     options: [],
   },
 ]);
+
+const saveHandler = () => {
+  const origin = tables.value;
+  return { type: "explorateOne", data: data.value };
+};
+const saveStore = () => {
+  // return new Promise((res, rej) => {
+  // origin["legacy"] = JSON.parse(JSON.stringify(data.value));
+  // });
+};
+defineExpose({ saveHandler, data });
+onMounted(() => {
+  if (props.isDownloadShow) {
+  } else {
+    setData("explorateOne");
+  }
+
+  if (tablesInfo.explorateOne) {
+    data.value = tablesInfo.explorateOne;
+  }
+});
 </script>
 <style lang="scss" scoped>
+input {
+  width: 100%;
+}
 div {
   box-sizing: border-box;
 }

src/views/tables/explorate-three.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="explorate">
+  <div class="explorate" v-if="data">
     <div>
       <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
 
@@ -10,44 +10,52 @@
 
           <div class="item column">
             <span>（一）地面痕迹：</span>
-            <div contenteditable></div>
+            <div><textarea v-model="data.groundTrace" name="" id="" cols="30" rows="10"></textarea></div>
           </div>
           <div class="item column">
             <span>（二）车体痕迹：</span>
-            <div contenteditable></div>
+            <div><textarea v-model="data.carTrace" name="" id="" cols="30" rows="10"></textarea></div>
           </div>
           <div class="item column">
             <span>（三）人体痕迹：</span>
-            <div contenteditable></div>
+            <div><textarea v-model="data.bodyTrace" name="" id="" cols="30" rows="10"></textarea></div>
           </div>
           <div class="item column">
             <span>（四）物证：</span>
-            <div contenteditable></div>
+            <div><textarea v-model="data.meterialEvidence" name="" id="" cols="30" rows="10"></textarea></div>
           </div>
           <div class="item column">
             <span>（五）其他：</span>
-            <div contenteditable></div>
+            <div><textarea v-model="data.other" name="" id="" cols="30" rows="10"></textarea></div>
           </div>
         </div>
 
         <div class="sign-box">
           <div>
             <span>现场勘查人员签名：</span>
-            <div contenteditable></div>
+            <div>
+              <input type="text" v-model="data.explorateSign" />
+            </div>
           </div>
           <div>
             <span>记录人签名：</span>
-            <div contenteditable></div>
+            <div>
+              <input type="text" v-model="data.reportSign" />
+            </div>
           </div>
         </div>
         <div class="sign-box">
           <div>
             <span>当事人签名：</span>
-            <div contenteditable></div>
+            <div>
+              <input type="text" v-model="data.clientSign" />
+            </div>
           </div>
           <div>
             <span>见证人签名：</span>
-            <div contenteditable></div>
+            <div>
+              <input type="text" v-model="data.witnessSign" />
+            </div>
           </div>
         </div>
       </div>
@@ -60,7 +68,33 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from "vue";
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "./data";
+
+const props = defineProps({
+  downMode: { type: Boolean, default: false },
+  isDownloadShow: { type: Boolean, default: false },
+});
+const data = ref(null);
+const saveHandler = () => {
+  return { type: "explorateThree", data: data.value };
+};
+const saveStore = () => {
+  // return new Promise((res, rej) => {
+  // origin["legacy"] = JSON.parse(JSON.stringify(data.value));
+  // });
+};
+defineExpose({ saveHandler, data });
+onMounted(() => {
+  if (props.isDownloadShow) {
+  } else {
+    setData("explorateThree");
+  }
+  if (tablesInfo.explorateThree) {
+    data.value = tablesInfo.explorateThree;
+  }
+});
 </script>
 <style lang="scss" scoped>
 .explorate {
@@ -111,18 +145,30 @@ import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
       margin-top: 10px;
       padding: 0 10px 10px;
       .item {
-        display: flex;
+        // display: flex;
         margin-bottom: 10px;
-
+        span {
+          display: block;
+        }
+        > div {
+          outline: none;
+          height: 180px;
+          padding: 10px;
+          textarea {
+            height: 100%;
+            width: 100%;
+            resize: none;
+          }
+        }
         &.column {
-          flex-direction: column;
-          height: 200px;
+          // flex-direction: column;
+          // height: 200px;
           width: 100%;
 
-          > div {
-            outline: none;
-            height: 100%;
-          }
+          // > div {
+          //   outline: none;
+          //   height: 100%;
+          // }
         }
       }
     }

src/views/tables/explorate-two.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="explorate">
+  <div class="explorate" :class="{ downMode }" v-if="data">
     <div>
       <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
 
@@ -9,9 +9,12 @@
           <p style="margin-bottom: 5px">二、现场监控设备情况</p>
           <div class="table-header-info">
             <div class="item" v-for="(i, index) in headerList.options" @click="checkOptions(headerList, index)">
-              <ui-icon :type="headerList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+              <ui-icon :type="data.cameraInfo.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
               <span>{{ i.title }}</span>
-              <div v-if="i.id == 2" style="flex: 1"><input type="text" /></div>
+              <div v-if="i.id == 2" style="flex: 1">
+                <input type="text" v-model="data.cameraInfo.value" />
+                <div class="content-box left" style="border-bottom: 1px solid #000">{{ data.cameraInfo.value }}</div>
+              </div>
             </div>
           </div>
         </div>
@@ -20,15 +23,22 @@
           <p style="margin-bottom: 10px">（一）伤亡人员基本情况；</p>
           <div class="item">
             <span>当场死亡：（</span>
-            <div contenteditable style="min-width: 10px"></div>
+            <div style="min-width: 10px">
+              <input style="width: 30px" type="text" v-model="data.dieNum" />
+              <div class="content-box">{{ data.dieNum }}</div>
+            </div>
             <span>）人；急救、医疗人员签名确认：</span>
             <div style="flex: 1">
-              <input type="text" />
+              <input class="under-line" type="text" v-model="data.doctorSign" />
+              <div class="content-box left" style="border-bottom: 1px solid #000">{{ data.doctorSign }}</div>
             </div>
           </div>
           <div class="item">
             <span>受伤：（</span>
-            <div contenteditable style="min-width: 10px"></div>
+            <div style="min-width: 10px">
+              <input style="width: 30px" type="text" />
+              <div class="content-box"></div>
+            </div>
             <span>）人。</span>
           </div>
           <div class="item column">
@@ -44,7 +54,7 @@
           <div class="item" style="margin-top: 10px">
             <span> 是否涉及危险物品：</span>
             <div style="margin-right: 40px" v-for="(i, index) in isnotList.options" @click="checkOptions(isnotList, index)">
-              <ui-icon :type="isnotList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+              <ui-icon :type="data.dangerousInfo.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
               <span>{{ i.title }}</span>
             </div>
             <!-- <div style="margin-right: 40px">
@@ -53,7 +63,8 @@
             </div> -->
             <div>名称：</div>
             <div style="flex: 1">
-              <input type="text" />
+              <input class="under-line" type="text" v-model="data.dangerousInfo.value" />
+              <div class="content-box left" style="border-bottom: 1px solid #000">{{ data.dangerousInfo.value }}</div>
             </div>
           </div>
           <p style="margin-bottom: 5px">相关部门和人员到达情况：</p>
@@ -66,10 +77,6 @@
                 </div>
               </div>
             </template>
-
-            <!-- <div>
-              <div style="display: inline-block"><ui-icon type="rb_n"></ui-icon> <span>消防</span></div>
-            </div> -->
           </div>
           <div class="item half">
             <template v-for="(i, index) in reachList.options">
@@ -80,9 +87,6 @@
                 </div>
               </div>
             </template>
-            <!-- <div>
-              <div style="display: inline-block"><ui-icon type="rb_n"></ui-icon> <span>其他</span></div>
-            </div> -->
           </div>
         </div>
         <div class="table-excel">
@@ -102,81 +106,32 @@
               <td>车载事件数据记录仪</td>
               <td>卫星定位装置</td>
             </tr>
-            <tr>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-            </tr>
-            <tr>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-            </tr>
-            <tr>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-            </tr>
-            <tr>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-            </tr>
-            <tr>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
-              <td><div contenteditable></div></td>
+            <tr v-for="(i, index) in data.list">
+              <td v-for="(j, j_index) in i">
+                <div class="content-box">{{ data.list[index][j_index] }}</div>
+                <input type="text" v-model="data.list[index][j_index]" />
+              </td>
             </tr>
           </table>
         </div>
         <div class="sign-box">
           <div>
             <span>现场勘查人员签名：</span>
-            <div contenteditable></div>
+            <div><input type="text" v-model="data.explorateSign" /></div>
           </div>
           <div>
             <span>记录人签名：</span>
-            <div contenteditable></div>
+            <div><input type="text" v-model="data.reportSign" /></div>
           </div>
         </div>
         <div class="sign-box">
           <div>
             <span>当事人签名：</span>
-            <div contenteditable></div>
+            <div><input type="text" v-model="data.clientSign" /></div>
           </div>
           <div>
             <span>见证人签名：</span>
-            <div contenteditable></div>
+            <div><input type="text" v-model="data.witnessSign" /></div>
           </div>
         </div>
       </div>
@@ -189,62 +144,104 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, defineProps } from "vue";
+
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "./data";
+const props = defineProps({
+  downMode: { type: Boolean, default: false },
+  isDownloadShow: { type: Boolean, default: false },
+});
+const data = ref(null);
+
 const checkOptions = (item, index) => {
   item.check = item.options[index].id;
+  data.value[item.type].check = item.check;
 };
 const headerList = ref({
   check: 0,
+  type: "cameraInfo",
   options: [
     {
       id: 1,
-      title: '未发现',
+      title: "未发现",
     },
     {
       id: 2,
-      title: '发现',
+      title: "发现",
     },
   ],
 });
 const isnotList = ref({
   check: 0,
+  type: "dangerousInfo",
   options: [
     {
       id: 1,
-      title: '否',
+      title: "否",
     },
     {
       id: 2,
-      title: '是',
+      title: "是",
     },
   ],
 });
 const reachList = ref({
   check: 0,
+  type: "reachs",
   options: [
     {
       id: 1,
-      title: '医疗',
+      title: "医疗",
     },
     {
       id: 2,
-      title: '消防',
+      title: "消防",
     },
     {
       id: 3,
-      title: '清障',
+      title: "清障",
     },
     {
       id: 4,
-      title: '其他',
+      title: "其他",
     },
   ],
 });
+const saveHandler = () => {
+  return { type: "explorateTwo", data: data.value };
+};
+const saveStore = () => {
+  // return new Promise((res, rej) => {
+  // origin["legacy"] = JSON.parse(JSON.stringify(data.value));
+  // });
+};
+defineExpose({ saveHandler, data });
+
+onMounted(() => {
+  if (props.isDownloadShow) {
+  } else {
+    setData("explorateTwo");
+  }
+  if (tablesInfo.explorateTwo) {
+    data.value = tablesInfo.explorateTwo;
+  }
+});
 </script>
 <style lang="scss" scoped>
 div[contenteditable] {
   outline: none;
 }
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  &.left {
+    justify-content: flex-start;
+  }
+}
 .explorate {
   color: #000;
   width: 100%;
@@ -257,6 +254,15 @@ div[contenteditable] {
   > div {
     // padding: 20px 50px 30px;
   }
+
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   .title {
     text-align: center;
     margin-bottom: 10px;
@@ -267,6 +273,7 @@ div[contenteditable] {
     .table-excel {
       padding: 10px;
       table {
+        width: 100%;
         border-collapse: collapse;
         border: 1px solid #000;
         tr {
@@ -278,7 +285,7 @@ div[contenteditable] {
           }
         }
         td {
-          padding: 0 14px;
+          padding: 0 2px;
           box-sizing: border-box;
           text-align: center;
           max-width: 11%;
@@ -288,6 +295,11 @@ div[contenteditable] {
           &:last-of-type {
             border-right: none;
           }
+          input {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+          }
           > div {
             outline: none;
           }
@@ -344,8 +356,12 @@ div[contenteditable] {
         }
         > div {
           input {
-            width: 100%;
-            border-bottom: 1px solid #000;
+            &.under-line {
+              width: 100%;
+
+              border-bottom: 1px solid #000;
+            }
+            // border-bottom: 1px solid #000;
           }
         }
       }

src/views/tables/extract.vue

@@ -1,83 +1,179 @@
 <!--  -->
 <template>
-  <div class="explorate" ref="layoutRef">
+  <div class="extract" ref="layoutRef" :class="{ downMode }" v-if="data">
     <h2 class="title">当事人血样（尿样）提取登记表</h2>
 
     <div class="container">
       <table>
         <tr>
           <td width="12%" colspan="2">姓名</td>
-          <td width="20%"><div contenteditable></div></td>
+          <td width="20%">
+            <div>
+              <input v-model="data.name" />
+              <div class="content-box">{{ data.name }}</div>
+            </div>
+          </td>
           <td width="10%">性别</td>
-          <td width="8%"><div contenteditable></div></td>
+          <td width="8%">
+            <div>
+              <input v-model="data.sex" />
+              <div class="content-box">{{ data.sex }}</div>
+            </div>
+          </td>
           <td width="20%">身份证号码</td>
-          <td width="30%" colspan="2"><div contenteditable></div></td>
+          <td width="30%" colspan="2">
+            <div>
+              <input v-model="data.id" />
+              <div class="content-box">{{ data.id }}</div>
+            </div>
+          </td>
         </tr>
         <tr>
           <td width="15%" colspan="2">事故时间</td>
-          <td width="35%" colspan="3"><div contenteditable></div></td>
+          <td width="35%" colspan="3">
+            <div>
+              <input v-model="data.time" />
+              <div class="content-box">{{ data.time }}</div>
+            </div>
+          </td>
           <td width="20%">地点</td>
-          <td width="30%" colspan="2"><div contenteditable></div></td>
+          <td width="30%" colspan="2">
+            <div>
+              <input v-model="data.address" />
+              <div class="content-box">{{ data.address }}</div>
+            </div>
+          </td>
         </tr>
         <tr>
           <td colspan="2">血样（尿样)提取时间</td>
-          <td colspan="6"><div contenteditable></div></td>
+          <td colspan="6">
+            <div>
+              <input v-model="data.extractTime" />
+              <div class="content-box">{{ data.extractTime }}</div>
+            </div>
+          </td>
         </tr>
         <tr>
           <td colspan="2">血样（尿样)提取地点</td>
-          <td colspan="6"><div contenteditable></div></td>
+          <td colspan="6">
+            <div>
+              <input v-model="data.extractAdress" />
+              <div class="content-box">{{ data.extractAdress }}</div>
+            </div>
+          </td>
         </tr>
         <tr>
           <td width="10%" rowspan="4" colspan="1">血样（尿样）提取人员填写</td>
           <td width="5%" rowspan="3">提取登记</td>
           <td colspan="3">A样本盛装容器编号</td>
-          <td><div contenteditable></div></td>
+          <td>
+            <div>
+              <input v-model="data.aNumber" />
+              <div class="content-box">{{ data.aNumber }}</div>
+            </div>
+          </td>
           <td width="10%">提取量</td>
           <td>
             <div>
-              <div contenteditable></div>
+              <div>
+                <input v-model="data.aVolume" />
+                <div class="content-box">{{ data.aVolume }}</div>
+              </div>
               ml
             </div>
           </td>
         </tr>
         <tr>
           <td colspan="3">B样本盛装容器编号</td>
-          <td><div contenteditable></div></td>
+          <td>
+            <div>
+              <input v-model="data.bNumber" />
+              <div class="content-box">{{ data.bNumber }}</div>
+            </div>
+          </td>
           <td>提取量</td>
           <td>
             <div>
-              <div contenteditable></div>
+              <div>
+                <input v-model="data.bVolume" />
+                <div class="content-box">{{ data.bVolume }}</div>
+              </div>
               ml
             </div>
           </td>
         </tr>
         <tr>
           <td colspan="1">消毒名称</td>
-          <td colspan="2"><div contenteditable></div></td>
+          <td colspan="2">
+            <div>
+              <input v-model="data.disinfect" />
+              <div class="content-box">{{ data.disinfect }}</div>
+            </div>
+          </td>
           <td>密封方式</td>
-          <td colspan="2"><div contenteditable></div></td>
+          <td colspan="2">
+            <div>
+              <input v-model="data.sealing" />
+              <div class="content-box">{{ data.sealing }}</div>
+            </div>
+          </td>
         </tr>
         <tr>
           <td width="10%" colspan="2">提取人员单位</td>
-          <td colspan="2"><div contenteditable></div></td>
+          <td colspan="2">
+            <div>
+              <input v-model="data.extractUnit" />
+              <div class="content-box">{{ data.extractUnit }}</div>
+            </div>
+          </td>
           <td>提取人员（签名）</td>
-          <td colspan="2"><div contenteditable></div></td>
+          <td colspan="2">
+            <div>
+              <input v-model="data.extractMumber" />
+              <div class="content-box">{{ data.extractMumber }}</div>
+            </div>
+          </td>
         </tr>
         <tr>
           <td>通知家属情况</td>
-          <td colspan="7"><div contenteditable></div></td>
+          <td colspan="7">
+            <div>
+              <input v-model="data.notice" />
+              <div class="content-box">{{ data.notice }}</div>
+            </div>
+          </td>
         </tr>
         <tr>
           <td>被提取人（签名）</td>
-          <td colspan="2"><div contenteditable></div></td>
+          <td colspan="2">
+            <div>
+              <input v-model="data.extractBySign" />
+              <div class="content-box">{{ data.extractBySign }}</div>
+            </div>
+          </td>
           <td>见证人（签名）</td>
-          <td colspan="2"><div contenteditable></div></td>
+          <td colspan="2">
+            <div>
+              <input v-model="data.witnessSign" />
+              <div class="content-box">{{ data.witnessSign }}</div>
+            </div>
+          </td>
           <td>交通警察（签名）</td>
-          <td colspan="2"><div contenteditable></div></td>
+          <td colspan="2">
+            <div>
+              <input v-model="data.policeSign" />
+              <div class="content-box">{{ data.policeSign }}</div>
+            </div>
+          </td>
         </tr>
         <tr>
           <td>办案单位</td>
-          <td colspan="7"><div contenteditable></div></td>
+          <td colspan="7">
+            <div>
+              <input v-model="data.company" />
+              <div class="content-box">{{ data.company }}</div>
+            </div>
+          </td>
         </tr>
       </table>
     </div>
@@ -85,9 +181,42 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from "vue";
+
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "./data";
+const props = defineProps({
+  downMode: { type: Boolean, default: false },
+  isDownloadShow: { type: Boolean, default: false },
+});
+const data = ref(null);
+const saveHandler = () => {
+  return { type: "extract", data: data.value };
+};
+
+defineExpose({ saveHandler, data });
+onMounted(() => {
+  if (props.isDownloadShow) {
+  } else {
+    setData("extract");
+  }
+
+  if (tablesInfo.extract) {
+    data.value = tablesInfo.extract;
+  }
+});
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.left {
+    justify-content: flex-start;
+  }
+}
 div[contenteditable] {
   outline: none;
   display: flex;
@@ -96,7 +225,7 @@ div[contenteditable] {
   // height: 100%;
   width: 100%;
 }
-.explorate {
+.extract {
   color: #000;
   font-size: 20px;
   // padding: 10px 30px;
@@ -106,6 +235,17 @@ div[contenteditable] {
   overflow: auto;
   font-family: sr, st;
   box-sizing: border-box;
+  .content-box {
+    display: none;
+  }
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
 
   .title {
     text-align: center;
@@ -143,7 +283,7 @@ div[contenteditable] {
             white-space: nowrap;
             line-height: 110px;
             width: 100%;
-              height: 100%;
+            height: 100%;
             input {
               width: 100%;
               height: 100%;
@@ -160,20 +300,5 @@ div[contenteditable] {
       }
     }
   }
-  &.downMode {
-    // table {
-    //   border: 1px solid #000;
-    //   tr {
-    //     td {
-    //       border: none;
-    //       border-bottom: 1px solid #000;
-    //       border-right: 1px solid #000;
-    //       &:last-of-type {
-    //         border-right: none;
-    //       }
-    //     }
-    //   }
-    // }
-  }
 }
 </style>

src/views/tables/identification.vue

@@ -1,21 +1,33 @@
 <template>
-  <div class="identification">
+  <div class="identification" :class="{ downMode }" v-if="data">
     <h2 class="title">道路交通事故认定书（简易程序）</h2>
     <div class="num">
       第
-      <div contenteditable></div>
+      <div>
+        <input v-model="data.id" />
+        <div class="content-box">{{ data.id }}</div>
+      </div>
       号
     </div>
     <div class="table-layout">
       <div class="msg-box">
         <div class="name">事故时间</div>
-        <div class="input-box" style="flex: 1" contenteditable></div>
+        <div class="input-box" style="flex: 1">
+          <input v-model="data.time" />
+          <div class="content-box">{{ data.time }}</div>
+        </div>
         <div class="weather">天气</div>
-        <div class="input-box" style="width: 128px" contenteditable></div>
+        <div class="input-box" style="width: 128px">
+          <input v-model="data.weather" />
+          <div class="content-box">{{ data.weather }}</div>
+        </div>
       </div>
       <div class="msg-box">
         <div class="name">事故地点</div>
-        <div style="flex: 1" class="input-box" contenteditable></div>
+        <div style="flex: 1" class="input-box">
+          <input v-model="data.address" />
+          <div class="content-box">{{ data.address }}</div>
+        </div>
       </div>
 
       <table>
@@ -28,63 +40,29 @@
           <td>保险公司</td>
           <td>交强险凭证号</td>
         </tr>
-        <tr>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-        </tr>
-        <tr>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-        </tr>
-        <tr>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-        </tr>
-        <tr>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-        </tr>
-        <tr>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
-          <td><div contenteditable></div></td>
+        <tr v-for="(i, index) in data.list">
+          <td v-for="(j, j_index) in i">
+            <div>
+              <input v-model="data.list[index][j_index]" />
+              <div class="content-box">{{ data.list[index][j_index] }}</div>
+            </div>
+          </td>
         </tr>
       </table>
       <div class="respons">
         <div class="name" style="width: 50px">交通事故事实及责任</div>
         <div class="info">
           <div style="margin-bottom: 10px" v-for="(i, index) in topList.options" @click="checkOptions(topList, index)">
-            <ui-icon :type="topList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+            <ui-icon :type="data.optionsOne.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
             <span>{{ i.title }}</span>
           </div>
           <div class="sign-box" style="margin-bottom: 40px">
             <div style="flex: 1">
               <span>当事人：</span>
-              <div style="flex: 1" contenteditable></div>
+              <div style="flex: 1">
+                <input v-model="data.optionsOne.client" />
+                <div class="content-box">{{ data.optionsOne.client }}</div>
+              </div>
             </div>
             <div>
               <span>（道路交通事故处理专用章）</span>
@@ -92,7 +70,10 @@
           </div>
           <div class="sign-box">
             <span>交通警察：</span>
-            <div style="flex: 1" contenteditable></div>
+            <div style="flex: 1">
+              <input v-model="data.optionsOne.police" />
+              <div class="content-box">{{ data.optionsOne.police }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -102,7 +83,10 @@
           <div class="sign-box" style="margin-bottom: 40px">
             <div style="flex: 1">
               <span>当事人：</span>
-              <div style="flex: 1" contenteditable></div>
+              <div style="flex: 1">
+                <input v-model="data.optionsOne.client" />
+                <div class="content-box">{{ data.optionsOne.client }}</div>
+              </div>
             </div>
             <div>
               <span>（道路交通事故处理专用章）</span>
@@ -110,7 +94,10 @@
           </div>
           <div class="sign-box">
             <span>交通警察：</span>
-            <div style="flex: 1" contenteditable></div>
+            <div style="flex: 1">
+              <input v-model="data.optionsOne.police" />
+              <div class="content-box">{{ data.optionsOne.police }}</div>
+            </div>
           </div>
         </div>
       </div>
@@ -125,29 +112,64 @@
 </template>
 
 <script setup>
-import { reactive, ref, toRefs, onBeforeMount, onMounted, defineEmits } from 'vue';
-import { router } from '@/router';
+import { reactive, ref, toRefs, onBeforeMount, onMounted, defineEmits } from "vue";
+import { router } from "@/router";
+
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "./data";
+const props = defineProps({
+  downMode: { type: Boolean, default: false },
+  isDownloadShow: { type: Boolean, default: false },
+});
+const data = ref(null);
+
 const checkOptions = (item, index) => {
   item.check = item.options[index].id;
+  data.value[item.type].check = item.check;
 };
 const topList = ref({
   check: 0,
+  type: "optionsOne",
   options: [
     {
       id: 1,
-      title: '财产损失事故',
+      title: "财产损失事故",
     },
     {
       id: 2,
-      title: '受伤当事人伤势轻微，各方当事人一致同意适用简易程序处理',
+      title: "受伤当事人伤势轻微，各方当事人一致同意适用简易程序处理",
     },
   ],
 });
+
+
+const saveHandler = () => {
+  return { type: "identification", data: data.value };
+};
+
+defineExpose({ saveHandler, data });
 onMounted(() => {
+  if (props.isDownloadShow) {
+  } else {
+    setData("identification");
+  }
 
+  if (tablesInfo.identification) {
+    data.value = tablesInfo.identification;
+  }
 });
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.left {
+    justify-content: flex-start;
+  }
+}
 div[contenteditable] {
   outline: none;
 }
@@ -158,6 +180,17 @@ div[contenteditable] {
   height: 100%;
   font-family: sr, st;
   overflow: auto;
+  .content-box {
+    display: none;
+  }
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   .title {
     text-align: center;
     margin-bottom: 10px;
@@ -167,13 +200,26 @@ div[contenteditable] {
     align-items: center;
     justify-content: center;
     > div {
-      padding: 0 30px;
+      // padding: 0 30px;
+      min-width: 60px;
+      input {
+        width: 60px;
+        height: 100%;
+        text-align: center;
+      }
+      .content-box {
+      }
     }
   }
   .table-layout {
     border: 1px solid #000;
     .input-box {
       padding: 0 10px;
+      height: 100%;
+      input {
+        width: 100%;
+        height: 100%;
+      }
     }
     .msg-box {
       border-bottom: 1px solid #000;
@@ -218,8 +264,13 @@ div[contenteditable] {
           border-right: none;
         }
         > div {
-          outline: none;
-          word-break: break-all;
+          // outline: none;
+          // word-break: break-all;
+          input {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+          }
         }
       }
     }

src/views/tables/index.vue

@@ -3,7 +3,8 @@
   <MainPanel>
     <template v-slot:header>
       <Header :title="headerTitle" :on-back="onBack" type="return">
-        <ui-button v-if="tableType != 'law'" type="primary" width="96px" @click="saveHandler"> {{ isWrite ? "确定" : "完成" }} </ui-button>
+        <ui-button v-if="!isWrite" style="margin-right: 16px" class="download-btn" type="null" width="96px" @click="downloadHandler"> 下载 </ui-button>
+        <ui-button v-if="tableType != 'law'" type="primary" width="96px" @click="saveHandler"> {{ isWrite ? "确定" : "保存" }} </ui-button>
       </Header>
     </template>
 
@@ -11,11 +12,21 @@
       <div class="swiper-wrapper">
         <div class="swiper-slide tables-item" :class="{ show: downMode }" v-for="(i, index) in eleList">
           <div class="warpper" :class="{ downMode, 'no-padding': tableType == 'law' }" :id="`layoutRef${index}`">
-            <component :page="askPage" :pageIndex="index" :text="text" @onTextChange="onTextChange" @onTextConfirm="onTextConfirm" @goWrite="goWrite" :downMode="downMode" :is="i"></component>
+            <component
+              ref="content"
+              :page="askPage"
+              :pageIndex="index"
+              :text="text"
+              @onTextChange="onTextChange"
+              @onTextConfirm="onTextConfirm"
+              @goWrite="goWrite"
+              :downMode="downMode"
+              :is="i"
+            ></component>
           </div>
 
           <div class="warpper" v-if="downMode" :class="{ show: downMode, 'no-padding': tableType == 'law' }">
-            <component :page="askPage" :pageIndex="index" :text="text" @onTextChange="onTextChange" @onTextConfirm="onTextConfirm" @goWrite="goWrite" :is="i"></component>
+            <component :isDownloadShow="true" :page="askPage" :pageIndex="index" :text="text" @onTextChange="onTextChange" @onTextConfirm="onTextConfirm" @goWrite="goWrite" :is="i"></component>
           </div>
         </div>
       </div>
@@ -25,12 +36,15 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch, onMounted, nextTick, onActivated, onDeactivated } from "vue";
+import { reactive, ref, watch, onMounted, nextTick, onActivated, onDeactivated, provide } from "vue";
 import { router } from "@/router";
 import Swiper from "swiper";
 import html2canvas from "html2canvas";
 import { downloadImage, uploadImage } from "@/store/sync";
 import { genUseLoading } from "@/hook";
+import { tables } from "@/store/tables";
+import { resetData } from "./data";
+
 import Write from "./write/index.vue";
 import Message from "@/components/base/components/message/message.vue";
 import Header from "@/components/photos/header.vue";
@@ -39,7 +53,6 @@ import one from "./explorate-one.vue";
 import two from "./explorate-two.vue";
 import three from "./explorate-three.vue";
 import four from "./explorate-four.vue";
-
 import identification from "./identification.vue";
 
 //授权委托书
@@ -60,6 +73,7 @@ import law from "./law.vue";
 // const eleList = ref([one, two, three, four]);
 // const eleList = ref([authorOne, authorTwo]);
 const com = ref(null); // 通过 模板ref 绑定子组件
+const content = ref(null); // 通过 模板ref 绑定子组件
 const eleList = ref([]);
 const headerTitle = ref("");
 const tableType = ref<string | string[]>();
@@ -94,15 +108,42 @@ const onTextConfirm = (data) => {
 const onTextChange = (data) => {
   text.value = data.text;
 };
-
+const downloadHandler = genUseLoading(async () => {
+  // if (isWrite.value) {
+  //   com.value.onConfirm();
+  //   return;
+  // }
+  await getLayoutImage();
+});
 const saveHandler = genUseLoading(async () => {
   if (isWrite.value) {
     com.value.onConfirm();
     return;
   }
-  await getLayoutImage();
 
+  saveStore();
+  router.replace("/scene");
 });
+
+const saveStore = () => {
+  let reportData = initData();
+  console.error(reportData);
+  const origin = tables.value;
+  let newData = Object.assign(origin, reportData);
+};
+const initData = () => {
+  let dataList = content.value;
+
+  let obj = {};
+  dataList.forEach((item) => {
+    if (item.saveHandler) {
+      let data = item.saveHandler();
+
+      obj[data.type] = data.data;
+    }
+  });
+  return obj;
+};
 let slideIndex = 0;
 const slideFunc = () => {
   let eles = document.querySelectorAll(".tables-item");
@@ -144,7 +185,7 @@ const getLayoutImage = async () => {
 
       if (num == eleList.value.length) {
         downMode.value = false;
-        router.replace('/scene');
+        // router.replace("/scene");
         res(true);
       }
     });
@@ -163,10 +204,21 @@ const initTables = () => {
       eleList.value = [ask];
       if (router.currentRoute.value.query.type == "1") {
         headerTitle.value = "询问笔录";
+        if (tables.value.askOne) {
+          text.value = tables.value.askOne.text;
+          askPage.value = tables.value.askOne.page;
+        }
       } else {
         headerTitle.value = "讯问笔录";
+        if (tables.value.askTwo) {
+          text.value = tables.value.askTwo.text;
+          askPage.value = tables.value.askTwo.page;
+        }
       }
 
+      isWrite.value = false;
+      setAskPage();
+
       break;
     case "author":
       eleList.value = [authorOne, authorTwo];
@@ -239,9 +291,17 @@ onDeactivated(() => {
   isWrite.value = false;
   text.value = "";
   loaded.value = false;
+
+  resetData();
 });
 </script>
+<style></style>
 <style lang="scss" scoped>
+.download-btn {
+  border-color: #3a3d3d;
+  background-color: #3a3d3d !important;
+  color: #fff;
+}
 .mySwiper {
   height: 100%;
   width: 100%;

src/views/tables/legacy.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="legacy">
+  <div class="legacy" :class="{ downMode }" v-if="data">
     <h2 class="title">道路交通事故现场遗留物品清单</h2>
     <table>
       <tr>
@@ -8,7 +8,8 @@
           <div style="display: flex; align-items: center; justify-content: flex-start; height: 100%">
             <span style="height: 100%; line-height: 60px">事故时间:</span>
             <div style="height: 100%; flex: 1" class="input-box">
-              <input type="text" style="width: 100%; height: 100%" />
+              <div class="content-box">{{ data.accidentTime }}</div>
+              <input type="text" style="width: 100%; height: 100%" v-model="data.accidentTime" />
             </div>
           </div>
         </td>
@@ -19,7 +20,8 @@
           <div style="display: flex; align-items: center; justify-content: flex-start; height: 100%">
             <span style="height: 100%; line-height: 60px">事故地点:</span>
             <div style="height: 100%; flex: 1" class="input-box">
-              <input type="text" style="width: 100%; height: 100%" />
+              <div class="content-box">{{ data.accidentAddress }}</div>
+              <input type="text" style="width: 100%; height: 100%" v-model="data.accidentAddress" />
             </div>
           </div>
         </td>
@@ -33,132 +35,104 @@
         <td>领取时间</td>
         <td>备注</td>
       </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-      </tr>
-      <tr>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
-        <td><div contenteditable></div></td>
+      <tr v-for="(i, index) in data.list">
+        <td v-for="(j, j_index) in i">
+          <div>
+            <div class="content-box">{{ data.list[index][j_index] }}</div>
+            <input type="text" v-model="data.list[index][j_index]" />
+          </div>
+          <!-- <div v-else contenteditable v-html="j"></div> -->
+          <!-- <div contenteditable v-html="j" @input="handlerInput($event, index, j_index)"></div> -->
+        </td>
       </tr>
     </table>
     <div class="sign-box">
       <div>
         <span>当事人签名：</span>
-        <div contenteditable></div>
+        <div>
+          <input type="text" v-model="data.partySign" />
+          <div class="content-box left">{{ data.partySign }}</div>
+        </div>
       </div>
       <div>
         <span>交通警察（签名）：</span>
-        <div contenteditable></div>
+        <div>
+          <input type="text" v-model="data.policeSign" />
+          <div class="content-box left">{{ data.policeSign }}</div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, toRefs, onBeforeMount, onMounted } from 'vue';
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, defineProps } from "vue";
+import { genUseLoading } from "@/hook";
+import UiInput from "@/components/base/components/input/index.vue";
+import { tables } from "@/store/tables";
+import { tablesInfo, setData } from "./data";
+const props = defineProps({
+  downMode: { type: Boolean, default: false },
+  isDownloadShow: { type: Boolean, default: false },
+});
+const data = ref(null);
+// const data = ref({
+//   accidentTime: "",
+//   accidentAddress: "",
+//   partySign: "",
+//   policeSign: "",
+//   list: [
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//     ["", "", "", "", "", "", ""],
+//   ],
+// });
+const handlerInput = (e, index, j_index) => {
+  data.value.list[index][j_index] = e.target.innerText;
+};
+
+const saveHandler = async () => {
+  await saveStore();
+};
+const saveStore = genUseLoading(async () => {
+  // return new Promise((res, rej) => {
+  const origin = tables.value;
+  console.log(data.value);
+  origin["legacy"] = JSON.parse(JSON.stringify(data.value));
+  // });
+});
+defineExpose({ saveHandler, data });
+onMounted(() => {
+  if (props.isDownloadShow) {
+  } else {
+    setData("legacy");
+  }
+
+  if (tablesInfo.legacy) {
+    data.value = tablesInfo.legacy;
+  }
+});
 </script>
 <style lang="scss" scoped>
+.content-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.left {
+    justify-content: flex-start;
+  }
+}
 div[contenteditable] {
   outline: none;
 }
@@ -168,6 +142,17 @@ div[contenteditable] {
   width: 100%;
   height: 100%;
   font-family: sr, st;
+  .content-box {
+    display: none;
+  }
+  &.downMode {
+    input {
+      display: none;
+    }
+    .content-box {
+      display: flex;
+    }
+  }
   .title {
     text-align: center;
     margin-bottom: 10px;
@@ -203,6 +188,15 @@ div[contenteditable] {
         &:last-of-type {
           border-right: none;
         }
+        div {
+          width: 100%;
+          height: 100%;
+          input {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+          }
+        }
         > div[contenteditable] {
           width: 100%;
           height: 100%;

src/views/tables/write/index.vue

@@ -15,24 +15,24 @@
 </template>
 
 <script setup>
-import { reactive, ref, toRefs, onBeforeMount, computed, onMounted, nextTick, defineEmits, defineProps } from 'vue';
+import { reactive, ref, toRefs, onBeforeMount, computed, onMounted, nextTick, defineEmits, defineProps } from "vue";
 
 const props = defineProps({
   text: {
     type: String,
-    default: '',
+    default: "",
   },
   textIndex: {
     type: Number,
     default: 0,
   },
 });
-const emits = defineEmits(['onTextConfirm', 'onTextChange']);
-const inputText = ref('');
+const emits = defineEmits(["onTextConfirm", "onTextChange"]);
+const inputText = ref("");
 const lineCount = ref(1);
 const inputHeight = ref(0);
 const getLineCount = () => {
-  let containerH = document.getElementById('container').clientHeight;
+  let containerH = document.getElementById("container").clientHeight;
   let count = Math.floor(containerH / 40);
   lineCount.value = count;
   inputHeight.value = count * 40;
@@ -46,15 +46,16 @@ const onConfirm = () => {
   } else {
     page = page + Math.ceil((msgHeight.value - 400) / 1080);
   }
-  emits('onTextConfirm', { text: inputText.value, msgHeight: msgHeight.value, page });
+  emits("onTextConfirm", { text: inputText.value, msgHeight: msgHeight.value, page });
 };
-defineExpose({ onConfirm });
 const msgHeight = ref(40);
+defineExpose({ onConfirm });
+
 const hanlderWrite = (e) => {
-  let msgH = document.getElementById('msg').clientHeight;
+  let msgH = document.getElementById("msg").clientHeight;
   msgHeight.value = msgH;
   let msgCount = Math.floor(msgH / 40);
-  let containerH = document.getElementById('container').clientHeight;
+  let containerH = document.getElementById("container").clientHeight;
   let containerCount = Math.floor(containerH / 40);
   // text.value = e.target.innerHTML;
   if (msgCount > containerCount) {
@@ -67,7 +68,7 @@ const hanlderWrite = (e) => {
     lineCount.value = containerCount;
   }
 
-  emits('onTextChange', { text: inputText.value });
+  emits("onTextChange", { text: inputText.value });
 
   // textAreaHeight.value = msgH;
 };
@@ -75,12 +76,12 @@ const onPaste = (e) => {
   setTimeout(() => {
     // let msgH = document.getElementById('msg').clientHeight;
     hanlderWrite(e);
-    let content = document.getElementById('content');
+    let content = document.getElementById("content");
     content.scrollTo(0, 9999999);
   }, 100);
 };
 const setFocusAt = (focusIndex) => {
-  let txtarea = document.getElementById('write-info');
+  let txtarea = document.getElementById("write-info");
   setCaretPosition(txtarea, focusIndex);
 };
 
@@ -92,8 +93,8 @@ const setCaretPosition = (ctrl, pos) => {
   } else if (ctrl.createTextRange) {
     var range = ctrl.createTextRange();
     range.collapse(true);
-    range.moveEnd('character', pos);
-    range.moveStart('character', pos);
+    range.moveEnd("character", pos);
+    range.moveStart("character", pos);
     range.select();
   }
 
@@ -105,7 +106,7 @@ const setCaretPosition = (ctrl, pos) => {
 // 获取 textarea 元素
 
 const getSelectionDistance = () => {
-  var textarea = document.getElementById('write-info'); 
+  var textarea = document.getElementById("write-info");
   // // 获取 textarea 的样式属性
   var textareaStyle = getComputedStyle(textarea);
   // // 计算光标位置距离顶部的距离
@@ -115,7 +116,7 @@ const getSelectionDistance = () => {
   // 获取 textarea 内容
   var textareaValue = textarea.value;
   // 将内容分割成行
-  var lines = textareaValue.split('\n');
+  var lines = textareaValue.split("\n");
   // 计算光标所在的行数1
   var cursorLine = 1; // 初始化行数为1
   for (var i = 0; i < lines.length; i++) {
@@ -125,11 +126,11 @@ const getSelectionDistance = () => {
     cursorPosition -= lines[i].length + 1; // 加1是为了包括换行符
     cursorLine++;
   }
-  let scrollBox = document.getElementById('content');
+  let scrollBox = document.getElementById("content");
   let scrollHeight = cursorLine * lineHeight;
   let scrollBoxHeight = scrollBox.offsetHeight;
   if (scrollHeight > scrollBoxHeight) {
-    console.log('光标所在的行数：', cursorLine);
+    console.log("光标所在的行数：", cursorLine);
     scrollBox.scrollTo(0, scrollHeight - scrollBoxHeight);
   }
 };
@@ -147,8 +148,8 @@ onMounted(async () => {
     }
   }, 0);
   nextTick(() => {
-    let scrollBox = document.getElementById('content');
-    scrollBox.addEventListener('scroll', (data) => {
+    let scrollBox = document.getElementById("content");
+    scrollBox.addEventListener("scroll", (data) => {
       // console.error(data);
     });
   });