Compare commits
No commits in common. 'f98d241c3895e057b5b5bdbeaaf19df43ff34f02' and 'b0c11f6676b1ee245db7ea30ff02485e14c91a32' have entirely different histories.
f98d241c38
...
b0c11f6676
17 changed files with 580 additions and 593 deletions
@ -1,236 +0,0 @@ |
|||||||
<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