diff --git a/jero-web/src/mixins/tableheader.js b/jero-web/src/mixins/tableheader.js
new file mode 100644
index 000000000..b73712d24
--- /dev/null
+++ b/jero-web/src/mixins/tableheader.js
@@ -0,0 +1,278 @@
+import _ from 'lodash'
+
+const events = {
+ start: 'mousedown',
+ move: 'mousemove',
+ stop: 'mouseup'
+}
+let istableAll = [] // 单个页面存放多个表格的columns
+var tablecolumnsAll = []
+var tablecolumnsKey = ''
+let tableminColumn = [] // 存放设置最小宽的列及宽度
+const tableDragHandler = {
+ 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() {
+ }
+ }
+ }
+ },
+ //销毁监听
+ tablebeforeDestroy() {
+ this.removeEvents()
+ },
+ methods: {
+ //鼠标开始拖拽
+ tablehandleMouseDown(e) {
+ e.stopPropagation()
+ e.preventDefault()
+ this.tablehandleStart(e)
+ },
+
+ tablehandleStart(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.tablehandleMouseDown } }, [line])
+ }
+}
+const tableResizeHeaderOne = function(val, name ,minWidths) {
+ tablecolumnsAll = val
+ tablecolumnsKey = name
+ tableminColumn = minWidths
+ if(istableAll.indexOf(val) === -1){
+ istableAll.push(val)
+ }
+ return (h, props, children) => {
+ const { key, column, ...restProps } = props
+ let col = {}
+ // 处理多级表头
+ // col = getRenderCoL(key, val)
+ col = getRenderCoL(key, tablecolumnsAll)
+ let content = [].concat(children)
+ if (col) {
+ let handlerVNode;
+ if(tableminColumn && minWidths !== undefined && tableminColumn.length>0){
+ // 存放所有需要手动设置最小宽度的列的dataIndex
+ let colsdataIndex = []
+ tableminColumn.forEach((item)=>{
+ colsdataIndex.push(item[0].dataIndex)
+ handlerVNode = h(tableDragHandler, {
+ props: {
+ width: col.width,
+ minWidth: Math.min(item[1]),
+ column: col
+ }
+ }, [])
+ content = content.concat(
+ handlerVNode
+ )
+ })
+ // 不需要手动设置最小宽度的列
+ if(colsdataIndex.indexOf(col.dataIndex) === -1){
+ handlerVNode = h(tableDragHandler, {
+ props: {
+ width: col.width,
+ minWidth: Math.min(col.width, 100),
+ column: col
+ }
+ }, [])
+ content = content.concat(
+ handlerVNode
+ )
+ }
+ }else{
+ handlerVNode = h(tableDragHandler, {
+ 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 tableResizeHeader = {
+ methods: {
+ tabledrag(columns, name ,minWidths) {
+ console.log(minWidths)
+ return {
+ header: {
+ // minWidths : 最小宽度 => [[需要设置的列,最小宽],[需要设置的列,最小宽],...]
+ cell: tableResizeHeaderOne(columns, name,minWidths)
+ }
+ }
+ }
+ }
+}
+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重写中（tableDragHandler方法）
+//可以用到构造的onResizeColumn方法（重新设置表头的宽度）
+export const tableResizeColumnProvide = {
+ name: 'ResizeColumnProvideMixin',
+ provide() {
+ return {
+ onResizeColumn: this.onResizeColumn
+ }
+ },
+
+ data() {
+ const onResizeColumn = throttle2(this._resizeColumn, 30)
+ return {
+ moving: false, //这个属性是为了在拖拽时 阻止表头触发排序的功能
+ onResizeColumn
+ }
+ },
+ methods: {
+ _resizeColumn(w, column) {
+ console.log(column)
+ istableAll.forEach(item=>{
+ item.forEach((i)=>{
+ if(i === column && i.dataIndex === column.dataIndex){
+ tablecolumnsAll = item
+ }
+ })
+ })
+ this.moving = true
+ let time = setTimeout(() => {
+ this.moving = false
+ clearTimeout(time)
+ }, 2000)
+ //在拖拽时找到对应表头 重新设置表头的宽度
+ let num = -1
+ let numOne = -1
+ for (let i = 0; i < tablecolumnsAll.length; i++) {
+ if (tablecolumnsAll[i].dataIndex === column.dataIndex) {
+ num = i
+ break
+ }
+ if (tablecolumnsAll[i].children && tablecolumnsAll[i].children.length > 0) {
+ for (let j = 0; j < tablecolumnsAll[i].children.length; j++) {
+ if (tablecolumnsAll[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) {
+ tablecolumnsAll[num].children[numOne].width = w
+ } else {
+ tablecolumnsAll[num].width = w
+ }
+ this[tablecolumnsKey] = tablecolumnsAll
+ }
+ }
+}
\ No newline at end of file
diff --git a/jero-web/src/views/documentTools/documentComparison/components/initiateComparison.vue b/jero-web/src/views/documentTools/documentComparison/components/initiateComparison.vue
index 30c4b9de6..ad0dbe1b0 100644
--- a/jero-web/src/views/documentTools/documentComparison/components/initiateComparison.vue
+++ b/jero-web/src/views/documentTools/documentComparison/components/initiateComparison.vue
@@ -42,19 +42,7 @@
-
-
+
+
+
+
+
+
+
+
\ No newline at end of file