aaaaaa/stl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: avator改为avatar

Browse source
This commit is contained in:
hyql 2026-07-09 14:28:31 +08:00
commit 103ce228f0
3 changed files with 84 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/mock/coach.js
View file

@ -1,34 +1,34 @@
const list = [ const list = [
{"id":1,"name":"铁娃","sex":1,"avator":"/images/coach/0f1beb11-c37c-4a1d-a950-8c5de8f53629.jpg!w1024_new_small_1","remark":"前端工程师，擅长React和Vue","quitDate":"2024-12-15"}, {"id":1,"name":"铁娃","sex":1,"avatar":"/images/coach/0f1beb11-c37c-4a1d-a950-8c5de8f53629.jpg!w1024_new_small_1","remark":"前端工程师，擅长React和Vue","quitDate":"2024-12-15"},
{"id":2,"name":"小明","sex":1,"avator":"/images/coach/b0e10ab6f517995d.webp","remark":"产品经理，负责用户增长","quitDate":null}, {"id":2,"name":"小明","sex":1,"avatar":"/images/coach/b0e10ab6f517995d.webp","remark":"产品经理，负责用户增长","quitDate":null},
{"id":3,"name":"张伟","sex":1,"avator":"/images/coach/9376.png_300.png","remark":"后端开发，Java技术栈","quitDate":"2025-01-20"}, {"id":3,"name":"张伟","sex":1,"avatar":"/images/coach/9376.png_300.png","remark":"后端开发，Java技术栈","quitDate":"2025-01-20"},
{"id":4,"name":"李娜","sex":2,"avator":"","remark":"UI设计师，专注用户体验","quitDate":null}, {"id":4,"name":"李娜","sex":2,"avatar":"","remark":"UI设计师，专注用户体验","quitDate":null},
{"id":5,"name":"王强","sex":1,"avator":"","remark":"项目经理，PMP认证","quitDate":"2024-11-08"}, {"id":5,"name":"王强","sex":1,"avatar":"","remark":"项目经理，PMP认证","quitDate":"2024-11-08"},
{"id":6,"name":"刘芳","sex":2,"avator":"","remark":"数据分析师，Python精通","quitDate":null}, {"id":6,"name":"刘芳","sex":2,"avatar":"","remark":"数据分析师，Python精通","quitDate":null},
{"id":7,"name":"陈刚","sex":1,"avator":"","remark":"运维工程师，K8s专家","quitDate":"2025-03-10"}, {"id":7,"name":"陈刚","sex":1,"avatar":"","remark":"运维工程师，K8s专家","quitDate":"2025-03-10"},
{"id":8,"name":"赵敏","sex":2,"avator":"","remark":"市场营销，擅长新媒体运营","quitDate":null}, {"id":8,"name":"赵敏","sex":2,"avatar":"","remark":"市场营销，擅长新媒体运营","quitDate":null},
{"id":9,"name":"周涛","sex":1,"avator":"","remark":"测试工程师，自动化测试","quitDate":"2024-10-25"}, {"id":9,"name":"周涛","sex":1,"avatar":"","remark":"测试工程师，自动化测试","quitDate":"2024-10-25"},
{"id":10,"name":"吴雪","sex":2,"avator":"","remark":"人力资源，招聘经验丰富","quitDate":null}, {"id":10,"name":"吴雪","sex":2,"avatar":"","remark":"人力资源，招聘经验丰富","quitDate":null},
{"id":11,"name":"孙磊","sex":1,"avator":"","remark":"算法工程师，深度学习方向","quitDate":"2025-02-14"}, {"id":11,"name":"孙磊","sex":1,"avatar":"","remark":"算法工程师，深度学习方向","quitDate":"2025-02-14"},
{"id":12,"name":"朱婷","sex":2,"avator":"","remark":"内容编辑，负责技术博客","quitDate":null}, {"id":12,"name":"朱婷","sex":2,"avatar":"","remark":"内容编辑，负责技术博客","quitDate":null},
{"id":13,"name":"林浩","sex":1,"avator":"","remark":"架构师，分布式系统专家","quitDate":"2024-09-30"}, {"id":13,"name":"林浩","sex":1,"avatar":"","remark":"架构师，分布式系统专家","quitDate":"2024-09-30"},
{"id":14,"name":"杨丽","sex":2,"avator":"","remark":"客户成功经理，客户满意度95%","quitDate":null}, {"id":14,"name":"杨丽","sex":2,"avatar":"","remark":"客户成功经理，客户满意度95%","quitDate":null},
{"id":15,"name":"黄勇","sex":1,"avator":"","remark":"全栈工程师，Node.js+Vue","quitDate":"2025-04-05"}, {"id":15,"name":"黄勇","sex":1,"avatar":"","remark":"全栈工程师，Node.js+Vue","quitDate":"2025-04-05"},
{"id":16,"name":"徐静","sex":2,"avator":"","remark":"产品设计师，Figma熟练","quitDate":null}, {"id":16,"name":"徐静","sex":2,"avatar":"","remark":"产品设计师，Figma熟练","quitDate":null},
{"id":17,"name":"马超","sex":1,"avator":"","remark":"DevOps工程师，CI/CD流程优化","quitDate":"2024-08-18"}, {"id":17,"name":"马超","sex":1,"avatar":"","remark":"DevOps工程师，CI/CD流程优化","quitDate":"2024-08-18"},
{"id":18,"name":"罗娟","sex":2,"avator":"","remark":"财务分析师，CPA持证","quitDate":null}, {"id":18,"name":"罗娟","sex":2,"avatar":"","remark":"财务分析师，CPA持证","quitDate":null},
{"id":19,"name":"梁鑫","sex":1,"avator":"","remark":"移动端开发，iOS和Android","quitDate":"2025-05-22"}, {"id":19,"name":"梁鑫","sex":1,"avatar":"","remark":"移动端开发，iOS和Android","quitDate":"2025-05-22"},
{"id":20,"name":"宋雨","sex":2,"avator":"","remark":"技术文档工程师，写作能力强","quitDate":null}, {"id":20,"name":"宋雨","sex":2,"avatar":"","remark":"技术文档工程师，写作能力强","quitDate":null},
{"id":21,"name":"韩冰","sex":1,"avator":"","remark":"安全工程师，渗透测试专家","quitDate":"2024-07-12"}, {"id":21,"name":"韩冰","sex":1,"avatar":"","remark":"安全工程师，渗透测试专家","quitDate":"2024-07-12"},
{"id":22,"name":"唐瑶","sex":2,"avator":"","remark":"商务拓展，BD经验丰富","quitDate":null}, {"id":22,"name":"唐瑶","sex":2,"avatar":"","remark":"商务拓展，BD经验丰富","quitDate":null},
{"id":23,"name":"冯凯","sex":1,"avator":"","remark":"大数据工程师，Spark和Flink","quitDate":"2025-06-01"}, {"id":23,"name":"冯凯","sex":1,"avatar":"","remark":"大数据工程师，Spark和Flink","quitDate":"2025-06-01"},
{"id":24,"name":"邓颖","sex":2,"avator":"","remark":"质量保证，ISO9001内审员","quitDate":null}, {"id":24,"name":"邓颖","sex":2,"avatar":"","remark":"质量保证，ISO9001内审员","quitDate":null},
{"id":25,"name":"曹鹏","sex":1,"avator":"","remark":"嵌入式开发，C/C++精通","quitDate":"2024-06-28"}, {"id":25,"name":"曹鹏","sex":1,"avatar":"","remark":"嵌入式开发，C/C++精通","quitDate":"2024-06-28"},
{"id":26,"name":"彭丹","sex":2,"avator":"","remark":"用户体验研究员，数据驱动设计","quitDate":null}, {"id":26,"name":"彭丹","sex":2,"avatar":"","remark":"用户体验研究员，数据驱动设计","quitDate":null},
{"id":27,"name":"曾毅","sex":1,"avator":"","remark":"技术总监，10年以上管理经验","quitDate":"2025-07-05"}, {"id":27,"name":"曾毅","sex":1,"avatar":"","remark":"技术总监，10年以上管理经验","quitDate":"2025-07-05"},
{"id":28,"name":"田甜","sex":2,"avator":"","remark":"社交媒体运营，粉丝10万+","quitDate":null}, {"id":28,"name":"田甜","sex":2,"avatar":"","remark":"社交媒体运营，粉丝10万+","quitDate":null},
{"id":29,"name":"潘杰","sex":1,"avator":"","remark":"区块链工程师，Web3探索者","quitDate":"2024-05-15"}, {"id":29,"name":"潘杰","sex":1,"avatar":"","remark":"区块链工程师，Web3探索者","quitDate":"2024-05-15"},
{"id":30,"name":"袁梦","sex":2,"avator":"","remark":"法务专员，合同审核经验丰富","quitDate":null} {"id":30,"name":"袁梦","sex":2,"avatar":"","remark":"法务专员，合同审核经验丰富","quitDate":null}
] ]

61
src/views/AddCoachView.vue
View file

@ -1,11 +1,13 @@
<script setup> <script setup>
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router'
import { add } from '@/mock/coach'; import { add } from '../mock/coach.js'
import { Plus } from '@element-plus/icons-vue'; import { Plus } from '@element-plus/icons-vue'
const router = useRouter() const router = useRouter()
const formRef = ref(null) const formRef = ref(null)
const coach = reactive({ const coach = reactive({
name: " ", name: " ",
sex: 1, sex: 1,
@ -18,14 +20,27 @@ const rules = {
{ min: 2, max: 20, message: "教练名字长度 2-20", trigger: "blur" } { min: 2, max: 20, message: "教练名字长度 2-20", trigger: "blur" }
] ]
} }
const addHandler = async () => { const addHandler = async () => {
await formRef.value.validate() await formRef.value.validate()
add(coach) add(coach)
ElMessage({ type: "success", message: `教练"${coach.name}"添加成功` })
ElMessage({ type: "success", message: `教练 "${coach.name}" 添加成功` })
router.replace("/coach") 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> </script>
<template> <template>
<el-form label-width="100px" label-position="left" ref="formRef" :model="coach" :rules="rules"> <el-form label-width="100px" label-position="left" ref="formRef" :model="coach" :rules="rules">
<h2 class="title">——新增教练——</h2> <h2 class="title">——新增教练——</h2>
@ -38,13 +53,14 @@ const addHandler = async () => {
<el-radio :value="2">女</el-radio> <el-radio :value="2">女</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="头像: "> <el-form-item label="头像">
<el-upload class="avatar-uploader" action="" :auto-upload="false" list-type="picture-card"> <el-upload class="avatar-uploader" action="" :auto-upload="false" list-type="picture-card"
:on-change="uploadChangeHandler">
<el-icon class="avatar-uploader-icon"> <el-icon class="avatar-uploader-icon">
<Plus /> <Plus />
</el-icon> </el-icon>
<template #tip> <template #tip>
<div style="color:red;">提示:上传300*300的png/jpg图片</div> <div style="color: red;">提示：上传 300*300 的 png/jp(e)g 图片</div>
</template> </template>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
@ -55,11 +71,36 @@ const addHandler = async () => {
<el-button type="primary" @click="addHandler">确定</el-button> <el-button type="primary" @click="addHandler">确定</el-button>
<el-button>取消</el-button> <el-button>取消</el-button>
</el-form-item> </el-form-item>
</el-form></template>
</el-form>
</template>
<style scoped> <style scoped>
.title { .title {
text-align: center; text-align: center;
margin-bottom: 30px; margin-bottom: 30px;
color: rgb(196, 86, 86); 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> </style>

6
src/views/CoachView.vue
View file

@ -62,12 +62,12 @@
<el-table-column label="头像" width="80"> <el-table-column label="头像" width="80">
<template #default="scope"> <template #default="scope">
<el-popover v-if="scope.row.avator" placement="right-start" :title="scope.row.name" trigger="click"> <el-popover v-if="scope.row.avatar" placement="right-start" :title="scope.row.name" trigger="click">
<el-image :src="scope.row.avator"></el-image> <el-image :src="scope.row.avatar"></el-image>
<template #reference> <template #reference>
<el-button type="primary" link>查看</el-button> <el-button type="primary" link>查看</el-button>
<!-- <span>查看</span> --> <!-- <span>查看</span> -->
<!-- <el-avatar :size="50" :src="scope.row.avator" /> --> <!-- <el-avatar :size="50" :src="scope.row.avatar" /> -->
</template> </template>
</el-popover> </el-popover>
<span v-else>暂无</span> <span v-else>暂无</span>