vue2-client 1.15.13 → 1.15.15

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

@@ -1,105 +1,105 @@
-<template>
-  <div class="demo-container">
-    <h2>XFormItem Demo</h2>
-
-    <!-- 查询模式演示 -->
-    <div class="demo-section">
-      <h3>查询模式</h3>
-      <x-form-item
-        :attr="queryAttr"
-        :form="queryForm"
-        mode="查询"
-        :showLabel="true"
-      />
-      <div class="value-display">
-        当前值: {{ queryForm.rate || '未选择' }}
-      </div>
-    </div>
-
-    <!-- 新增模式演示 -->
-    <div class="demo-section">
-      <h3>新增模式</h3>
-      <x-form-item
-        :attr="addAttr"
-        :form="addForm"
-        mode="新增/修改"
-        :showLabel="true"
-      />
-      <div class="value-display">
-        当前值: {{ addForm.rate || '未评分' }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import XFormItem from './XFormItem.vue'
-
-export default {
-  name: 'XFormItemDemo',
-  components: {
-    XFormItem
-  },
-  data () {
-    return {
-      // 查询表单配置
-      queryAttr: {
-        type: 'rate',
-        name: '评分查询',
-        queryType: 'IN',
-        model: 'rate',
-        placeholder: '请选择评分',
-        allowHalf: true,
-        maxCount: 5
-      },
-      queryForm: {
-      },
-
-      // 新增表单配置
-      addAttr: {
-        type: 'rate',
-        name: '评分',
-        model: 'rate',
-        allowHalf: true,
-        maxCount: 10
-      },
-      addForm: {
-        rate: 3
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.demo-container {
-  padding: 20px;
-  max-width: 800px;
-  margin: 0 auto;
-  background-color: #f5f5f5;
-
-  h2 {
-    margin-bottom: 20px;
-    color: #1890ff;
-  }
-
-  .demo-section {
-    margin-bottom: 30px;
-    padding: 20px;
-    border: 1px solid #e8e8e8;
-    border-radius: 4px;
-
-    h3 {
-      margin-bottom: 16px;
-      color: #333;
-    }
-
-    .value-display {
-      margin-top: 16px;
-      padding: 8px;
-      background-color: #f5f5f5;
-      border-radius: 4px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="demo-container">
+    <h2>XFormItem Demo</h2>
+
+    <!-- 查询模式演示 -->
+    <div class="demo-section">
+      <h3>查询模式</h3>
+      <x-form-item
+        :attr="queryAttr"
+        :form="queryForm"
+        mode="查询"
+        :showLabel="true"
+      />
+      <div class="value-display">
+        当前值: {{ queryForm.rate || '未选择' }}
+      </div>
+    </div>
+
+    <!-- 新增模式演示 -->
+    <div class="demo-section">
+      <h3>新增模式</h3>
+      <x-form-item
+        :attr="addAttr"
+        :form="addForm"
+        mode="新增/修改"
+        :showLabel="true"
+      />
+      <div class="value-display">
+        当前值: {{ addForm.rate || '未评分' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import XFormItem from './XFormItem.vue'
+
+export default {
+  name: 'XFormItemDemo',
+  components: {
+    XFormItem
+  },
+  data () {
+    return {
+      // 查询表单配置
+      queryAttr: {
+        type: 'rate',
+        name: '评分查询',
+        queryType: 'IN',
+        model: 'rate',
+        placeholder: '请选择评分',
+        allowHalf: true,
+        maxCount: 5
+      },
+      queryForm: {
+      },
+
+      // 新增表单配置
+      addAttr: {
+        type: 'rate',
+        name: '评分',
+        model: 'rate',
+        allowHalf: true,
+        maxCount: 10
+      },
+      addForm: {
+        rate: 3
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.demo-container {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+  background-color: #f5f5f5;
+
+  h2 {
+    margin-bottom: 20px;
+    color: #1890ff;
+  }
+
+  .demo-section {
+    margin-bottom: 30px;
+    padding: 20px;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+
+    h3 {
+      margin-bottom: 16px;
+      color: #333;
+    }
+
+    .value-display {
+      margin-top: 16px;
+      padding: 8px;
+      background-color: #f5f5f5;
+      border-radius: 4px;
+    }
+  }
+}
+</style>

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

@@ -4,7 +4,6 @@
       title="示例表单"
       :queryParamsName="queryParamsName"
       :fixedAddForm="fixedAddForm"
-      service-name="af-revenue"
       :externalSelectedRowKeys="selectedKeys"
       @action="action"
       @selectRow="selectRow"

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/XRate/demo.vue

@@ -1,102 +1,102 @@
-<template>
-  <div class="demo-container">
-    <h2>XRate 评分组件示例</h2>
-
-    <div class="demo-section">
-      <h3>基础用法</h3>
-      <x-rate v-model="basicRate" />
-      <div>当前值: {{ basicRate }}</div>
-      <a-button @click="resetBasicRate">重置</a-button>
-    </div>
-
-    <div class="demo-section">
-      <h3>允许半星</h3>
-      <x-rate v-model="halfRate" :allow-half="true" />
-      <div>当前值: {{ halfRate }}</div>
-    </div>
-
-    <div class="demo-section">
-      <h3>自定义最大分值</h3>
-      <x-rate v-model="customRate" :max-count="10" />
-      <div>当前值: {{ customRate }}</div>
-    </div>
-
-    <div class="demo-section">
-      <h3>查询模式</h3>
-      <x-rate v-model="queryRate" mode="查询" />
-      <div>当前值: {{ queryRate }}</div>
-    </div>
-
-    <div class="demo-section">
-      <h3>查询模式（多选）</h3>
-      <x-rate v-model="queryMultiRate" mode="查询" query-type="IN" />
-      <div>当前值: {{ queryMultiRate }}</div>
-    </div>
-
-    <div class="demo-section">
-      <h3>禁用状态</h3>
-      <x-rate v-model="disabledRate" :disabled="true" />
-      <div>当前值: {{ disabledRate }}</div>
-    </div>
-
-    <div class="demo-section">
-      <h3>空值处理</h3>
-      <x-rate v-model="emptyRate" />
-      <div>当前值: {{ emptyRate }}</div>
-      <a-button @click="clearRate">清除</a-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import XRate from './index.vue'
-
-export default {
-  name: 'XRateDemo',
-  components: {
-    XRate
-  },
-  data () {
-    return {
-      basicRate: 3,
-      halfRate: 3.5,
-      customRate: 7,
-      queryRate: 4,
-      queryMultiRate: [3, 4],
-      disabledRate: 2,
-      emptyRate: undefined
-    }
-  },
-  methods: {
-    resetBasicRate () {
-      this.basicRate = 3
-    },
-    clearRate () {
-      this.emptyRate = undefined
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.demo-container {
-  padding: 20px;
-
-  .demo-section {
-    margin-bottom: 30px;
-    padding: 20px;
-    border: 1px solid #eee;
-    border-radius: 4px;
-
-    h3 {
-      margin-top: 0;
-      margin-bottom: 16px;
-      color: #333;
-    }
-
-    .ant-btn {
-      margin-top: 8px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="demo-container">
+    <h2>XRate 评分组件示例</h2>
+
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <x-rate v-model="basicRate" />
+      <div>当前值: {{ basicRate }}</div>
+      <a-button @click="resetBasicRate">重置</a-button>
+    </div>
+
+    <div class="demo-section">
+      <h3>允许半星</h3>
+      <x-rate v-model="halfRate" :allow-half="true" />
+      <div>当前值: {{ halfRate }}</div>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义最大分值</h3>
+      <x-rate v-model="customRate" :max-count="10" />
+      <div>当前值: {{ customRate }}</div>
+    </div>
+
+    <div class="demo-section">
+      <h3>查询模式</h3>
+      <x-rate v-model="queryRate" mode="查询" />
+      <div>当前值: {{ queryRate }}</div>
+    </div>
+
+    <div class="demo-section">
+      <h3>查询模式（多选）</h3>
+      <x-rate v-model="queryMultiRate" mode="查询" query-type="IN" />
+      <div>当前值: {{ queryMultiRate }}</div>
+    </div>
+
+    <div class="demo-section">
+      <h3>禁用状态</h3>
+      <x-rate v-model="disabledRate" :disabled="true" />
+      <div>当前值: {{ disabledRate }}</div>
+    </div>
+
+    <div class="demo-section">
+      <h3>空值处理</h3>
+      <x-rate v-model="emptyRate" />
+      <div>当前值: {{ emptyRate }}</div>
+      <a-button @click="clearRate">清除</a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import XRate from './index.vue'
+
+export default {
+  name: 'XRateDemo',
+  components: {
+    XRate
+  },
+  data () {
+    return {
+      basicRate: 3,
+      halfRate: 3.5,
+      customRate: 7,
+      queryRate: 4,
+      queryMultiRate: [3, 4],
+      disabledRate: 2,
+      emptyRate: undefined
+    }
+  },
+  methods: {
+    resetBasicRate () {
+      this.basicRate = 3
+    },
+    clearRate () {
+      this.emptyRate = undefined
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.demo-container {
+  padding: 20px;
+
+  .demo-section {
+    margin-bottom: 30px;
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: 16px;
+      color: #333;
+    }
+
+    .ant-btn {
+      margin-top: 8px;
+    }
+  }
+}
+</style>

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>