meixioacomponent 0.2.16 → 0.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.2.16",
+  "version": "0.2.19",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",
@@ -16,7 +16,6 @@
     "dayjs": "^1.11.3",
     "element-ui": "^2.15.6",
     "gulp": "^4.0.0",
-    "js-md5": "^0.7.3",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
@@ -29,6 +28,7 @@
     "@vue/cli-plugin-router": "~4.5.13",
     "@vue/cli-plugin-vuex": "~4.5.13",
     "@vue/cli-service": "~4.5.13",
+    "babel-plugin-component": "^1.1.1",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "vue-template-compiler": "^2.6.11"

package/packages/components/base/baseArea/baseArea.vue

@@ -92,7 +92,6 @@
 </template>
 
 <script>
-import { json } from "body-parser";
 import baseButtonHandleVue from "../baseButtonHandle/baseButtonHandle.vue";
 //
 import areaJson from "./area";
@@ -190,9 +189,7 @@ export default {
   },
   methods: {
     init() {
-      //console.log("start");
       if (this.module && this.module instanceof Object) {
-        //console.log("end");
         for (let i = 0; i < areaConfig.length; i++) {
           let item = areaConfig[i];
           let value = this.module[`${item.value}`];
@@ -377,6 +374,17 @@ export default {
       }
     },
   },
+  watch: {
+    module(newVal, oldVal) {
+      if (!newVal) {
+        this.areaValue=[];
+        return;
+      }
+      if (this.$parent.$options._componentTag == "el-form-item") {
+        this.init();
+      }
+    },
+  },
 };
 </script>
 

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);
+      }
     },
   },
 };

package/packages/config/componentConfig.js

@@ -1,4 +1,5 @@
 import Vue from "vue";
+import { useElementComponent } from "./useElement";
 import selectStore from "./storeModule/selectStore";
 const componentConfig = {
   store: null,
@@ -12,6 +13,8 @@ const componentConfig = {
   },
 
   initConfig: (_store, _router) => {
+    // 注册element 组件
+    useElementComponent();
     // 动态注册vuex modules
     _store.registerModule("selectStore", selectStore);
     // 注册vuex里面selectStore管理类

package/packages/config/useElement.js

@@ -0,0 +1,122 @@
+import Vue from "vue";
+import {
+  Pagination,
+  Dialog,
+  Autocomplete,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Input,
+  InputNumber,
+  Radio,
+  RadioGroup,
+  RadioButton,
+  Checkbox,
+  CheckboxButton,
+  CheckboxGroup,
+  Switch,
+  Select,
+  Option,
+  OptionGroup,
+  Button,
+  Table,
+  TableColumn,
+  DatePicker,
+  TimeSelect,
+  TimePicker,
+  Popover,
+  Tooltip,
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormItem,
+  Tabs,
+  TabPane,
+  Tag,
+  Tree,
+  Alert,
+  Slider,
+  Spinner,
+  Badge,
+  Steps,
+  Step,
+  Cascader,
+  ColorPicker,
+  Transfer,
+  Calendar,
+  CascaderPanel,
+  Loading,
+  MessageBox,
+  Message,
+  Card,
+  Drawer,
+} from "element-ui";
+
+export const useElementComponent = () => {
+  let elementComponentList = [
+    Pagination,
+    Dialog,
+    Autocomplete,
+    Dropdown,
+    DropdownMenu,
+    DropdownItem,
+    Menu,
+    Submenu,
+    MenuItem,
+    MenuItemGroup,
+    Input,
+    InputNumber,
+    Radio,
+    RadioGroup,
+    RadioButton,
+    Checkbox,
+    CheckboxButton,
+    CheckboxGroup,
+    Switch,
+    Select,
+    Option,
+    OptionGroup,
+    Button,
+    Table,
+    TableColumn,
+    DatePicker,
+    TimeSelect,
+    TimePicker,
+    Popover,
+    Tooltip,
+    Breadcrumb,
+    BreadcrumbItem,
+    Form,
+    FormItem,
+    Tabs,
+    TabPane,
+    Tag,
+    Tree,
+    Alert,
+    Slider,
+    Spinner,
+    Badge,
+    Steps,
+    Step,
+    Cascader,
+    ColorPicker,
+    Transfer,
+    Calendar,
+    CascaderPanel,
+    Loading,
+    Card,
+    Drawer,
+  ];
+  elementComponentList.forEach((item) => {
+    Vue.use(item);
+  });
+  //   解决刷新自动调用这两个组件
+  Vue.prototype.$message = Message;
+  Vue.prototype.$messagebox = MessageBox;
+  // 通过函数调用messageBox的confirm方法
+  Vue.prototype.$confirm = MessageBox.confirm;
+};