feat:

src/views/tables/ask.vue

@@ -1,23 +1,25 @@
 <!--  -->
 <template>
   <!-- <iframe style="width:100%;height: 100%;" src="./static/html/FG.html" frameborder="0"></iframe> -->
+  
   <div class="ask-content">
-    <div class="num-box">
+    <Write v-if="isWrite" @onConfirm="onTextConfirm"> </Write>
+    <div v-if="!isWrite" class="num-box">
       <span>第</span>
       <div class="input-box" contenteditable></div>
       <span style="margin-right: 30px">页</span> <span>共</span>
       <div class="input-box" contenteditable></div>
       <span>页</span>
     </div>
-    <div class="num-box" style="padding-right: 114px">
+    <div v-if="!isWrite" class="num-box" style="padding-right: 114px">
       <span>第</span>
       <div class="input-box" contenteditable></div>
       <span>次</span>
     </div>
 
-    <h2 class="title" v-if="type == '1'">询问/<span class="through">讯问</span>笔录</h2>
-    <h2 class="title" v-else><span class="through">询问</span>/讯问笔录</h2>
-    <div class="container">
+    <h2 v-show="!isWrite" class="title" v-if="type == '1'">询问/<span class="through">讯问</span>笔录</h2>
+    <h2 v-show="!isWrite" class="title" v-else><span class="through">询问</span>/讯问笔录</h2>
+    <div class="container" v-if="!isWrite">
       <div class="line">
         <span>时间</span>
         <div class="write-line" contenteditable></div>
@@ -78,9 +80,9 @@
         <div class="write-line" style="" contenteditable></div>
         <span> ）。</span>
       </div>
-      <div class="more-line">
-        <textarea v-if="!downMode" v-model="text" name=""></textarea>
-        <div v-if="downMode" class="downMode">{{ text }}</div>
+      <div class="more-line" @click="isWrite=true">
+        <!-- <textarea v-if="!downMode" v-model="text" name=""></textarea> -->
+        <div  class="downMode" v-html="text"></div>
         <div class="more-line-box">
           <div class="item"></div>
           <div class="item"></div>
@@ -91,7 +93,7 @@
         </div>
       </div>
     </div>
-    <div class="bottom-name">
+    <div class="bottom-name" v-if="!isWrite">
       <span v-if="type == '1'">被询问人:</span>
       <span v-else>被讯问人:</span>
       <div style="flex: 1" contenteditable></div>
@@ -102,14 +104,21 @@
 <script setup>
 import { reactive, ref, toRefs, onBeforeMount, onMounted, defineProps } from 'vue';
 import { router } from '@/router';
+import Write from './write/index.vue';
 const props = defineProps({
   downMode: {
     type: Boolean,
     default: false,
   },
 });
+const isWrite = ref(false);
 const text = ref('');
 const type = ref(router.currentRoute.value.query.type);
+
+const onTextConfirm = (data) => {
+  text.value = data.text;
+  isWrite.value = false;
+};
 </script>
 <style lang="scss" scoped>
 div[contenteditable] {
@@ -229,7 +238,7 @@ div[contenteditable] {
         top: 0;
         left: 0;
         z-index: 2;
-        white-space: pre-line;
+        white-space: pre-wrap;
         text-align: justify;
       }
       .more-line-box {

src/views/tables/explorate-one.vue

@@ -683,6 +683,7 @@ div {
             display: flex;
             align-items: center;
             justify-content: center;
+            line-height: 30px;
           }
           .road-num {
             width: 23.8%;
@@ -699,6 +700,7 @@ div {
             display: flex;
             align-items: center;
             justify-content: center;
+            line-height: 30px;
           }
         }
         > div {
@@ -765,6 +767,7 @@ div {
                 > div {
                   flex: 1;
                   height: 30px;
+                  line-height: 30px;
                   outline: none;
                   display: flex;
                   align-items: center;

src/views/tables/extract.vue

@@ -1,15 +1,15 @@
 <!--  -->
 <template>
-  <div class="explorate" :class="{ downMode }" ref="layoutRef">
+  <div class="explorate" ref="layoutRef">
     <h2 class="title">当事人血样（尿样）提取登记表</h2>
 
     <div class="container">
       <table>
         <tr>
-          <td width="15%" colspan="2">姓名</td>
+          <td width="12%" colspan="2">姓名</td>
           <td width="20%"><input type="text" /></td>
           <td width="10%">性别</td>
-          <td width="5%"><input type="text" /></td>
+          <td width="8%"><input type="text" /></td>
           <td width="20%">身份证号码</td>
           <td width="30%" colspan="2"><input type="text" /></td>
         </tr>
@@ -34,7 +34,10 @@
           <td><input type="text" /></td>
           <td width="10%">提取量</td>
           <td>
-            <div><input type="text" />ml</div>
+            <div>
+              <input type="text" />
+              ml
+            </div>
           </td>
         </tr>
         <tr>
@@ -42,7 +45,10 @@
           <td><input type="text" /></td>
           <td>提取量</td>
           <td>
-            <div><input type="text" />ml</div>
+            <div>
+              <input type="text" />
+              ml
+            </div>
           </td>
         </tr>
         <tr>
@@ -82,10 +88,13 @@
 import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
 </script>
 <style lang="scss" scoped>
-td[contenteditable] {
-  // display: flex;
-  // align-items: center;
-  // justify-content: center;
+div[contenteditable] {
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // height: 100%;
+  width: 100%;
 }
 .explorate {
   color: #000;
@@ -129,7 +138,11 @@ td[contenteditable] {
           > div {
             display: flex;
             align-items: center;
-            justify-content: flex-start;
+            justify-content: center;
+            // word-break: break-all;
+            white-space: nowrap;
+            width: 100%;
+              height: 100%;
             input {
               width: 100%;
               height: 100%;
@@ -140,6 +153,7 @@ td[contenteditable] {
             width: 100%;
             height: 100%;
             text-align: center;
+            line-height: 110px;
           }
         }
       }

src/views/tables/identification.vue

@@ -219,6 +219,7 @@ div[contenteditable] {
         }
         > div {
           outline: none;
+          word-break: break-all;
         }
       }
     }

src/views/tables/index.vue

@@ -10,7 +10,7 @@
     <div class="mySwiper" v-if="loaded">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(i, index) in eleList">
-          <div class="warpper" :class="{ downMode, 'no-padding': tableType == 'law' }" :id="`layoutRef${index}`">
+          <div class="warpper"  :class="{ downMode, 'no-padding': tableType == 'law' }" :id="`layoutRef${index}`">
             <component :downMode="downMode" :is="i"></component>
           </div>
         </div>
@@ -51,6 +51,7 @@ import ask from './ask.vue';
 
 //法规
 import law from './law.vue';
+import { transform } from 'html2canvas/dist/types/css/property-descriptors/transform';
 // const eleList = ref([one, two, three, four]);
 // const eleList = ref([authorOne, authorTwo]);
 const eleList = ref([]);
@@ -60,7 +61,7 @@ const downMode = ref(false);
 
 const saveHandler = genUseLoading(async () => {
   await getLayoutImage();
-  router.replace('/scene');
+  // router.replace('/scene');
 });
 
 const getLayoutImage = async () => {
@@ -137,6 +138,7 @@ onActivated(() => {
       mySwiper.value = new Swiper('.mySwiper', {
         on: {
           init: function (swiper) {
+            // initPage();
             // console.error(swiper);
           },
           transitionStart: function (swiper) {},
@@ -146,6 +148,13 @@ onActivated(() => {
     }
   });
 });
+const scale = ref('1');
+const initPage = () => {
+  let parent = document.getElementById('layoutRef0');
+  let children = parent.children[0];
+  // console.error(768 / children.offsetHeight);
+  scale.value = ((768 - 100) / children.clientHeight).toFixed(2);
+};
 onMounted(() => {});
 onDeactivated(() => {
   loaded.value = false;

src/views/tables/legacy.vue

@@ -5,12 +5,23 @@
     <table>
       <tr>
         <td colspan="7" style="text-align: left">
-          <div><span>事故时间:</span><input type="text" /></div>
+          <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>
+          </div>
         </td>
       </tr>
+
       <tr>
         <td colspan="7" style="text-align: left">
-          <div><span>事故地点:</span><input type="text" /></div>
+          <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>
+          </div>
         </td>
       </tr>
       <tr>

src/views/tables/write/index.vue

@@ -0,0 +1,98 @@
+<!--  -->
+<template>
+  <div class="write-box" id="container">
+    <div @click="onConfirm">确定</div>
+    <!--  -->
+    <div class="content" :style="`height:${inputHeight}px;`">
+      <!-- <div contenteditable v-html="text" :style="`height:${lineCount * 40}px;`" @keydown="hanlderWrite($event)" id="write-info"></div> -->
+      <textarea :style="`height:${lineCount * 40}px;`" @keydown="hanlderWrite($event)" id="write-info" v-model="text"> </textarea>
+      <div id="msg" class="msg-box">{{ text }}</div>
+      <div class="item" :style="`top:${index * 40}px;`" v-for="(i, index) in lineCount"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, defineEmits } from 'vue';
+const emits = defineEmits(['onConfirm']);
+const text = ref('');
+const lineCount = ref(1);
+const inputHeight = ref(0);
+const getLineCount = () => {
+  let containerH = document.getElementById('container').clientHeight;
+  let count = Math.floor(containerH / 40);
+  lineCount.value = count;
+  inputHeight.value = count * 40;
+  // textAreaHeight.value = lineCount.value * 40;
+};
+const onConfirm = () => {
+  emits('onConfirm', { text: text.value });
+};
+const textAreaHeight = ref(40);
+const hanlderWrite = (e) => {
+  let msgH = document.getElementById('msg').clientHeight;
+  let msgCount = Math.floor(msgH / 40);
+  let containerH = document.getElementById('container').clientHeight;
+  let containerCount = Math.floor(containerH / 40);
+  // text.value = e.target.innerHTML;
+  console.log(msgCount > containerCount);
+  if (msgCount > containerCount) {
+    if (e.keyCode == 13) {
+      msgCount++;
+    }
+
+    lineCount.value = msgCount;
+  } else {
+    lineCount.value = containerCount;
+  }
+
+  // textAreaHeight.value = msgH;
+};
+onMounted(async () => {
+  await nextTick();
+  getLineCount();
+});
+</script>
+<style lang="scss" scoped>
+.write-box {
+  width: 100%;
+  height: calc(100vh - 100px);
+
+  overflow: hidden;
+  .content {
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-bottom: 5px;
+    position: relative;
+    .item {
+      width: 100%;
+      height: 40px;
+      border-bottom: 1px solid #000;
+      box-sizing: border-box;
+      position: absolute;
+      left: 0;
+    }
+    #write-info {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      line-height: 40px;
+      outline: none;
+      resize: none;
+      z-index: 2;
+      overflow: hidden;
+    }
+    .msg-box {
+      min-height: 40px;
+      white-space: pre-wrap;
+      opacity: 0;
+      position: absolute;
+      width: 100%;
+      line-height: 40px;
+      z-index: 1;
+    }
+  }
+}
+</style>