From e143b1eb2365b2b1042b4e80f22dd7ada52e0a30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=99=8C?= <xiaomo.drip@gmail.com>
Date: Fri, 5 Jan 2024 12:03:38 +0800
Subject: [PATCH] no message

---
 src/components/ContentWrap/index.vue |  10 --
 src/components/xStat/index.vue       | 180 +++++++++++++++++++++++++++
 src/components/xTable/columnItem.vue |   9 +-
 src/views/table/2/index.vue          |  33 +++--
 src/views/user/index/info.vue        |  15 ++-
 5 files changed, 212 insertions(+), 35 deletions(-)
 create mode 100644 src/components/xStat/index.vue

diff --git a/src/components/ContentWrap/index.vue b/src/components/ContentWrap/index.vue
index 3f0f67e..dbb1505 100644
--- a/src/components/ContentWrap/index.vue
+++ b/src/components/ContentWrap/index.vue
@@ -15,16 +15,6 @@
   </ElCard>
 </template>
 
-<style>
-.-mb-15px {
-  margin-bottom: -15px;
-}
-
-.contentwrap .el-card__body {
-  padding: 2px 5px
-}
-</style>
-
 <script>
 export default {
   props: {
diff --git a/src/components/xStat/index.vue b/src/components/xStat/index.vue
new file mode 100644
index 0000000..89712d4
--- /dev/null
+++ b/src/components/xStat/index.vue
@@ -0,0 +1,180 @@
+<!--
+ * @Descripttion: 统计弹窗
+-->
+<template>
+	<div class="x-stat">
+		<component :is="componentType" :title="config.name || '查看统计'" v-model="visible" :size="size" :style="style" @closed="$emit('closed')">
+			<el-main>
+				<el-skeleton v-if="loading" :rows="4" />
+			</el-main>
+			<template #footer>
+
+			</template>
+		</component>
+	</div>
+</template>
+<style scoped>
+.x-stat:deep(.el-drawer) .el-drawer__footer {
+	text-align: left;
+	border-top: 1px solid var(--el-border-color-light);
+	padding: 10px 18px;
+}
+
+.x-stat:deep(.el-main) {
+	padding: 0 20px 0px 20px;
+}
+
+.x-stat:deep(.el-input) .el-input__wrapper {
+	min-width: 50px;
+}
+</style>
+
+<script>
+export default {
+	emits: ['success', 'closed'],
+	props: {
+		column: { type: Array, default: () => [] },
+		name: { type: String, default: "id" },
+	},
+	data() {
+		return {
+			loading: false,
+			mode: "plus",
+			token: '',
+			key: this.name,
+			titleMap: {
+				plus: '新增',
+				edit: '编辑'
+			},
+			data: {},
+			style: {},
+			config: {
+				column: this.column,
+				labelPosition: "right",
+				labelWidth: "120px",
+				size: "medium",
+				submitinfokey: "info",
+				url: '',
+				merge: false, // 远程数据时, 是否合并data
+				submitname: '保存'
+			},
+			size: 900,
+			visible: false,
+			isSaveing: false,
+			type: 'dialog',
+		}
+	},
+	watch: {
+		column() {
+			this.config.column = this.column;
+		}
+	},
+	computed: {
+		componentType() {
+			return this.type == 'drawer' ? 'el-drawer' : 'x-dialog';
+		}
+	},
+	mounted() {
+
+	},
+	methods: {
+		getComponentType(type) {
+			this.type = type;
+			return this;
+		},
+		// 显示
+		open(mode = 'plus') {
+			this.mode = mode;
+			this.visible = true;
+			return this;
+		},
+		// 表单提交方法
+		submit() {
+
+
+			this.$refs.formref.validate(async (valid) => {
+				if (valid) {
+					if (!this.config.url) {
+						console.log(this.data)
+						this.$alert('没有' + (this.config.name || '统计') + '数据相关配置', "提示", { type: 'error' });
+						return;
+					}
+
+					const data = {
+						[this.config.submitinfokey || 'info']: this.data,
+					};
+
+					if (this.key && typeof this.data[this.key] !== 'undefined') {
+						Object.assign(data, { [this.key]: this.data[this.key] });
+					}
+
+					if (this.token) {
+						Object.assign(data, { token: this.token });
+					}
+
+					this.isSaveing = true;
+					this.$http.post(this.config.url, data).then((res) => {
+						this.isSaveing = false;
+						if (res.code == 200) {
+							this.visible = false;
+							this.$emit('success', res.data, this.mode, res.message || "操作成功");
+							return;
+						}
+						this.$alert(res.message, "提示", { type: 'error' });
+					})
+				}
+			})
+		},
+		// 配置
+		setConfig(o) {
+			Object.assign(this.config, o);
+
+			if (typeof this.config.key !== 'undefined' && this.config.key) {
+				this.key = this.config.key;
+			}
+			// 远程读取数据
+			if (this.config.remoteurl) {
+				this.loading = true;
+				setTimeout(async () => {
+					var res = await this.$http.post(this.config.remoteurl, { [this.key]: this.data[this.key] })
+					if (res.code == 200) {
+						this.loading = false;
+						if (res.data.config) {
+							Object.assign(this.config, res.data.config);
+						}
+
+						if (res.data.data) {
+							this.config.merge ? Object.assign(this.data, res.data.data) : this.setData(res.data.data)
+						}
+
+						if (res.data.token) {
+							this.token = res.data.token
+						}
+
+						if (res.data.size) {
+							this.size = res.data.size
+						}
+
+						if (res.data.type && res.data.type !== this.type) {
+							this.getComponentType(res.data.type)
+						}
+
+						if (res.data.style) {
+							this.style = res.data.style;
+						}
+						return;
+					}
+					this.visible = false;
+					this.$alert(res.message, "提示", { type: 'error' });
+				}, 100)
+				return false;
+			}
+		},
+		// 表单注入数据
+		setData(data) {
+			this.data = data;
+			return this;
+		},
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/components/xTable/columnItem.vue b/src/components/xTable/columnItem.vue
index fabb5cc..fa0fdf4 100644
--- a/src/components/xTable/columnItem.vue
+++ b/src/components/xTable/columnItem.vue
@@ -2,7 +2,7 @@
 	<div style="display: flex;">
 		<el-badge v-if="item.status && item.status.key && row[item.status.key]" is-dot class="item" :type="item.status.type || 'primary'" style="width: 10px;cursor: pointer;margin-top: 10px;"></el-badge>
 		<x-avatar v-if="item.columntype == 'avatar' || item.component == 'avatar'" :name="item.name" :options="item.options" :data="row"></x-avatar>
-		<el-badge v-else-if="item.columntype == 'badge' || item.columntype == 'imagegroup'" :value="getType(row[item.name])" @click="handleClick(row, item)" v-bind="item.options"></el-badge>
+		<el-badge v-else-if="item.columntype == 'badge' || item.columntype == 'imagegroup'" :value="getType(row[item.name])" @click="handleClick(row, item)" v-bind="item.options" style="cursor: pointer; "></el-badge>
 		<el-image v-else-if="item.columntype == 'image'" :preview-src-list="[getImg(row[item.name])]" :preview-teleported="true" hide-on-click-modal="true" lazy="true" style="max-width: 60px; height: 26px; border-radius: 2px;" fit="cover" :src="getImg(row[item.name])">
 			<template #error>
 				<div class="image-slot">
@@ -13,24 +13,21 @@
 		<input v-else-if="item.columntype == 'input'" @click="handleClick(row, item)" style="cursor: pointer; " class="el-input__inner" type="text" readonly :value="row[item.name]">
 		<p v-else-if="item.columntype == 'status'">
 			<template v-for="{ value, type = 'success', label } in item.options.items">
-				<x-status-indicator :key="value" pulse :type="type || 'success'" :label="label" @click="handleClick(row, item)" v-if="value == row[item.name]"></x-status-indicator>
+				<x-status-indicator :key="value" pulse :type="type" :label="label" @click="handleClick(row, item)" v-if="value == row[item.name]"></x-status-indicator>
 			</template>
 		</p>
 
 		<p v-else-if="item.columntype == 'button' && item.options.items && item.options.items.length > 0">
 			<template v-for="op in item.options.items">
-				<el-button @click="handleClick(row, op.options || item)" :key="op.value" :type="op.type || 'warning'" v-bind="op" v-if="op.value == row[item.name]">
+				<el-button @click="handleClick(row, op.options || item)" :key="op.value" :type="op.type || 'warning'" :size="op.size || 'small'" v-bind="op" v-if="op.value == row[item.name]">
 					{{ op.label }}
 				</el-button>
 			</template>
 		</p>
-
 		<p v-else-if="item.columntype == 'button'">
 			<el-button @click="handleClick(row, item)" :type="item.options.type || 'warning'" v-bind="item.options"> {{ row[item.name] }} </el-button>
 		</p>
-
 		<p v-else-if="item.columntype == 'tag' || item.columntype == 'time'" @click="handleClick(row, item)" v-time.tip="row[item.name]"></p>
-
 		<slot v-else :name="item.name">
 			{{ item.columntype == 'select' && item.options && item.options.items ? getNameByValue(row[item.name], item.options.items) : row[item.name] }}
 		</slot>
diff --git a/src/views/table/2/index.vue b/src/views/table/2/index.vue
index 376a261..1d7ff67 100644
--- a/src/views/table/2/index.vue
+++ b/src/views/table/2/index.vue
@@ -229,13 +229,22 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+.xtable:deep(.el-card__body) {
+	padding: 2px 5px
+}
+
+.-mb-15px {
+	margin-bottom: -15px;
+}
+
 .tableexpandhtml img {
 	max-width: calc(100% - 30%);
 	max-height: 120px;
 }
 
-.expandtextarea .el-textarea__inner {
+
+.expandtextarea:deep(.el-textarea__inner) {
 	box-shadow: none
 }
 
@@ -248,28 +257,16 @@ export default {
 	padding: 0px 2px 0;
 }
 
-.xtable .xtabletabs .el-tabs__nav {
+.xtable .xtabletabs:deep(.el-tabs__nav) {
 	padding: 10px
 }
 
-.xtable .mt-10px {
-	margin-top: 15px;
-}
-
-.xtable .mb-10px {
-	margin-bottom: 15px;
-}
-
-.xtable .float-right {
-	float: right;
-}
-
-.xtable .xtabletabs .el-tabs__header {
+.xtable .xtabletabs:deep(.el-tabs__header) {
 	margin: 0 0 2px;
 }
 
-.xtable .xtabletabs .el-tabs__nav-next,
-.xtable .xtabletabs .el-tabs__nav-prev {
+.xtable .xtabletabs:deep(.el-tabs__nav-next),
+.xtable .xtabletabs:deep(.el-tabs__nav-prev) {
 	padding: 10px 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/user/index/info.vue b/src/views/user/index/info.vue
index 2b57bcc..6a52ea7 100644
--- a/src/views/user/index/info.vue
+++ b/src/views/user/index/info.vue
@@ -1,7 +1,20 @@
 <template>
-	<x-user v-model="user"></x-user>
+	<el-container style="padding: 10px 10px 5px 10px;">
+		<el-container class="container">
+		<x-user v-model="user"></x-user>
+	</el-container>
+	</el-container>
 </template>
 
+<style scoped>
+.container {
+	border: 1px solid var(--el-border-color-light);
+	border-radius: 4px;
+	background-color: var(--el-fill-color-blank);
+	overflow: hidden;
+}
+</style>
+
 <script>
 	export default {
 		name: 'userCenter',