meixioacomponent 0.3.32 → 0.3.33

package/package.json

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

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

@@ -33,6 +33,7 @@
               :disabled="disabled"
               v-model="item.value"
               :labelWidth="labelWidth"
+              :labelPosition="labelPosition"
               :class="[`form-item-${item.key}`]"
               @formItemConfirm="formItemConfirm"
               @disableWatcherResult="disableWatcherResult"
@@ -90,28 +91,27 @@
 </template>
 
 <script>
-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 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";
+import { ArrayChunk } from '../../../utils/utils'
 export default {
-  name: "baseForm",
+  name: 'baseForm',
   data() {
     return {
       handleConfig: [],
       chunkLength: null,
       loading: true,
-    };
+    }
   },
   created() {},
   mounted() {
     this.$nextTick(() => {
-      this.init();
-      console.log(this.module);
-    });
+      this.init()
+    })
   },
   props: {
     disabled: {
@@ -140,7 +140,7 @@ export default {
 
     labelWidth: {
       type: String,
-      default: "100px",
+      default: '100px',
     },
 
     footer: {
@@ -150,7 +150,7 @@ export default {
 
     formType: {
       type: String,
-      default: "default",
+      default: 'default',
     },
 
     formConfig: {
@@ -165,7 +165,7 @@ export default {
 
     size: {
       type: String,
-      default: "small",
+      default: 'small',
     },
   },
   components: {
@@ -177,39 +177,39 @@ export default {
   },
   computed: {
     itemWidth() {
-      return `${100 / this.chunkLength}%`;
+      return `${100 / this.chunkLength}%`
     },
     module: {
       set(val) {
-        this.$emit("input", val);
+        this.$emit('input', val)
       },
       get() {
-        return this.$props.value;
+        return this.$props.value
       },
     },
     flexClass() {
-      let labelPosition = this.$props.labelPosition;
-      if (labelPosition == "top") {
-        return "flex-column";
+      let labelPosition = this.$props.labelPosition
+      if (labelPosition == 'top') {
+        return 'flex-column'
       } else {
-        return "flex-row";
+        return 'flex-row'
       }
     },
 
     formdata() {
-      let obj = {};
+      let obj = {}
 
       this.module.forEach((item) => {
         if (!item.renderHide) {
-          obj[`${item.key}`] = item.value;
+          obj[`${item.key}`] = item.value
         }
-      });
+      })
 
-      return obj;
+      return obj
     },
 
     formLineList() {
-      return ArrayChunk(this.module, this.chunkLength);
+      return ArrayChunk(this.module, this.chunkLength)
     },
   },
   methods: {
@@ -217,163 +217,163 @@ export default {
       if (this.$props.form) {
         this.handleConfig = [
           {
-            text: "取消",
-            type: "info",
+            text: '取消',
+            type: 'info',
             plain: true,
             click: () => {
-              this.onCancel();
+              this.onCancel()
             },
           },
           {
-            text: "确定",
-            type: "primary",
+            text: '确定',
+            type: 'primary',
             plain: false,
             click: () => {
-              this.onSubmit();
+              this.onSubmit()
             },
           },
-        ];
+        ]
       }
-      this.setChunkLength();
+      this.setChunkLength()
     },
     setChunkLength() {
-      const { formConfig } = this.$props;
+      const { formConfig } = this.$props
       if (formConfig?.rowNumber) {
-        this.chunkLength = formConfig.rowNumber;
-        return;
+        this.chunkLength = formConfig.rowNumber
+        return
       } else if (this.$props.rowNumber) {
-        this.chunkLength = this.$props.rowNumber;
-        return;
+        this.chunkLength = this.$props.rowNumber
+        return
       }
 
-      let width = this.$refs.proFormWrap.clientWidth;
-      if (this.$props.formType != "default") {
-        this.chunkLength = 1;
-        return;
+      let width = this.$refs.proFormWrap.clientWidth
+      if (this.$props.formType != 'default') {
+        this.chunkLength = 1
+        return
       }
       if (width < 1240) {
-        this.chunkLength = 2;
-        return;
+        this.chunkLength = 2
+        return
       }
-      this.chunkLength = 3;
+      this.chunkLength = 3
     },
 
     formItemConfirm(params) {
-      if (params.config.type == "area") {
-        this.formAreaConfirm(params);
-        return;
+      if (params.config.type == 'area') {
+        this.formAreaConfirm(params)
+        return
       }
-      let result = this.submitVerifiData(params);
-      console.log(result);
+      let result = this.submitVerifiData(params)
+      console.log(result)
       if (result) {
-        params.this.handleConfirm();
-        this.$emit("formItemConfirm", params.config);
+        params.this.handleConfirm()
+        this.$emit('formItemConfirm', params.config)
       }
     },
     formAreaConfirm(params) {
-      let result = this.submitVerifiData(params);
+      let result = this.submitVerifiData(params)
       if (result) {
-        this.$refs[`area-${params.config.key}`][0].doClose();
-        this.$emit("formItemConfirm", params.config);
+        this.$refs[`area-${params.config.key}`][0].doClose()
+        this.$emit('formItemConfirm', params.config)
       } else {
-        this.$message.error("请重新选择");
+        this.$message.error('请重新选择')
       }
     },
     submitVerifiData(params) {
-      console.log(params);
+      console.log(params)
       if (this.$props.rules) {
         // element 验证单条表单修改
-        let confrim = true;
-        const rulesItem = this.$props.rules[params.config.key];
+        let confrim = true
+        const rulesItem = this.$props.rules[params.config.key]
         if (rulesItem) {
           this.$refs.form.validateField(`${params.config.key}`, (errorMsg) => {
             if (errorMsg) {
-              confrim = false;
+              confrim = false
             }
-          });
+          })
         }
-        return confrim;
+        return confrim
       } else {
-        return true;
+        return true
       }
     },
 
     // 返回form表单值
     returnFormValue() {
-      return this.formdata;
+      return this.formdata
     },
     // 重置表单的值
     reset() {
-      this.$refs.form.resetFields();
+      this.$refs.form.resetFields()
     },
 
     checkValidate() {
       return new Promise((resolve, reject) => {
         this.$refs.form.validate((validate, Object) => {
           // 滚动至未填写的项目中
-          if (JSON.stringify(Object) != "{}") {
-            this.scrollToItem(Object);
+          if (JSON.stringify(Object) != '{}') {
+            this.scrollToItem(Object)
           }
-          resolve({ result: validate, validateArray: Object });
-        });
-      });
+          resolve({ result: validate, validateArray: Object })
+        })
+      })
     },
 
     scrollToItem(object) {
-      let firstKey = null;
+      let firstKey = null
       for (const key in object) {
         if (!firstKey) {
-          firstKey = key;
+          firstKey = key
         }
       }
-      let nodeScope = this.$refs.proFormWrap;
-      let dom = nodeScope.querySelector(`.form-item-${firstKey}`);
-      dom.scrollIntoView();
+      let nodeScope = this.$refs.proFormWrap
+      let dom = nodeScope.querySelector(`.form-item-${firstKey}`)
+      dom.scrollIntoView()
     },
 
     async onSubmit() {
       if (this.$props.rules) {
-        let validate = await this.checkValidate();
+        let validate = await this.checkValidate()
         if (validate.result) {
-          this.$emit("formSubmit", true);
+          this.$emit('formSubmit', true)
         } else {
-          this.$emit("formSubmit", false);
+          this.$emit('formSubmit', false)
         }
       } else {
-        this.$emit("formSubmit", true);
+        this.$emit('formSubmit', true)
       }
     },
     // 取消按钮
     onCancel() {
-      this.$emit("onCancel");
+      this.$emit('onCancel')
     },
 
     findFormItem(index, cindex) {
-      return index * this.chunkLength + cindex;
+      return index * this.chunkLength + cindex
     },
 
     setWatcher(key) {
-      let disables = this.$props.disables;
+      let disables = this.$props.disables
       if (disables) {
-        return disables[`${key}`];
+        return disables[`${key}`]
       }
-      return false;
+      return false
     },
 
     disableWatcherResult(params) {
-      this.$emit("disableWatcherResult", params);
+      this.$emit('disableWatcherResult', params)
     },
   },
   watch: {
     chunkLength(newVal, oldVal) {
       if (this.loading) {
         setTimeout(() => {
-          this.loading = false;
-        }, 750);
+          this.loading = false
+        }, 750)
       }
     },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>

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

@@ -225,8 +225,10 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      const { labelWidth } = this.$props
-      this.$refs.formItemRef.parentNode.style.cssText += `;width:calc(100% - ${labelWidth}) !important`
+      const { labelWidth, labelPosition } = this.$props
+      if (labelPosition != 'top') {
+        this.$refs.formItemRef.parentNode.style.cssText += `;width:calc(100% - ${labelWidth}) !important`
+      }
       if (this.$props.disableWatcher) {
         this.triggerDisable(this.$props.value)
       }
@@ -246,6 +248,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    labelPosition: {
+      type: String,
+      default: `right`,
+    },
 
     value: {},