doway-coms 2.10.55 → 2.10.56

package/package.json

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

package/packages/BaseForm/src/index.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="d-form-items">
+  <div  :style="computedformStyle">
     <!-- <div @click="hiddenDetail = !hiddenDetail">展开</div> -->
     <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)}"
+      :style="getFieldStyle(col)"
       v-for="col in internalComputedHiddenCols"
       :key="col.field"
       v-show="hiddenDetail ? colIndex === 0 : true"
@@ -320,14 +318,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 +367,13 @@ export default {
   },
   name: 'BaseForm',
   props: {
+    layoutType: {
+      // 布局方式。默认布局是flex自动换行布局，grid网格固定布局
+      type: String,
+      default: function () {
+        return 'default'
+      },
+    },
     updateDatas: {
       // 更新的数据
       type: Object,
@@ -422,6 +430,30 @@ export default {
     },
   },
   computed: {
+    computedformStyle(){
+      let layoutFormStyle = {
+        display: 'flex',
+        flexFlow: 'row wrap',
+        justifyContent: 'flex-start',
+        padding: '8px 8px 8px 8px',
+        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 +583,29 @@ export default {
   },
   activated() {},
   methods: {
+    getFieldStyle(colInfo){
+      let fieldStyle ={
+        width: colInfo.colSpan ? ('calc('+colInfo.colSpan*280+'px + '+(colInfo.colSpan-1)*16+'px)'): '280px',
+        flex: (colInfo.colSpan  ? colInfo.colSpan+' 1 auto' : null),
+        flexGrow: '1',
+        flexShrink: '1',
+        flexBasis: 'auto',
+        marginTop: '0px',
+        marginRight: '8px',
+        marginBottom: '0px',
+        marginLeft: '8px',
+        padding: '6px 8px 6px 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 +750,20 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.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;

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) {