meixioacomponent 0.2.32 → 0.2.34

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

@@ -9,6 +9,55 @@
       :label-position="labelPosition"
     >
       <div
+        :key="item.key"
+        v-for="item in module"
+        v-show="!item.renderHide"
+        class="pro-form-item-content"
+        :class="[`chunk-${chunkLength}`]"
+      >
+        <el-form-item
+          :prop="item.key"
+          :label="item.label"
+          :class="[`${flexClass}`, size]"
+        >
+          <span slot="label" class="item-label">{{ item.label }}</span>
+          <pro_form_itemVue
+            :form="form"
+            :size="size"
+            :config="item"
+            :class="[`form-item-${item.key}`]"
+            @formItemConfirm="formItemConfirm"
+            @disableWatcherResult="disableWatcherResult"
+            :disableWatcher="setWatcher(item.key)"
+            v-if="formType == 'default' && item.type != 'area'"
+            v-model="item.value"
+          >
+            <template slot="template" v-if="item.type == 'template'">
+              <slot :name="`form-${item.key}`" :scope="module"></slot>
+            </template>
+          </pro_form_itemVue>
+          <baseAreaVue
+            :disable="item.disabled"
+            v-if="item.type == 'area'"
+            :ref="`area-${item.key}`"
+            v-model="item.value"
+            :class="[`form-item-${item.key}`]"
+            @confirmAreaValue="
+              formItemConfirm({
+                config: item,
+              })
+            "
+          ></baseAreaVue>
+          <baseUploadVue
+            :max="formConfig.max"
+            v-if="formType == `upload`"
+            v-model="item.value"
+            :class="[`form-item-${item.key}`]"
+          ></baseUploadVue>
+        </el-form-item>
+      </div>
+
+      <!-- <div
         :key="index"
         class="form-line-box"
         v-for="(item, index) in formLineList"
@@ -17,31 +66,31 @@
           :key="cindex"
           :prop="citem.key"
           :label="citem.label"
+          v-show="!citem.renderHide"
           v-for="(citem, cindex) in item"
           :class="[`chunk-${chunkLength}`, `${flexClass}`, size]"
         >
           <span slot="label" class="item-label">{{ citem.label }}</span>
           <pro_form_itemVue
-            :config="citem"
             :form="form"
             :size="size"
+            :config="citem"
             :class="[`form-item-${citem.key}`]"
-            v-if="formType == 'default' && citem.type != 'area'"
             @formItemConfirm="formItemConfirm"
-            @proFormItemChange="
-              proFormItemChange($event, findFormItem(index, cindex))
-            "
-            v-model="formList[findFormItem(index, cindex)].value"
+            @disableWatcherResult="disableWatcherResult"
+            :disableWatcher="setWatcher(citem.key)"
+            v-if="formType == 'default' && citem.type != 'area'"
+            v-model="module[findFormItem(index, cindex)].value"
           >
             <template slot="template" v-if="citem.type == 'template'">
-              <slot :name="`form-${citem.key}`" :scope="formList"></slot>
+              <slot :name="`form-${citem.key}`" :scope="module"></slot>
             </template>
           </pro_form_itemVue>
           <baseAreaVue
             :disable="citem.disabled"
             v-if="citem.type == 'area'"
             :ref="`area-${citem.key}`"
-            v-model="formList[findFormItem(index, cindex)].value"
+            v-model="module[findFormItem(index, cindex)].value"
             :class="[`form-item-${citem.key}`]"
             @confirmAreaValue="
               formItemConfirm({
@@ -52,11 +101,11 @@
           <baseUploadVue
             :max="formConfig.max"
             v-if="formType == `upload`"
-            v-model="formList[findFormItem(index, cindex)].value"
+            v-model="module[findFormItem(index, cindex)].value"
             :class="[`form-item-${citem.key}`]"
           ></baseUploadVue>
         </el-form-item>
-      </div>
+      </div> -->
 
       <baseButtonHandleVue
         v-if="footer"
@@ -69,18 +118,12 @@
 
     <div class="form-skeleton-wrap" v-else>
       <div
-        :key="index"
-        class="form-line-box"
-        v-for="(item, index) in formLineList"
+        class="form-skeleton-item-wrap"
+        :key="item.key"
+        v-for="item in module"
+        :class="[`chunk-${chunkLength}`, `${flexClass}`, size]"
       >
-        <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>
+        <pro_formItem_skeletonVue></pro_formItem_skeletonVue>
       </div>
     </div>
   </div>
@@ -107,9 +150,13 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.init();
+      console.log(this.module);
     });
   },
   props: {
+    disables: {
+      type: Object,
+    },
     rules: {
       type: Object,
     },
@@ -117,7 +164,7 @@ export default {
       type: String,
       default: `right`,
     },
-    formList: {
+    value: {
       type: Array,
       require: true,
     },
@@ -165,6 +212,14 @@ export default {
     pro_formItem_skeletonVue,
   },
   computed: {
+    module: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.$props.value;
+      },
+    },
     flexClass() {
       let labelPosition = this.$props.labelPosition;
       if (labelPosition == "top") {
@@ -176,14 +231,14 @@ export default {
 
     formdata() {
       let obj = {};
-      this.$props.formList.forEach((item) => {
+      this.module.forEach((item) => {
         obj[`${item.key}`] = item.value;
       });
       return obj;
     },
 
     formLineList() {
-      return ArrayChunk(this.$props.formList, this.chunkLength);
+      return ArrayChunk(this.module, this.chunkLength);
     },
   },
   methods: {
@@ -327,6 +382,18 @@ export default {
     findFormItem(index, cindex) {
       return index * this.chunkLength + cindex;
     },
+
+    setWatcher(key) {
+      let disables = this.$props.disables;
+      if (disables) {
+        return disables[`${key}`];
+      }
+      return false;
+    },
+
+    disableWatcherResult(params) {
+      this.$emit("disableWatcherResult", params);
+    },
   },
   watch: {
     chunkLength(newVal, oldVal) {
@@ -353,6 +420,33 @@ export default {
       color: var(--form-label-color) !important;
     }
   }
+
+  .pro-form-item-content {
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  .form-skeleton-wrap {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+  /deep/.el-form {
+    width: 100%;
+    height: auto;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+  /deep/ .el-form-item {
+    width: 100%;
+  }
   /deep/ .el-form-item__content {
     width: 100% !important;
     box-sizing: border-box;

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

@@ -209,7 +209,15 @@ export default {
   created() {
     this.init();
   },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$props.disableWatcher) {
+        // this.triggerDisable();
+      }
+    });
+  },
   props: {
+    disableWatcher: {},
     config: {
       type: Object,
     },
@@ -331,7 +339,12 @@ export default {
         return this.$props.value;
       },
       set(val) {
+        console.log(val);
         this.$emit("input", val);
+        console.log(this.$props.disableWatcher);
+        if (this.$props.disableWatcher) {
+          this.triggerDisable(val);
+        }
       },
     },
   },
@@ -391,6 +404,19 @@ export default {
       if (this.selectData.length > 0) return;
       this.loadSelectData();
     },
+    triggerDisable(val) {
+      let effects = this.$props.disableWatcher.effects;
+      effects.forEach((item) => {
+        let obj = {
+          key: item.key,
+          type: item.type,
+          result: item.fn(val),
+        };
+        console.log(obj);
+
+        this.$emit("disableWatcherResult", obj);
+      });
+    },
   },
 };
 </script>

package/packages/components/style/element/index.css

@@ -1123,7 +1123,7 @@
   margin: 5px 0;
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item {
-  padding-right: 40px;
+  padding-right: 0px;
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
   color: var(--color-primary);
@@ -1540,7 +1540,8 @@
   border-color: #909399;
 }
 .el-tag.el-tag--info .el-tag__close {
-  color: #909399;
+  color: var(--text-black) !important;
+  background-color: var(--text-white) !important;
 }
 .el-tag.el-tag--info .el-tag__close:hover {
   color: var(--bg-white);
@@ -2014,20 +2015,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.el-select .el-tag {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  border-color: transparent;
-  margin: 2px 0 2px 6px;
-  background-color: #f0f2f5;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  max-width: 100%;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
+
 .el-select .el-tag__close.el-icon-close {
   background-color: #8f959e;
   top: 0;
@@ -5846,7 +5834,7 @@
   margin: 5px 0;
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item {
-  padding-right: 40px;
+  padding-right: 0px !important;
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
   color: var(--color-primary);
@@ -6738,7 +6726,8 @@
   box-sizing: border-box;
   border-color: transparent;
   margin: 2px 0 2px 6px;
-  background-color: #f0f2f5;
+  color: var(--text-white);
+  background-color: var(--color-success);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -14522,9 +14511,7 @@
 .el-tag.el-tag--info.is-hit {
   border-color: #909399;
 }
-.el-tag.el-tag--info .el-tag__close {
-  color: #909399;
-}
+
 .el-tag.el-tag--info .el-tag__close:hover {
   color: var(--bg-white);
   background-color: #909399;
@@ -15248,6 +15235,8 @@
 .el-tree-node {
   white-space: nowrap;
   outline: 0;
+  margin: var(--margin-3) 0px;
+  padding: 0px var(--padding-3);
 }
 .el-tree-node:focus > .el-tree-node__content {
   background-color: var(--hover-gray);
@@ -20999,9 +20988,7 @@
 .el-tag.el-tag--info.is-hit {
   border-color: #909399;
 }
-.el-tag.el-tag--info .el-tag__close {
-  color: #909399;
-}
+
 .el-tag.el-tag--info .el-tag__close:hover {
   color: var(--bg-white);
   background-color: #909399;