gyyg-components 0.3.17 → 0.3.19

package/package.json

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

package/src/components/MecForm/MecForm.vue

@@ -1,100 +1,128 @@
 <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"
+          ></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/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,44 @@ 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)
+      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/MecTable/MecTable.vue

@@ -47,7 +47,7 @@
                     :width="col.width"
                     :sortable="col.sortable"
                     :show-overflow-tooltip="col.showOverflowTooltip"
-                    :key="index"
+                    :key="col.id"
                     :fixed="col.fixed"
                     :prop="col.bind"
                 >
@@ -144,7 +144,7 @@
             <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
-                :page-sizes="[10, 20, 30, 50]"
+                :page-sizes="pageSizes"
                 :page-size="page.pageSize"
                 :current-page="page.currentPage"
                 layout="total, sizes, prev, pager, next, jumper"
@@ -205,7 +205,7 @@ export default {
             required: false,
             default: () => {
                 return {
-                    backgroundColor: "#EFF3F8",
+                    backgroundColor: "#efefef",
                     fontWeight: 'normal',
                     color: '#303133',
                 }
@@ -266,12 +266,17 @@ export default {
         showIndex: {
             type: Boolean,
             default: false
+        },
+        pageSizes: {
+            type: Array,
+            default: () => [10, 20, 30, 50]
         }
 
     },
     data() {
         return {
             multipleSelection: [],
+            column: []
         }
     },
     methods: {
@@ -325,8 +330,8 @@ export default {
     watch: {
         columns: {
             handler: function (val) {
-
-                this.column = val;
+                console.log(val);   
+                this.column = [...val];
             },
             immediate: true,
             deep: true,
@@ -339,7 +344,9 @@ export default {
     background-color: #fff;
     height: 100%;
 }
-
+/deep/ .el-table {
+    margin-bottom: 10px;
+}
 .pagination-layout {
     text-align: right;
     padding: 0px 10px 5px 0;
@@ -381,4 +388,5 @@ export default {
     font-size: 15px;
     color: #F56C6C;
 }
+
 </style>