graduate-ui/src/views/system/studentAttendanceManage/studentFaceManage/StudentFaceForm.vue

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="图片材料" prop="photoUrl">
        <UploadImg v-model="formData.photoUrl" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
// import { UserAchievementApi, UserAchievementVO } from '@/api/system/userAchievement'
import * as UserApi from '@/api/system/user'
import { UserVO } from '@/api/system/user'


/** 成果 表单 */
defineOptions({ name: 'UserAchievementForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  userNumber : '',
  photoUrl: '',
})
// const formRules = reactive({
//   userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
//   achievementName: [{ required: true, message: '成果名称不能为空', trigger: 'blur' }],
//   achievementType: [{ required: true, message: '成果类型不能为空', trigger: 'change' }],
//   userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
// })
const formRef = ref() // 表单 Ref

// /** 获取用户列表 */
// const users = ref();
// const getDeptUser = async () => {
//     try {
//         const response = await UserApi.getDeptUser();
//         console.log(response);
//         users.value = response;
//     } catch (error) {
//         console.error("Error fetching user data:", error);
//     }
// };

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await UserApi.getUser(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 用户id更新 */
// const handleUserChange = (selectedNickname: string) => {
//   const selectedUser = users.value.find((user: any) => user.nickname === selectedNickname);
//   formData.value.userId = selectedUser? selectedUser.id : undefined;
// };

/** 提交表单 */
const emit = defineEmits(['success','error'])
 // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
  formLoading.value = true;
  try {
    const data = formData.value as unknown as UserVO;
    console.log(data, 'data');
    const msg = await UserApi.updateStudentImg(data.userNumber, data.photoUrl);
    console.log(msg, 'msg');

    // 假设 msg 包含操作结果的信息
    if (msg === '更新照片成功' || msg === '删除照片成功') {
      // 显示成功提示
      message.success('修改成功');
     dialogVisible.value = false;
      // 发送操作成功的事件
     emit('success');
     // 通知父组件重新加载数据
    } else {
     // 显示错误提示
     message.error(msg);
 // 发送错误事件
//       emit('error');
 }
 } catch (error) {
 console.error(error);
 message.error('提交失败，请稍后重试');
 emit('error');
 } finally {
  formLoading.value = false;
 }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    userNumber: '',
    photoUrl: '',
  }
  formRef.value?.resetFields()
}

onMounted(() => {
 
})
</script>