askbot-dragon 1.7.84-beta → 1.7.86-beta

package/src/components/preview/docView.vue

@@ -1,114 +1,124 @@
-<template>
-  <div class="docView">
-    <div class="docHtml"
-         ref="docHtml"
-         v-html="html"
-         @click="selectDiv"
-    >
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "docView",
-  data(){
-    return{
-      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
-      html:"",
-    }
-  },
-  props:{
-    html_result:{
-      type:String,
-      default:""
-    },
-    split_paragraphs:{
-      type:Array,
-      default(){
-        return []
-      }
-    },
-    fileSuffix:{
-      type:String,
-      default:""
-    }
-  },
-  methods:{
-    selectDiv(e){
-      this.$emit('selectDiv',e)
-    },
-    getHtml(){
-      // let url = 'https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/123/2024/12/09/14/18/17/123/%E5%85%AC%E5%8F%B8%E5%91%98%E5%B7%A5%E6%89%8B%E5%86%8C_1733725097.html'
-      let url = this.html_result
-      this.$http.get(url).then(res => {
-        this.html = res.data;
-        let drawer = document.getElementById('drawer_content_pre')
-        if (drawer){
-          drawer.style.backgroundImage = 'none';
-          drawer.style.overflowX = 'hidden'
-        }
-        this.$nextTick(() => {
-          this.setColor()
-        })
-      })
-    },
-    setColor(){
-      this.split_paragraphs.forEach((item,index) => {
-        const colorIndex = index % this.colors.length;
-        if (item.original_paragraph){
-          item.original_paragraph.forEach(items => {
-            let dom = document.getElementById(items.paragraph_id);
-            if (this.fileSuffix === 'TXT'){
-              const paragraphs = this.$el.querySelectorAll(`[paragraph-id="${items.paragraph_id}"]`);
-              paragraphs.forEach(paragraph => {
-                paragraph.style.background = this.colors[colorIndex]
-              })
-            } else if (dom){
-              dom.style.background = this.colors[colorIndex];
-            }
-          })
-          let newOriginal = item.original_paragraph.filter(items => !items.type)
-          let dom = document.getElementById(newOriginal[newOriginal.length - 1].paragraph_id);
-          if (dom){
-            dom.style.marginBottom = '8px';
-          }
-        }
-        if (item.tableId){
-          let dom = document.getElementById(item.tableId);
-          if (dom){
-            dom.style.backgroundColor = this.colors[colorIndex]
-          }
-        }
-      })
-      setTimeout(() => {
-        this.$parent.scrollToParagraph('first')
-      },500)
-    },
-  },
-  watch:{
-    html_result:{
-      handler(){
-        if (this.html_result){
-          this.getHtml();
-        }
-      },
-      immediate:true
-    }
-  }
-};
-</script>
-
-<style scoped lang="less">
-.docView{
-  width: 100%;
-  flex: none;
-  box-sizing: border-box;
-  div{
-    position: relative;
-  }
-  /deep/img{
-    max-width: 100%;
-  }
-}
+<template>
+  <div class="docView" id="docView">
+    <div class="docHtml"
+         ref="docHtml"
+         v-html="html"
+         @click="selectDiv"
+    >
+    </div>
+  </div>
+</template>
+
+<script>
+import { newInitWaterMark } from "../../assets/js/common";
+
+export default {
+  name: "docView",
+  data(){
+    return{
+      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
+      html:"",
+    }
+  },
+  props:{
+    html_result:{
+      type:String,
+      default:""
+    },
+    split_paragraphs:{
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    fileSuffix:{
+      type:String,
+      default:""
+    },
+    textWatermarkStr:{
+      type:String,
+      default:""
+    }
+  },
+  methods:{
+    selectDiv(e){
+      this.$emit('selectDiv',e)
+    },
+    getHtml(){
+      // let url = 'https://guoranwisdom.oss-cn-zhangjiakou.aliyuncs.com/123/2024/12/09/14/18/17/123/%E5%85%AC%E5%8F%B8%E5%91%98%E5%B7%A5%E6%89%8B%E5%86%8C_1733725097.html'
+      let url = this.html_result
+      this.$http.get(url).then(res => {
+        this.html = res.data;
+        let drawer = document.getElementById('drawer_content_pre')
+        if (drawer){
+          drawer.style.backgroundImage = 'none';
+          drawer.style.overflowX = 'hidden';
+          drawer.style.position ='relative'
+        }
+        this.$nextTick(() => {
+          this.setColor();
+          if (this.textWatermarkStr){
+            newInitWaterMark('drawer_content_pre',this.textWatermarkStr)
+          }
+        })
+      })
+    },
+    setColor(){
+      this.split_paragraphs.forEach((item,index) => {
+        const colorIndex = index % this.colors.length;
+        if (item.original_paragraph){
+          item.original_paragraph.forEach(items => {
+            let dom = document.getElementById(items.paragraph_id);
+            if (this.fileSuffix === 'TXT'){
+              const paragraphs = this.$el.querySelectorAll(`[paragraph-id="${items.paragraph_id}"]`);
+              paragraphs.forEach(paragraph => {
+                paragraph.style.background = this.colors[colorIndex]
+              })
+            } else if (dom){
+              dom.style.background = this.colors[colorIndex];
+            }
+          })
+          let newOriginal = item.original_paragraph.filter(items => !items.type)
+          let dom = document.getElementById(newOriginal[newOriginal.length - 1].paragraph_id);
+          if (dom){
+            dom.style.marginBottom = '8px';
+          }
+        }
+        if (item.tableId){
+          let dom = document.getElementById(item.tableId);
+          if (dom){
+            dom.style.backgroundColor = this.colors[colorIndex]
+          }
+        }
+      })
+      setTimeout(() => {
+        this.$parent.scrollToParagraph('first')
+      },500)
+    },
+  },
+  watch:{
+    html_result:{
+      handler(){
+        if (this.html_result){
+          this.getHtml();
+        }
+      },
+      immediate:true
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.docView{
+  width: 100%;
+  flex: none;
+  box-sizing: border-box;
+  div{
+    position: relative;
+  }
+  /deep/img{
+    max-width: 100%;
+  }
+}
 </style>

package/src/components/preview/excelView.vue

@@ -1,199 +1,211 @@
-<template>
-  <div class="excelView">
-    <table border="1" v-if="false">
-      <thead>
-      <tr>
-        <th v-for="(person2,index2) in headerArray" :key="index2">{{person2}}</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr v-for="(person, index) in rowDataList" :key="index" :id="person.id">
-        <td v-for="(person2,index2) in headerArray" :key="index2">
-          {{person[person2]}}
-        </td>
-      </tr>
-      </tbody>
-    </table>
-    <el-table
-        :data="pagedData"
-        border
-        ref="table"
-        :row-key="getRowKey"
-        :row-class-name="tableRowClassName"
-        height="100%"
-        style="width: 100%">
-      <template v-for="(item,index) in headerArray">
-        <el-table-column
-            :label="item"
-            :key="index"
-            min-width="100">
-          <template slot-scope="scope">
-            {{scope.row[item]}}
-          </template>
-        </el-table-column>
-      </template>
-    </el-table>
-    <pagination-page :pageSize="pageSize" :currentPage="currentPage" :total="rowDataList.length" @currentChange="handleCurrentChange"></pagination-page>
-  </div>
-</template>
-
-<script>
-
-import PaginationPage from "../pagination";
-export default {
-  name: "excelView",
-  components: { PaginationPage },
-  data(){
-    return{
-      rowData:[
-        {
-          "row_id": "659164be-19bd-4fd7-a47d-b04c3dbbfa6f",
-          "row_data_md": "| 王明宇 | 27 | 189 |",
-          "row_number": 2,
-          "table_html": "<table border='1' style='border-collapse:collapse;'><thead><tr><th>姓名1</th><th>年龄</th><th>身高</th></tr></thead><tbody><tr><td>王明宇</td><td>27</td><td>189</td></tr></tbody></table>"
-        },
-        {
-          "row_id": "fac98d6a-2580-4f62-8f50-61521debeeef",
-          "row_data_md": "| 老王 | 38 | 178 |",
-          "row_number": 3,
-          "table_html": "<table border='1' style='border-collapse:collapse;'><thead><tr><th>姓名1</th><th>年龄</th><th>身高</th></tr></thead><tbody><tr><td>老王</td><td>38</td><td>178</td></tr></tbody></table>"
-        },
-      ],
-      rowDataList:[],
-      headerArray:[],
-      currentPage:1,
-      pageSize:20,
-      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
-    }
-  },
-  props:{
-    headerData:{
-      type:String,
-      default:""
-    },
-    excelRowList:{
-      type:Array,
-      default(){
-        return []
-      }
-    },
-    tableChunkData:{
-      type:Array,
-      default(){
-        return [{
-          "sheet_name": null,
-          "table_md": null,
-          "tableChunkText": "| 序号 | 电子色片 | 旧色号 | 颜色名称 | R68-Y32 17w77b06c L32-1 | 新 | 色卡页码 | -ICN色号 | R | G | B | C | M | Y | | 154 | 22 | B99-G01 81w11b08c L88-4 | OW060-4 |  | 雪蓝 | 蓝色系 | 210 | 218 | 223 | 5.5761039841401502E-2 | 2.08606534553369E-2 | 0 | 0.12603452469972801 |",
-          "tableChunkId": "5e80ff30-ea7e-4c47-878b-59d9b1c833ce",
-          "tableId": null
-        }]
-      }
-    }
-  },
-  computed:{
-    pagedData() {
-      const start = (this.currentPage - 1) * this.pageSize;
-      const end = start + this.pageSize;
-      return this.rowDataList.slice(start, end);
-    }
-  },
-  methods:{
-    tableRowData(){
-      const headerString = this.headerData.trim().replace(/^\||\|$/g, '');
-
-      // 使用竖线作为分隔符来分割字符串
-      const headerArray = headerString.split('|').map(item => item.trim());
-      this.headerArray = headerArray
-      for (let i =0;i<this.excelRowList.length;i++){
-        // 去除字符串两端的竖线（如果它们存在的话）
-        const trimmedString = this.excelRowList[i].row_data_md.trim().replace(/^\||\|$/g, '');
-
-        // 使用竖线作为分隔符来分割字符串
-        const resultArray = trimmedString.split('|').map(item => item.trim());
-        let obj = {}
-        for (let j=0;j<headerArray.length;j++){
-          this.$set(obj,headerArray[j],resultArray[j])
-          this.$set(obj,'id',this.excelRowList[i].row_id)
-        }
-        this.rowDataList.push(obj);
-      }
-      this.$nextTick(() => {
-        this.setRowColor('first');
-      })
-    },
-    getRowKey(row){
-      return row.id
-    },
-    setRowColor(type){
-      this.tableChunkData.forEach((item,index) => {
-        const colorIndex = index % this.colors.length;
-        let id = item.tableChunkId;
-        let dom = document.getElementsByClassName('setBgClass' + id);
-        if (dom && dom.length > 0){
-          let newDom = Array.from(dom)
-          newDom.forEach(doms => {
-            doms.style.backgroundColor = this.colors[colorIndex];
-          })
-        }
-      })
-      this.$nextTick(() => {
-        if (this.tableChunkData.length > 0 && type === 'first'){
-          this.scrollToRow(this.tableChunkData[0].tableChunkId)
-        }
-      })
-    },
-    tableRowClassName({ row }){
-      let id = this.tableChunkData.filter(item => item.tableChunkId == row.id);
-      if (id && id.length > 0){
-        return 'setBgClass' + id[0].tableChunkId
-      }
-    },
-    scrollToRow(rowId) {
-      this.$nextTick(() => {
-        // const row = this.rowDataList.find(row => row.id === rowId);
-        const rowIndex = this.rowDataList.findIndex(row => row.id === rowId);
-        let index = Math.ceil(rowIndex / 20)
-        if (index > 0){
-          this.currentPage = index;
-        }
-        setTimeout(() => {
-          let dom = document.getElementsByClassName('setBgClass' + rowId);
-          if (dom && dom.length > 0){
-            let newDom = Array.from(dom)
-            newDom.forEach(doms => {
-              doms.style.backgroundColor = this.colors[0];
-            })
-            const bodyWrapper = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
-            const targetRow = this.$refs.table.$el.querySelector('.setBgClass' + rowId); // 获取目标行元素
-            const targetHeight = targetRow.offsetTop; // 目标行的高度（从上到下的距离）
-            bodyWrapper.scroll({
-              top:targetHeight,
-              behavior:"smooth"
-            }); // 滚动到目标行位置
-
-            // newDom[0].scrollIntoView({ behavior: "smooth"})
-          }
-        },800)
-      });
-    },
-    handleCurrentChange(val){
-      this.currentPage = val;
-      this.$nextTick(() => {
-        this.setRowColor();
-      })
-    }
-  },
-  mounted() {
-    this.tableRowData();
-  }
-};
-</script>
-
-<style scoped lang="less">
-.excelView{
-  height: 100%;
-  /deep/.setBgClass{
-    background-color: #E3EBFF!important;
-  }
-}
+<template>
+  <div class="excelView" id="excelView">
+    <table border="1" v-if="false">
+      <thead>
+      <tr>
+        <th v-for="(person2,index2) in headerArray" :key="index2">{{person2}}</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="(person, index) in rowDataList" :key="index" :id="person.id">
+        <td v-for="(person2,index2) in headerArray" :key="index2">
+          {{person[person2]}}
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <el-table
+        :data="pagedData"
+        border
+        ref="table"
+        :row-key="getRowKey"
+        :row-class-name="tableRowClassName"
+        height="100%"
+        style="width: 100%">
+      <template v-for="(item,index) in headerArray">
+        <el-table-column
+            :label="item"
+            :key="index"
+            min-width="100">
+          <template slot-scope="scope">
+            {{scope.row[item]}}
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+    <pagination-page :pageSize="pageSize" :currentPage="currentPage" :total="rowDataList.length" @currentChange="handleCurrentChange"></pagination-page>
+  </div>
+</template>
+
+<script>
+
+import PaginationPage from "../pagination";
+import { newInitWaterMark } from "../../assets/js/common";
+export default {
+  name: "excelView",
+  components: { PaginationPage },
+  data(){
+    return{
+      rowData:[
+        {
+          "row_id": "659164be-19bd-4fd7-a47d-b04c3dbbfa6f",
+          "row_data_md": "| 王明宇 | 27 | 189 |",
+          "row_number": 2,
+          "table_html": "<table border='1' style='border-collapse:collapse;'><thead><tr><th>姓名1</th><th>年龄</th><th>身高</th></tr></thead><tbody><tr><td>王明宇</td><td>27</td><td>189</td></tr></tbody></table>"
+        },
+        {
+          "row_id": "fac98d6a-2580-4f62-8f50-61521debeeef",
+          "row_data_md": "| 老王 | 38 | 178 |",
+          "row_number": 3,
+          "table_html": "<table border='1' style='border-collapse:collapse;'><thead><tr><th>姓名1</th><th>年龄</th><th>身高</th></tr></thead><tbody><tr><td>老王</td><td>38</td><td>178</td></tr></tbody></table>"
+        },
+      ],
+      rowDataList:[],
+      headerArray:[],
+      currentPage:1,
+      pageSize:20,
+      colors: ['#E3EBFF', '#FFF5DC', '#FFE8D8','#D6F3EA','#FFF1C3'],
+    }
+  },
+  props:{
+    headerData:{
+      type:String,
+      default:""
+    },
+    excelRowList:{
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    tableChunkData:{
+      type:Array,
+      default(){
+        return [{
+          "sheet_name": null,
+          "table_md": null,
+          "tableChunkText": "| 序号 | 电子色片 | 旧色号 | 颜色名称 | R68-Y32 17w77b06c L32-1 | 新 | 色卡页码 | -ICN色号 | R | G | B | C | M | Y | | 154 | 22 | B99-G01 81w11b08c L88-4 | OW060-4 |  | 雪蓝 | 蓝色系 | 210 | 218 | 223 | 5.5761039841401502E-2 | 2.08606534553369E-2 | 0 | 0.12603452469972801 |",
+          "tableChunkId": "5e80ff30-ea7e-4c47-878b-59d9b1c833ce",
+          "tableId": null
+        }]
+      }
+    },
+    textWatermarkStr:{
+      type:String,
+      default:""
+    }
+  },
+  computed:{
+    pagedData() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.rowDataList.slice(start, end);
+    }
+  },
+  methods:{
+    tableRowData(){
+      const headerString = this.headerData.trim().replace(/^\||\|$/g, '');
+
+      // 使用竖线作为分隔符来分割字符串
+      const headerArray = headerString.split('|').map(item => item.trim());
+      this.headerArray = headerArray
+      for (let i =0;i<this.excelRowList.length;i++){
+        // 去除字符串两端的竖线（如果它们存在的话）
+        const trimmedString = this.excelRowList[i].row_data_md.trim().replace(/^\||\|$/g, '');
+
+        // 使用竖线作为分隔符来分割字符串
+        const resultArray = trimmedString.split('|').map(item => item.trim());
+        let obj = {}
+        for (let j=0;j<headerArray.length;j++){
+          this.$set(obj,headerArray[j],resultArray[j])
+          this.$set(obj,'id',this.excelRowList[i].row_id)
+        }
+        this.rowDataList.push(obj);
+      }
+      this.$nextTick(() => {
+        this.setRowColor('first');
+      })
+    },
+    getRowKey(row){
+      return row.id
+    },
+    setRowColor(type){
+      this.tableChunkData.forEach((item,index) => {
+        const colorIndex = index % this.colors.length;
+        let id = item.tableChunkId;
+        let dom = document.getElementsByClassName('setBgClass' + id);
+        if (dom && dom.length > 0){
+          let newDom = Array.from(dom)
+          newDom.forEach(doms => {
+            doms.style.backgroundColor = this.colors[colorIndex];
+          })
+        }
+      })
+      this.$nextTick(() => {
+        if (this.tableChunkData.length > 0 && type === 'first'){
+          this.scrollToRow(this.tableChunkData[0].tableChunkId)
+          let drawer = document.getElementById('drawer_content_pre')
+          if (drawer){
+            drawer.style.position ='relative'
+          }
+          if (this.textWatermarkStr){
+            newInitWaterMark('drawer_content_pre',this.textWatermarkStr)
+          }
+        }
+      })
+    },
+    tableRowClassName({ row }){
+      let id = this.tableChunkData.filter(item => item.tableChunkId == row.id);
+      if (id && id.length > 0){
+        return 'setBgClass' + id[0].tableChunkId
+      }
+    },
+    scrollToRow(rowId) {
+      this.$nextTick(() => {
+        // const row = this.rowDataList.find(row => row.id === rowId);
+        const rowIndex = this.rowDataList.findIndex(row => row.id === rowId);
+        let index = Math.ceil(rowIndex / 20)
+        if (index > 0){
+          this.currentPage = index;
+        }
+        setTimeout(() => {
+          let dom = document.getElementsByClassName('setBgClass' + rowId);
+          if (dom && dom.length > 0){
+            let newDom = Array.from(dom)
+            newDom.forEach(doms => {
+              doms.style.backgroundColor = this.colors[0];
+            })
+            const bodyWrapper = this.$refs.table.$el.querySelector('.el-table__body-wrapper');
+            const targetRow = this.$refs.table.$el.querySelector('.setBgClass' + rowId); // 获取目标行元素
+            const targetHeight = targetRow.offsetTop; // 目标行的高度（从上到下的距离）
+            bodyWrapper.scroll({
+              top:targetHeight,
+              behavior:"smooth"
+            }); // 滚动到目标行位置
+
+            // newDom[0].scrollIntoView({ behavior: "smooth"})
+          }
+        },800)
+      });
+    },
+    handleCurrentChange(val){
+      this.currentPage = val;
+      this.$nextTick(() => {
+        this.setRowColor();
+      })
+    }
+  },
+  mounted() {
+    this.tableRowData();
+  }
+};
+</script>
+
+<style scoped lang="less">
+.excelView{
+  height: 100%;
+  /deep/.setBgClass{
+    background-color: #E3EBFF!important;
+  }
+}
 </style>