menduner-uniapp/pagesA/student/information.vue

<!-- 校验是否完善人才必填信息 -->
<template>
  <scroll-view class="scrollBox" scroll-y="true">
    <view class="content">
      <!-- <view class="text-center ss-m-b-50 font-size-20 color-primary">学生信息认证</view> -->
      <uni-forms
        ref="baseInfoRef"
        v-model="formData"
        :rules="formRules"
        validateTrigger="bind"
        label-width="131px"
        labelAlign="right"
      >
        <uni-forms-item name="schoolId" label="就读学校" required>
          <uni-data-picker v-model="formData.schoolId" :localdata="selects?.schools" :clear-icon="false" popup-title="请选择就读学校" @change="getSelectData(0)" :map="{ text: 'name', value: 'schoolId' }"></uni-data-picker>
        </uni-forms-item>
        <uni-forms-item name="schoolDeptId" label="所在院系" required>
          <uni-data-picker v-model="formData.schoolDeptId" :localdata="selects?.dept" :clear-icon="false" popup-title="请选择所在院系" @change="getSelectData(2)" :map="{ text: 'name', value: 'id' }"></uni-data-picker>
        </uni-forms-item>
        <uni-forms-item name="majorId" label="所学专业" required>
          <uni-data-picker v-model="formData.majorId" :localdata="selects?.major" :clear-icon="false" popup-title="请选择所学专业" @change="getSelectData(2)" :map="{ text: 'nameCn', value: 'id' }"></uni-data-picker>
        </uni-forms-item>
        <uni-forms-item name="schoolClassId" label="所在班级">
          <searchComBox ref="schoolClassIdRef" v-model="formData.schoolClassId" :candidates="classList" itemTextName='schoolClassName' itemValueName='schoolClassId' labelKey='name' valueKey='id' placeholder="请选择所在班级"></searchComBox>
        </uni-forms-item>
        <uni-forms-item name="studentNo" label="学号">
          <uni-easyinput placeholder="请填写学号" v-model="formData.studentNo" :inputBorder="false" type="text"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="emergencyContactName" label="紧急联系人姓名">
          <uni-easyinput placeholder="请填写紧急联系人姓名" v-model="formData.emergencyContactName" :inputBorder="false" type="text"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="emergencyContactPhone" label="紧急联系人手机号">
          <uni-easyinput placeholder="请填写紧急联系人手机号" v-model="formData.emergencyContactPhone" :inputBorder="false" type="number"></uni-easyinput>
        </uni-forms-item>
      </uni-forms>
      <view class="f-horizon-center">
        <button type="primary" size="default" class="send-button" @click="submit">保 存</button>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, unref } from 'vue'
import { mobile } from '@/utils/validate'
import { saveStudentSimpleInfo, getStudentInfo } from '@/api/user'
// import { userStore } from '@/store/user'; const useUserStore = userStore()
import { getSchoolList, getDepartmentListBySchoolId, getMajorList } from '@/api/student'
import searchComBox from '@/components/searchCombox'

const baseInfoRef = ref()
const formData = ref({ // 必填项目
  schoolId: null,
  schoolDeptId: null,
  majorId: null,
  schoolClassId: null,
  schoolClassName: null,
  studentNo: null,
  emergencyContactName: null,
  emergencyContactPhone: null,
})

// 获取学生基本信息
const studentInfoFun = async () => {
  const { data } = await getStudentInfo()
  // 回显
  Object.keys(data).length && Object.keys(formData.value).length && Object.keys(formData.value).forEach(key => formData.value[key] = data[key])
  // if (!formData.value?.schoolClassId && formData.value?.schoolClassName) formData.value.schoolClassId = formData.value.schoolClassName
  await getSelectData('default', true)
  await getSelectData(0, true)
  await getSelectData(1, true)
  await getSelectData(2, true)
}
studentInfoFun()

// // 下拉列表 
const selects = ref({})
const classList = ref([])
const getSelectData = async (type = 'default', init = false) => { // type: 0院系|1专业|2班级
  const params = { ...(type !== 'default' && { type }) }
  // 查院系用 schoolId 查班级用 parentId
  if (type === 0) {
    if (!formData.value?.schoolId) return
    params.schoolId = formData.value.schoolId
  }
  if (type === 2) {
    if (!formData.value?.schoolId && !formData.value?.schoolDeptId) return
    if (formData.value?.schoolId) params.schoolId = formData.value.schoolId
    if (formData.value?.schoolDeptId) params.parentId = formData.value.schoolDeptId
  }
  const api = {
    default: getSchoolList,
    0: getDepartmentListBySchoolId,
    1: getMajorList,
    2: getDepartmentListBySchoolId,
  }
  const res = await api[type](params)
  if (type === 'default') {
    selects.value.schools = res?.data?.length ? res.data : []
  }
  if (type === 0) {
    if (!init) {
      formData.value.schoolDeptId = null
      formData.value.schoolClassId = null
    }
    selects.value.dept = res?.data?.length ? res.data : []
  }
  if (type === 1) {
    selects.value.major = res?.data?.length ? res.data : []
  }
  if (type === 2) {
    if (!init) formData.value.schoolClassId = null
    classList.value = res?.data?.length ? res.data : []
    schoolClassIdRef.value && schoolClassIdRef.value.setLabel()
  }
}

const formRules = {
  phone: mobile,
  schoolId:{
		rules: [{required: true, errorMessage: '请选择就读学校' }]
	},
  schoolDeptId:{
		rules: [{required: true, errorMessage: '请选择所在院系' }]
	},
  majorId: {
		rules: [{required: true, errorMessage: '请填写所在专业' }]
	}
}

const schoolClassIdRef = ref()
const submit = async () => {
  const validate = await unref(baseInfoRef).validate()
  if (!validate) return uni.showToast({ title: '请将信息补充完整', icon: 'none' })
  let params = {...formData.value}

  const schoolClassObj = schoolClassIdRef.value?.getValue()
  params = { ...params, ...schoolClassObj }

  try {
    await saveStudentSimpleInfo(params)
    uni.showToast({
			icon: 'success',
			title: '保存成功'
		})
		setTimeout(() => {
      uni.navigateBack({
        delta: 1
      })
    }, 1000)
  } catch (err) {
    uni.showToast({ title: err?.msg || '保存失败', icon: 'none' })
  }
}

</script>

<style lang="scss" scoped>
.scrollBox {
  width: 100vw;
  // height: 100vh;
  height: calc(100vh - 30rpx);
  margin-bottom: 30rpx;
}
.content {
  padding: 30rpx;
}

.changeRole {
  color: var(--color-666);
  font-size: 15px;
  line-height: 26px;
  margin-bottom: 40rpx;
}
.upload-img{
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  margin: 10rpx;
}
.upload-file{
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  margin: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
}
</style>