agilebuilder-ui 1.1.13-tmp2 → 1.1.13-tmp4

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

@@ -1,5 +1,5 @@
 <template>
-  <div :style="subTableStyle">
+  <div data-v="1.0.0" :style="subTableStyle">
     <search-form
       v-if="!isFormSubTable && hasLoadedColumns && query && query.showType === 'embedded'"
       v-show="!isMobile || (isMobile && isShowMobileSearch)"
@@ -35,10 +35,24 @@
       @close="closeSearchFormDialog"
     />
     <div :class="'grid-area ' + code">
-      <MobileCard v-if="isShowCard" :selection="selectionTableData" :columns="visibleColumns" :getColumnComponentData="getColumnComponentData" :data="tableDatas" v-model:current-page="currentPage" :page-size="pagination?.pageSizes?.[0]" :page-total="pagination?.total" @selection-change="cardSelectionChangeEvent" @current-change="handleCurrentChange" @row-dblclick="rowDblclickEvent" />
+      <MobileCard
+        v-if="isShowCard"
+        :selection="selectionTableData"
+        :columns="visibleColumns"
+        :getColumnComponentData="getColumnComponentData"
+        :data="tableDatas"
+        v-model:current-page="currentPage"
+        :page-size="pagination?.pageSizes?.[0]"
+        :page-total="pagination?.total"
+        @select="selectRecord"
+        @selection-change="cardSelectionChangeEvent"
+        @current-change="handleCurrentChange"
+        @row-click="rowClickEvent"
+        @row-dblclick="rowDblclickEvent"
+      />
       
       <el-table
-        v-if="refreshGrid && hasLoadedColumns"
+        v-if="refreshGrid && hasLoadedColumns && !isShowCard"
         ref="superGrid"
         :data="tableDatas"
         :row-key="getRowKeyProp"
@@ -56,8 +70,8 @@
         :highlight-current-row="true"
         :span-method="rowSpan"
         :max-height="maxHeight"
-        :height="tableHeight"
-        :class="`${tableClass} ${isShowCard ? 'xs-hidden-opacity-only' : ''}`"
+        :height="maxHeight && maxHeight >= tableHeight ? maxHeight : tableHeight"
+        :class="tableClass"
         :tree-props="getTreeProps(parentProp, isSql, isLazy, dataSourceType)"
         @sort-change="handleSortChange"
         @select="selectRecord"
@@ -84,7 +98,7 @@
         />
 
       </el-table>
-      <div v-if="showPagination" style="position: relative; margin-top: 5px" :class="{ 'xs-hidden-opacity-only': isShowCard }">
+      <div v-if="showPagination && !isShowCard" style="position: relative; margin-top: 5px">
         <el-row>
           <!-- <el-col
                   v-if="
@@ -234,7 +248,8 @@ import headerContextMenu from './header-context-menu.vue'
 import { isMobileBrowser, isPromise } from '../../../src/utils/common-util'
 import { checkPermission } from '../../../src/utils/permission'
 import { getGuId } from '../../../src/utils/guid.js';
-import resizeMixin from '../../../src/mixins/resizeMixin.js';
+// import resizeMixin from '../../../src/mixins/resizeMixin.js';
+import storeVuex from '../../../src/store';
 
 export default {
   components: {
@@ -252,7 +267,7 @@ export default {
     MobileCard
   },
   name: 'SuperGrid',
-  mixins: [resizeMixin],
+  // mixins: [resizeMixin],
   props: {
     // 是否自适应卡片
     isShowAutoCard: {
@@ -454,6 +469,9 @@ export default {
     }
   },
   computed: {
+    isMobileResize() {
+      return storeVuex.getters.isMobileResize
+    },
     // 是否显示卡片
     isShowCard() {
       return this.isShowAutoCard && this.isMobileResize
@@ -462,6 +480,9 @@ export default {
       const gridParams = store.get(this.code)
       const operations = this.getOptionOperations()
       gridParams.canntEdit = false
+
+      const setAttrs = data => data.map(item => ({ property: item.prop, ...item}))
+      
       if (operations && operations.operation && operations.operation.length > 0) {
         operations.operation.forEach((buttonInfo) => {
           if (buttonInfo.props.code === 'lineEditUpdate') {
@@ -476,48 +497,50 @@ export default {
         this.options.isAdministerListView != null &&
         this.options.isAdministerListView === true
       ) {
-        return this.columns
+        return setAttrs(this.columns)
       } else {
-        return this.columns.filter((column) => {
-          if (
-            typeof this.options.multiple !== 'undefined' &&
-            this.options.multiple === false &&
-            column.prop === '$selection'
-          ) {
-            // 表示不显示“多选”列
-            return false
-          }
-          if (
-            typeof this.options.showIndex !== 'undefined' &&
-            this.options.showIndex === false &&
-            column.prop === '$index'
-          ) {
-            // 表示不显示“序号”列
-            return false
-          }
-          let isVisible
-          if (column.show === undefined || column.show) {
-            isVisible = true
-            const hiddenColumns = this.options.hiddenColumns
-            if (hiddenColumns && hiddenColumns.length > 0 && column.prop && hiddenColumns.indexOf(column.prop) !== -1) {
-              // 如果当前字段包含在隐藏字段集合中，则不显示该字段
-              isVisible = false
-              return isVisible
+        return setAttrs(
+          this.columns.filter((column) => {
+            if (
+              typeof this.options.multiple !== 'undefined' &&
+              this.options.multiple === false &&
+              column.prop === '$selection'
+            ) {
+              // 表示不显示“多选”列
+              return false
             }
-            // 给列配置操作属性
-            this.initColumnOperation(column, operations)
-            if (!gridParams.$dataTypeMap) {
-              gridParams.$dataTypeMap = {}
+            if (
+              typeof this.options.showIndex !== 'undefined' &&
+              this.options.showIndex === false &&
+              column.prop === '$index'
+            ) {
+              // 表示不显示“序号”列
+              return false
             }
-            // sql时行编辑保存后台代码需要
-            gridParams.$dataTypeMap[column.prop] = column.dataType
-          } else {
-            isVisible = false
-          }
-          // 存储有默认值的字段集合
-          this.storeHasDefaultValueColumns(column, gridParams)
-          return isVisible
-        })
+            let isVisible
+            if (column.show === undefined || column.show) {
+              isVisible = true
+              const hiddenColumns = this.options.hiddenColumns
+              if (hiddenColumns && hiddenColumns.length > 0 && column.prop && hiddenColumns.indexOf(column.prop) !== -1) {
+                // 如果当前字段包含在隐藏字段集合中，则不显示该字段
+                isVisible = false
+                return isVisible
+              }
+              // 给列配置操作属性
+              this.initColumnOperation(column, operations)
+              if (!gridParams.$dataTypeMap) {
+                gridParams.$dataTypeMap = {}
+              }
+              // sql时行编辑保存后台代码需要
+              gridParams.$dataTypeMap[column.prop] = column.dataType
+            } else {
+              isVisible = false
+            }
+            // 存储有默认值的字段集合
+            this.storeHasDefaultValueColumns(column, gridParams)
+            return isVisible
+          })
+        )
       }
     },
     visibleColumnsComponentData() {
@@ -571,14 +594,25 @@ export default {
     // }
   },
   watch: {
-    // 是否为移动端尺寸
-    'isMobileResize': {
+    // 切换表格 与 卡片是否
+    'isShowCard': {
       deep: true,
-      handler() {
+      handler(is) {
         // 是否开启卡片，如果开启则平台切换时候重新回到第一页
         if(this.isShowAutoCard) {
-          this.currentPage = 1
-          this.handleCurrentChange()
+          if (this.currentPage > 1) {
+            this.currentPage = 1
+            this.handleCurrentChange()
+          } else {
+            this.$nextTick()
+          }
+        }
+        if(!is) {
+          // 显示表格后重新格式化展示
+          this.$nextTick(() => {
+            this.resizeTableHeight()
+            this.$refs.superGrid?.doLayout()
+          })
         }
       }
     },
@@ -710,6 +744,7 @@ export default {
     return {}
   },
   created() {
+    storeVuex?.dispatch?.('startListeningToResize');
     store.set(this.code, getGridParams())
     store.set('_list_code', this.code)
     this.initSetting()
@@ -1858,18 +1893,20 @@ export default {
               if (typeof resove !== 'undefined' && resove !== null) {
                 // 首次加载或点击三角展开父节点时走该分支
                 // 刷新数据后，移除该父节点下的所有已选中的子节点记录。
-                // 必须调用该方法，否则在删除记录时，数据即使刷新了，已选中集合this.$refs.superGrid.store.states.selection中仍会有该已删除记录，导致再次执行删除报id不存在
+                // 必须调用该方法，否则在删除记录时，数据即使刷新了，已选中集合this.$refs.superGrid?.store.states.selection中仍会有该已删除记录，导致再次执行删除报id不存在
                 this.removeGridStoreSelection(parentRowIds)
                 resove(data[parentRowIds[0]])
               } else {
                 // 刷新父记录对应的子记录集合时需要，例如：删除时
                 parentRowIds.forEach((parentRowId) => {
                   // 单行父记录id
-                  this.$refs.superGrid.store.states.lazyTreeNodeMap[parentRowId] = data[parentRowId]
-                  this.$refs.superGrid.store.states.treeData[parentRowId].children = data[parentRowId]
+                  if (this.$refs.superGrid) {
+                    this.$refs.superGrid.store.states.lazyTreeNodeMap[parentRowId] = data[parentRowId]
+                    this.$refs.superGrid.store.states.treeData[parentRowId].children = data[parentRowId]
+                  }
                 })
                 // 刷新数据后，移除该父节点下的所有已选中的子节点记录
-                // 必须调用该方法，否则在删除记录时，数据即使刷新了，已选中集合this.$refs.superGrid.store.states.selection中仍会有该已删除记录，导致再次执行删除报id不存在
+                // 必须调用该方法，否则在删除记录时，数据即使刷新了，已选中集合this.$refs.superGrid?.store.states.selection中仍会有该已删除记录，导致再次执行删除报id不存在
                 this.removeGridStoreSelection(parentRowIds)
               }
               this.hasLoadData = true
@@ -2277,7 +2314,7 @@ export default {
     changePage() {
       console.log('点击了分页')
       // 翻页操作会导致筛选项发生变化，所以需要清空已有的
-      this.$refs.superGrid.clearFilter()
+      this.$refs.superGrid?.clearFilter()
       // TODO: 把当前页数、每页条数、查询条件、排序信息传回后台
       if (this.isSubTableShowPage) {
         this.gridData = this.getSubTableGridData(this.subTableData)
@@ -2302,7 +2339,7 @@ export default {
           // 如果最后编辑行没有保存或撤销编辑，则给出提示
           const gridParams = store.get(this.code)
           console.log('请先保存或撤销编辑第' + gridParams.$rowIndex + 1 + '行记录，再排序')
-          this.$refs.superGrid.clearSort()
+          this.$refs.superGrid?.clearSort()
         } else {
           // TODO: 应该调用fetchData来获取信息，把当前页数、查询条件、排序信息传回后台
           if (prop !== null && columnSetting && columnSetting !== null) {
@@ -2508,30 +2545,30 @@ export default {
     },
     expandChange(row, expanded) {
       if (this.isLazy) {
-        // console.log('expandChange==row, expanded', row, expanded, this.$refs.superGrid.store.states)
+        // console.log('expandChange==row, expanded', row, expanded, this.$refs.superGrid?.store.states)
         if (expanded === false) {
           // 折叠时清空表格缓存的已加载的标识位，使其能够动态更新子集合
           // 必须添加这句，否则不会重新走load
-          if (this.$refs.superGrid.store.states.treeData) {
+          if (this.$refs.superGrid?.store.states.treeData) {
             this.$refs.superGrid.store.states.treeData[row.id ? row.id : row.ID].loaded = false
           }
         } else {
-          // console.log('expandChange=this.$refs.superGrid.store.states.lazyTreeNodeMap', this.$refs.superGrid.store.states.lazyTreeNodeMap)
-          // console.log('expandChange=this.$refs.superGrid.store.states.treeData', this.$refs.superGrid.store.states.treeData)
-          // console.log('expandChange=this.$refs.superGrid.store.states.selection', this.$refs.superGrid.store.states.selection)
+          // console.log('expandChange=this.$refs.superGrid?.store.states.lazyTreeNodeMap', this.$refs.superGrid?.store.states.lazyTreeNodeMap)
+          // console.log('expandChange=this.$refs.superGrid?.store.states.treeData', this.$refs.superGrid?.store.states.treeData)
+          // console.log('expandChange=this.$refs.superGrid?.store.states.selection', this.$refs.superGrid?.store.states.selection)
         }
       }
     },
     removeGridStoreSelection(parentRowIds) {
       let selection = []
-      if (this.$refs.superGrid.store.states.selection) {
-        selection = [].concat(JSON.parse(JSON.stringify(this.$refs.superGrid.store.states.selection)))
+      if (this.$refs.superGrid?.store.states.selection) {
+        selection = [].concat(JSON.parse(JSON.stringify(this.$refs.superGrid?.store.states.selection)))
       }
       for (let i = 0; i < selection.length; i++) {
         if (parentRowIds && parentRowIds.indexOf(selection[i][this.parentProp]) >= 0) {
           // 移除第i个元素
-          this.$refs.superGrid.store.states.selection.splice(i, 1)
-          if (this.$refs.superGrid.store.states.selection.length > 0) {
+          this.$refs.superGrid?.store.states.selection.splice(i, 1)
+          if (this.$refs.superGrid?.store.states.selection.length > 0) {
             this.removeGridStoreSelection(parentRowIds)
           }
           break
@@ -2614,7 +2651,7 @@ export default {
         this.createBackgroundColorMap()
         this.backgroundColorMap[item.prop] = '#409EFF'
         if (this.$refs && this.$refs.superGrid) {
-          this.$refs.superGrid.doLayout()
+          this.$refs.superGrid?.doLayout()
         }
       }
     },
@@ -2638,7 +2675,7 @@ export default {
       this.backgroundColorMap = backgroundColorMap
       this.externalClickFlag = false
       if (this.$refs && this.$refs.superGrid) {
-        this.$refs.superGrid.doLayout()
+        this.$refs.superGrid?.doLayout()
       }
     },
     // 根据element事件传递的column来获取自定义封装的column
@@ -2744,7 +2781,7 @@ export default {
       return this.isSubTableShowPage ? this.subTableData : this.gridData
     },
     rowDblclickEvent(row, column, event) {
-      console.log('+++++++++++++++++++++++++++++++++', row, column, event)
+      debugger;
       const gridParams = store.get(this.code)
       if (gridParams.options && gridParams.options.isFormSubTable && gridParams.options.isPdfEditor) {
         // 如果是子表并且是pdf模式
@@ -2754,6 +2791,7 @@ export default {
           let canEdit = true
           const gridParams = store.get(this.code)
           if (isEditOptionFunction('beforeEdit', this.code)) {
+            debugger;
             const isSubTableShowPage = gridParams.isSubTableShowPage
             // 每页显示多少条
             const pageSize = gridParams.pagination && gridParams.pagination.pageSize
@@ -2792,7 +2830,6 @@ export default {
             if (index < 0) {
               index = 0
             }
-            console.log('我点击了。。。。。。。。。。。。。。。。。。。', index, this.code)
             this.editRow(index, this.code)
           }
         }
@@ -3023,7 +3060,6 @@ export default {
     },
     // 选择记录
     selectRecord(selection, row) {
-      console.log('selectRecord====>', selection, row)
       this.selectionTableData = row
       let selectRecordEventResult = true
       const gridParams = store.get(this.code)
@@ -3042,15 +3078,13 @@ export default {
         })
         if (selectRecordEventResult !== undefined && selectRecordEventResult === false) {
           // 最后选中的记录取消选中状态
-          this.$refs.superGrid.toggleRowSelection(row, false)
+          this.$refs.superGrid?.toggleRowSelection(row, false)
         }
       }
       this.select(selection, row)
-      console.log('查看页面数据', this, gridParams.options, this.row, this.selection)
     },
     // 取消选择记录
     selectAllRecord(selection) {
-      console.log('selectAllRecord====>', selection)
       let selectAllRecordsEventResult = true
       const gridParams = store.get(this.code)
       if (isHasOptionFunction('selectAllRecords', this.code)) {
@@ -3067,17 +3101,17 @@ export default {
         })
         if (selectAllRecordsEventResult !== undefined && selectAllRecordsEventResult === false) {
           // 取消所有记录选中状态
-          this.$refs.superGrid.toggleAllSelection()
+          this.$refs.superGrid?.toggleAllSelection()
         }
       }
       this.selectAll(selection)
     },
     cardSelectionChangeEvent(newSelection) {
       try {
-        this.$refs.superGrid.clearSelection()
+        this.$refs.superGrid?.clearSelection()
         for(const i in newSelection) {
           const row = newSelection[i]
-          this.$refs.superGrid.toggleRowSelection(row, true)
+          this.$refs.superGrid?.toggleRowSelection(row, true)
         }
       } catch (error) {
         console.error(error)
@@ -3087,7 +3121,6 @@ export default {
     // 选择记录发生改变时
     selectionChangeEvent(newSelection) {
       this.selectionTableData = newSelection
-      console.log('selectionChangeEvent====>', newSelection)
       const gridParams = store.get(this.code)
       if (isHasOptionFunction('selectionChange', this.code)) {
         gridParams.options.selectionChange.call(this, {
@@ -3103,7 +3136,7 @@ export default {
         })
         // if(selectionChangeEventResult !== undefined &&  selectionChangeEventResult=== false){
         //   // 最后选中的记录取消选中状态
-        //   this.$refs.superGrid.toggleRowSelection(newSelection[newSelection.length - 1], false)
+        //   this.$refs.superGrid?.toggleRowSelection(newSelection[newSelection.length - 1], false)
         // }
       }
       this.selectionChange(newSelection)

package/{packages/super-grid/src/components/card-view.jsx → src/components/Card/index.jsx}

@@ -1,12 +1,15 @@
 /** @jsxImportSource vue */
-import { defineComponent, ref, computed, watch, defineEmits } from 'vue';
-import { ElCard, ElDrawer, ElTag,ElDescriptions, ElDescriptionsItem, ElButton, ElIcon, ElCheckbox, ElCheckboxGroup, ElBreadcrumb, ElLink, ElEmpty, ElDivider } from 'element-plus';
-import store from '../store';
-import { ArrowLeft, Bottom, Loading, Tickets } from '@element-plus/icons-vue';
+import { defineComponent, ref, computed, watch, onMounted } from 'vue';
+import { ElCard, ElTag, ElButton, ElIcon, ElCheckbox } from 'element-plus';
+import { Bottom, Tickets } from '@element-plus/icons-vue';
+import Scrollbar from '../Scrollbar';
 // import { $emit, $off, $on } from '@/utils/gogocodeTransfer'
 
 export default defineComponent({
     name: 'CardView',
+    components: {
+        Scrollbar
+    },
     props: {
         // 当前行数据
         form: {
@@ -38,10 +41,22 @@ export default defineComponent({
             type: Boolean,
             default: () => false
         },
+        setMaxHeight: {
+            type: [Function, undefined],
+            default: () => undefined
+        },
+        setHeight: {
+            type: [Function, undefined],
+            default: () => undefined
+        },
     },
     setup(props, { attrs, emit, slots }) {
         console.log('*card-view.jsx**********************************************=>', props, attrs, slots)
         const isMore = ref(props.isShowDetailsMore)
+
+        const scrollHeight = ref(undefined);
+
+        const scrollbarRef = ref(null);
     
         // 点击了卡片事件
         const onChecked = () => {
@@ -56,17 +71,45 @@ export default defineComponent({
             return getSlotHtml(slots.footerSlot).filter(item => item?.children) ?? []
         });
 
+        const setMaxHeight = data => {
+            if (props.setMaxHeight) return props.setMaxHeight(data)
+            if (data?.windowHeight) {
+                // const height = data?.windowHeight - 200
+                if (data.windowHeight * 0.4 <= scrollHeight.value) return 300
+                return scrollHeight.value && scrollHeight.value >= 300  ? scrollHeight : 300
+            }
+        }
+
         watch(() => props.isShowDetailsMore, (newValue) => {
             isMore.value = newValue
         });
 
+        onMounted(() => {
+            const scrollElement = scrollbarRef.value?.$el?.querySelector?.('.el-scrollbar__view');
+            if (scrollElement) {
+                scrollHeight.value = scrollElement.clientHeight
+            }
+        })
+
+        // 点击事件
+        const onClick = (event) => {
+            onChecked()
+            emit('rowClick', event)
+        }
+
+        // 双击事件
+        const onDblclick = (event) => {
+            emit('rowDblclick', event)
+        }
+
+
         return () => (
             <ElCard key={`card_${props.form?.$rowDataGuId || `${props.form?.id}_${props.no}`}`} header-padding body-padding shadow="hover" class={{ 'yx-card-main': true, 'is-checked': props.isChecked}} v-slots={{
                 header: () => (
-                    <div class="yx-flex-wrap" justify='space-between' align='center' style={{gap: '10px', "min-height": '50px', padding: '5px var(--el-card-padding)'}} onClick={onChecked}>
-                        <div class="yx-flex-wrap" align='center' style={{gap: '10px'}}>
+                    <div class="yx-flex-wrap" justify='space-between' align='center' onClick={onClick} onDblclick={onDblclick}>
+                        <div class="yx-flex-wrap" align='center' style={{gap: '10px' , flex: '1 1 auto',maxWidth: 'calc(100% - 80px)'}}>
                             { props.no && <ElTag type="primary" size='small'>{props.no}</ElTag>}
-                            { getSlotHtml(slots.titleSlot) }
+                            <div layout-title class='ellipsis'>{ getSlotHtml(slots.titleSlot) }</div>
                         </div>
                         <div class="yx-flex-wrap" align='center' style={{gap: '10px'}}>
                             { getSlotHtml(slots.headerRightSlot) }
@@ -84,12 +127,12 @@ export default defineComponent({
                     footer: footerSlot.value
                 } : {})
             }}>
-            <div class="yx-flex-wrap" vertical style={{gap: '0', height: '100%'}} onClick={onChecked}>
-                <ElScrollbar scrollable-main max-height={!isMore.value ? '50vh' : '100%'}>
-                    <div style={{ padding: 'var(--el-card-padding)' }}>
+            <div class="yx-flex-wrap" vertical style={{gap: '0', height: '100%'}} onClick={onClick} onDblclick={onDblclick}>
+                <Scrollbar ref={scrollbarRef} scrollable-main max-height={!isMore.value ? '50vh' : '100%'} set-max-height={setMaxHeight} set-height={props.setHeight}>
+                    <div class='yx-card-body'>
                         { getSlotHtml(slots.children) }
                     </div>
-                </ElScrollbar>
+                </Scrollbar>
                 {
                     props.isShowDetailsMore && (<ElButton text icon={<ElIcon>{!isMore.value ? <Top /> : <Bottom /> }</ElIcon>} onClick={(event) => {
                         event.stopPropagation()