gyyg-components 0.3.19 → 0.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.3.19",
+  "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/MecDrawer/MecDrawer.js

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

package/src/components/MecDrawer/MecDrawer.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <el-drawer :visible.sync="searchDrawerVisible" direction="rtl" :before-close="handleBeforeClose" :modal="true"
+      icon="el-icon-search" :size="width">
+      <!-- 标题区域 -->
+      <div slot="title" class="drawer-title">
+        <i class="el-icon-search" style="margin-right: 8px; color: #409EFF;font-size: 20px;"></i>
+        <span>{{title}}</span>
+      </div>
+
+      <!-- 内容区域：通过默认插槽自定义内容 -->
+      <div class="drawer-content">
+        <slot name="body"></slot>
+      </div>
+
+      <!-- 底部区域：通过具名插槽自定义内容（固定在底部） -->
+      <div class="searchBoxFooter">
+        <slot name="footer"></slot>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SearchDrawer',
+  props: {
+    width: {
+      type: String,
+      default: '20%'
+    },
+    title: {
+      type: String,
+      default: '筛选'
+    }
+  },
+  data() {
+    return {
+      searchDrawerVisible: false
+    }
+  },
+  methods: {
+    open() {
+      this.searchDrawerVisible = true;
+    },
+    close() {
+      this.searchDrawerVisible = false
+    },
+    handleBeforeClose(done) {
+      this.searchDrawerVisible = false;
+      done();
+    }
+  }
+}
+</script>
+
+<style scoped>
+::v-deep .el-drawer__header {
+  align-items: center;
+  color: #72767b;
+  display: flex;
+  margin-bottom: 32px;
+  padding: 10px 20px;
+  background-color: #efefef !important;
+}
+
+.drawer-title {
+  display: flex;
+  align-items: baseline;
+  font-size: 18px;
+}
+
+.drawer-content {
+  height: calc(100% - 120px);
+  padding: 0 20px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.searchBoxFooter {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  padding: 6px 15px;
+  background-color: #efefef;
+  border-top: 1px solid #e8e8e8;
+  display: flex;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  z-index: 10;
+}
+</style>

package/src/components/MecForm/MecForm.vue

@@ -40,10 +40,11 @@
             :is="item['componentName']"
             v-model="item.value"
             :value.sync="item.value"
-            :otherValue.sync="item.otherValue"
+            :otherValue.sync="item.otherValue"                                                                        
             :delIdList.sync="item.delIdList"
             v-bind="item"
             v-on="item.componentListeners"
+            :ref="item.componentRef"
           ></component>
         </el-form-item>
       </el-col>
@@ -112,6 +113,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+
 ::v-deep.el-form::after {
   content: "";
   display: table;

package/src/components/MecPopoverButton/MecPopoverButton.vue

@@ -9,6 +9,7 @@
             placement="bottom-end"
             @click="clickEvent"
             @command="changeItem"
+            @visible-change="visibleChange"
             >
                 <span v-if="btnInfo.splitButton"><i :class="btnInfo.icon" style="margin-right: 5px;"></i>{{ btnInfo.text}}</span>
                 <el-button :type="btnInfo.type" v-else>
@@ -39,6 +40,9 @@ export default {
         },
         changeItem(value) {
            this.btnInfo.callback(value)
+        },
+        visibleChange(value) {
+            this.$emit('visibleChange', value)
             
         }
     }