gyyg-components 0.2.16 → 0.2.17

package/package.json

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

package/src/components/MECDefaultText/MECDefaultText.vue

@@ -1,9 +1,21 @@
 <template>
-    <div>{{ value }}</div>
+    <div :class="textType == 'littleTitle' ? 'title' : ''">{{ value }}</div>
 </template>
 <script>
 export default {
     name: 'mec-defaultText',
-    props:['value']
+    props:['value', 'textType']
 }
-</script>
+</script>
+<style lang="less" scoped>
+ .title {
+    padding-left: 10px;
+    height: 30px;
+    line-height: 30px;
+    background: #efefef;
+    margin-bottom: 10px;
+    font-weight: bold;
+    font-size: 14px; 
+    width: 100%;
+}
+</style>

package/src/components/MECDescriptions/MECDescriptions.js

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

package/src/components/MECDescriptions/MECDescriptions.vue

@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <el-descriptions :column="column" :title="title" :extra="extra" :direction="direction" :border="border">
+            <template #title>
+                <div class="title">{{ title }}</div>
+                <div class="top-content">
+                    <slot name="topContent"></slot>
+
+                </div>
+            </template>
+
+            <el-descriptions-item v-for="(item, index) in detailsData" :key="index" :label="item.label">
+                <div v-if="item.type === 'img'">
+                    <el-image 
+                        v-for="(url, index) in item.value"
+                        :key="index"
+                        style="width: 100px; height: 100px; margin-right: 10px;"
+                        :src="url" 
+                        :preview-src-list="item.value">
+                    </el-image>
+                </div>
+                <div v-else-if="item.type === 'voice'">
+                    <audio controls="controls" style="width: 240px; height: 40px;" v-for="item in item.value" :key="item.id">
+                        <source :src="item" type="audio/mp3">
+                    </audio>
+                </div>
+                <span v-else>{{ item.value }}</span>
+            </el-descriptions-item>
+        </el-descriptions>
+    </div>
+</template>
+<script>
+export default {
+    name: 'mec-descriptions',
+    props: {
+        // 详细信息
+        detailsData: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        },
+        // 列数
+        column: {
+            type: Number,
+            default: 3
+        },
+        // 标题
+        title: {
+            type: String,
+            default: ''
+        },
+        // 右边的文本
+        extra: {
+            type: String,
+            default: ''
+        },
+        // 是否显示冒号
+        colon: {
+            type: Boolean,
+            default: true
+        },
+        direction: {
+            type: String,
+            default: 'horizontal'
+        },
+        border: {
+            type: Boolean,
+            default: false
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+/deep/ .el-descriptions__header {
+    display: block;
+}
+.title {
+    padding-left: 10px;
+    height: 30px;
+    line-height: 30px;
+    background: #efefef;
+    margin-bottom: 10px;
+    font-weight: bold;
+    color: #606266;
+    font-size: 14px;
+}
+.top-content {
+    color: #606266;
+    font-size: 14px;
+    font-weight: normal;
+}
+/deep/ .el-descriptions-item__label {
+    white-space: nowrap;
+}
+</style>

package/src/components/MecCheckbox/MecCheckbox.vue

@@ -6,31 +6,34 @@
             v-model="checkAll" 
             @change="handleCheckAllChange">全选</el-checkbox>
         <div style="margin: 15px 0;" v-if="isCheckAll" ></div>
-        <el-checkbox-group v-model="checkbox" @change="handleCheckedCitiesChange">
-            <el-checkbox v-for="(item, index) in options" 
+        <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>
+                :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>
 </template>
 <script>
-const cityOptions = ['上海', '北京', '广州', '深圳'];
 export default {
     name: 'mec-checkbox',
     props: {
         value: {},
-        options: {
-            type: Array,
-            default() {
-                return [];
-            }
-        },
+        options: {},
         props: {
             default() {
                 return {
-                    label: 'label',
-                    value: 'value'
+                    label: 'name',
+                    value: 'id'
                 }
             }
         },
@@ -39,12 +42,35 @@ export default {
                 return false;
             }
         },
+        showOther: {
+            default() {
+                return false;
+            }
+        },
+        otherValue: {
+            default() {
+                return '';
+            }
+        },
+        checkText: {
+            default() {
+                return '其他'
+            }
+        },
+        disabled: {
+            default() {
+                return false;
+            }
+        }
     },
     data() {
         return {
             checkAll: false,
             checkbox: [],
-            isIndeterminate: true
+            isIndeterminate: true,
+            option: [],
+            inputValue: '',
+            inputDisabled: true
         };
     },
     watch: {
@@ -54,10 +80,42 @@ export default {
             },
             immediate: true
         },
+        options: {
+			handler: function (val) {
+				//判断options是否为promise
+				if (typeof val !== 'function' && val && !val.then) {
+					this.option = this.options;
+				}
+			},
+			deep: true,
+			immediate: true,
+		},
+        otherValue: {
+            handler(val) {
+                this.inputValue = val;
+            }
+        }
+    },
+    mounted() {
+        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;
+        }
     },
     computed: {
         checkboxAll () {
-            return this.options.map(item => {
+            return this.option.map(item => {
                 return item[this.props.value]
             })
         }
@@ -72,8 +130,23 @@ export default {
             this.checkAll = checkedCount === this.checkboxAll.length;
             this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkboxAll.length;
             this.$emit('input', value)
-            console.log(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)
+        },
     }
 };
 </script>

package/src/components/MecDatePicker/MecDatePicker.vue

@@ -84,6 +84,7 @@ export default {
         date: {
             handler(val) {
                 this.$emit('input', val);
+                this.$emit('update:value', val)
             }
 
         }

package/src/components/MecDialog/MecDialog.vue

@@ -81,6 +81,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    dialogClass: {
+      type: String,
+      default: ""
+    }
   },
   data() {
     return {
@@ -90,18 +94,7 @@ export default {
   },
   computed: {
     customClass() {
-      let className = "";
-      switch (this.type) {
-        case "form":
-          className = "base-dialog-form";
-          break;
-        case "table":
-          className = "base-dialog-table";
-          break;
-        case "fullscreen":
-          className = "base-dialog-fullscreen";
-          break;
-      }
+      let className = this.dialogClass;
       return className;
     },
   },
@@ -169,7 +162,6 @@ export default {
     }
 
     .el-dialog__footer {
-      box-sizing: border-box;
       padding: 10px 20px;
       border: none;
       background-color: #efefef;
@@ -222,4 +214,9 @@ export default {
     }
   }
 }
+.shan-maintenance-dialog {
+    /deep/ .el-dialog {
+        height: 90%;
+    }
+}
 </style>

package/src/components/MecForm/MecForm.vue

@@ -15,8 +15,7 @@
 				<el-form-item v-bind="item" :prop="getProp(item, index)" 
 					:rules="item.rules" 
 					:class="item.class" 
-					:label-width="item.labelWidth" 
-					:style="item.labelWidth ? 'width: calc(100% - ' + labelWidth + ');' : ''">
+					:label-width="item.labelWidth">
 					<template slot="label">
 						<span v-if="item.label">
 							{{ item.label }}
@@ -28,6 +27,8 @@
 					<component
 						:is="item['componentName']"
 						v-model="item.value"
+						:value.sync="item.value"
+						:otherValue.sync="item.otherValue"
 						v-bind="item"
 						v-on="item.componentListeners"
 					></component>
@@ -73,7 +74,10 @@ export default {
 				}
 				});
 			});
-		}
+		},
+		clearValidate() {
+			this.$refs.formData.clearValidate();
+		},
 	},
 };
 </script>
@@ -83,4 +87,5 @@ export default {
 	display: table;
 	clear: both;
 }
+
 </style>

package/src/components/MecInput/MecInput.vue

@@ -16,6 +16,8 @@
       @input="handleInput"
       @clear="clear"
       @keyup.enter.native="handleEnter"
+      v-feeInput="isFeeInput"
+      @blur="handleBlur"
     >
     <div slot="prepend" v-if="prependText" @click="btnClick" :style="disabled ? 'cursor: not-allowed' : 'cursor: pointer'">{{ prependText }}</div>
     <div slot="append" v-if="appendText"  @click="btnClick" :style="disabled ? 'cursor: not-allowed' : 'cursor: pointer'">{{ appendText }}</div>
@@ -24,8 +26,13 @@
   </template>
   
   <script>
+  import feeInput from "@/directive/mec-feeInput/index"
   export default {
     name: 'mec-input',
+    directives: {
+      feeInput
+    },
+
     props: {
       value: {
         default: ''
@@ -104,7 +111,12 @@
       appendIcon: {
         type: String,
         default: ''
-      }
+      },
+      isFeeInput: {
+        type: Boolean,
+        default: false
+      },
+
     },
     data() {
       return {
@@ -138,6 +150,7 @@
         }
         this.inputValue = value
         this.$emit('input', value);
+        this.$emit('update:value', value)
       },
       clear() {
         this.$emit('clear')
@@ -147,6 +160,9 @@
       },
       handleEnter() {
         this.$emit('enter')
+      },
+      handleBlur() {
+        this.$emit('blur', this.inputValue)
       }
     },
     watch: {

package/src/components/MecInputTable/MecInputTable.vue

@@ -104,6 +104,7 @@ export default {
         },
         tableInputHandel(val) {
             this.$emit('input', val)
+            this.$emit('update:value', val)
         },
         search() {
             this.$emit('search', this.tableInput)

package/src/components/MecRadio/MecRadio.vue

@@ -49,6 +49,7 @@ export default {
         radio: {
             handler(val) {
                 this.$emit('input', val)
+                this.$emit('update:value', val)
             },
         }
     },

package/src/components/MecSelect/MecSelect.vue

@@ -40,8 +40,8 @@ export default {
     props: {
       default() {
         return {
-          label: "label",
-          value: "value",
+          label: "name",
+          value: "id",
         };
       },
     },
@@ -90,6 +90,7 @@ export default {
     handleChange(val) {
       this.selected = val;
       this.$emit("input", this.selected);
+      this.$emit('update:value', val)
       this.$emit("change", val);
     },
     clear() {

package/src/components/MecTable/MecTable.vue

@@ -259,6 +259,7 @@ export default {
 <style lang="less" scoped>
 .table-container {
     background-color: #fff;
+    height: 100%;
 }
 .pagination-layout {
     text-align: right;

package/src/components/MecTabs/MecTabs.vue

@@ -53,6 +53,7 @@ export default {
         activeName:{
             handler(val) {
                 this.$emit('input', val);
+                this.$emit('update:value', val)
             }
         }
 	},

package/src/directive/{feeInput.js → mec-feeInput/feeInput.js}

@@ -1,9 +1,12 @@
 // input金额指令(数字，且保留两位小数,blur自动增加.00)
 import Vue from 'vue'
 
-Vue.directive('feeInput', {
+export default {
   bind(el, binding, vnode) {
+    if (!binding.value) return; // 绑定值为false时不执行后续逻辑
     const input = el.getElementsByTagName('input')[0]
+    console.log(input)
+    if(!input) return
     input.addEventListener('compositionstart', () => {
       vnode.inputLocking = true
     })
@@ -45,4 +48,4 @@ Vue.directive('feeInput', {
       }
     })
   }
-})
+}

package/src/directive/mec-feeInput/index.js

@@ -0,0 +1,13 @@
+import feeInput from "./feeInput";
+
+const install = function (Vue) {
+  Vue.directive("el-feeInput", feeInput);
+};
+
+if (window.Vue) {
+  window["el-feeInput"] = feeInput;
+  Vue.use(install); // eslint-disable-line
+}
+
+feeInput.install = install;
+export default feeInput;

package/src/index.js

@@ -24,10 +24,11 @@ const install = function (Vue) {
             Vue.component(component.name, component);
         }
     });
+    
     requireDirective.keys().forEach((directiveFileName) => {
         const moduleName = directiveFileName.replace(/^\.\/(.*)\.\w+$/, "$1");
-        const directiveConfig = requireDirective(directiveFileName);
-        Vue.directive(moduleName, directiveConfig.default);
+        const directiveConfig = requireDirective(directiveFileName).default; // 获取指令配
+        Vue.directive(moduleName, directiveConfig); // 注册指令
     });
 };