361 lines
9.2 KiB
Vue
361 lines
9.2 KiB
Vue
|
<template>
|
|||
|
|
<div class="personal-info">
|
|||
|
|
<PageHeader
|
|||
|
|
title="个人信息"
|
|||
|
|
:is-back="true"
|
|||
|
|
:border-bottom="false"
|
|||
|
|
:background="headerBackground"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div class="content-wrapper">
|
|||
|
|
<div class="form-container">
|
|||
|
|
<div class="form-item">
|
|||
|
|
<div class="form-label">头像</div>
|
|||
|
|
<div class="form-value">
|
|||
|
|
<image
|
|||
|
|
class="avatar"
|
|||
|
|
:src="teacherInfo.avatar || '@/static/notes/default-avatar.png'"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
></image>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-item">
|
|||
|
|
<div class="form-label">姓名</div>
|
|||
|
|
<div class="form-value">
|
|||
|
|
<u-input
|
|||
|
|
v-model="teacherInfo.name"
|
|||
|
|
:border="false"
|
|||
|
|
placeholder="请输入姓名"
|
|||
|
|
:clearable="false"
|
|||
|
|
:custom-style="{ textAlign: 'right' }"
|
|||
|
|
></u-input>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-merge">
|
|||
|
|
<div class="form-item-merge">
|
|||
|
|
<div class="form-label">所属学校</div>
|
|||
|
|
<div class="form-value">
|
|||
|
|
<u-input
|
|||
|
|
v-model="teacherInfo.schoolName"
|
|||
|
|
:border="false"
|
|||
|
|
placeholder="请输入学校名称"
|
|||
|
|
:clearable="false"
|
|||
|
|
:custom-style="{ textAlign: 'right' }"
|
|||
|
|
:disabled="true"
|
|||
|
|
></u-input>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="line" style="height: 1px"></div>
|
|||
|
|
<div class="form-item-merge">
|
|||
|
|
<div class="form-label">学院</div>
|
|||
|
|
<div class="form-value" @click="showCollegePicker = true">
|
|||
|
|
{{ teacherInfo.collegeName || "请选择学院" }}
|
|||
|
|
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="line" style="height: 1px"></div>
|
|||
|
|
<div class="form-item-merge">
|
|||
|
|
<div class="form-label">专业</div>
|
|||
|
|
<div class="form-value" @click="showMajorPicker = true">
|
|||
|
|
{{ teacherInfo.professionalName || "请选择专业" }}
|
|||
|
|
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="line" style="height: 1px"></div>
|
|||
|
|
<div class="form-item-merge">
|
|||
|
|
<div class="form-label">岗位</div>
|
|||
|
|
<div class="form-value">
|
|||
|
|
<u-input
|
|||
|
|
v-model="teacherInfo.post"
|
|||
|
|
:border="false"
|
|||
|
|
placeholder="请输入岗位"
|
|||
|
|
:clearable="false"
|
|||
|
|
:custom-style="{ textAlign: 'right' }"
|
|||
|
|
></u-input>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="save-btn" @click="saveInfo">保存</div>
|
|||
|
|
<!-- 学院选择器 -->
|
|||
|
|
<u-select
|
|||
|
|
v-model="showCollegePicker"
|
|||
|
|
:list="collegeList"
|
|||
|
|
@confirm="confirmCollege"
|
|||
|
|
></u-select>
|
|||
|
|
|
|||
|
|
<!-- 专业选择器 -->
|
|||
|
|
<u-select
|
|||
|
|
v-model="showMajorPicker"
|
|||
|
|
:list="majorList"
|
|||
|
|
@confirm="confirmMajor"
|
|||
|
|
></u-select>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import PageHeader from "@/components/PageHeader.vue";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "PersonalInfo",
|
|||
|
|
components: {
|
|||
|
|
PageHeader,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
teacherInfo: {
|
|||
|
|
name: "",
|
|||
|
|
id: "",
|
|||
|
|
collegeName: "",
|
|||
|
|
professionalName: "",
|
|||
|
|
post: "",
|
|||
|
|
collegeManagementId: "",
|
|||
|
|
professionalManagementId: "",
|
|||
|
|
schoolName: ""
|
|||
|
|
},
|
|||
|
|
headerBackground: {
|
|||
|
|
background: "transparent",
|
|||
|
|
},
|
|||
|
|
showCollegePicker: false,
|
|||
|
|
showMajorPicker: false,
|
|||
|
|
collegeList: [],
|
|||
|
|
majorList: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
// 从vuex获取教师信息
|
|||
|
|
const info = this.vuex_teacherInfo || {};
|
|||
|
|
this.teacherInfo = {
|
|||
|
|
...info,
|
|||
|
|
schoolName: "江西新能源科技职业技术学院",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.getSchoolInfo();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取学院和专业信息
|
|||
|
|
getSchoolInfo() {
|
|||
|
|
this.$u.api.getData().then((res) => {
|
|||
|
|
if (res.succeed && res.data) {
|
|||
|
|
this.handleSchoolInfo(res);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 处理获取的接口数据
|
|||
|
|
handleSchoolInfo(res) {
|
|||
|
|
// 处理学院信息
|
|||
|
|
if (res.data && res.data.length > 0) {
|
|||
|
|
// 设置学院列表
|
|||
|
|
this.collegeList = res.data.map((item) => ({
|
|||
|
|
value: item.value,
|
|||
|
|
label: item.label,
|
|||
|
|
}));
|
|||
|
|
|
|||
|
|
// 设置初始专业列表为第一个学院的专业
|
|||
|
|
if (res.data[0].children && res.data[0].children.length > 0) {
|
|||
|
|
this.majorList = res.data[0].children;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果已有选择的学院，则设置对应的专业列表
|
|||
|
|
if (this.teacherInfo.collegeName) {
|
|||
|
|
const selectedCollege = res.data.find(
|
|||
|
|
(item) => item.label === this.teacherInfo.collegeName
|
|||
|
|
);
|
|||
|
|
if (selectedCollege && selectedCollege.children) {
|
|||
|
|
this.majorList = selectedCollege.children;
|
|||
|
|
|
|||
|
|
// 如果没有collegeManagementId，则设置它
|
|||
|
|
if (!this.teacherInfo.collegeManagementId) {
|
|||
|
|
this.teacherInfo.collegeManagementId = selectedCollege.value;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果有专业名称但没有专业ID，则设置专业ID
|
|||
|
|
if (this.teacherInfo.professionalName && !this.teacherInfo.professionalManagementId) {
|
|||
|
|
const selectedMajor = selectedCollege.children.find(
|
|||
|
|
(item) => item.label === this.teacherInfo.professionalName
|
|||
|
|
);
|
|||
|
|
if (selectedMajor) {
|
|||
|
|
this.teacherInfo.professionalManagementId = selectedMajor.value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 确认学院选择
|
|||
|
|
confirmCollege(e) {
|
|||
|
|
this.teacherInfo.collegeName = e[0].label;
|
|||
|
|
this.teacherInfo.collegeManagementId = e[0].value;
|
|||
|
|
|
|||
|
|
// 根据选中的学院更新专业列表
|
|||
|
|
this.$u.api.getData().then((res) => {
|
|||
|
|
if (res.succeed && res.data) {
|
|||
|
|
const selectedCollege = res.data.find(
|
|||
|
|
(item) => item.label === this.teacherInfo.collegeName
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (selectedCollege && selectedCollege.children) {
|
|||
|
|
this.majorList = selectedCollege.children;
|
|||
|
|
// 清空之前选择的专业
|
|||
|
|
this.teacherInfo.professionalName = "";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 确认专业选择
|
|||
|
|
confirmMajor(e) {
|
|||
|
|
this.teacherInfo.professionalName = e[0].label;
|
|||
|
|
this.teacherInfo.professionalManagementId = e[0].value;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 保存个人信息
|
|||
|
|
saveInfo() {
|
|||
|
|
// 表单验证
|
|||
|
|
if (!this.teacherInfo.name) {
|
|||
|
|
return this.$u.toast("请输入姓名");
|
|||
|
|
}
|
|||
|
|
if (!this.teacherInfo.schoolName) {
|
|||
|
|
return this.$u.toast("请输入学校名称");
|
|||
|
|
}
|
|||
|
|
if (!this.teacherInfo.collegeName) {
|
|||
|
|
return this.$u.toast("请选择学院");
|
|||
|
|
}
|
|||
|
|
if (!this.teacherInfo.professionalName) {
|
|||
|
|
return this.$u.toast("请选择专业");
|
|||
|
|
}
|
|||
|
|
if (!this.teacherInfo.post) {
|
|||
|
|
return this.$u.toast("请输入岗位");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$u.vuex("vuex_teacherInfo", this.teacherInfo);
|
|||
|
|
console.log("this.teacherInfo----", this.teacherInfo);
|
|||
|
|
let query = {
|
|||
|
|
...this.teacherInfo,
|
|||
|
|
schoolName: "江西新能源科技职业技术学院",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.$u.api
|
|||
|
|
.updateTeacherInfo(query)
|
|||
|
|
.then((res) => {
|
|||
|
|
this.$u.toast("保存成功");
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
}, 1500);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
this.$u.toast("保存失败，请重试");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 模拟保存成功
|
|||
|
|
this.$u.toast("保存成功");
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
}, 1500);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.personal-info {
|
|||
|
|
height: 100vh;
|
|||
|
|
background-image: url("@/static/notes/bg.png");
|
|||
|
|
background-position: center top;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100% auto;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-wrapper {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 20rpx 30rpx 60px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-container {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-top: 46rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-merge {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item-merge {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.line {
|
|||
|
|
width: 90%;
|
|||
|
|
height: 1px;
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
width: 160rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-value {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 27rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
flex: 1;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar {
|
|||
|
|
width: 52rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.save-btn {
|
|||
|
|
width: 90%;
|
|||
|
|
height: 90rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #fff;
|
|||
|
|
background: #4f6aff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
margin: 60rpx auto;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
display: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|