gyyg-components 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.3.03",
+  "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/components/MecTable/MecTable.vue

@@ -20,6 +20,8 @@
             @row-click="rowClickHandel"
             @row-dblclick="rowDblclickHandel"
             :border="border"
+            :cell-class-name="cellClassName"
+            :cell-style="cellStyle"
         >
             <!-- 多选框 -->
             <el-table-column
@@ -246,7 +248,13 @@ export default {
         totalTextColor: {
             type: String,
             default: ''
-        }
+        },
+        cellClassName: {
+
+        },
+        cellStyle: {
+
+        },
 
     },
     data() {

package/src/components/MecTags/MecTags.js

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

package/src/components/MecTags/MecTags.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>tags列表</div>
+</template>
+<script>
+export default {
+    name: 'MecTags'
+}
+
+</script>

package/src/otherComponents/iconButton.vue

@@ -1,17 +1,31 @@
 <template>
 	<div class="icon-btn">
-		
+
 		<div
 			v-for="item in iconlist"
 			:key="item.id"
 			@click="item.callback ? item.callback(scope.row) : null"
 			class="icon"
 		>
-		<div>{{ typeof item.showNumber !== 'function' ? item.showNumber : item.showNumber(scope.row) }}</div>
-		<el-tooltip class="item" effect="dark" :content="item.tooltipText" placement="top" v-if="item.isTooltip">
-			<el-icon :class="item.isHover ? item.class + ' view-btn' : item.class" :style="[item.style ? setStyle(item.style) : {}]"></el-icon>
-		</el-tooltip>
-			<el-icon v-else :class="item.isHover ? item.class + ' view-btn' : item.class" :style="[item.style ? setStyle(item.style) : {}]"></el-icon>
+			<div>{{ typeof item.showNumber !== 'function' ? item.showNumber : item.showNumber(scope.row) }}</div>
+			<el-tooltip
+				class="item"
+				effect="dark"
+				:content="item.tooltipText"
+				placement="right"
+				v-if="item.isTooltip"
+				popper-class="icon-tooltip"
+			>
+				<el-icon
+					:class="item.isHover ? item.class + ' view-btn' : item.class"
+					:style="[item.style ? setStyle(item.style) : {}]"
+				></el-icon>
+			</el-tooltip>
+			<el-icon
+				v-else
+				:class="item.isHover ? item.class + ' view-btn' : item.class"
+				:style="[item.style ? setStyle(item.style) : {}]"
+			></el-icon>
 		</div>
 	</div>
 </template>
@@ -67,15 +81,19 @@ export default {
 	display: flex;
 	align-items: center;
 }
+
 .icon-btn /deep/.icon {
 	display: flex;
 	align-items: center;
 	user-select: none;
 	cursor: pointer;
 }
+
 .view-btn {
-    &:hover {
-        color: #409eff !important;
-    }
+	&:hover {
+		color: #409eff !important;
+	}
 }
+
+
 </style>

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);