feat：新增表格表尾列，用于合计

src/components/panel/index.vue

@@ -13,13 +13,19 @@
         </template>
         <appearance class="pd-l-10" />
       </el-collapse-item>
-      <el-collapse-item name="3">
+      <el-collapse-item name="3" v-if="isTable">
+        <template slot="title">
+          <span>表尾列设置</span>
+        </template>
+        <tablecColumn />
+      </el-collapse-item>
+      <el-collapse-item name="4">
         <template slot="title">
           <span>组件</span>
         </template>
         <options />
       </el-collapse-item>
-      <el-collapse-item name="4">
+      <el-collapse-item name="5">
         <template slot="title">
           <span>已加组件</span>
         </template>
@@ -34,19 +40,34 @@ import page from './page.vue'
 import style from './style.vue'
 import options from './options/index.vue'
 import layers from './layers.vue'
+import tablecColumn from './tablecColumn.vue'
 
 export default {
   components: {
     page,
     appearance: style,
     options,
     layers,
+    tablecColumn,
+  },
+  watch: {
+    '$vptd.state.page.tempItems': {
+      handler(tempItems) {
+        this.hasTable(tempItems)
+      },
+      immediate: true, // 初始化立即执行
+    }
   },
-
   data() {
     return {
-      activeNames: ['1', '2', '3', '4'],
+      isTable: false,
+      activeNames: ['1', '2', '3', '4', '5'],
     }
   },
+  methods: {
+    hasTable(tempItems) {
+      this.isTable = tempItems.some(item => item.type === 'braid-table')
+    }
+  }
 }
 </script>

src/components/widgets/table/index.vue

@@ -20,6 +20,7 @@
       cellpadding="2"
       style="border-collapse: collapse; font-size: 12px"
       bordercolor="#000000"
+      :key="indexKey"
     >
       <tr>
         <th
@@ -37,6 +38,17 @@
       <tr>
         <td v-for="item in columns" :key="item.name">{{ item.value }}</td>
       </tr>
+      <tr v-if="val.showFooter">
+        <td
+          v-for="(item, index) in val.lastTrConfig"
+          :contenteditable="true"
+          :key="item.name"
+          @click="handleColumn(index)"
+          @blur="contentBlur(item, $event)"
+        >
+          <template>{{ item.tdata ? '#' : item.content }}</template>
+        </td>
+      </tr>
     </table>
   </div>
 </template>
@@ -73,13 +85,24 @@ export default {
       BorderColor: '#000000',
       AutoHeight: false, // 高度自动（模板在该元素位置以下的元素都关联打印）
       BottomMargin: 0 // 距离下边距
-    }
+    },
+    tindex: 0,
+    showFooter: false
   },
   props: [
     'val' // 文本对象
   ],
+  watch: {
+    'val.lastTrConfig': {
+      handler() {
+        this.indexKey++
+      },
+      deep: true // 深度监听
+    }
+  },
   data() {
     return {
+      indexKey: 1,
       tid: 'table-' + getUUID(8)
     }
   },
@@ -91,7 +114,10 @@ export default {
         item.thid = 'thid-' + getUUID(6)
       }
       return col
-    }
+    },
+    activeElement() {
+      return this.$vptd.state.activeElement
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -130,6 +156,9 @@ export default {
     modifyTitle(cur, e) {
       cur.title = e.target.innerText
     },
+    handleColumn(index) {
+      this.activeElement.tindex = index
+    },
     // 设置表格列宽
     setTableColWidth(item) {
       if (item.width) {
@@ -140,7 +169,11 @@ export default {
         }
       }
       return ''
-    }
+    },
+    contentBlur(item, e) {
+      item.content = e.target.innerHTML
+      e.target.innerHTML = item.content
+    },
   }
 }
 </script>

src/libs/lodop/index.js

@@ -319,7 +319,8 @@ function _AddPrintItem(LODOP, tempItem, pageIndex = 0) {
         let html = tableTempTohtml(
           printItem.columns ? printItem.columns : [],
           printItem.defaultValue,
-          printItem.style
+          printItem.style,
+          printItem
         );
         if (lodopStyle.AutoHeight) {
           LODOP.ADD_PRINT_TABLE(

src/libs/lodop/tools.js

@@ -22,7 +22,7 @@ export const tempToPrint = (temp, data) => {
  * @param columns 表格列配置信息
  * @param data 表格数据
  */
-export const tableTempTohtml = (columns, data, style) => {
+export const tableTempTohtml = (columns, data, style, tableConfig) => {
   // 表格全局样式
   let styleStr = 'text-align:' + style.Alignment + ';'
   styleStr += 'font-size:' + style.FontSize + 'pt;'
@@ -63,7 +63,18 @@ export const tableTempTohtml = (columns, data, style) => {
       html += '</tr>'
     })
   }
-
+  // 解析表尾
+  if (tableConfig.showFooter) {
+    html += '<tr>'
+    tableConfig.lastTrConfig.forEach((config) => {
+      if (config.tdata) {
+        html += `<td><font tdata="${config.tdata}" format="${config.format}">##</font></td>`
+      } else {
+        html += `<td>${config.content}</td>`
+      }
+    })
+    html += '</tr>'
+  }
   html += '</tbody>'
   html += '</table>'
   return html

src/libs/props.js

@@ -56,3 +56,18 @@ export const getLineStyle = () => [
   { label: "实线", value: 0, type: "solid" },
   { label: "虚线", value: 2, type: "dashed" }
 ];
+
+export const getStatisticType = () => [
+  { label: "求和", value: 'Sum' },
+  { label: "最大值", value: 'AllMax' },
+  { label: "最小值", value: 'AllMin' },
+];
+export const getFormatType = () => [
+  { label: "0", value: '0' },
+  { label: "0.00", value: '0.00' },
+  { label: "#.##", value: '#.##' },
+  { label: "#,##0.00", value: '#,##0.00' },
+  { label: "0.000E+00", value: '0.000E+00' },
+  { label: "大写金额", value: 'UpperMoney' },
+  { label: "中文数字", value: 'ChineseNum' },
+];