gyyg-components 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.3.04",
+  "version": "0.3.05",
   "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

@@ -81,6 +81,11 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+/deep/ .el-button { 
+    &:not(:disabled):hover {
+        transform: translateY(-1px);
+    }
+}
 .btn-group {
     display: flex;
     align-items: center;

package/src/components/MecDialog/MecDialog.vue

@@ -19,6 +19,10 @@
       :destroy-on-close="destroyOnClose"
       :modal='modal'
     >
+      <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,7 +88,11 @@ export default {
     dialogClass: {
       type: String,
       default: ""
-    }
+    },
+    titleIcon: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

package/src/otherComponents/styleText.vue

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