拖拽-可设置最小宽度

jero-web/src/components/tableCollection/historyTable.vue

@@ -0,0 +1,39 @@
+<template>
+  <a-table
+    :components="drag(columnshistory,'columns')"
+  class="table"
+  :columns="columnshistory"
+  :pagination="false"
+  :scroll="{y: 400}"
+  :data-source="dataSourcehistory"
+  :loading="loading"
+  >
+  <span slot="content" slot-scope="text,record">
+          <a-tooltip placement="topLeft">
+        <template slot="title">
+          <span v-html="text"></span>
+        </template>
+            <span v-html="text"></span>
+      </a-tooltip>
+       </span>
+  <span slot="detailText" slot-scope="text,record">
+              <span class="text" :title="text">
+               {{text && text.length > 10?text.slice(0,9)+'...':text}}
+              </span>
+        </span>
+  </a-table>
+</template>
+
+<script>
+
+import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
+export default {
+  name: 'historyTable.vue',
+  props:['columnshistory','dataSourcehistory'],
+  mixins:[ResizeHeader, ResizeColumnProvide],
+}
+</script>
+
+<style scoped>
+
+</style>

jero-web/src/components/tableCollection/index.vue

@@ -3,6 +3,7 @@
     <div class="box">
       <!--      -->
       <a-table
+        :components="drag(columns,'columns',JSON.parse(JSON.stringify([[columns[3],500]])))"
         class="table"
         rowKey="id"
         :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
@@ -179,28 +180,29 @@
       @ok="handleOk"
       @cancel="handleCancel"
     >
-      <a-table
-        class="table"
-        :columns="columnshistory"
-        :pagination="false"
-        :scroll="{y: 400}"
-        :data-source="dataSourcehistory"
-        :loading="loading"
-      >
-       <span slot="content" slot-scope="text,record">
-          <a-tooltip placement="topLeft">
-        <template slot="title">
-          <span v-html="text"></span>
-        </template>
-            <span v-html="text"></span>
-      </a-tooltip>
-       </span>
-        <span slot="detailText" slot-scope="text,record">
-              <span class="text" :title="text">
-               {{text && text.length > 10?text.slice(0,9)+'...':text}}
-              </span>
-        </span>
-      </a-table>
+      <historyTable :columnshistory='columnshistory' :dataSourcehistory='dataSourcehistory'></historyTable>
+<!--      <a-table-->
+<!--        class="table"-->
+<!--        :columns="columnshistory"-->
+<!--        :pagination="false"-->
+<!--        :scroll="{y: 400}"-->
+<!--        :data-source="dataSourcehistory"-->
+<!--        :loading="loading"-->
+<!--      >-->
+<!--       <span slot="content" slot-scope="text,record">-->
+<!--          <a-tooltip placement="topLeft">-->
+<!--        <template slot="title">-->
+<!--          <span v-html="text"></span>-->
+<!--        </template>-->
+<!--            <span v-html="text"></span>-->
+<!--      </a-tooltip>-->
+<!--       </span>-->
+<!--        <span slot="detailText" slot-scope="text,record">-->
+<!--              <span class="text" :title="text">-->
+<!--               {{text && text.length > 10?text.slice(0,9)+'...':text}}-->
+<!--              </span>-->
+<!--        </span>-->
+<!--      </a-table>-->
       <div class="page" v-if="dataSourcehistory.length > 0">
         <a-pagination
           :show-total="total => $t('total')+` ${total} `+$t('strip')"
@@ -271,11 +273,14 @@
   import { ACCESS_TOKEN } from '@/store/mutation-types'
   import axios from 'axios'
   import Vue from 'vue'
-  import VueDraggableResizable from 'vue-draggable-resizable'
+  // import VueDraggableResizable from 'vue-draggable-resizable'
   import { mapGetters } from 'vuex'
+  import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
+  import historyTable from './historyTable.vue'
 
   export default {
     name: 'index',
+    mixins:[ResizeHeader, ResizeColumnProvide],
     props: {
       //接口
       url: {
@@ -304,47 +309,48 @@
     },
     components: {
       CollectionType,
-      VueDraggableResizable
+      // VueDraggableResizable
+      historyTable
     },
     data() {
-      this.components = {
-        header: {
-          cell: (h, props, children) => {
-            const { key, ...restProps } = props
-
-            // 此处的this.columns 是定义的table的表头属性变量
-
-            const col = this.columns.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: false,
-                resizable: false
-              },
-              on: {
-                dragging: (x, y) => {
-                  col.width = Math.max(x, 1)
-                }
-              }
-            }
-            const drag = h('vue-draggable-resizable', { ...dragProps })
-            return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
-          }
-        }
-      }
+      // this.components = {
+      //   header: {
+      //     cell: (h, props, children) => {
+      //       const { key, ...restProps } = props
+      //
+      //       // 此处的this.columns 是定义的table的表头属性变量
+      //
+      //       const col = this.columns.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: false,
+      //           resizable: false
+      //         },
+      //         on: {
+      //           dragging: (x, y) => {
+      //             col.width = Math.max(x, 1)
+      //           }
+      //         }
+      //       }
+      //       const drag = h('vue-draggable-resizable', { ...dragProps })
+      //       return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
+      //     }
+      //   }
+      // }
       return {
         token: Vue.ls.get(ACCESS_TOKEN),
         jsonBody: [],
@@ -411,14 +417,15 @@
           {
             title: this.$t('OperationDetails'),
             dataIndex: 'logContent',
-            align: 'center',
+            align: 'left',
+            width: 320,
             ellipsis: true,
             scopedSlots: { customRender: 'content' }
           },
           {
             title: this.$t('OperationTime'),
             dataIndex: 'createTime',
-            align: 'center',
+            align: 'left',
             ellipsis: true,
             width: 180
           }
@@ -767,10 +774,10 @@
             let num = 0
             this.content = []
             jsonHead.forEach((res, index) => {
-              console.log(res)
+              // console.log(res)
               // 配置列
               if (res.type) {
-                console.log('配置')
+                // console.log('配置')
                 this.columns.push({
                   dataIndex: res.db_field_name,
                   align: 'left',
@@ -965,7 +972,7 @@
                 Object.keys(Obj).forEach((item) => {
                   if (Obj[item] instanceof Object && Obj[item].controlType !== undefined) {
                     Obj[item].list.forEach((itemLi) => {
-                      console.log(item)
+                      // console.log(item)
                       if((this.currentPersonRole == 'homo' || this.currentPersonRole == 'admin') && item == 'referencesCol'){
                         itemLi.isLock = 0
                       }else{

jero-web/src/mixins/header.js

@@ -5,9 +5,10 @@ const events = {
   move: 'mousemove',
   stop: 'mouseup'
 }
-let tableAll = []
+let tableAll = [] // 单个页面存放多个表格的columns
 var columnsAll = []
 var columnsKey = ''
+let minColumn = [] // 存放设置最小宽的列及宽度
 const DragHandler = {
   name: 'nio-drag-handler',
   //获取混入的方法（重新设置表头宽度）
@@ -86,9 +87,10 @@ const DragHandler = {
     return h('div', { class: 'nio-drag-handler', on: { mousedown: this.handleMouseDown } }, [line])
   }
 }
-const ResizeHeaderOne = function(val, name) {
+const ResizeHeaderOne = function(val, name ,minWidths) {
   columnsAll = val
   columnsKey = name
+  minColumn = minWidths
   if(tableAll.indexOf(val) === -1){
     tableAll.push(val)
   }
@@ -96,16 +98,44 @@ const ResizeHeaderOne = function(val, name) {
     const { key, column, ...restProps } = props
     let col = {}
     // 处理多级表头
-    col = getRenderCoL(key, val)
+    // col = getRenderCoL(key, val)
+    col = getRenderCoL(key, columnsAll)
     let content = [].concat(children)
+    console.log(col)
     if (col) {
-      const handlerVNode = h(DragHandler, {
-        props: {
-          width: col.width,
-          minWidth: Math.min(col.width, 100),
-          column: col
+      let handlerVNode;
+      if(minColumn && minColumn.length>0){
+        // 存放所有需要手动设置最小宽度的列的dataIndex
+        let colsdataIndex = []
+        minColumn.forEach((item)=>{
+          colsdataIndex.push(item[0].dataIndex)
+          handlerVNode = h(DragHandler, {
+            props: {
+              width: col.width,
+              minWidth: Math.min(item[1]),
+              column: JSON.parse(JSON.stringify(item[0]))
+            }
+          }, [])
+        })
+        // 不需要手动设置最小宽度的列
+        if(colsdataIndex.indexOf(col.dataIndex) === -1){
+          handlerVNode = h(DragHandler, {
+            props: {
+              width: col.width,
+              minWidth: Math.min(col.width, 100),
+              column: col
+            }
+          }, [])
         }
-      }, [])
+      }else{
+        handlerVNode = h(DragHandler, {
+          props: {
+            width: col.width,
+            minWidth: Math.min(col.width, 100),
+            column: col
+          }
+        }, [])
+      }
       content = content.concat(
         handlerVNode
       )
@@ -119,10 +149,11 @@ const ResizeHeaderOne = function(val, name) {
 }
 export const ResizeHeader = {
   methods: {
-    drag(columns, name) {
+    drag(columns, name ,minWidths) {
       return {
         header: {
-          cell: ResizeHeaderOne(columns, name)
+          // minWidths : 最小宽度 => [[需要设置的列,最小宽],[需要设置的列,最小宽],...]
+          cell: ResizeHeaderOne(columns, name,minWidths)
         }
       }
     }