meixioacomponent 0.2.3 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.2.03",
+  "version": "0.2.06",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",

package/packages/components/proForm/proForm/pro_form.vue

@@ -17,12 +17,13 @@
           :prop="citem.key"
           :label="citem.label"
           v-for="(citem, cindex) in item"
-          :class="[`chunk-${chunkLength}`, `${flexClass}`]"
+          :class="[`chunk-${chunkLength}`, `${flexClass}`, size]"
         >
           <span slot="label" class="item-label">{{ citem.label }}</span>
           <pro_form_itemVue
             :config="citem"
             :form="form"
+            :size="size"
             :class="[`form-item-${citem.key}`]"
             v-if="formType == 'default' && citem.type != 'area'"
             @formItemConfirm="formItemConfirm"
@@ -120,6 +121,16 @@ export default {
       type: Object,
       require: true,
     },
+
+    rowNumber: {
+      type: Number,
+      default: null,
+    },
+
+    size: {
+      type: String,
+      default: "small",
+    },
   },
   components: {
     baseAreaVue,
@@ -160,6 +171,11 @@ export default {
         ];
       }
 
+      if (this.$props.rowNumber) {
+        this.chunkLength = this.$props.rowNumber;
+        return;
+      }
+
       let width = this.$refs.proFormWrap.clientWidth;
       if (this.$props.formType != "default") {
         this.chunkLength = 1;
@@ -169,24 +185,29 @@ export default {
         this.chunkLength = 2;
         return;
       }
-
       this.chunkLength = 3;
     },
     formItemConfirm(params) {
-      // element 验证单条表单修改
-      const rulesItem = this.$props.rules[params.config.key];
-      if (rulesItem) {
-        this.$refs.form.validateField([`${params.config.key}`], (errorMsg) => {
-          //console.log(errorMsg);
-          if (!errorMsg) {
-            params.this.handleConfirm();
-            this.$emit("formItemConfirm", params.config);
-          }
-        });
-      } else {
-        params.this.handleConfirm();
-        this.$emit("formItemConfirm", params.config);
+      if (this.$props.rules) {
+        // element 验证单条表单修改
+        const rulesItem = this.$props.rules[params.config.key];
+        if (rulesItem) {
+          this.$refs.form.validateField(
+            [`${params.config.key}`],
+            (errorMsg) => {
+              //console.log(errorMsg);
+              if (!errorMsg) {
+                params.this.handleConfirm();
+                this.$emit("formItemConfirm", params.config);
+                return;
+              }
+            }
+          );
+        }
+        return;
       }
+      params.this.handleConfirm();
+      this.$emit("formItemConfirm", params.config);
     },
     setFormData() {
       this.formdata = {};
@@ -292,5 +313,14 @@ export default {
   .form-footer {
     margin-top: var(--margin-5);
   }
+
+  .mini {
+    /deep/ .el-form-item {
+      margin-bottom: var(--margin-5);
+    }
+    /deep/ .el-form-item__label {
+      line-height: 28px !important;
+    }
+  }
 }
 </style>

package/packages/components/proForm/proForm/pro_form_item.vue

@@ -1,6 +1,8 @@
 <template>
   <div
     :class="{
+      mini: size == 'mini',
+      small: size == 'small',
       'form-item-wrap': true,
       disabled: config.disabled,
     }"
@@ -49,6 +51,7 @@
       <el-input
         autosize
         disabled
+        :size="size"
         type="textarea"
         v-model="module"
         v-if="config.type == 'textarea'"
@@ -68,21 +71,21 @@
       <!-- input输入框 -->
       <el-input
         v-if="config.type == 'input'"
-        size="small"
+        :size="size"
         v-model="module"
         style="width: 100%; height: 100%"
       >
       </el-input>
       <!-- 数字类型无小数 -->
       <el-input-number
-        size="small"
+        :size="size"
         v-else-if="config.type == 'number'"
         v-model.number="module"
         :controls="false"
       ></el-input-number>
       <!--数字类型两位小数  -->
       <el-input-number
-        size="small"
+        :size="size"
         :precision="2"
         v-model.number="module"
         :controls="false"
@@ -90,7 +93,7 @@
       ></el-input-number>
       <!-- select选择器 -->
       <el-select
-        size="small"
+        :size="size"
         v-model="module"
         placeholder="请选择"
         :multiple="multiple"
@@ -113,7 +116,7 @@
         type="date"
         align="right"
         v-model="module"
-        size="small"
+        :size="size"
         placeholder="选择日期"
         value-format="timestamp"
         :prefix-icon="`el-icon-time`"
@@ -137,6 +140,7 @@
       </el-radio-group>
       <!-- 选择器 -->
       <el-checkbox-group
+        :size="size"
         :min="checkMin"
         :max="checkMax"
         v-model="module"
@@ -153,6 +157,7 @@
       <!-- 文本输入框 -->
       <el-input
         autosize
+        :size="size"
         type="textarea"
         v-model="module"
         v-if="config.type == 'textarea'"
@@ -174,7 +179,7 @@
       <el-button
         type="info"
         size="small"
-        icon="el-meixicomponenticon-close"
+        icon="el-icon-close"
         class="dropdown-button"
         @click="handleClick('edit')"
         plain
@@ -208,6 +213,11 @@ export default {
     },
 
     value: {},
+
+    size: {
+      type: String,
+      default: "small",
+    },
   },
 
   computed: {
@@ -248,10 +258,14 @@ export default {
           let list = this.selectData;
           if (list.length > 0) {
             if (!this.multiple) {
-              let index = list.findIndex((item) => {
-                return item.value == this.module;
-              });
-              return list[index].label;
+              if (this.module) {
+                let index = list.findIndex((item) => {
+                  return item.value == this.module;
+                });
+                return list[index].label;
+              } else {
+                return "暂无数据";
+              }
             } else {
               let text = "";
               this.module.forEach((item) => {
@@ -269,9 +283,14 @@ export default {
           }
 
         case "time":
-          let config = this.$props.config;
-          let format = config.format ? config.format : "YYYY-MM-DD";
-          return FilterTime(this.module, format);
+          if (this.module) {
+            let config = this.$props.config;
+            let format = config.format ? config.format : "YYYY-MM-DD";
+            return FilterTime(this.module, format);
+          } else {
+            return "暂无时间";
+          }
+
         default:
           return this.module;
       }
@@ -363,7 +382,6 @@ export default {
   border-radius: calc(var(--radius) * 2);
   .item-content {
     display: flex;
-    min-height: 32px;
     align-items: center;
     flex-flow: row nowrap;
     box-sizing: border-box;
@@ -409,7 +427,6 @@ export default {
   }
   .item-handle-wrap {
     width: 100%;
-    min-height: 32px;
     border-radius: inherit;
     /deep/ .el-input__inner {
       font-weight: var(--font-weight-kg) !important;
@@ -455,4 +472,31 @@ export default {
     color: var(--font-color-ds) !important;
   }
 }
+.small {
+  .item-content {
+    min-height: 32px;
+  }
+  .item-handle-wrap {
+    min-height: 32px;
+  }
+}
+.mini {
+
+  /deep/ .item-label {
+    font-size: var(--font-size-s) !important;
+  }
+
+  .item-content {
+    min-height: 24px;
+    max-height: 24px;
+    /deep/ .base-icon-wrap {
+      width: 20px !important;
+      height: 20px !important;
+      visibility: hidden;
+    }
+  }
+  .item-handle-wrap {
+    min-height: 24px;
+  }
+}
 </style>

package/packages/components/proForm/proFormWrap/pro_form_wrap.vue

@@ -4,11 +4,13 @@
       <base-icon :name="iconClass" :size="`l`" slot="header-prefix"></base-icon>
       <template slot="sectionContent">
         <pro_formVue
+          :size="size"
           ref="proForm"
           :form="false"
           :rules="rules"
           :footer="false"
           :formList="formList"
+          :rowNumber="rowNumber"
           :labelWidth="labelWidth"
           @formItemConfirm="formItemConfirm"
         ></pro_formVue> </template
@@ -44,6 +46,14 @@ export default {
     rules: {
       type: Object,
     },
+    rowNumber: {
+      type: Number,
+      default: null,
+    },
+    size: {
+      type: String,
+      default: "small",
+    },
   },
   computed: {
     iconClass() {