gyyg-components 0.2.7 → 0.2.8

package/src/components/MecInput/MecInput.vue

@@ -15,13 +15,20 @@
       :autosize="autosize"
       @input="handleInput"
       @clear="clear"
-    ></el-input>
+    >
+    <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 +92,18 @@
       autosize: {
         default: false
       },
+      prependText: {
+        type: String,
+        default: ''
+      },
+      appendText: {
+        type: String,
+        default: ''
+      },
+      appendIcon: {
+        type: String,
+        default: ''
+      }
     },
     data() {
       return {
@@ -108,19 +127,27 @@
           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
-        
+        console.log(this.inputType);
         this.$emit('input', value);
       },
       clear() {
         this.$emit('clear')
+      },
+      btnClick() {
+        console.log(123)
+        this.$emit('btnClick')
       }
     },
     watch: {
-      value(newValue) {
-        this.inputValue = newValue;
+      value: {
+        handler(newValue) {
+          this.inputValue = newValue;
+        },
+        immediate: true
+        
       }
     }
   };

package/src/components/MecPopoverButton/MecPopoverButton.vue

@@ -16,6 +16,7 @@
                 v-for="item in btnInfo.options" 
                 :key="item.id"
                 :command="item"
+                v-has-permi="[item.hasPermi]"
                 >{{ item.label }}</el-dropdown-item>
             </el-dropdown-menu>
         </el-dropdown>

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,55 +1,56 @@
 <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" @click="search" style="margin-top: 5px">查询</el-button>
+                <el-button type="info" icon="el-icon-refresh" @click="refresh" style="margin-top: 5px"></el-button>
+            </el-form-item>
         </el-form>
     </div>
 </template>
 <script>
 export default {
     name: 'MecSearchForm',
-    props: {
-        formGroups: {
-            type: Array,
-            default: () => []
-        }
-    },
-    data() {
-        return {
-            formModel: this.createFormModel(this.formGroups)
-        };
-    },
+    props: ['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')
         }
     }
 }
-</script>
+</script>
+<style lang="less" scoped>
+/deep/ .el-form-item__content {
+    width: 100%;
+}
+</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,7 @@
             :row-style="selectedRowStyle"
             :default-expand-all="defaultExpandAll"
             @row-click="rowClickHandel"
+            @row-dblclick="rowDblclickHandel"
             >
             <!-- 多选框 -->
              <el-table-column
@@ -150,7 +151,6 @@ export default {
             default: () => {
                 return {
                     backgroundColor: "#fff",
-                    textAlign: "center",
                 }
             }
         },
@@ -231,7 +231,11 @@ export default {
                 this.$refs.table.toggleRowSelection(column)
             }
             this.$emit('row-click', column)
-        }
+        },
+        // 行双击事件
+        rowDblclickHandel(column) {
+            this.$emit('row-dblclick', column)
+        },
 
     },
     watch: {

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,19 @@
  * 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
     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>