From 679e4c8c939734f4db8aea24b07ef1dd5e37ecd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E8=99=B9=E7=9D=BF?= <297504645@qq.com>
Date: Thu, 9 Nov 2023 11:27:07 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=8E=A5=E5=8F=A3=E7=9C=8B=E6=9D=BF?=
 =?UTF-8?q?=EF=BC=8CAG=E6=9A=82=E5=AD=98=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AGTable/agGridBtn.vue      |  27 +++++
 .../src/components/AGTable/index.vue          | 107 ++++++++++++++++++
 .../src/components/searchOverall/index.vue    |   4 +
 .../components/tablePagination/index copy.vue |  95 +++++++++++++---
 .../src/components/tablePagination/index.vue  |  31 ++++-
 .../src/components/umyTable/index.vue         |   2 +-
 PC/InterFace.Dash/src/utils/utils.js          |   2 +
 7 files changed, 249 insertions(+), 19 deletions(-)
 create mode 100644 PC/InterFace.Dash/src/components/AGTable/agGridBtn.vue
 create mode 100644 PC/InterFace.Dash/src/components/AGTable/index.vue

diff --git a/PC/InterFace.Dash/src/components/AGTable/agGridBtn.vue b/PC/InterFace.Dash/src/components/AGTable/agGridBtn.vue
new file mode 100644
index 0000000..fd47f69
--- /dev/null
+++ b/PC/InterFace.Dash/src/components/AGTable/agGridBtn.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <el-button @click="clickHandle('edit')" size="small" type="text">编辑</el-button>
+        <el-button @click="clickHandle('delete')" size="small" type="text">删除</el-button>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            cellValue:null
+        };
+    },
+    mounted(){
+        console.log(16,this.params.api.getRowNode(2))
+        this.cellValue = this.params.data;
+    },
+    methods:{
+        clickHandle(data){
+            console.log(data,this.cellValue)
+        },
+        // getValueToDisplay(params) {
+        //     return this.params.api.getRowNode(params.rowIndex).data
+        // },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/PC/InterFace.Dash/src/components/AGTable/index.vue b/PC/InterFace.Dash/src/components/AGTable/index.vue
new file mode 100644
index 0000000..40111b8
--- /dev/null
+++ b/PC/InterFace.Dash/src/components/AGTable/index.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <ag-grid-vue
+          :style="'width:500px; height:'+uTableHeight + 'px'"
+          class="ag-theme-alpine"
+          :columnDefs="columnDefs"
+          :rowData="rowData"
+          :defaultColDef="defaultColDef"
+      >
+      </ag-grid-vue>
+  </div>
+</template>
+<script>
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-alpine.css";
+import { AgGridVue } from 'ag-grid-vue';
+import agGridBtn from './agGridBtn.vue';
+export default {
+  name: "agGridDemo",
+  components: {
+    AgGridVue,
+    agGridBtn
+  },
+  props:{
+    // 已app-main高度为100%  需要减掉的高度
+    setUTableHeight: {
+      type: Number,
+      default: () => {
+        return 280;
+      }
+    }
+  },
+  data() {
+      return {
+          uTableHeight:null,//表格撑开高度
+          columnDefs: null,
+          rowData: null,
+          defaultColDef: {
+              // flex:1,
+              filter: true,
+              sortable: true,
+              floatingFilter: true,
+              resizable:true,
+              cellClass:"cell-wrap-text",
+              headerClass: 'ag-header-center',
+              autoHeight:true
+          },
+      };
+  },
+  watch: {
+    // 更改高度
+    setUTableHeight(n,o){
+      this.setTableHeightHandle(n)
+    }
+  },
+  mounted() {
+      this.columnDefs = [
+          {
+              field:'操作',
+              lockPosition: 'left',
+              cellRenderer: 'agGridBtn',
+              cellClass: 'locked-col',
+              width: 120,
+              suppressNavigable: true,
+              pinned:'right',
+              floatingFilter:false
+          },
+          { field: "make" },
+          { field: "model" },
+          { field: "price" },
+      ];
+
+      this.rowData = [
+          { make: "Toyota", model: "Celica", price: 35000 },
+          { make: "Ford", model: "Mondeo", price: 32000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+          { make: "Porsche", model: "Boxster", price: 72000 },
+      ];
+    this.setTableHeightHandle()
+  },
+  methods:{
+    // 设置表格高度
+    setTableHeightHandle(height){
+      let _height = height || this.setUTableHeight
+      let _app_height = document.getElementsByClassName('app-main')[0].clientHeight
+      this.uTableHeight = Number(_app_height) - Number(_height)
+      console.log()
+    },
+    // 获取表格高度 勿删 业务当中有用
+    getTableHeight(){
+      return this.uTableHeight
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/PC/InterFace.Dash/src/components/searchOverall/index.vue b/PC/InterFace.Dash/src/components/searchOverall/index.vue
index ec101c9..e46fc19 100644
--- a/PC/InterFace.Dash/src/components/searchOverall/index.vue
+++ b/PC/InterFace.Dash/src/components/searchOverall/index.vue
@@ -524,6 +524,10 @@
             type: 'warning'
           }).then(() => {
             this.moreListData.filters.splice(val, 1)
+            this.$nextTick(()=>{
+              this.componentsHeight = this.getAllSearchInnerHeight() + 20
+              this.$parent.changeTableHeight(this.getAllSearchInnerHeight())
+            })
           }).catch(() => {
             //   this.modalAppendToBody = false
           });
diff --git a/PC/InterFace.Dash/src/components/tablePagination/index copy.vue b/PC/InterFace.Dash/src/components/tablePagination/index copy.vue
index c0238bc..d7f47e5 100644
--- a/PC/InterFace.Dash/src/components/tablePagination/index copy.vue	
+++ b/PC/InterFace.Dash/src/components/tablePagination/index copy.vue	
@@ -1,10 +1,12 @@
 <template>
   <div class="tablePagination">
+    <!-- 原版本 使用umytable版本 -->
     <!-- 头部按钮 -->
     <div class="table-nav">
       <curren-Button
+        v-if="headerButttondata"
         ref="tablePagination_topNav"
-        :Butttondata="currenButtonData"
+        :Butttondata="headerButttondata"
         @tableButtonClick="topbutton"
         @quicklySearchClick="quicklySearchClick"
         @quicklySearchClear="quicklySearchClear"
@@ -25,6 +27,7 @@
       :tableColumns="tableColumns"
       @overallSearchFormClick="overallSearchFormClick"
       :httpOverallSearchData="httpOverallSearchData"
+      :selectMaxHeight="selectMaxHeight"
     >
       <!-- 插槽预留 -->
       <slot name="searchPrimarySlot"></slot>
@@ -48,7 +51,7 @@
         :tableColumns="tableColumns | isTableColumns"
         :isShowIndex="isShowIndex"
         :selectionTable="tableSelection"
-        :setUTableHeight="setUTableHeight || uTableTopHeight"
+        :setUTableHeight="uTableTopHeight"
         @sortChange="sortChange"
         @handleSelectionChange="handleSelectionChange"
         @inlineDialog="inlineDialog"
@@ -91,10 +94,22 @@ export default {
     rowDrop
   },
   props: {
+    // 不使用权限的按钮
+    noUsePermissionBtn:{
+      type: Array,
+      default: () => {
+        return ['refresh','field','export','filter']//刷新，字段设置，导出，筛选
+      }
+    },
     rowMaxHeight:{
       type:String,
       default:'calc(90vh - 280px)'
     },
+    // 筛选条件最大高度
+    selectMaxHeight:{
+      type: String,
+      default: '174px'
+    },
     // 筛选高度
     searchOverallCoverHeight:{
       type: String,
@@ -222,10 +237,12 @@ export default {
   },
   data () {
     return {
+      headerButttondata:null,
       // 字段设置是否显示
       rowDropVisible: false,
       // table 重新渲染所需key
       isUpdate: false,
+      appRemoveHeight:165,
       // 除去table的高度
       uTableTopHeight:165,
       // table外部高度控制，用于点击筛选动画处理
@@ -265,8 +282,11 @@ export default {
     }
   },
   mounted(){
+    this.appRemoveHeight = this.setUTableHeight || 165
+    this.uTableTopHeight = this.appRemoveHeight
     this.uTableOuterHeight =  this.$refs.tablePaginationTableRef.getTableHeight()
     this.uTableOuterHeight_init = Number(JSON.stringify(this.uTableOuterHeight))
+    this.initButttondata()
     
     // 点击外部，字段设置弹窗隐藏
     document.addEventListener('click',(e)=>{
@@ -281,6 +301,29 @@ export default {
     })
   },
   methods: {
+    initButttondata(){
+      let _list = []
+      this.currenButtonData.forEach(item=>{
+        if(item.permission){
+          _list.push(item)
+        }else{
+          if(this.noUsePermissionBtn.indexOf(item.name) < 0){
+            let _scope = item.clientScope || localStorage.getItem('appClientScope')
+            item.permission =  [_scope + '.' +this.$route.name+'.'+(item.permissionName || item.name)]
+          }else{
+            item.permission = []
+          }
+          _list.push(item)
+        }
+      })
+      this.headerButttondata = _list
+    },
+    // 重新渲染表格
+    doFreshTableLayout(){
+      if(this.$refs.tablePaginationTableRef && this.$refs.tablePaginationTableRef.doFreshLayout){
+        this.$refs.tablePaginationTableRef.doFreshLayout()
+      }
+    },
     rowDrop(data,type) {
       this.$emit('rowDrop',data,type)
       this.$nextTick(()=>{
@@ -296,27 +339,47 @@ export default {
         if(this.primarySearchOption && this.primarySearchOption.length > 0){
           this.$nextTick(()=>{
             let _search_height = this.$refs.searchOverallRef.getSearchPrimaryHeight()
-            if(this.showSearchOverall){
-              let _margin = 20
-              this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin
-              setTimeout(()=>{
-                this.uTableTopHeight +=  _search_height + _margin
-              },0)
-            }else{
-              this.uTableOuterHeight = this.uTableOuterHeight_init
-              setTimeout(()=>{
-                this.uTableTopHeight = 165
-              },0)
-            }
+            this.changeTableHeight(_search_height)
+            // if(this.showSearchOverall){
+            //   let _margin = 20
+            //   this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin
+            //   setTimeout(()=>{
+            //     this.uTableTopHeight +=  _search_height + _margin
+            //   },0)
+            // }else{
+            //   this.uTableOuterHeight = this.uTableOuterHeight_init
+            //   setTimeout(()=>{
+            //     this.uTableTopHeight = 165
+            //   },0)
+            // }
           })
         }
-      } 
+        this.$nextTick(()=>{
+          let _search_height = this.$refs.searchOverallRef.getAllSearchInnerHeight()
+          this.changeTableHeight(_search_height)
+        })
+      }
       // 字段设置
       else if (val == 'field') {
         this.rowDropVisible = !this.rowDropVisible
       }
       this.$emit("topbutton", val,item)
     },
+    // 更改筛选时候的table高度问题
+    changeTableHeight(minusHeight=0){
+      if(this.showSearchOverall){
+        let _margin = 20
+        this.uTableOuterHeight = this.uTableOuterHeight_init - minusHeight - _margin
+        setTimeout(()=>{
+          this.uTableTopHeight =  minusHeight + this.appRemoveHeight + _margin
+        },0)
+      }else{
+        this.uTableOuterHeight = this.uTableOuterHeight_init
+        setTimeout(()=>{
+          this.uTableTopHeight = this.appRemoveHeight
+        },0)
+      }
+    }, 
     // 快速搜索 - 搜索按钮
     quicklySearchClick (val,option) {
       this.$emit("quicklySearchClick", val,option,this.$refs.searchOverallRef)
@@ -369,7 +432,7 @@ export default {
     // 全面筛选组件所有按钮事件
     overallSearchFormClick(options){
       //增加快速搜索实体
-      options.vm_quickly = this.$refs.tablePagination_topNav.getQuicklySearchDom()
+      if(this.$refs.tablePagination_topNav)options.vm_quickly = this.$refs.tablePagination_topNav.getQuicklySearchDom()
       this.$emit("overallSearchFormClick", options)
     },
     // 关闭字段设置
diff --git a/PC/InterFace.Dash/src/components/tablePagination/index.vue b/PC/InterFace.Dash/src/components/tablePagination/index.vue
index 455d233..affc20a 100644
--- a/PC/InterFace.Dash/src/components/tablePagination/index.vue
+++ b/PC/InterFace.Dash/src/components/tablePagination/index.vue
@@ -42,7 +42,34 @@
     ></rowDrop>
     <!-- 列表 -->
     <div class="uTableOuter" ref="uTableOuterRef" :style="{height:uTableOuterHeight + 'px',overflow:'hidden'}">
-      <umyTable
+      <AGTable
+        ref="tablePaginationTableRef"
+        :setUTableHeight="uTableTopHeight"
+      ></AGTable>
+      <!-- <umyTable
+        :isUpdate="isUpdate"
+        :tableLoading="tableLoading"
+        :tableData="tableData"
+        :tableColumns="tableColumns | isTableColumns"
+        :isShowIndex="isShowIndex"
+        :selectionTable="tableSelection"
+        @sortChange="sortChange"
+        @handleSelectionChange="handleSelectionChange"
+        @inlineDialog="inlineDialog"
+        :buttonOperationList_left="buttonOperationList_left"
+        @buttonOperationClick_left="buttonOperationClick_left"
+        :buttonOperationList_right="buttonOperationList_right"
+        @buttonOperationClick_right="buttonOperationClick_right"
+        :tableBorder="true"
+        :firstFixed="true"
+        :cellStyle = "cellStyle"
+        :showOverflowTooltip="showOverflowTooltip"
+      >
+        <template>
+          <slot></slot>
+        </template>
+      </umyTable> -->
+      <!-- <umyTable
         ref="tablePaginationTableRef"
         :isUpdate="isUpdate"
         :tableLoading="tableLoading"
@@ -66,7 +93,7 @@
         <template>
           <slot></slot>
         </template>
-      </umyTable>
+      </umyTable> -->
     </div>
     <!-- 页码 -->
     <pagination
diff --git a/PC/InterFace.Dash/src/components/umyTable/index.vue b/PC/InterFace.Dash/src/components/umyTable/index.vue
index 397654c..1129dc6 100644
--- a/PC/InterFace.Dash/src/components/umyTable/index.vue
+++ b/PC/InterFace.Dash/src/components/umyTable/index.vue
@@ -414,7 +414,7 @@ export default {
         this.$refs.multipleTable.$forceUpdate()
       });
     },
-    // 获取表格高度 误删 业务当中有用
+    // 获取表格高度 勿删 业务当中有用
     getTableHeight(){
       return this.uTableHeight
     },
diff --git a/PC/InterFace.Dash/src/utils/utils.js b/PC/InterFace.Dash/src/utils/utils.js
index 6e3cf6c..fde7266 100644
--- a/PC/InterFace.Dash/src/utils/utils.js
+++ b/PC/InterFace.Dash/src/utils/utils.js
@@ -61,6 +61,7 @@ import conditionFilters from "@/components/conditionFilters" //高级筛选
 import searchPage from '@/components/searchPage' //autocomplete拉取数据探弹窗
 import newAndEdiDialog from '@/components/newAndEdiDialog' //普通新增与编辑
 import umyTable from '@/components/umyTable' // 用于数据量过大table
+import AGTable from '@/components/AGTable' // 用于数据量过大table
 import filterForDetailPage from '@/components/filterForDetailPage' //明细查询
 import addEditFromApiPop from '@/components/addEditFromApiPop' //新增与编辑(只有主表)，参数配置从api获取
 
@@ -113,6 +114,7 @@ Vue.component('conditionFilters', conditionFilters)
 Vue.component('searchPage', searchPage)
 Vue.component('newAndEdiDialog', newAndEdiDialog)
 Vue.component('umyTable', umyTable)
+Vue.component('AGTable', AGTable)
 Vue.component('filterForDetailPage', filterForDetailPage)
 Vue.component('addEditFromApiPop', addEditFromApiPop)
 Vue.prototype.$echarts = eCharts