gyyg-components 0.3.19 → 0.3.21

package/src/components/MecRadio/MecRadio.vue

@@ -12,20 +12,21 @@
       :key="item[props.value]"
       :value="item[props.value]"
       :border="border"
-    >{{ item[props.label] }}
-  </el-radio>
-  <el-input 
+      >{{ item[props.label] }}
+    </el-radio>
+    <el-input
       v-if="showOther"
-      v-model="inputValue" 
-      :disabled="inputDisabled" 
-      placeholder="请输入" 
-      style="display: inline-block; margin-top: 10px;" />
-      <!-- @input="inputChange" -->
+      v-model="inputValue"
+      :disabled="inputDisabled"
+      placeholder="请输入"
+      style="display: inline-block; margin-top: 10px"
+    />
+    <!-- @input="inputChange" -->
   </el-radio-group>
 </template>
 <script>
 export default {
-  name: 'mec-radio',
+  name: "mec-radio",
   props: {
     value: {},
     border: {
@@ -36,99 +37,112 @@ export default {
     props: {
       default() {
         return {
-          label: 'label',
-          value: 'value',
-        }
+          label: "label",
+          value: "value",
+        };
       },
     },
     showOther: {
       type: Boolean,
-      default: false
+      default: false,
     },
     checkText: {
-        default() {
-            return '其他'
-        }
+      default() {
+        return "其他";
+      },
     },
     otherValue: {
-      default: ""
-    }
+      default: "",
+    },
   },
   data() {
     return {
       radio: this.value,
       option: [],
-      inputValue: '',
-      inputDisabled: true
-    }
+      inputValue: "",
+      inputDisabled: true,
+    };
   },
   watch: {
     value: {
       handler(val) {
-        this.radio = val
+        this.radio = val;
       },
-      immediate: true
+      immediate: true,
     },
     radio: {
       handler(val) {
-        this.$emit('input', val)
-        this.$emit('update:value', val)
+        this.$emit("input", val);
+        this.$emit("update:value", val);
       },
     },
     options: {
       handler: function (val) {
         if (!Array.isArray(this.options) && this.options) {
           if (this.options instanceof Promise) {
-            this.options.then(val => {
+            this.options.then((val) => {
               this.option = val.data || val;
+              let name = this.getNameById(this.value, this.option);
+              if (name.includes(this.checkText)) {
+                this.inputDisabled = false;
+              } else {
+                this.inputDisabled = true;
+              }
             });
           }
-          if (typeof this.options == 'function') {
-            this.options().then(val => {
+          if (typeof this.options == "function") {
+            this.options().then((val) => {
               this.option = val.data || val;
+              let name = this.getNameById(this.value, this.option);
+              if (name.includes(this.checkText)) {
+                this.inputDisabled = false;
+              } else {
+                this.inputDisabled = true;
+              }
             });
           }
-
         } else {
           this.option = val;
-        }
-        let name = this.getNameById(this.value, this.option)
-        if(name.includes(this.checkText)) {
-          this.inputDisabled = false
-        } else {
-          this.inputDisabled = true
+          let name = this.getNameById(this.value, this.option);
+          if (name.includes(this.checkText)) {
+            this.inputDisabled = false;
+          } else {
+            this.inputDisabled = true;
+          }
         }
       },
       deep: true,
       immediate: true,
     },
     otherValue: {
-        handler(val) {
-            this.inputValue = val;
-            console.log(val, 'otherValue')
-        },
-        immediate: true
-    }
+      handler(val) {
+        this.inputValue = val;
+        console.log(val, "otherValue");
+      },
+      immediate: true,
+    },
   },
   methods: {
     handleChange(val) {
-      let info = this.option.filter(item => item[this.props.value] === val)
-      let name = this.getNameById(val, this.option)
-      if(name.includes(this.checkText)) {
-        this.inputDisabled = false
+      let info = this.option.filter((item) => item[this.props.value] === val);
+      console.log(info, "info");
+      let name = this.getNameById(val, this.option);
+      if (name.includes(this.checkText)) {
+        this.inputDisabled = false;
       } else {
-        this.inputDisabled = true
-        this.inputValue = ''
+        this.inputDisabled = true;
+        this.inputValue = "";
       }
-      this.$emit('change', val, info.length > 0 ? info[0] : {})
+      this.$emit("change", val, info.length > 0 ? info[0] : {});
     },
-     // 根据 id 数组获取对应的 name 列表
-      getNameById(id, array) {
-        console.log(id, array)
-        if(!id) return ''
-          return array[array.findIndex(item => item[this.props.value] === id)][this.props.label]
-      },
-  }
-
-}
+    // 根据 id 数组获取对应的 name 列表
+    getNameById(id, array) {
+      console.log(id, array);
+      if (!id) return "";
+      return array[array.findIndex((item) => item[this.props.value] === id)][
+        this.props.label
+      ];
+    },
+  },
+};
 </script>

package/src/components/MecSelect/MecSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <el-select
     v-model="selected"
-	  @clear="clear"
+    @clear="clear"
     @change="handleChange"
     :placeholder="placeholder"
     :multiple="multiple || false"
@@ -11,7 +11,7 @@
     v-bind="$attrs"
     :filterable="filterable"
     :value="selected"
-    style="width: 100%;"
+    style="width: 100%"
   >
     <el-option
       v-for="item in option"
@@ -64,8 +64,8 @@ export default {
   },
   data() {
     return {
-      selected: '',
-      option:[]
+      selected: "",
+      option: [],
     };
   },
   watch: {
@@ -76,39 +76,38 @@ export default {
       immediate: true,
     },
     options: {
-			handler: function (val) {
-				if (!Array.isArray(this.options) && this.options) {
-          if(this.options instanceof  Promise) {
-              this.options.then(val => {
-                this.option = val.data || val;
+      handler: function () {
+        if (!Array.isArray(this.options) && this.options) {
+          if (this.options instanceof Promise) {
+            this.options.then((val) => {
+              this.option = val.data || val;
             });
           }
-          if(typeof this.options == 'function') {
-            this.options().then(val => {
+          if (typeof this.options == "function") {
+            this.options().then((val) => {
               this.option = val.data || val;
             });
           }
-
         } else {
           this.option = this.options;
         }
-			},
-			deep: true,
-			immediate: true,
-		},
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   methods: {
     handleChange(val) {
       this.selected = val;
-       let info = this.option.filter(item => item[this.props.value] == val)
+      let info = this.option.filter((item) => item[this.props.value] == val);
       this.$emit("input", this.selected);
-      this.$emit('update:value', val)
+      this.$emit("update:value", val);
       this.$emit("change", val, info.length > 0 ? info[0] : {});
     },
     clear() {
-      this.selected = '';
-      this.$emit('clear')
-    }
+      this.selected = "";
+      this.$emit("clear");
+    },
   },
 };
 </script>

package/src/components/MecSelectAndButton/MecSelectAndButton.js

@@ -0,0 +1,5 @@
+import MecSelectAndButton from "./MecSelectAndButton.vue";
+
+MecSelectAndButton.install = Vue => Vue.component(MecSelectAndButton.name, MecSelectAndButton); //注册组件
+
+export default MecSelectAndButton;

package/src/components/MecSelectAndButton/MecSelectAndButton.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="select-button-box">
+    <el-select
+      v-model="selected"
+      @clear="clear"
+      @change="handleChange"
+      :placeholder="placeholder"
+      :multiple="multiple || false"
+      :clearable="clearable"
+      :disabled="disabled"
+      :size="size"
+      v-bind="$attrs"
+      :filterable="filterable"
+      :value="selected"
+      style="width: 100%"
+      @visible-change="visibleChange"
+    >
+      <el-option
+        v-for="item in option"
+        :key="item[props.value]"
+        :label="item[props.label]"
+        :value="item[props.value]"
+        :disabled="item.disabled"
+      ></el-option>
+    </el-select>
+    <el-button :icon="buttonIcon" :type="buttonType" @click="btnClick">{{
+      buttonText
+    }}</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MecSelectAndButton",
+  props: {
+    value: {
+      default: null,
+      required: true,
+    },
+    options: {
+      required: true,
+    },
+    multiple: {
+      default: false,
+    },
+    props: {
+      default() {
+        return {
+          label: "name",
+          value: "id",
+        };
+      },
+    },
+    placeholder: {
+      type: String,
+      default: "请选择",
+    },
+    clearable: {
+      type: Boolean,
+    },
+    disabled: {
+      type: Boolean,
+      defalut: false,
+    },
+    size: String,
+    filterable: {
+      type: Boolean,
+      defalut: false,
+    },
+    buttonIcon: {
+      type: String,
+      default: "el-icon-plus",
+    },
+    buttonText: {
+      type: String,
+      default: "新增",
+    },
+    buttonType: {
+      type: String,
+      default: "",
+    },
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selected: "",
+      option: [],
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.selected = val;
+      },
+      immediate: true,
+    },
+    options: {
+      handler: function () {
+        if (!Array.isArray(this.options) && this.options) {
+          if (this.options instanceof Promise) {
+            this.options.then((val) => {
+              this.option = val.data || val;
+            });
+          }
+          if (typeof this.options == "function") {
+            this.options().then((val) => {
+              this.option = val.data || val;
+            });
+          }
+        } else {
+          this.option = this.options;
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  methods: {
+    handleChange(val) {
+      this.selected = val;
+      let info = this.option.filter((item) => item[this.props.value] == val);
+      this.$emit("input", this.selected);
+      this.$emit("update:value", val);
+      this.$emit("change", val, info.length > 0 ? info[0] : {});
+    },
+    clear() {
+      this.selected = "";
+      this.$emit("clear");
+    },
+    visibleChange(val) {
+      if (val && this.isVisible) {
+        if (!Array.isArray(this.options) && this.options) {
+          if (this.options instanceof Promise) {
+            this.options.then((val) => {
+              this.option = val.data || val;
+            });
+          }
+          if (typeof this.options == "function") {
+            this.options().then((val) => {
+              this.option = val.data || val;
+            });
+          }
+        } else {
+          this.option = this.options;
+        }
+      }
+    },
+    btnClick(btn) {
+      this.$emit("btnClick", btn);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.select-button-box {
+  display: flex;
+  align-items: center;
+}
+/deep/ .el-button {
+  height: 40px;
+  margin-left: 10px;
+}
+</style>

package/src/components/MecTable/MecTable.vue

@@ -330,7 +330,6 @@ export default {
     watch: {
         columns: {
             handler: function (val) {
-                console.log(val);   
                 this.column = [...val];
             },
             immediate: true,