gyyg-components 0.3.5 → 0.3.7

package/package.json

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

package/src/components/MECDescriptions/MECDescriptions.vue

@@ -24,7 +24,7 @@
                 :span="item.span || 1"
                 :contentClassName="direction == 'vertical' ? 'vertical-content' : item.contentClassName || ''"
                 :labelStyle="direction == 'horizontal' ? { width: labelWidth + 'px', textAlign: 'right' } : {}"
-                :contentStyle="item.contentStyle || {}"
+                :contentStyle="direction == 'horizontal' ? { width: 'calc(100% - (' + labelWidth + 'px))' }: {}"
                 :labelClassName="direction == 'vertical' ? 'vertical-label' : item.labelClassName || ''"
             >
                 <div v-if="item.type === 'img'">

package/src/components/MecButtonGroup/MecButtonGroup.vue

@@ -1,15 +1,43 @@
 <template>
-    <div class="btn-group">
+    <div :class="showTags ? 'has-tags' : ''">
+        
         <div
-            v-for="btn in btnList"
-            :key="btn.id"
-            v-has-permi="btn.hasPermi ? [btn.hasPermi] : undefined"
+            class="btn-group"
+            ref="btnGroup"
         >
-            <template v-if="btn.isDot || btn.number">
-                <el-badge
-                    :is-dot="btn.isDot"
-                    :value="btn.number"
-                >
+            <div
+                v-for="btn in btnList"
+                :key="btn.id"
+                v-has-permi="btn.hasPermi ? [btn.hasPermi] : undefined"
+            >
+                <template v-if="btn.isDot || btn.number">
+                    <el-badge
+                        :is-dot="btn.isDot"
+                        :value="btn.number"
+                    >
+                        <el-button
+                            v-if="!btn['componentType']"
+                            :disabled="btn.disabled"
+                            :size="btn.size || 'small'"
+                            :type="btn.type"
+                            :icon="!btn.rightIcon ? btn.icon : ''"
+                            :loading="btn.loading"
+                            @click="btnClick(btn)"
+                        >{{ btn.text }}
+                            <i
+                                v-if="btn.rightIcon"
+                                :class="btn.icon + ' el-icon--right'"
+                            ></i>
+                        </el-button>
+                        <div v-else>
+                            <component
+                                :is="btn['componentType']"
+                                :btnInfo="btn"
+                            ></component>
+                        </div>
+                    </el-badge>
+                </template>
+                <template v-else>
                     <el-button
                         v-if="!btn['componentType']"
                         :disabled="btn.disabled"
@@ -30,33 +58,18 @@
                             :btnInfo="btn"
                         ></component>
                     </div>
-                </el-badge>
-            </template>
-            <template v-else>
-                <el-button
-                    v-if="!btn['componentType']"
-                    :disabled="btn.disabled"
-                    :size="btn.size || 'small'"
-                    :type="btn.type"
-                    :icon="!btn.rightIcon ? btn.icon : ''"
-                    :loading="btn.loading"
-                    @click="btnClick(btn)"
-                >{{ btn.text }}
-                    <i
-                        v-if="btn.rightIcon"
-                        :class="btn.icon + ' el-icon--right'"
-                    ></i>
-                </el-button>
-                <div v-else>
-                    <component
-                        :is="btn['componentType']"
-                        :btnInfo="btn"
-                    ></component>
-                </div>
-            </template>
+                </template>
 
 
+            </div>
         </div>
+        <mec-tags
+            v-if="showTags"
+            :tagsList="tagsData"
+            @tagClose="tagClose"
+            :btnWidth="btnWidth"
+        ></mec-tags>
+
     </div>
 </template>
 <script>
@@ -68,7 +81,46 @@ export default {
         btnList: {
             required: true,
         },
+        showTags: {
+            type: Boolean,
+            default: false
+        },
+        tagsList: {
+            type: [Array, Object],
+        }
+    },
+    data() {
+        return {
+            tagsData: null,
+            btnWidth: 0
+        }
+    },
+    watch: {
+        tagsList: {
+            handler(val) {
+                this.tagsData = val
+            },
+            deep: true,
+            immediate: true
+        },
+        btnList: {
+            handler(val) {
+                if (this.$refs.btnGroup) {
+                    this.btnWidth = this.$refs.btnGroup.offsetWidth
+
+                }
+            },
+            deep: true,
+            immediate: true
+        }
     },
+    mounted() {
+        this.$nextTick(() => {
+            this.btnWidth = this.$refs.btnGroup.offsetWidth
+            console.log('width: calc(100% - (' + this.btnWidth + ' px))')
+        })
+    },
+
     methods: {
         // 按钮点击事件
         btnClick(btn) {
@@ -76,20 +128,25 @@ export default {
             if (btn.trigger) {
                 btn.trigger()
             }
+        },
+        tagClose(key, tag) {
+            this.$emit('tagClose', key, tag);
         }
     },
 }
 </script>
 <style lang="less" scoped>
-/deep/ .el-button { 
+/deep/ .el-button {
+    font-weight: normal;
+
     &:not(:disabled):hover {
         transform: translateY(-1px);
     }
 }
+
 .btn-group {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
 
     &>div {
         margin-left: 5px;
@@ -99,6 +156,13 @@ export default {
             margin-left: 0;
         }
     }
+
+
+}
+
+.has-tags {
+    display: flex;
+    align-content: center;
 }
 
 /deep/ .el-badge__content.is-fixed {

package/src/components/MecDialog/MecDialog.vue

@@ -18,6 +18,7 @@
       @close="closeMethod"
       :destroy-on-close="destroyOnClose"
       :modal='modal'
+      :style="'height:' + height"
     >
       <div slot="title" style="font-size: 16px; color: #303133;">
         <el-icon :class="titleIcon" style="color: #1890ff; font-size: 18px;margin-right: 5px;"></el-icon>
@@ -90,9 +91,13 @@ export default {
       default: ""
     },
     titleIcon: {
-      type: Boolean,
-      default: false,
+      type: String,
+      default: '',
     },
+    height: {
+      type: String,
+      default: 'auto'
+    }
   },
   data() {
     return {
@@ -135,6 +140,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: auto 0;
   .el-dialog {
     display: flex;
     flex-direction: column;
@@ -167,6 +173,7 @@ export default {
       overflow: auto;
       padding: 20px;
       padding-bottom: 52px;
+      height: calc(100% - 50px);
     }
 
     .el-dialog__footer {
@@ -222,6 +229,9 @@ export default {
     }
   }
 }
+/deep/ .el-dialog {
+  height: 100%;
+}
 .shan-maintenance-dialog {
     /deep/ .el-dialog {
         height: 90%;

package/src/components/MecRadio/MecRadio.vue

@@ -1,28 +1,28 @@
 <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>
+  <el-radio-group
+    v-model="radio"
+    :value="radio"
+    @change="handleChange"
+    v-bind="$attrs"
+    class="radio-group"
+  >
+    <el-radio
+      v-for="item in option"
+      :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: {
+  name: 'mec-radio',
+  props: {
     value: {},
     border: {
-        type: Boolean,
-        default: false,
+      type: Boolean,
+      default: false,
     },
     options: {},
     props: {
@@ -34,30 +34,53 @@ export default {
       },
     },
   },
-    data() {
-        return {
-            radio: this.value,
-        }
+  data() {
+    return {
+      radio: this.value,
+      option: []
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.radio = val
+      },
+      immediate: true
     },
-    watch: {
-        value: {
-            handler(val) {
-                this.radio = val
-            },
-            immediate: true
-        },
-        radio: {
-            handler(val) {
-                this.$emit('input', val)
-                this.$emit('update:value', val)
-            },
+    radio: {
+      handler(val) {
+        this.$emit('input', val)
+        this.$emit('update:value', val)
+      },
+    },
+    options: {
+      handler: function (val) {
+        if (!Array.isArray(this.options) && this.options) {
+          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;
         }
+      },
+      deep: true,
+      immediate: true,
     },
-    methods: {
-        handleChange(e) {
-            this.$emit('change', e)
-        },
-    }
+  },
+  methods: {
+    handleChange(val) {
+      let info = this.option.filter(item => item[this.props.value] === val)
+      this.$emit('change', val, info.length > 0 ? info[0] : {})
+    },
+  }
 
 }
 </script>

package/src/components/MecSelect/MecSelect.vue

@@ -100,9 +100,10 @@ export default {
   methods: {
     handleChange(val) {
       this.selected = val;
+       let info = this.option.filter(item => item[this.props.value] == val)
       this.$emit("input", this.selected);
       this.$emit('update:value', val)
-      this.$emit("change", val);
+      this.$emit("change", val, info.length > 0 ? info[0] : {});
     },
     clear() {
       this.selected = '';

package/src/components/MecTags/MecTags.vue

@@ -1,9 +1,158 @@
 <template>
-    <div>tags列表</div>
+    <div
+        class="mec-tags"
+        :style="{ width: `calc(100% - ${btnWidth}px)` }"
+        ref="tagsContainer"
+    >
+        <el-button
+            icon="el-icon-arrow-left"
+            circle
+            v-show="showArrow"
+            @click="scrollLeft"
+        ></el-button>
+        <div
+            class="tags-box"
+            ref="tagsBox"
+        >
+            <el-tag
+                v-for="(tag, index) in tagsData"
+                :key="index"
+                closable
+                :type="tag.type || ''"
+                @close="handleClose(index, tag)"
+            >
+                {{ tag.label }}: {{ tag.value }}
+            </el-tag>
+        </div>
+        <el-button
+            style="margin-left: 3px"
+            icon="el-icon-arrow-right"
+            circle
+            v-show="showArrow"
+            @click="scrollRight"
+        ></el-button>
+    </div>
 </template>
 <script>
 export default {
-    name: 'MecTags'
+    name: 'MecTags',
+    props: {
+        tagsList: {
+            type: [Array, Object],
+        },
+        btnWidth: {
+            // type: Number,
+        },
+    },
+    data() {
+        return {
+            tagsData: [],
+            tagsContainerWidth: 0,
+            showArrow: false,
+        }
+    },
+    watch: {
+        tagsList: {
+            handler(val) {
+                console.log(val)
+                this.tagsData = []
+                this.tagsData = [...val] ;
+                if(this.tagsData.length > 0) {
+                    this.$nextTick(() => {
+                        this.updateTagsContainerWidth();
+                    });
+                }
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    mounted() {
+        this.updateTagsContainerWidth();
+        window.addEventListener('resize', this.updateTagsContainerWidth);
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.updateTagsContainerWidth);
+    },
+    methods: {
+        handleClose(index, tag) {
+            this.tagsData.splice(index, 1);
+            this.$emit('tagClose', tag.key, tag);
+        },
+        scrollLeft() {
+            const tagsBox = this.$refs.tagsBox;
+            tagsBox.scrollBy({
+                left: -150,
+                behavior: 'smooth'
+            });
+        },
+        scrollRight() {
+            const tagsBox = this.$refs.tagsBox;
+            tagsBox.scrollBy({
+                left: 150,
+                behavior: 'smooth'
+            });
+        },
+
+        updateTagsContainerWidth() {
+            this.tagsContainerWidth = this.$refs.tagsContainer.offsetWidth;
+            const boxWidth = this.$refs.tagsBox.scrollWidth;
+            if (boxWidth > this.tagsContainerWidth) {
+                this.showArrow = true;
+            } else {
+                this.showArrow = false;
+            }
+        }
+    }
 }
 
 </script>
+<style lang="less" scoped>
+.mec-tags {
+    height: 40px;
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+
+    /deep/ .el-tag {
+        margin-right: 10px;
+        margin-bottom: 10px;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        font-size: 14px;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 5px;
+        color: #1890ff;
+
+        .el-icon-close {
+            right: 0;
+        }
+    }
+
+    /deep/ .el-button.is-circle {
+        padding: 0;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        margin-right: 3px;
+        flex-grow: 0;
+        flex-shrink: 0;
+
+        &:hover,
+        &:focus {
+            background: #1890ff;
+            border-color: #1890ff;
+            color: #fff;
+        }
+    }
+}
+
+.tags-box {
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+}
+</style>

package/src/otherComponents/styleText.vue

@@ -20,9 +20,6 @@ export default {
             
         },
     },
-    created() {
-        console.log(this.tableData)
-    },
     computed: {
 		statusStyle() {
 			if (this.tableData.statusStyle) return this.tableData.statusStyle(this.scope.row);