meixioacomponent 0.2.16 → 0.2.17

package/package.json

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

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="form-item-skeleton-wrap">
+    <div class="skeleton-left">
+      <base-skeleton :shape="`rect`" :lines="[1]"> </base-skeleton>
+    </div>
+    <div class="skeleton-right">
+      <base-skeleton :shape="`rect`" :lines="[4, 7]"> </base-skeleton>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.form-item-skeleton-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  .skeleton-left {
+    width: 30%;
+    height: 100%;
+    margin-right: var(--margin-5);
+  }
+  .skeleton-right {
+    height: 60px;
+    width: calc(70% - 10px);
+  }
+}
+</style>

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

@@ -1,6 +1,7 @@
 <template>
   <div class="pro_form_content" ref="proFormWrap">
     <el-form
+      v-if="!loading"
       ref="form"
       :rules="rules"
       :model="formdata"
@@ -27,17 +28,20 @@
             :class="[`form-item-${citem.key}`]"
             v-if="formType == 'default' && citem.type != 'area'"
             @formItemConfirm="formItemConfirm"
-            v-model="formdata[`${citem.key}`]"
+            @proFormItemChange="
+              proFormItemChange($event, findFormItem(index, cindex))
+            "
+            v-model="formList[findFormItem(index, cindex)].value"
           >
             <template slot="template" v-if="citem.type == 'template'">
-              <slot :name="`form-${citem.key}`" :scope="formdata"></slot>
+              <slot :name="`form-${citem.key}`" :scope="formList"></slot>
             </template>
           </pro_form_itemVue>
           <baseAreaVue
             :disable="citem.disabled"
             v-if="citem.type == 'area'"
             :ref="`area-${citem.key}`"
-            v-model="formdata[`${citem.key}`]"
+            v-model="formList[findFormItem(index, cindex)].value"
             :class="[`form-item-${citem.key}`]"
             @confirmAreaValue="
               formItemConfirm({
@@ -48,7 +52,7 @@
           <baseUploadVue
             :max="formConfig.max"
             v-if="formType == `upload`"
-            v-model="formdata[`${citem.key}`]"
+            v-model="formList[findFormItem(index, cindex)].value"
             :class="[`form-item-${citem.key}`]"
           ></baseUploadVue>
         </el-form-item>
@@ -62,6 +66,23 @@
         :config="handleConfig"
       ></baseButtonHandleVue>
     </el-form>
+
+    <div class="form-skeleton-wrap" v-else>
+      <div
+        :key="index"
+        class="form-line-box"
+        v-for="(item, index) in formLineList"
+      >
+        <div
+          class="form-skeleton-item-wrap"
+          :key="cindex"
+          v-for="(citem, cindex) in item"
+          :class="[`chunk-${chunkLength}`, `${flexClass}`, size]"
+        >
+          <pro_formItem_skeletonVue></pro_formItem_skeletonVue>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -69,6 +90,7 @@
 import pro_form_itemVue from "./pro_form_item.vue";
 import baseAreaVue from "../../base/baseArea/baseArea.vue";
 import baseUploadVue from "../../base/baseUpload/baseUpload.vue";
+import pro_formItem_skeletonVue from "./pro_form-item_skeleton.vue";
 import baseButtonHandleVue from "../../base/baseButtonHandle/baseButtonHandle.vue";
 //
 import { ArrayChunk } from "../../../utils/utils";
@@ -76,20 +98,17 @@ export default {
   name: "baseForm",
   data() {
     return {
-      formdata: {},
       handleConfig: [],
-      formLineList: [],
       chunkLength: null,
+      loading: true,
     };
   },
-  created() {
+  created() {},
+  mounted() {
     this.$nextTick(() => {
       this.init();
-      this.setFormData();
-      this.setFormLineList();
     });
   },
-  mounted() {},
   props: {
     rules: {
       type: Object,
@@ -143,6 +162,7 @@ export default {
     baseUploadVue,
     pro_form_itemVue,
     baseButtonHandleVue,
+    pro_formItem_skeletonVue,
   },
   computed: {
     flexClass() {
@@ -153,6 +173,18 @@ export default {
         return "flex-row";
       }
     },
+
+    formdata() {
+      let obj = {};
+      this.$props.formList.forEach((item) => {
+        obj[`${item.key}`] = item.value;
+      });
+      return obj;
+    },
+
+    formLineList() {
+      return ArrayChunk(this.$props.formList, this.chunkLength);
+    },
   },
   methods: {
     init() {
@@ -176,7 +208,9 @@ export default {
           },
         ];
       }
-
+      this.setChunkLength();
+    },
+    setChunkLength() {
       if (this.$props.rowNumber) {
         this.chunkLength = this.$props.rowNumber;
         return;
@@ -221,6 +255,8 @@ export default {
         let confrim = true;
         const rulesItem = this.$props.rules[params.config.key];
         if (rulesItem) {
+          console.log(rulesItem);
+          console.log(this.$refs.form);
           this.$refs.form.validateField(
             [`${params.config.key}`],
             (errorMsg) => {
@@ -236,15 +272,7 @@ export default {
         return true;
       }
     },
-    setFormData() {
-      this.formdata = {};
-      this.$props.formList.forEach((item) => {
-        this.$set(this.formdata, `${item.key}`, item.value);
-      });
-    },
-    setFormLineList() {
-      this.formLineList = ArrayChunk(this.$props.formList, this.chunkLength);
-    },
+
     // 返回form表单值
     returnFormValue() {
       return this.formdata;
@@ -295,11 +323,18 @@ export default {
     onCancel() {
       this.$emit("onCancel");
     },
+
+    findFormItem(index, cindex) {
+      return index * this.chunkLength + cindex;
+    },
   },
   watch: {
-    formList(newVal, oldVal) {
-      this.setFormData();
-      this.setFormLineList();
+    chunkLength(newVal, oldVal) {
+      if (this.loading) {
+        setTimeout(() => {
+          this.loading = false;
+        }, 1500);
+      }
     },
   },
 };