doway-coms 2.10.55 → 2.10.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doway-coms",
-  "version": "2.10.55",
+  "version": "2.10.57",
   "description": "doway组件库",
   "author": "dowaysoft",
   "main": "packages/index.js",

package/packages/BaseForm/src/index.vue

@@ -1,11 +1,16 @@
 <template>
-  <div class="d-form-items">
-    <!-- <div @click="hiddenDetail = !hiddenDetail">展开</div> -->
+  <div  :style="computedformStyle" class="form-container">
+    <a-button 
+      class="collapse-btn"
+      type="link"
+      @click="hiddenDetail = !hiddenDetail"
+    >
+      <a-icon :type="hiddenDetail ? 'down' : 'up'" class="collapse-icon" />
+      <!-- {{ hiddenDetail ? '展开' : '收起' }} -->
+    </a-button>
     <div
-      class="d-form-item"
-      :style="{'width': col.colSpan  ? 'calc('+col.colSpan*280+'px + '+(col.colSpan-1)*16+'px)': null,
-    'flex': (col.colSpan  ? col.colSpan+' 1 auto' : null)}"
-      v-for="col in internalComputedHiddenCols"
+      :style="getFieldStyle(col)"
+      v-for="(col,colIndex) in internalComputedHiddenCols"
       :key="col.field"
       v-show="hiddenDetail ? colIndex === 0 : true"
     >
@@ -320,14 +325,17 @@
         "
       />
     </div>
-    <div class="d-form-item-ghost"></div>
-    <div class="d-form-item-ghost"></div>
-    <div class="d-form-item-ghost"></div>
-    <div class="d-form-item-ghost"></div>
+    <template v-if="layoutType==='default'">
+    <div  class="d-form-item-ghost"></div>
+    <div  class="d-form-item-ghost"></div>
+    <div  class="d-form-item-ghost"></div>
+    <div  class="d-form-item-ghost"></div>
+    </template>
   </div>
 </template>
 
 <script>
+import XEUtils from 'xe-utils'
 import { sysFormState, sysRowState } from '../../utils/enum'
 import BaseInput from '../../BaseInput/index'
 import BaseCheckbox from '../../BaseCheckbox/index'
@@ -366,6 +374,13 @@ export default {
   },
   name: 'BaseForm',
   props: {
+    layoutType: {
+      // 布局方式。默认布局是flex自动换行布局，grid网格固定布局
+      type: String,
+      default: function () {
+        return 'default'
+      },
+    },
     updateDatas: {
       // 更新的数据
       type: Object,
@@ -422,6 +437,30 @@ export default {
     },
   },
   computed: {
+    computedformStyle(){
+      let layoutFormStyle = {
+        display: 'flex',
+        flexFlow: 'row wrap',
+        justifyContent: 'flex-start',
+        padding: '5px 5px 0px 5px',
+        overflowY: 'auto'
+       }
+
+       if(this.layoutType==='grid'){
+              // 计算最大的行和列
+          let maxRow = XEUtils.max(this.columns,p=>p.row)
+          let maxCol = XEUtils.max(this.columns,p=>p.col)
+          layoutFormStyle = {
+            display: 'grid',
+            gridTemplateRows: `repeat(${maxRow}, auto)`,
+            gridTemplateColumns: `repeat(${maxCol}, 1fr)`,
+            gap: '10px'
+          }
+       }
+       //默认布局
+       return layoutFormStyle
+
+    },
     internalComputedHiddenCols: function () {
       let vm = this
       return this.columns.filter((item) => {
@@ -551,6 +590,29 @@ export default {
   },
   activated() {},
   methods: {
+    getFieldStyle(colInfo){
+      let fieldStyle ={
+        width: colInfo.colSpan ? ('calc('+colInfo.colSpan*250+'px + '+(colInfo.colSpan-1)*16+'px)'): '250px',
+        flex: (colInfo.colSpan  ? colInfo.colSpan+' 1 auto' : null),
+        flexGrow: '1',
+        flexShrink: '1',
+        flexBasis: 'auto',
+        marginTop: '0px',
+        marginRight: '8px',
+        marginBottom: '0px',
+        marginLeft: '8px',
+        padding: '2px 8px 2px 8px',
+        minWidth: '150px',
+        borderRadius: '6px'
+    }
+      if(this.layoutType==='grid'){
+        fieldStyle = {
+          gridRow: colInfo.row,
+          gridColumn: colInfo.col
+        }
+      }
+      return fieldStyle
+    },
     preSearch(searchInfo, repeatRowInfo) {
       this.$emit('preSearch', searchInfo, repeatRowInfo)
     },
@@ -695,6 +757,23 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.form-container{
+  position: relative
+}
+.d-form-item-ghost{
+  visibility: hidden;
+  height: 0;
+  min-height: 0px !important;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  border: 1px solid #9ad4dc;
+  min-width: 150px;
+  width: 280px;
+  margin-right: 8px;
+  margin-left: 8px;
+  border-radius: 6px;
+}
 .form-head {
   display: flex;
   flex-flow: row wrap;
@@ -751,6 +830,25 @@ export default {
 .form {
   margin-left: 30px;
 }
+
+.collapse-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  padding: 4px 8px;
+  z-index: 1000;
+  background-color: #fff; // 添加背景色使按钮更突出
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); // 添加阴影效果
+  border-radius: 4px;
+  .collapse-icon {
+    transition: transform 0.3s;
+  }
+  &:hover {
+    background-color: #f0f0f0;
+  }
+}
+
+
 </style>
 <style lang="less">
 @import '../../styles/default.less';

package/packages/BaseGrid/src/index.vue

@@ -76,6 +76,7 @@
       :row-class-name="rowClassName"
       :row-style="rowStyle"
       :cell-style="cellStyle"
+      :header-cell-style="headerCellStyleFunc"
       :size="'mini'"
       :data="rows"
       :columns="internalColumns"
@@ -1076,6 +1077,15 @@ export default {
     cellStyle: {
       type: Function,
     },
+    headerCellStyle: {
+      type: Object,
+    },
+    cellStyle: {
+      type: Object,
+    },
+    rowStyle: {
+      type: Object,
+    },
     height: {
       default: null,
     },
@@ -1918,6 +1928,9 @@ export default {
       if(originCol.editExp){
         colParams['editExp'] = originCol.editExp
       }
+      if(originCol.cellStyle){
+        colParams['cellStyle'] =originCol.cellStyle
+      }
 
       if (originCol.footerSum === true) {
         this.showFooter = true
@@ -3109,6 +3122,33 @@ export default {
         return 'row--pending'
       }
     },
+    headerCellStyleFunc(scope){
+        let customStyle = {}
+        if(this.headerCellStyle){
+          customStyle =  this.headerCellStyle
+        }
+        this.$emit('headerCellStyleCallback',scope,customStyle)
+        return customStyle
+    },
+    rowStyleFunc(scope){
+        let customStyle = {}
+        if(this.rowStyle){
+          customStyle =  this.rowStyle
+        }
+        this.$emit('rowStyleCallback',scope,customStyle)
+        return customStyle
+    },
+    cellStyleFunc(scope){
+        let customStyle = {}
+        if(this.cellStyle){
+            customStyle = this.cellStyle
+        }
+        if(scope.column?.params.cellStyle){
+            customStyle =scope.column.params.cellStyle
+        }
+        this.$emit('cellStyleCallback',scope,customStyle)
+        return customStyle
+    },
     bodyScroll(scrollInfo) {
       this.$emit('scroll', scrollInfo)
       // if (scrollInfo.isX === true) {