agilebuilder-ui 1.1.80 → 1.1.81-tmp1

package/packages/super-grid/src/columns-config.vue

@@ -19,6 +19,9 @@
       <el-button size="default" @click="resetConfig">
         {{ $t('imatrixUIPublicModel.reset') }}
       </el-button>
+      <el-button size="default" @click="showTabConfig">
+        {{ $t('superGrid.tabConfig') }}
+      </el-button>
       <el-button size="default" @click="$emit('close')">
         {{ $t('imatrixUIPublicModel.cancel') }}
       </el-button>
@@ -27,12 +30,12 @@
       >
     </div>
     <el-table v-if="hasLoaded" :data="columns" class="custom-config-elTable" max-height="450" row-key="prop">
-      <el-table-column :label="$t('superGrid.label')" property="label" width="220">
+      <el-table-column :label="$t('superGrid.label')" property="label" width="150">
         <template v-slot="scope">
           <span :title="scope.row.label" class="ellipsis cell--span">{{ scope.row.label }}</span>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('superGrid.isShow')" property="showType" width="120">
+      <el-table-column :label="$t('superGrid.isShow')" property="showType" width="100">
         <template v-slot="scope">
           <el-select
             v-model="scope.row.showType"
@@ -47,7 +50,7 @@
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('superGrid.isExportable')" property="exportType" width="120">
+      <el-table-column v-if="!isFormSubTable" :label="$t('superGrid.isExportable')" property="exportType" width="100">
         <template v-slot="scope">
           <el-select
             v-model="scope.row.exportType"
@@ -73,14 +76,14 @@
             @clear="clearDisplayOrder(scope.row)"
             @input="handleInput(scope.row, 'displayOrder')"
           />
-          <el-select v-else v-model="scope.row.displayOrderType">
+          <el-select v-else v-model="scope.row.displayOrderType" :disabled="isDisabledCommon(scope.row)">
             <el-option :label="$t('superGrid.default')" value="default" />
             <el-option :label="$t('superGrid.custom')" value="custom" />
           </el-select>
         </template>
       </el-table-column>
       <el-table-column
-        v-if="isDragColumn"
+        v-if="isDragColumn && !isFormSubTable"
         :label="$t('superGrid.searchDisplayOrder')"
         property="searchDisplayOrder"
         sortable
@@ -99,14 +102,14 @@
           <el-select
             v-else
             v-model="scope.row.searchDisplayOrderType"
-            :disabled="!searchColumns.includes(scope.row.prop)"
+            :disabled="isDisabledCommon(scope.row) && !searchColumns.includes(scope.row.prop)"
           >
             <el-option :label="$t('superGrid.default')" value="default" />
             <el-option :label="$t('superGrid.custom')" value="custom" />
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('superGrid.width')" property="widthType">
+      <el-table-column :label="$t('superGrid.width')" property="widthType" width="100">
         <template v-slot="scope">
           <el-input
             v-if="scope.row.widthType && scope.row.widthType === 'custom'"
@@ -121,7 +124,22 @@
           </el-select>
         </template>
       </el-table-column>
+      <el-table-column :label="$t('superGrid.tab')" property="tabType">
+        <template v-slot="scope">
+          <el-select v-if="scope.row.tabType && scope.row.tabType === 'custom'"
+            v-model="scope.row.tabCode"
+            clearable
+            @clear="clearTab(scope.row)">
+            <el-option v-for="tab in tabs" :key="tab.code" :label="tab.name" :value="tab.code" />
+          </el-select>
+          <el-select v-else v-model="scope.row.tabType" :disabled="isDisabledTab(scope.row)">
+            <el-option :label="$t('superGrid.default')" value="default" />
+            <el-option :label="$t('superGrid.custom')" value="custom" />
+          </el-select>
+        </template>
+      </el-table-column>
     </el-table>
+    <TabConfig v-if="isShowTabConfig" :list-code="listCode" :list-tabs="tabs" @close="closeTabConfig"/>
   </el-dialog>
 </template>
 
@@ -130,6 +148,7 @@ import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
 import * as Vue from 'vue'
 import store from './store'
 import Sortable from 'sortablejs'
+import TabConfig from './tab-config.vue'
 
 export default {
   name: 'ColumnsConfig',
@@ -138,29 +157,36 @@ export default {
       type: String,
       default: ''
     },
-    visibleColumns: {
-      type: Object,
-      default: () => {}
-    }
+    isFormSubTable: {
+      type: Boolean,
+      default: false
+    },
+  },
+  components:{
+    TabConfig
   },
   data() {
     return {
       columns: [],
       searchColumns: [],
-      hasLoaded: false
+      hasLoaded: false,
+      isShowTabConfig: false,
+      tabs: []
     }
   },
   created() {
-    for (let i = 0; i < this.visibleColumns.length; i++) {
-      const column = this.visibleColumns[i]
-      if (column.queryType === 'normal' && !column.custom && column.prop) {
-        this.searchColumns.push(column.prop)
-      }
-    }
+    // for (let i = 0; i < this.visibleColumns.length; i++) {
+    //   const column = this.visibleColumns[i]
+    //   if (column.queryType === 'normal' && !column.custom && column.prop) {
+    //     this.searchColumns.push(column.prop)
+    //   }
+    // }
   },
   mounted() {
-    this.listAllColumns().then((columns) => {
-      this.columns = columns
+    this.listAllColumns().then((data) => {
+      this.columns = data.allColumns
+      this.tabs = data.allTabs
+      this.getSearchColumnProps(this.columns)
       this.hasLoaded = true
       this.$nextTick(() => {
         this.dragColumnDisplayOrder()
@@ -168,6 +194,21 @@ export default {
     })
   },
   methods: {
+    getSearchColumnProps(columns){
+      for (let i = 0; i < columns.length; i++) {
+      const column = columns[i]
+      if (column.queryType === 'normal' && !column.custom && column.prop) {
+        this.searchColumns.push(column.prop)
+      }
+    }
+    },
+    isDisabledTab(row) {
+      // 序号、复选框列不可以配置是否显示；占位符列不可以设置是否显示；当不是自定义的显示状态为false时，不可配置是否显示
+      return (
+        (row.prop && (row.prop === '$index' || row.prop === '$selection')) ||
+        row.custom === true
+      )
+    },
     isDisabledShow(row) {
       // 序号、复选框列不可以配置是否显示；占位符列不可以设置是否显示；当不是自定义的显示状态为false时，不可配置是否显示
       return (
@@ -184,6 +225,12 @@ export default {
         (row.exportType && row.exportType !== 'false' && row.exportable === false)
       )
     },
+    isDisabledCommon(row) {
+      // 序号、复选框列不可以配置是否导出
+      return (
+        (row.prop && (row.prop === '$index' || row.prop === '$selection'))
+      )
+    },
     changeShow(row, value) {
       if (value !== undefined && value === 'false') {
         row.show = false
@@ -229,8 +276,10 @@ export default {
             showClose: true
           })
           this.hasLoaded = false
-          this.listAllColumns().then((columns) => {
-            this.columns = columns
+          this.listAllColumns().then((data) => {
+            this.columns = data.allColumns
+            this.tabs = data.allTabs
+            this.getSearchColumnProps(this.columns)
             this.hasLoaded = true
             this.$nextTick(() => {
               this.dragColumnDisplayOrder()
@@ -243,7 +292,7 @@ export default {
     listAllColumns() {
       return new Promise((resolve, reject) => {
         const url =
-          window.$vueApp.config.globalProperties.baseAPI + '/component/super-grids/all-list-columns/' + this.listCode
+          window.$vueApp.config.globalProperties.baseAPI + '/component/super-grids/all-list-column-and-tabs/' + this.listCode
         const gridParams = store.get(this.listCode)
         const params = {}
         const isSql = gridParams.isSql
@@ -253,8 +302,8 @@ export default {
         }
         this.$http
           .post(url, params)
-          .then((columns) => {
-            resolve(columns)
+          .then((data) => {
+            resolve(data)
           })
           .catch((error) => {
             reject(error)
@@ -267,6 +316,9 @@ export default {
     clearWidth(row) {
       row.widthType = 'default'
     },
+    clearTab(row){
+      row.tabType = 'default'
+    },
     handleInput(row, field) {
       if (row[field] < 0) {
         row[field] = 0 // 如果值小于 0，则重置为 0
@@ -322,6 +374,15 @@ export default {
           })
         }
       })
+    },
+    showTabConfig(){
+      this.isShowTabConfig = true
+    },
+    closeTabConfig(tabs){
+      if(tabs){
+        this.tabs = tabs
+      }
+      this.isShowTabConfig = false
     }
   },
   emits: ['open', 'opend', 'close', 'closed', 'reset', 'opend', 'close', 'closed']

package/packages/super-grid/src/list-tabs.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-button-group>
+    <el-button v-for="tab in tabs" :key="tab.code" :class="currentTabCode&&currentTabCode===tab.code?'active-tab':''" @click="changeTab(tab)">{{tab.name}}</el-button>
+  </el-button-group>
+</template>
+
+<script>
+import * as Vue from 'vue'
+
+export default {
+  name: 'ListTabs',
+  props: {
+    listCode:{
+      type:String,
+      default: null
+    },
+    listTabs: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    currentTabCode: {
+      type:String,
+      default: null
+    },
+    otherTabColumnProps:{
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    const listTabsCopy = JSON.parse(JSON.stringify(this.listTabs))
+    return {
+      listTabsCopy,
+      tabs:[],
+      otherListTabProps: []
+    }
+  },
+  created() {
+    if(this.otherTabColumnProps && this.otherTabColumnProps.length > 0){
+      let tabs = []
+      if(this.listTabsCopy && this.listTabsCopy.length > 0){
+        // console.log('22222--this.listTabs=',this.listTabsCopy)
+        tabs = this.listTabsCopy.concat([{code:'_other', name:this.$t('superGrid.otherTabName'), displayOrder:1000}])
+      }
+      this.tabs = tabs
+    } else {
+      this.tabs = this.listTabsCopy
+    }
+    this.otherListTabProps = this.otherTabColumnProps
+  },
+  mounted() {
+    
+  },
+  methods: {
+    changeTab(tab){
+      this.$emit('change-tab', {tab,columnProps: this.otherListTabProps})
+    }
+  }
+}
+</script>
+<style scoped>
+.active-tab{
+  background-color:#409EFF;
+  color: white !important
+}
+</style>

package/packages/super-grid/src/super-grid-service.js

@@ -169,6 +169,9 @@ const superGridService = {
                 gridParams.pagination = this.pagination
                 gridParams.pageContext = this.pageContext
                 gridParams.configureObj = this.configureObj
+                gridParams.listTabs = this.listTabs
+                gridParams.otherTabColumnProps = this.otherTabColumnProps
+                this.currentTabCode = this.listTabs && this.listTabs.length > 0? this.listTabs[0].code: null
                 this.tableName = this.basicInfo.tableName
                 gridParams.hiddenColumns = this.options.hiddenColumns
                   ? JSON.parse(JSON.stringify(this.options.hiddenColumns))
@@ -187,6 +190,7 @@ const superGridService = {
                 this.isSubTableShowPage = this.isFormSubTable ? this.isShowPage : false
                 gridParams.isSubTableShowPage = this.isSubTableShowPage
                 this.getDetailColumn()
+                this.filterTabColumns(this.currentTabCode)
                 this.hasLoadedColumns = true
                 let canFetchData = true
                 if (isHasOptionFunction('loadBeforeSend', this.code)) {

package/packages/super-grid/src/super-grid.vue

@@ -157,11 +157,18 @@
           v-on="item.$on"
         />
       </el-table>
-      <div v-if="showPagination && !isShowCard" class="super-grid-main-table-footer-view">
-        <div class="yx-flex-wrap" style="gap: 10px">
-          <div v-if="isFormSubTable && pagination && isShowPage" style="width: 16px; height: 16px"></div>
+      <div v-if="!isShowCard" class="super-grid-main-table-footer-view">
+        <div class="yx-flex-wrap" style="gap: 10px;align-items:center">
+          <!-- {{listTabs}} -->
+          <list-tabs
+            v-if="refreshGrid && hasLoadedColumns"
+            :list-tabs="listTabs"
+            :list-code="code"
+            :other-tab-column-props="otherTabColumnProps"
+            :current-tab-code="currentTabCode"
+            @change-tab="changeTab"/>
           <div
-            v-if="basicInfo.customConfig && !isFormSubTable"
+            v-if="basicInfo.customConfig"
             class="el-icon-setting"
             :title="$t('superGrid.columnConfig')"
             @click="configColumns"
@@ -174,7 +181,7 @@
           </div>
         </div>
         <el-pagination
-          v-if="pagination && isShowPage"
+          v-if="showPagination && pagination && isShowPage"
           v-model:current-page="currentPage"
           v-model:page-size="pagination.pageSize"
           background
@@ -195,9 +202,9 @@
 
     <columns-config
       v-if="showColumnConfig"
-      :visible-columns="visibleColumns"
       :list-code="code"
       :is-sql="isSql"
+      :is-form-sub-table="isFormSubTable"
       @close="closeCustomConfig($event)"
       @reset="resetCustomConfig($event)"
     />
@@ -252,6 +259,7 @@ import SearchForm from './search-form.vue'
 import searchFormDialog from './search-form-dialog.vue'
 import RowDetail from './row-detail.vue'
 import MobileCard from './components/mobile-table-card.jsx'
+import ListTabs from './list-tabs.vue'
 import { getEntityFieldValueWithOutCase, setEntityFieldValue } from '../../../src/utils/util'
 import eventBus from './eventBus'
 import {
@@ -304,7 +312,8 @@ export default {
     ElIconSetting,
     ElIconRefresh,
     RowDetail,
-    MobileCard
+    MobileCard,
+    ListTabs
   },
   name: 'SuperGrid',
   // mixins: [resizeMixin],
@@ -530,7 +539,11 @@ export default {
       orderType: 'ascending', // 排序方式
       orderColumns: [], // 排序字段集合
       orderColumn: null, // 排序字段实体
-      columnsMap: null // 字段map集合
+      columnsMap: null, // 字段map集合
+      listTabs: [], // 页签列表集合
+      tabColumns: {}, // 页签和字段存储集合
+      currentTabCode: null, // 当前选中的页签
+      otherTabColumnProps: [] // “其它信息”页签中的字段名集合
     }
   },
   computed: {
@@ -603,8 +616,13 @@ export default {
         // 字段对象集合
         let columnsMap = {}
         let orderColumns = []
+        let columns = this.columns
+        if(!this.isShowCard && this.tabColumns && this.currentTabCode && this.tabColumns[this.currentTabCode] && this.tabColumns[this.currentTabCode].length > 0){
+          // 不是卡片时，列表模式时才需要多页签功能
+          columns = this.tabColumns[this.currentTabCode]
+        }
         return setAttrs(
-          this.columns.filter((column) => {
+          columns.filter((column) => {
             if (!this.isHasSearchColumn && column.queryType && column.queryType === 'normal') {
               // 表示有查询字段
               this.isHasSearchColumn = true
@@ -3043,6 +3061,8 @@ export default {
       this.refreshGridInitialize()
     },
     refreshGridInitialize() {
+      // 清空页签字段内容
+      this.tabColumns = {}
       this.initialize().then(() => {
         // 添加该代码是为了解决保存字段个性化配置后，重新渲染列表问题，例如：列宽重新计算问题
         this.refreshGrid = false
@@ -4027,6 +4047,78 @@ export default {
         }
         // this.packageSubTableData(gridParams, sortSubTableDataList, sortInfo, this.isSubSearch, this.orderColumn)
       }
+    },
+    changeTab({tab, columnProps}){
+      if(tab && tab.code ){
+        this.currentTabCode = tab.code
+      }
+      if(tab && tab.code && tab.code !== '_other' && !this.tabColumns[tab.code]){
+        // 非其它信息页签
+        this.filterTabColumns(tab.code)
+      } else if(tab && tab.code && tab.code === '_other' && !this.tabColumns[tab.code]){
+        // 其它信息页签
+        const tabCodes = []
+        this.listTabs.forEach(tab=>{
+          tabCodes.push(tab.code)
+        })
+        let tabColumns = []
+        for (let i = 0; i < this.columns.length; i++) {
+          const column = this.columns[i]
+          if(column && (column.prop === '$index' || column.prop === '$selection' || column.prop === 'operation')){
+            tabColumns.push(column)
+          } else if(column.dynamic && (!column.children || column.children.length === 0) && (!column.tabCode || tabCodes.indexOf(column.tabCode)<0)){
+            // 动态列没配置页签编码的显示到其它页签中
+            tabColumns.push(column)
+          }else if (column.prop && columnProps && columnProps.length > 0 && columnProps.indexOf(column.prop)>=0 ) {
+            tabColumns.push(column)
+          } else if(column.children && column.children.length>0){
+            const isInOtherTab = this.groupHeaderIsInOtherTab(column.children[0],columnProps)
+            if(isInOtherTab){
+              tabColumns.push(column)
+            }
+          }
+        }
+        this.tabColumns[tab.code] = tabColumns
+      }
+    },
+    filterTabColumns(tabCode) {
+      if(tabCode){
+        let tabColumns = []
+        for (let i = 0; i < this.columns.length; i++) {
+          const column = this.columns[i]
+          if(column && (column.prop === '$index' || column.prop === '$selection' || column.prop === 'operation')){
+            tabColumns.push(column)
+          }else if (column &&column.tabCode && column.tabCode === tabCode ) {
+            tabColumns.push(column)
+          } else if(column &&column.children && column.children.length>0){
+            const isInTab = this.groupHeaderIsInTab(tabCode, column.children[0])
+            if(isInTab){
+              tabColumns.push(column)
+            }
+          }
+        }
+        this.tabColumns[tabCode] = tabColumns
+      }
+    },
+    // 组合表头是否在指定页签内
+    groupHeaderIsInTab(tabCode, column) {
+      if(column && tabCode){
+        if (column.tabCode && column.tabCode === tabCode ) {
+          return true
+        } else if(column.children && column.children.length>0){
+          return this.groupHeaderIsInTab(tabCode, column.children[0])
+        }
+      }
+    },
+    // 组合表头是否在“其它信息”页签内
+    groupHeaderIsInOtherTab(column, columnProps) {
+      if(column){
+        if (column.prop && columnProps.indexOf(column.prop)>=0 ) {
+          return true
+        } else if(column.children && column.children.length>0){
+          return this.groupHeaderIsInOtherTab(tabCode, column.children[0])
+        }
+      }
     }
   },
   emits: [