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