106 lines
No EOL
3 KiB
Vue
106 lines
No EOL
3 KiB
Vue
<script setup>
|
||
import { ElMessage } from 'element-plus'
|
||
import { reactive, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { add } from '../mock/coach.js'
|
||
import { Plus } from '@element-plus/icons-vue'
|
||
|
||
const router = useRouter()
|
||
const formRef = ref(null)
|
||
|
||
const coach = reactive({
|
||
name: " ",
|
||
sex: 1,
|
||
avatar: "",
|
||
remark: ""
|
||
})
|
||
const rules = {
|
||
name: [
|
||
{ required: true, message: "教练名字不能为空", trigger: "blur" },
|
||
{ min: 2, max: 20, message: "教练名字长度 2-20", trigger: "blur" }
|
||
]
|
||
}
|
||
const addHandler = async () => {
|
||
await formRef.value.validate()
|
||
|
||
add(coach)
|
||
|
||
ElMessage({ type: "success", message: `教练 "${coach.name}" 添加成功` })
|
||
|
||
router.replace("/coach")
|
||
}
|
||
const uploadChangeHandler = (file, fileList) => {
|
||
if (fileList.length > 1) { fileList.shift() }
|
||
const reader = new FileReader()
|
||
reader.onload = e => {
|
||
coach.avatar = e.target.result
|
||
}
|
||
reader.readAsDataURL(file.raw)
|
||
}
|
||
|
||
</script>
|
||
|
||
|
||
<template>
|
||
<el-form label-width="100px" label-position="left" ref="formRef" :model="coach" :rules="rules">
|
||
<h2 class="title">——新增教练——</h2>
|
||
<el-form-item label="教练名字" prop="name">
|
||
<el-input placeholder="请输入.." v-model.trim="coach.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="性别：">
|
||
<el-radio-group v-model="coach.sex">
|
||
<el-radio :value="1">男</el-radio>
|
||
<el-radio :value="2">女</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="头像">
|
||
<el-upload class="avatar-uploader" action="" :auto-upload="false" list-type="picture-card"
|
||
:on-change="uploadChangeHandler">
|
||
<el-icon class="avatar-uploader-icon">
|
||
<Plus />
|
||
</el-icon>
|
||
<template #tip>
|
||
<div style="color: red;">提示：上传 300*300 的 png/jp(e)g 图片</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input v-model.trim="coach.remark" type="textarea" :rows="5" placeholder="请输入教练备注..."></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="addHandler">确定</el-button>
|
||
<el-button>取消</el-button>
|
||
</el-form-item>
|
||
|
||
|
||
</el-form>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.title {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
color: rgb(196, 86, 86);
|
||
}
|
||
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed var(--el-border-color);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: var(--el-transition-duration-fast);
|
||
}
|
||
|
||
.avatar-uploader .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;
|
||
}
|
||
</style> |