vue2-client 1.8.125 → 1.8.126

package/CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
+**1.8.126 -2024-4-9 @江超**
+- 现在相同配置名的key不会重复发起请求了
+
 **1.8.124 - 1.8.125 -2024-4-1 @陈博晨**
 - 修复路由bug, 修复axios响应拦截器, 还原一些物采平台需要的组件
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.125",
+  "version": "1.8.126",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
@@ -31,9 +31,11 @@
     "enquire.js": "^2.1.6",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.7.0",
+    "html2canvas": "^1.4.1",
     "js-base64": "^3.7.5",
     "js-cookie": "^2.2.1",
     "jsencrypt": "^3.3.2",
+    "jspdf": "^2.5.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.get": "^4.4.2",
     "mockjs": "^1.1.0",

package/src/base-client/components/common/XReport/XReport.vue

@@ -1,128 +1,470 @@
-<template>
-  <div class="reportMain">
-    <h2 class="reportTitle" v-html="config.title"></h2>
-    <table class="reportTable">
-      <tbody>
-        <template v-for="(row, rowIndex) in config.columns">
-          <template v-if="row[0].type !== 'inputColumns'">
-            <tr :key="rowIndex">
-              <td v-for="(cell, cellIndex) in row" :key="cellIndex" :colspan="cell.colSpan ? cell.colSpan : undefined" :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
-                <template v-if="cell.type === 'column'">
-                  {{ cell.text }}
-                </template>
-                <template v-else-if="cell.type === 'value'">
-                  {{ cell.value }}
-                </template>
-                <template v-else-if="cell.type === 'input'">
-                  <a-input v-model="data[cell.dataIndex]" />
-                </template>
-                <template v-else-if="cell.type === 'inputs'">
-                  <a-input v-model="data[cell.dataIndex]" />
-                </template>
-              </td>
-            </tr>
-          </template>
-          <template v-else>
-            <tr v-for="(item, definitionIndex) in data[row[0].dataIndex]" :key="row[0].dataIndex + definitionIndex">
-              <td v-for="(cell, cellIndex) in row[0].definition" :key="cellIndex" :colspan="cell.colSpan ? cell.colSpan : undefined" :rowspan="cell.rowSpan ? cell.rowSpan : undefined">
-                <template v-if="cell.type === 'column'">
-                  {{ cell.text }}
-                </template>
-                <template v-else-if="cell.type === 'value'">
-                  {{ cell.value }}
-                </template>
-                <template v-else-if="cell.type === 'input'">
-                  <a-input v-model="data[row[0].dataIndex][definitionIndex][cell.dataIndex]" />
-                </template>
-                <template v-else-if="cell.type === 'inputs'">
-                  <a-input v-model="data[row[0].dataIndex][definitionIndex][cell.dataIndex]" />
-                </template>
-              </td>
-            </tr>
-            <tr :key="'dataAction' + rowIndex">
-              <td :colspan="maxColSpan">
-                <a-button-group>
-                  <a-button @click="addData(data[row[0].dataIndex])"><a-icon type="plus"/></a-button>
-                  <a-button @click="removeData(data[row[0].dataIndex])"><a-icon type="minus"/></a-button>
-                </a-button-group>
-              </td>
-            </tr>
-          </template>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'XReport',
-  props: {
-    config: {
-      type: Object,
-      required: true
-    }
-  },
-  data () {
-    return {
-      data: this.config.data,
-      maxColSpan: 12
-    }
-  },
-  methods: {
-    removeData (dataItem) {
-      if (dataItem.length === 0) {
-        this.$message.warn('已经没有更多了')
-        return
-      }
-      dataItem.pop()
-    },
-    addData (dataItem) {
-      dataItem.push({
-        no: '',
-        sort: '',
-        content: '',
-        finishTime: ''
-      })
-    }
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.reportMain {
-  width: 800px;
-  text-align: center;
-  margin: 0 auto;
-  font-size: 16px;
-  color: #000;
-  background-color: #fff;
-  padding: 15px;
-  border-radius: 8px;
-
-  .reportTitle {
-    font-weight: bold;
-  }
-
-  .reportTable {
-    width: 100%;
-    border-collapse: collapse;
-    table-layout:fixed;
-    word-break:break-all;
-  }
-
-  td {
-    border: 1px solid #000;
-    padding: 8px;
-  }
-
-  input {
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  .innerTable {
-    width: 784px;
-  }
-}
-</style>
+<template>
+  <div>
+    <!--  用以包裹整个页面  -->
+    <a-card>
+      <!--   切换菜单   -->
+      <a-radio-group v-model="type" default-value="a" button-style="solid" @change="tabChanged">
+        <a-radio-button value="design">
+          设计
+        </a-radio-button>
+        <a-radio-button value="display">
+          预览
+        </a-radio-button>
+      </a-radio-group>
+      <!--   主体表格   -->
+      <XReportDesign
+        v-if="scanFinish"
+        :config="type === 'display' ? originalConfig : activeConfig"
+        :slot-config-name="type === 'display' ? undefined : activatedSlotName"
+        :for-display="type === 'display'"
+        id="printReady">
+      </XReportDesign>
+      <!--   导出按钮   -->
+      <template v-if="type === 'display'">
+        <div class="tools">
+          <div class="toolsItem" @click="exportPDF">
+            <a-button type="primary">
+              导出PDF
+            </a-button>
+          </div>
+        </div>
+      </template>
+    </a-card>
+  </div>
+</template>
+
+<script>
+// 转PDF用
+import HtmlToPdf from '@vue2-client/utils/htmlToPDF'
+import { getConfigByName } from '@vue2-client/services/api/common'
+import XReportDesign from '@vue2-client/base-client/components/common/XReport/XReportDesign.vue'
+
+export default {
+  name: 'XReport',
+  props: {
+    configName: {
+      type: String,
+      required: true
+    },
+    activatedSlotName: {
+      type: String,
+      default: undefined
+    }
+  },
+  components: {
+    XReportDesign
+  },
+  data () {
+    return {
+      config: undefined,
+      type: 'design',
+      maxColSpan: 12,
+      // 定义是否完成配置的扫描，未完成不要渲染子组件
+      scanFinish: false,
+      // 当前激活的配置文件
+      activeConfig: null,
+      // 原始配置文件
+      // 用于展示。某些情况下“设计页”中的内容仅为“预览页”表格其中的一部分
+      originalConfig: null,
+      // 扫描到的配置
+      configFromWeb: {},
+      timer: undefined
+    }
+  },
+  methods: {
+    // 检查slot是否在配置文件中包含，如果没有包含，则视为非法获取
+    checkSlotDefine (config) {
+      const slotsDeclare = config.slotsDeclare
+      const total = slotsDeclare.length
+      let count = 0
+      slotsDeclare.forEach(declare => {
+        config.columns.forEach(row => {
+          row.forEach(cell => {
+            if (cell.slotConfig === declare) {
+              count++
+            }
+          })
+        })
+      })
+
+      return count === total
+    },
+    // 切换了标签页
+    tabChanged (key) {
+      this.scanFinish = false
+      this.originalConfig.data = { ...this.originalConfig.data, ...this.config.data }
+      this.config.data = this.originalConfig.data
+      this.$nextTick(() => {
+        this.scanFinish = true
+      })
+    },
+    // 获取当前日期，为保存文件命名用
+    getDate () {
+      const currentDate = new Date()
+
+      const year = currentDate.getFullYear()
+      const month = String(currentDate.getMonth() + 1).padStart(2, '0')
+      const day = String(currentDate.getDate()).padStart(2, '0')
+
+      const formattedDate = `${year}_${month}_${day}`
+
+      return formattedDate
+    },
+    // 导出PDF
+    exportPDF () {
+      const date = this.getDate()
+      let title = this.config.title
+      title = title.replace(/<[^>]+>/g, '')
+      const fileName = date + '' + title
+      HtmlToPdf.getPdf(fileName, '#printReady')
+    },
+    // 用于分割配置中的colums，将需要处理的数组提取出来
+    formatConfigRow () {
+      for (let i = 0; i < this.config.columns.length; i++) {
+        // 对原始数组进行递归，依次将该位置拆分为三个部分，当前处理位置之前的，当前处理位置，当前处理位置之后的
+        const before = this.config.columns.slice(0, i)
+        const after = this.config.columns.slice(i + 1, this.config.columns.length)
+
+        // 将当前处理的数组交给处理的方法
+        const x = this.checkRow(this.config.columns[i])
+
+        const newArr = []
+
+        // 拼接之前的数组
+        if (before.length > 0) {
+          if (before.length >= 1) {
+            before.forEach(item => {
+              newArr.push(item)
+            })
+          } else {
+            newArr.push(before)
+          }
+        }
+
+        // 拼接不需要更改当前节点处理完成的数组
+        newArr.push(x.old)
+
+        // 如果处理了新加的数据，拼接
+        if (x.add.length > 0) {
+          for (let j = 0; j < x.add.length; j++) {
+            if (x.add[j]) {
+              newArr.push(x.add[j])
+              i++
+            }
+          }
+        }
+
+        // 拼接之后的数组
+        if (after.length > 0) {
+          if (after.length >= 1) {
+            after.forEach(item => {
+              newArr.push(item)
+            })
+          } else {
+            newArr.push(after)
+          }
+        }
+
+        this.config.columns = newArr
+      }
+    },
+    // 处理colums数组，为声明了rowspan的单元格，自动匹配格式
+    checkRow (rowArr) {
+      // 不需要更改的数据
+      const original = []
+      // 需要更改新加的数据
+      const addArr = []
+      // 统计rowspan出现的总和
+      let count = 0
+      // 统计声明列需要的rowspan总数
+      let total = 0
+      // 是否为声明行
+      let titleCellFlag = false
+      // 是否为声明行后第一行
+      let firstSubLine = false
+      // 需要处理的行，新的index值
+      let subRowIndex = 0
+      // 新生成的行，临时存储
+      const waitForAddArr = []
+      // 用于记录声明行的colspan避免格式错误
+      let preColSpan = 0
+      // 用于统计循环次数，判断是否是最后一次
+      let forEachCount = 0
+
+      // 标记所有数据
+      rowArr.forEach(cell => {
+        forEachCount++
+        // 如果该行没有rowspan则默认其为1，不要影响统计结果
+        if (!cell.rowSpan) {
+          cell.rowSpan = 0
+        }
+
+        if (cell.text && total !== 0) { // 如果遇到了下一个声明行，证明rowspan少了一行，需要补充一个占位格
+          const nullObj = { type: 'placeHolderColumn', order: subRowIndex, noBoarder: true, needSplit: true, colSpan: preColSpan, dontShowRow: true }
+          subRowIndex++
+          waitForAddArr.push(nullObj)
+          total = 0
+          count = 0
+          titleCellFlag = false
+          firstSubLine = false
+        } else if ((total !== count + cell.rowSpan) && forEachCount === rowArr.length) {
+          // 如果没有遇到了下一个声明行，但已经是当前行最后一个数据，也证明rowspan少了一行，需要补充一个占位格
+          const nullObj = { type: 'placeHolderColumn', order: subRowIndex, noBoarder: true, needSplit: true, colSpan: preColSpan, dontShowRow: true }
+          subRowIndex++
+          waitForAddArr.push(nullObj)
+          total = 0
+          count = 0
+          titleCellFlag = false
+          firstSubLine = false
+        }
+
+        // 判断是否为声明行
+        if (cell.text && total === 0) {
+          // 将声明行声明的rowspan作为总数，判断下方rowspan相加是否等于声明行声明的数量
+          total = cell.rowSpan
+          titleCellFlag = false
+          firstSubLine = true
+          subRowIndex = 1
+          cell.show = true
+          cell.showRowSpan = total
+        } else if (cell.rowSpan > 0 && !titleCellFlag && firstSubLine) { // 判断是否为声明行后首行，因为首行不需要移动
+          count += cell.rowSpan
+          firstSubLine = false
+          cell.noBoarder = true
+          cell.show = true
+          cell.showRowSpan = total
+        } else if (cell.rowSpan > 0 && !titleCellFlag && !firstSubLine) { // 既非声明行，也非首行，需要移动
+          count += cell.rowSpan
+          // cell.type = 'notShow'
+          cell.needSplit = true
+          cell.order = subRowIndex
+          cell.dontShowRow = true
+          subRowIndex++
+
+          // 如果之前添加过空行补充位置，刚好最后一位还有内容，将其互换
+          if (forEachCount === rowArr.length && !waitForAddArr[waitForAddArr.length - 1].dataIndex) {
+            waitForAddArr[waitForAddArr.length - 1].order += 1
+            cell.order -= 1
+            waitForAddArr.push(cell)
+          } else {
+            waitForAddArr.push(cell)
+          }
+        }
+
+        // 如果count和total相等了，证明已经处理完成。将计数器还原
+        if (count === total) {
+          total = 0
+          count = 0
+          titleCellFlag = false
+          firstSubLine = false
+        }
+        // 保存上一个的colspan，保持生成的格子与原格式一致
+        preColSpan = cell.colSpan
+      })
+
+      // 将所有不需要移动的放入original
+      rowArr.forEach(cell => {
+        if (cell.needSplit !== true) {
+          original.push(cell)
+        }
+      })
+
+      // 增加新的数组
+      waitForAddArr.forEach(cell => {
+        const target = cell.order
+        // if (cell.type === 'notShow') {
+        //   cell.type = 'inputs'
+        // }
+        cell.noBoarder = true
+        if (addArr[target] === undefined) {
+          const temp = []
+          temp.push(cell)
+          addArr[target] = temp
+        } else if (addArr[target].length > 0) {
+          addArr[target].push(cell)
+        }
+      })
+
+      // 如果没有新增，将单元格边框设置为显示
+      if (addArr.length < 1) {
+        original.forEach(cell => {
+          if (cell.type === 'input' || cell.type === 'inputs') {
+            cell.noBoarder = false
+          }
+        })
+      }
+
+      return {
+        old: original,
+        add: addArr
+      }
+    },
+    // 扫描配置，如果有插槽则拼接插槽
+    scanConfigSlot (config) {
+      const columnsArr = config.columns
+      for (let i = 0; i < columnsArr.length; i++) {
+        for (let j = 0; j < columnsArr[i].length; j++) {
+          // 如果发现type为slot，开始匹配对应的slot配置文件
+          if (columnsArr[i][j].type === 'slot') {
+            const targetName = columnsArr[i][j].slotConfig
+            // 找不到目标插槽配置
+            if (!this.configFromWeb[targetName] || !this.configFromWeb[targetName].columns) {
+              console.error('无法找到目标插槽的配置！')
+              return
+            }
+
+            // 替换columns，合并data
+            config.columns[i] = []
+            const before = config.columns.slice(0, i)
+            const after = config.columns.slice(i + 1, config.columns.length)
+
+            const addArr = []
+            for (let k = 0; k < this.configFromWeb[targetName].columns.length; k++) {
+              const temp = []
+              this.configFromWeb[targetName].columns[k].forEach(cell => {
+                temp.push(cell)
+              })
+              addArr.push(temp)
+            }
+
+            const newArr = []
+            // 拼接之前的数组
+            if (before.length > 0) {
+              if (before.length >= 1) {
+                before.forEach(item => {
+                  newArr.push(item)
+                })
+              } else {
+                newArr.push(before)
+              }
+            }
+
+            addArr.forEach(arr => {
+              newArr.push(arr)
+            })
+
+            // 拼接之后的数组
+            if (after.length > 0) {
+              if (after.length >= 1) {
+                after.forEach(item => {
+                  newArr.push(item)
+                })
+              } else {
+                newArr.push(after)
+              }
+            }
+
+            config.columns = newArr
+            if (this.configFromWeb[targetName].slotsDeclare) {
+              config.slotsDeclare = this.configFromWeb[targetName].slotsDeclare
+            } else {
+              config.slotsDeclare = []
+            }
+
+            config.data = { ...config.data, ...this.configFromWeb[targetName].data }
+            this.configFromWeb = {}
+          }
+        }
+      }
+      this.config = config
+    },
+    // 扫描所有插槽名
+    scanConfigName (config, resut) {
+      if (config.slotsDeclare) {
+        config.slotsDeclare.forEach(name => {
+          resut.push(name)
+        })
+      }
+    },
+    // 获取插槽
+    getConfigAndJoin (config, outerLock) {
+      // 检查主配置插槽声明是否合法
+      const check = this.checkSlotDefine(config)
+      const waitForDownloadSlotName = []
+      if (check) {
+        // 扫描主配置中声明的插槽名
+        this.scanConfigName(config, waitForDownloadSlotName)
+
+        const total = waitForDownloadSlotName.length
+        let count = 0
+
+        // 挨个获取插槽
+        waitForDownloadSlotName.forEach(configName => {
+          getConfigByName(configName, undefined, res => {
+            this.configFromWeb[configName] = res
+            count++
+          })
+        })
+
+        const timer = setInterval(() => {
+          console.log('插槽下载进度，当前：' + count + '/' + total)
+          if (count >= total) {
+            clearInterval(timer)
+            this.scanConfigSlot(config)
+            if (config.slotsDeclare.length > 0) {
+              const lock = { status: true }
+              this.getConfigAndJoin(config, lock)
+              const innerTimer = setInterval(() => {
+                if (!lock.status) {
+                  clearInterval(innerTimer)
+                  outerLock.status = false
+                }
+              }, 100)
+            } else {
+              outerLock.status = false
+            }
+          }
+        }, 100)
+      } else {
+        console.error('插槽配置有误！')
+        outerLock.status = false
+      }
+    }
+  },
+  beforeMount () {
+    // 获取主配置
+    getConfigByName(this.configName, undefined, res => {
+      this.config = res
+
+      const lock = { status: true }
+
+      this.getConfigAndJoin(this.config, lock)
+
+      this.timer = setInterval(() => {
+        if (!lock.status) {
+          clearInterval(this.timer)
+          console.log('拼接完成', this.config)
+          this.originalConfig = Object.assign({}, this.config)
+          // 扫描配置文件中有没有rowSpan，进行格式化调整
+          this.formatConfigRow(this.config)
+          this.activeConfig = this.config
+          this.$nextTick(() => {
+            this.scanFinish = true
+          })
+        }
+      }, 100)
+
+      // setTimeout(() => {
+      //   console.log('拼接完成', this.config)
+      //   this.originalConfig = Object.assign({}, this.config)
+      //   // 扫描配置文件中有没有rowSpan，进行格式化调整
+      //   this.formatConfigRow(this.config)
+      //   this.activeConfig = this.config
+      //   this.$nextTick(() => {
+      //     this.scanFinish = true
+      //   })
+      // }, 1000)
+    })
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tools{
+  text-align: center;
+  cursor: pointer;
+  .toolsItem{
+    display: inline-block;
+  }
+}
+</style>