meixioacomponent 0.3.17 → 0.3.21

package/package.json

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

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

@@ -24,12 +24,15 @@
           :class="[`${flexClass}`, size]"
         >
           <span slot="label" class="item-label">{{ item.label }}</span>
-          <template :style="{ width: `100% - ${labelWidth}` }">
+
+          <template>
             <pro_form_itemVue
               :form="form"
               :size="size"
               :config="item"
+              :disabled="disabled"
               v-model="item.value"
+              :labelWidth="labelWidth"
               :class="[`form-item-${item.key}`]"
               @formItemConfirm="formItemConfirm"
               @disableWatcherResult="disableWatcherResult"
@@ -111,6 +114,10 @@ export default {
     });
   },
   props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     disables: {
       type: Object,
     },
@@ -415,6 +422,11 @@ export default {
     padding-right: var(--padding-5);
     margin-left: 0px !important;
   }
+  .flex-row {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+  }
 
   .flex-column {
     display: flex;

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

@@ -1,13 +1,14 @@
 <template>
   <div
+    ref="formItemRef"
     :class="{
+      disabled: isDisabled,
       mini: size == 'mini',
       small: size == 'small',
       'form-item-wrap': true,
-      disabled: config.disabled,
     }"
   >
-    <div class="item-content" v-if="!isEdit || config.type == 'template'">
+    <div class="item-content" v-if="config.type != 'template' && !isEdit">
       <p
         v-if="!spContentType"
         class="content-value"
@@ -63,18 +64,19 @@
         :size="`s`"
         :event="true"
         :title="`修改`"
-        v-show="!isEdit && !config.disabled"
+        v-show="!isEdit && !isDisabled"
         :name="`meixicomponenticon-edit`"
         @iconClick="handleClick('edit')"
       ></base-icon>
     </div>
+
     <div class="item-handle-wrap" :class="[`${config.type}`]" v-else>
       <!-- input输入框 -->
       <el-input
         ref="target"
         :size="size"
         v-model="module"
-        :disabled="config.disabled"
+        :disabled="isDisabled"
         v-if="config.type == 'input'"
         style="width: 100%; height: 100%"
       >
@@ -85,7 +87,7 @@
         :size="size"
         :controls="false"
         v-model.number="module"
-        :disabled="config.disabled"
+        :disabled="isDisabled"
         v-else-if="config.type == 'number'"
         style="width: 100%; height: 100%"
       ></el-input-number>
@@ -96,7 +98,7 @@
         :precision="2"
         :controls="false"
         v-model.number="module"
-        :disabled="config.disabled"
+        :disabled="isDisabled"
         style="width: 100%; height: 100%"
         v-else-if="config.type == 'number2'"
       ></el-input-number>
@@ -109,7 +111,7 @@
         :multiple="multiple"
         :filterable="true"
         :loading="selectLoading"
-        :disabled="config.disabled"
+        :disabled="isDisabled"
         @visible-change="visibleChange"
         style="width: 100%; height: 100%"
         v-else-if="config.type == 'select' && selectStore"
@@ -132,7 +134,7 @@
         ref="target"
         placeholder="选择日期"
         value-format="yyyy-MM-dd HH:mm:ss"
-        :disabled="config.disabled"
+        :disabled="isDisabled"
         :prefix-icon="`el-icon-time`"
         style="width: 100%; height: 100%"
         v-else-if="config.type == 'time'"
@@ -143,13 +145,13 @@
       <el-radio-group
         v-model="module"
         size="mini"
-        :disabled="config.disabled"
+        :disabled="isDisabled"
         v-else-if="config.type == 'radio'"
       >
         <el-radio-button
           :key="index"
           :label="item.value"
-          :disabled="config.disabled"
+          :disabled="isDisabled"
           v-for="(item, index) in config.list"
           >{{ item.label }}</el-radio-button
         >
@@ -161,13 +163,13 @@
         :max="checkMax"
         v-model="module"
         style="width: 100%"
-        :disabled="config.disabled"
+        :disabled="isDisabled"
         v-else-if="config.type == 'checkbox'"
       >
         <el-checkbox
           :key="index"
           :label="item"
-          :disabled="config.disabled"
+          :disabled="isDisabled"
           v-for="(item, index) in config.list"
           >{{ item }}</el-checkbox
         >
@@ -179,7 +181,7 @@
         :size="size"
         type="textarea"
         v-model="module"
-        :disabled="config.disabled"
+        :disabled="isDisabled"
         v-if="config.type == 'textarea'"
       >
       </el-input>
@@ -224,12 +226,18 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
+      const { labelWidth } = this.$props;
+      this.$refs.formItemRef.parentNode.style.cssText += `;width:calc(100% - ${labelWidth}) !important`;
       if (this.$props.disableWatcher) {
         this.triggerDisable(this.$props.value);
       }
     });
   },
   props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     disableWatcher: {},
     config: {
       type: Object,
@@ -246,9 +254,15 @@ export default {
       type: String,
       default: "small",
     },
+
+    labelWidth: {},
   },
 
   computed: {
+    isDisabled() {
+      const { config, disabled } = this.$props;
+      return config.disabled || disabled;
+    },
     multiple() {
       return this.$props.config.multipleLimit ? true : false;
     },

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

@@ -23,6 +23,7 @@
           :rules="rules"
           :footer="false"
           v-model="formList"
+          :disabled="disabled"
           :rowNumber="rowNumber"
           :labelWidth="labelWidth"
           @formItemConfirm="formItemConfirm"
@@ -53,6 +54,10 @@ export default {
     console.log(this.slotList);
   },
   props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     form: {
       type: Boolean,
       default: false,