graduate-ui/src/views/system/workroomTeacher/dept/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 class="flex">
    <el-card class="workspace-info w-1/3">
      <template #header>
        <div class="card-header">
          <span>工作间信息</span>
        </div>
      </template>
      <ul class="user-info">
        <li class="info-item">
          <Icon class="mr-5px" icon="ep:user" />
          <span class="info-label">负责人名称：</span>
          <span class="pull-right">{{ userInfo.name }}</span>
        </li>
        <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:phone" />
          <span class="info-label">手机号码：</span>
          <span class="pull-right">{{ userInfo.phone }}</span>
        </li>
        <li class="info-item">
          <Icon class="mr-5px" icon="fontisto:email" />
          <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>   
        <!-- <li class="info-item" v-for="(url, index) in userAchievements" :key="index">
          <Icon class="mr-5px" icon="fontisto:email" />
          <span class="info-label">成果展示：</span>
          <span class="pull-right">{{ userInfo.achievement }}</span>
          <img :src="url" alt="成就展示图片" class="user-image" />
        </li> -->
      </ul>
    </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>
          <template #label>
            <span style="font-weight: bold;">负责人信息</span>
          </template>
          <span style="font-weight: bold;">------</span>
        </el-form-item>
        <el-form-item label="负责人名称" prop="supervisor">
            <el-select
              v-model="form.supervisor"
              @change="handleSupervisorChange"
              placeholder="请选择导师名称"
              clearable
              filterable
            >
              <el-option
                v-for="supervisor in supervisors"
                :key="supervisor.id"
                :label="supervisor.nickname"
                :value="supervisor.id"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="负责人电话" prop="phone">
          <el-input v-model="form.phone"/>
        </el-form-item>
        <el-form-item label="负责人邮箱" prop="email">
          <el-input v-model="form.email"/>
        </el-form-item>
        <el-form-item>
          <template #label>
            <span style="font-weight: bold;">工作间信息</span>
          </template>
          <span style="font-weight: bold;">------</span>
        </el-form-item>
        <el-form-item label="工作间地址" prop="address">
          <el-input v-model="form.address"/>
        </el-form-item>
        <el-form-item label="工作间名称" prop="name">
          <el-input v-model="form.name"/>
        </el-form-item>
        <!-- <el-form-item label="导师人数" prop="supervisorNum">
          <el-input v-model.number="form.supervisorNum"/>
        </el-form-item>
        <el-form-item label="学生人数" prop="studentNum">
          <el-input v-model.number="form.studentNum"/>
        </el-form-item> -->
        <el-form-item label="工作间简介" prop="description">
          <el-input type="textarea" v-model="form.description"/>
        </el-form-item>
        <!-- <el-form-item label="成果展示" prop="achievement">
          <el-input type="textarea" v-model="form.achievement"/>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="submit">保存</el-button>
          <!-- <el-button type="danger" @click="init">重置</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>
  </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 * as UserApi from '@/api/system/user'

export default defineComponent({
  setup() {
    const { t } = useI18n();
    const message = useMessage();
    const formRef = ref();

    const form = reactive({
      id: '',
      supervisor: '',  
      phone: '',
      email: '',
      address: '',
      name: '',
      leaderUserId: '',
      nickname: '', 
      // supervisor: '',

      // supervisorNum: '',
      // studentNum: '',
      description: '',
      // achievement: '',
    });

    // 表单校验规则
    const rules = reactive<FormRules>({
      supervisor: [
        { 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' }
      ],
      // supervisorNum: [
      //   { required: true, message: '请输入导师人数', trigger: 'blur' },
      // ],
      // studentNum: [
      //   { required: true, message: '请输入学生人数', trigger: 'blur' }
      // ]
    });

   

    // 将 userInfo 定义放入 setup 中
    const userInfo = ref({} as DeptVO);  
    const fetchUserInfo = async () => {
      const users = await getUserDept();
      console.log(users,'09');
      userInfo.value = users;
    };

    // 获取导师列表
    const supervisors = ref();
    const getSupervisor= async () => {
      try {
        const response = await UserApi.getSupervisor()
        supervisors.value = response
        console.log('导师列表:', supervisors.value);
        
      } catch (error) {
        console.error('Error fetching user data:', error)
      }
    }

    // const formData = unref(formRef)?.formModel as DeptVO
    // console.log('提交的数据:', formData);

    //传supervisorId给formData.supervisorId
    const handleSupervisorChange = (value: number) => {
      // const formData = unref(formRef)?.formModel as DeptVO
        console.log(form);
      const selectedsupervisor = supervisors.value.find(supervisor => supervisor.id === value);
      if (selectedsupervisor) {
        form.leaderUserId = selectedsupervisor.id;
        // form.supervisorId = selectedUser.nickname;
      }
    }

    // 表单提交
    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 getUserDept();
      console.log('获取的数据:', res);
      form.id = res.id;
      form.address = res.address;
      form.supervisor = res.user.nickname;
      form.phone = res.user.mobile;
      form.email = res.user.email;
      form.name = res.name;
      form.leaderUserId = res.user.id;
      userInfo.value = res.user; 
    };

    onMounted(async () => {
      await init();
      await fetchUserInfo();
      getSupervisor();
    });

    return {
      t,
      form,
      userInfo,
      submit,
      init,
      rules,
      formRef,
      supervisors,
      handleSupervisorChange,
      getSupervisor,
    };
  }
});

</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-left: 5%;
  margin-right: 5%;
  margin-top: 60px;
  padding-right: 0;
  padding-left: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  list-style: none;
}

.info-item {
  margin-bottom: 10px;
  padding: 11px 0;
  margin-bottom: -1px;
  font-size: 13px;
  border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #e7eaec;
}

.pull-right {
  float: right !important;
}

.info-label {
  font-weight: bold;
}

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


</style>