feat：表格组件 新增拖拽调整列宽功能

src/components/widgets/table/index.vue

@@ -1,18 +1,35 @@
 <template>
-  <div class="widgets" :style="{
-    left: val.left + 'px',
-    top: val.top + 'px',
-    width: val.width + 'px',
-    height: val.height + 'px',
-    textAlign: val.style.Alignment,
-    fontSize: val.style.FontSize + 'pt',
-    color: val.style.FontColor,
-  }" style="position:absolute;overflow:hidden">
-    <table id="7758" border="1" width="100%" cellspacing="0" cellpadding="2"
-      style="border-collapse:collapse;font-size:12px;" bordercolor="#000000">
+  <div
+    class="widgets"
+    :style="{
+      left: val.left + 'px',
+      top: val.top + 'px',
+      width: val.width + 'px',
+      height: val.height + 'px',
+      textAlign: val.style.Alignment,
+      fontSize: val.style.FontSize + 'pt',
+      color: val.style.FontColor
+    }"
+    style="position: absolute; overflow: hidden"
+  >
+    <table
+      :id="tid"
+      border="1"
+      width="100%"
+      cellspacing="0"
+      cellpadding="2"
+      style="border-collapse: collapse; font-size: 12px"
+      bordercolor="#000000"
+    >
       <tr>
-        <th v-for="item in columns" :key="item.name" :width="item.name === '_seq' ? 40 : ''" contenteditable="true"
-          @blur="modifyTitle(item, $event)">
+        <th
+          v-for="item in columns"
+          :id="item.thid"
+          :key="item.name"
+          :width="setTableColWidth(item)"
+          contenteditable="true"
+          @blur="modifyTitle(item, $event)"
+        >
           {{ item.title }}
         </th>
         <!-- <th v-for="item in columns" :key="item.name" :width="item.name === '_seq' ? 40 : ''">{{ item.title }}</th> -->
@@ -25,6 +42,8 @@
 </template>
 
 <script>
+import { resizeTableCol, getUUID } from '../../../utils/tools.js'
+
 const WIDGET_NAME = 'braid-table'
 
 export default {
@@ -53,24 +72,75 @@ export default {
       FontColor: '#000000',
       BorderColor: '#000000',
       AutoHeight: false, // 高度自动（模板在该元素位置以下的元素都关联打印）
-      BottomMargin: 0, // 距离下边距
-    },
+      BottomMargin: 0 // 距离下边距
+    }
   },
   props: [
-    'val', // 文本对象
+    'val' // 文本对象
   ],
+  data() {
+    return {
+      tid: 'table-' + getUUID(8)
+    }
+  },
   computed: {
     // 去掉type='row'的数据
     columns() {
       let col = this.val.columns || []
+      for (const item of col) {
+        item.thid = 'thid-' + getUUID(6)
+      }
       return col
-    },
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 调整表格列宽
+      resizeTableCol(this.tid, (resizeTd) => {
+        this.$vptd.commit('pauseMove', resizeTd !== null)
+        if (resizeTd) {
+          // 实时保存列宽，用作保存后回显
+          const result = this.columns.find((item) => item.thid === resizeTd.id)
+          result['width'] = resizeTd.width
+        } else {
+          // 拖动结束
+          this.convertWidth()
+        }
+      })
+      this.convertWidth()
+    })
   },
   methods: {
+    // 将表格列宽由原来的px转换为百分比
+    convertWidth() {
+      // 获取表格的所有 th 元素
+      const thElements = document.querySelectorAll(`#${this.tid} th`)
+      // 循环遍历每个 th 元素
+      thElements.forEach((item, i) => {
+        // 获取原始宽度值（以像素为单位）
+        const originalWidth = item.offsetWidth
+
+        // 计算百分比值
+        const percentage = (originalWidth / item.parentElement.offsetWidth) * 100
+
+        // 将每个 th 元素的宽度设置为百分比
+        this.columns[i].widthPercent = percentage + '%'
+      })
+    },
     modifyTitle(cur, e) {
       cur.title = e.target.innerText
+    },
+    // 设置表格列宽
+    setTableColWidth(item) {
+      if (item.width) {
+        return item.width
+      } else {
+        if (item.name === '_seq') {
+          return 30
+        }
+      }
+      return ''
     }
-  },
+  }
 }
 </script>
-

src/libs/lodop/tools.js

@@ -23,7 +23,6 @@ export const tempToPrint = (temp, data) => {
  * @param data 表格数据
  */
 export const tableTempTohtml = (columns, data, style) => {
-
   // 表格全局样式
   let styleStr = 'text-align:' + style.Alignment + ';'
   styleStr += 'font-size:' + style.FontSize + 'pt;'
@@ -35,18 +34,17 @@ export const tableTempTohtml = (columns, data, style) => {
   // 解析表头
   html += '<thead><tr>'
   columns.forEach(column => {
-
-    if (column.name === '_seq') { // 序号列
-      html += '<th width="30">'
+    if (column.widthPercent) {
+      html += '<th width="'+column.widthPercent+'">'
     } else {
       html += '<th>'
     }
     html += column.title
     html += '</th>'
   })
+
   html += '</tr></thead>'
   html += '<tbody>'
-
   // 解析内容
   if (Array.isArray(data)) {
     data.forEach((item, idx) => {
@@ -99,7 +97,6 @@ export const htmlTempTohtml = (val, style) => {
   let html = '<span style=\'' + styleStr + '\'>'
   html += val
   html += '</span>'
-  // console.log(html)
   return html
 }
 /**

src/mixins/move.js

@@ -25,16 +25,18 @@ export default {
 
     /**
      * 鼠标移动
-     * @param {*} e 
+     * @param {*} e
      */
     handlemousemove(e) {
-      e.stopPropagation()
-      e.preventDefault()
+      if (!this.$vptd.state.pauseMove) {
+        e.stopPropagation()
+        e.preventDefault()
 
-      this.$vptd.commit('move', {
-        x: e.pageX,
-        y: e.pageY
-      })
+        this.$vptd.commit('move', {
+          x: e.pageX,
+          y: e.pageY
+        })
+      }
     },
 
     /**

src/store/mutation.js

@@ -58,6 +58,11 @@ export default {
     state.moving = false
   },
 
+  // 暂停移动元件
+  pauseMove(state, start) {
+    state.pauseMove = start
+  },
+
   // 移动元件
   move(state, track) {
     var target = state.activeElement

src/store/state.js

@@ -9,8 +9,8 @@ export default {
 
   originX: 0, // 选中元件的横向初始值
   originY: 0, // 选中元件的纵向初始值
-  startX: 0, // 鼠标摁下时的横坐标
-  startY: 0, // 鼠标摁下时的纵坐标
+  startX: 0, // 鼠标按下时的横坐标
+  startY: 0, // 鼠标按下时的纵坐标
   moving: false, // 是否正在移动元件（参考线仅在移动元件时显示）
 
   activeElement: getDefaultProps(), // 选中对象，要么是元件，要么是页面

src/utils/tools.js

@@ -7,3 +7,47 @@ export function getUUID(n = 32) {
   }
   return result;
 }
+// 调整表格列宽
+export function resizeTableCol(tid, callback) {
+  let resizeTd = null
+  const table = document.getElementById(tid)
+  for (const thDom of table.rows[0].cells) {
+    // onmousedown 鼠标按下
+    thDom.onmousedown = function (e) {
+      if (this.offsetWidth - e.offsetX < 10) {
+        resizeTd = this; //保存下要操作的列
+        resizeTd.initClientX = e.clientX; //保存下鼠标按下时鼠标相对该单元格x方向的偏移
+        resizeTd.initWidth = resizeTd.offsetWidth; //保存下该单元格的宽度
+        callback && callback(resizeTd)
+      }
+    };
+
+    // onmousemove 鼠标移动
+    thDom.onmousemove = function () { //更改鼠标样式
+      // 当前列宽度 - 鼠标相对于事件源x轴的位置
+      if (this.offsetWidth - event.offsetX < 10) {
+        this.style.cursor = 'col-resize'; // 表示光标所在列可以水平调整大小
+      } else {
+        if (!resizeTd) {
+          this.style.cursor = 'default'
+        }
+      }
+    }
+  }
+
+  // onmouseup 鼠标松开
+  document.onmouseup = function () { //不需要写在上边的for循环里面
+    resizeTd = null
+    callback && callback(resizeTd)
+  }
+
+  // onmousemove 鼠标移动
+  table.onmousemove = function (evt) {
+    if (resizeTd) {
+      if (resizeTd.initWidth + (evt.clientX - resizeTd.initClientX) > 0) {
+        resizeTd.width = resizeTd.initWidth + (evt.clientX - resizeTd.initClientX)
+        callback && callback(resizeTd)
+      }
+    }
+  }
+}