meixioacomponent 0.3.27 → 0.3.30

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

@@ -29,8 +29,9 @@
           :key="index"
           :label="item.value"
           v-for="(item, index) in config.list"
-          >{{ item.label }}</el-radio-button
         >
+          {{ item.label }}
+        </el-radio-button>
       </el-radio-group>
 
       <!-- checkbox多选框 -->
@@ -38,7 +39,7 @@
         :min="checkMin"
         :max="checkMax"
         v-model="module"
-        style="width: 100%"
+        style="width: 100%;"
         v-else-if="config.type == 'checkbox'"
       >
         <el-checkbox
@@ -46,8 +47,9 @@
           :key="index"
           :label="item"
           disabled
-          >{{ item }}</el-checkbox
         >
+          {{ item }}
+        </el-checkbox>
       </el-checkbox-group>
       <!-- textarea -->
       <el-input
@@ -57,8 +59,7 @@
         type="textarea"
         v-model="module"
         v-if="config.type == 'textarea'"
-      >
-      </el-input>
+      ></el-input>
 
       <base-icon
         :size="`s`"
@@ -78,9 +79,8 @@
         v-model="module"
         :disabled="isDisabled"
         v-if="config.type == 'input'"
-        style="width: 100%; height: 100%"
-      >
-      </el-input>
+        style="width: 100%; height: 100%;"
+      ></el-input>
       <!-- 数字类型无小数 -->
       <el-input-number
         ref="target"
@@ -89,7 +89,7 @@
         v-model.number="module"
         :disabled="isDisabled"
         v-else-if="config.type == 'number'"
-        style="width: 100%; height: 100%"
+        style="width: 100%; height: 100%;"
       ></el-input-number>
       <!--数字类型两位小数  -->
       <el-input-number
@@ -99,7 +99,7 @@
         :controls="false"
         v-model.number="module"
         :disabled="isDisabled"
-        style="width: 100%; height: 100%"
+        style="width: 100%; height: 100%;"
         v-else-if="config.type == 'number2'"
       ></el-input-number>
       <!-- select选择器 -->
@@ -113,7 +113,7 @@
         :loading="selectLoading"
         :disabled="isDisabled"
         @visible-change="visibleChange"
-        style="width: 100%; height: 100%"
+        style="width: 100%; height: 100%;"
         v-else-if="config.type == 'select' && selectStore"
         :multipleLimit="config.multipleLimit"
       >
@@ -122,8 +122,7 @@
           :key="item.value"
           :label="item[`${selectConfig.label}`]"
           :value="item[`${selectConfig.value}`]"
-        >
-        </el-option>
+        ></el-option>
       </el-select>
       <!-- 时间选择器 -->
       <el-date-picker
@@ -136,11 +135,10 @@
         value-format="yyyy-MM-dd HH:mm:ss"
         :disabled="isDisabled"
         :prefix-icon="`el-icon-time`"
-        style="width: 100%; height: 100%"
+        style="width: 100%; height: 100%;"
         v-else-if="config.type == 'time'"
         :picker-options="config.pickerOptions"
-      >
-      </el-date-picker>
+      ></el-date-picker>
       <!-- 单选框 -->
       <el-radio-group
         v-model="module"
@@ -153,8 +151,9 @@
           :label="item.value"
           :disabled="isDisabled"
           v-for="(item, index) in config.list"
-          >{{ item.label }}</el-radio-button
         >
+          {{ item.label }}
+        </el-radio-button>
       </el-radio-group>
       <!-- 选择器 -->
       <el-checkbox-group
@@ -162,7 +161,7 @@
         :min="checkMin"
         :max="checkMax"
         v-model="module"
-        style="width: 100%"
+        style="width: 100%;"
         :disabled="isDisabled"
         v-else-if="config.type == 'checkbox'"
       >
@@ -171,8 +170,9 @@
           :label="item"
           :disabled="isDisabled"
           v-for="(item, index) in config.list"
-          >{{ item }}</el-checkbox
         >
+          {{ item }}
+        </el-checkbox>
       </el-checkbox-group>
       <!-- 文本输入框 -->
       <el-input
@@ -183,8 +183,7 @@
         v-model="module"
         :disabled="isDisabled"
         v-if="config.type == 'textarea'"
-      >
-      </el-input>
+      ></el-input>
       <!-- 插槽 -->
       <slot name="template" v-else-if="config.type == 'template'"></slot>
     </div>
@@ -211,27 +210,27 @@
 </template>
 
 <script>
-import { FilterTime } from "../../../utils/utils";
+import { FilterTime } from '../../../utils/utils'
 //
-import componentConfig from "../../../config/componentConfig";
+import componentConfig from '../../../config/componentConfig'
 export default {
   data() {
     return {
       isEdit: false,
       oldValue: null,
-    };
+    }
   },
   created() {
-    this.init();
+    this.init()
   },
   mounted() {
     this.$nextTick(() => {
-      const { labelWidth } = this.$props;
-      this.$refs.formItemRef.parentNode.style.cssText += `;width:calc(100% - ${labelWidth}) !important`;
+      const { labelWidth } = this.$props
+      this.$refs.formItemRef.parentNode.style.cssText += `;width:calc(100% - ${labelWidth}) !important`
       if (this.$props.disableWatcher) {
-        this.triggerDisable(this.$props.value);
+        this.triggerDisable(this.$props.value)
       }
-    });
+    })
   },
   props: {
     disabled: {
@@ -252,7 +251,7 @@ export default {
 
     size: {
       type: String,
-      default: "small",
+      default: 'small',
     },
 
     labelWidth: {},
@@ -260,72 +259,72 @@ export default {
 
   computed: {
     isDisabled() {
-      const { config, disabled } = this.$props;
-      return config.disabled || disabled;
+      const { config, disabled } = this.$props
+      return config.disabled || disabled
     },
     multiple() {
-      return this.$props.config.multipleLimit ? true : false;
+      return this.$props.config.multipleLimit ? true : false
     },
     selectLoading() {
-      return this.selectStore?.getLoading();
+      return this.selectStore?.getLoading()
     },
     selectStore() {
-      return componentConfig.selectStore.getStore(this.$props.config.useStore);
+      return componentConfig.selectStore.getStore(this.$props.config.useStore)
     },
 
     selectData() {
-      return this.selectStore.getData();
+      return this.selectStore.getData()
     },
 
     selectConfig() {
-      return this.selectStore.getConfig();
+      return this.selectStore.getConfig()
     },
 
     spContentType() {
-      let configType = this.$props.config.type;
+      let configType = this.$props.config.type
       if (
-        configType == "radio" ||
-        configType == "label" ||
-        configType == "checkbox" ||
-        configType == "textarea"
+        configType == 'radio' ||
+        configType == 'label' ||
+        configType == 'checkbox' ||
+        configType == 'textarea'
       ) {
-        return true;
+        return true
       }
-      return false;
+      return false
     },
     contentValue() {
-      let type = this.$props.config.type;
+      let type = this.$props.config.type
       switch (type) {
-        case "input":
-        case "textarea":
-          return this.module;
+        case 'input':
+        case 'textarea':
+          return this.module
 
-        case "select":
-          let list = this.selectData;
+        case 'select':
+          let list = this.selectData
           if (list.length > 0) {
             if (!this.multiple) {
               if (this.module) {
                 let index = list.findIndex((item) => {
-                  return item.value == this.module;
-                });
-                return list[index].label;
+                  return item.value == this.module
+                })
+                return list[index].label
               } else {
-                return "暂无数据";
+                return '暂无数据'
               }
             } else {
-              let text = "";
+              let text = ''
               this.module.forEach((item) => {
                 let index = list.findIndex((citem) => {
-                  return citem.value == item;
-                });
+                  return citem.value == item
+                })
 
-                text += text ? ` / ${list[index].label}` : list[index].label;
-              });
-              return text;
+                text += text ? ` / ${list[index].label}` : list[index].label
+              })
+              return text
             }
           } else {
-            this.loadSelectData();
-            return this.$props.config.value;
+            this.loadSelectData()
+            return this.$props.config.value
           }
 
         // case "time":
@@ -338,37 +337,37 @@ export default {
         //   }
 
         default:
-          return this.module;
+          return this.module
       }
     },
     type() {
-      return this.$props.config.type;
+      return this.$props.config.type
     },
 
     checkMax() {
-      let max = this.$props.config.max;
-      return max ? max : this.$props.config.list.length;
+      let max = this.$props.config.max
+      return max ? max : this.$props.config.list.length
     },
 
     checkMin() {
-      let min = this.$props.config.min;
-      return min < 0 || min == undefined || min == null ? 0 : min;
+      let min = this.$props.config.min
+      return min < 0 || min == undefined || min == null ? 0 : min
     },
     module: {
       get() {
-        let type = this.$props.config.type;
-        if (type == "select") {
+        let type = this.$props.config.type
+        if (type == 'select') {
           if (this.selectData.length <= 0) {
-            this.loadSelectData();
+            this.loadSelectData()
           }
         }
 
-        return this.$props.value;
+        return this.$props.value
       },
       set(val) {
-        this.$emit("input", val);
+        this.$emit('input', val)
         if (this.$props.disableWatcher) {
-          this.triggerDisable(val);
+          this.triggerDisable(val)
         }
       },
     },
@@ -376,74 +375,81 @@ export default {
   methods: {
     init() {
       if (this.$props.form) {
-        this.isEdit = true;
+        this.isEdit = true
+      } else {
+        this.isEdit = false
       }
     },
     handleContent() {
       if (this.$props.config.click) {
-        this.$props.config.click(this.$props.config);
+        this.$props.config.click(this.$props.config)
       }
     },
     handleClick(type) {
       switch (type) {
-        case "edit":
-          this.isEdit = !this.isEdit;
+        case 'edit':
+          this.isEdit = !this.isEdit
           this.$nextTick(() => {
-            this.targetFocus();
-          });
+            this.targetFocus()
+          })
           if (this.isEdit) {
-            this.oldValue = this.value;
+            this.oldValue = this.value
           } else {
-            this.module = this.oldValue;
-            this.oldValue = null;
+            this.module = this.oldValue
+            this.oldValue = null
           }
-          break;
-        case "content":
-          this.handleContent();
-          break;
-        case "confirm":
-          this.$emit("formItemConfirm", {
+          break
+        case 'content':
+          this.handleContent()
+          break
+        case 'confirm':
+          this.$emit('formItemConfirm', {
             this: this,
             config: this.$props.config,
-          });
-          break;
+          })
+          break
         default:
-          break;
+          break
       }
     },
     targetFocus() {
-      let ref = this.$refs.target;
-      console.log(ref);
+      let ref = this.$refs.target
+      console.log(ref)
       if (ref) {
-        ref.focus();
+        ref.focus()
       }
     },
     handleConfirm() {
-      this.isEdit = false;
+      this.isEdit = false
     },
     loadSelectData() {
-      this.selectStore.loadData();
+      this.selectStore.loadData()
     },
     visibleChange(visible) {
-      if (!visible) return;
-      if (this.selectData.length > 0) return;
-      this.loadSelectData();
+      if (!visible) return
+      if (this.selectData.length > 0) return
+      this.loadSelectData()
     },
     triggerDisable(val) {
-      let effects = this.$props.disableWatcher.effects;
+      let effects = this.$props.disableWatcher.effects
       effects.forEach((item) => {
         let obj = {
           key: item.key,
           type: item.type,
           result: item.fn(val),
-        };
+        }
 
-        console.log(val);
-        this.$emit("disableWatcherResult", obj);
-      });
+        console.log(val)
+        this.$emit('disableWatcherResult', obj)
+      })
     },
   },
-};
+  watch: {
+    form(newVal, oldVal) {
+      this.init()
+    },
+  },
+}
 </script>
 
 <style lang="less" scoped>