课表页面开发

黄何裕

2024-08-08 54e06ab83d8fbebf91f8e0c3a621da743ac5af26

课表页面开发

 .env.development

@@ -2,4 +2,4 @@
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://192.168.3.88:18080/dream_test'
VUE_APP_BASE_API = 'http://192.168.3.87:18081/dream'

 package.json

@@ -24,6 +24,7 @@
    "core-js": "3.6.5",
    "cors": "^2.8.5",
    "cos-js-sdk-v5": "^1.8.3",
    "echarts": "^5.5.1",
    "element-ui": "2.13.2",
    "graphql": "^16.9.0",
    "graphql-tag": "^2.12.6",

 src/api/class.js

New file
@@ -0,0 +1,78 @@
import apolloClient from "@/utils/graphql";
import gql from "graphql-tag";

//全部
export function getTeamDtoAll(params) {
  return apolloClient.query({
    query: gql`
      query vars(
        $staffId: Int!
        $types: [TeamType!]!
        $keyword: String
        $pageIn: PageIn!
      ) {
        findTeamDtoAll(
          staffId: $staffId
          types: $types
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            team {
              id
              name
              voucher {
                id
                name
              }
              sessionStaffs {
                id
                name
              }
            }
            playerCount
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

//停用
export function getDeletedItem(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,
  });
}

 src/api/comment.js

New file
@@ -0,0 +1,77 @@
import apolloClient from "@/utils/graphql";
import gql from "graphql-tag";

//全部
export function getSessionWithComment(params) {
  return apolloClient.query({
    query: gql`
      query vars($staffId: Int!, $keyword: String, $pageIn: PageIn!) {
        findSessionWithComment(
          staffId: $staffId
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            sessionId
            courseName
            beginTime
            endTime
            homeworkCommentId
            playerCount
            commentCount
            staffNames
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

//停用
export function getHomeworkCommentByAuth(params) {
  return apolloClient.query({
    query: gql`
      query vars(
        $staffId: Int!
        $commentTypes: [HomeworkCommentType!]!
        $keyword: String
        $pageIn: PageIn!
      ) {
        findHomeworkCommentByAuth(
          staffId: $staffId
          commentTypes: $commentTypes
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            id
            player {
              id
              name
            }
            commentType
            homework {
              id
              name
            }
            lastStaffCommentId
            createTime
            createById
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

 src/api/curriculum.js

New file
@@ -0,0 +1,75 @@
import apolloClient from "@/utils/graphql";
import gql from "graphql-tag";

//全部
export function getBySessionExistsOfDay(params) {
  return apolloClient.query({
    query: gql`
      query vars($staffId: Int!, $day: LocalDate!) {
        findBySessionExistsOfDay(staffId: $staffId, day: $day) {
          id
          name
        }
      }
    `,
    variables: params,
  });
}

//停用
export function getSubjectByCourseAndDateRange(params) {
  return apolloClient.query({
    query: gql`
      query vars(
        $staffId: Int!
        $courseIds: [Int]!
        $beginDate: LocalDate!
        $endDate: LocalDate!
      ) {
        findSubjectByCourseAndDateRange(
          staffId: $staffId
          courseIds: $courseIds
          beginDate: $beginDate
          endDate: $endDate
        ) {
          date
          subjects {
            id
            name
            subjectType
            sessions {
              id
              courseId
              courseName
              courseType
              playerMax
              planId
              sessionType
              beginTime
              endTime
              staffCount
              placeCount
              staffNames
              placeIds
              placeNames
              firstPlayerName
              playerCount
              playerNoneCount
              playerApplyBookingCount
              playerBookingCount
              playerApplyLeaveCount
              playerLeaveCount
              playerLateCount
              playerAbsenceCount
              playerCompleteCount
              description
              complete
              color
            }
          }
        }
      }
    `,
    variables: params,
  });
}

 src/api/development.js

New file
@@ -0,0 +1,70 @@
import apolloClient from "@/utils/graphql";
import gql from "graphql-tag";

//全部
export function getHomeworkByType(params) {
  return apolloClient.query({
    query: gql`
      query vars(
        $staffId: Int!
        $homeworkType: HomeworkType!
        $keyword: String
        $pageIn: PageIn
      ) {
        findHomeworkByType(
          staffId: $staffId
          homeworkType: $homeworkType
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            id
            name
            category
            publisher {
              id
              name
            }
            createTime
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

//停用
export function getSessionHomeworkDto(params) {
  return apolloClient.query({
    query: gql`
      query vars($staffId: Int!, $keyword: String, $pageIn: PageIn!) {
        findSessionHomeworkDto(
          staffId: $staffId
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            sessionId
            courseName
            beginTime
            endTime
            playerCount
            commentCount
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

 src/api/integral.js

New file
@@ -0,0 +1,72 @@
import apolloClient from "@/utils/graphql";
import gql from "graphql-tag";

//全部
export function getPlayerScore(params) {
  return apolloClient.query({
    query: gql`
      query vars($staffId: Int!, $keyword: String, $pageIn: PageIn!) {
        findPlayerScore(staffId: $staffId, keyword: $keyword, pageIn: $pageIn) {
          ls {
            playerId
            playerName
            voucherId
            voucherName
            qty
            endDate
            modifyTime
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

//停用
export function getTeamDtoAll(params) {
  return apolloClient.query({
    query: gql`
      query vars(
        $staffId: Int!
        $types: [TeamType!]!
        $keyword: String
        $pageIn: PageIn!
      ) {
        findTeamDtoAll(
          staffId: $staffId
          types: $types
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            team {
              id
              name
              voucher {
                id
                name
              }
              sessionStaffs {
                id
                name
              }
            }
            playerCount
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

 src/api/rollCall.js

New file
@@ -0,0 +1,102 @@
import apolloClient from "@/utils/graphql";
import gql from "graphql-tag";

//全部
export function getPlayerAccByStaffWithRollCall(params) {
  return apolloClient.query({
    query: gql`
      query vars($staffId: Int!, $keyword: String, $pageIn: PageIn!) {
        findPlayerAccByStaffWithRollCall(
          staffId: $staffId
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            id
            player {
              id
              name
            }
            voucher {
              id
              name
            }
            voucherType
            memberType
            qty
            amt
            endDate
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

//停用
export function getTeamByStaffWithRollCall(params) {
  return apolloClient.query({
    query: gql`
      query vars($staffId: Int!, $keyword: String, $pageIn: PageIn!) {
        findTeamByStaffWithRollCall(
          staffId: $staffId
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            id
            name
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

export function getUnCompleteSession(params) {
  return apolloClient.query({
    query: gql`
      query vars(
        $staffId: Int!
        $completeTypes: [CompleteType!]!
        $keyword: String
        $pageIn: PageIn!
      ) {
        findUnCompleteSession(
          staffId: $staffId
          completeTypes: $completeTypes
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            id
            courseName
            teamId
            teamName
            beginTime
            endTime
            playerCount
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

 src/api/scheduleCourses.js

New file
@@ -0,0 +1,68 @@
import apolloClient from "@/utils/graphql";
import gql from "graphql-tag";

//全部
export function getCourse(params) {
  return apolloClient.query({
    query: gql`
      query vars(
        $staffId: Int!
        $types: [CourseType]
        $keyword: String
        $pageIn: PageIn
      ) {
        findCourse(
          staffId: $staffId
          types: $types
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            id
            name
            courseType
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

//停用
export function getDeletedItem(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,
  });
}

 src/api/student.js

@@ -181,37 +181,6 @@
  });
}

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({
@@ -335,3 +304,35 @@
    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,
  });
}

 src/api/work.js

New file
@@ -0,0 +1,82 @@
import apolloClient from "@/utils/graphql";
import gql from "graphql-tag";

//全部
export function getHomeworkByType(params) {
  return apolloClient.query({
    query: gql`
      query vars(
        $staffId: Int!
        $homeworkType: HomeworkType!
        $keyword: String
        $pageIn: PageIn
      ) {
        findHomeworkByType(
          staffId: $staffId
          homeworkType: $homeworkType
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            id
            name
            publisher {
              id
              name
            }
            createTime
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

//停用
export function getHomeworkCommentByAuth(params) {
  return apolloClient.query({
    query: gql`
      query vars(
        $staffId: Int!
        $commentTypes: [HomeworkCommentType!]!
        $keyword: String
        $pageIn: PageIn!
      ) {
        findHomeworkCommentByAuth(
          staffId: $staffId
          commentTypes: $commentTypes
          keyword: $keyword
          pageIn: $pageIn
        ) {
          ls {
            id
            player {
              id
              name
            }
            commentType
            homework {
              id
              name
            }
            lastStaffCommentId
            createTime
            createById
          }
          pageOut {
            total
            index
            size
          }
        }
      }
    `,
    variables: params,
  });
}

 src/router/index.js

@@ -56,83 +56,108 @@
      },
    ],
  },

  {
    path: "/educational",
    path: "/",
    component: Layout,
    redirect: "/educational/student",
    name: "Educational",
    meta: { title: "教务", icon: "el-icon-s-help" },
    redirect: "/curriculum",
    children: [
      {
        path: "student",
        path: "/curriculum",
        name: "Curriculum",
        component: () => import("@/views/curriculum/index"),
        meta: { title: "课表", icon: "table" },
      },
    ],
  },
  {
    path: "/",
    component: Layout,
    redirect: "/student",
    children: [
      {
        path: "/student",
        name: "Student",
        component: () => import("@/views/student/index"),
        meta: { title: "学员", icon: "table" },
      },
      {
        path: "student/details",
        name: "StudentDetails",
        component: () => import("@/views/student/components/details.vue"),
        meta: { title: "学员详情" },
        hidden: true,
      },
      {
        path: "class",
        name: "Class",
        component: () => import("@/views/class/index"),
        meta: { title: "班级", icon: "tree" },
      },
      {
        path: "scheduleCourses",
        name: "ScheduleCourses",
        component: () => import("@/views/scheduleCourses/index"),
        meta: { title: "排课", icon: "table" },
      },
      {
        path: "work",
        name: "Work",
        component: () => import("@/views/work/index"),
        meta: { title: "作业", icon: "tree" },
      },
      {
        path: "comment",
        name: "Comment",
        component: () => import("@/views/comment/index"),
        meta: { title: "点评", icon: "table" },
      },
      {
        path: "curriculum",
        name: "Curriculum",
        component: () => import("@/views/curriculum/index"),
        meta: { title: "课表", icon: "tree" },
      },
      {
        path: "table",
        name: "Table",
        component: () => import("@/views/student/index"),
        meta: { title: "日程", icon: "table" },
      },
      {
        path: "development",
        name: "Development",
        component: () => import("@/views/development/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" },
      },
    ],
  },
  // {
  //   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: "student/details",
  //       name: "StudentDetails",
  //       component: () => import("@/views/student/components/details.vue"),
  //       meta: { title: "学员详情" },
  //       hidden: true,
  //     },
  //     {
  //       path: "class",
  //       name: "Class",
  //       component: () => import("@/views/class/index"),
  //       meta: { title: "班级", icon: "tree" },
  //     },
  //     {
  //       path: "scheduleCourses",
  //       name: "ScheduleCourses",
  //       component: () => import("@/views/scheduleCourses/index"),
  //       meta: { title: "排课", icon: "table" },
  //     },
  //     {
  //       path: "work",
  //       name: "Work",
  //       component: () => import("@/views/work/index"),
  //       meta: { title: "作业", icon: "tree" },
  //     },
  //     {
  //       path: "comment",
  //       name: "Comment",
  //       component: () => import("@/views/comment/index"),
  //       meta: { title: "点评", icon: "table" },
  //     },
  //     {
  //       path: "curriculum",
  //       name: "Curriculum",
  //       component: () => import("@/views/curriculum/index"),
  //       meta: { title: "课表", icon: "tree" },
  //     },
  //     {
  //       path: "table",
  //       name: "Table",
  //       component: () => import("@/views/student/index"),
  //       meta: { title: "日程", icon: "table" },
  //     },
  //     {
  //       path: "development",
  //       name: "Development",
  //       component: () => import("@/views/development/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" },
  //     },
  //   ],
  // },

  // {
  //   path: '/form',
@@ -147,66 +172,66 @@
  //   ]
  // },

  {
    path: "/nested",
    component: Layout,
    redirect: "/nested/menu1",
    name: "Nested",
    meta: {
      title: "Nested",
      icon: "nested",
    },
    children: [
      {
        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-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-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: "menu2",
        component: () => import("@/views/nested/menu2/index"),
        name: "Menu2",
        meta: { title: "menu2" },
      },
    ],
  },
  // {
  //   path: "/nested",
  //   component: Layout,
  //   redirect: "/nested/menu1",
  //   name: "Nested",
  //   meta: {
  //     title: "Nested",
  //     icon: "nested",
  //   },
  //   children: [
  //     {
  //       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-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-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: "menu2",
  //       component: () => import("@/views/nested/menu2/index"),
  //       name: "Menu2",
  //       meta: { title: "menu2" },
  //     },
  //   ],
  // },

  // {
  //   path: 'external-link',

 src/utils/graphql.js

@@ -6,7 +6,7 @@

// export default apolloClient;
// 定义不同请求地址
const EFORMURI = "http://192.168.3.88:18080/dream_test/graphql";
const EFORMURI = "http://192.168.3.87:18081/dream/graphql";
const IOTURI = "https://www.9village.cn/dream_test" + "/graphql";
// import ApolloClient from 'apollo-boost' //引入apollo-boost插件
import { ApolloClient } from "apollo-client";

 src/views/class/index.vue

@@ -1,103 +1,178 @@
<template>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" />
        <el-tab-pane label="已停用" name="fourth" />
      </el-tabs>
      <div style="display: flex; flex-direction: row-reverse;">
        <div style="width: 300px;">
          <el-input
            placeholder="按班级名称搜索"
            v-model="input3"
            class="input-with-select"
            size="small"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="fetchData">
      <el-tab-pane label="全部" name="all" />
      <el-tab-pane label="已停用" name="deactivated" />
    </el-tabs>
    <div style="display: flex; flex-direction: row-reverse">
      <div style="width: 300px">
        <el-input
          placeholder="按班级名称搜索"
          v-model="data.keyword"
          class="input-with-select"
          size="small"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="fetchData"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div style="height: calc(100vh - 248px)">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        v-if="activeName == 'all'"
        height="100%"
      >
        <el-table-column label="班级名称">
          <template slot-scope=""> xxxxx </template>
          <template slot-scope="scope">
            <el-link type="primary" :underline="false">{{
              scope.row.team.name
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="班级人数" width="80">
          <template slot-scope=""> 男 </template>
        <el-table-column label="班级人数" width="200">
          <template slot-scope="scope">{{ scope.row.playerCount }} 人</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>
          <template slot-scope="scope">{{
            scope.row.team.voucher.name
          }}</template>
        </el-table-column>
        <el-table-column label="教师" width="">
          <template slot-scope=""> asfiaf </template>
          <template slot-scope="scope">{{
            concatenateArray(scope.row.team.sessionStaffs)
          }}</template>
        </el-table-column>
        <el-table-column label="学员人数" width="">
          <template slot-scope=""> asfiaf </template>
      </el-table>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        height="100%"
        v-else
      >
        <el-table-column label="班级名称">
          <template slot-scope="scope">{{ scope.row.name }} </template>
        </el-table-column>
        <!-- <el-table-column label="Author" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.author }}</span>
        <el-table-column label="停用时间">
          <template slot-scope="scope">{{ scope.row.modifyTime }} </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="">
            <el-link type="primary" :underline="false">恢复</el-link>
          </template>
        </el-table-column>
        <el-table-column label="Pageviews" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.pageviews }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="Status" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
          </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>
  </template>
  
  <script>
  import { getList } from "@/api/table";
  
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "gray",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        list: null,
        listLoading: true,
        activeName: "first",
    <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>
  </div>
</template>

<script>
import { getTeamDtoAll, getDeletedItem } from "@/api/class";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
    created() {
      this.fetchData();
  },
  data() {
    return {
      list: null,
      listLoading: true,
      activeName: "all",
      total: 0,
      data: {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          //可选，如果是分页查询，需要加上。
          index: 0, //必选
          size: 10, //每页的大小。默认20
          sorts: {
            name: "name", //排序字段名称
            direction: "ASC", //排序方向
          },
        },
        types: ["NORMAL"],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSizeChange(val) {
      this.data.pageIn.size = val;
      this.fetchData("pageIn");
    },
    methods: {
      fetchData() {
    handleCurrentChange(val) {
      this.data.pageIn.index = val - 1;
      this.fetchData("pageIn");
    },
    fetchData(_val) {
      if (_val !== "pageIn") {
        this.data.pageIn.index = 0;
        this.data.pageIn.size = 10;
      }
      this.listLoading = true;
      if (this.activeName == "all") {
        this.listLoading = true;
        getList().then((response) => {
          this.list = response.data.items;
        getTeamDtoAll(this.data).then((response) => {
          this.list = response.data.findTeamDtoAll.ls;
          this.total = response.data.findTeamDtoAll.pageOut.total;
          this.listLoading = false;
        });
      },
      } else if (this.activeName == "deactivated") {
        this.listLoading = true;
        let data = {
          itemType: "TEAM",
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          keyword: this.data.keyword,
          pageIn: { ...this.data.pageIn },
        };
        getDeletedItem(data).then((response) => {
          this.list = response.data.findDeletedItem.ls;
          this.total = response.data.findDeletedItem.pageOut.total;
          this.listLoading = false;
        });
      }
    },
  };
  </script>
  
    concatenateArray(arr) {
      let result = "";
      for (let i = 0; i < arr.length; i++) {
        if (i == 0) {
          result += arr[i].name;
        } else {
          result += "," + arr[i].name;
        }
      }
      return result;
    },
  },
};
</script>

 src/views/comment/index.vue

@@ -1,118 +1,190 @@
<template>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="课程" name="first">
          <div style="display: flex; flex-direction: row-reverse">
            <div style="width: 300px">
              <el-input
                placeholder="按课程名称搜索"
                v-model="input3"
                class="input-with-select"
                size="small"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="fetchData">
      <el-tab-pane label="课后点评" name="comment">
        <div style="display: flex; flex-direction: row-reverse">
          <div style="width: 300px">
            <el-input
              placeholder="按课程名称搜索"
              v-model="data.keyword"
              class="input-with-select"
              size="small"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="fetchData"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="课程名称">
              <template slot-scope=""> xxxxx </template>
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  scope.row.courseName
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="时间" width="80">
              <template slot-scope=""> 男 </template>
            <el-table-column label="课程时间" width="">
              <template slot-scope="scope">
                {{ scope.row.beginTime }}
              </template>
            </el-table-column>
            <el-table-column label="教师" width="200">
              <template slot-scope=""> 10086 </template>
            <el-table-column label="教师" width="" prop="staffNames">
            </el-table-column>
            <el-table-column label="学员数" width="200">
              <template slot-scope=""> asfiaf </template>
            <el-table-column label="学员数" width="" prop="playerCount">
            </el-table-column>
            <el-table-column label="已点评数" width="">
              <template slot-scope=""> asfiaf </template>
            </el-table-column>
            <el-table-column label="操作" width="">
              <template slot-scope=""> 点评 </template>
            <el-table-column label="已点评数" width="" prop="commentCount">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="其他" name="fourth">
          <div style="display: flex; flex-direction: row-reverse">
            <div style="width: 300px">
              <el-input
                placeholder="按学员名称搜索"
                v-model="input3"
                class="input-with-select"
                size="small"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
        </div>
        <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>
      </el-tab-pane>
      <el-tab-pane label="其他" name="other">
        <div style="display: flex; flex-direction: row-reverse">
          <div style="width: 300px">
            <el-input
              placeholder="按学员名称搜索"
              v-model="data.keyword"
              class="input-with-select"
              size="small"
            >
              <el-button slot="append" icon="el-icon-search" @click="fetchData"></el-button>
            </el-input>
          </div>
        </div>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="学员">
              <template slot-scope=""> xxxxx </template>
            <el-table-column label="学员名称">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  scope.row.player.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=""> 查看 </template>
            <el-table-column label="点评时间" width="" prop="createTime">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
  import { getList } from "@/api/table";
  
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "gray",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        list: null,
        listLoading: true,
        activeName: "first",
        </div>
        <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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getSessionWithComment, getHomeworkCommentByAuth } from "@/api/comment";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
    created() {
      this.fetchData();
  },
  data() {
    return {
      list: null,
      listLoading: true,
      activeName: "comment",
      total: 0,
      data: {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          //可选，如果是分页查询，需要加上。
          index: 0, //必选
          size: 10, //每页的大小。默认20
          sorts: {
            name: "begin_time", //排序字段名称
            direction: "ASC", //排序方向
          },
        },
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSizeChange(val) {
      this.data.pageIn.size = val;
      this.fetchData("pageIn");
    },
    methods: {
      fetchData() {
    handleCurrentChange(val) {
      this.data.pageIn.index = val - 1;
      this.fetchData("pageIn");
    },
    fetchData(_val) {
      if (_val !== "pageIn") {
        this.data.pageIn.index = 0;
        this.data.pageIn.size = 10;
      }
      this.listLoading = true;
      if (this.activeName == "comment") {
        this.listLoading = true;
        getList().then((response) => {
          this.list = response.data.items;
        getSessionWithComment(this.data).then((response) => {
          this.list = response.data.findSessionWithComment.ls;
          this.total = response.data.findSessionWithComment.pageOut.total;
          this.listLoading = false;
        });
      },
      } else if (this.activeName == "other") {
        this.listLoading = true;
        let data = {
          commentTypes: ["DIRECT_COMMENT"],
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          keyword: this.data.keyword,
          pageIn: { ...this.data.pageIn },
        };
        data.pageIn.sorts.name = "createTime";
        data.pageIn.sorts.direction = "DESC";
        getHomeworkCommentByAuth(data).then((response) => {
          this.list = response.data.findHomeworkCommentByAuth.ls;
          this.total = response.data.findHomeworkCommentByAuth.pageOut.total;
          this.listLoading = false;
        });
      }
    },
  };
  </script>
  
  },
};
</script>

 src/views/curriculum/index.vue

@@ -1,131 +1,271 @@
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="课程" name="first" />
      <el-tab-pane label="教师" name="fourth" />
      <el-tab-pane label="场地" name="xxx" />
  <div style="padding: 20px">
    <el-tabs v-model="activeName" @tab-click="getCourses">
      <el-tab-pane label="课程" name="course" />
      <el-tab-pane label="教师" name="teacher" />
      <el-tab-pane label="场地" name="site" />
    </el-tabs>
    <div>
      <div style="width: 300px">
        <el-date-picker v-model="timeData" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div style="display: flex">
        <div class="timetable-b w100">
          <table class="timetable-content w100">
            <thead>
              <tr>
                <th></th>
                <th v-for="(item1, index1) in weeks" :key="index1">
                  xxx
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item2, index2) in maxCourseLength" :key="index2">
                <td>
                  <p>{{ xxx }}</p>
                </td>
                <template v-for="(item3, index3) in weeks">
                  <td
                    :key="index3"
                    :rowspan="
                      showData(index3, index2 + 1).subject &&
                      showData(index3, index2).subject ===
                        showData(index3, index2 + 1).subject
                        ? 2
                        : ''
                    "
                    :style="[
                      {
                        display:
                          showData(index3, index2 - 1).subject &&
                          showData(index3, index2 - 1).subject ===
                            showData(index3, index2).subject
                            ? 'none'
                            : '',
                      },
                    ]"
                  >
                    <div
                      class="dmsjandjs-b"
                      :style="[
                        {
                          background: showData(index3, index2).index
                            ? getRandomColor()
                            : '#FFFFFF',
                        },
                        { color: '#fff' },
                        { borderRadius: '15px' },
                        { padding: '12px' },
                        { height: '100%' },
                      ]"
                    >
                      <p>
                        {{ showData(index3, index2).startTime }}
                        {{ showData(index3, index2).startTime ? "-" : "" }}
                        {{ showData(index3, index2).endTime }}
                      </p>
                      <p>{{ showData(index3, index2).subject }}</p>
                      <p>{{ showData(index3, index2).major }}</p>
                      <p>{{ showData(index3, index2).class }}</p>
                    </div>
                  </td>
                </template>
              </tr>
            </tbody>
          </table>
    <div style="margin-bottom: 20px">
      <el-date-picker
        v-model="time"
        type="date"
        size="small"
        placeholder="选择日期"
        @change="getCourses"
      >
      </el-date-picker>
    </div>
    <el-row>
      <el-col :span="1" style="margin-top: 7px"
        ><div
          class=""
          v-for="i in tiemData"
          :key="i"
          style="display: flex; flex-direction: row-reverse; margin: 32px 10px"
        >
          {{ i }}
        </div></el-col
      >
      <el-col :span="23">
        <div class="table_box">
          <div
            :style="{ display: 'flex', width: dataList.length * 200 + 'px' }"
          >
            <div
              v-for="(i, index) in dataList"
              :key="i.id"
              class="header_box"
              :id="0 < index ? 'header_boxA' : ''"
            >
              {{ i.name }}
            </div>
          </div>
          <div style="display: flex; position: relative">
            <div v-for="(i, index) in dataList" :key="i.id">
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div class="body_box" :id="0 < index ? 'header_boxA' : ''"></div>
              <div
                v-for="(j, index) in i.sessions"
                :key="index"
                :style="{
                  width: '200px',
                  backgroundColor: j.color,
                  position: 'absolute',
                  top: getTop(j.beginTime),
                  height: getHeight(j.beginTime, j.endTime),
                  borderRadius: '5px',
                  fontSize: '15px',
                }"
                @click="lookDetails(j)"
              >
                <div>{{ j.staffNames }}</div>
                <span>{{ j.placeNames }}</span>
                <div>
                  学员：{{ j.playerCount }}人 请假：{{ j.placeCount }}人
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-drawer :title="drawerTime" :visible.sync="drawer" direction="rtl">
      <div v-if="drawerIf">
        <div style="display: flex; justify-content: center">
          <i class="el-icon-time"></i> {{ headerTime }}
        </div>
        <div>
          <el-form ref="form" label-width="80px">
            <el-form-item label="课程">
              <span>{{ formData.courseName }}</span>
            </el-form-item>
            <el-form-item label="老师">
              <span>{{ formData.staffNames }}</span>
            </el-form-item>
            <el-form-item label="场地">
              <span>{{ formData.placeNames }}</span>
            </el-form-item>
            <el-form-item label="学员">
              <div style="display: flex; align-items: center;">
                <el-progress
                  style="width: 300px"
                  :percentage="
                    Math.floor(
                      (formData.playerCount / formData.playerMax) * 100
                    )
                  "
                ></el-progress>
                <span
                  >学员{{ formData.playerCount }}人/上限{{
                    formData.playerMax
                  }}人</span
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    </el-drawer>
  </div>
</template>

<script>
import { getList } from "@/api/table";

import {
  getBySessionExistsOfDay,
  getSubjectByCourseAndDateRange,
} from "@/api/curriculum";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
  props: {
    // 下午节次数
    afternoonLength: {
      type: [String, Number],
      default: 6,
    },
    // 总节次
    length: {
      type: [String, Number],
      default: 14,
    },
    // 课表数据
    // events: {
    //   type: Array,
    //   default: this.events1,
    // },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      activeName: "first",
      timeData: new Date(),
      // 课程表数据
      tiemData: [
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
      ],
      time: new Date(),
      dataList: [],
      drawerTime: new Date(),
      drawerIf: true,
      drawer: false,
      headerTime: "",
      formData: {},
      activeName:'course'
    };
  },
  mounted() {
    this.mergeData();
  },
  watch: {
    events: {
      handler(newVal, oldVal) {
        this.mergeData();
      },
      deep: true,
    },
  },
  created() {
    this.fetchData();
    this.getCourses();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        this.list = response.data.items;
        this.listLoading = false;
    getCourses() {
      let data = {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        day: this.getYMD(this.time),
      };
      getBySessionExistsOfDay(data).then((res) => {
        let courseIds = [];
        res.data.findBySessionExistsOfDay.map((i) => {
          courseIds.push(i.id);
        });
        let params = {
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          beginDate: this.getYMD(this.time),
          endDate: this.getYMD(this.time),
          courseIds: courseIds,
        };
        getSubjectByCourseAndDateRange(params).then((res) => {
          this.dataList = res.data.findSubjectByCourseAndDateRange[0].subjects;
        });
      });
    },
     //随机获取颜色
     getRandomColor() {
      let colorList = this.colorList;
      let colorRandom = Math.floor(Math.random() * colorList.length + 1) - 1;
      let color;
      for (let i = 0; colorList.length > i; i++) {
        if (i == colorRandom) {
          color = colorList[i];
        }
      }
      return color;
    getYMD(time) {
      const year = time.getFullYear();
      const month = (time.getMonth() + 1).toString().padStart(2, "0");
      const day = time.getDate().toString().padStart(2, "0");
      return `${year}/${month}/${day}`;
    },
    getTop(time) {
      let tiemData = new Date(time);
      return (tiemData.getHours() - 7 + tiemData.getMinutes() / 60) * 50 + "px";
    },
    getHeight(beginTime, endTime) {
      let time = new Date(beginTime);
      let timeA = new Date(endTime);
      return ((timeA - time) / 1000 / 60 / 60) * 50 + "px";
    },
    lookDetails(i) {
      const month = (this.time.getMonth() + 1).toString().padStart(2, "0");
      const day = this.time.getDate().toString().padStart(2, "0");
      this.drawerTime = `${month}/${day}(${this.getDayOfWeek(this.time)})`;
      this.headerTime =
        new Date(i.beginTime).getHours().toString().padStart(2, "0") +
        ":" +
        new Date(i.beginTime).getMinutes().toString().padStart(2, "0") +
        "-" +
        new Date(i.endTime).getHours().toString().padStart(2, "0") +
        ":" +
        new Date(i.endTime).getMinutes().toString().padStart(2, "0");
      this.formData = i;
      this.drawer = true;
    },
    getDayOfWeek(timestamp) {
      const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      const date = new Date(timestamp);
      return days[date.getDay()];
    },
  },
};
</script>
<style scoped>
.table_box {
  overflow-x: auto;
  white-space: nowrap;
}
.header_box {
  height: 50px;
  width: 200px;
  border: 2px solid rgb(165, 165, 165);
  background-color: rgb(212, 241, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}
#header_boxA {
  border-left: none;
}
.body_box {
  height: 50px;
  width: 200px;
  border: 2px solid rgb(165, 165, 165);
  border-top: none;
}
</style>

 src/views/development/index.vue

@@ -1,124 +1,202 @@
<template>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <div style="display: flex; flex-direction: row-reverse">
            <div style="width: 300px">
              <el-input
                placeholder="按标题搜索"
                v-model="input3"
                class="input-with-select"
                size="small"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="fetchData">
      <el-tab-pane label="全部" name="all">
        <div style="display: flex; flex-direction: row-reverse">
          <div style="width: 300px">
            <el-input
              placeholder="按标题搜索"
              v-model="data.keyword"
              class="input-with-select"
              size="small"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="fetchData"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="标题">
              <template slot-scope=""> xxxxx </template>
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  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 label="分类" width="" prop="category">
            </el-table-column>
            <el-table-column label="教师" width="">
              <template slot-scope=""> 点评 </template>
              <template slot-scope="scope">{{
                scope.row.publisher.name
              }}</template>
            </el-table-column>
            <el-table-column label="内容" width="">
              <template slot-scope=""> 点评 </template>
            </el-table-column>
            <el-table-column label="操作" width="">
              <template slot-scope=""> 修改 </template>
            <el-table-column label="点评时间" width="" prop="createTime">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="课程" name="fourth">
          <div style="display: flex; flex-direction: row-reverse">
            <div style="width: 300px">
              <el-input
                placeholder="按学员名称搜索"
                v-model="input3"
                class="input-with-select"
                size="small"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
        </div>
        <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>
      </el-tab-pane>
      <el-tab-pane label="课程" name="other">
        <div style="display: flex; flex-direction: row-reverse">
          <div style="width: 300px">
            <el-input
              placeholder="按学员名称搜索"
              v-model="data.keyword"
              class="input-with-select"
              size="small"
            >
              <el-button slot="append" icon="el-icon-search" @click="fetchData"></el-button>
            </el-input>
          </div>
        </div>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="课程">
              <template slot-scope=""> xxxxx </template>
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  scope.row.courseName
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="时间" width="80">
              <template slot-scope=""> 男 </template>
            <el-table-column label="开始时间" width="" prop="beginTime">
            </el-table-column>
            <el-table-column label="学员数" width="200">
              <template slot-scope=""> 10086 </template>
            <el-table-column label="结束时间" width="" prop="endTime">
            </el-table-column>
            <el-table-column label="已记录数" width="200">
              <template slot-scope=""> asfiaf </template>
            <el-table-column label="学员数" width="" prop="playerCount">
            </el-table-column>
            <el-table-column label="操作" width="">
              <template slot-scope=""> 记录 </template>
            <el-table-column label="已记录数" width="" prop="commentCount">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
  import { getList } from "@/api/table";
  
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "gray",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        list: null,
        listLoading: true,
        activeName: "first",
        </div>
        <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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getHomeworkByType, getSessionHomeworkDto } from "@/api/development";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
    created() {
      this.fetchData();
  },
  data() {
    return {
      list: null,
      listLoading: true,
      activeName: "all",
      total: 0,
      data: {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          //可选，如果是分页查询，需要加上。
          index: 0, //必选
          size: 10, //每页的大小。默认20
          sorts: [
            {
              name: "name", //排序字段名称
              direction: "ASC", //排序方向
            },
            {
              name: "createTime",
              direction: "DESC",
            },
          ],
        },
        homeworkType: "GROWTH",
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSizeChange(val) {
      this.data.pageIn.size = val;
      this.fetchData("pageIn");
    },
    methods: {
      fetchData() {
    handleCurrentChange(val) {
      this.data.pageIn.index = val - 1;
      this.fetchData("pageIn");
    },
    fetchData(_val) {
      if (_val !== "pageIn") {
        this.data.pageIn.index = 0;
        this.data.pageIn.size = 10;
      }
      this.listLoading = true;
      if (this.activeName == "all") {
        this.listLoading = true;
        getList().then((response) => {
          this.list = response.data.items;
        getHomeworkByType(this.data).then((response) => {
          this.list = response.data.findHomeworkByType.ls;
          this.total = response.data.findHomeworkByType.pageOut.total;
          this.listLoading = false;
        });
      },
      } else if (this.activeName == "other") {
        this.listLoading = true;
        let data = {
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          keyword: this.data.keyword,
          pageIn: { ...this.data.pageIn },
        };
        data.pageIn.sorts = {
          direction: "DESC",
          name: "beginTime",
        };
        getSessionHomeworkDto(data).then((response) => {
          this.list = response.data.findSessionHomeworkDto.ls;
          this.total = response.data.findSessionHomeworkDto.pageOut.total;
          this.listLoading = false;
        });
      }
    },
  };
  </script>
  
  },
};
</script>

 src/views/home/components/chart.vue

New file
@@ -0,0 +1,67 @@
<template>
  <div class="dashboard-container">
    <div :id="data.value" style="height: 260px; width: 100%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Chart",
  props:{
    data: {
      type: Object,
    }
  },
  mounted() {
    this.loadEcharts();
  },
  methods: {
    //加载echarts
    loadEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.data.value));
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.data.lable,
        },
        xAxis: {
          type: "category",
          data: [
            "8月4号",
            "8月4号",
            "8月4号",
            "8月4号",
            "8月4号",
            "8月4号",
            "8月4号",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

 src/views/home/index.vue

@@ -1,29 +1,56 @@
<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <el-button @click="getUserDate">登录</el-button>
    <div>
      <div>
        <Chart :data="data1"></Chart>
      </div>
      <div>
        <Chart :data="data2"></Chart>
      </div>
      <div>
        <Chart :data="data3"></Chart>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { login } from "@/api/user";
import Chart from "./components/chart.vue";

export default {
  name: "Dashboard",
  components: {
    Chart,
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created() {
    // this.getUserDate();
  data(){
    return{
      data1:{
        value:'course',
        lable:'课消'
      },
      data2:{
        value:'student',
        lable:'学员'
      },
      data3:{
        value:'class',
        lable:'考勤'
      }
    }
  },
  mounted() {},
  methods: {
    getUserDate() {
      login({
        code: "061akYFa14JATH0EzoIa1NNVTC3akYFI"
      }
      ).then((res) => {
       localStorage.setItem('user',JSON.stringify(res.data))
        code: "0913JF000eW6BS1rZ3100FQTUM03JF05",
      }).then((res) => {
        localStorage.setItem("user", JSON.stringify(res.data));
      });
    },
  },

 src/views/integral/index.vue

@@ -1,106 +1,195 @@
<template>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="按学员" name="first">
          <div style="display: flex; flex-direction: row-reverse">
            <div style="width: 300px">
              <el-input
                placeholder="按标题搜索"
                v-model="input3"
                class="input-with-select"
                size="small"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="fetchData">
      <el-tab-pane label="按学员" name="student">
        <div style="display: flex; flex-direction: row-reverse">
          <div style="width: 300px">
            <el-input
              placeholder="按标题搜索"
              v-model="data.keyword"
              class="input-with-select"
              size="small"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="fetchData"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="姓名">
              <template slot-scope=""> xxxxx </template>
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  scope.row.playerName
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="积分" width="80">
              <template slot-scope=""> 男 </template>
            <el-table-column label="积分" width="" prop="qty">
            </el-table-column>
            <el-table-column label="更新时间" width="200">
              <template slot-scope=""> 10086 </template>
            <el-table-column label="更新时间" width="" prop="modifyTime">
            </el-table-column>
            <el-table-column label="操作" width="">
              <template slot-scope=""> 兑换 发放 </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="按班级" name="fourth">
          <div style="display: flex; flex-direction: row-reverse">
            <div style="width: 300px">
              <el-input
                placeholder="按学员名称搜索"
                v-model="input3"
                class="input-with-select"
                size="small"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
        </div>
        <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>
      </el-tab-pane>
      <el-tab-pane label="按班级" name="class">
        <div style="display: flex; flex-direction: row-reverse">
          <div style="width: 300px">
            <el-input
              placeholder="按学员名称搜索"
              v-model="data.keyword"
              class="input-with-select"
              size="small"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="fetchData"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="班级">
              <template slot-scope=""> xxxxx </template>
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  scope.row.team.name
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="学员人数" width="80">
              <template slot-scope=""> 男 </template>
            <el-table-column label="学员人数" width="" prop="playerCount">
            </el-table-column>
            <el-table-column label="操作" width="">
              <template slot-scope=""> 发放 </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
  import { getList } from "@/api/table";
  
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "gray",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        list: null,
        listLoading: true,
        activeName: "first",
        </div>
        <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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getPlayerScore, getTeamDtoAll } from "@/api/integral";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
    created() {
      this.fetchData();
  },
  data() {
    return {
      list: null,
      listLoading: true,
      activeName: "student",
      total: 0,
      data: {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          //可选，如果是分页查询，需要加上。
          index: 0, //必选
          size: 10, //每页的大小。默认20
          sorts: [
            { name: "v.id", direction: "DESC" },
            { name: "acc.modify_time", direction: "DESC" },
          ],
        },
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSizeChange(val) {
      this.data.pageIn.size = val;
      this.fetchData("pageIn");
    },
    methods: {
      fetchData() {
    handleCurrentChange(val) {
      this.data.pageIn.index = val - 1;
      this.fetchData("pageIn");
    },
    fetchData(_val) {
      if (_val !== "pageIn") {
        this.data.pageIn.index = 0;
        this.data.pageIn.size = 10;
      }
      this.listLoading = true;
      if (this.activeName == "student") {
        this.listLoading = true;
        getList().then((response) => {
          this.list = response.data.items;
        getPlayerScore(this.data).then((response) => {
          this.list = response.data.findPlayerScore.ls;
          this.total = response.data.findPlayerScore.pageOut.total;
          this.listLoading = false;
        });
      },
      } else if (this.activeName == "class") {
        this.listLoading = true;
        let data = {
          types: ["NORMAL"],
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          keyword: this.data.keyword,
          pageIn: { ...this.data.pageIn },
        };
        data.pageIn.sorts = [
          { name: "createTime", direction: "DESC" },
          { name: "name", direction: "ASC" },
        ];
        getTeamDtoAll(data).then((response) => {
          this.list = response.data.findTeamDtoAll.ls;
          this.total = response.data.findTeamDtoAll.pageOut.total;
          this.listLoading = false;
        });
      }
    },
  };
  </script>
  
  },
};
</script>

 src/views/rollCall/index.vue

@@ -1,115 +1,291 @@
<template>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="按学员" name="first">
          <div style="display: flex; flex-direction: row-reverse">
            <div style="width: 300px">
              <el-input
                placeholder="按标题搜索"
                v-model="input3"
                class="input-with-select"
                size="small"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="fetchData">
      <el-tab-pane label="按学员" name="student">
        <div style="display: flex; flex-direction: row-reverse">
          <div style="width: 300px">
            <el-input
              placeholder="按标题搜索"
              v-model="data.keyword"
              class="input-with-select"
              size="small"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="fetchData"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="姓名">
              <template slot-scope=""> xxxxx </template>
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  scope.row.player.name
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="课包/会员卡" width="80">
              <template slot-scope=""> 男 </template>
            <el-table-column label="课包/会员卡" width="">
              <template slot-scope="scope"
                >{{ scope.row.voucher.name }}
              </template>
            </el-table-column>
            <el-table-column label="上课日期" width="200">
              <template slot-scope=""> 10086 </template>
            <el-table-column label="余额" width="" prop="qty">
            </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=""> 10086 </template>
            </el-table-column>
            <el-table-column label="课消数量" width="200">
              <template slot-scope=""> 10086 </template>
            <el-table-column label="到期时间" width="" prop="endDate">
              <template slot-scope="scope"
                >{{ timeCompare(scope.row.endDate) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="">
              <template slot-scope=""> 兑换 发放 </template>
              <template slot-scope=""> 点名 </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="按班级" name="fourth">
          <div style="display: flex; flex-direction: row-reverse">
            <div style="width: 300px">
              <el-input
                placeholder="按学员名称搜索"
                v-model="input3"
                class="input-with-select"
                size="small"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
        </div>
        <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>
      </el-tab-pane>
      <el-tab-pane label="按班级" name="class">
        <div style="display: flex; flex-direction: row-reverse">
          <div style="width: 300px">
            <el-input
              placeholder="按学员名称搜索"
              v-model="data.keyword"
              class="input-with-select"
              size="small"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="fetchData"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="班级">
              <template slot-scope=""> xxxxx </template>
            </el-table-column>
            <el-table-column label="学员人数" width="80">
              <template slot-scope=""> 男 </template>
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  scope.row.name
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="">
              <template slot-scope=""> 发放 </template>
              <template slot-scope=""> 点名 </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
  import { getList } from "@/api/table";
  
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "gray",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        list: null,
        listLoading: true,
        activeName: "first",
        </div>
        <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>
      </el-tab-pane>
      <el-tab-pane label="按课程" name="course">
        <div style="display: flex; flex-direction: row-reverse">
          <div style="width: 300px">
            <el-input
              placeholder="按课程名称搜索"
              v-model="data.keyword"
              class="input-with-select"
              size="small"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="fetchData"
              ></el-button>
            </el-input>
          </div>
        </div>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="课程">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  scope.row.courseName
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="开始时间" width="" prop="beginTime">
            </el-table-column>
            <el-table-column label="结束时间" width="" prop="endTime">
            </el-table-column>
            <el-table-column label="学员人数" width="" prop="playerCount">
            </el-table-column>
            <el-table-column label="操作" width="">
              <template slot-scope=""> 点名 </template>
            </el-table-column>
          </el-table>
        </div>
        <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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getPlayerAccByStaffWithRollCall,
  getTeamByStaffWithRollCall,
  getUnCompleteSession,
} from "@/api/rollCall";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
    created() {
      this.fetchData();
  },
  data() {
    return {
      list: null,
      listLoading: true,
      activeName: "student",
      total: 0,
      data: {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          //可选，如果是分页查询，需要加上。
          index: 0, //必选
          size: 10, //每页的大小。默认20
          sorts: [
            { name: "modifyTime", direction: "DESC" },
            { name: "player.name", direction: "ASC" },
          ],
        },
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSizeChange(val) {
      this.data.pageIn.size = val;
      this.fetchData("pageIn");
    },
    methods: {
      fetchData() {
    handleCurrentChange(val) {
      this.data.pageIn.index = val - 1;
      this.fetchData("pageIn");
    },
    fetchData(_val) {
      if (_val !== "pageIn") {
        this.data.pageIn.index = 0;
        this.data.pageIn.size = 10;
      }
      this.listLoading = true;
      if (this.activeName == "student") {
        this.listLoading = true;
        getList().then((response) => {
          this.list = response.data.items;
        getPlayerAccByStaffWithRollCall(this.data).then((response) => {
          this.list = response.data.findPlayerAccByStaffWithRollCall.ls;
          this.total =
            response.data.findPlayerAccByStaffWithRollCall.pageOut.total;
          this.listLoading = false;
        });
      },
      } else if (this.activeName == "class") {
        this.listLoading = true;
        let data = {
          types: ["NORMAL"],
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          keyword: this.data.keyword,
          pageIn: { ...this.data.pageIn },
        };
        data.pageIn.sorts = [
          { name: "modifyTime", direction: "DESC" },
          { name: "name", direction: "ASC" },
        ];
        getTeamByStaffWithRollCall(data).then((response) => {
          this.list = response.data.findTeamByStaffWithRollCall.ls;
          this.total = response.data.findTeamByStaffWithRollCall.pageOut.total;
          this.listLoading = false;
        });
      } else if (this.activeName == "course") {
        this.listLoading = true;
        let data = {
          completeTypes: ["ROLL_CALL"],
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          keyword: this.data.keyword,
          pageIn: { ...this.data.pageIn },
        };
        data.pageIn.sorts = [
          { name: "s.begin_time", direction: "DESC" },
          { name: "courseName", direction: "ASC" },
        ];
        getUnCompleteSession(data).then((response) => {
          this.list = response.data.findUnCompleteSession.ls;
          this.total = response.data.findUnCompleteSession.pageOut.total;
          this.listLoading = false;
        });
      }
    },
  };
  </script>
  
    timeCompare(time) {
      if (!time) {
        return "";
      }
      let timeDate = new Date(time);
      let nowTime = new Date();
      if (nowTime > timeDate) {
        return time + "(已过期)";
      } else {
        return time;
      }
    },
  },
};
</script>

 src/views/scheduleCourses/index.vue

@@ -1,112 +1,151 @@
<template>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" />
        <el-tab-pane label="已停用" name="fourth" />
      </el-tabs>
      <div style="display: flex; flex-direction: row-reverse;">
        <div style="width: 300px;">
          <el-input
            placeholder="按课程名称搜索"
            v-model="input3"
            class="input-with-select"
            size="small"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="fetchData">
      <el-tab-pane label="全部" name="all" />
      <el-tab-pane label="已停用" name="deactivated" />
    </el-tabs>
    <div style="display: flex; flex-direction: row-reverse">
      <div style="width: 300px">
        <el-input
          placeholder="按课程名称搜索"
          v-model="data.keyword"
          class="input-with-select"
          size="small"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="fetchData"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div style="height: calc(100vh - 248px)">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        height="100%"
      >
        <el-table-column label="课程名称">
          <template slot-scope=""> xxxxx </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>
        <el-table-column label="消课方式" width="">
          <template slot-scope=""> asfiaf </template>
        </el-table-column>
        <el-table-column label="颜色" width="">
          <template slot-scope=""> asfiaf </template>
        </el-table-column>
        <el-table-column label="描述" width="">
          <template slot-scope=""> asfiaf </template>
        </el-table-column>
        <el-table-column label="操作" width="">
          <template slot-scope=""> 修改 停用 </template>
        </el-table-column>
        <!-- <el-table-column label="Author" width="110" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.author }}</span>
            <el-link type="primary" :underline="false">{{
              scope.row.name
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="Pageviews" width="110" align="center">
        <el-table-column
          label="停用时间"
          width="200"
          v-if="activeName == 'deactivated'"
        >
          <template slot-scope="scope">
            {{ scope.row.pageviews }}
            {{ scope.row.modifyTime }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="Status" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        <el-table-column
          label="操作"
          width="200"
          v-if="activeName == 'deactivated'"
        >
          <template slot-scope="">
            <el-link type="primary" :underline="false">恢复</el-link>
          </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>
  </template>
  
  <script>
  import { getList } from "@/api/table";
  
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "gray",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        list: null,
        listLoading: true,
        activeName: "first",
    <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>
  </div>
</template>

<script>
import { getCourse, getDeletedItem } from "@/api/scheduleCourses";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
    created() {
      this.fetchData();
  },
  data() {
    return {
      list: null,
      listLoading: true,
      activeName: "all",
      total: 0,
      data: {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          //可选，如果是分页查询，需要加上。
          index: 0, //必选
          size: 10, //每页的大小。默认20
          sorts: {
            name: "name", //排序字段名称
            direction: "ASC", //排序方向
          },
        },
        types: ["BOOKING_NONE", "BOOKING_TIME_STAFF", "BOOKING_TIME_PLACE"],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleSizeChange(val) {
      this.data.pageIn.size = val;
      this.fetchData("pageIn");
    },
    methods: {
      fetchData() {
    handleCurrentChange(val) {
      this.data.pageIn.index = val - 1;
      this.fetchData("pageIn");
    },
    fetchData(_val) {
      if (_val !== "pageIn") {
        this.data.pageIn.index = 0;
        this.data.pageIn.size = 10;
      }
      this.listLoading = true;
      if (this.activeName == "all") {
        this.listLoading = true;
        getList().then((response) => {
          this.list = response.data.items;
        getCourse(this.data).then((response) => {
          this.list = response.data.findCourse.ls;
          this.total = response.data.findCourse.pageOut.total;
          this.listLoading = false;
        });
      },
      } else if (this.activeName == "deactivated") {
        this.listLoading = true;
        let data = {
          itemType: "COURSE",
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          keyword: this.data.keyword,
          pageIn: { ...this.data.pageIn },
        };
        getDeletedItem(data).then((response) => {
          this.list = response.data.findDeletedItem.ls;
          this.total = response.data.findDeletedItem.pageOut.total;
          this.listLoading = false;
        });
      }
    },
  };
  </script>
  
  },
};
</script>

 src/views/student/components/create.vue

@@ -42,6 +42,35 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课时" style="width: 400px">
          <el-input-number v-model="num" size="small"></el-input-number>
        </el-form-item>
        <el-form-item label="缴费" style="width: 400px">
          <el-input-number
            v-model="num"
            size="small"
            style="width: 200px"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="有效期" style="width: 400px">
          <div>
            <el-radio-group v-model="lifespan" @input="lifespanChange" size="mini">
              <el-radio-button label="month">一月</el-radio-button>
              <el-radio-button label="year">一年</el-radio-button>
              <el-radio-button label="longTerm">长期</el-radio-button>
              <el-radio-button label="custom">自定义</el-radio-button>
            </el-radio-group>
          </div>
          <div>
            <el-date-picker
              v-model="createData.endDate"
              type="date"
              placeholder="选择日期"
              size="small"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="课程顾问">
          <el-select
            v-model="createData.voucherId"
@@ -96,16 +125,16 @@
    return {
      dialogVisible: false,
      createData: {
        beginDate: "",
        beginDate: new Date(),
        birthday: null,
        description: "",
        detailDescription: "",
        endDate: "",
        endDate: new Date(),
        amt: 0,
        freezeQty: 0,
        gender: "男",
        mobile: "",
        orgId: "", //机构
        orgId: 25, //机构
        playerId: null,
        playerName: "",
        qty: 0,
@@ -119,6 +148,7 @@
      },
      saleManList: [],
      voucherList: [],
      lifespan:''
    };
  },
  created() {},
@@ -152,6 +182,9 @@
    goDetails(row) {
      this.$router.push("/details");
    },
    lifespanChange(val){
      console.log(val);
    }
  },
};
</script>

 src/views/student/index.vue

@@ -6,8 +6,9 @@
      <el-tab-pane label="已过期" name="expired" />
      <el-tab-pane label="已停用" name="deactivated" />
    </el-tabs>
    <div style="display: flex; justify-content: space-between;">
      <el-button type="primary" size="small" @click="showCreate">新建学员</el-button>
    <div style="display: flex; justify-content: space-between">
      <!-- <el-button type="primary" size="small" @click="showCreate">新建学员</el-button> -->
      <el-button type="primary" size="small">导出学员</el-button>
      <div style="width: 300px">
        <el-input
          placeholder="按姓名搜索"
@@ -18,43 +19,82 @@
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="fetchData"
            @click="handleClick"
          ></el-button>
        </el-input>
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
    >
      <el-table-column label="姓名" prop="">
        <template slot-scope="scope">
          <el-link
    <div style="height: calc(100vh - 248px)">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        height="100%"
      >
        <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="scope">
          {{ scope.row.gender == "FEMALE" ? "女" : "男" }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="200" prop="mobile">
        <template slot-scope="scope">
          {{ scope.row.mobile ? scope.row.mobile : "--" }}
        </template>
      </el-table-column>
      <el-table-column label="是否绑定微信" width="200">
        <template slot-scope="scope">
          {{ scope.row.user ? "是" : "否" }}
        </template>
      </el-table-column>
    </el-table>
            <!-- <el-link type="primary" :underline="false">{{
              scope.row.name
            }}</el-link> -->
          </template>
        </el-table-column>
        <el-table-column
          label="性别"
          width="80"
          v-if="activeName !== 'deactivated'"
        >
          <template slot-scope="scope">
            {{ scope.row.gender == "FEMALE" ? "女" : "男" }}
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          width="200"
          prop="mobile"
          v-if="activeName !== 'deactivated'"
        >
          <template slot-scope="scope">
            {{ scope.row.mobile ? scope.row.mobile : "--" }}
          </template>
        </el-table-column>
        <el-table-column
          label="是否绑定微信"
          width="200"
          v-if="activeName !== 'deactivated'"
        >
          <template slot-scope="scope">
            {{ scope.row.user ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          v-if="activeName == 'deactivated'"
        >
          <template slot-scope="">
            <el-link type="primary" :underline="false">删除</el-link>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-link type="primary" :underline="false">恢复</el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="停用时间"
          width="200"
          v-if="activeName == 'deactivated'"
        >
          <template slot-scope="scope">
            {{ scope.row.modifyTime }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
@@ -67,13 +107,13 @@
      >
      </el-pagination>
    </div>
    <StudentCreate ref="studentCreate"/>
    <StudentCreate ref="studentCreate" />
  </div>
</template>

<script>
import { getData, getRenew, getExpire, getDeleted } from "@/api/student";
import StudentCreate from './components/create.vue'
import StudentCreate from "./components/create.vue";

export default {
  filters: {
@@ -86,7 +126,7 @@
      return statusMap[status];
    },
  },
  components:{
  components: {
    StudentCreate,
  },
  data() {
@@ -96,7 +136,7 @@
      activeName: "all",
      total: 0,
      data: {
        staffId: JSON.parse(localStorage.getItem('user')).staffs[0].id,
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          //可选，如果是分页查询，需要加上。
@@ -124,11 +164,11 @@
    },
    handleSizeChange(val) {
      this.data.pageIn.size = val;
      this.fetchData();
      this.handleClick();
    },
    handleCurrentChange(val) {
      this.data.pageIn.index = val - 1;
      this.fetchData();
      this.handleClick();
    },
    handleClick(tab, event) {
      if (this.activeName == "pendingFees") {
@@ -149,9 +189,15 @@
        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;
        let data = {
          itemType: "PLAYER",
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          keyword: this.data.keyword,
          pageIn: { ...this.data.pageIn },
        };
        getDeleted(data).then((response) => {
          this.list = response.data.findDeletedItem.ls;
          this.total = response.data.findDeletedItem.pageOut.total;
          this.listLoading = false;
        });
      }
@@ -164,9 +210,9 @@
        },
      });
    },
    showCreate(){
      this.$refs.studentCreate.showDialog()
    }
    showCreate() {
      this.$refs.studentCreate.showDialog();
    },
  },
};
</script>

 src/views/work/index.vue

@@ -1,87 +1,135 @@
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="作业" name="first">
    <el-tabs v-model="activeName" @tab-click="fetchData">
      <el-tab-pane label="作业" name="work">
        <div style="display: flex; flex-direction: row-reverse">
          <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>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          fit
        >
          <el-table-column label="作业名称">
            <template slot-scope=""> xxxxx </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>
          <el-table-column label="内容" width="">
            <template slot-scope=""> asfiaf </template>
          </el-table-column>
          <el-table-column label="操作" width="">
            <template slot-scope=""> 修改 </template>
          </el-table-column>
        </el-table>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="作业名称">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  scope.row.name
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="布置时间" width="">
              <
              <template slot-scope="scope">
                {{ scope.row.createTime }}
              </template>
            </el-table-column>
            <el-table-column label="布置人" width="">
              <template slot-scope="scope">
                {{ scope.row.publisher.name }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="">
              <template slot-scope=""> 复制 </template>
            </el-table-column>
          </el-table>
        </div>
        <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>
      </el-tab-pane>
      <el-tab-pane label="批阅" name="fourth">
      <el-tab-pane label="批阅" name="readOver">
        <div style="display: flex; flex-direction: row-reverse">
          <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>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          fit
        >
          <el-table-column label="学员">
            <template slot-scope=""> xxxxx </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>
        <div style="height: calc(100vh - 248px)">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            fit
            height="100%"
          >
            <el-table-column label="学员">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false">{{
                  scope.row.player.name
                }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="完成时间" width="">
              <template slot-scope="scope">
                {{ scope.row.createTime }}
              </template>
            </el-table-column>
            <el-table-column label="作业" width="">
              <template slot-scope="scope">
                {{ scope.row.homework.name }}
              </template>
            </el-table-column>
            <el-table-column label="点评" width="">
              <template slot-scope="scope">
                {{ scope.row.lastStaffCommentId ? "已点评" : "未点评" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <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>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getList } from "@/api/table";
import { getHomeworkByType, getHomeworkCommentByAuth } from "@/api/work";

export default {
  filters: {
@@ -98,19 +146,64 @@
    return {
      list: null,
      listLoading: true,
      activeName: "first",
      activeName: "work",
      total: 0,
      data: {
        staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
        keyword: "",
        pageIn: {
          //可选，如果是分页查询，需要加上。
          index: 0, //必选
          size: 10, //每页的大小。默认20
          sorts: {
            name: "name", //排序字段名称
            direction: "ASC", //排序方向
          },
        },
        commentTypes: ["HOMEWORK"],
        homeworkType: "HOMEWORK",
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
    handleSizeChange(val) {
      this.data.pageIn.size = val;
      this.fetchData("pageIn");
    },
    handleCurrentChange(val) {
      this.data.pageIn.index = val - 1;
      this.fetchData("pageIn");
    },
    fetchData(_val) {
      if (_val !== "pageIn") {
        this.data.pageIn.index = 0;
        this.data.pageIn.size = 10;
      }
      this.listLoading = true;
      getList().then((response) => {
        this.list = response.data.items;
        this.listLoading = false;
      });
      if (this.activeName == "work") {
        this.listLoading = true;
        getHomeworkByType(this.data).then((response) => {
          this.list = response.data.findHomeworkByType.ls;
          this.total = response.data.findHomeworkByType.pageOut.total;
          this.listLoading = false;
        });
      } else if (this.activeName == "readOver") {
        this.listLoading = true;
        let data = {
          commentTypes: ["PLAYER_REPLY"],
          staffId: JSON.parse(localStorage.getItem("user")).staffs[0].id,
          keyword: this.data.keyword,
          pageIn: { ...this.data.pageIn },
        };
        getHomeworkCommentByAuth(data).then((response) => {
          this.list = response.data.findHomeworkCommentByAuth.ls;
          this.total = response.data.findHomeworkCommentByAuth.pageOut.total;
          this.listLoading = false;
        });
      }
    },
  },
};

 vue.config.js

@@ -39,7 +39,7 @@
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        // 匹配所有以 '/dev-api'开头的请求路径
        target: "http://192.168.3.88:18080/dream_test", //类似于Nginx反向代理
        target: "http://192.168.3.87:18081/dream", //类似于Nginx反向代理
        changeOrigin: true, // 支持跨域
        pathRewrite: {
          // 重写路径: 去掉路径中开头的'/dev-api'