From 08881d6b6412822d5035f63a0775ca1f213c8668 Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期一, 20 十月 2025 10:17:22 +0800
Subject: [PATCH] 测试完成
---
src/views/system/user/profile/index.vue | 162 +++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 153 insertions(+), 9 deletions(-)
diff --git a/src/views/system/user/profile/index.vue b/src/views/system/user/profile/index.vue
index b5624d3..0918602 100644
--- a/src/views/system/user/profile/index.vue
+++ b/src/views/system/user/profile/index.vue
@@ -23,13 +23,94 @@
<svg-icon icon-class="email" />鐢ㄦ埛閭
<div class="pull-right">{{ user.email }}</div>
</li>
- <li class="list-group-item">
- <svg-icon icon-class="tree" />鎵�灞為櫌鍖�
- <div class="pull-right" >{{ user.belongWards[0].districtName }}</div>
+ <li class="list-group-item" v-if="user.belongWards[0]">
+ <svg-icon icon-class="tree" />鎵�灞炵梾鍖�
+ <div class="pull-right">
+ <el-popover
+ v-model="showAllWardsPopover"
+ placement="right-start"
+ :width="300"
+ trigger="manual"
+ popper-class="ward-popover"
+ >
+ <div class="popover-content">
+ <p
+ v-for="ward in user.belongWards"
+ :key="ward.districtId"
+ class="popover-item"
+ >
+ {{ ward.districtName }}
+ </p>
+ </div>
+ <!-- 闇�瑕佷竴涓┖鍏冪礌浣滀负瑙﹀彂鍣ㄧ殑寮曠敤 -->
+ <!-- <div style="display: none" slot="reference"></div> -->
+ <div slot="reference">
+ <el-tag
+ v-for="(ward, index) in displayWards"
+ :key="ward.districtId"
+ size="small"
+ class="ward-tag"
+ >{{ ward.districtName }}</el-tag
+ >
+ <!-- 鏄剧ず闅愯棌鏁伴噺鐨勬爣绛撅紝鐐瑰嚮瑙﹀彂Popover -->
+ <el-tag
+ v-if="user.belongWards.length > maxTagCount"
+ size="small"
+ class="more-tag"
+ @click="showAllWardsPopover = !showAllWardsPopover"
+ >+{{ user.belongWards.length - maxTagCount }}</el-tag
+ >
+ </div>
+ </el-popover>
+ </div>
</li>
- <li class="list-group-item">
+ <li class="list-group-item" v-else>
+ <svg-icon icon-class="tree" />鎵�灞為櫌鍖�
+ <div class="pull-right">鏈厤缃�</div>
+ </li>
+ <li class="list-group-item" v-if="user.belongDepts[0]">
<svg-icon icon-class="tree" />鎵�灞炵瀹�
- <div class="pull-right" >{{ user.belongDepts[0].deptName }}</div>
+ <div class="pull-right">
+ <el-popover
+ v-model="showAllDeptsPopover"
+ placement="right-start"
+ :width="300"
+ style="top: 130px; left: 0px"
+ trigger="manual"
+ popper-class="dept-popover"
+ >
+ <div class="popover-content">
+ <p
+ v-for="dept in user.belongDepts"
+ :key="dept.deptId"
+ class="popover-item"
+ >
+ {{ dept.deptName }}
+ </p>
+ </div>
+ <!-- <div style="display: none" slot="reference"></div> -->
+ <div slot="reference">
+ <el-tag
+ v-for="(dept, index) in displayDepts"
+ :key="dept.deptId"
+ size="small"
+ class="dept-tag"
+ >{{ dept.deptName }}</el-tag
+ >
+ <el-tag
+ v-if="user.belongDepts.length > maxTagCount"
+ size="small"
+ class="more-tag"
+ @click="showAllDeptsPopover = !showAllDeptsPopover"
+ >+{{ user.belongDepts.length - maxTagCount }}</el-tag
+ >
+ </div>
+ </el-popover>
+ </div>
+ </li>
+ <li class="list-group-item" v-else>
+ <svg-icon icon-class="tree" />鎵�灞炵瀹�
+ <div class="pull-right">鏈厤缃�</div>
</li>
<li class="list-group-item">
<svg-icon icon-class="peoples" />鎵�灞炶鑹�
@@ -76,20 +157,83 @@
user: {},
roleGroup: {},
postGroup: {},
- activeTab: "userinfo"
+ activeTab: "userinfo",
+ maxTagCount: 3, // 鎺у埗榛樿鏄剧ず鐨勬爣绛炬暟閲�
+ showAllWardsPopover: false, // 鎺у埗鐥呭尯Popover鐨勬樉绀�
+ showAllDeptsPopover: false, // 鎺у埗绉戝Popover鐨勬樉绀�
};
+ },
+ computed: {
+ // 璁＄畻瑕佹樉绀虹殑鐥呭尯鏍囩锛堝墠maxTagCount涓級
+ displayWards() {
+ if (!this.user.belongWards) return [];
+ return this.user.belongWards.slice(0, this.maxTagCount);
+ },
+ // 璁＄畻瑕佹樉绀虹殑绉戝鏍囩锛堝墠maxTagCount涓級
+ displayDepts() {
+ if (!this.user.belongDepts) return [];
+ return this.user.belongDepts.slice(0, this.maxTagCount);
+ },
},
created() {
this.getUser();
},
methods: {
getUser() {
- getUserProfile().then(response => {
+ getUserProfile().then((response) => {
this.user = response.data;
this.roleGroup = response.roleGroup;
this.postGroup = response.postGroup;
});
- }
- }
+ },
+ },
};
</script>
+
+<style scoped>
+/* 涓烘爣绛炬坊鍔犱竴浜涘彸杈硅窛锛屼娇鍏朵笉绱ц创鍦ㄤ竴璧� */
+.ward-tag,
+.dept-tag,
+.more-tag {
+ margin-right: 6px;
+ margin-bottom: 4px;
+}
+/* 璁剧疆"鏇村"鏍囩鐨勬牱寮忥紝浣垮叾鐪嬭捣鏉ュ彲鐐瑰嚮 */
+.more-tag {
+ cursor: pointer;
+ background-color: #f0f0f0;
+ border-color: #ddd;
+ color: #999;
+}
+.list-group-item {
+ display: flex;
+ align-items: center;
+}
+.pull-right {
+ flex: 1;
+ text-align: right;
+}
+</style>
+
+<style>
+/* Popover鍐呭鍖哄煙鏍峰紡 */
+.popover-content {
+ max-height: 200px;
+ overflow-y: auto;
+ padding: 10px;
+}
+.popover-item {
+ margin: 8px 0;
+ line-height: 1.4;
+}
+/* 鐥呭尯Popover鏍峰紡 */
+.ward-popover.el-popover,
+.dept-popover.el-popover {
+ max-width: 300px;
+}
+/* 璋冩暣Popover绠ご浣嶇疆 */
+.ward-popover[x-placement^="right"],
+.dept-popover[x-placement^="right"] {
+ margin-left: 10px;
+}
+</style>
--
Gitblit v1.9.3