doway-coms 2.10.56 → 2.10.58

package/package.json

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

package/packages/BaseForm/src/index.vue

@@ -1,11 +1,18 @@
 <template>
-  <div  :style="computedformStyle">
-    <!-- <div @click="hiddenDetail = !hiddenDetail">展开</div> -->
+  <div  :style="computedformStyle" class="form-container">
+    <a-button v-if="showFold===true"
+      class="collapse-btn"
+      type="link"
+      @click="hiddenDetail = !hiddenDetail"
+    >
+      <a-icon :type="hiddenDetail ? 'down' : 'up'" class="collapse-icon" />
+      <!-- {{ hiddenDetail ? '展开' : '收起' }} -->
+    </a-button>
     <div
       :style="getFieldStyle(col)"
-      v-for="col in internalComputedHiddenCols"
+      v-for="(col,colIndex) in internalComputedHiddenCols"
       :key="col.field"
-      v-show="hiddenDetail ? colIndex === 0 : true"
+      v-show="hiddenDetail ? col.foldVisible===true : true"
     >
       <!-- 文本框输入控件 -->
       <BaseInput
@@ -319,10 +326,10 @@
       />
     </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>
     <div  class="d-form-item-ghost"></div>
+    <div  class="d-form-item-ghost"></div> -->
     </template>
   </div>
 </template>
@@ -367,6 +374,12 @@ export default {
   },
   name: 'BaseForm',
   props: {
+    showFold:{
+      type: Boolean,
+      default: function () {
+        return false
+      },
+    },
     layoutType: {
       // 布局方式。默认布局是flex自动换行布局，grid网格固定布局
       type: String,
@@ -433,9 +446,10 @@ export default {
     computedformStyle(){
       let layoutFormStyle = {
         display: 'flex',
+        columnGap: this.flexGap+ 'px',
         flexFlow: 'row wrap',
         justifyContent: 'flex-start',
-        padding: '8px 8px 8px 8px',
+        padding: '5px 5px 0px 5px',
         overflowY: 'auto'
        }
 
@@ -447,7 +461,7 @@ export default {
             display: 'grid',
             gridTemplateRows: `repeat(${maxRow}, auto)`,
             gridTemplateColumns: `repeat(${maxCol}, 1fr)`,
-            gap: '10px'
+            columnGrap: this.flexGap + 'px'
           }
        }
        //默认布局
@@ -472,6 +486,7 @@ export default {
   filters: {},
   data() {
     return {
+      flexGap:10,
       hiddenDetail: false,
       moment,
       editFormName: '',
@@ -584,19 +599,25 @@ export default {
   activated() {},
   methods: {
     getFieldStyle(colInfo){
+      // console.debug('0 0 calc('+colInfo.colSpan*250+'px -'+(colInfo.colSpan-1)*this.flexGap +'px)')
       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',
+        // width: colInfo.colSpan ? ('calc('+colInfo.colSpan*250+'px + '+(colInfo.colSpan-1)*16+'px)'): '250px',
+        flex: '0 0 ' + (colInfo.width && colInfo.width>200?colInfo.width:250)+'px',   //colInfo.colSpan ? '0 0 '+(colInfo.colSpan*250+(colInfo.colSpan-1)*this.flexGap)+'px': '0 0 250px',
+
+        // flexGrow: 0,
+        // flexShrink: 0,
+        // flexBasis: colInfo.colSpan? (colInfo.colSpan*250)+'px':'250px',
+        // flexGrow: '1',
+        // flexShrink: '1',
+        // flexBasis:'250px', //colInfo.colSpan ? ('calc('+colInfo.colSpan*250+'px + '+(colInfo.colSpan-1)*16+'px)'): '250px',
         marginTop: '0px',
-        marginRight: '8px',
+        // marginRight: '8px',
         marginBottom: '0px',
-        marginLeft: '8px',
-        padding: '6px 8px 6px 8px',
-        minWidth: '150px',
-        borderRadius: '6px'
+        // marginLeft: '8px',
+        // padding: '2px 8px 2px 8px',
+        // minWidth: '250px',
+        borderRadius: '6px',
+        maxWidth:'100%'
     }
       if(this.layoutType==='grid'){
         fieldStyle = {
@@ -750,6 +771,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.form-container{
+  position: relative
+}
 .d-form-item-ghost{
   visibility: hidden;
   height: 0;
@@ -820,6 +844,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';