leisure-core 0.5.21 → 0.5.23

package/le-home/src/main.vue

@@ -25,31 +25,17 @@
     </el-header>
     <el-container>
       <el-aside class="aside" :class="{ aside_hide: isHideMenu }">
-        <el-menu
-          :unique-opened="true"
-          class="menu"
-          background-color=" #3A3A3A"
-          text-color="#fff"
-          active-text-color="#ffd04b"
-        >
-          <el-submenu
-            :index="item1.name"
-            v-for="item1 in menuData"
-            :key="item1.id"
-          >
+        <el-menu :unique-opened="true" class="menu" background-color=" #3A3A3A" text-color="#fff"
+          active-text-color="#ffd04b">
+          <el-submenu :index="item1.name" v-for="item1 in menuData" :key="item1.id">
             <template slot="title">
               <div @click="clickTitle">
                 <i :class="item1.icon"></i>&nbsp;
                 <span>{{ item1.title }}</span>
               </div>
             </template>
-            <el-menu-item
-              class="menuItem"
-              v-for="item2 in item1.children"
-              :key="item2.id"
-              :index="item2.name"
-              @click="clickMenuItem(item2)"
-            >
+            <el-menu-item class="menuItem" v-for="item2 in item1.children" :key="item2.id" :index="item2.name"
+              @click="clickMenuItem(item2)">
               &nbsp;&nbsp;
               <span>{{ item2.title }}</span>
             </el-menu-item>
@@ -62,94 +48,40 @@
           <i class="el-icon-arrow-right" v-else></i>
         </div>
         <div>
-          <el-tabs
-            class="el-tabs_"
-            v-model="tabNameCurrent"
-            closable
-            @tab-click="handleTabClick"
-            @tab-remove="removeTab"
-          >
-            <el-tab-pane
-              v-for="item in tabsAll"
-              :key="item.name"
-              :label="item.title"
-              :name="item.name"
-            >
+          <el-tabs class="el-tabs_" v-model="tabNameCurrent" closable @tab-click="handleTabClick"
+            @tab-remove="removeTab">
+            <el-tab-pane v-for="item in tabsAll" :key="item.name" :label="item.title" :name="item.name">
             </el-tab-pane>
           </el-tabs>
           <router-view :key="$route.fullPath"></router-view>
         </div>
       </el-main>
     </el-container>
-    <el-dialog
-      title="修改密码"
-      ref="elDialog"
-      :visible.sync="showChangePwd"
-      width="30%"
-      :close-on-click-modal="false"
-      @close="cancelChangePwd"
-      center
-    >
-      <el-form
-        :model="ruleForm"
-        status-icon
-        :rules="rules"
-        ref="ruleForm"
-        label-width="100px"
-        class="demo-ruleForm"
-      >
+    <el-dialog title="修改密码" ref="elDialog" :visible.sync="showChangePwd" width="30%" :close-on-click-modal="false"
+      @close="cancelChangePwd" center>
+      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <el-form-item label="密码" prop="pwd">
-          <el-input
-            type="password"
-            v-model="ruleForm.pwd"
-            autocomplete="off"
-          ></el-input>
+          <el-input type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="确认密码" prop="confirmPwd">
-          <el-input
-            type="password"
-            v-model="ruleForm.confirmPwd"
-            autocomplete="off"
-          ></el-input>
+          <el-input type="password" v-model="ruleForm.confirmPwd" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
-      <div
-        ref="pwdref"
-        style="display: flex; justify-content: center; color: red"
-      >
+      <div ref="pwdref" style="display: flex; justify-content: center; color: red">
         {{ pwdinfo }}
       </div>
       <div slot="footer">
-        <el-button type="info" @click="cancelChangePwd('ruleForm')"
-          >取 消</el-button
-        >
-        <el-button type="primary" @click="saveChangePwd('ruleForm')"
-          >确认修改</el-button
-        >
+        <el-button type="info" @click="cancelChangePwd('ruleForm')">取 消</el-button>
+        <el-button type="primary" @click="saveChangePwd('ruleForm')">确认修改</el-button>
       </div>
     </el-dialog>
     <div v-show="contextMenuVisible">
-      <ul
-        :style="{ left: menuLeft + 'px', top: menuTop + 'px' }"
-        class="contextmenu"
-      >
+      <ul :style="{ left: menuLeft + 'px', top: menuTop + 'px' }" class="contextmenu">
         <li>
-          <el-button
-            type="text"
-            size="mini"
-            icon="el-icon-refresh"
-            @click="closeOtherTab"
-            >关闭其它</el-button
-          >
+          <el-button type="text" size="mini" icon="el-icon-refresh" @click="closeOtherTab">关闭其它</el-button>
         </li>
         <li>
-          <el-button
-            type="text"
-            size="mini"
-            icon="el-icon-error"
-            @click="closeAllTabs"
-            >关闭所有</el-button
-          >
+          <el-button type="text" size="mini" icon="el-icon-error" @click="closeAllTabs">关闭所有</el-button>
         </li>
       </ul>
     </div>
@@ -244,7 +176,6 @@ export default {
     ];
 
     this.$store.commit("setDict", dict);
-
     this.menuData = this.$store.getters.menu;
     this.menuData = this.$store.getters.menu.filter(function (item) {
       if (item.children) {
@@ -254,6 +185,7 @@ export default {
       }
       return item;
     });
+    this.$emit("homeInit")
   },
   watch: {
     contextMenuVisible() {
@@ -514,6 +446,7 @@ export default {
   .el-icon-arrow-down {
     font-size: 16px;
   }
+
   .el-dropdown-menu__item {
     font-size: 15px !important;
   }
@@ -528,6 +461,7 @@ export default {
   .cursor {
     cursor: pointer;
   }
+
   .aside_open_close {
     position: absolute;
     left: 0;
@@ -542,6 +476,7 @@ export default {
     z-index: 1000;
     cursor: pointer;
   }
+
   .aside_open_close:hover {
     background-color: #ff8e2b;
     color: #fff;
@@ -569,6 +504,7 @@ export default {
         background: #f2f2f2;
         cursor: pointer;
       }
+
       .button {
         color: #2c3e50;
       }

package/le-list-form/src/main.vue

@@ -1,24 +1,27 @@
 <template>
-  <el-form :model="formPop" :rules="rules" ref="ruleForm" :label-width="labelWidth">
-    <el-form-item v-for="(item, index) in formColumns" :key="index" :label="item.label" :prop="item.prop"
-      class="leisure-form-item-class">
-      <div class="comContainerClass">
-        <component :is="componentType(item.type)" v-model="formPop[item.prop]"
-          v-bind="mergeProps(getComponentProps(item), item.attr || {})" v-on="item.event" class="compontClass">
-          <template v-if="item.type === 'radio'">
-            <el-radio v-for="(option, index) in item.options" :label="option.id" :key="index + '_radio'">{{ option.lable
-            }}</el-radio>
-          </template>
-          <template v-else-if="item.type === 'select'">
-            <le-select-option :options="fieldOptions[item.prop]" :label="item.kv.label" :value="item.kv.key"
-              :keyNum="item.keyNum" />
-          </template>
-        </component>
-        <slot :name="item.prop"></slot>
-      </div>
-    </el-form-item>
+  <el-form :model="formPop" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="le-form-container">
+    <div class="form-grid" :style="gridStyle">
+      <el-form-item v-for="(item, index) in formColumns" :key="index" :label="item.label" :prop="item.prop"
+        class="leisure-form-item-class">
+        <div class="comContainerClass">
+          <component :is="componentType(item.type)" v-model="formPop[item.prop]"
+            v-bind="mergeProps(getComponentProps(item), item.attr || {})" v-on="item.event" class="compontClass">
+            <template v-if="item.type === 'radio'">
+              <el-radio v-for="(option, index) in item.options" :label="option.id" :key="index + '_radio'">{{
+                option.lable
+              }}</el-radio>
+            </template>
+            <template v-else-if="item.type === 'select'">
+              <le-select-option :options="fieldOptions[item.prop]" :label="item.kv.label" :value="item.kv.key"
+                :keyNum="item.keyNum" />
+            </template>
+          </component>
+          <slot :name="item.prop"></slot>
+        </div>
+      </el-form-item>
+    </div>
     <slot></slot>
-    <el-form-item v-rfooter>
+    <el-form-item v-rfooter class="form-footer">
       <slot name="footerBtn"></slot>
       <le-button type="primary" @click="saveData" v-if="handleStatus == 1 || handleStatus == 2">保存</le-button>
       <le-button type="info" @click="close()">关闭</le-button>
@@ -46,6 +49,7 @@ export default {
       type: String,
       default: "100px",
     },
+
     fieldOptions: {
       type: Object,
       default: () => { },
@@ -54,6 +58,21 @@ export default {
       type: Number,
       default: 0, //0:详情 1:新增 2:编辑
     },
+    columnsPerRow: {
+      type: Number,
+      default: 1,
+      validator: (value) => value > 0 && value <= 4 // 限制最大4列，避免太拥挤
+    },
+    // 新增属性：列间距
+    columnGap: {
+      type: String,
+      default: "20px"
+    },
+    // 新增属性：行间距
+    rowGap: {
+      type: String,
+      default: "16px"
+    }
   },
   watch: {
     formData: {
@@ -105,7 +124,15 @@ export default {
       options: {}, //{field1:[{value:1,label:'选项1'},{value:2,label:'选项2'}]}
     };
   },
-  computed: {},
+  computed: {
+    gridStyle() {
+      return {
+        'grid-template-columns': `repeat(${this.columnsPerRow}, 1fr)`,
+        'column-gap': this.columnGap,
+        'row-gap': this.rowGap
+      };
+    }
+  },
   mounted() { },
   methods: {
     componentType(type) {
@@ -143,6 +170,23 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+le-form-container {
+  width: 100%;
+}
+
+.form-grid {
+  display: grid;
+
+  // 响应式处理：在小屏幕上自动调整为1列
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+.leisure-form-item-class {
+  margin-bottom: 0; // 使用grid的gap控制间距，不需要margin-bottom
+}
+
 .leisure-form-item-class {}
 
 .comContainerClass {
@@ -154,4 +198,9 @@ export default {
     flex: 1
   }
 }
+
+.form-footer {
+  margin-top: 20px;
+  text-align: right;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-core",
-  "version": "0.5.21",
+  "version": "0.5.23",
   "description": "leisure-core是京心数据基于vue2.x开发的一套后台管理系统桌面端组件库，封装了大量实用的UI控件模板,非常方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",