From e3474cf91877c95964b0d87fe55311941e601d6b Mon Sep 17 00:00:00 2001 From: 黄何裕 <1053952480@qq.com> Date: 星期四, 01 八月 2024 18:12:16 +0800 Subject: [PATCH] 创建和详情页面 --- src/views/student/index.vue | 139 +++++++++++++++++++++++++++++++++------------- 1 files changed, 100 insertions(+), 39 deletions(-) diff --git a/src/views/student/index.vue b/src/views/student/index.vue index 568500f..d91dae9 100644 --- a/src/views/student/index.vue +++ b/src/views/student/index.vue @@ -1,20 +1,25 @@ <template> <div class="app-container"> <el-tabs v-model="activeName" @tab-click="handleClick"> - <el-tab-pane label="鍏ㄩ儴" name="first" /> - <el-tab-pane label="寰呯画璐�" name="second" /> - <el-tab-pane label="宸茶繃鏈�" name="third" /> - <el-tab-pane label="宸插仠鐢�" name="fourth" /> + <el-tab-pane label="鍏ㄩ儴" name="all" /> + <el-tab-pane label="寰呯画璐�" name="pendingFees" /> + <el-tab-pane label="宸茶繃鏈�" name="expired" /> + <el-tab-pane label="宸插仠鐢�" name="deactivated" /> </el-tabs> - <div style="display: flex; flex-direction: row-reverse"> + <div style="display: flex; justify-content: space-between;"> + <el-button type="primary" size="small" @click="showCreate">鏂板缓瀛﹀憳</el-button> <div style="width: 300px"> <el-input placeholder="鎸夊鍚嶆悳绱�" - v-model="input3" + v-model="data.keyword" class="input-with-select" size="small" > - <el-button slot="append" icon="el-icon-search"></el-button> + <el-button + slot="append" + icon="el-icon-search" + @click="fetchData" + ></el-button> </el-input> </div> </div> @@ -24,49 +29,51 @@ element-loading-text="Loading" fit > - <el-table-column label="濮撳悕"> - <template slot-scope=""> xxxxx </template> + <el-table-column label="濮撳悕" prop=""> + <template slot-scope="scope"> + <el-link + type="primary" + :underline="false" + @click="goDetails(scope.row)" + >{{ scope.row.name }}</el-link + > + </template> </el-table-column> <el-table-column label="鎬у埆" width="80"> - <template slot-scope=""> 鐢� </template> - </el-table-column> - <el-table-column label="鎵嬫満鍙�" width="200"> - <template slot-scope=""> 10086 </template> - </el-table-column> - <el-table-column label="寰俊" width="200"> - <template slot-scope=""> asfiaf </template> - </el-table-column> - <el-table-column label="璐︽埛" width=""> - <template slot-scope=""> asfiaf </template> - </el-table-column> - {{ accountList }} - <!-- <el-table-column label="Author" width="110" align="center"> <template slot-scope="scope"> - <span>{{ scope.row.author }}</span> + {{ scope.row.gender == "FEMALE" ? "濂�" : "鐢�" }} </template> </el-table-column> - <el-table-column label="Pageviews" width="110" align="center"> + <el-table-column label="鎵嬫満鍙�" width="200" prop="mobile"> <template slot-scope="scope"> - {{ scope.row.pageviews }} + {{ scope.row.mobile ? scope.row.mobile : "--" }} </template> </el-table-column> - <el-table-column class-name="status-col" label="Status" width="110" align="center"> + <el-table-column label="鏄惁缁戝畾寰俊" width="200"> <template slot-scope="scope"> - <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag> + {{ scope.row.user ? "鏄�" : "鍚�" }} </template> </el-table-column> - <el-table-column align="center" prop="created_at" label="Display_time" width="200"> - <template slot-scope="scope"> - <i class="el-icon-time" /> - <span>{{ scope.row.display_time }}</span> - </template> - </el-table-column> --> </el-table> + <div> + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="data.pageIn.index + 1" + :page-sizes="[10, 20, 30, 40]" + :page-size="data.pageIn.size" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + > + </el-pagination> + </div> + <StudentCreate ref="studentCreate"/> </div> </template> <script> -import { getData } from "@/api/student"; +import { getData, getRenew, getExpire, getDeleted } from "@/api/student"; +import StudentCreate from './components/create.vue' export default { filters: { @@ -79,18 +86,26 @@ return statusMap[status]; }, }, + components:{ + StudentCreate, + }, data() { return { list: null, listLoading: true, - activeName: "first", + activeName: "all", + total: 0, data: { - staffId: "1680", + staffId: JSON.parse(localStorage.getItem('user')).staffs[0].id, keyword: "", pageIn: { //鍙�夛紝濡傛灉鏄垎椤垫煡璇紝闇�瑕佸姞涓娿�� - index: 1, //蹇呴�� - size: 20, //姣忛〉鐨勫ぇ灏忋�傞粯璁�20 + index: 0, //蹇呴�� + size: 10, //姣忛〉鐨勫ぇ灏忋�傞粯璁�20 + sorts: { + name: "name", //鎺掑簭瀛楁鍚嶇О + direction: "ASC", //鎺掑簭鏂瑰悜 + }, }, }, }; @@ -102,10 +117,56 @@ fetchData() { this.listLoading = true; getData(this.data).then((response) => { - this.list = response.data.items; + this.list = response.data.findPlayerByStaff.ls; + this.total = response.data.findPlayerByStaff.pageOut.total; this.listLoading = false; }); }, + handleSizeChange(val) { + this.data.pageIn.size = val; + this.fetchData(); + }, + handleCurrentChange(val) { + this.data.pageIn.index = val - 1; + this.fetchData(); + }, + handleClick(tab, event) { + if (this.activeName == "pendingFees") { + this.listLoading = true; + getRenew(this.data).then((response) => { + this.list = response.data.findPlayerRenew.ls; + this.total = response.data.findPlayerRenew.pageOut.total; + this.listLoading = false; + }); + } else if (this.activeName == "expired") { + this.listLoading = true; + getExpire(this.data).then((response) => { + this.list = response.data.findPlayerExpire.ls; + this.total = response.data.findPlayerExpire.pageOut.total; + this.listLoading = false; + }); + } else if (this.activeName == "all") { + this.fetchData(); + } else if (this.activeName == "deactivated") { + this.listLoading = true; + getExpire(this.data).then((response) => { + this.list = response.data.findPlayerExpire.ls; + this.total = response.data.findPlayerExpire.pageOut.total; + this.listLoading = false; + }); + } + }, + goDetails(row) { + this.$router.push({ + name: "StudentDetails", + query: { + id: row.id, + }, + }); + }, + showCreate(){ + this.$refs.studentCreate.showDialog() + } }, }; </script> -- Gitblit v1.8.0