给单据列表增加左右拖拽的功能

jishenghua · Feb 24, 2023 · 89c1526 · 89c1526
1 parent 668f065
commit 89c1526
Show file tree

Hide file tree

Showing 23 changed files with 92 additions and 6 deletions.
diff --git a/jshERP-web/package.json b/jshERP-web/package.json
@@ -16,18 +16,18 @@
     "codemirror": "^5.46.0",
     "dayjs": "^1.8.0",
     "enquire.js": "^2.1.6",
+    "intro.js": "^4.2.2",
+    "jquery": "^1.12.4",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
-    "xlsx": "^0.14.3",
-    "intro.js": "^4.2.2",
-    "jquery": "^1.12.4",
     "viser-vue": "^2.4.4",
     "vue": "^2.6.10",
     "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.4.8",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-i18n": "^8.7.0",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
@@ -36,7 +36,8 @@
     "vue-router": "^3.0.1",
     "vue-splitpane": "^1.0.4",
     "vuedraggable": "^2.20.0",
-    "vuex": "^3.1.0"
+    "vuex": "^3.1.0",
+    "xlsx": "^0.14.3"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.2.5",
@@ -88,9 +89,12 @@
       "vue/no-use-v-if-with-v-for": 0,
       "vue/html-closing-bracket-newline": 0,
       "vue/no-parsing-error": 0,
-	  "no-console": 0,
+      "no-console": 0,
       "no-tabs": 0,
-      "indent": [1, 4]
+      "indent": [
+        1,
+        4
+      ]
     }
   },
   "postcss": {

diff --git a/jshERP-web/src/assets/less/common.less b/jshERP-web/src/assets/less/common.less
@@ -66,4 +66,20 @@
 
 .ant-modal-mask {
   background-color: rgba(0, 0, 0, 0.1) !important;
+}
+/* 拖拽 */
+.table-draggable-handle {
+  /* width: 10px !important; */
+  height: 100% !important;
+  left: auto !important;
+  right: -5px;
+  cursor: col-resize;
+  touch-action: none;
+  border: none;
+  position: absolute;
+  transform: none !important;
+  bottom: 0;
+}
+.resize-table-th {
+  position: relative;
 }
diff --git a/jshERP-web/src/mixins/JeecgListMixin.js b/jshERP-web/src/mixins/JeecgListMixin.js
@@ -6,11 +6,15 @@
 import { filterObj,getNowFormatStr } from '@/utils/util';
 import { deleteAction, getAction, postAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
 import Vue from 'vue'
+import VueDraggableResizable from 'vue-draggable-resizable'
 import { ACCESS_TOKEN } from "@/store/mutation-types"
 import {mixinDevice} from '@/utils/mixin.js'
 
 export const JeecgListMixin = {
   mixins: [mixinDevice],
+  components: {
+    VueDraggableResizable
+  },
   data(){
     return {
       //token header
@@ -393,6 +397,44 @@ export const JeecgListMixin = {
         this.scroll.y = document.documentElement.clientHeight-searchWrapperDomLen-operatorDomLen-basicLength
       }
     },
+    //拖拽组件
+    handleDrag(column){
+      return {
+        header: {
+          cell: (h, props, children) => {
+            const { key, ...restProps } = props
+            const col = column.find((col) => {
+              const k = col.dataIndex || col.key
+              return k === key
+            })
+
+            if (!col || !col.width) {
+              return h('th', { ...restProps }, [...children])
+            }
+
+            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) => {
+                  col.width = Math.max(x, 1)
+                },
+              },
+            }
+            const drag = h(VueDraggableResizable, { ...dragProps })
+            return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
+          },
+        }
+      }
+    },
     /** 表格增加合计行 */
     tableAddTotalRow(columns, dataSource) {
       if(dataSource.length>0 && this.ipagination.pageSize%10===1) {

diff --git a/jshERP-web/src/views/bill/AllocationOutList.vue b/jshERP-web/src/views/bill/AllocationOutList.vue
@@ -101,6 +101,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/AssembleList.vue b/jshERP-web/src/views/bill/AssembleList.vue
@@ -101,6 +101,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/DisassembleList.vue b/jshERP-web/src/views/bill/DisassembleList.vue
@@ -101,6 +101,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/OtherInList.vue b/jshERP-web/src/views/bill/OtherInList.vue
@@ -115,6 +115,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/OtherOutList.vue b/jshERP-web/src/views/bill/OtherOutList.vue
@@ -115,6 +115,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/PurchaseBackList.vue b/jshERP-web/src/views/bill/PurchaseBackList.vue
@@ -124,6 +124,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/PurchaseInList.vue b/jshERP-web/src/views/bill/PurchaseInList.vue
@@ -134,6 +134,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/PurchaseOrderList.vue b/jshERP-web/src/views/bill/PurchaseOrderList.vue
@@ -104,6 +104,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/RetailBackList.vue b/jshERP-web/src/views/bill/RetailBackList.vue
@@ -124,6 +124,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/RetailOutList.vue b/jshERP-web/src/views/bill/RetailOutList.vue
@@ -119,6 +119,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/SaleBackList.vue b/jshERP-web/src/views/bill/SaleBackList.vue
@@ -125,6 +125,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/SaleOrderList.vue b/jshERP-web/src/views/bill/SaleOrderList.vue
@@ -105,6 +105,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/bill/SaleOutList.vue b/jshERP-web/src/views/bill/SaleOutList.vue
@@ -135,6 +135,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/financial/AdvanceInList.vue b/jshERP-web/src/views/financial/AdvanceInList.vue
@@ -106,6 +106,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/financial/GiroList.vue b/jshERP-web/src/views/financial/GiroList.vue
@@ -106,6 +106,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/financial/ItemInList.vue b/jshERP-web/src/views/financial/ItemInList.vue
@@ -115,6 +115,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/financial/ItemOutList.vue b/jshERP-web/src/views/financial/ItemOutList.vue
@@ -115,6 +115,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/financial/MoneyInList.vue b/jshERP-web/src/views/financial/MoneyInList.vue
@@ -121,6 +121,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/src/views/financial/MoneyOutList.vue b/jshERP-web/src/views/financial/MoneyOutList.vue
@@ -121,6 +121,7 @@
             rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
+            :components="handleDrag(columns)"
             :pagination="ipagination"
             :scroll="scroll"
             :loading="loading"

diff --git a/jshERP-web/yarn.lock b/jshERP-web/yarn.lock
@@ -11163,6 +11163,11 @@ vue-cropper@^0.4.8:
   resolved "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.4.9.tgz#fe650f32516ecf29014bbd4a9079191c8dc5a5ae"
   integrity sha512-Uf1i/sCh+ZqSM9hb2YTGRENzJFH+mvDuv8N2brGLjK7UBuF7XDP7zbis8g/dcqZiMojAcBDtObFCn4ERFbRMxQ==
 
+vue-draggable-resizable@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/vue-draggable-resizable/-/vue-draggable-resizable-2.3.0.tgz#94c433ca748bc1a4d0959ba1c5c0e1c3536cee5b"
+  integrity sha512-77CLRj1TPwB30pwsjOf3pkd1UzYanCdKXbqhILJ0Oo5QQl50lvBfyQCXxMFzwWwTc3sbBbQH3FfWSV+BkoSElA==
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"