From 1944cd5122eebe93a4e9dc54f62b0b7bbc6c9632 Mon Sep 17 00:00:00 2001 From: sunFlower <787203167@qq.com> Date: Tue, 29 Nov 2022 10:06:27 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B3=95=E8=A7=84=E6=B8=85?= =?UTF-8?q?=E5=8D=95=E7=9A=84=E6=8B=96=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jero-web/package.json | 1 + jero-web/src/assets/less/common.less | 22 +- jero-web/src/mixins/header.js | 229 ++++++++++++++++++ .../components/listOfRegulations.vue | 23 +- 4 files changed, 272 insertions(+), 3 deletions(-) create mode 100644 jero-web/src/mixins/header.js diff --git a/jero-web/package.json b/jero-web/package.json index c6b13b18e..1cd46fe3c 100644 --- a/jero-web/package.json +++ b/jero-web/package.json @@ -27,6 +27,7 @@ "js-base64": "^3.7.2", "js-cookie": "^2.2.0", "jsencrypt": "^3.0.0-rc.1", + "lodash": "^4.17.21", "lodash.get": "^4.4.2", "lodash.pick": "^4.4.0", "mammoth": "^1.4.21", diff --git a/jero-web/src/assets/less/common.less b/jero-web/src/assets/less/common.less index 801cf50a5..4315c49a9 100644 --- a/jero-web/src/assets/less/common.less +++ b/jero-web/src/assets/less/common.less @@ -99,6 +99,26 @@ line-height: 38px; } -.ant-table-fixed-left table, .ant-table-fixed-right table .ant-table-fixed{ +.ant-table-fixed-left table, .ant-table-fixed-right table .ant-table-fixed { width: min-content; +} + +.nio-header-th { + position: relative; + isolation: isolate; +} + +.nio-drag-handler { + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 1px; + z-index: 1; + border-left: 1px #e8e8e8 solid; +} +.nio-drag-handler:hover, +.nio-drag-handler:focus{ + cursor: col-resize!important; + border: 1px solid #0bd9d9!important; } \ No newline at end of file diff --git a/jero-web/src/mixins/header.js b/jero-web/src/mixins/header.js new file mode 100644 index 000000000..75982d9b0 --- /dev/null +++ b/jero-web/src/mixins/header.js @@ -0,0 +1,229 @@ +import _ from 'lodash' + +const events = { + start: 'mousedown', + move: 'mousemove', + stop: 'mouseup' +} +var columnsAll = [] +var columnsKey = '' +const DragHandler = { + name: 'nio-drag-handler', + //获取混入的方法（重新设置表头宽度） + inject: ['onResizeColumn'], + props: { + column: { type: Object, required: true }, + minWidth: { type: Number, required: true } + }, + + data() { + return { + dragging: false, + thWidth: 0,// 列头的宽度，用于计算 + startX: 0, + moveEvent: { + remove: function() { + } + }, + stopEvent: { + remove: function() { + } + } + } + }, + //销毁监听 + beforeDestroy() { + this.removeEvents() + }, + methods: { + //鼠标开始拖拽 + handleMouseDown(e) { + e.stopPropagation() + e.preventDefault() + this.handleStart(e) + }, + + handleStart(e) { + console.log(e) + this.dragging = true + this.removeEvents() + this.thWidth = this.$el.parentNode.getBoundingClientRect().width + if (e instanceof MouseEvent && e.which !== 1) { + return + } + if (e.stopPropagation) e.stopPropagation() + this.startX = e.pageX + this.moveEvent = addEventListenerWrap(document.documentElement, events.move, this.handleMove) + this.stopEvent = addEventListenerWrap(document.documentElement, events.stop, this.handleStop) + }, + + handleMove(e) { + this.updateWidth(e) + }, + handleStop(e) { + this.dragging = false + this.updateWidth(e) + this.removeEvents() + }, + + updateWidth(e) { + let pageX = e.pageX + const tmpDeltaX = this.startX - pageX + let w = Math.max(this.thWidth - tmpDeltaX, this.minWidth) + w = Math.min(w, Infinity) + this.onResizeColumn(w, this.column) + }, + + removeEvents() { + this.moveEvent.remove() + this.stopEvent.remove() + } + }, + //渲染div 绑定拖拽 + render(h) { + const line = h('div', { class: 'nio-drag-handler-line' }, []) + return h('div', { class: 'nio-drag-handler', on: { mousedown: this.handleMouseDown } }, [line]) + } +} +const ResizeHeaderOne = function(val, name) { + columnsAll = val + columnsKey = name + return (h, props, children) => { + const { key, column, ...restProps } = props + let col = {} + // 处理多级表头 + col = getRenderCoL(key, val) + let content = [].concat(children) + if (col) { + const handlerVNode = h(DragHandler, { + props: { + width: col.width, + minWidth: Math.min(col.width, 100), + column: col + } + }, []) + content = content.concat( + handlerVNode + ) + } + return h('th', { + key, + props: { col }, + ...Object.assign({}, restProps, { class: (restProps.class || '') + ' nio-header-th' }) + }, content) + } +} +export const ResizeHeader = { + methods: { + drag(columns, name) { + return { + header: { + cell: ResizeHeaderOne(columns, name) + } + } + } + } +} +const getRenderCoL = (key, tbCols) => { + let result = '' + _.forEach(tbCols, (item) => { + if (item.children) { + result = getRenderCoL(key, item.children) + return !result + } else { + const k = item.dataIndex || item.key + if (k === key) { + result = item + return false + } + } + }) + return result +} +//拖拽的节流方法 +const throttle2 = (fn, delay) => { + let valid = true + return (...args) => { + if (!valid) { + return + } + valid = false + setTimeout(() => { + fn(...args) + valid = true + }, delay) + } +} +//对table组件进行重构的核心方法组件 + + +//监听鼠标移动的方法 +function addEventListenerWrap(target, eventType, cb) { + if (target && target.addEventListener) { + target.addEventListener(eventType, cb) + } + + return { + remove: () => { + if (target && target.removeEventListener) { + target.removeEventListener(eventType, cb) + } + } + } +} + +//在table组件中混入的一个方法 provide => onResizeColumn +//目的是在table重写中（DragHandler方法） +//可以用到构造的onResizeColumn方法（重新设置表头的宽度） +export const ResizeColumnProvide = { + name: 'ResizeColumnProvideMixin', + provide() { + return { + onResizeColumn: this.onResizeColumn + } + }, + + data() { + const onResizeColumn = throttle2(this._resizeColumn, 30) + return { + moving: false, //这个属性是为了在拖拽时 阻止表头触发排序的功能 + onResizeColumn + } + }, + methods: { + _resizeColumn(w, column) { + this.moving = true + let time = setTimeout(() => { + this.moving = false + clearTimeout(time) + }, 2000) + //在拖拽时找到对应表头 重新设置表头的宽度 + let num = -1 + let numOne = -1 + for (let i = 0; i < columnsAll.length; i++) { + if (columnsAll[i].dataIndex === column.dataIndex) { + num = i + break + } + if (columnsAll[i].children && columnsAll[i].children.length > 0) { + for (let j = 0; j < columnsAll[i].children.length; j++) { + if (columnsAll[i].children[j].dataIndex === column.dataIndex) { + num = i + numOne = j + break + } + } + } + } + // const matchedIndex = columns.findIndex(item => item.dataIndex === column.dataIndex) + // console.log(matchedIndex) + // columns[matchedIndex].width = w + if (numOne > -1) { + columnsAll[num].children[numOne].width = w + } else { + columnsAll[num].width = w + } + this[columnsKey] = columnsAll + } + } +} \ No newline at end of file diff --git a/jero-web/src/views/projectManagement/components/listOfRegulations.vue b/jero-web/src/views/projectManagement/components/listOfRegulations.vue index 1fd293f24..eebaee1d0 100644 --- a/jero-web/src/views/projectManagement/components/listOfRegulations.vue +++ b/jero-web/src/views/projectManagement/components/listOfRegulations.vue @@ -202,6 +202,7 @@
- + \ No newline at end of file