vue2-client 1.15.12 → 1.15.14

package/src/base-client/components/common/XFormTable/demo.vue

@@ -25,7 +25,7 @@ export default {
   data () {
     return {
       // 查询配置文件名
-      queryParamsName: 'ApplyTransactionCRUD',
+      queryParamsName: 'ceshiCRUD',
       // 新增表单固定值
       fixedAddForm: {},
       // 是否显示详情抽屉

package/src/base-client/components/common/XPrint/PrintBill.vue

@@ -6,7 +6,9 @@
       width="60vw"
       @ok="printGen"
       @cancel="cancel"
-      style="min-width: 800px">
+      style="min-width: 800px"
+      z-index="1009"
+    >
       <a-skeleton v-if="!loaded" active/>
       <div
         style="display: flex;justify-content: center;"

package/src/base-client/components/common/XTable/XTableWrapper.vue

@@ -19,6 +19,7 @@
     :setScrollYHeight="tableContext.setScrollYHeight"
     :selectRowMode="tableContext.selectRowMode"
     :size="tableContext.tableSize"
+    :components="components"
     @beforeDataChange="beforeDataChange"
     @expand="onExpand"
     @rowClick="handleRowClick"
@@ -154,6 +155,7 @@
     :setScrollYHeight="tableContext.setScrollYHeight"
     :selectRowMode="tableContext.selectRowMode"
     :size="tableContext.tableSize"
+    :components="components"
     @rowClick="handleRowClick"
     @beforeDataChange="beforeDataChange"
   >
@@ -269,6 +271,7 @@ import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormIte
 import CustomFuncCel from '@vue2-client/base-client/components/common/XTable/CustomFuncCel.vue'
 import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
 import XRate from '@vue2-client/base-client/components/common/XRate/index.vue'
+import VueDraggableResizable from 'vue-draggable-resizable'
 
 export default {
   name: 'XTableWrapper',
@@ -278,7 +281,15 @@ export default {
     XBadge,
     XFormItem,
     XRate,
-    CustomFuncCel
+    CustomFuncCel,
+    VueDraggableResizable
+  },
+  data () {
+    return {
+      isDragging: false, // 添加拖拽状态标记
+      // eslint-disable-next-line vue/no-reserved-keys
+      _rafId: null // 添加requestAnimationFrame ID标记
+    }
   },
   computed: {
     localDataSource () {
@@ -290,6 +301,114 @@ export default {
     },
     realTableColumns () {
       return this.tableContext.tableColumns.filter(item => item.slotType !== 'action' || !this.disableAction)
+    },
+    components () {
+      return {
+        header: {
+          cell: (h, props, children) => {
+            const { key, ...restProps } = props
+            // 此处的this.realTableColumns 是定义的table的表头属性变量
+            const col = this.realTableColumns.find((col) => {
+              const k = col.dataIndex || col.key
+              return k === key
+            })
+            if (!col || !col.width) {
+              return h('th', { ...restProps }, [...children])
+            }
+
+            // 创建一个防止点击排序的容器
+            const preventSortProps = {
+              style: {
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                width: '20px',
+                height: '100%',
+                zIndex: 10
+              },
+              on: {
+                mousedown: (e) => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  this.isDragging = true
+                }
+              }
+            }
+
+            const dragProps = {
+              key: col.dataIndex || col.key,
+              class: 'table-draggable-handle',
+              attrs: {
+                w: 10,
+                x: col.width,
+                z: 1,
+                axis: 'x',
+                draggable: true,
+                resizable: false,
+              },
+              on: {
+                dragging: (x, y) => {
+                  // 使用requestAnimationFrame优化性能，减少卡顿
+                  if (!this._rafId) {
+                    this._rafId = requestAnimationFrame(() => {
+                      col.width = Math.max(x, 50) // 设置最小列宽为50px
+                      this.isDragging = true // 设置拖拽状态
+                      this._rafId = null
+                    })
+                  }
+                },
+                mousedown: (e) => {
+                  // 阻止事件冒泡，防止触发排序
+                  e.stopPropagation()
+                  e.preventDefault()
+                  this.isDragging = true // 设置拖拽状态
+                },
+                dragstop: () => {
+                  // 清除可能存在的动画帧请求
+                  if (this._rafId) {
+                    cancelAnimationFrame(this._rafId)
+                    this._rafId = null
+                  }
+
+                  // 拖拽结束时，延迟重置拖拽状态，以防止排序被触发
+                  setTimeout(() => {
+                    this.isDragging = false
+                  }, 100)
+                }
+              },
+              nativeOn: {
+                mousedown: (e) => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  this.isDragging = true // 设置拖拽状态
+                }
+              }
+            }
+
+            const preventSort = h('div', preventSortProps)
+            const drag = h('vue-draggable-resizable', { ...dragProps })
+
+            // 修改th的点击事件，在拖拽状态下阻止排序
+            const newRestProps = { ...restProps }
+            const originalClick = newRestProps.on && newRestProps.on.click
+            if (originalClick) {
+              newRestProps.on = {
+                ...newRestProps.on,
+                click: (e) => {
+                  if (this.isDragging) {
+                    e.stopPropagation()
+                    e.preventDefault()
+                    return
+                  }
+                  originalClick(e)
+                }
+              }
+            }
+
+            return h('th', { ...newRestProps, class: 'resize-table-th' }, [...children, preventSort, drag])
+          },
+        }
+      }
     }
   },
   props: {
@@ -412,6 +531,52 @@ export default {
       }
       return false
     },
+    handleResizeColumn (w, col) {
+      col.width = w
+    }
   }
 }
 </script>
+
+<style>
+.table-draggable-handle {
+  height: 100% !important;
+  left: auto !important;
+  right: -10px;
+  cursor: col-resize;
+  touch-action: none;
+  border: none;
+  position: absolute;
+  transform: none !important;
+  bottom: 0;
+  width: 20px !important;
+}
+
+.table-draggable-handle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  height: 20px;
+  width: 1px;
+  background-color: #d9d9d9;
+  transition: background-color 0.2s;
+  transform: translateY(-50%);
+  right: 9px;
+}
+
+.table-draggable-handle:hover::after {
+  background-color: #1890ff;
+}
+
+.table-draggable-handle:active::after {
+  background-color: #096dd9;
+}
+
+.resize-table-th {
+  position: relative;
+}
+
+.resize-table-th:hover .table-draggable-handle::after {
+  background-color: rgba(24, 144, 255, 0.5);
+}
+</style>