gyyg-components 0.3.4 → 0.3.6

package/package.json

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

package/src/components/MECDescriptions/MECDescriptions.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :class="isCard ? 'card' : ''">
         <el-descriptions
             :column="column"
             :title="title"
@@ -9,7 +9,9 @@
             :class="!title ? 'no-title' : ''"
         >
             <template #title>
-                <div class="title">{{ title }}</div>
+                <div class="title">
+                    <el-icon :class="titleIcon"></el-icon><span>{{ title }}</span>
+                </div>
                 <div class="top-content">
                     <slot name="topContent"></slot>
                 </div>
@@ -20,11 +22,10 @@
                 :key="index"
                 :label="item.label"
                 :span="item.span || 1"
-                :contentClassName="item.contentClassName || ''"
-                :labelStyle="{width:labelWidth + 'px', textAlign: 'right'}"
+                :contentClassName="direction == 'vertical' ? 'vertical-content' : item.contentClassName || ''"
+                :labelStyle="direction == 'horizontal' ? { width: labelWidth + 'px', textAlign: 'right' } : {}"
                 :contentStyle="item.contentStyle || {}"
-                :labelClassName="item.labelClassName || ''"
-
+                :labelClassName="direction == 'vertical' ? 'vertical-label' : item.labelClassName || ''"
             >
                 <div v-if="item.type === 'img'">
                     <el-image
@@ -53,16 +54,23 @@
                     <component
                         :is="item.componentName"
                         v-model="item.value"
+                        :tableData="item"
                         v-bind="typeof item.componentProps === 'function' ? item.componentProps(item) : item.componentProps"
                         v-on="typeof item.componentListeners === 'function' ? item.componentListeners(item) : item.componentListeners || {}"
                     />
                 </div>
-                <span v-else>{{ item.value }}</span>
+                <span
+                    v-else
+                    :style="!item.value ? 'color: #C0C4CC; font-style: italic;' : ''"
+                >{{ item.value || '未填写' }}</span>
             </el-descriptions-item>
         </el-descriptions>
     </div>
+
+
 </template>
 <script>
+import styleText from '@/otherComponents/styleText.vue'
 export default {
     name: 'mec-descriptions',
     props: {
@@ -105,8 +113,20 @@ export default {
             type: [Number, String],
             default: 100
         },
+        isCard: {
+            type: Boolean,
+            default: false
+        },
+        titleIcon: {
+            type: String,
+            default: ''
+        },
 
     },
+    components: {
+        styleText
+    },
+
 }
 </script>
 <style lang="less" scoped>
@@ -144,7 +164,55 @@ export default {
 /deep/ .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
     white-space: pre-wrap;
 }
+
 /deep/ .el-progress-bar {
     width: 200px
 }
+
+/deep/ .el-descriptions-item__content {
+    color: #000;
+}
+
+.card {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    margin-bottom: 20px;
+    border-radius: 8px;
+    overflow: hidden;
+
+    /deep/ .el-descriptions {
+        .el-descriptions__body {
+            padding: 0 10px;
+
+            .vertical-content {
+                padding-bottom: 20px;
+                color: #000;
+            }
+
+            .vertical-label {
+                padding-bottom: 0;
+                color: #606266;
+            }
+        }
+
+        .title {
+            background-color: #fff;
+            margin-bottom: 0;
+            display: flex;
+            align-items: center;
+        }
+
+        .el-descriptions__title {
+            padding: 10px 0;
+            border-bottom: 1px solid #ebeef5;
+
+            i {
+                font-size: 20px;
+                color: #1890ff;
+                margin-right: 5px;
+            }
+
+        }
+
+    }
+}
 </style>

package/src/components/MecButtonGroup/MecButtonGroup.vue

@@ -1,15 +1,44 @@
 <template>
-    <div class="btn-group">
-        <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"
-                >
+    <div :class="showTags ? 'has-tags' : ''">
+        <mec-tags
+            v-if="showTags"
+            :tagsList="tagsData"
+        ></mec-tags>
+        <div class="btn-group">
+
+            <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 +59,12 @@
                             :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>
+
     </div>
 </template>
 <script>
@@ -68,6 +76,27 @@ export default {
         btnList: {
             required: true,
         },
+        showTags: {
+            type: Boolean,
+            default: false
+        },
+        tagsList: {
+            type: [Array, Object],
+        }
+    },
+    data() {
+        return {
+            tagsData: null
+        }
+    },
+    watch: {
+        tagsList: {
+            handler(val) {
+                this.tagsData = val
+            },
+            deep: true,
+            immediate: true
+        }
     },
     methods: {
         // 按钮点击事件
@@ -81,6 +110,12 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+/deep/ .el-button {
+    &:not(:disabled):hover {
+        transform: translateY(-1px);
+    }
+}
+
 .btn-group {
     display: flex;
     align-items: center;
@@ -94,6 +129,14 @@ export default {
             margin-left: 0;
         }
     }
+
+
+}
+
+.has-tags {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
 }
 
 /deep/ .el-badge__content.is-fixed {

package/src/components/MecDialog/MecDialog.vue

@@ -18,7 +18,12 @@
       @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>
+        <span>{{ title }}</span>
+      </div>
       <slot name="body" />
       <div v-if="footer" slot="footer">
         <slot name="footer" />
@@ -84,6 +89,14 @@ export default {
     dialogClass: {
       type: String,
       default: ""
+    },
+    titleIcon: {
+      type: String,
+      default: '',
+    },
+    height: {
+      type: String,
+      default: 'auto'
     }
   },
   data() {
@@ -127,6 +140,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: auto 0;
   .el-dialog {
     display: flex;
     flex-direction: column;
@@ -159,6 +173,7 @@ export default {
       overflow: auto;
       padding: 20px;
       padding-bottom: 52px;
+      height: calc(100% - 50px);
     }
 
     .el-dialog__footer {
@@ -214,6 +229,9 @@ export default {
     }
   }
 }
+/deep/ .el-dialog {
+  height: 100%;
+}
 .shan-maintenance-dialog {
     /deep/ .el-dialog {
         height: 90%;

package/src/components/MecTags/MecTags.vue

@@ -1,9 +1,23 @@
 <template>
-    <div>tags列表</div>
+    <div>
+        <el-tag
+            v-for="tag in tagsList"
+            :key="tag.id"
+            closable
+            :type="tag.type || ''"
+        >
+            {{ tag.label }}: {{ tag.value }}
+        </el-tag>
+    </div>
 </template>
 <script>
 export default {
-    name: 'MecTags'
+    name: 'MecTags',
+    props: {
+        tagsList: {
+             type: [Array, Object],
+        }
+    },
 }
 
 </script>