gyyg-components 0.3.20 → 0.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "private": false,
   "main": "lib/gyyg-components.umd.js",
   "scripts": {

package/src/components/MecButtonGroup/MecButtonGroup.vue

@@ -117,7 +117,6 @@ export default {
     mounted() {
         this.$nextTick(() => {
             this.btnWidth = this.$refs.btnGroup.offsetWidth
-            console.log('width: calc(100% - (' + this.btnWidth + ' px))')
         })
     },
 

package/src/components/MecCheckbox/MecCheckbox.vue

@@ -1,175 +1,225 @@
 <template>
-    <div class="checkbox-group">
-        <el-checkbox 
-            :indeterminate="isIndeterminate" 
-            v-if="isCheckAll" 
-            v-model="checkAll" 
-            @change="handleCheckAllChange">全选</el-checkbox>
-        <div style="margin: 15px 0;" v-if="isCheckAll" ></div>
-        <el-checkbox-group v-model="checkbox" @change="handleCheckedCitiesChange" :disabled="disabled">
-            <el-checkbox v-for="(item, index) in option" 
-                :label="item[props.value]"
-                :disabled="item.disabled"
-                :key="index"
-                >{{ item[props.label] }}</el-checkbox>
-                <el-input 
-                    v-if="showOther"
-                    v-model="inputValue" 
-                    :disabled="inputDisabled" 
-                    placeholder="请输入其他" 
-                    @input="inputChange"
-                    style="display: inline-block; margin-left: 10px;" />
-        </el-checkbox-group>
-        
-    </div>
+  <div class="checkbox-group">
+    <el-checkbox
+      :indeterminate="isIndeterminate"
+      v-if="isCheckAll"
+      v-model="checkAll"
+      @change="handleCheckAllChange"
+      >全选</el-checkbox
+    >
+    <div style="margin: 15px 0" v-if="isCheckAll"></div>
+    <el-checkbox-group
+      v-model="checkbox"
+      @change="handleCheckedCitiesChange"
+      :disabled="disabled"
+    >
+      <div v-if="isHover">
+        <el-tooltip
+          v-for="(item, index) in option"
+          :key="index"
+          class="item"
+          effect="dark"
+          :content="item[contentFileld]"
+          placement="top-start"
+        >
+          <el-checkbox
+            :label="item[props.value]"
+            :disabled="item.disabled"
+            @change="(val) => checkBoxChange(val, item)"
+            >{{ item[props.label] }}</el-checkbox
+          >
+        </el-tooltip>
+      </div>
+      <div v-else>
+        <el-checkbox
+          v-for="(item, index) in option"
+          :label="item[props.value]"
+          :disabled="item.disabled"
+          :key="index"
+          @change="(val) => checkBoxChange(val, item)"
+          >{{ item[props.label] }}</el-checkbox
+        >
+      </div>
+      <el-input
+        v-if="showOther"
+        v-model="inputValue"
+        :disabled="inputDisabled"
+        placeholder="请输入其他"
+        @input="inputChange"
+        style="display: inline-block; margin-left: 10px"
+      />
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
 export default {
-    name: 'mec-checkbox',
+  name: "mec-checkbox",
+  props: {
+    value: {},
+    options: {},
     props: {
-        value: {},
-        options: {},
-        props: {
-            default() {
-                return {
-                    label: 'name',
-                    value: 'id'
-                }
-            }
-        },
-        isCheckAll: {
-            default() {
-                return false;
-            }
-        },
-        showOther: {
-            default() {
-                return false;
-            }
-        },
-        otherValue: {
-            default() {
-                return '';
-            }
-        },
-        checkText: {
-            default() {
-                return '其他'
-            }
-        },
-        disabled: {
-            default() {
-                return false;
-            }
-        }
-    },
-    data() {
+      default() {
         return {
-            checkAll: false,
-            checkbox: [],
-            isIndeterminate: true,
-            option: [],
-            inputValue: '',
-            inputDisabled: true
+          label: "name",
+          value: "id",
         };
+      },
     },
-    watch: {
-        value: {
-            handler (val) {
-                this.checkbox = [].concat(val)
-            },
-            immediate: true
-        },
-        options: {
-			handler: function (val) {
-				//判断options是否为promise
-				if (typeof val !== 'function' && val && !val.then) {
-					this.option = this.options;
-                    let nameList = this.getNameListByIds(this.value, this.option)
-                    this.inputDisabled = nameList.filter(item => {
-                        return item.includes(this.checkText)
-                    }).length == 0
-				}
-			},
-			deep: true,
-			immediate: true,
-		},
-        otherValue: {
-            handler(val) {
-                this.inputValue = val;
-                console.log(val, 'otherValue')
-            },
-            immediate: true
-        }
+    isCheckAll: {
+      default() {
+        return false;
+      },
     },
-    mounted() {
-        if (!Array.isArray(this.options) && this.options) {
-            if(this.options instanceof  Promise) {
-                this.options.then(val => {
-                    this.option = val.data || val;
-                    let nameList = this.getNameListByIds(this.value, this.option)
-                    this.inputDisabled = nameList.filter(item => {
-                        return item.includes(this.checkText)
-                    }).length == 0
-                });
-            }
-            if(typeof this.options == 'function') {
-                this.options().then(val => {
-                    this.option = val.data || val;
-                    let nameList = this.getNameListByIds(this.value, this.option)
-                    this.inputDisabled = nameList.filter(item => {
-                        return item.includes(this.checkText)
-                    }).length == 0
-                });
-            }
-
-        } else {
-            this.option = this.options;
-        }
-        
+    showOther: {
+      default() {
+        return false;
+      },
+    },
+    otherValue: {
+      default() {
+        return "";
+      },
+    },
+    checkText: {
+      default() {
+        return "其他";
+      },
+    },
+    disabled: {
+      default() {
+        return false;
+      },
+    },
+    isHover: {
+      default() {
+        return false;
+      },
+    },
+    contentFileld: {
+      default() {
+        return "content";
+      },
     },
-    computed: {
-        checkboxAll () {
-            return this.option.map(item => {
-                return item[this.props.value]
-            })
+  },
+  data() {
+    return {
+      checkAll: false,
+      checkbox: [],
+      isIndeterminate: true,
+      option: [],
+      inputValue: "",
+      inputDisabled: true,
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.checkbox = [].concat(val);
+      },
+      immediate: true,
+    },
+    options: {
+      handler: function (val) {
+        //判断options是否为promise
+        if (typeof val !== "function" && val && !val.then) {
+          this.option = this.options;
+          let nameList = this.getNameListByIds(this.value, this.option);
+          this.inputDisabled =
+            nameList.filter((item) => {
+              return item.includes(this.checkText);
+            }).length == 0;
         }
+      },
+      deep: true,
+      immediate: true,
+    },
+    otherValue: {
+      handler(val) {
+        this.inputValue = val;
+        console.log(val, "otherValue");
+      },
+      immediate: true,
     },
-    methods: {
-        handleCheckAllChange(val) {
-            this.checkbox = val ? this.checkboxAll : [];
-            this.isIndeterminate = false;
-        },
-        handleCheckedCitiesChange(value) {
-            let checkedCount = value.length;
-            this.checkAll = checkedCount === this.checkboxAll.length;
-            this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkboxAll.length;
-            this.$emit('input', value)
-            this.$emit('update:value', value)
-            let nameList = this.getNameListByIds(value, this.option)
-            this.inputDisabled = nameList.filter(item => {
-                return item.includes(this.checkText)
-            }).length == 0
-            console.log(this.inputDisabled, 'this.inputDisabledthis.inputDisabledthis.inputDisabled')
-        },
-        // 根据 id 数组获取对应的 name 列表
-        getNameListByIds(ids, array) {
-            return ids.map(id => {
-                const reason = array.find(item => item[this.props.value] === id);
-                return reason ? reason[this.props.label] : '';
-            }).filter(name => name); // 过滤掉空值
-        },
-        // 其他输入框输入
-        inputChange(val) {
-            this.$emit('update:otherValue', val)
-        },
+  },
+  mounted() {
+    if (!Array.isArray(this.options) && this.options) {
+      if (this.options instanceof Promise) {
+        this.options.then((val) => {
+          this.option = val.data || val;
+          let nameList = this.getNameListByIds(this.value, this.option);
+          this.inputDisabled =
+            nameList.filter((item) => {
+              return item.includes(this.checkText);
+            }).length == 0;
+        });
+      }
+      if (typeof this.options == "function") {
+        this.options().then((val) => {
+          this.option = val.data || val;
+          let nameList = this.getNameListByIds(this.value, this.option);
+          this.inputDisabled =
+            nameList.filter((item) => {
+              return item.includes(this.checkText);
+            }).length == 0;
+        });
+      }
+    } else {
+      this.option = this.options;
     }
+  },
+  computed: {
+    checkboxAll() {
+      return this.option.map((item) => {
+        return item[this.props.value];
+      });
+    },
+  },
+  methods: {
+    handleCheckAllChange(val) {
+      this.checkbox = val ? this.checkboxAll : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.checkboxAll.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.checkboxAll.length;
+
+      this.$emit("input", value);
+      this.$emit("update:value", value);
+      let nameList = this.getNameListByIds(value, this.option);
+      this.inputDisabled =
+        nameList.filter((item) => {
+          return item.includes(this.checkText);
+        }).length == 0;
+    },
+    // 根据 id 数组获取对应的 name 列表
+    getNameListByIds(ids, array) {
+      return ids
+        .map((id) => {
+          const reason = array.find((item) => item[this.props.value] === id);
+          return reason ? reason[this.props.label] : "";
+        })
+        .filter((name) => name); // 过滤掉空值
+    },
+    // 其他输入框输入
+    inputChange(val) {
+      this.$emit("update:otherValue", val);
+    },
+    checkBoxChange(val, item) {
+      if (val) {
+        this.$emit("checkBoxSelect", item);
+      } else {
+        this.$emit("checkBoxSelect", {});
+      }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
 .checkbox-group {
-    /deep/ .el-checkbox__label {
-        font-weight: normal;
-    }
-} 
+  /deep/ .el-checkbox__label {
+    font-weight: normal;
+  }
+}
 </style>

package/src/components/MecDatePicker/MecDatePicker.vue

@@ -22,7 +22,10 @@
 export default {
     name: 'mec-date-picker',
     props: {
-        value: {},
+        value: {
+            type: [String, Array],
+            default: ''
+        },
         dateType: {
             type: String,
             default: 'date'

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,100 +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)
-      console.log(info, 'info')
-      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/MecTable/MecTable.vue

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