创建和详情页面

黄何裕

2024-08-01 e3474cf91877c95964b0d87fe55311941e601d6b

创建和详情页面

 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",

 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,
  });
}

 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;

 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拦截器


 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',

 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))
      });
    },
  },

 src/views/student/components/create.vue

New file
@@ -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>

 src/views/student/components/details.vue

New file
@@ -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>

 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>