明细添加字段设置功能封装开发

Code/Fe/src/components/commonTabel-drawer/index.vue

@@ -66,29 +66,42 @@
             :propsData="propsData"
           >
           </curren-descriptions>
+          <!-- todo-new 代码整理-->
+          <div 
+            class="currenTabel-drawer-mx-header" 
+            v-if="scope.value == 'mx' && (showDetailColumnsSet || showDetailFilters)"
+          >
+            <el-button 
+              v-if="showDetailColumnsSet"
+              class="rowDropNotHideItem"
+              @click="columnsSettingHandle()"
+            >字段设置</el-button>
+            <!-- <el-button 
+              type="primary"
+              v-if="showDetailFilters"
+              @click="detailFiltersHandle()"
+            >筛选</el-button> -->
+          </div>
+          <!-- 字段设置弹窗 -->
           <rowDrop 
             @radio="rowDrop" 
             :tableColumns="tableColumns" 
             :visible="rowDropVisible"
             @closeRowDrop="closeRowDrop"
+            :source="'detail_api'"
+            :innerMaxHeight="'calc(90vh - 400px)'"
           ></rowDrop>
           <!-- currenTableDetails 组件 明细中带分页功能 -->
-          <!-- 字段设置弹窗 -->
-          <!-- <div 
-            class="mx-header" 
-            v-if="scope.value == 'mx'"
-          >
-            <el-button @click="columnsSettingHandle()">字段设置</el-button>
-          </div> -->
           <umyTable
             v-if="scope.value == 'mx'"
+            :isUpdate="isUpdate"
             :tableBorder="true"
             :tableData="propsData.details"
             :propsData="propsData"
             :tableColumns="tableColumns"
             :selectionTable="selectionTable"
             :requiredRules="false"
-            :setUTableHeight="260"
+            :setUTableHeight="showDetailColumnsSet ? 305 : 260"
             @sortChange="sortChange"
             @handleSelectionChange="handleSelectionChange"
             @inlineDialog="inlineDialog"
@@ -189,6 +202,7 @@ import currenTabs from "@/components/currenTabs"
 import currenTable from "@/components/currenTable"
 import pagination from "@/components/Pagination"
 import rowDrop from "@/components/rowDrop/index.vue"
+import { getParentNode } from '@/utils'
 export default {
   name: 'currenTabel-drawer',
   components: {
@@ -200,6 +214,16 @@ export default {
     rowDrop
   },
   props: {
+    // 是否显示明细-字段设置
+    showDetailColumnsSet:{
+      type: Boolean,
+      default: true
+    },
+    // 是否显示明细-筛选
+    showDetailFilters:{
+      type: Boolean,
+      default: true
+    },
     title: {
       type: Array,
       default: () => {
@@ -343,9 +367,22 @@ export default {
     },
   },
   mounted () {
+    // 点击外部，字段设置弹窗隐藏
+    document.addEventListener('click',(e)=>{
+      if(!this.rowDropVisible)return
+      let _class = "rowDropNotHideItem"
+      let _hasParent = getParentNode(e.target,_class)
+      let _current_class = e.target._prevClass || e.target.className
+      let _hasCurrent = _current_class ? String(_current_class).includes(_class) : false
+      if(!_hasParent && !_hasCurrent){
+        this.closeRowDrop()
+      }
+    })
   },
   data () {
     return {
+      // table 重新渲染所需key
+      isUpdate: false,
       // 明细-字段设置是否显示
       rowDropVisible: false,
       otherData:[], // 切换tabs页赋值
@@ -369,13 +406,17 @@ export default {
     }
   },
   methods: {
-    rowDrop(data) {
-      this.$emit('rowDrop',data)
-      // this.isUpdate = !this.isUpdate
+    rowDrop(data,type) {
+      this.$emit('rowDrop',data,type)
+      this.isUpdate = !this.isUpdate
     },
-    // 字段设置
+    // 明细-字段设置
     columnsSettingHandle(){
       this.rowDropVisible = !this.rowDropVisible
+    },
+    // 明细-筛选
+    detailFiltersHandle(){
+
     },
     // 关闭字段设置
     closeRowDrop() {

Code/Fe/src/components/commonTabel-drawer/style/index.scss

@@ -120,3 +120,8 @@
 ::v-deep .el-tabs__nav-wrap::after{
   content: unset !important;
 }
+
+.currenTabel-drawer-mx-header{
+  text-align: right;
+  padding: 0 10px 10px 0;
+}

Code/Fe/src/components/rowDrop/index.vue

@@ -15,7 +15,7 @@
         <i class="el-icon-success icon" v-if="allSeletType == 'NoSelect'" style="color:#999" ></i>
         全选
       </div>
-      <transition-group class="transition-wrapper" name="sort">
+      <transition-group class="transition-wrapper" :style="{maxHeight:innerMaxHeight}" name="sort">
         <div 
           v-for="(item,index) in dataList" 
           :key='index+item.label' 
@@ -65,18 +65,27 @@ export default {
     }
   },
   props: {
-      visible: {
-          type: Boolean,
-          default: () => {
-              return false
-          }
-      },
-      tableColumns: {
-          type: Array,
-          default: () => {
-              return [];
-          },
-      },
+    innerMaxHeight:{
+      type:String,
+      default:'calc(90vh - 280px)'
+    },
+    visible: {
+        type: Boolean,
+        default: () => {
+            return false
+        }
+    },
+    tableColumns: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    },
+    // list_api  detail_api  detailPage_api  list  detail  detailPage
+    source:{
+      type:String,
+      default:'list_api'
+    }
   },
   mounted() {
     this.historyTableColumns = JSON.parse(JSON.stringify(this.tableColumns))
@@ -92,8 +101,8 @@ export default {
         cancelButtonClass:'rowDropNotHideItem'
       }).then(() => {
         // 先set是为了字段设置按钮可以监听到缓存变化，之后在移除缓存  this.$store.getters.name.userName
-        localStorage.setItem('tableColumns_' + this.userName + '_' + this.$route.name, JSON.stringify([]))
-        localStorage.removeItem('tableColumns_' + this.userName + '_' + this.$route.name)
+        localStorage.setItem('file_Columns_' + this.source + '_' + this.userName + '_' + this.$route.name, JSON.stringify([]))
+        localStorage.removeItem('file_Columns_' + this.source + '_' +this.userName + '_' + this.$route.name)
         // let _resetCol = this.$isTableColumns[this.$route.name]
         let _resetCol = this.historyTableColumns
         _resetCol.forEach(item => {
@@ -101,7 +110,7 @@ export default {
         })
         this.dataList = _resetCol
         this.initSelectSta()
-        this.$emit('radio',_resetCol)
+        this.$emit('radio',_resetCol,this.source)
         this.close()
       }).catch(() => {
 
@@ -121,9 +130,9 @@ export default {
     },
     save () {
       this.$forceUpdate()
-      this.$emit('radio',this.dataList)
+      this.$emit('radio',this.dataList,this.source)
       // 本地缓存 当前用户名 + 路由名称
-      localStorage.setItem('tableColumns_' + this.userName + '_' + this.$route.name, JSON.stringify(this.dataList))
+      localStorage.setItem('file_Columns_' + this.source + '_' + this.userName + '_' + this.$route.name, JSON.stringify(this.dataList))
     },
     dragstart(value) {
         this.oldData = value
@@ -194,7 +203,7 @@ $paddingSize:20px;
   }
   .transition-wrapper {
     display: block;
-    max-height: calc(90vh - 280px);
+    // max-height: calc(90vh - 280px);
     overflow: auto;
     padding: 0 0 $paddingSize $paddingSize;
 

Code/Fe/src/mixins/TableHeaderMixins.js

@@ -297,9 +297,18 @@ export const TableHeaderMixins = {
         });
       }
     },
-    // 表头字段设置
-    rowDrop(data) {
-      this.tableColumns = data
+    /**
+     * 表头字段设置
+     * @param {*} data 数据
+     * @param {*} type 设置来源 
+     * list_api: 表头来自api的列表  detail_api: 表头来自api列表的明细
+     * list: 表头固定的列表  detail: 表头固定列表的明细
+     */
+     rowDrop(data,type) {
+      if(!type || type == 'list_api'){ this.apiColumns_Table = data }
+      if(type && type == 'detail_api'){ this.apiColumns_DetailsTable = data }
+      if(type && type == 'list'){ this.tableColumns = data }
+      if(type && type == 'detail'){ this.detailsTableColumns = data }
     }
   }
 }

Code/Fe/src/mixins/TableMixins.js

@@ -38,10 +38,6 @@ export const tableMixins = {
       tableDataDetails:[],
       //默认tag
       firstTabs:'xq',
-      // api的表头原始数据
-      apiColumns_Table_copy:null,
-      apiColumns_DesTions_copy:null,
-      apiColumns_DetailsTable_copy:null,
       // api的表头数据
       apiColumns_Table:null,
       apiColumns_DesTions:null,
@@ -54,29 +50,14 @@ export const tableMixins = {
       operationButtonsTable:[{label:'查看详情',name:'info'}]
     }
   },
-  mounted() {
-    // 用于api表头的字段设置监听同步
-    window.addEventListener('setItemEvent', (item) => {
-        if (item.key.indexOf('tableColumns') > -1) {
-          if(JSON.parse(item.newValue).length <= 0){
-            this.apiColumns_Table = this.apiColumns_Table_copy[this.$route.name]
-          }else{
-            this.apiColumns_Table = JSON.parse(item.newValue)
-          }
-        }
-    })
-  },
   methods: {
     // 获取通过api的表头数据，不可以在初始化处理，因为接口返回问题
     initApiColumns(tableColumns_api,tabsDesTions_api,detailsTableColumns_api){
-      // 复制一份原始数据（目的：字段设置恢复）
-      this.apiColumns_Table_copy = JSON.parse(JSON.stringify(tableColumns_api))
-      this.apiColumns_DesTions_copy = JSON.parse(JSON.stringify(tabsDesTions_api))
-      this.apiColumns_DetailsTable_copy = JSON.parse(JSON.stringify(detailsTableColumns_api))
       // 赋值表头数据
       this.apiColumns_Table = this.initTableColumns(tableColumns_api[this.$route.name])
       this.apiColumns_DesTions = tabsDesTions_api[this.$route.name]
-      this.apiColumns_DetailsTable = detailsTableColumns_api[this.$route.name]
+      this.apiColumns_DetailsTable = this.initTableColumns(detailsTableColumns_api[this.$route.name],'detail_api')
+    
     },
     //渲染数据
     paging(callback) {

Code/Fe/src/mixins/mixins.js

@@ -54,11 +54,12 @@ export const mixins = {
   },
   methods: {
     // 结合默认及缓存中的列表tableColumns数据做初始化
-    initTableColumns(){
+    initTableColumns(columnsData,type){
       let _list_defalut = columnsData ? columnsData : this.$isTableColumns[this.$route.name]
+      let _type = type ? type : 'list_api'
       if(!_list_defalut)return
-      let _local = localStorage.getItem('tableColumns_' + JSON.parse(localStorage.getItem('currentUserInfo')).userName + '_' + this.$route.name)
-      let _list_local = JSON.parse(localStorage.getItem('tableColumns_' + JSON.parse(localStorage.getItem('currentUserInfo')).userName + '_' + this.$route.name))
+      let _local = localStorage.getItem('file_Columns_' + _type + '_' + JSON.parse(localStorage.getItem('currentUserInfo')).userName + '_' + this.$route.name)
+      let _list_local = JSON.parse(localStorage.getItem('file_Columns_' + _type + '_' + JSON.parse(localStorage.getItem('currentUserInfo')).userName + '_' + this.$route.name))
       let _new_list = [] //格式化后的数据
       // 如果没有缓存则直接为默认值
       if(!_local){
@@ -71,14 +72,16 @@ export const mixins = {
       else{
         // 先处理缓存数据，设置索引
         let _locals = {}
-        _list_local.forEach((localItem,index) => {
-          localItem.itemIndex = index
-          if(localItem.showProp && typeof localItem.showProp == 'string'){
-            _locals[localItem.showProp] = localItem
-          }else{
-            _locals[localItem.prop] = localItem
-          }
-        })
+        if(_list_local){
+          _list_local.forEach((localItem,index) => {
+            localItem.itemIndex = index
+            if(localItem.showProp && typeof localItem.showProp == 'string'){
+              _locals[localItem.showProp] = localItem
+            }else{
+              _locals[localItem.prop] = localItem
+            }
+          })
+        }
         // 将缓存与默认设置合并，索引同步
         let _number = 0
         _list_defalut.forEach((defalutItem) => {

Code/Fe/src/utils/defaultButtons.js

@@ -40,9 +40,10 @@ export function defaultExportBtn(option) {
 }
 
 // 字段设置
-export function defaultFieldSettingBtn(option) {
+export function defaultFieldSettingBtn(option,source) {
+    let _source = source ? source : 'list_api'
     // todo:监听已经配置过的字段按钮更改状态特殊显示
-    let _local = localStorage.getItem('tableColumns_' + JSON.parse(localStorage.getItem('currentUserInfo')).userName + '_' + this.$route.name)
+    let _local = localStorage.getItem('file_Columns_' + _source + '_' + JSON.parse(localStorage.getItem('currentUserInfo')).userName + '_' + this.$route.name)
     let _type = ''
     let _num = 0
     if(_local){

Code/Fe/src/views/interfaceBoard/TestSchool.vue

@@ -28,6 +28,7 @@
     ></tablePagination>
     <curren-Drawer
       :title="apiColumns_DesTions"
+      @rowDrop="rowDrop"
       :tableColumns="apiColumns_DetailsTable"
       :tabsDesTions="apiColumns_DesTions"
       :DrawerLoading="Loading.DrawerLoading"