gyyg-components 0.2.7 → 0.2.9

package/src/components/MecForm/MecForm.vue

@@ -0,0 +1,82 @@
+<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">
+					<template slot="label">
+						<span v-if="item.label">
+							{{ item.label }}
+						<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"
+						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);
+				}
+				});
+			});
+		}
+	},
+};
+</script>
+<style lang="less" scoped>
+::v-deep.el-form::after {
+	content: "";
+	display: table;
+	clear: both;
+}
+</style>

package/src/components/MecInput/MecInput.vue

@@ -15,13 +15,21 @@
       :autosize="autosize"
       @input="handleInput"
       @clear="clear"
-    ></el-input>
+      @keyup.enter.native="handleEnter"
+    >
+    <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>
+    <el-button slot="append" v-if="appendIcon" :icon="appendIcon"  @click="btnClick" :style="disabled ? 'cursor: not-allowed' : 'cursor: pointer'"></el-button>
+  </el-input>
   </template>
   
   <script>
   export default {
-    name: 'MecInput',
+    name: 'mec-input',
     props: {
+      value: {
+        default: ''
+      },
       // 输入框的占位符
       placeholder: {
         type: String,
@@ -85,6 +93,18 @@
       autosize: {
         default: false
       },
+      prependText: {
+        type: String,
+        default: ''
+      },
+      appendText: {
+        type: String,
+        default: ''
+      },
+      appendIcon: {
+        type: String,
+        default: ''
+      }
     },
     data() {
       return {
@@ -108,19 +128,28 @@
           value = value.replace(/[^\u4e00-\u9fa5]/g, '');
         } else if (this.inputType === 'english') {
           // 只允许输入英文
-          value = value.replace(/[^a-zA-Z]/g, '');
+          value = value.replace(/[^a-zA-Z\s]/g, '');
         }
         this.inputValue = value
-        
         this.$emit('input', value);
       },
       clear() {
         this.$emit('clear')
+      },
+      btnClick() {
+        this.$emit('btnClick')
+      },
+      handleEnter() {
+        this.$emit('enter')
       }
     },
     watch: {
-      value(newValue) {
-        this.inputValue = newValue;
+      value: {
+        handler(newValue) {
+          this.inputValue = newValue;
+        },
+        immediate: true
+        
       }
     }
   };

package/src/components/MecPopoverButton/MecPopoverButton.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="popover-button" v-has-permi="[btnInfo.hasPermi]">
+    <div class="popover-button" v-has-permi="btnInfo.hasPermi ? [btnInfo.hasPermi] : undefined">
         <el-dropdown 
-            :size="btnInfo.size" 
+            :size="btnInfo.size || 'small'" 
             split-button 
             :type="btnInfo.type" 
             :disabled="btnInfo.disabled"
@@ -9,13 +9,16 @@
             placement="bottom-end"
             @click="clickEvent"
             @command="changeItem"
+            :class="dropdownClass"
             >
             {{ btnInfo.text}}
             <el-dropdown-menu slot="dropdown" class="right-arrow">
                 <el-dropdown-item 
                 v-for="item in btnInfo.options" 
                 :key="item.id"
+                :icon="item.icon || ''"
                 :command="item"
+                v-has-permi="item.hasPermi ? [item.hasPermi] : undefined"
                 >{{ item.label }}</el-dropdown-item>
             </el-dropdown-menu>
         </el-dropdown>
@@ -25,6 +28,14 @@
 export default {
     name: 'MecPopoverButton',
     props: ['btnInfo'],
+    computed: {
+        dropdownClass() {
+        if (this.btnInfo.plain === undefined) {
+            return 'is-plain';
+        }
+        return this.btnInfo.plain ? 'is-plain' : '';
+        }
+    }, 
     methods: {
         clickEvent(){
             if(this.btnInfo.trigger) {
@@ -44,4 +55,23 @@ export default {
         left: 65% !important;
     }
 }
+/deep/ .el-dropdown__icon {
+    font-size: 11px
+}
+// /deep/ .el-dropdown-menu__item {
+//     background-color: #ecf5ff;
+//     color: #66b1ff;
+//     margin-top: 4px;
+// }
+/deep/ .el-dropdown.is-plain {
+    .el-button {
+        color: #409EFF;
+        background: #ecf5ff;
+        border-color: #b3d8ff;
+    }
+     .el-dropdown__caret-button::before {
+        background: #b3d8ff;
+    }
+}
+
 </style>

package/src/components/MecRadio/MecRadio.js

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

package/src/components/MecRadio/MecRadio.vue

@@ -0,0 +1,62 @@
+<template>
+    <el-radio-group
+      v-model="radio"
+      :value="radio"
+      @change="handleChange"
+      v-bind="$attrs"
+      class="radio-group"
+    >
+      <el-radio
+        v-for="item in options"
+        :label="item[props.value]"
+        :key="item[props.value]"
+        :value="item[props.value]"
+        :border="border"
+      >{{ item[props.label] }}</el-radio>
+    </el-radio-group>
+</template>
+<script>
+export default {
+    name: 'mec-radio',
+    props: {
+    value: {},
+    border: {
+        type: Boolean,
+        default: false,
+    },
+    options: {},
+    props: {
+      default() {
+        return {
+          label: 'label',
+          value: 'value',
+        }
+      },
+    },
+  },
+    data() {
+        return {
+            radio: this.value,
+        }
+    },
+    watch: {
+        value: {
+            handler(val) {
+                this.radio = val
+            },
+            immediate: true
+        },
+        radio: {
+            handler(val) {
+                this.$emit('input', val)
+            },
+        }
+    },
+    methods: {
+        handleChange(e) {
+            this.$emit('change', e)
+        },
+    }
+
+}
+</script>

package/src/components/MecSearchForm/MecSearchForm.vue

@@ -1,23 +1,29 @@
 <template>
     <div>
-        <el-form ref="form" :model="formModel" :inline="true">
+        <el-form ref="form" :model="formGroups" :inline="true">
             <template v-for="(item, index) in formGroups">
                 <el-form-item 
-                    :key="index"
-                    :label="item.label ? item.label : null"
-                    :label-width="item.label?item.labelWidth:'0px'"
-                    :rules="item.rules"
-                    :prop="getProp(item,index)"
-                >
-                <component :is="item['componentName']"
-                   v-model="item.value"
-                   v-bind="item.componentProps"
-                   v-on="item.componentListeners"
-                   ></component>
+                    v-if="typeof item.displayWith !== 'function' || item.displayWith(formGroups, item)"
+                    :key="index" 
+                    :rules="item.rules" 
+                    :prop="getProp(item, index)"
+                    :style="'width:' + item.width + 'px'"
+                    :label="item.label" 
+                    :class="item.class">
+                    <component 
+                        :is="item['componentName']" 
+                        :ref="item.ref" 
+                        v-model="item.value"
+                        v-bind="item" 
+                        v-on="item.componentListeners"></component>
                 </el-form-item>
-                
             </template>
-            <el-button type="primary" @click="search">查询</el-button>
+            <slot name="custom" :formGroups="formGroups"></slot>
+            <el-form-item>
+                <el-button type="primary" size="small" plain @click="search">查询</el-button>
+                <el-button type="primary" v-if="isSeniorBtn" size="small" plain @click="seniorSearch">高级搜索</el-button>
+                <el-button  size="small" plain icon="el-icon-refresh" @click="refresh"></el-button>
+            </el-form-item>
         </el-form>
     </div>
 </template>
@@ -25,31 +31,40 @@
 export default {
     name: 'MecSearchForm',
     props: {
-        formGroups: {
-            type: Array,
-            default: () => []
+        formGroups: {},
+        isSeniorBtn: {
+            type: Boolean,
+            default: false
         }
     },
-    data() {
-        return {
-            formModel: this.createFormModel(this.formGroups)
-        };
-    },
     methods: {
-        createFormModel(formGroups) {
-            const model = {};
-            formGroups.forEach(item => {
-                model[item.prop] = item.value;
-            });
-            return model;
-        },
-        getProp (item, index) {
+
+        getProp(item, index) {
             let propName = item.prop ? item.prop : index + ".value";
             return propName;
         },
         search() {
-            console.log(this.formGroups)
+            const result = {};
+            for(let key in this.formGroups) {
+                result[key] = this.formGroups[key].value;
+            }
+            this.$emit('search', result)
+        },
+        refresh() {
+            this.$emit('refresh')
+        },
+        seniorSearch() {
+            this.$emit('seniorSearch')
         }
     }
 }
-</script>
+</script>
+<style lang="less" scoped>
+/deep/ .el-form-item__content {
+    width: 100%;
+}
+/deep/ .el-form--inline .el-form-item {
+    margin-bottom: 10px;
+    vertical-align: middle;
+}
+</style>

package/src/components/MecSelect/MecSelect.vue

@@ -10,9 +10,11 @@
     :size="size"
     v-bind="$attrs"
     :filterable="filterable"
+    :value="selected"
+    style="width: 100%;"
   >
     <el-option
-      v-for="item in options"
+      v-for="item in option"
       :key="item[props.value]"
       :label="item[props.label]"
       :value="item[props.value]"
@@ -30,9 +32,7 @@ export default {
       required: true,
     },
     options: {
-      type: Array,
       required: true,
-      default: () => [],
     },
     multiple: {
       default: false,
@@ -64,7 +64,8 @@ export default {
   },
   data() {
     return {
-      selected: this.value,
+      selected: '',
+      option:[]
     };
   },
   watch: {
@@ -74,16 +75,37 @@ 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,
+		},
   },
   methods: {
     handleChange(val) {
+      this.selected = val;
+      this.$emit("input", this.selected);
       this.$emit("change", val);
     },
-	clear() {
-		this.selected = '';
-		this.$emit('clear')
-	}
+    clear() {
+      this.selected = '';
+      this.$emit('clear')
+    }
   },
+  mounted() {
+    if (!Array.isArray(this.options) && this.options) {
+			this.options().then(val => {
+				this.option = val.data || val;
+			});
+		} else {
+			this.option = this.options;
+		}
+  }
 };
 </script>
 

package/src/components/MecTable/MecTable.vue

@@ -18,6 +18,8 @@
             :row-style="selectedRowStyle"
             :default-expand-all="defaultExpandAll"
             @row-click="rowClickHandel"
+            @row-dblclick="rowDblclickHandel"
+            :border="border"
             >
             <!-- 多选框 -->
              <el-table-column
@@ -149,8 +151,7 @@ export default {
             required: false,
             default: () => {
                 return {
-                    backgroundColor: "#fff",
-                    textAlign: "center",
+                    backgroundColor: "#EFF3F8",
                 }
             }
         },
@@ -183,7 +184,12 @@ export default {
         // 是否只选中当前行
         toggleRow: {
             default: false
+        },
+        border: {
+            type: Boolean,
+            default: true
         }
+
     },
     data() {
         return {
@@ -231,7 +237,11 @@ export default {
                 this.$refs.table.toggleRowSelection(column)
             }
             this.$emit('row-click', column)
-        }
+        },
+        // 行双击事件
+        rowDblclickHandel(column) {
+            this.$emit('row-dblclick', column)
+        },
 
     },
     watch: {
@@ -254,4 +264,7 @@ export default {
     text-align: right;
     height: 35px;
 }
+/deep/ .el-table td.el-table__cell {
+    border-right: none;
+}
 </style>

package/src/components/MecTabs/MecTabs.js

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

package/src/components/MecTabs/MecTabs.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <el-tabs v-model="activeName" v-bind="$attrs" @tab-click="handleClick">
+            <el-tab-pane 
+                v-for="(item, index) in tabList" 
+                :key="index+item.label"
+				:label="item[props.label]"
+				:name="item[props.value]"
+				v-bind="item">
+                <component 
+                    v-if="activeName == item.name"
+                    :is="item.componentName" 
+                    v-bind="item" 
+                    v-on="$listeners"></component>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+<script>
+export default {
+    name: 'mec-tabs',
+    props: {
+        value: {
+			required: true,
+		},
+        tabList: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        props: {
+			default() {
+				return {
+					label: 'label',
+					value: 'name',
+				};
+			},
+		},
+    },
+    data() {
+        return {
+            activeName: ''
+        }
+    },
+    watch: {
+		value: {
+			handler(val) {
+				this.activeName = val;
+			},
+            immediate: true,
+		},
+        activeName:{
+            handler(val) {
+                this.$emit('input', val);
+            }
+        }
+	},
+    methods: {
+        handleClick(tab, event) {
+			this.$emit('change', tab.name);
+			this.$emit('changeTab', tab, event);
+		},
+    }
+}
+</script>                                                             

package/src/directive/hasPermi.js

@@ -3,22 +3,20 @@
  * Copyright (c) 2019 chuangshi
  */
  import Vue from 'vue'
-let authorities = localStorage.getItem('authorities') || 'aaa,bbb,ccc'
  Vue.directive('hasPermi', {
     inserted(el, binding, vnode) {
     const { value } = binding
+    console.log('value',value)
     const all_permission = "*:*:*";
-        const permissions = authorities.split(',')//用户拥有的权限
+    const permissions = localStorage.getItem('authorities').split(',')//用户拥有的权限
     if (value && value instanceof Array && value.length > 0) {
         const permissionFlag = value//
 
         const hasPermissions = permissions.some(permission => {
         return all_permission === permission || permissionFlag.includes(permission)
         })
-        console.log(hasPermissions,'hasPermissions')
         if (!hasPermissions) {
             console.log(el.parentNode);
-            
             el.parentNode && el.parentNode.removeChild(el)
         }
     } else {

package/src/otherComponents/iconButton.vue

@@ -7,6 +7,7 @@
 			@click="item.callback ? item.callback(scope.row) : null"
 			class="icon"
 		>
+		<div>{{ typeof item.showNumber !== 'function' ? item.showNumber : item.showNumber(scope.row) }}</div>
 		<el-tooltip class="item" effect="dark" :content="item.tooltipText" placement="top" v-if="item.isTooltip">
 			<el-icon :class="item.isHover ? item.class + ' view-btn' : item.class" :style="[item.style ? setStyle(item.style) : {}]"></el-icon>
 		</el-tooltip>
@@ -72,7 +73,6 @@ export default {
 	align-items: center;
 	user-select: none;
 	cursor: pointer;
-	padding: 5px;
 }
 .view-btn {
     &:hover {

package/src/otherComponents/styleText.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="default-text">
+    <div>
         <span class="default-text" :style="[statusStyle]"
             :class="tableData.getClass ? tableData.getClass(scope.row) : ''">{{ getText(tableData.bind) }}</span>
     </div>
@@ -27,25 +27,16 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.deathText {
-    color: #909399;
-}
-
-.normalText {
-    color: #67c23a;
-}
 
-.danger {
-    color: #f56c6c;
-}
-
-.warning {
-    color: #e6a23c;
-}
 
 .default-text {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    background-color: #409EFF;
+    color: #fff;
+    padding: 5px 15px;
+    border-radius: 20px;
+    font-size: 14px;
 }
 </style>