| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-tabs v-model="activeName" @tab-click="handleClick"> |
| | | <el-tab-pane label="全部" name="all" /> |
| | | <el-tab-pane label="待续费" name="pendingFees" /> |
| | | <el-tab-pane label="已过期" name="expired" /> |
| | | <el-tab-pane label="已停用" name="deactivated" /> |
| | | </el-tabs> |
| | | <div style="display: flex; justify-content: space-between"> |
| | | <!-- <el-button type="primary" size="small" @click="showCreate">新建学员</el-button> --> |
| | | <div> |
| | | <el-button type="primary" size="small" @click="handleExport" |
| | | >导出学员</el-button |
| | | > |
| | | <el-button type="primary" size="small" @click="handleImport" |
| | | >导入学员</el-button |
| | | > |
| | | </div> |
| | | <div style="width: 500px"> |
| | | <!-- <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" |
| | | <div class="app-container"> |
| | | <el-tabs v-model="activeName" @tab-click="handleClick"> |
| | | <el-tab-pane label="全部" name="all" /> |
| | | <el-tab-pane label="待续费" name="pendingFees" /> |
| | | <el-tab-pane label="已过期" name="expired" /> |
| | | <el-tab-pane label="已停用" name="deactivated" /> |
| | | </el-tabs> |
| | | <div style="display: flex; justify-content: space-between"> |
| | | <!-- <el-button type="primary" size="small" @click="showCreate">新建学员</el-button> --> |
| | | <div> |
| | | <el-button type="primary" size="small" @click="handleExport" |
| | | >导出学员</el-button |
| | | > |
| | | <el-button type="primary" size="small" @click="handleImport" |
| | | >导入学员</el-button |
| | | > |
| | | </div> |
| | | <div style="width: 500px"> |
| | | <!-- <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" |
| | | end-placeholder="结束日期" value-format="yyyy-MM-dd" style="margin-right: 10px"> |
| | | </el-date-picker> |
| | | <el-button type="primary" @click="handleExport2">导出课包</el-button> --> |
| | | </div> |
| | | <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="handleClick" |
| | | ></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="姓名" prop=""> |
| | | <template slot-scope="scope"> |
| | | <el-link |
| | | type="primary" |
| | | :underline="false" |
| | | @click="goDetails(scope.row)" |
| | | >{{ scope.row.name }}</el-link |
| | | </div> |
| | | <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="handleClick" |
| | | ></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-link type="primary" :underline="false">{{ |
| | | <el-table-column label="姓名" prop=""> |
| | | <template slot-scope="scope"> |
| | | <el-link |
| | | type="primary" |
| | | :underline="false" |
| | | @click="goDetails(scope.row)" |
| | | >{{ scope.row.name }}</el-link |
| | | > |
| | | <!-- <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> |
| | | |
| | | <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> |
| | | </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 |
| | | > |
| | | |
| | | <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" |
| | | @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 :visible.sync="dialogVisible" width="560px" title="导入学员"> |
| | | <UploadStudent |
| | | v-if="dialogVisible" |
| | | @load-success="reloadData" |
| | | ></UploadStudent> |
| | | </el-dialog> |
| | | </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 :visible.sync="dialogVisible" width="560px" title="导入学员"> |
| | | <UploadStudent |
| | | v-if="dialogVisible" |
| | | @load-success="reloadData" |
| | | ></UploadStudent> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | import UploadStudent from "./components/upload-student.vue"; |
| | | |
| | | export default { |
| | | filters: { |
| | | statusFilter(status) { |
| | | const statusMap = { |
| | | published: "success", |
| | | draft: "gray", |
| | | deleted: "danger", |
| | | }; |
| | | return statusMap[status]; |
| | | }, |
| | | }, |
| | | components: { |
| | | UploadStudent, |
| | | }, |
| | | data() { |
| | | return { |
| | | dateRange: [], |
| | | 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", //排序方向 |
| | | }, |
| | | filters: { |
| | | statusFilter(status) { |
| | | const statusMap = { |
| | | published: "success", |
| | | draft: "gray", |
| | | deleted: "danger", |
| | | }; |
| | | return statusMap[status]; |
| | | }, |
| | | }, |
| | | dialogVisible: false, |
| | | }; |
| | | }, |
| | | created() { |
| | | // 获取地址栏code |
| | | // let code = this.$route.query.code; |
| | | // if (code) { |
| | | // if (localStorage.getItem("code")) { |
| | | // if (code !== localStorage.getItem("code")) { |
| | | // this.getUserDate(code); |
| | | // } |
| | | // } else { |
| | | // this.getUserDate(code); |
| | | // } |
| | | // } else { |
| | | // if (!localStorage.getItem("user")) { |
| | | // this.$router.push("/login"); |
| | | // } |
| | | // } |
| | | if (localStorage.getItem("user")) { |
| | | this.fetchData(); |
| | | } else { |
| | | this.$router.push("/login"); |
| | | } |
| | | }, |
| | | methods: { |
| | | handleExport() { |
| | | this.download( |
| | | "exportPlayer?orgId=" + |
| | | JSON.parse(localStorage.getItem("selectStaff")).org.id, |
| | | {}, |
| | | `导出_${new Date().getTime()}.xlsx` |
| | | ); |
| | | }, |
| | | handleExport2() { |
| | | if (this.dateRange.length == 0) { |
| | | this.$message.warning("请选择日期范围"); |
| | | return; |
| | | } |
| | | this.download( |
| | | "exportReport?startDate=" + |
| | | this.dateRange[0] + |
| | | "&endDate=" + |
| | | this.dateRange[1], |
| | | {}, |
| | | `导出_${new Date().getTime()}.xlsx` |
| | | ); |
| | | components: { |
| | | UploadStudent, |
| | | }, |
| | | handleImport() { |
| | | this.dialogVisible = true; |
| | | }, |
| | | reloadData() { |
| | | this.dialogVisible = false; |
| | | this.fetchData(); |
| | | }, |
| | | fetchData() { |
| | | this.listLoading = true; |
| | | getData(this.data).then((response) => { |
| | | this.list = response.data.findPlayerByStaff.ls; |
| | | this.total = response.data.findPlayerByStaff.pageOut.total; |
| | | this.listLoading = false; |
| | | }); |
| | | }, |
| | | handleSizeChange(val) { |
| | | this.data.pageIn.size = val; |
| | | this.handleClick(); |
| | | }, |
| | | handleCurrentChange(val) { |
| | | this.data.pageIn.index = val - 1; |
| | | this.handleClick(); |
| | | }, |
| | | handleClick(tab, event) { |
| | | this.data.staffId = JSON.parse(localStorage.getItem("selectStaff")).id; |
| | | if (this.activeName == "pendingFees") { |
| | | this.listLoading = true; |
| | | getRenew(this.data).then((response) => { |
| | | this.list = response.data.findPlayerRenew.ls; |
| | | this.total = response.data.findPlayerRenew.pageOut.total; |
| | | this.listLoading = false; |
| | | }); |
| | | } else if (this.activeName == "expired") { |
| | | this.listLoading = true; |
| | | getExpire(this.data).then((response) => { |
| | | this.list = response.data.findPlayerExpire.ls; |
| | | this.total = response.data.findPlayerExpire.pageOut.total; |
| | | this.listLoading = false; |
| | | }); |
| | | } else if (this.activeName == "all") { |
| | | this.fetchData(); |
| | | } else if (this.activeName == "deactivated") { |
| | | this.listLoading = true; |
| | | let data = { |
| | | itemType: "PLAYER", |
| | | staffId: JSON.parse(localStorage.getItem("selectStaff")).id, |
| | | keyword: this.data.keyword, |
| | | pageIn: { ...this.data.pageIn }, |
| | | data() { |
| | | return { |
| | | dateRange: [], |
| | | 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", //排序方向 |
| | | }, |
| | | }, |
| | | }, |
| | | dialogVisible: false, |
| | | }; |
| | | getDeleted(data).then((response) => { |
| | | this.list = response.data.findDeletedItem.ls; |
| | | this.total = response.data.findDeletedItem.pageOut.total; |
| | | this.listLoading = false; |
| | | }); |
| | | } |
| | | }, |
| | | goDetails(row) { |
| | | this.$router.push({ |
| | | name: "StudentDetails", |
| | | query: { |
| | | id: row.id, |
| | | created() { |
| | | // 获取地址栏code |
| | | // let code = this.$route.query.code; |
| | | // if (code) { |
| | | // if (localStorage.getItem("code")) { |
| | | // if (code !== localStorage.getItem("code")) { |
| | | // this.getUserDate(code); |
| | | // } |
| | | // } else { |
| | | // this.getUserDate(code); |
| | | // } |
| | | // } else { |
| | | // if (!localStorage.getItem("user")) { |
| | | // this.$router.push("/login"); |
| | | // } |
| | | // } |
| | | if (localStorage.getItem("user")) { |
| | | this.fetchData(); |
| | | } else { |
| | | this.$router.push("/login"); |
| | | } |
| | | }, |
| | | methods: { |
| | | handleExport() { |
| | | this.download( |
| | | "exportPlayer?orgId=" + |
| | | JSON.parse(localStorage.getItem("selectStaff")).org.id, |
| | | {}, |
| | | `导出_${new Date().getTime()}.xlsx` |
| | | ); |
| | | }, |
| | | }); |
| | | handleExport2() { |
| | | if (this.dateRange.length == 0) { |
| | | this.$message.warning("请选择日期范围"); |
| | | return; |
| | | } |
| | | this.download( |
| | | "exportReport?startDate=" + |
| | | this.dateRange[0] + |
| | | "&endDate=" + |
| | | this.dateRange[1], |
| | | {}, |
| | | `导出_${new Date().getTime()}.xlsx` |
| | | ); |
| | | }, |
| | | handleImport() { |
| | | this.dialogVisible = true; |
| | | }, |
| | | reloadData() { |
| | | this.dialogVisible = false; |
| | | this.fetchData(); |
| | | }, |
| | | fetchData() { |
| | | this.listLoading = true; |
| | | getData(this.data).then((response) => { |
| | | this.list = response.data.findPlayerByStaff.ls; |
| | | this.total = response.data.findPlayerByStaff.pageOut.total; |
| | | this.listLoading = false; |
| | | }); |
| | | }, |
| | | handleSizeChange(val) { |
| | | this.data.pageIn.size = val; |
| | | this.handleClick(); |
| | | }, |
| | | handleCurrentChange(val) { |
| | | this.data.pageIn.index = val - 1; |
| | | this.handleClick(); |
| | | }, |
| | | handleClick(tab, event) { |
| | | this.data.staffId = JSON.parse(localStorage.getItem("selectStaff")).id; |
| | | if (this.activeName == "pendingFees") { |
| | | this.listLoading = true; |
| | | getRenew(this.data).then((response) => { |
| | | this.list = response.data.findPlayerRenew.ls; |
| | | this.total = response.data.findPlayerRenew.pageOut.total; |
| | | this.listLoading = false; |
| | | }); |
| | | } else if (this.activeName == "expired") { |
| | | this.listLoading = true; |
| | | getExpire(this.data).then((response) => { |
| | | this.list = response.data.findPlayerExpire.ls; |
| | | this.total = response.data.findPlayerExpire.pageOut.total; |
| | | this.listLoading = false; |
| | | }); |
| | | } else if (this.activeName == "all") { |
| | | this.fetchData(); |
| | | } else if (this.activeName == "deactivated") { |
| | | this.listLoading = true; |
| | | let data = { |
| | | itemType: "PLAYER", |
| | | staffId: JSON.parse(localStorage.getItem("selectStaff")).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; |
| | | }); |
| | | } |
| | | }, |
| | | goDetails(row) { |
| | | this.$router.push({ |
| | | name: "StudentDetails", |
| | | query: { |
| | | id: row.id, |
| | | }, |
| | | }); |
| | | }, |
| | | showCreate() { |
| | | this.$refs.studentCreate.showDialog(); |
| | | }, |
| | | |
| | | }, |
| | | showCreate() { |
| | | this.$refs.studentCreate.showDialog(); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |