gyyg-components 0.2.8 → 0.2.9

package/package.json

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

package/src/App.vue

@@ -13,8 +13,9 @@
       @show="show" 
     ></mec-input-table>-->
     <!-- <mec-form :formData="formData" :showBtn="true" @submit="submit"></mec-form> -->
-    <mec-search-form :formGroups="formGroups"></mec-search-form>
 
+    <mec-form ref="planForm" :formData="formData" :label-width="'100px'"></mec-form>
+    <mec-popover-button :btnInfo="btnInfo"></mec-popover-button>
   </div>
 </template>
 
@@ -23,27 +24,36 @@ export default {
   data() {
     const _this = this;
     return {
-      formGroups: {
-        abLifeSupport: {
-          componentName: 'mec-radio',
-          label: '生命支持',
-          labelWidth: "100px",
-          options: [
-            {
-              label: '是',
-              value: true
+      formData:{
+        // 日期组件
+            wpaApplicationDate: {
+                label: '申请日期',
+                componentName: 'mec-date-picker',
+                placeholder: '请选择日期',
+                dateType: 'datetime',
+                col: 12,
+                valueFormat: 'yyyy-MM-dd HH:mm:ss',
+                value: '',
+                rules: [{ required: true, message: '请选择日期', trigger: 'change' }],
             },
-            {
-              label: '否',
-              value: false
-            },
-          ],
-          value: '',
-        }
+      },
+      btnInfo: {
+        text: '操作',
+        type: 'primary',
+        disabled: false,
+        hasPermi: '',
+        options: [
+          { id: '1', label: '选项1', hasPermi: '' },
+          { id: '2', label: '选项2', hasPermi: '' },
+          { id: '3', label: '选项3' }
+        ]
       }
     };
   },
   methods: {
+    handleEnter() {
+      console.log('enter');
+    },
   },
   // methods: {
   //   handleRowClick(row) {

package/src/components/GyygModal/GyygModal.vue

@@ -187,7 +187,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .el-dialog__wrapper {
     overflow: hidden;
     display: flex;

package/src/components/MecButtonGroup/MecButtonGroup.vue

@@ -1,15 +1,16 @@
 <template>
     <div class="btn-group">
-        <div v-for="btn in btnList" :key="btn.id">
+        <div v-for="btn in btnList" :key="btn.id" 
+             v-has-permi="btn.hasPermi ? [btn.hasPermi] : undefined">
             <el-button 
                 v-if="!btn['componentType']"
-                v-has-permi="[btn.hasPermi]"
                 :disabled="btn.disabled"
-                :size="btn.size"
+                :size="btn.size || 'small'"
                 :type="btn.type"
                 :icon="!btn.rightIcon ? btn.icon: ''"
                 :loading="btn.loading"
                 @click="btnClick(btn)"
+                :plain="btn.plain || true"
                 >{{ btn.text }}
                 <i v-if="btn.rightIcon" :class="btn.icon + ' el-icon--right'"></i>
             </el-button>
@@ -20,7 +21,6 @@
                 ></component>
             </div>
         </div>
-        
     </div>
 </template>
 <script>
@@ -51,7 +51,10 @@ export default {
     flex-wrap: wrap;
     &>div {
         margin-left: 15px;
-        margin-bottom: 15px;
+        margin-bottom: 10px;
+        &:first-child {
+            margin-left: 0;
+        }
     }
 }
 </style>

package/src/components/MecDialog/MecDialog.vue

@@ -20,7 +20,7 @@
       :modal='modal'
     >
       <slot name="body" />
-      <div v-if="footer" slot="footer" class="dialog-footer">
+      <div v-if="footer" slot="footer">
         <slot name="footer" />
       </div>
     </el-dialog>
@@ -129,7 +129,7 @@ export default {
 .base-dialog {
   text-align: left;
 }
-.el-dialog__wrapper {
+/deep/.el-dialog__wrapper {
   overflow: hidden;
   display: flex;
   justify-content: center;
@@ -165,13 +165,12 @@ export default {
       flex: 1;
       overflow: auto;
       padding: 20px;
+      padding-bottom: 52px;
     }
 
     .el-dialog__footer {
-      flex-shrink: 0;
-      box-sizing: content-box;
-      height: 32px;
-      padding: 10px;
+      box-sizing: border-box;
+      padding: 10px 20px;
       border: none;
       background-color: #efefef;
       border-bottom-left-radius: 8px;

package/src/components/MecForm/MecForm.vue

@@ -73,5 +73,10 @@ export default {
 	},
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
+::v-deep.el-form::after {
+	content: "";
+	display: table;
+	clear: both;
+}
 </style>

package/src/components/MecInput/MecInput.vue

@@ -15,6 +15,7 @@
       :autosize="autosize"
       @input="handleInput"
       @clear="clear"
+      @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>
@@ -130,15 +131,16 @@
           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')
+      },
+      handleEnter() {
+        this.$emit('enter')
       }
     },
     watch: {

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,14 +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]"
+                v-has-permi="item.hasPermi ? [item.hasPermi] : undefined"
                 >{{ item.label }}</el-dropdown-item>
             </el-dropdown-menu>
         </el-dropdown>
@@ -26,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) {
@@ -45,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/MecSearchForm/MecSearchForm.vue

@@ -20,8 +20,9 @@
             </template>
             <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-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>
@@ -29,7 +30,13 @@
 <script>
 export default {
     name: 'MecSearchForm',
-    props: ['formGroups'],
+    props: {
+        formGroups: {},
+        isSeniorBtn: {
+            type: Boolean,
+            default: false
+        }
+    },
     methods: {
 
         getProp(item, index) {
@@ -45,6 +52,9 @@ export default {
         },
         refresh() {
             this.$emit('refresh')
+        },
+        seniorSearch() {
+            this.$emit('seniorSearch')
         }
     }
 }
@@ -53,4 +63,8 @@ export default {
 /deep/ .el-form-item__content {
     width: 100%;
 }
+/deep/ .el-form--inline .el-form-item {
+    margin-bottom: 10px;
+    vertical-align: middle;
+}
 </style>

package/src/components/MecTable/MecTable.vue

@@ -19,6 +19,7 @@
             :default-expand-all="defaultExpandAll"
             @row-click="rowClickHandel"
             @row-dblclick="rowDblclickHandel"
+            :border="border"
             >
             <!-- 多选框 -->
              <el-table-column
@@ -150,7 +151,7 @@ export default {
             required: false,
             default: () => {
                 return {
-                    backgroundColor: "#fff",
+                    backgroundColor: "#EFF3F8",
                 }
             }
         },
@@ -183,7 +184,12 @@ export default {
         // 是否只选中当前行
         toggleRow: {
             default: false
+        },
+        border: {
+            type: Boolean,
+            default: true
         }
+
     },
     data() {
         return {
@@ -258,4 +264,7 @@ export default {
     text-align: right;
     height: 35px;
 }
+/deep/ .el-table td.el-table__cell {
+    border-right: none;
+}
 </style>

package/src/directive/hasPermi.js

@@ -6,6 +6,7 @@
  Vue.directive('hasPermi', {
     inserted(el, binding, vnode) {
     const { value } = binding
+    console.log('value',value)
     const all_permission = "*:*:*";
     const permissions = localStorage.getItem('authorities').split(',')//用户拥有的权限
     if (value && value instanceof Array && value.length > 0) {

package/src/otherComponents/iconButton.vue

@@ -73,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>