|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div>
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <el-col :span="24" class="first-row">
|
|
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <el-row>
|
|
|
|
|
+ <el-col :span="24" class="first-row">
|
|
|
<div id="first-left">
|
|
<div id="first-left">
|
|
|
<div id="logo"></div>
|
|
<div id="logo"></div>
|
|
|
<div class="tag">缴费名单</div>
|
|
<div class="tag">缴费名单</div>
|
|
@@ -12,186 +12,170 @@
|
|
|
<el-link>模板下载</el-link>
|
|
<el-link>模板下载</el-link>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
<hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 32px;">
|
|
<hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 32px;">
|
|
|
- <el-row>
|
|
|
|
|
- <el-col :span="24" class="second-row">
|
|
|
|
|
- <div class="total_balance">关键字:</div>
|
|
|
|
|
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
|
|
- <el-form-item class="shuibiaoId">
|
|
|
|
|
- <el-input v-model="formInline.user" placeholder="请输入姓名或学号"></el-input>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item>
|
|
|
|
|
- <el-button type="primary" @click="onSubmit">搜索</el-button>
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-form>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <el-col :span="24" class="third-row">
|
|
|
|
|
- <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
|
|
|
|
|
- @selection-change="handleSelectionChange" highlight-current-row>
|
|
|
|
|
- <el-table-column label="学号" width="300" align="center">
|
|
|
|
|
- <template slot-scope="scope">{{ scope.row.id }}</template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column prop="stuName" label="姓名" width="180"></el-table-column>
|
|
|
|
|
|
|
+ <el-row>
|
|
|
|
|
+ <el-col :span="24" class="second-row">
|
|
|
|
|
+ <div class="total_balance">关键字:</div>
|
|
|
|
|
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
|
|
+ <el-form-item class="shuibiaoId">
|
|
|
|
|
+ <el-input v-model="formInline.user" placeholder="请输入姓名或学号"></el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item>
|
|
|
|
|
+ <el-button type="primary" @click="onSubmit">搜索</el-button>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-form>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <el-row>
|
|
|
|
|
+ <el-col :span="24" class="third-row">
|
|
|
|
|
+ <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
|
|
|
|
|
+ @selection-change="handleSelectionChange" highlight-current-row>
|
|
|
|
|
+ <el-table-column label="学号" width="300" align="center">
|
|
|
|
|
+ <template slot-scope="scope">{{ scope.row.id }}</template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="stuName" label="姓名" width="180"></el-table-column>
|
|
|
<el-table-column prop="institute" label="学院" width="260"></el-table-column>
|
|
<el-table-column prop="institute" label="学院" width="260"></el-table-column>
|
|
|
<el-table-column prop="major" label="专业" width="220"></el-table-column>
|
|
<el-table-column prop="major" label="专业" width="220"></el-table-column>
|
|
|
<el-table-column prop="class" label="班级" width="220"></el-table-column>
|
|
<el-table-column prop="class" label="班级" width="220"></el-table-column>
|
|
|
- <el-table-column prop="money" label="缴费余额(元)" width="220" widshow-overflow-tooltip></el-table-column>
|
|
|
|
|
- <el-table-column label="操作" align="center" width="120">
|
|
|
|
|
- <el-button class="show-btn" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">详情
|
|
|
|
|
- </el-button>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- </el-table>
|
|
|
|
|
- <div style="margin-top: 20px" class="table-footer">
|
|
|
|
|
- <div class="pages">
|
|
|
|
|
- <el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- <el-row>
|
|
|
|
|
- <el-col :span="24" class="forth-row">
|
|
|
|
|
- <!-- 编辑对话框 -->
|
|
|
|
|
- <el-dialog title="详情" :visible.sync="editdialogFormVisible" width="520px" top="0vh" class="my-dialog">
|
|
|
|
|
- <div class="right-tip">关于缴费金额的包含费用</div>
|
|
|
|
|
|
|
+ <el-table-column prop="money" label="缴费余额(元)" width="220" widshow-overflow-tooltip></el-table-column>
|
|
|
|
|
+ <el-table-column label="操作" align="center" width="120">
|
|
|
|
|
+ <el-button class="show-btn" slot-scope="scope" @click="handleEdit(scope.$index, scope.row)">详情
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ <div style="margin-top: 20px" class="table-footer">
|
|
|
|
|
+ <div class="pages">
|
|
|
|
|
+ <el-pagination layout="prev, pager, next" :total="1"></el-pagination>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <el-row>
|
|
|
|
|
+ <el-col :span="24" class="forth-row">
|
|
|
|
|
+ <!-- 编辑对话框 -->
|
|
|
|
|
+ <el-dialog title="详情" :visible.sync="editdialogFormVisible" width="520px" top="0vh" class="my-dialog">
|
|
|
|
|
+ <div class="right-tip">关于缴费金额的包含费用</div>
|
|
|
<hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 20px;">
|
|
<hr style="background-color: #CCCCCC;height: 1px;border: 0;margin-top: 20px;">
|
|
|
<div id="money_list">
|
|
<div id="money_list">
|
|
|
- <div class="view-balance">学费:{{ e_money }}元</div>
|
|
|
|
|
- <div class="view-balance">住宿费:{{ e_money }}元</div>
|
|
|
|
|
- <div class="view-balance">预收材料费:{{ e_money }}元</div>
|
|
|
|
|
- <div class="view-balance">体检费:{{ e_money }}元</div>
|
|
|
|
|
- <div class="view-balance">保险费:{{ e_money }}元</div>
|
|
|
|
|
- <div class="view-balance">空调租赁费:{{ e_money }}元</div>
|
|
|
|
|
- <div class="view-balance">军训服:{{ e_money }}元</div>
|
|
|
|
|
- <div class="view-balance">生活用品:{{ e_money }}元</div>
|
|
|
|
|
|
|
+ <p v-for="(user,i) in payItemDetail">{{user}}</p>
|
|
|
</div>
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
- export default {
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- editdialogFormVisible: false,
|
|
|
|
|
- delDialogVisible: false,
|
|
|
|
|
- form: {
|
|
|
|
|
- id: 'KB580002652',
|
|
|
|
|
- drom: '18',
|
|
|
|
|
- room: '118'
|
|
|
|
|
- },
|
|
|
|
|
- formLabelWidth: '120px',
|
|
|
|
|
- formInline: {
|
|
|
|
|
- user: '',
|
|
|
|
|
- options: [{
|
|
|
|
|
- value: '选项1',
|
|
|
|
|
- label: '全部'
|
|
|
|
|
- }, {
|
|
|
|
|
- value: '选项2',
|
|
|
|
|
- label: '黄金糕'
|
|
|
|
|
- }],
|
|
|
|
|
- value: '选项1'
|
|
|
|
|
- },
|
|
|
|
|
- tableData: [{
|
|
|
|
|
- id: '20140309010103',
|
|
|
|
|
- stuName: '全红禅',
|
|
|
|
|
- institute: '跳水学院',
|
|
|
|
|
- major: '跳水研究',
|
|
|
|
|
- class: '跳水一班',
|
|
|
|
|
- money: '21900'
|
|
|
|
|
- }, {
|
|
|
|
|
- id: '20140309010103',
|
|
|
|
|
- stuName: '全红禅',
|
|
|
|
|
- institute: '跳水学院',
|
|
|
|
|
- major: '跳水研究',
|
|
|
|
|
- class: '跳水一班',
|
|
|
|
|
- money: '21900'
|
|
|
|
|
- }, {
|
|
|
|
|
- id: '20140309010103',
|
|
|
|
|
- stuName: '全红禅',
|
|
|
|
|
- institute: '跳水学院',
|
|
|
|
|
- major: '跳水研究',
|
|
|
|
|
- class: '跳水一班',
|
|
|
|
|
- money: '21900'
|
|
|
|
|
- }, {
|
|
|
|
|
- id: '20140309010103',
|
|
|
|
|
- stuName: '全红禅',
|
|
|
|
|
- institute: '跳水学院',
|
|
|
|
|
- major: '跳水研究',
|
|
|
|
|
- class: '跳水一班',
|
|
|
|
|
- money: '21900'
|
|
|
|
|
- }, {
|
|
|
|
|
- id: '20140309010103',
|
|
|
|
|
- stuName: '全红禅',
|
|
|
|
|
- institute: '跳水学院',
|
|
|
|
|
- major: '跳水研究',
|
|
|
|
|
- class: '跳水一班',
|
|
|
|
|
- money: '21900'
|
|
|
|
|
- }, {
|
|
|
|
|
- id: '20140309010103',
|
|
|
|
|
- stuName: '全红禅',
|
|
|
|
|
- institute: '跳水学院',
|
|
|
|
|
- major: '跳水研究',
|
|
|
|
|
- class: '跳水一班',
|
|
|
|
|
- money: '21900'
|
|
|
|
|
- }, {
|
|
|
|
|
- id: '20140309010103',
|
|
|
|
|
- stuName: '全红禅',
|
|
|
|
|
- institute: '跳水学院',
|
|
|
|
|
- major: '跳水研究',
|
|
|
|
|
- class: '跳水一班',
|
|
|
|
|
- money: '21900'
|
|
|
|
|
- }, {
|
|
|
|
|
- id: '20140309010103',
|
|
|
|
|
- stuName: '全红禅',
|
|
|
|
|
- institute: '跳水学院',
|
|
|
|
|
- major: '跳水研究',
|
|
|
|
|
- class: '跳水一班',
|
|
|
|
|
- money: '21900'
|
|
|
|
|
- }],
|
|
|
|
|
- multipleSelection: [],
|
|
|
|
|
- e_money: '5980'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- onSubmit() {
|
|
|
|
|
- console.log('submit!')
|
|
|
|
|
- },
|
|
|
|
|
- handleOpen(key, keyPath) {
|
|
|
|
|
- console.log(key, keyPath)
|
|
|
|
|
- },
|
|
|
|
|
- handleClose(key, keyPath) {
|
|
|
|
|
- console.log(key, keyPath)
|
|
|
|
|
- },
|
|
|
|
|
- toggleSelection(rows) {
|
|
|
|
|
- if (rows) {
|
|
|
|
|
- rows.forEach(row => {
|
|
|
|
|
- this.$refs.multipleTable.toggleRowSelection(row)
|
|
|
|
|
- })
|
|
|
|
|
- } else {
|
|
|
|
|
- this.$refs.multipleTable.clearSelection()
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- handleSelectionChange(val) {
|
|
|
|
|
- this.multipleSelection = val
|
|
|
|
|
- },
|
|
|
|
|
- handleEdit(index, row) {
|
|
|
|
|
- this.editdialogFormVisible = true
|
|
|
|
|
- console.log(index, row)
|
|
|
|
|
- },
|
|
|
|
|
- handleDelete(index, row) {
|
|
|
|
|
- this.delDialogVisible = true
|
|
|
|
|
- console.log(index, row)
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ editdialogFormVisible: false,
|
|
|
|
|
+ delDialogVisible: false,
|
|
|
|
|
+ form: {
|
|
|
|
|
+ id: 'KB580002652',
|
|
|
|
|
+ drom: '18',
|
|
|
|
|
+ room: '118'
|
|
|
|
|
+ },
|
|
|
|
|
+ formLabelWidth: '120px',
|
|
|
|
|
+ formInline: {
|
|
|
|
|
+ user: '',
|
|
|
|
|
+ options: [{
|
|
|
|
|
+ value: '选项1',
|
|
|
|
|
+ label: '全部'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ value: '选项2',
|
|
|
|
|
+ label: '黄金糕'
|
|
|
|
|
+ }],
|
|
|
|
|
+ value: '选项1'
|
|
|
|
|
+ },
|
|
|
|
|
+ tableData: [], //主页数据
|
|
|
|
|
+ payItemDetail: [], //详细数据
|
|
|
|
|
+ multipleSelection: [],
|
|
|
|
|
+ e_money: '5980',
|
|
|
|
|
+ user_info: {},
|
|
|
|
|
+ user_token: '',
|
|
|
|
|
+ // url: 'http://192.168.161.230:9999/tuitionpayment/payableinfo/list', //测试
|
|
|
|
|
+ url:'https://jtishfw.ncjti.edu.cn/jiaofei/backendApi/tuitionpayment/payableinfo/list'
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ onSubmit() {
|
|
|
|
|
+ console.log('submit!')
|
|
|
|
|
+ },
|
|
|
|
|
+ handleOpen(key, keyPath) {
|
|
|
|
|
+ console.log(key, keyPath)
|
|
|
|
|
+ },
|
|
|
|
|
+ handleClose(key, keyPath) {
|
|
|
|
|
+ console.log(key, keyPath)
|
|
|
|
|
+ },
|
|
|
|
|
+ toggleSelection(rows) {
|
|
|
|
|
+ if (rows) {
|
|
|
|
|
+ rows.forEach(row => {
|
|
|
|
|
+ this.$refs.multipleTable.toggleRowSelection(row)
|
|
|
|
|
+ })
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$refs.multipleTable.clearSelection()
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ handleSelectionChange(val) {
|
|
|
|
|
+ this.multipleSelection = val
|
|
|
|
|
+ },
|
|
|
|
|
+ handleEdit(index, row) {
|
|
|
|
|
+ this.editdialogFormVisible = true
|
|
|
|
|
+ // console.log(index,row)
|
|
|
|
|
+ var itemDetail = [] //临时数组
|
|
|
|
|
+ var detail = row.payItemDetail.split('\\')
|
|
|
|
|
+ // console.log(detail.length)
|
|
|
|
|
+ for (var j = 0; j < detail.length; j++) {
|
|
|
|
|
+ this.payItemDetail[j] = detail[j]
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log(this.payItemDetail)
|
|
|
|
|
+ },
|
|
|
|
|
+ handleDelete(index, row) {
|
|
|
|
|
+ this.delDialogVisible = true
|
|
|
|
|
+ console.log(index, row)
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ created: function() {
|
|
|
|
|
+ this.user_info = JSON.parse(sessionStorage.getItem('usr_info'))
|
|
|
|
|
+ // console.log(this.user_info)
|
|
|
|
|
+ if( this.user_info == null || this.user_info.userName != 'admin' || this.user_info.password != '123456'){
|
|
|
|
|
+ this.$router.push({
|
|
|
|
|
+ path: '/jiaofei/'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ this.user_token = this.user_info.token
|
|
|
|
|
+ this.$axios.get( this.url, {
|
|
|
|
|
+ headers: {
|
|
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
|
|
|
|
|
+ 'Author': 'codingliang',
|
|
|
|
|
+ 'admin_token': this.user_token
|
|
|
|
|
+ }
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ // console.log(res)
|
|
|
|
|
+ // console.log(res.data.data.list.length)
|
|
|
|
|
+ for (var i = 0; i < res.data.data.list.length; i++) {
|
|
|
|
|
+ var list = {} //外层数据
|
|
|
|
|
+ // var list2 = {} //详细数据
|
|
|
|
|
+ list.id = res.data.data.list[i].studentNo
|
|
|
|
|
+ list.stuName = res.data.data.list[i].studentName
|
|
|
|
|
+ list.institute = res.data.data.list[i].collegeName
|
|
|
|
|
+ list.major = res.data.data.list[i].majorName
|
|
|
|
|
+ list.class = res.data.data.list[i].className
|
|
|
|
|
+ list.money = res.data.data.list[i].realPayAmount
|
|
|
|
|
+ list.payItemDetail = res.data.data.list[i].payItemDetail
|
|
|
|
|
+ this.tableData.push(list)
|
|
|
|
|
+ }
|
|
|
|
|
+ // console.log(this.tableData)
|
|
|
|
|
+ }).catch(err => {
|
|
|
|
|
+ console.log(err)
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
- @import url("payNameList.css");
|
|
|
|
|
|
|
+ @import url("payNameList.css");
|
|
|
</style>
|
|
</style>
|