fix: 添加coach参数类型注解

src/App.vue

@@ -15,33 +15,51 @@ const activeMenu = computed(() => route.path)
 
         <el-sub-menu index="coach">
           <template #title>
-            <el-icon><Grid /></el-icon>
+            <el-icon>
+              <Grid />
+            </el-icon>
             <span>教练管理</span>
           </template>
           <el-menu-item index="/coach">
-            <el-icon><Link /></el-icon>
+            <el-icon>
+              <Link />
+            </el-icon>
             <span>教练列表</span>
           </el-menu-item>
+          <el-menu-item index="/addcoach">
+            <el-icon>
+              <Link />
+            </el-icon>
+            <span>教练新增</span>
+          </el-menu-item>
         </el-sub-menu>
 
         <el-sub-menu index="member">
           <template #title>
-            <el-icon><Grid /></el-icon>
+            <el-icon>
+              <Grid />
+            </el-icon>
             <span>会员管理</span>
           </template>
           <el-menu-item index="/member">
-            <el-icon><Link /></el-icon>
+            <el-icon>
+              <Link />
+            </el-icon>
             <span>会员列表</span>
           </el-menu-item>
         </el-sub-menu>
 
         <el-sub-menu index="course">
           <template #title>
-            <el-icon><Grid /></el-icon>
+            <el-icon>
+              <Grid />
+            </el-icon>
             <span>课程管理</span>
           </template>
           <el-menu-item index="/course">
-            <el-icon><Link /></el-icon>
+            <el-icon>
+              <Link />
+            </el-icon>
             <span>课程列表</span>
           </el-menu-item>
         </el-sub-menu>

src/mock/coach.js

@@ -45,3 +45,14 @@ export const getByPage = (query) => {
     const start = (page - 1) * limit
     return { total: result.length, data: result.slice(start, start + limit) }
 }
+
+// 离职
+export const quit = (id) => {
+    const target = list.find(item => item.id === id)
+    target.quitDate = new Date().toLocaleDateString()
+}
+// 复职
+export const rejoin = (id) => {
+    const target = list.find(item => item.id === id)
+    target.quitDate = null
+}

src/router/index.js

@@ -1,7 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import CoachView from '../views/CoachView.vue'
-import MemberView from '../views/MemberView.vue'
-import CourseView from '../views/CourseView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,18 +9,19 @@ const router = createRouter({
     },
     {
       path: '/coach',
-      name: 'coach',
-      component: CoachView,
+      component: ()=>import('../views/CoachView.vue'),
     },
     {
       path: '/member',
-      name: 'member',
-      component: MemberView,
+      component: ()=>import('../views/MemberView.vue'),
     },
     {
       path: '/course',
-      name: 'course',
-      component: CourseView,
+      component: ()=>import('../views/CourseView.vue'),
+    },
+    {
+      path: '/addcoach',
+      component: ()=>import('../views/AddCoachView.vue'),
     },
   ],
 })

src/views/AddCoachView.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { reactive } from 'vue'
+const coach = reactive({
+    name: " ",
+    sex: 1,
+    //avater:""
+    remark: ""
+})
+
+</script>
+
+
+<template>
+    <el-form label-width="100px" label-position="left">
+        <h2 class="title">——新增教练——</h2>
+        <el-form-item label="教练名字">
+            <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-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>取消</el-button>
+        </el-form-item>
+
+
+    </el-form>
+</template>
+
+
+<style scoped>
+.title {
+    text-align: center;
+    margin-bottom: 30px;
+    color: #333;
+}
+</style>

src/views/CoachView.vue

@@ -25,10 +25,13 @@
 
         <el-form-item>
           <el-button type="warning" native-type='submit' :icon="Search">查询</el-button>
+          <el-button type="primary" :icon="Plus" @click="$router.push('/addcoach')">新增</el-button>
+
         </el-form-item>
       </el-form>
     </el-header>
-    <el-main><!-- 表单 -->
+    <el-main>
+      <!-- 表单 -->
       <el-table border :data="coachList">
         <el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod"></el-table-column>
         <el-table-column prop="name" label="教练名字" width="100" align="center"></el-table-column>
@@ -74,8 +77,9 @@
         <!-- 操作 -->
         <el-table-column label="操作" width="120">
           <template #default="scope">
-            <el-button :icon="Delete" type="danger" size="small" v-if="scope.row.quitDate">删除</el-button>
-            <el-button :icon="Mug" type="warning" size="small" v-else>复职</el-button>
+            <el-button :icon="Delete" type="danger" size="small" v-if="scope.row.quitDate"
+              @click="rejoinHandler(scope.row)">复职</el-button>
+            <el-button :icon="Mug" type="warning" size="small" v-else @click="quitHandler(scope.row)">离职</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -93,8 +97,9 @@
 
 
 <script lang="ts" setup>
-import { getByPage } from '@/mock/coach';
-import { Delete, Mug, Search } from '@element-plus/icons-vue';
+import { getByPage, quit, rejoin } from '@/mock/coach';
+import { Delete, Mug, Plus, Search } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import { reactive, ref, onMounted, shallowRef } from 'vue';
 
 const queryModel = reactive({
@@ -129,6 +134,27 @@ const indexMethod = (index: number) => {
   return (pageInfo.page - 1) * pageInfo.limit + index + 1;
 }
 
+// 离职
+const quitHandler = (coach: any) => {
+  ElMessageBox.confirm(`你确认要让教练 "${coach.name}" 离职吗?`, "警告", { type: "warning" })
+    .then(() => {
+      quit(coach.id)
+      ElMessage({ type: 'success', message: `教练 "${coach.name}" 离职成功!` })
+      query()
+    })
+    .catch(() => { })
+}
+
+// 复职
+const rejoinHandler = (coach: any) => {
+  ElMessageBox.confirm(`你确认要让教练 "${coach.name}" 复职吗?`, "警告", { type: "warning" })
+    .then(() => {
+      rejoin(coach.id)
+      ElMessage({ type: 'success', message: `教练 "${coach.name}" 复职成功!` })
+      query()
+    })
+    .catch(() => { })
+}
 </script>