认证管理-上报库管理-查看-参数项查看页-列宽可拖拽

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

@@ -0,0 +1,39 @@
+<template>
+  <a-table
+    class="table"
+    :components="drag(columnshistory,'columnshistory')"
+    :columns="columnshistory"
+    :pagination="false"
+    :scroll="{x: '100%', 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: 'historyTable1',
+  props:['columnshistory','dataSourcehistory'],
+  mixins:[ResizeHeader, ResizeColumnProvide],
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div style="height: 100%">
-    <div class="box">
+    <div class="box"  v-if='isTrue'>
       <!--      -->
       <a-table
         class="table"
@@ -11,7 +11,7 @@
         :data-source="dataSource"
         :loading="loading"
         sticky
-        :components="components"
+        :components="drag(columns,'columns',JSON.parse(JSON.stringify(minWidthColumns)))"
         :columns="columns"
         :rowClassName="rowClassName"
         @change="tableOnChange"
@@ -168,28 +168,30 @@
       @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>
+      <history-table1 :columnshistory='columnshistory' :dataSourcehistory='dataSourcehistory'></history-table1>
+<!--      :components="drag(columnshistory,'columnshistory')"-->
+<!--      <a-table-->
+<!--        class="table"-->
+<!--        :columns="columnshistory"-->
+<!--        :pagination="false"-->
+<!--        :scroll="{x: '100%', 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')"
@@ -213,8 +215,10 @@
   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 historyTable1 from './historyTable1.vue'
 
   export default {
     name: 'index',
@@ -241,48 +245,52 @@
     },
     components: {
       CollectionType,
-      VueDraggableResizable
+      // VueDraggableResizable
+      historyTable1
     },
+    mixins:[ResizeHeader, ResizeColumnProvide],
     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 {
+        colIndexs:[],
+        minWidthColumns:[],
         token: Vue.ls.get(ACCESS_TOKEN),
         jsonBody: [],
         checkboxList: [],
@@ -297,6 +305,8 @@
         pageNo: 1,
         pageSize: 100,
         pageNohistory: 1,
+        description:'',
+        isTrue:false,
         pageSizehistory: 10,
         pageSizeOptions: ['100', '200'],
         total: 0,
@@ -340,14 +350,15 @@
           {
             title: this.$t('OperationDetails'),
             dataIndex: 'logContent',
-            align: 'center',
+            align: 'left',
             ellipsis: true,
-            scopedSlots: { customRender: 'content' }
+            scopedSlots: { customRender: 'content' },
+            width: 484
           },
           {
             title: this.$t('remarks'),
             dataIndex: 'remarks',
-            align: 'center',
+            align: 'left',
             ellipsis: true,
             width: 180,
             scopedSlots: { customRender: 'detailText' }
@@ -355,7 +366,7 @@
           {
             title: this.$t('OperationTime'),
             dataIndex: 'createTime',
-            align: 'center',
+            align: 'left',
             ellipsis: true,
             width: 180
           }
@@ -629,8 +640,20 @@
                   }
                 }
               }
+
+              if(res.type){
+                this.colIndexs.push(index)
+              }
             })
-            this.columns = [...this.columns]
+
+            this.isTrue = false
+            setTimeout(()=>{
+              this.isTrue = true
+              this.columns = [...this.columns]
+              this.colIndexs.forEach((item)=>{
+                this.minWidthColumns.push([this.columns[item],500])
+              })
+            },300)
             console.log(this.columns)
           }
         })
@@ -852,6 +875,7 @@
   }
 </style>
 <style scoped lang="less">
+@import'~@assets/less/common.less';
 .inputWid {
   min-width: 100px;
   height: 38px;
@@ -962,6 +986,10 @@
     text-justify: inter-ideograph;
     word-break: break-all
   }
+
+  ::v-deep .ant-table-placeholder{
+    margin-top: 8px !important;
+  }
 </style>
 <style>
   .resize-table-th {