gyyg-components 0.2.9 → 0.2.11

package/package.json

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

package/src/components/MecButtonGroup/MecButtonGroup.vue

@@ -10,7 +10,6 @@
                 :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>
@@ -50,7 +49,7 @@ export default {
     align-items: center;
     flex-wrap: wrap;
     &>div {
-        margin-left: 15px;
+        margin-left: 5px;
         margin-bottom: 10px;
         &:first-child {
             margin-left: 0;

package/src/components/MecDatePicker/MecDatePicker.vue

@@ -12,12 +12,12 @@
             :start-placeholder="startPlaceholder" 
             :end-placeholder="endPlaceholder" 
             :range-separator="rangeSeparator"
-            :value-format="valueFormat"
             style="width: 100%;">
         </el-date-picker>
     </div>
 </template>
 <script>
+import moment from 'moment';
 export default {
     name: 'mec-date-picker',
     props: {
@@ -60,7 +60,7 @@ export default {
         },
         valueFormat: {
             type: String,
-            default: 'yyyy-MM-dd'
+            default: ''
         }
 
     },
@@ -71,7 +71,9 @@ export default {
     },
     methods: {
         change(val) {
-            this.$emit('change', val);
+            const formattedValue = val ? moment(val).format(this.valueFormat) : '';
+            this.$emit('change', formattedValue);
+            this.$emit('input', formattedValue);
         }
     },
     watch: {
@@ -83,7 +85,9 @@ export default {
         },
         date: {
             handler(val) {
-                this.$emit('input', val);
+               // 将内部的 Date 对象格式化后传递给父组件
+               const formattedValue = val ? moment(val).format(this.valueFormat) : '';
+                this.$emit('input', formattedValue);
             }
 
         }

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 }}

package/src/components/MecPopoverButton/MecPopoverButton.vue

@@ -9,7 +9,6 @@
             placement="bottom-end"
             @click="clickEvent"
             @command="changeItem"
-            :class="dropdownClass"
             >
             {{ btnInfo.text}}
             <el-dropdown-menu slot="dropdown" class="right-arrow">
@@ -27,15 +26,7 @@
 <script>
 export default {
     name: 'MecPopoverButton',
-    props: ['btnInfo'],
-    computed: {
-        dropdownClass() {
-        if (this.btnInfo.plain === undefined) {
-            return 'is-plain';
-        }
-        return this.btnInfo.plain ? 'is-plain' : '';
-        }
-    }, 
+    props: ['btnInfo'], 
     methods: {
         clickEvent(){
             if(this.btnInfo.trigger) {

package/src/components/MecSearchForm/MecSearchForm.vue

@@ -20,9 +20,9 @@
             </template>
             <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-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>
@@ -64,7 +64,8 @@ export default {
     width: 100%;
 }
 /deep/ .el-form--inline .el-form-item {
-    margin-bottom: 10px;
+    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/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/otherComponents/styleText.vue

@@ -1,7 +1,8 @@
 <template>
     <div>
-        <span class="default-text" :style="[statusStyle]"
+        <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>
@@ -30,13 +31,42 @@ export default {
 
 
 .default-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background-color: #409EFF;
-    color: #fff;
-    padding: 5px 15px;
-    border-radius: 20px;
     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>