feat: 添加新增教练功能

src/views/AddCoachView.vue

@@ -1,19 +1,35 @@
 <script setup>
-import { reactive } from 'vue'
+import { ElMessage } from 'element-plus';
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router';
+import { add } from '@/mock/coach';
+import { Plus } from '@element-plus/icons-vue';
+const router = useRouter()
+const formRef = ref(null)
 const coach = reactive({
     name: " ",
     sex: 1,
-    //avater:""
+    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")
+}
 </script>
-
-
 <template>
-    <el-form label-width="100px" label-position="left">
+    <el-form label-width="100px" label-position="left" ref="formRef" :model="coach" :rules="rules">
         <h2 class="title">——新增教练——</h2>
-        <el-form-item label="教练名字">
+        <el-form-item label="教练名字" prop="name">
             <el-input placeholder="请输入.." v-model.trim="coach.name"></el-input>
         </el-form-item>
         <el-form-item label="性别：">
@@ -22,23 +38,28 @@ const coach = reactive({
                 <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">
+                <el-icon class="avatar-uploader-icon">
+                    <Plus />
+                </el-icon>
+                <template #tip>
+                    <div style="color:red;">提示:上传300*300的png/jpg图片</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">确定</el-button>
+            <el-button type="primary" @click="addHandler">确定</el-button>
             <el-button>取消</el-button>
         </el-form-item>
-
-
-    </el-form>
-</template>
-
-
+    </el-form></template>
 <style scoped>
 .title {
     text-align: center;
     margin-bottom: 30px;
-    color: #333;
+    color: rgb(196, 86, 86);
 }
-</style>
+</style>