测试完成

WXL (wul)

6 小时以前 6bc24b57837948408cfc4812bbab6ac2f9f4a3dc

 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>