gyyg-components 0.2.8 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "private": false,
   "main": "lib/gyyg-components.umd.js",
   "scripts": {
@@ -14,6 +14,7 @@
     "core-js": "^3.6.5",
     "element-resize-detector": "^1.2.4",
     "element-ui": "2.15.6",
+    "sortablejs": "^1.15.6",
     "vue": "^2.6.11"
   },
   "devDependencies": {

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,11 +1,11 @@
 <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"
@@ -20,7 +20,6 @@
                 ></component>
             </div>
         </div>
-        
     </div>
 </template>
 <script>
@@ -50,8 +49,11 @@ export default {
     align-items: center;
     flex-wrap: wrap;
     &>div {
-        margin-left: 15px;
-        margin-bottom: 15px;
+        margin-left: 5px;
+        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

@@ -12,7 +12,11 @@
 				:style="item.style"
 				:key="index"
 			>
-				<el-form-item v-bind="item" :prop="getProp(item, index)" :rules="item.rules" :class="item.class">
+				<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 + ');' : ''">
 					<template slot="label">
 						<span v-if="item.label">
 							{{ item.label }}
@@ -73,5 +77,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"
@@ -15,8 +15,9 @@
                 <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>
@@ -25,7 +26,7 @@
 <script>
 export default {
     name: 'MecPopoverButton',
-    props: ['btnInfo'],
+    props: ['btnInfo'], 
     methods: {
         clickEvent(){
             if(this.btnInfo.trigger) {
@@ -45,4 +46,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" @click="search">查询</el-button>
+                <el-button type="primary" v-if="isSeniorBtn" size="small" @click="seniorSearch" style="margin-left: 5px;">高级搜索</el-button>
+                <el-button  size="small" icon="el-icon-refresh" @click="refresh" style="margin-left: 5px;"></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,9 @@ export default {
 /deep/ .el-form-item__content {
     width: 100%;
 }
+/deep/ .el-form--inline .el-form-item {
+    margin-bottom: 8px;
+    margin-right: 5px;
+    vertical-align: middle;
+}
 </style>

package/src/components/MecSelect/MecSelect.vue

@@ -99,9 +99,17 @@ export default {
   },
   mounted() {
     if (!Array.isArray(this.options) && this.options) {
-			this.options().then(val => {
-				this.option = val.data || val;
-			});
+      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;
 		}

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/components/MecTransferDrag/MecTransferDrag.js

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

package/src/components/MecTransferDrag/MecTransferDrag.vue

@@ -0,0 +1,147 @@
+<template>
+   <el-transfer
+        v-model="rightData"
+        :data="data"
+        :titles=titles
+        :left-default-checked="leftDefaultChecked"
+        :right-default-checked="rightDefaultChecked"
+        :props="props"
+        @change="handelChange"
+        :target-order="targetOrder"
+        :filterable="filterable"
+        :filter-placeholder="filterPlaceholder"
+        @filter-method="filterMethod"
+        >
+  </el-transfer>
+</template>
+</template>
+<script>
+import Sortable from 'sortablejs';
+export default {
+    name: 'mec-transfer-drag',
+    props: {
+        value: {
+            type: Array,
+            default: () => []
+        },
+        data: {
+            type: Array,
+            default: () => []
+        },
+        titles: {
+           type: Array,
+           default: () => ['列表 1', '列表 2']
+        }, 
+        leftDefaultChecked: {
+            type: Array,
+            default: () => []
+        },
+        rightDefaultChecked: {
+            type: Array,
+            default: () => []
+        },
+        props: {
+            type: Object,
+            default: () => {
+                return {
+                    key: 'key',
+                    label: 'label',
+                    disabled: 'disabled'
+                }
+            }
+        },
+        targetOrder: {
+            type: String,
+            default: 'original'
+        },
+        filterable: {
+            type: Boolean,
+            default: false
+        },
+        filterPlaceholder: {
+            type: String,
+            default: '请输入搜索内容'
+        },
+        isDrag: {
+            type: Boolean,
+            default: true
+        }
+  },
+  watch: {
+    value: {
+        handler(val) {
+           this.rightData = val;
+       },
+       immediate: true  
+    }
+  },
+  data() {
+    return {
+        rightData: []
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+        if(!this.isDrag) return
+        this.initSortable();
+    })
+  },
+  methods: {
+        initSortable() {
+            const _this = this;
+            console.log(this.props)
+            const transferDoms = document.getElementsByClassName('el-transfer-panel__list');
+            if (transferDoms && transferDoms.length > 1) {
+                // 找到 transferDoms[1] 下所有类名为 el-checkbox__label 的元素
+                const checkboxLabels = transferDoms[1].querySelectorAll('.el-checkbox__label');
+                // 为每个元素添加类名 drag-item
+                checkboxLabels.forEach(label => {
+                    label.classList.add('drag-item');
+                });
+
+                Sortable.create(transferDoms[1], {
+                    handle: '.el-transfer-panel__item', // 触发拖动事件的元素
+                    draggable: '.el-transfer-panel__item', // 拖动触发时，可拖动的区域
+                    animation: 150,
+                    sort: true,
+                    disabled: false,
+                    onEnd(event) {
+                        const oldIndex = event.oldIndex;
+                        const newIndex = event.newIndex;
+                        // 更新 this.rightData 的顺序
+                        const movedItem = _this.rightData.splice(oldIndex, 1)[0];
+                        _this.rightData.splice(newIndex, 0, movedItem);
+                         // 遍历 this.rightData，根据 props.key 和 props.sort 获取对应的值
+                        const keyField = _this.props.key || 'key'; // 动态获取 key 字段
+                        const sortField = _this.props.sort || 'fchSort'; // 动态获取 sort 字段
+
+                        const list = _this.rightData.map((item, index) => {
+                            return {
+                                [keyField]: item, // 使用 props.key 的值作为键
+                                [sortField]: index // 使用 props.sort 的值作为键
+                            };
+                        });
+                        _this.$emit('drag', list,);
+                    }
+                });
+            }
+        },
+        handelChange(leftArr, position, rightArr) {
+            this.$emit('change', leftArr, position, rightArr)
+            if(!this.isDrag) return
+            this.$nextTick(() => {
+                this.initSortable()
+            })
+            
+        },
+        filterMethod() {
+            this.$emit('filter-method')
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    /deep/.drag-item {
+        cursor: move;
+    }
+</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,7 +1,8 @@
 <template>
-    <div class="default-text">
-        <span class="default-text" :style="[statusStyle]"
+    <div>
+        <span class="default-text" :style="[statusStyle]" v-if="tableData.columnType == 'text'"
             :class="tableData.getClass ? tableData.getClass(scope.row) : ''">{{ getText(tableData.bind) }}</span>
+        <el-button v-if="tableData.columnType == 'button'" size="mini" plain round :type="tableData.setType(this.scope.row)">{{ getText(tableData.bind) }}</el-button>
     </div>
 </template>
 <script>
@@ -27,25 +28,45 @@ 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;
+    font-size: 14px;
+}
+/deep/ .el-button { 
+    cursor: text;
+    &.is-plain:focus, &.is-plain:hover {
+        background: #FFF;
+        border: 1px solid #DCDFE6;
+        color: #606266;
+    }
+    &--primary {
+        &.is-plain:focus, &.is-plain:hover {
+            color: #409EFF;
+            background: #ecf5ff;
+            border-color: #b3d8ff;
+        }
+    }
+    &--warning {
+        &.is-plain:focus, &.is-plain:hover {
+            color: #E6A23C;
+            background: #fdf6ec;
+            border-color: #f5dab1;
+        }
+    }
+    &--success {
+        &.is-plain:focus, &.is-plain:hover  {
+            color: #67C23A;
+            background: #f0f9eb;
+            border-color: #c2e7b0;
+        }
+    } 
+    &--danger { 
+        &.is-plain:focus, &.is-plain:hover {
+            color: #F56C6C;
+            background: #fef0f0;
+            border-color: #fbc4c4;
+        }
+    } 
 }
 </style>