askbot-dragon 1.7.65-beta → 1.7.67-beta

package/src/components/preview/excelView.vue

@@ -1,191 +1,191 @@
-<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];
-            })
-            newDom[0].scrollIntoView({ behavior: "smooth"})
-          }
-        },500)
-      });
-    },
-    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">
+    <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];
+            })
+            newDom[0].scrollIntoView({ behavior: "smooth"})
+          }
+        },500)
+      });
+    },
+    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>