| | |
| | | <template> |
| | | <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 - 208px)"> |
| | | <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="scope"> |
| | | <el-link type="primary" :underline="false">{{ |
| | | scope.row.team.name |
| | | }}</el-link> |
| | | </template> |
| | | </el-table-column> |
| | | <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="scope">{{ |
| | | scope.row.team.voucher |
| | | ? scope.row.team.voucher.name |
| | | : '' |
| | | }}</template> |
| | | </el-table-column> |
| | | <el-table-column label="教师" width=""> |
| | | <template slot-scope="scope">{{ |
| | | concatenateArray(scope.row.team.sessionStaffs) |
| | | }}</template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="200"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="text" @click="handleExport(scope.row)"> |
| | | 导出 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </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="停用时间"> |
| | | <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> |
| | | </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-dialog title="导出" :visible.sync="dialogVisible" width="50%"> |
| | | <el-form ref="form" :model="form" label-width="180px"> |
| | | <el-form-item label="日期范围"> |
| | | <el-date-picker |
| | | v-model="form.dateRange" |
| | | type="daterange" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | value-format="yyyy-MM-dd" |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="dialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="confirmExport" |
| | | >导 出</el-button |
| | | > |
| | | </div> |
| | | </el-dialog> |
| | | <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 - 208px)"> |
| | | <el-table |
| | | v-loading="listLoading" |
| | | :data="list" |
| | | element-loading-text="Loading" |
| | | fit |
| | | v-if="activeName == 'all'" |
| | | height="100%" |
| | | > |
| | | <el-table-column label="班级名称" prop="team.name"> </el-table-column> |
| | | <el-table-column label="班级人数" width="200" prop="playerCount"> |
| | | </el-table-column> |
| | | <el-table-column label="课包/会员卡" width="200" prop="voucher.name"> |
| | | </el-table-column> |
| | | <el-table-column label="教师" width="" prop="sessionStaffs"> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="200"> |
| | | <template slot-scope="scope"> |
| | | <el-link |
| | | @click="handleExport(scope.row)" |
| | | type="primary" |
| | | :underline="false" |
| | | >导出</el-link |
| | | > |
| | | <!-- <el-button type="text" @click="handleExport(scope.row)"> |
| | | 导出 |
| | | </el-button> --> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <el-table |
| | | v-loading="listLoading" |
| | | :data="list" |
| | | element-loading-text="Loading" |
| | | fit |
| | | height="100%" |
| | | v-else |
| | | > |
| | | <el-table-column label="班级名称" prop="name"> </el-table-column> |
| | | <el-table-column label="停用时间" prop="modifyTime"> </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> |
| | | </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-dialog title="导出" :visible.sync="dialogVisible" width="50%"> |
| | | <el-form ref="form" :model="form" label-width="180px"> |
| | | <el-form-item label="日期范围"> |
| | | <el-date-picker |
| | | v-model="form.dateRange" |
| | | type="daterange" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | value-format="yyyy-MM-dd" |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button @click="dialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="confirmExport">导 出</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </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]; |
| | | }, |
| | | filters: { |
| | | statusFilter(status) { |
| | | const statusMap = { |
| | | published: "success", |
| | | draft: "gray", |
| | | deleted: "danger", |
| | | }; |
| | | return statusMap[status]; |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogVisible: false, |
| | | form: { |
| | | dateRange: [], |
| | | teamId: "", |
| | | name: "", |
| | | }, |
| | | list: null, |
| | | listLoading: true, |
| | | activeName: "all", |
| | | total: 0, |
| | | data: { |
| | | staffId: JSON.parse(localStorage.getItem("selectStaff")).id, |
| | | keyword: "", |
| | | pageIn: { |
| | | //可选,如果是分页查询,需要加上。 |
| | | index: 0, //必选 |
| | | size: 10, //每页的大小。默认20 |
| | | sorts: { |
| | | name: "name", //排序字段名称 |
| | | direction: "ASC", //排序方向 |
| | | }, |
| | | }, |
| | | types: ["NORMAL"], |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogVisible: false, |
| | | form: { |
| | | dateRange: [], |
| | | teamId: "", |
| | | name: "", |
| | | }, |
| | | list: null, |
| | | listLoading: true, |
| | | activeName: "all", |
| | | total: 0, |
| | | data: { |
| | | staffId: JSON.parse(localStorage.getItem("selectStaff")).id, |
| | | keyword: "", |
| | | pageIn: { |
| | | //可选,如果是分页查询,需要加上。 |
| | | index: 0, //必选 |
| | | size: 10, //每页的大小。默认20 |
| | | sorts: { |
| | | name: "name", //排序字段名称 |
| | | direction: "ASC", //排序方向 |
| | | }, |
| | | }, |
| | | types: ["NORMAL"], |
| | | }, |
| | | }; |
| | | }, |
| | | created() { |
| | | this.fetchData(); |
| | | }, |
| | | methods: { |
| | | handleExport(row) { |
| | | this.form.dateRange = []; |
| | | this.form.teamId = row.team.id; |
| | | this.form.name = row.team.name; |
| | | this.dialogVisible = true; |
| | | }, |
| | | confirmExport() { |
| | | this.download( |
| | | "exportSignIn?teamId=" + |
| | | this.form.teamId + |
| | | "&startTime=" + |
| | | this.form.dateRange[0] + |
| | | "&endTime=" + |
| | | this.form.dateRange[1], |
| | | {}, |
| | | `${this.form.name}上课签到表.xlsx` |
| | | ); |
| | | }, |
| | | 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; |
| | | if (this.activeName == "all") { |
| | | this.listLoading = true; |
| | | 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("selectStaff")).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; |
| | | }); |
| | | } |
| | | }, |
| | | created() { |
| | | this.fetchData(); |
| | | 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; |
| | | }, |
| | | methods: { |
| | | handleExport(row) { |
| | | this.form.dateRange = []; |
| | | this.form.teamId = row.team.id; |
| | | this.form.name = row.team.name; |
| | | this.dialogVisible = true; |
| | | }, |
| | | confirmExport() { |
| | | this.download('exportSignIn?teamId=' + this.form.teamId + '&startTime=' + this.form.dateRange[0] + '&endTime=' + this.form.dateRange[1], { |
| | | }, `${this.form.name}上课签到表.xlsx`) |
| | | }, |
| | | 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; |
| | | if (this.activeName == "all") { |
| | | this.listLoading = true; |
| | | 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("selectStaff")).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; |
| | | }); |
| | | } |
| | | }, |
| | | 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> |