graduate-ui/src/views/system/workroomCollege/deptInfo/index.vue

<template>
  <!-- <el-card class="workspace-info card-border mb-2">
    <div class="workspace-name">
      <div class="card-header">
        <span>{{ form.name }}</span>
      </div>
    </div>
  </el-card> -->
  <div>
    <div class="flex mb-3" v-loading="loading">
      <el-card class="workspace-info w-full" style="padding-bottom: 40px;">
        <template #header>
          <div class="card-header">
            <span>工作间信息</span>
          </div>
        </template>
        <ul class="user-info">
          <div class="info-row">
            <li class="info-item">
              <Icon class="mr-5px" icon="ep:bell" />
              <span class="info-label">工作间名称：</span>
              <span class="pull-right">{{ userInfo.name }}</span>
            </li>
            <li class="info-item">
              <Icon class="mr-5px" icon="ep:phone" />
              <span class="info-label">联系电话：</span>
              <span class="pull-right">{{ userInfo.phone }}</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.email }}</span>
            </li>
            <li class="info-item">
              <Icon class="mr-5px" icon="ep:location" />
              <span class="info-label">工作间地址：</span>
              <span class="pull-right">{{ userInfo.address }}</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">{{ userInfo.supervisorNum }}</span>
            </li>
            <li class="info-item">
              <Icon class="mr-5px" icon="ep:user" />
              <span class="info-label">学生人数：</span>
              <span class="pull-right">{{ userInfo.studentNum }}</span>
            </li>
          </div>

          <!-- <div>
            <li class="info-item">
              <Icon class="mr-5px" icon="ep:user" />
              <span class="info-label">工作间简介：</span>
              <span class="pull-right">{{ userInfo.description }}</span>
            </li>
          </div> -->
        </ul>
        <div class="info-description">
          <!-- <Icon class="mr-5px" icon="ep:location" /> -->
          <div style="display: flex; align-items: center;">
            <Icon icon="ep:picture" />
            <div class="div-label" style="margin-left: 8px;">简介：</div>
          </div>
          <div class="description-content">{{ cleanedDescription }}</div>
          <div class="image-container">
        <template v-for="(img, index) in extractedImages" :key="index">
          <img :src="img" alt="简介图片" class="image-item" />
        </template>
    </div>
        </div>
      </el-card>

      <!-- <el-card class="workspace-info ml-3 w-2/3">
        <template #header>
          <div class="card-header">
            <span>{{ userInfo.name }}</span>
          </div>
        </template>
        <el-form ref="formRef" :model="form" label-width="100px" :rules="rules" style="margin-left: 5%; margin-right: 5%;">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" :disabled="!isEditMode"/>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" :disabled="!isEditMode"/>
          </el-form-item>
          <el-form-item label="工作间地址" prop="address">
            <el-input v-model="form.address" :disabled="!isEditMode"/>
          </el-form-item>
          <el-form-item label="工作间名称" prop="name">
            <el-input v-model="form.name" :disabled="!isEditMode"/>
          </el-form-item>
          <el-form-item label="工作间简介" prop="description">
            <el-input type="textarea" v-model="form.description" :disabled="!isEditMode"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toggleEditMode">{{ isEditMode ? '保存' : '修改' }}</el-button>
          </el-form-item>
        </el-form>
      </el-card> -->
    </div>
    <div class="flex flex-col">
       <el-card class="teacher-info w-full">
        <template #header>
          <div class="card-header1">
            <span>导师信息</span>
          </div>
        </template>
        <teacher />
      </el-card>
      <el-card class="student-info w-full mb-3">
        <template #header>
          <div class="card-header1">
            <span>学生信息</span>
          </div>
        </template>
        <student />
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
// import { defineComponent, reactive, ref, onMounted } from 'vue';
// import type { FormRules } from 'element-plus';
// import type { FormExpose } from '@/components/Form'
import { useI18n } from 'vue-i18n';
// import { useMessage } from '@/hooks/web/useMessage';
import { updateDept, DeptVO, getUserDept } from '@/api/system/dept/index';
import { getDept } from '@/api/system/dept/index';
// import * as UserApi from '@/api/system/user';
import student from './student.vue';
import teacher from './teacher.vue';

export default defineComponent({
  components: {
    student,
    teacher,
  },
  setup() {
    const { t } = useI18n();
    // const message = useMessage();
    const loading = ref(true) // 列表的加载中
    const formRef = ref();

    const route = useRoute()
    console.log('route.query:', route.query);
    const id = ref(route.query.id);

    // const form = reactive({
    //   id: id.value,
    //   supervisor: '',  
    //   phone: '',
    //   email: '',
    //   address: '',
    //   name: '',
    //   leaderUserId: [],
    //   nickname: '', 
    //   description: '',
    // });

    // 表单校验规则
    // const rules = reactive<FormRules>({
      // leaderUserId: [
      //   { required: true, message: '请选择导师名称', trigger: 'blur' }
      // ],
    //   phone: [
    //     { required: true, message: '请输入负责人电话', trigger: 'blur' },
    //     {
    //       pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
    //       message: '请输入正确的手机号码',
    //       trigger: 'blur'
    //     }
    //   ],
    //   email: [
    //     { required: true, message: '请输入邮箱', trigger: 'blur' },
    //     {
    //       type: 'email',
    //       message: '请输入正确的邮箱格式',
    //       trigger: ['blur', 'change']
    //     }
    //   ],
    //   address: [
    //     { required: true, message: '请输入工作间地址', trigger: 'blur' }
    //   ],
    //   name: [
    //     { required: true, message: '请输入工作间名称', trigger: 'blur' }
    //   ],
    //   description: [
    //     { required: false, message: '请输入工作间简介', trigger: 'blur' }
    //   ],
    // });

    // 将 userInfo 定义放入 setup 中
    const userInfo = ref({} as DeptVO);  
    const fetchUserInfo = async (id) => {
      try {
        loading.value = true; // 开始加载
        const users = await getDept(id);
        console.log(users,'userInfo');
        userInfo.value = users;
        // name: users.user[0].nickname // 提取 nickname
      }finally {
        loading.value = false; // 结束加载
      }
    };

    //获取工作间下的导师
    // const users = ref()
    // const getDeptsupervisor = async (id) => {
    //   try {
    //     const response = await UserApi.getDeptsupervisor(id.value)
    //     users.value = response
    //     console.log('工作间下导师信息:', users.value);
    //   } catch (error) {
    //     console.error('Error fetching user data:', error)
    //   }
    // }

    // //传supervisorId给form.leaderUserId
    // const handleSupervisorChange = (values) => {
    //   form.leaderUserId = values;  // values 是选择的用户ID数组
    // }

// const isEditMode = ref(false);

// 切换编辑模式
// const toggleEditMode = () => {
//   if (isEditMode.value) {
//     // 在“保存”状态下执行保存操作
//     submit();
//   }
//   isEditMode.value = !isEditMode.value;
// };

 // 创建一个 computed 属性来处理并去掉 <p> 标签
    const cleanedDescription = computed(() => {
      return userInfo.value.description ? userInfo.value.description.replace(/<\/?[^>]+(>|$)/g, '') : '';
    });

    const extractedImages = computed(() => {
      const imgRegex = /<img[^>]+src="([^">]+)"[^>]*>/g;
      let images = [];
      let match;
      const description = userInfo.value.description || '';
      while ((match = imgRegex.exec(description))) {
        images.push(match[1]); // 获取src属性
      }
      return images;
    });

    // 表单提交
    // 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 getDept(id.value);
    //   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 fetchUserInfo(form.id);
      if (id.value) {
        await fetchUserInfo(id.value); // 传入获取到的 ID
      }
      // const response = await UserApi.getDeptsupervisor(id.value)
      // users.value = response
      // getDeptsupervisor(id);
    });

    return {
      t,
      // form,
      userInfo,
      loading,  
      // isEditMode,
      // toggleEditMode,
      // submit,
      // init,
      // rules,
      formRef,
      // users,
      // handleSupervisorChange,
      // getDeptsupervisor,
      cleanedDescription,
      extractedImages,

    };
  }
});

</script>

<style scoped>

.label-bold {
  font-weight: bold; /* 设置字体加粗 */
}

.workspace-name {
  height: 20px;
}

.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.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;
}

.personal-info {
  margin-top: 20px;
}

.image-container {
  display: flex; /* 使图片横向排列 */
  flex-wrap: wrap; /* 如果空间不足则换行 */
  gap: 10px; /* 图片之间的间距 */
  margin-top: 20px; /* 与简介之间的间隔 */
}

.image-item {
  max-width: 150px; /* 设置图片的最大宽度 */
  height: auto; /* 保持图片的高度自动 */
}
.flex {
  display: flex;
  flex-direction: column;
  gap: 15px; 
}
.card-header1 {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0px;
}

</style>