From e3474cf91877c95964b0d87fe55311941e601d6b Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期四, 01 八月 2024 18:12:16 +0800
Subject: [PATCH] 创建和详情页面

---
 src/utils/request.js                     |    7 
 src/views/home/index.vue                 |    5 
 src/views/student/components/create.vue  |  157 ++++++++
 src/api/student.js                       |  289 ++++++++++++++++
 src/utils/graphql.js                     |   10 
 package.json                             |    1 
 src/views/student/index.vue              |  139 +++++--
 src/router/index.js                      |  248 +++++++------
 src/views/student/components/details.vue |  185 ++++++++++
 9 files changed, 874 insertions(+), 167 deletions(-)

diff --git a/package.json b/package.json
index b2b8d29..186f2b0 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "cors": "^2.8.5",
+    "cos-js-sdk-v5": "^1.8.3",
     "element-ui": "2.13.2",
     "graphql": "^16.9.0",
     "graphql-tag": "^2.12.6",
diff --git a/src/api/student.js b/src/api/student.js
index b82eddd..739105b 100644
--- a/src/api/student.js
+++ b/src/api/student.js
@@ -46,3 +46,292 @@
     variables: params,
   });
 }
+
+export function getNotTeam(params) {
+  return apolloClient.query({
+    query: gql`
+      query vars($staffId: Int!, $keyword: String, $pageIn: PageIn!) {
+        findPlayerNotTeam(
+          staffId: $staffId
+          keyword: $keyword
+          pageIn: $pageIn
+        ) {
+          ls {
+            id
+            name
+            gender
+            mobile
+            user {
+              id
+              name
+              wxOaOpenId
+            }
+            accs {
+              id
+              voucher {
+                id
+                voucherType
+                name
+              }
+              qty
+              freezeQty
+              amt
+              beginDate
+              endDate
+              modifyTime
+            }
+          }
+          pageOut {
+            total
+            index
+            size
+          }
+        }
+      }
+    `,
+    variables: params,
+  });
+}
+
+export function getRenew(params) {
+  return apolloClient.query({
+    query: gql`
+      query vars($staffId: Int!, $keyword: String, $pageIn: PageIn!) {
+        findPlayerRenew(staffId: $staffId, keyword: $keyword, pageIn: $pageIn) {
+          ls {
+            id
+            name
+            gender
+            mobile
+            user {
+              id
+              name
+              wxOaOpenId
+            }
+            accs {
+              id
+              voucher {
+                id
+                voucherType
+                name
+              }
+              qty
+              freezeQty
+              amt
+              beginDate
+              endDate
+              modifyTime
+            }
+          }
+          pageOut {
+            total
+            index
+            size
+          }
+        }
+      }
+    `,
+    variables: params,
+  });
+}
+
+export function getExpire(params) {
+  return apolloClient.query({
+    query: gql`
+      query vars($staffId: Int!, $keyword: String, $pageIn: PageIn!) {
+        findPlayerExpire(
+          staffId: $staffId
+          keyword: $keyword
+          pageIn: $pageIn
+        ) {
+          ls {
+            id
+            name
+            gender
+            mobile
+            user {
+              id
+              name
+              wxOaOpenId
+            }
+            accs {
+              id
+              voucher {
+                id
+                voucherType
+                name
+              }
+              qty
+              freezeQty
+              amt
+              beginDate
+              endDate
+              modifyTime
+            }
+          }
+          pageOut {
+            total
+            index
+            size
+          }
+        }
+      }
+    `,
+    variables: params,
+  });
+}
+
+export function getDeleted(params) {
+  return apolloClient.query({
+    query: gql`
+      query vars(
+        $staffId: Int!
+        $itemType: ItemType!
+        $keyword: String
+        $pageIn: PageIn!
+      ) {
+        findDeletedItem(
+          staffId: $staffId
+          itemType: $itemType
+          keyword: $keyword
+          pageIn: $pageIn
+        ) {
+          ls {
+            id
+            name
+            modifyTime
+          }
+          pageOut {
+            total
+            index
+            size
+          }
+        }
+      }
+    `,
+    variables: params,
+  });
+}
+
+export function getDetails(params) {
+  return apolloClient.query({
+    query: gql`
+      query vars($id: Int!) {
+        findPlayerDto(id: $id) {
+          id
+          orgId
+          name
+          gender
+          mobile
+          birthday
+          description
+          user {
+            id
+            name
+            mobile
+            avatars {
+              url1
+              url2
+              url3
+              origin
+              def
+              ext
+            }
+          }
+          avatars {
+            url1
+            url2
+            url3
+            origin
+            def
+            ext
+          }
+          state
+          createTime
+          createById
+          accs {
+            id
+            voucher {
+              id
+              name
+            }
+            voucherType
+            memberType
+            beginDate
+            endDate
+            qty
+            freezeQty
+            amt
+            state
+          }
+          teams {
+            id
+            name
+          }
+          saleMan {
+            id
+            name
+          }
+        }
+      }
+    `,
+    variables: params,
+  });
+}
+//鑾峰彇璇剧▼椤鹃棶
+export function getSaleMan(params) {
+  return apolloClient.query({
+    query: gql`
+      query vars($staffId: Int!, $keyword: String, $pageIn: PageIn) {
+        findStaff(staffId: $staffId, keyword: $keyword, pageIn: $pageIn) {
+          ls {
+            id
+            name
+            gender
+          }
+          pageOut {
+            total
+            index
+            size
+          }
+        }
+      }
+    `,
+    variables: params,
+  });
+}
+//鑾峰彇璇惧寘/浼氬憳鍗�
+export function getVoucher(params) {
+  return apolloClient.query({
+    query: gql`
+      query vars(
+        $orgId: Int
+        $types: [VoucherType!]!
+        $keyword: String
+        $pageIn: PageIn
+      ) {
+        findVoucherByType(
+          orgId: $orgId
+          types: $types
+          keyword: $keyword
+          pageIn: $pageIn
+        ) {
+          ls {
+            id
+            orgId
+            name
+            voucherType
+            memberType
+            qty
+          }
+          pageOut {
+            total
+            index
+            size
+          }
+        }
+      }
+    `,
+    variables: params,
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index b771c56..5a0c890 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,10 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue";
+import Router from "vue-router";
 
-Vue.use(Router)
+Vue.use(Router);
 
 /* Layout */
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -32,97 +32,106 @@
  */
 export const constantRoutes = [
   {
-    path: '/login',
-    component: () => import('@/views/login/index'),
-    hidden: true
+    path: "/login",
+    component: () => import("@/views/login/index"),
+    hidden: true,
   },
 
   {
-    path: '/404',
-    component: () => import('@/views/404'),
-    hidden: true
+    path: "/404",
+    component: () => import("@/views/404"),
+    hidden: true,
   },
 
   {
-    path: '/',
+    path: "/",
     component: Layout,
-    redirect: '/home',
-    children: [{
-      path: 'home',
-      name: 'home',
-      component: () => import('@/views/home/index'),
-      meta: { title: '棣栭〉', icon: 'dashboard' }
-    }]
-  },
-
-  {
-    path: '/educational',
-    component: Layout,
-    redirect: '/educational/student',
-    name: 'Educational',
-    meta: { title: '鏁欏姟', icon: 'el-icon-s-help' },
+    redirect: "/home",
     children: [
       {
-        path: 'student',
-        name: 'Student',
-        component: () => import('@/views/student/index'),
-        meta: { title: '瀛﹀憳', icon: 'table' }
+        path: "home",
+        name: "home",
+        component: () => import("@/views/home/index"),
+        meta: { title: "棣栭〉", icon: "dashboard" },
+      },
+    ],
+  },
+
+  {
+    path: "/educational",
+    component: Layout,
+    redirect: "/educational/student",
+    name: "Educational",
+    meta: { title: "鏁欏姟", icon: "el-icon-s-help" },
+    children: [
+      {
+        path: "student",
+        name: "Student",
+        component: () => import("@/views/student/index"),
+        meta: { title: "瀛﹀憳", icon: "table" },
       },
       {
-        path: 'class',
-        name: 'Class',
-        component: () => import('@/views/class/index'),
-        meta: { title: '鐝骇', icon: 'tree' }
+        path: "student/details",
+        name: "StudentDetails",
+        component: () => import("@/views/student/components/details.vue"),
+        meta: { title: "瀛﹀憳璇︽儏" },
+        hidden: true,
       },
       {
-        path: 'scheduleCourses',
-        name: 'ScheduleCourses',
-        component: () => import('@/views/scheduleCourses/index'),
-        meta: { title: '鎺掕', icon: 'table' }
+        path: "class",
+        name: "Class",
+        component: () => import("@/views/class/index"),
+        meta: { title: "鐝骇", icon: "tree" },
       },
       {
-        path: 'work',
-        name: 'Work',
-        component: () => import('@/views/work/index'),
-        meta: { title: '浣滀笟', icon: 'tree' }
+        path: "scheduleCourses",
+        name: "ScheduleCourses",
+        component: () => import("@/views/scheduleCourses/index"),
+        meta: { title: "鎺掕", icon: "table" },
       },
       {
-        path: 'comment',
-        name: 'Comment',
-        component: () => import('@/views/comment/index'),
-        meta: { title: '鐐硅瘎', icon: 'table' }
+        path: "work",
+        name: "Work",
+        component: () => import("@/views/work/index"),
+        meta: { title: "浣滀笟", icon: "tree" },
       },
       {
-        path: 'curriculum',
-        name: 'Curriculum',
-        component: () => import('@/views/curriculum/index'),
-        meta: { title: '璇捐〃', icon: 'tree' }
+        path: "comment",
+        name: "Comment",
+        component: () => import("@/views/comment/index"),
+        meta: { title: "鐐硅瘎", icon: "table" },
       },
       {
-        path: 'table',
-        name: 'Table',
-        component: () => import('@/views/student/index'),
-        meta: { title: '鏃ョ▼', icon: 'table' }
+        path: "curriculum",
+        name: "Curriculum",
+        component: () => import("@/views/curriculum/index"),
+        meta: { title: "璇捐〃", icon: "tree" },
       },
       {
-        path: 'development',
-        name: 'Development',
-        component: () => import('@/views/development/index'),
-        meta: { title: '鎴愰暱', icon: 'tree' }
+        path: "table",
+        name: "Table",
+        component: () => import("@/views/student/index"),
+        meta: { title: "鏃ョ▼", icon: "table" },
       },
       {
-        path: 'integral',
-        name: 'Integral',
-        component: () => import('@/views/integral/index'),
-        meta: { title: '绉垎', icon: 'tree' }
+        path: "development",
+        name: "Development",
+        component: () => import("@/views/development/index"),
+        meta: { title: "鎴愰暱", icon: "tree" },
       },
       {
-        path: 'rollCall',
-        name: 'RollCall',
-        component: () => import('@/views/rollCall/index'),
-        meta: { title: '鐐硅瘎', icon: 'tree' }
-      }
-    ]
+        path: "integral",
+        name: "Integral",
+        component: () => import("@/views/integral/index"),
+        meta: { title: "绉垎", icon: "tree" },
+      },
+      {
+        path: "rollCall",
+        name: "RollCall",
+        component: () => import("@/views/rollCall/index"),
+        meta: { title: "鐐硅瘎", icon: "tree" },
+      },
+    ],
   },
 
   // {
@@ -139,62 +148,64 @@
   // },
 
   {
-    path: '/nested',
+    path: "/nested",
     component: Layout,
-    redirect: '/nested/menu1',
-    name: 'Nested',
+    redirect: "/nested/menu1",
+    name: "Nested",
     meta: {
-      title: 'Nested',
-      icon: 'nested'
+      title: "Nested",
+      icon: "nested",
     },
     children: [
       {
-        path: 'menu1',
-        component: () => import('@/views/nested/menu1/index'), // Parent router-view
-        name: 'Menu1',
-        meta: { title: 'Menu1' },
+        path: "menu1",
+        component: () => import("@/views/nested/menu1/index"), // Parent router-view
+        name: "Menu1",
+        meta: { title: "Menu1" },
         children: [
           {
-            path: 'menu1-1',
-            component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'Menu1-1',
-            meta: { title: 'Menu1-1' }
+            path: "menu1-1",
+            component: () => import("@/views/nested/menu1/menu1-1"),
+            name: "Menu1-1",
+            meta: { title: "Menu1-1" },
           },
           {
-            path: 'menu1-2',
-            component: () => import('@/views/nested/menu1/menu1-2'),
-            name: 'Menu1-2',
-            meta: { title: 'Menu1-2' },
+            path: "menu1-2",
+            component: () => import("@/views/nested/menu1/menu1-2"),
+            name: "Menu1-2",
+            meta: { title: "Menu1-2" },
             children: [
               {
-                path: 'menu1-2-1',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-                name: 'Menu1-2-1',
-                meta: { title: 'Menu1-2-1' }
+                path: "menu1-2-1",
+                component: () =>
+                  import("@/views/nested/menu1/menu1-2/menu1-2-1"),
+                name: "Menu1-2-1",
+                meta: { title: "Menu1-2-1" },
               },
               {
-                path: 'menu1-2-2',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-                name: 'Menu1-2-2',
-                meta: { title: 'Menu1-2-2' }
-              }
-            ]
+                path: "menu1-2-2",
+                component: () =>
+                  import("@/views/nested/menu1/menu1-2/menu1-2-2"),
+                name: "Menu1-2-2",
+                meta: { title: "Menu1-2-2" },
+              },
+            ],
           },
           {
-            path: 'menu1-3',
-            component: () => import('@/views/nested/menu1/menu1-3'),
-            name: 'Menu1-3',
-            meta: { title: 'Menu1-3' }
-          }
-        ]
+            path: "menu1-3",
+            component: () => import("@/views/nested/menu1/menu1-3"),
+            name: "Menu1-3",
+            meta: { title: "Menu1-3" },
+          },
+        ],
       },
       {
-        path: 'menu2',
-        component: () => import('@/views/nested/menu2/index'),
-        name: 'Menu2',
-        meta: { title: 'menu2' }
-      }
-    ]
+        path: "menu2",
+        component: () => import("@/views/nested/menu2/index"),
+        name: "Menu2",
+        meta: { title: "menu2" },
+      },
+    ],
   },
 
   // {
@@ -209,21 +220,22 @@
   // },
 
   // 404 page must be placed at the end !!!
-  { path: '*', redirect: '/404', hidden: true }
-]
+  { path: "*", redirect: "/404", hidden: true },
+];
 
-const createRouter = () => new Router({
-  // mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
-})
+const createRouter = () =>
+  new Router({
+    // mode: 'history', // require service support
+    scrollBehavior: () => ({ y: 0 }),
+    routes: constantRoutes,
+  });
 
-const router = createRouter()
+const router = createRouter();
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
-  const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router
+  const newRouter = createRouter();
+  router.matcher = newRouter.matcher; // reset router
 }
 
-export default router
+export default router;
diff --git a/src/utils/graphql.js b/src/utils/graphql.js
index 3356605..e1d8377 100644
--- a/src/utils/graphql.js
+++ b/src/utils/graphql.js
@@ -21,9 +21,13 @@
 const middlewareLink = new ApolloLink((operation, forward) => {
   operation.setContext({
     headers: {
-      Authorization: 'eyJhbGciOiJIUzI1NiJ9.eyJleHBUaW1lIjoiMjAyNC8wNy8yNSAxMTozOSIsInVzZXJJZCI6MSwianRpIjoiZGVkZWRlMWQtYTU4MC00NDkxLWI0YzAtMjA5ODRjYTk3NmE3IiwiaWF0IjoxNzIxODcxNTYyLCJzdWIiOiJ5Y2wiLCJleHAiOjE3MjE4Nzg3NjJ9.gvEk8RHvJD7QQjr83XVwPe9msqEeVITXg3hIJRaNubI',
-      staffId: "1680",
-      playerId: '3350',
+      Authorization: JSON.parse(localStorage.getItem("user")).jwtToken,
+      // Authorization:'eyJhbGciOiJIUzI1NiJ9.eyJleHBUaW1lIjoiMjAyNC8wNy8zMSAxODoxMSIsInVzZXJJZCI6NDQsImp0aSI6ImVlMDM3NmFjLWQ5OTAtNDRkZS05YTVmLTUxYjhjMjc0YWNiOSIsImlhdCI6MTcyMjQxMzUwMSwic3ViIjoieWNsIiwiZXhwIjoxNzIyNDIwNzAxfQ.bSd0qag44dwXeJQpvryYJXEtrQ03-8MmHQWhgILGXO4',
+      staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
+      playerId:
+        JSON.parse(localStorage.getItem("user")).players.length > 0
+          ? JSON.parse(localStorage.getItem("user")).players[0].id
+          : 0,
     },
   }); //request鎷︽埅鍣�
 
diff --git a/src/utils/request.js b/src/utils/request.js
index 2fb95ac..ee21946 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -43,10 +43,9 @@
    * You can also judge the status by HTTP Status Code
    */
   response => {
-    const res = response.data
-
+    const res = response
     // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
+    if (res.status !== 200) {
       Message({
         message: res.message || 'Error',
         type: 'error',
@@ -54,7 +53,7 @@
       })
 
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      if (res.status === 50008 || res.status === 50012 || res.status === 50014) {
         // to re-login
         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
           confirmButtonText: 'Re-Login',
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index b4d1470..0824cae 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -19,12 +19,11 @@
   },
   methods: {
     getUserDate() {
-      console.log(123);
       login({
-        code: "061f951w3vnwd33iLL1w3kAvmo1f951N"
+        code: "061akYFa14JATH0EzoIa1NNVTC3akYFI"
       }
       ).then((res) => {
-       console.log(res);
+       localStorage.setItem('user',JSON.stringify(res.data))
       });
     },
   },
diff --git a/src/views/student/components/create.vue b/src/views/student/components/create.vue
new file mode 100644
index 0000000..2dc2037
--- /dev/null
+++ b/src/views/student/components/create.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="app-container">
+    <el-dialog
+      title="娣诲姞瀛﹀憳"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form ref="form" :model="createData" label-width="100px">
+        <el-form-item label="濮撳悕" style="width: 400px">
+          <el-input v-model="createData.playerName" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="鎬у埆" style="width: 400px">
+          <el-input v-model="createData.gender" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="鐢熸棩">
+          <el-date-picker
+            v-model="createData.birthday"
+            type="date"
+            placeholder="閫夋嫨鏃ユ湡"
+            size="small"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="鑱旂郴鐢佃瘽" style="width: 400px">
+          <el-input v-model="createData.mobile" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="璇惧寘/浼氬憳鍗�">
+          <el-select
+            v-model="createData.saleMan.id"
+            filterable
+            clearable
+            placeholder="璇烽�夋嫨"
+            size="small"
+          >
+            <el-option
+              v-for="item in saleManList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="璇剧▼椤鹃棶">
+          <el-select
+            v-model="createData.voucherId"
+            filterable
+            clearable
+            placeholder="璇烽�夋嫨"
+            size="small"
+          >
+            <el-option
+              v-for="item in voucherList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="澶囨敞" style="width: 400px">
+          <el-input
+            type="textarea"
+            :rows="2"
+            placeholder="璇疯緭鍏ュ娉�"
+            v-model="createData.description"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false" size="small">鍙� 娑�</el-button>
+        <el-button type="primary" @click="dialogVisible = false" size="small"
+          >纭� 瀹�</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getDetails, getSaleMan } from "@/api/student";
+
+export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: "success",
+        draft: "gray",
+        deleted: "danger",
+      };
+      return statusMap[status];
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      createData: {
+        beginDate: "",
+        birthday: null,
+        description: "",
+        detailDescription: "",
+        endDate: "",
+        amt: 0,
+        freezeQty: 0,
+        gender: "鐢�",
+        mobile: "",
+        orgId: "", //鏈烘瀯
+        playerId: null,
+        playerName: "",
+        qty: 0,
+        saleMan: {
+          id: "",
+          name: "",
+        },
+        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
+        visibility: true,
+        voucherId: "", //璇惧寘/浼氬憳鍗�
+      },
+      saleManList: [],
+      voucherList: [],
+    };
+  },
+  created() {},
+  methods: {
+    showDialog() {
+      this.dialogVisible = true;
+    },
+    getSaleManList() {
+      let data = {
+        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
+        keyword: "",
+        pageIn: {
+          index: 0,
+          size: 999,
+          sorts: [
+            {
+              name: "name",
+              direction: "ASC",
+            },
+            {
+              name: "createTime",
+              direction: "DESC",
+            },
+          ],
+        },
+      };
+      getSaleMan(data).then((response) => {
+        this.saleManList = response.data.findStaff.ls;
+      });
+    },
+    goDetails(row) {
+      this.$router.push("/details");
+    },
+  },
+};
+</script>
diff --git a/src/views/student/components/details.vue b/src/views/student/components/details.vue
new file mode 100644
index 0000000..6fd1646
--- /dev/null
+++ b/src/views/student/components/details.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="app-container">
+    <div
+      style="margin-bottom: 20px; display: flex; flex-direction: row-reverse"
+    >
+      <div>
+        <el-button type="primary" size="small">璇剧▼</el-button>
+        <el-button type="primary" size="small">鐝骇</el-button>
+        <el-button type="danger" size="small">缁垂</el-button>
+        <el-button type="primary" size="small">鎴愰暱</el-button>
+        <el-button type="primary" size="small">浣滀笟</el-button>
+        <el-button type="primary" size="small">鍋滅敤</el-button>
+      </div>
+    </div>
+    <div>
+      <el-form ref="form" :model="detailsData" label-width="100px">
+        <el-form-item label="濮撳悕" style="width: 400px">
+          <el-input v-model="detailsData.name" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="鎬у埆" style="width: 400px">
+          <el-input v-model="detailsData.gender" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="鐢熸棩">
+          <el-date-picker
+            v-model="detailsData.birthday"
+            type="date"
+            placeholder="閫夋嫨鏃ユ湡"
+            size="small"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="鑱旂郴鐢佃瘽" style="width: 400px">
+          <el-input v-model="detailsData.mobile" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="鐓х墖">
+          <el-image
+            fit="cover"
+            v-if="detailsData.avatars && detailsData.avatars.length"
+            style="width: 200px; height: 200px"
+            :src="'https://s.9village.cn/' + detailsData.avatars[0].url2"
+            :preview-src-list="[
+              'https://s.9village.cn/' + detailsData.avatars[0].origin,
+            ]"
+          >
+          </el-image>
+        </el-form-item>
+        <el-form-item label="璇剧▼椤鹃棶">
+          <el-select
+            v-model="detailsData.saleMan.id"
+            filterable
+            clearable
+            placeholder="璇烽�夋嫨"
+            size="small"
+          >
+            <el-option
+              v-for="item in saleManList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="澶囨敞" style="width: 400px">
+          <el-input
+            type="textarea"
+            :rows="2"
+            placeholder="璇疯緭鍏ュ娉�"
+            v-model="detailsData.description"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="璐︽埛" style="width: 800px">
+          <el-table :data="detailsData.accs" fit>
+            <el-table-column label="璇剧▼" prop="">
+              <template slot-scope="scope">
+                {{ scope.row.voucher.name }}
+              </template>
+            </el-table-column>
+            <el-table-column label="鐘舵��" prop="">
+              <template slot-scope="scope">
+                <el-link
+                  type="primary"
+                  :underline="false"
+                  @click="goDetails(scope.row)"
+                  >{{ scope.row.name }}</el-link
+                >
+              </template>
+            </el-table-column>
+            <el-table-column label="鏁伴噺" prop="qty" />
+            <el-table-column label="閲戦" prop="amt" />
+            <el-table-column label="鍒版湡鏃堕棿" prop="endDate" />
+            <el-table-column label="" prop="">
+              <template slot-scope="scope">
+                <el-link
+                  type="primary"
+                  :underline="false"
+                  @click="goDetails(scope.row)"
+                  >鏌ョ湅鏄庣粏</el-link
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+        <el-form-item
+          label=""
+          style="width: 500px; display: flex; justify-content: space-around"
+        >
+          <el-button size="small">鍙栨秷</el-button>
+          <el-button type="primary" size="small">淇濆瓨</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDetails, getSaleMan } from "@/api/student";
+
+export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: "success",
+        draft: "gray",
+        deleted: "danger",
+      };
+      return statusMap[status];
+    },
+  },
+  data() {
+    return {
+      detailsData: {
+        saleMan: [{ id: "", name: "" }],
+      },
+      saleManList: [],
+    };
+  },
+  created() {
+    this.getSaleManList();
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      let data = { id: Number(this.$route.query.id) };
+      getDetails(data).then((response) => {
+        this.detailsData = response.data.findPlayerDto;
+        this.detailsData.gender =
+          this.detailsData.gender == "FEMALE" ? "濂�" : "鐢�";
+        if (
+          response.data.findPlayerDto.saleMan &&
+          response.data.findPlayerDto.saleMan.length !== 0
+        ) {
+          this.detailsData.saleMan.id = String(this.detailsData.saleMan.id);
+        }
+      });
+    },
+    getSaleManList() {
+      let data = {
+        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
+        keyword: "",
+        pageIn: {
+          index: 0,
+          size: 999,
+          sorts: [
+            {
+              name: "name",
+              direction: "ASC",
+            },
+            {
+              name: "createTime",
+              direction: "DESC",
+            },
+          ],
+        },
+      };
+      getSaleMan(data).then((response) => {
+        this.saleManList = response.data.findStaff.ls;
+      });
+    },
+    goDetails(row) {
+      this.$router.push("/details");
+    },
+  },
+};
+</script>
diff --git a/src/views/student/index.vue b/src/views/student/index.vue
index 568500f..d91dae9 100644
--- a/src/views/student/index.vue
+++ b/src/views/student/index.vue
@@ -1,20 +1,25 @@
 <template>
   <div class="app-container">
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="鍏ㄩ儴" name="first" />
-      <el-tab-pane label="寰呯画璐�" name="second" />
-      <el-tab-pane label="宸茶繃鏈�" name="third" />
-      <el-tab-pane label="宸插仠鐢�" name="fourth" />
+      <el-tab-pane label="鍏ㄩ儴" name="all" />
+      <el-tab-pane label="寰呯画璐�" name="pendingFees" />
+      <el-tab-pane label="宸茶繃鏈�" name="expired" />
+      <el-tab-pane label="宸插仠鐢�" name="deactivated" />
     </el-tabs>
-    <div style="display: flex; flex-direction: row-reverse">
+    <div style="display: flex; justify-content: space-between;">
+      <el-button type="primary" size="small" @click="showCreate">鏂板缓瀛﹀憳</el-button>
       <div style="width: 300px">
         <el-input
           placeholder="鎸夊鍚嶆悳绱�"
-          v-model="input3"
+          v-model="data.keyword"
           class="input-with-select"
           size="small"
         >
-          <el-button slot="append" icon="el-icon-search"></el-button>
+          <el-button
+            slot="append"
+            icon="el-icon-search"
+            @click="fetchData"
+          ></el-button>
         </el-input>
       </div>
     </div>
@@ -24,49 +29,51 @@
       element-loading-text="Loading"
       fit
     >
-      <el-table-column label="濮撳悕">
-        <template slot-scope=""> xxxxx </template>
+      <el-table-column label="濮撳悕" prop="">
+        <template slot-scope="scope">
+          <el-link
+            type="primary"
+            :underline="false"
+            @click="goDetails(scope.row)"
+            >{{ scope.row.name }}</el-link
+          >
+        </template>
       </el-table-column>
       <el-table-column label="鎬у埆" width="80">
-        <template slot-scope=""> 鐢� </template>
-      </el-table-column>
-      <el-table-column label="鎵嬫満鍙�" width="200">
-        <template slot-scope=""> 10086 </template>
-      </el-table-column>
-      <el-table-column label="寰俊" width="200">
-        <template slot-scope=""> asfiaf </template>
-      </el-table-column>
-      <el-table-column label="璐︽埛" width="">
-        <template slot-scope=""> asfiaf </template>
-      </el-table-column>
-      {{ accountList }}
-      <!-- <el-table-column label="Author" width="110" align="center">
         <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
+          {{ scope.row.gender == "FEMALE" ? "濂�" : "鐢�" }}
         </template>
       </el-table-column>
-      <el-table-column label="Pageviews" width="110" align="center">
+      <el-table-column label="鎵嬫満鍙�" width="200" prop="mobile">
         <template slot-scope="scope">
-          {{ scope.row.pageviews }}
+          {{ scope.row.mobile ? scope.row.mobile : "--" }}
         </template>
       </el-table-column>
-      <el-table-column class-name="status-col" label="Status" width="110" align="center">
+      <el-table-column label="鏄惁缁戝畾寰俊" width="200">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
+          {{ scope.row.user ? "鏄�" : "鍚�" }}
         </template>
       </el-table-column>
-      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
-        </template>
-      </el-table-column> -->
     </el-table>
+    <div>
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="data.pageIn.index + 1"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="data.pageIn.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <StudentCreate ref="studentCreate"/>
   </div>
 </template>
 
 <script>
-import { getData } from "@/api/student";
+import { getData, getRenew, getExpire, getDeleted } from "@/api/student";
+import StudentCreate from './components/create.vue'
 
 export default {
   filters: {
@@ -79,18 +86,26 @@
       return statusMap[status];
     },
   },
+  components:{
+    StudentCreate,
+  },
   data() {
     return {
       list: null,
       listLoading: true,
-      activeName: "first",
+      activeName: "all",
+      total: 0,
       data: {
-        staffId: "1680",
+        staffId: JSON.parse(localStorage.getItem('user')).staffs[0].id,
         keyword: "",
         pageIn: {
           //鍙�夛紝濡傛灉鏄垎椤垫煡璇紝闇�瑕佸姞涓娿��
-          index: 1, //蹇呴��
-          size: 20, //姣忛〉鐨勫ぇ灏忋�傞粯璁�20
+          index: 0, //蹇呴��
+          size: 10, //姣忛〉鐨勫ぇ灏忋�傞粯璁�20
+          sorts: {
+            name: "name", //鎺掑簭瀛楁鍚嶇О
+            direction: "ASC", //鎺掑簭鏂瑰悜
+          },
         },
       },
     };
@@ -102,10 +117,56 @@
     fetchData() {
       this.listLoading = true;
       getData(this.data).then((response) => {
-        this.list = response.data.items;
+        this.list = response.data.findPlayerByStaff.ls;
+        this.total = response.data.findPlayerByStaff.pageOut.total;
         this.listLoading = false;
       });
     },
+    handleSizeChange(val) {
+      this.data.pageIn.size = val;
+      this.fetchData();
+    },
+    handleCurrentChange(val) {
+      this.data.pageIn.index = val - 1;
+      this.fetchData();
+    },
+    handleClick(tab, event) {
+      if (this.activeName == "pendingFees") {
+        this.listLoading = true;
+        getRenew(this.data).then((response) => {
+          this.list = response.data.findPlayerRenew.ls;
+          this.total = response.data.findPlayerRenew.pageOut.total;
+          this.listLoading = false;
+        });
+      } else if (this.activeName == "expired") {
+        this.listLoading = true;
+        getExpire(this.data).then((response) => {
+          this.list = response.data.findPlayerExpire.ls;
+          this.total = response.data.findPlayerExpire.pageOut.total;
+          this.listLoading = false;
+        });
+      } else if (this.activeName == "all") {
+        this.fetchData();
+      } else if (this.activeName == "deactivated") {
+        this.listLoading = true;
+        getExpire(this.data).then((response) => {
+          this.list = response.data.findPlayerExpire.ls;
+          this.total = response.data.findPlayerExpire.pageOut.total;
+          this.listLoading = false;
+        });
+      }
+    },
+    goDetails(row) {
+      this.$router.push({
+        name: "StudentDetails",
+        query: {
+          id: row.id,
+        },
+      });
+    },
+    showCreate(){
+      this.$refs.studentCreate.showDialog()
+    }
   },
 };
 </script>

--
Gitblit v1.8.0