feat:ask

src/main.ts

@@ -15,6 +15,7 @@ import { router, setupRouter } from "@/router";
 import appConfig from "./appConfig";
 import { currentApp, setCurrentApp } from "@/store/app";
 import App from "./main.vue";
+import 'swiper/swiper.min.css';
 const app = createApp(App);
 
 setCurrentApp(appConfig);

src/views/tables/ask.vue

@@ -1,17 +1,17 @@
 <!--  -->
 <template>
   <!-- <iframe style="width:100%;height: 100%;" src="./static/html/FG.html" frameborder="0"></iframe> -->
-  
+
   <div class="ask-content">
-    <Write v-if="isWrite" @onConfirm="onTextConfirm"> </Write>
-    <div v-if="!isWrite" class="num-box">
+    <!-- <Write v-if="isWrite" :text="text" :textIndex="textIndex" @onTextConfirm="onTextConfirm"> </Write> -->
+    <div v-show="!isWrite" class="num-box">
       <span>第</span>
-      <div class="input-box" contenteditable></div>
+      <div class="input-box">1</div>
       <span style="margin-right: 30px">页</span> <span>共</span>
-      <div class="input-box" contenteditable></div>
+      <div class="input-box">{{ page }}</div>
       <span>页</span>
     </div>
-    <div v-if="!isWrite" class="num-box" style="padding-right: 114px">
+    <div v-show="!isWrite" class="num-box" style="padding-right: 114px">
       <span>第</span>
       <div class="input-box" contenteditable></div>
       <span>次</span>
@@ -19,7 +19,7 @@
 
     <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="container" v-show="!isWrite">
       <div class="line">
         <span>时间</span>
         <div class="write-line" contenteditable></div>
@@ -80,20 +80,17 @@
         <div class="write-line" style="" contenteditable></div>
         <span> ）。</span>
       </div>
-      <div class="more-line" @click="isWrite=true">
+      <div class="more-line" @click="goWrite" id="line-box">
+        <!-- <div class="more-line"> -->
         <!-- <textarea v-if="!downMode" v-model="text" name=""></textarea> -->
-        <div  class="downMode" v-html="text"></div>
+        <!-- <textarea v-model="text" name=""  id="line-box"></textarea> -->
+        <div class="downMode" v-html="text"></div>
         <div class="more-line-box">
-          <div class="item"></div>
-          <div class="item"></div>
-          <div class="item"></div>
-          <div class="item"></div>
-          <div class="item"></div>
-          <div class="item"></div>
+          <div class="item" v-for="(i, index) in 10"></div>
         </div>
       </div>
     </div>
-    <div class="bottom-name" v-if="!isWrite">
+    <div class="bottom-name" v-show="!isWrite">
       <span v-if="type == '1'">被询问人:</span>
       <span v-else>被讯问人:</span>
       <div style="flex: 1" contenteditable></div>
@@ -102,23 +99,52 @@
 </template>
 
 <script setup>
-import { reactive, ref, toRefs, onBeforeMount, onMounted, defineProps } from 'vue';
+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';
 const props = defineProps({
   downMode: {
     type: Boolean,
     default: false,
   },
+  text: {
+    type: String,
+    default: '',
+  },
+  page: {
+    type: Number,
+    default: 1,
+  },
 });
+const emits = defineEmits(['onTextConfirm', 'goWrite']);
 const isWrite = ref(false);
-const text = ref('');
+// 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 goWrite = () => {
+  let text = window.getSelection();
+  textIndex.value = text.anchorOffset;
+
+  // isWrite.value = true;
+  emits('goWrite', { textIndex: textIndex.value });
+};
+// const handlerBus = (data) => {
+//   console.error(data);
+//   textIndex.value = data.textIndex;
+//   isWrite.value = true;
+// };
+onMounted(() => {
+  // bus.on('goWrite', handlerBus);
+});
 </script>
 <style lang="scss" scoped>
 div[contenteditable] {
@@ -202,7 +228,8 @@ div[contenteditable] {
     }
     .more-line {
       width: 100%;
-      height: 240px;
+      // height: 240px;
+      height: 400px;
       line-height: 40px;
       position: relative;
       overflow-y: hidden;
@@ -250,7 +277,7 @@ div[contenteditable] {
         // z-index: 1;
         .item {
           width: 100%;
-          height: 16.6%;
+          height: 10%;
           border-bottom: 1px solid #000;
         }
       }

src/views/tables/index.vue

@@ -7,26 +7,27 @@
       </Header>
     </template>
 
-    <div class="mySwiper" v-if="loaded">
+    <div v-show="!isWrite" 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}`">
-            <component :downMode="downMode" :is="i"></component>
+          <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>
           </div>
         </div>
       </div>
     </div>
+    <Write v-if="isWrite" :text="text" :textIndex="textIndex" @onTextConfirm="onTextConfirm"> </Write>
   </MainPanel>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, onActivated, onDeactivated } from 'vue';
+import { reactive, ref, watch, onMounted, nextTick, onActivated, onDeactivated } from 'vue';
 import { router } from '@/router';
 import Swiper from 'swiper';
-import 'swiper/swiper.min.css';
 import html2canvas from 'html2canvas';
 import { downloadImage, uploadImage } from '@/store/sync';
 import { genUseLoading } from '@/hook';
+import Write from './write/index.vue';
 import Message from '@/components/base/components/message/message.vue';
 import Header from '@/components/photos/header.vue';
 import MainPanel from '@/components/main-panel/index.vue';
@@ -48,16 +49,49 @@ import extract from './extract.vue';
 import legacy from './legacy.vue';
 //询问、讯问
 import ask from './ask.vue';
+import doc from './write/doc.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([]);
 const headerTitle = ref('');
 const tableType = ref<string | string[]>();
 const downMode = ref(false);
+const askPage = ref(1);
+const askText = ref('');
+
+const isWrite = ref(false);
+const text = ref('');
+const textIndex = ref(0);
+
+const setAskPage = () => {
+  loaded.value = false;
+  eleList.value = [ask];
+  if (askPage.value > 1) {
+    for (let i = 0; i < askPage.value - 1; i++) {
+      eleList.value.push(doc);
+    }
+  }
+  initSwiper();
+};
+const goWrite = (data) => {
+  console.error(data)
+  isWrite.value = true;
+  textIndex.value = data.textIndex;
+};
+const onTextConfirm = (data) => {
+  console.error(data)
+  askPage.value = data.page;
+  text.value = data.text;
+  isWrite.value = false;
+  setAskPage();
+};
+const onTextChange = (data) => {
+  text.value = data.text;
+};
 
 const saveHandler = genUseLoading(async () => {
   await getLayoutImage();
@@ -72,9 +106,12 @@ const getLayoutImage = async () => {
     eleList.value.forEach(async (element, index) => {
       // console.error(layoutRef.value);
       let ele = document.getElementById(`layoutRef${index}`);
+
       const canvas = await html2canvas(ele);
       Message.success({ msg: '已保存至相册', time: 2000 });
-      const blob = await new Promise<Blob>((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.95));
+      const blob = await new Promise<Blob>((resolve) => {
+        return canvas.toBlob(resolve, 'image/jpeg', 0.95);
+      });
       await downloadImage(blob, `tables_${index}.jpg`);
       num++;
 
@@ -128,9 +165,10 @@ const initTables = () => {
 };
 const mySwiper = ref(null);
 const loaded = ref(false);
-onActivated(() => {
-  initTables();
-
+const initSwiper = () => {
+  if (mySwiper.value) {
+    mySwiper.value.destroy(true);
+  }
   loaded.value = true;
   mySwiper.value = null;
   nextTick(() => {
@@ -147,6 +185,10 @@ onActivated(() => {
       });
     }
   });
+};
+onActivated(() => {
+  initTables();
+  initSwiper();
 });
 const scale = ref('1');
 const initPage = () => {

src/views/tables/write/doc.vue

@@ -0,0 +1,138 @@
+<!--  -->
+<template>
+  <div class="num-box">
+    <span>第</span>
+    <div class="input-box">{{ pageIndex + 1 }}</div>
+    <span style="margin-right: 30px">页</span> <span>共</span>
+    <div class="input-box">{{ page }}</div>
+    <span>页</span>
+  </div>
+
+  <div class="write-box" id="view-container">
+    <div class="content" :style="`height:${inputHeight}px;`" @click="goWrite">
+      <!-- <div contenteditable v-html="text" :style="`height:${lineCount * 40}px;`" @keydown="hanlderWrite($event)" id="view-info"></div> -->
+      <div :style="`transform:translateY(${pageIndex == 1 ? -400 : -400 - (pageIndex - 1) * inputHeight}px);`" id="view-info" v-html="text"></div>
+      <div class="msg-box">{{ text }}</div>
+      <div class="item" :style="`top:${index * 40}px;`" v-for="(i, index) in lineCount"></div>
+    </div>
+  </div>
+
+  <div class="bottom-name">
+    <span v-if="type == '1'">被询问人:</span>
+    <span v-else>被讯问人:</span>
+    <div style="flex: 1" contenteditable></div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, defineProps, defineEmits } from 'vue';
+import { router } from '@/router';
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+  page: {
+    type: Number,
+    default: 1,
+  },
+  pageIndex: {
+    type: Number,
+    default: 1,
+  },
+});
+const emits = defineEmits(['goWrite']);
+const type = ref(router.currentRoute.value.query.type);
+const lineCount = ref(1);
+const inputHeight = ref(0);
+const getLineCount = () => {
+  let containerH = document.getElementById('view-container').clientHeight;
+  let count = Math.floor(containerH / 40);
+  lineCount.value = count;
+  inputHeight.value = count * 40;
+  // textAreaHeight.value = lineCount.value * 40;
+};
+
+const goWrite = () => {
+  let text = window.getSelection();
+  let textIndex = text.anchorOffset;
+  emits('goWrite', { textIndex });
+};
+
+onMounted(async () => {
+  await nextTick();
+  getLineCount();
+});
+</script>
+<style lang="scss" scoped>
+div[contenteditable] {
+  outline: none;
+}
+.bottom-name {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  margin: 28px auto 0;
+  display: flex;
+  font-size: 24px;
+}
+.num-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+
+  .input-box {
+    width: 64px;
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 1px solid #000;
+    text-align: center;
+    margin: 0 5px;
+  }
+}
+.write-box {
+  width: 100%;
+  // height: calc(100vh - 100px);
+  height: 1080px;
+
+  overflow: hidden;
+  .content {
+    overflow: hidden;
+    padding-bottom: 5px;
+    position: relative;
+    font-size: 24px;
+    .item {
+      width: 100%;
+      height: 40px;
+      border-bottom: 1px solid #000;
+      box-sizing: border-box;
+      position: absolute;
+      left: 0;
+    }
+    #view-info {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      // height: 100%;
+      line-height: 40px;
+      outline: none;
+      resize: none;
+      z-index: 2;
+      overflow: hidden;
+      white-space: pre-wrap;
+    }
+    .msg-box {
+      min-height: 40px;
+      white-space: pre-wrap;
+      opacity: 0;
+      position: absolute;
+      width: 100%;
+      line-height: 40px;
+      z-index: 1;
+    }
+  }
+}
+</style>

src/views/tables/write/index.vue

@@ -1,21 +1,35 @@
 <!--  -->
 <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 class="warpper">
+    <div class="write-box" id="container">
+      <div @click="onConfirm">确定</div>
+      <!--  -->
+      <div class="content" id="content" :style="`height:${inputHeight}px;`">
+        <!-- <div contenteditable v-html="text" :style="`height:${lineCount * 40}px;`" @keydown="hanlderWrite($event)" id="write-info"></div> -->
+        <textarea maxLength="1000" :style="`height:${lineCount * 40}px;`" @paste="onPaste" @keydown="hanlderWrite($event)" id="write-info" v-model="inputText"> </textarea>
+        <div id="msg" class="msg-box">{{ inputText }}</div>
+        <div class="item" :style="`top:${index * 40}px;`" v-for="(i, index) in lineCount"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick, defineEmits } from 'vue';
-const emits = defineEmits(['onConfirm']);
-const text = ref('');
+import { reactive, ref, toRefs, onBeforeMount, computed, onMounted, nextTick, defineEmits, defineProps } from 'vue';
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+  textIndex: {
+    type: Number,
+    default: 0,
+  },
+
+});
+const emits = defineEmits(['onTextConfirm', 'onTextChange']);
+const inputText = ref('');
 const lineCount = ref(1);
 const inputHeight = ref(0);
 const getLineCount = () => {
@@ -26,18 +40,26 @@ const getLineCount = () => {
   // textAreaHeight.value = lineCount.value * 40;
 };
 const onConfirm = () => {
-  emits('onConfirm', { text: text.value });
+  let page = 1;
+
+  if (msgHeight.value < 400) {
+    page = 1;
+  } else {
+    page = page + Math.ceil((msgHeight.value - 400) / 1080);
+  }
+  console.log(page);
+  emits('onTextConfirm', { text: inputText.value, msgHeight: msgHeight.value, page });
 };
-const textAreaHeight = ref(40);
+const msgHeight = ref(40);
 const hanlderWrite = (e) => {
   let msgH = document.getElementById('msg').clientHeight;
+  msgHeight.value = msgH;
   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) {
+    if (e && e.keyCode == 13) {
       msgCount++;
     }
 
@@ -46,19 +68,62 @@ const hanlderWrite = (e) => {
     lineCount.value = containerCount;
   }
 
+  emits('onTextChange', { text: inputText.value });
+
   // textAreaHeight.value = msgH;
 };
+const onPaste = (e) => {
+  setTimeout(() => {
+    // let msgH = document.getElementById('msg').clientHeight;
+    hanlderWrite(e);
+    let content = document.getElementById('content');
+    content.scrollTo(0, 9999999);
+  }, 100);
+};
+const setFocusAt = (focusIndex) => {
+  let txtarea = document.getElementById('write-info');
+  setCaretPosition(txtarea, focusIndex);
+};
+
+//设置光标位置
+const setCaretPosition = (ctrl, pos) => {
+  if (ctrl.setSelectionRange) {
+    ctrl.focus();
+    ctrl.setSelectionRange(pos, pos);
+  } else if (ctrl.createTextRange) {
+    var range = ctrl.createTextRange();
+    range.collapse(true);
+    range.moveEnd('character', pos);
+    range.moveStart('character', pos);
+    range.select();
+  }
+};
+
 onMounted(async () => {
   await nextTick();
   getLineCount();
+  inputText.value = props.text;
+  setTimeout(() => {
+    hanlderWrite();
+
+    if (props.text && props.textIndex) {
+      console.error(props.textIndex);
+      setFocusAt(props.textIndex);
+    }
+  }, 0);
 });
 </script>
 <style lang="scss" scoped>
+.warpper {
+  padding: 70px 50px 30px;
+}
 .write-box {
   width: 100%;
   height: calc(100vh - 100px);
-
+  font-size:24px;
+  color:#000;
   overflow: hidden;
+  font-family: sr, st;
   .content {
     overflow-y: auto;
     overflow-x: hidden;
@@ -83,6 +148,8 @@ onMounted(async () => {
       resize: none;
       z-index: 2;
       overflow: hidden;
+      font-size: 24px;
+      font-family: sr, st;
     }
     .msg-box {
       min-height: 40px;