doway-coms 2.10.56 → 2.10.57

package/package.json

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

package/packages/BaseForm/src/index.vue

@@ -1,9 +1,16 @@
 <template>
-  <div  :style="computedformStyle">
-    <!-- <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
       :style="getFieldStyle(col)"
-      v-for="col in internalComputedHiddenCols"
+      v-for="(col,colIndex) in internalComputedHiddenCols"
       :key="col.field"
       v-show="hiddenDetail ? colIndex === 0 : true"
     >
@@ -319,7 +326,7 @@
       />
     </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>
@@ -435,7 +442,7 @@ export default {
         display: 'flex',
         flexFlow: 'row wrap',
         justifyContent: 'flex-start',
-        padding: '8px 8px 8px 8px',
+        padding: '5px 5px 0px 5px',
         overflowY: 'auto'
        }
 
@@ -585,7 +592,7 @@ export default {
   methods: {
     getFieldStyle(colInfo){
       let fieldStyle ={
-        width: colInfo.colSpan ? ('calc('+colInfo.colSpan*280+'px + '+(colInfo.colSpan-1)*16+'px)'): '280px',
+        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',
@@ -594,7 +601,7 @@ export default {
         marginRight: '8px',
         marginBottom: '0px',
         marginLeft: '8px',
-        padding: '6px 8px 6px 8px',
+        padding: '2px 8px 2px 8px',
         minWidth: '150px',
         borderRadius: '6px'
     }
@@ -750,6 +757,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.form-container{
+  position: relative
+}
 .d-form-item-ghost{
   visibility: hidden;
   height: 0;
@@ -820,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';