gyyg-components 0.3.19 → 0.3.20

package/package.json

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

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)
             
         }
     }

package/src/components/MecRadio/MecRadio.vue

@@ -113,6 +113,7 @@ export default {
   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

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>