ww
3 months ago
parent
b7ce5c3eed
commit
742482eabc
17 changed files with 593 additions and 580 deletions
@ -0,0 +1,236 @@ |
|||||||
|
<script setup> |
||||||
|
import { ref } from 'vue' |
||||||
|
import { stuListService, updateStuService } from '@/api/user/stud' |
||||||
|
import { tool, client } from '@/utils/alioss.js' |
||||||
|
import { ElMessage } from 'element-plus' |
||||||
|
const drawer = ref(false) |
||||||
|
const formLabelWidth = '80px' |
||||||
|
const emit = defineEmits(['success']) |
||||||
|
const imgUrl = ref() |
||||||
|
const formModel = ref({ |
||||||
|
icon: '', |
||||||
|
number: '', |
||||||
|
name: '', |
||||||
|
sex: '', |
||||||
|
nickName: '', |
||||||
|
username: '', |
||||||
|
major: '', |
||||||
|
yearAge: '', |
||||||
|
createTime: '', |
||||||
|
}) |
||||||
|
|
||||||
|
formModel.value.sex === '男' ? 0 : 1 |
||||||
|
const open = async (row) => { |
||||||
|
drawer.value = true |
||||||
|
await stuListService(row.id).then((res) => { |
||||||
|
formModel.value = res.data |
||||||
|
imgUrl.value = formModel.value.icon |
||||||
|
// console.log(formModel.value.icon, 'defauleForm.value') |
||||||
|
}) |
||||||
|
} |
||||||
|
const beforeUpload = (file) => { |
||||||
|
const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'] |
||||||
|
if (!validImageTypes.includes(file.type)) { |
||||||
|
ElMessage.error('请上传图片') |
||||||
|
return false |
||||||
|
} |
||||||
|
return true |
||||||
|
} |
||||||
|
const upload = async (option) => { |
||||||
|
const res = await tool.oss.upload(option.file) |
||||||
|
// console.log(res, 'res') |
||||||
|
formModel.value.icon = res.url |
||||||
|
imgUrl.value = formModel.value.icon |
||||||
|
} |
||||||
|
const formRef = ref(null) |
||||||
|
|
||||||
|
//校验 |
||||||
|
const rules = { |
||||||
|
number: [ |
||||||
|
{ required: true, message: '请输入学号', trigger: 'blur' }, |
||||||
|
{ min: 2, max: 20, message: '长度在2-20之间', trigger: 'blur' }, |
||||||
|
], |
||||||
|
name: [ |
||||||
|
{ required: true, message: '请输入姓名', trigger: 'blur' }, |
||||||
|
{ min: 2, max: 5, message: '长度在2-5之间', trigger: 'blur' }, |
||||||
|
], |
||||||
|
sex: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: '请选择性别', |
||||||
|
trigger: 'change', |
||||||
|
}, |
||||||
|
], |
||||||
|
nickName: [ |
||||||
|
{ |
||||||
|
message: '请输入昵称', |
||||||
|
trigger: 'blur', |
||||||
|
}, |
||||||
|
], |
||||||
|
username: [{ required: true }], |
||||||
|
createTime: [{ required: true }], |
||||||
|
major: [ |
||||||
|
{ required: true, message: '专业不能为空', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
min: 2, |
||||||
|
max: 20, |
||||||
|
message: '职位名称至少2个字符最多20个字符', |
||||||
|
trigger: 'blur', |
||||||
|
}, |
||||||
|
], |
||||||
|
yearAge: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
trigger: 'change', |
||||||
|
message: '请选择入学年份', |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
|
||||||
|
function formatDate(yearAge) { |
||||||
|
return new Date(yearAge).toISOString() |
||||||
|
} |
||||||
|
//提交 |
||||||
|
const onSubmit = async () => { |
||||||
|
await formRef.value.validate() |
||||||
|
console.log(formModel.value, 'form') |
||||||
|
await await updateStuService({ |
||||||
|
id: formModel.value.id, |
||||||
|
userId: formModel.value.userId, |
||||||
|
icon: formModel.value.icon, |
||||||
|
number: formModel.value.number, |
||||||
|
name: formModel.value.name, |
||||||
|
sex: formModel.value.sex, |
||||||
|
nickName: formModel.value.nickName, |
||||||
|
major: formModel.value.major, |
||||||
|
// yearAge: formModel.value.yearAge, |
||||||
|
}).then(() => { |
||||||
|
ElMessage.success('修改成功') |
||||||
|
drawer.value = false |
||||||
|
// console.log('aa') |
||||||
|
emit('success', 'edit') |
||||||
|
// console.log(form.value, 'aaaa') |
||||||
|
// res.value = userStore.getUserInfo() |
||||||
|
// emit('getInfo', res.value) |
||||||
|
// dialog.value = false |
||||||
|
}) |
||||||
|
} |
||||||
|
const onCancel = () => { |
||||||
|
drawer.value = false |
||||||
|
} |
||||||
|
defineExpose({ |
||||||
|
open, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<template> |
||||||
|
<el-drawer v-model="drawer" title="编辑信息" style=""> |
||||||
|
<el-form |
||||||
|
:model="formModel" |
||||||
|
:rules="rules" |
||||||
|
ref="formRef" |
||||||
|
:label-width="formLabelWidth" |
||||||
|
> |
||||||
|
<el-form-item label="头像" prop="icon"> |
||||||
|
<el-upload |
||||||
|
v-model="formModel.icon" |
||||||
|
class="avatar-uploader" |
||||||
|
:http-request="upload" |
||||||
|
:show-file-list="false" |
||||||
|
:before-upload="beforeUpload" |
||||||
|
> |
||||||
|
<img v-if="imgUrl" :src="imgUrl" class="avatar" /> |
||||||
|
<!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> --> |
||||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
||||||
|
<template #tip> |
||||||
|
<div class="el-upload__tip">图片文件要为jpg/png格式，小于500kb</div> |
||||||
|
</template> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="学号" prop="number"> |
||||||
|
<el-input v-model="formModel.number" placeholder="请输入学号" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="姓名" prop="name"> |
||||||
|
<el-input v-model="formModel.name" placeholder="请输入姓名" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="性别" prop="sex"> |
||||||
|
<el-radio-group v-model="formModel.sex"> |
||||||
|
<el-radio value="男">男</el-radio> |
||||||
|
<el-radio value="女">女</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="用户名" prop="userName"> |
||||||
|
<el-input v-model="formModel.username" readonly /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="昵称" prop="nickName"> |
||||||
|
<el-input v-model="formModel.nickName" placeholder="请输入昵称" /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="专业" prop="major"> |
||||||
|
<el-input v-model="formModel.major" placeholder="请输入专业" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="入学年分" prop="yearAge"> |
||||||
|
<el-date-picker |
||||||
|
v-model="formModel.yearAge" |
||||||
|
type="date" |
||||||
|
placeholder="请选择入学年份" |
||||||
|
:size="small" |
||||||
|
style="width: 100%" |
||||||
|
format="YYYY/MM/DD" |
||||||
|
value-format="YYYY-MM-DD" |
||||||
|
/> |
||||||
|
<!-- <el-date-picker |
||||||
|
v-model="formModel.yearAge" |
||||||
|
type="datetime" |
||||||
|
placeholder="Pick a Date" |
||||||
|
format="YYYY/MM/DD hh:mm:ss" |
||||||
|
value-format="YYYY-MM-DDThh:mm:ss" |
||||||
|
/> --> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="创建时间" prop="createTime"> |
||||||
|
<el-input v-model="formModel.createTime" readonly /> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="footer"> |
||||||
|
<el-button @click="onCancel">取消</el-button> |
||||||
|
<el-button type="primary" @click="onSubmit">确认</el-button> |
||||||
|
</div> |
||||||
|
</el-drawer> |
||||||
|
</template> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.avatar-uploader { |
||||||
|
:deep() { |
||||||
|
.avatar { |
||||||
|
width: 178px; |
||||||
|
height: 178px; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.el-upload { |
||||||
|
border: 1px dashed var(--el-border-color); |
||||||
|
border-radius: 6px; |
||||||
|
cursor: pointer; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
transition: var(--el-transition-duration-fast); |
||||||
|
} |
||||||
|
|
||||||
|
.el-upload:hover { |
||||||
|
border-color: var(--el-color-primary); |
||||||
|
} |
||||||
|
|
||||||
|
.el-icon.avatar-uploader-icon { |
||||||
|
font-size: 28px; |
||||||
|
color: #8c939d; |
||||||
|
width: 178px; |
||||||
|
height: 178px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.footer { |
||||||
|
display: flex; |
||||||
|
justify-content: end; |
||||||
|
align-items: center; |
||||||
|
margin-top: 100px; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue