gyyg-components 0.3.18 → 0.3.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.3.18",
+  "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

@@ -1,100 +1,130 @@
 <template>
-	<el-form
-		ref="formData"
-		:model="formData"
-		:label-width="labelWidth"
-		:label-position="labelPosition"
-	>
-		<template v-for="(item, index) in formData">
-			<el-col
-				v-if="typeof item.displayWith !== 'function' || item.displayWith(formData, item)"
-				:span="item.col"
-				:style="item.style"
-				:key="index"
-			>
-				<el-form-item v-bind="item" :prop="getProp(item, index)" 
-					:rules="item.rules" 
-					:class="item.class" 
-					:label-width="item.labelWidth">
-					<template slot="label">
-						<span v-if="item.label">
-							<span :style="'color:' + item.labelColor">{{ item.label }}</span>
-						<el-tooltip v-if="item.tooltip" class="item" effect="dark" :content="item.tooltip" placement="top">
-							<i class="el-icon-question"></i>
-						</el-tooltip>
-						</span>
-					</template>
-					<component
-						:is="item['componentName']"
-						v-model="item.value"
-						:value.sync="item.value"
-						:otherValue.sync="item.otherValue"
-						:delIdList.sync="item.delIdList"
-						v-bind="item"
-						v-on="item.componentListeners"
-					></component>
-				</el-form-item>
-			</el-col>
-		</template>
-	</el-form>
+  <el-form
+    ref="formData"
+    :model="formData"
+    :label-width="labelWidth"
+    :label-position="labelPosition"
+  >
+    <template v-for="(item, index) in formData">
+      <el-col
+        v-if="
+          typeof item.displayWith !== 'function' ||
+          item.displayWith(formData, item)
+        "
+        :span="item.col"
+        :style="item.style"
+        :key="index"
+      >
+        <el-form-item
+          v-bind="item"
+          :prop="getProp(item, index)"
+          :rules="item.rules"
+          :class="item.class"
+          :label-width="item.labelWidth"
+        >
+          <template slot="label">
+            <span v-if="item.label">
+              <span :style="'color:' + item.labelColor">{{ item.label }}</span>
+              <el-tooltip
+                v-if="item.tooltip"
+                class="item"
+                effect="dark"
+                :content="item.tooltip"
+                placement="top"
+              >
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+            </span>
+          </template>
+          <component
+            :is="item['componentName']"
+            v-model="item.value"
+            :value.sync="item.value"
+            :otherValue.sync="item.otherValue"                                                                        
+            :delIdList.sync="item.delIdList"
+            v-bind="item"
+            v-on="item.componentListeners"
+            :ref="item.componentRef"
+          ></component>
+        </el-form-item>
+      </el-col>
+    </template>
+  </el-form>
 </template>
 <script>
 export default {
-	name: 'mec-form',
-	props: {
-		formData: {
-			required: true,
-		},
-		labelWidth: {
-			type: String,
-			default: '150px',
-		},
-		labelPosition: {
-			type: String,
-			default: 'right',
-		},
-	},
-	data() {
-		return {
-			loading: false,
-		};
-	},
-	computed: {},
-	methods: {
-        getProp(item, index) {
-            let propName = item.prop ? item.prop : index + ".value";
-            return propName;
-        },
-		validate() {
-			return new Promise((resolve, reject) => {
-				this.$refs.formData.validate(valid => {
-				if (valid) {
-					resolve(true);
-				} else {
-					resolve(false);
-				}
-				});
-			});
-		},
-		clearValidate() {
-			this.$refs.formData.clearValidate();
-		},
-	},
+  name: "mec-form",
+  props: {
+    formData: {
+      required: true,
+    },
+    labelWidth: {
+      type: String,
+      default: "150px",
+    },
+    labelPosition: {
+      type: String,
+      default: "right",
+    },
+    showErrMsg: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+    };
+  },
+  computed: {},
+  methods: {
+    getProp(item, index) {
+      let propName = item.prop ? item.prop : index + ".value";
+      return propName;
+    },
+    validate() {
+      return new Promise((resolve) => {
+        this.$refs.formData.validate((valid, info) => {
+          if (valid) {
+            if (this.showErrMsg) {
+              resolve({ valid: true, errorMsg: [] });
+            } else {
+              resolve(true);
+            }
+          } else {
+            let errorMsg = [];
+            for (let key in info) {
+              console.log(info[key]);
+              errorMsg.push(info[key][0].message);
+            }
+            if (this.showErrMsg) {
+              resolve({ valid: false, errorMsg: errorMsg });
+            } else {
+              resolve(false);
+            }
+          }
+        });
+      });
+    },
+    clearValidate() {
+      this.$refs.formData.clearValidate();
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
+
 ::v-deep.el-form::after {
-	content: "";
-	display: table;
-	clear: both;
+  content: "";
+  display: table;
+  clear: both;
 }
 ::v-deep.el-form--label-top {
-	.el-col {
-		padding-right: 15px;
-	}
-	.el-form-item {
-		margin-bottom: 12px;
-	}
+  .el-col {
+    padding-right: 15px;
+  }
+  .el-form-item {
+    margin-bottom: 12px;
+  }
 }
-
 </style>

package/src/components/MecInput/MecInput.vue

@@ -150,6 +150,8 @@
           if (value.split('.').length > 2) {
             value = value.replace(/\.+$/, '');
           }
+        } else if (this.inputType === 'englishAndNumber') {
+          value = value.replace(/[^a-zA-Z0-9\s]/g, '');
         }
         this.inputValue = value
         this.$emit('input', value);

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

@@ -12,7 +12,15 @@
       :key="item[props.value]"
       :value="item[props.value]"
       :border="border"
-    >{{ item[props.label] }}</el-radio>
+    >{{ 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" -->
   </el-radio-group>
 </template>
 <script>
@@ -33,11 +41,25 @@ export default {
         }
       },
     },
+    showOther: {
+      type: Boolean,
+      default: false
+    },
+    checkText: {
+        default() {
+            return '其他'
+        }
+    },
+    otherValue: {
+      default: ""
+    }
   },
   data() {
     return {
       radio: this.value,
-      option: []
+      option: [],
+      inputValue: '',
+      inputDisabled: true
     }
   },
   watch: {
@@ -68,18 +90,45 @@ export default {
           }
 
         } else {
-          this.option = this.options;
+          this.option = val;
+        }
+        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
+    }
   },
   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
+      } else {
+        this.inputDisabled = true
+        this.inputValue = ''
+      }
       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]
+      },
   }
 
 }

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;