|
@@ -0,0 +1,288 @@
|
|
|
+<template>
|
|
|
+ <div class="flex">
|
|
|
+ <el-card class="workspace-info w-full" shadow="always" style="padding-bottom: 40px;">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header" style="display: flex; align-items: center; justify-content: space-between;">
|
|
|
+ <span style="flex-grow: 1; text-align: center;font-weight: bold;">个人信息</span>
|
|
|
+ <div class="pull-right">
|
|
|
+ <el-button type="primary" @click="openDialog">修改</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <ul class="user-info">
|
|
|
+ <div class="info-row">
|
|
|
+ <li class="info-item">
|
|
|
+ <Icon class="mr-5px" icon="ep:user" />
|
|
|
+ <span class="info-label">姓名:</span>
|
|
|
+ <span class="pull-right">{{ userInfo.nickname }}</span>
|
|
|
+ </li>
|
|
|
+ <li class="info-item">
|
|
|
+ <Icon class="mr-5px" icon="ep:phone" />
|
|
|
+ <span class="info-label">工作间:</span>
|
|
|
+ <span class="pull-right">{{ userInfo.dept ? userInfo.dept.name : '未知部门' }}</span>
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info-row">
|
|
|
+ <li class="info-item">
|
|
|
+ <Icon class="mr-5px" icon="fontisto:email" />
|
|
|
+ <span class="info-label">手机号码:</span>
|
|
|
+ <span class="pull-right">{{ userInfo.mobile }}</span>
|
|
|
+ </li>
|
|
|
+ <li class="info-item">
|
|
|
+ <Icon class="mr-5px" icon="ep:location" />
|
|
|
+ <span class="info-label">邮箱:</span>
|
|
|
+ <span class="pull-right">{{ userInfo.email }}</span>
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info-row">
|
|
|
+ <li class="info-item">
|
|
|
+ <Icon class="mr-5px" icon="ep:user" />
|
|
|
+ <span class="info-label">用户类型:</span>
|
|
|
+ <span class="pull-right"> {{ userTypeMapping[userInfo.userType] || '未知用户类型' }}</span>
|
|
|
+ </li>
|
|
|
+ <li class="info-item">
|
|
|
+ <Icon class="mr-5px" icon="ep:location" />
|
|
|
+ <span class="info-label">工号:</span>
|
|
|
+ <span class="pull-right">{{ userInfo.userNumber }}</span>
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ <!-- <div class="info-description">
|
|
|
+ <Icon class="mr-5px" icon="ep:location" /> -->
|
|
|
+ <!-- <div class="div-label" style="margin-left: 20px;">简介:</div>
|
|
|
+ <div class="description-content">{{ cleanedDescription }}</div>
|
|
|
+ <div class="image-container">
|
|
|
+ <div v-for="(url, index) in extractedImageUrls" :key="index" class="image-item">
|
|
|
+ <img :src="url" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <TForm
|
|
|
+ ref="formRef"
|
|
|
+ :visible="dialogVisible"
|
|
|
+ :form="userInfo"
|
|
|
+ @update:visible="dialogVisible = $event"
|
|
|
+ @success="handleSuccess"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { defineComponent, reactive, ref, onMounted } from 'vue';
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+import { useMessage } from '@/hooks/web/useMessage';
|
|
|
+import TForm from './TForm.vue';
|
|
|
+import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
|
|
|
+
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ components: {
|
|
|
+ TForm,
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const { t } = useI18n();
|
|
|
+ const message = useMessage();
|
|
|
+ const dialogVisible = ref(false);
|
|
|
+ const formRef = ref();
|
|
|
+
|
|
|
+ // 将 userInfo 定义放入 setup 中
|
|
|
+ const userInfo = ref({} as ProfileVO)
|
|
|
+ const getUserInfo = async () => {
|
|
|
+ try {
|
|
|
+ const users = await getUserProfile();
|
|
|
+ console.log(users, 'users');
|
|
|
+ userInfo.value = users;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取用户信息失败:', error);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const userTypeMapping = {
|
|
|
+ '3': '导师',
|
|
|
+};
|
|
|
+
|
|
|
+const openDialog = () => {
|
|
|
+ dialogVisible.value = true;
|
|
|
+ formRef.value.open(); // 打开弹窗
|
|
|
+};
|
|
|
+
|
|
|
+const extractedImageUrls = ref<string[]>([]);
|
|
|
+const handleSuccess = (urls) => {
|
|
|
+ extractedImageUrls.value = urls;
|
|
|
+ console.log('提取到的图片URL:', extractedImageUrls);
|
|
|
+ dialogVisible.value = false;
|
|
|
+};
|
|
|
+const fetchImageUrls = async () => {
|
|
|
+ // 你的获取图片 URL 的 API 调用
|
|
|
+ const res = await getUserProfile();
|
|
|
+ const urls = res.description.match(/<img.*?src="(.*?)"/g); // 使用更合理的正则表达式
|
|
|
+ // 如果找到的 URL 数组不为空,则进行处理
|
|
|
+ if (urls) {
|
|
|
+ // 从匹配的字符串中提取出 URL
|
|
|
+ extractedImageUrls.value = urls.map(url => {
|
|
|
+ // 取出匹配到的 src 属性部分
|
|
|
+ const match = url.match(/src="(.*?)"/);
|
|
|
+ return match ? match[1] : '';
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ extractedImageUrls.value = []; // 没有找到图片则设为空数组
|
|
|
+ } // 将获取到的 URL 赋值
|
|
|
+};
|
|
|
+
|
|
|
+// 创建一个 computed 属性来处理并去掉 <p> 标签
|
|
|
+// const cleanedDescription = computed(() => {
|
|
|
+// return userInfo.value.description ? userInfo.value.description.replace(/<\/?[^>]+(>|$)/g, '') : '';
|
|
|
+// });
|
|
|
+
|
|
|
+
|
|
|
+ // 表单提交
|
|
|
+ // const submit = async () => {
|
|
|
+ // try {
|
|
|
+ // await formRef.value?.validate();
|
|
|
+ // console.log('提交的数据:', form);
|
|
|
+ // await updateDept(form).then((res) => {
|
|
|
+ // console.log('更新成功:', res);
|
|
|
+ // });
|
|
|
+ // message.success('成功');
|
|
|
+ // } catch (error) {
|
|
|
+ // console.error('提交错误:', error);
|
|
|
+ // message.error('错误');
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+
|
|
|
+ // 表单重置
|
|
|
+ // const init = async () => {
|
|
|
+ // const res = await getUserProfile();
|
|
|
+ // console.log('获取的数据:', res);
|
|
|
+ // form.id = res.id;
|
|
|
+ // form.address = res.address;
|
|
|
+ // form.supervisor = res.user.nickname;
|
|
|
+ // form.phone = res.phone;
|
|
|
+ // form.email = res.email;
|
|
|
+ // form.name = res.name;
|
|
|
+ // form.leaderUserId = res.user.id;
|
|
|
+ // form.description = res.description;
|
|
|
+ // userInfo.value = res.user;
|
|
|
+ // };
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ // await init();
|
|
|
+ await getUserInfo();
|
|
|
+ await fetchImageUrls(); // 这里 add 一個方法来加载图片
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ t,
|
|
|
+ // form,
|
|
|
+ userInfo,
|
|
|
+ // init,
|
|
|
+ getUserInfo,
|
|
|
+ fetchImageUrls,
|
|
|
+ formRef,
|
|
|
+ dialogVisible,
|
|
|
+ openDialog,
|
|
|
+ handleSuccess,
|
|
|
+ extractedImageUrls,
|
|
|
+ // cleanedDescription
|
|
|
+ userTypeMapping,
|
|
|
+ };
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.user-info {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: 5%;
|
|
|
+ margin-right: 5%;
|
|
|
+ padding-right: 0;
|
|
|
+ padding-left: 0;
|
|
|
+ border-right: 0;
|
|
|
+ border-left: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ list-style: none;
|
|
|
+}
|
|
|
+
|
|
|
+.info-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between; /* 保持并排显示 */
|
|
|
+ align-items: center; /* 垂直居中对齐 */
|
|
|
+ margin-bottom: 20px; /* 增加行之间的间距 */
|
|
|
+}
|
|
|
+
|
|
|
+.info-item {
|
|
|
+ flex: 1; /* 每个信息项占据相同的空间 */
|
|
|
+ padding: 11px 0; /* 内部上下填充 */
|
|
|
+ margin-right: 50px; /* 每个信息项之间的右边距 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 仅为每个信息项添加底部边框 */
|
|
|
+.info-item:first-child {
|
|
|
+ border-bottom: 1px solid #e7eaec;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item:last-child {
|
|
|
+ border-bottom: 1px solid #e7eaec;
|
|
|
+}
|
|
|
+
|
|
|
+.info-description {
|
|
|
+ margin-top: 30px; /* 与上面的信息分隔 */
|
|
|
+ margin-left: 5%; /* 左侧与上面列表保持一致 */
|
|
|
+ margin-right: 5%; /* 右侧与上面列表保持一致 */
|
|
|
+ /* display: flex; */
|
|
|
+ align-items: center; /* 确保标题与描述对齐 */
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+
|
|
|
+.info-label {
|
|
|
+ font-weight: bold; /* 加粗标题 */
|
|
|
+ margin-right: 10px; /* 标题与内容之间的间距 */
|
|
|
+}
|
|
|
+
|
|
|
+.div-label {
|
|
|
+ font-weight: bold; /* 加粗标题 */
|
|
|
+ display: block;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.description-content {
|
|
|
+ white-space: pre-wrap; /* 保持换行 */
|
|
|
+ overflow-wrap: break-word; /* 自动断行 */
|
|
|
+ margin-right: 5%;
|
|
|
+ font-size: 13px; /* 根据需要设置字体大小 */
|
|
|
+ margin-top: 20px; /* 内容与标题之间不需要额外间距 */
|
|
|
+ letter-spacing: 3px;
|
|
|
+ text-indent: 2em;
|
|
|
+ line-height: 2;
|
|
|
+}
|
|
|
+
|
|
|
+.pull-right {
|
|
|
+ float: right !important;
|
|
|
+}
|
|
|
+
|
|
|
+.info-label {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.image-container {
|
|
|
+ display: flex; /* 使图片横向排列 */
|
|
|
+ flex-wrap: wrap; /* 如果空间不足则换行 */
|
|
|
+ gap: 10px; /* 图片之间的间距 */
|
|
|
+ margin-left: 20px; /* 左边距,根据需要设置 */
|
|
|
+}
|
|
|
+
|
|
|
+.image-item img {
|
|
|
+ width: 150px; /* 设置更大的宽度 */
|
|
|
+ height: auto; /* 保持高度自动 */
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|