|
|
@@ -7,29 +7,30 @@
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="second-row">
|
|
|
- <div class="total_balance">当日消费：14879元</div>
|
|
|
- <el-link type="primary" class="xiaofei" @click="handleEdit()">年/月消费</el-link>
|
|
|
+ <div class="total_balance">当日消费：{{today_xiaofei}}元</div>
|
|
|
+ <el-link type="primary" class="xiaofei" @click="showxiaofeiDialog">年/月消费</el-link>
|
|
|
<el-form :inline="true" class="demo-form-inline">
|
|
|
<el-form-item label="楼栋号：" class="shuibiaoId">
|
|
|
- <el-select v-model="drom_value" placeholder="请选择" class="my-select">
|
|
|
- <el-option v-for="item in drom_options" :key="item.value" :label="item.label"
|
|
|
+ <el-select v-model="drom_options.value" @change="selectGetBuild(drom_options.value)"
|
|
|
+ placeholder="请选择楼栋号" class="my-select">
|
|
|
+ <el-option v-for="item in drom_options.builds" :key="item.value" :label="item.label"
|
|
|
:value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="宿舍号：" class="shuibiaoId">
|
|
|
- <el-select v-model="room_value" placeholder="请选择" class="my-select">
|
|
|
- <el-option v-for="item in room_options" :key="item.value" :label="item.label"
|
|
|
+ <el-select v-model="room_options.room_value" @change="selectGetroom(room_options.room_value)"
|
|
|
+ placeholder="请选择宿舍号" class="my-select">
|
|
|
+ <el-option v-for="item in room_options.rooms" :key="item.value" :label="item.label"
|
|
|
:value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="日期：" class="shuibiaoId">
|
|
|
- <el-select v-model="date_value" placeholder="请选择" class="my-select">
|
|
|
- <el-option v-for="item in date_options" :key="item.value" :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
+ <div class="block">
|
|
|
+ <el-date-picker v-model="select_riqi.select_day" :editable="false" @change="selectGetDate"
|
|
|
+ value-format="yyyy-MM-dd" type="date" placeholder="当天日期"></el-date-picker>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-col>
|
|
|
@@ -43,8 +44,9 @@
|
|
|
<el-table-column label="学号" align="center">
|
|
|
<template slot-scope="scope">{{ scope.row.id }}</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="stuName" label="姓名" align="center" ></el-table-column>
|
|
|
- <el-table-column prop="balance" label="消费金额（元）" align="center" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column prop="stuName" label="姓名" align="center"></el-table-column>
|
|
|
+ <el-table-column prop="balance" label="消费金额（元）" align="center" show-overflow-tooltip>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column prop="drom" label="楼栋号" align="center" show-overflow-tooltip></el-table-column>
|
|
|
<el-table-column prop="room" label="宿舍号" align="center" show-overflow-tooltip></el-table-column>
|
|
|
<el-table-column prop="dt" label="消费时间" align="center" show-overflow-tooltip></el-table-column>
|
|
|
@@ -62,13 +64,14 @@
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="forth-row">
|
|
|
<!-- 编辑对话框 -->
|
|
|
- <el-dialog title="消费情况" :visible.sync="editdialogFormVisible" width="640px" top="0vh" class="my-dialog">
|
|
|
+ <el-dialog title="消费情况" :visible.sync="xiaofeiDialog" :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false" width="640px" top="0vh" class="my-dialog">
|
|
|
<hr
|
|
|
style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
|
|
|
- <div class="view-balance">当日消费：{{ day_balance }}元</div>
|
|
|
- <div class="view-balance">当月消费：{{ month_balance }}元</div>
|
|
|
- <div class="view-balance">当年消费：{{ year_balance }}元</div>
|
|
|
- <div class="view-balance"></div>
|
|
|
+ <div class="view-balance">当日消费：{{ xiaofei.day_balance }}元</div>
|
|
|
+ <div class="view-balance">当月消费：{{ xiaofei.month_balance }}元</div>
|
|
|
+ <div class="view-balance">当年消费：{{ xiaofei.year_balance }}元</div>
|
|
|
+ <div class="view-balance"></div>
|
|
|
</el-dialog>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -79,129 +82,277 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- day_balance: 88888,
|
|
|
- month_balance: 888888,
|
|
|
- year_balance: 8888888,
|
|
|
- drom_options: [{
|
|
|
- value: '0',
|
|
|
- label: '全部'
|
|
|
- },{
|
|
|
- value: '1',
|
|
|
- label: '1栋'
|
|
|
- }, {
|
|
|
- value: '2',
|
|
|
- label: '2栋'
|
|
|
- }, {
|
|
|
- value: '3',
|
|
|
- label: '3栋'
|
|
|
- }, {
|
|
|
- value: '4',
|
|
|
- label: '4栋'
|
|
|
- }],
|
|
|
- room_options: [{
|
|
|
- value: '0',
|
|
|
- label: '全部'
|
|
|
- }, {
|
|
|
- value: '1102',
|
|
|
- label: '1102'
|
|
|
- }, {
|
|
|
- value: '1103',
|
|
|
- label: '1103'
|
|
|
- }, {
|
|
|
- value: '1104',
|
|
|
- label: '1104'
|
|
|
- }],
|
|
|
- date_options: [{
|
|
|
- value: '0',
|
|
|
- label: '当天日期'
|
|
|
- }, {
|
|
|
- value: '2021-08-10',
|
|
|
- label: '2021-08-10'
|
|
|
- }, {
|
|
|
- value: '2021-09-20',
|
|
|
- label: '2021-09-20'
|
|
|
- }, {
|
|
|
- value: '2021-10-19',
|
|
|
- label: '2021-10-19'
|
|
|
- }],
|
|
|
- drom_value: '0',
|
|
|
- room_value: '0',
|
|
|
- date_value: '0',
|
|
|
- editdialogFormVisible: false,
|
|
|
- delDialogVisible: false,
|
|
|
- formLabelWidth: '120px',
|
|
|
- formInline: {
|
|
|
- user: '',
|
|
|
- options: [{
|
|
|
- value: '选项1',
|
|
|
+ // 今日消费
|
|
|
+ today_xiaofei: 0.0.toFixed(2),
|
|
|
+ // 年月日的消费
|
|
|
+ xiaofei: {
|
|
|
+ day_balance: 0.0.toFixed(2),
|
|
|
+ month_balance: 0.0.toFixed(2),
|
|
|
+ year_balance: 0.0.toFixed(2),
|
|
|
+ },
|
|
|
+ // 楼栋号下拉列表
|
|
|
+ drom_options: { // 下拉列表的数据绑定
|
|
|
+ builds: [{
|
|
|
+ value: 0,
|
|
|
label: '全部'
|
|
|
- }, {
|
|
|
- value: '选项2',
|
|
|
- label: '黄金糕'
|
|
|
}],
|
|
|
- value: '选项1'
|
|
|
+ value: 0,
|
|
|
+ label: ''
|
|
|
+ },
|
|
|
+ // 宿舍号下拉列表
|
|
|
+ room_options: {
|
|
|
+ rooms: [{
|
|
|
+ value: 0,
|
|
|
+ label: '全部'
|
|
|
+ }],
|
|
|
+ room_value: 0,
|
|
|
+ room_label: ''
|
|
|
+ },
|
|
|
+ select_riqi: {
|
|
|
+ // 选择日期：年-月-日
|
|
|
+ select_day: '',
|
|
|
+ // 选择日期：年-月
|
|
|
+ select_month: '',
|
|
|
+ // 选择日期：年
|
|
|
+ select_year: ''
|
|
|
},
|
|
|
- tableData: [{
|
|
|
- id: '20140309010103',
|
|
|
- stuName: '吴亦凡',
|
|
|
- balance: '188',
|
|
|
- drom: '1栋',
|
|
|
- room: '1101',
|
|
|
- dt: '2021-01-01'
|
|
|
- },{
|
|
|
- id: '20140309010103',
|
|
|
- stuName: '吴亦凡',
|
|
|
- balance: '188',
|
|
|
- drom: '1栋',
|
|
|
- room: '1101',
|
|
|
- dt: '2021-01-01'
|
|
|
- },{
|
|
|
- id: '20140309010103',
|
|
|
- stuName: '吴亦凡',
|
|
|
- balance: '188',
|
|
|
- drom: '1栋',
|
|
|
- room: '1101',
|
|
|
- dt: '2021-01-01'
|
|
|
- },{
|
|
|
- id: '20140309010103',
|
|
|
- stuName: '吴亦凡',
|
|
|
- balance: '188',
|
|
|
- drom: '1栋',
|
|
|
- room: '1101',
|
|
|
- dt: '2021-01-01'
|
|
|
- },{
|
|
|
- id: '20140309010103',
|
|
|
- stuName: '吴亦凡',
|
|
|
- balance: '188',
|
|
|
- drom: '1栋',
|
|
|
- room: '1101',
|
|
|
- dt: '2021-01-01'
|
|
|
- },{
|
|
|
- id: '20140309010103',
|
|
|
- stuName: '吴亦凡',
|
|
|
- balance: '188',
|
|
|
- drom: '1栋',
|
|
|
- room: '1101',
|
|
|
- dt: '2021-01-01'
|
|
|
- },{
|
|
|
- id: '20140309010103',
|
|
|
- stuName: '吴亦凡',
|
|
|
- balance: '188',
|
|
|
- drom: '1栋',
|
|
|
- room: '1101',
|
|
|
- dt: '2021-01-01'
|
|
|
- },{
|
|
|
- id: '20140309010103',
|
|
|
- stuName: '吴亦凡',
|
|
|
- balance: '188',
|
|
|
- drom: '1栋',
|
|
|
- room: '1101',
|
|
|
- dt: '2021-01-01'
|
|
|
- }],
|
|
|
- multipleSelection: []
|
|
|
+ // 控制消费对话框显示隐藏
|
|
|
+ xiaofeiDialog: false,
|
|
|
+ // 表格数据
|
|
|
+ tableData: [],
|
|
|
+ // 表格参数
|
|
|
+ table: {
|
|
|
+ currentPage: 1, // 当前所在页码
|
|
|
+ pageRows: 8, // 每页显示的行数
|
|
|
+ },
|
|
|
+ // 多选后，选择的所有行的数据数组
|
|
|
+ // multipleSelection: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 获取当天日期
|
|
|
+ var myDate = this.getNowFormatDate();
|
|
|
+ let params = {
|
|
|
+ page: this.table.currentPage,
|
|
|
+ rows: this.table.pageRows,
|
|
|
+ begin_time: myDate
|
|
|
+ // begin_time: '2021-08-10'
|
|
|
}
|
|
|
+ // 获取当日消费列表
|
|
|
+ this.getTodayXiaofei(params)
|
|
|
+ // 获取年月日消费总金额
|
|
|
+ this.get_year_month_amount('/HotWaters/watertotalFeel.action')
|
|
|
+ // 取得楼栋号，填充下拉列表
|
|
|
+ this.getBuildsFillSelect()
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 日期下拉列表选择日期
|
|
|
+ selectGetDate(val) {
|
|
|
+ console.log(val);
|
|
|
+ this.select_riqi.select_day = ''
|
|
|
+ this.select_riqi.select_month = ''
|
|
|
+ this.select_riqi.select_year = ''
|
|
|
+ if (val) {
|
|
|
+ this.select_riqi.select_year = val.split('-')[0]
|
|
|
+ this.select_riqi.select_month = val.split('-')[1]
|
|
|
+ } else {
|
|
|
+ this.filters.year = ""
|
|
|
+ this.filters.month = ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取当前时间，格式YYYY-MM-DD
|
|
|
+ getNowFormatDate() {
|
|
|
+ var date = new Date();
|
|
|
+ var seperator1 = "-";
|
|
|
+ var year = date.getFullYear();
|
|
|
+ var month = date.getMonth() + 1;
|
|
|
+ var strDate = date.getDate();
|
|
|
+ if (month >= 1 && month <= 9) {
|
|
|
+ month = "0" + month;
|
|
|
+ }
|
|
|
+ if (strDate >= 0 && strDate <= 9) {
|
|
|
+ strDate = "0" + strDate;
|
|
|
+ }
|
|
|
+ var currentdate = year + seperator1 + month + seperator1 + strDate;
|
|
|
+ return currentdate;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取宿舍号，填充宿舍号下拉列表
|
|
|
+ */
|
|
|
+ getRooms() {
|
|
|
+ var _this = this
|
|
|
+ let params = {
|
|
|
+ params: {
|
|
|
+ build: this.drom_options.label
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$axios.get('/api/HotWaters/watergetdoms.action', params)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res.data);
|
|
|
+ if (typeof(res.data.doms) != 'undefined' && res.data.doms != '' && JSON.stringify(res.data) !='{}') {
|
|
|
+ this.room_options.rooms = [{
|
|
|
+ value: 0,
|
|
|
+ label: '全部'
|
|
|
+ }]
|
|
|
+ for (var i = 0; i < res.data.doms.length; i++) {
|
|
|
+ let tmp = {
|
|
|
+ value: i + 1,
|
|
|
+ label: res.data.doms[i]
|
|
|
+ }
|
|
|
+ this.room_options.rooms.push(tmp)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _this.$message.success('宿舍号暂无数据！');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // console.log(err);
|
|
|
+ _this.$message.error('请求异常: ' + err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取楼栋号下拉列表选择的id，并刷新表格
|
|
|
+ * @param {Object} vId
|
|
|
+ */
|
|
|
+ selectGetBuild(vId) {
|
|
|
+ // console.log(vId);
|
|
|
+ let obj = {};
|
|
|
+ obj = this.drom_options.builds.find((item) => {
|
|
|
+ return item.value === vId; //筛选出匹配数据
|
|
|
+ });
|
|
|
+ console.log(obj);
|
|
|
+ this.drom_options.value = obj.value
|
|
|
+ this.drom_options.label = obj.label
|
|
|
+
|
|
|
+ // 获取宿舍号，填充宿舍号下拉列表
|
|
|
+ this.getRooms()
|
|
|
+ // 组合参数
|
|
|
+ this.selectParams()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取宿舍号下拉列表选择的id，并刷新表格
|
|
|
+ * @param {Object} vId
|
|
|
+ */
|
|
|
+ selectGetroom(vId) {
|
|
|
+ // console.log(vId);
|
|
|
+ let obj = {};
|
|
|
+ obj = this.room_options.rooms.find((item) => {
|
|
|
+ return item.value === vId; //筛选出匹配数据
|
|
|
+ });
|
|
|
+ console.log(obj);
|
|
|
+ this.room_options.room_value = obj.value
|
|
|
+ this.room_options.room_label = obj.label
|
|
|
+
|
|
|
+ // 组合参数
|
|
|
+ this.selectParams()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 组合参数
|
|
|
+ */
|
|
|
+ selectParams() {
|
|
|
+ var params = {}
|
|
|
+ params.page = 1
|
|
|
+ params.rows = this.table.pageRows
|
|
|
+ if (this.drom_options.value != 0) {
|
|
|
+ params.build = this.drom_options.label
|
|
|
+ }
|
|
|
+ if (this.room_options.room_value != 0) {
|
|
|
+ params.dom = this.room_options.room_label
|
|
|
+ }
|
|
|
+ if (this.select_riqi.select_day != '') {
|
|
|
+ params.begin_time = this.select_riqi.select_day
|
|
|
+ }
|
|
|
+ // 查询该栋的信息
|
|
|
+ this.getTodayXiaofei(params)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取当日消费列表
|
|
|
+ * @param {Object} params
|
|
|
+ */
|
|
|
+ getTodayXiaofei(params) {
|
|
|
+ var _this = this
|
|
|
+ this.$axios.get('/api/HotWaters/waterfindConsume.action', {
|
|
|
+ params: params
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ // console.log(res.data);
|
|
|
+ if (typeof(res.data.rows) != 'undefined' && res.data.rows != '' && JSON.stringify(res.data) !='{}') {
|
|
|
+ this.tableData = []
|
|
|
+ for (var i = 0; i < res.data.rows.length; i++) {
|
|
|
+ let tmp = {
|
|
|
+ id: res.data.rows[i].stu_number,
|
|
|
+ stuName: res.data.rows[i].user_name,
|
|
|
+ balance: res.data.rows[i].use_amount,
|
|
|
+ drom: '1栋',
|
|
|
+ room: '1101',
|
|
|
+ dt: res.data.rows[i].begin_time,
|
|
|
+ }
|
|
|
+ this.tableData.push(tmp)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _this.$message.success('当日消费暂无数据！');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // console.log(err);
|
|
|
+ _this.$message.error('请求异常: ' + err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 取得楼栋号，填充下拉列表
|
|
|
+ */
|
|
|
+ getBuildsFillSelect() {
|
|
|
+ // 获取楼栋号，填充下拉列表
|
|
|
+ var _this = this
|
|
|
+ this.$axios.get('/api/HotWaters/watergetBuilds.action')
|
|
|
+ .then(res => {
|
|
|
+ // console.log(res.data);
|
|
|
+ if (typeof(res.data.builds) != 'undefined' && res.data.builds != '' && JSON.stringify(res.data) !='{}') {
|
|
|
+ this.drom_options.builds = [{
|
|
|
+ value: 0,
|
|
|
+ label: '全部'
|
|
|
+ }]
|
|
|
+ for (var i = 0; i < res.data.builds.length; i++) {
|
|
|
+ let tmp = {
|
|
|
+ value: i + 1,
|
|
|
+ label: res.data.builds[i]
|
|
|
+ }
|
|
|
+ this.drom_options.builds.push(tmp)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _this.$message.success('楼栋号暂无数据！');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // console.log(err);
|
|
|
+ _this.$message.error('请求异常: ' + err);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取年月日消费总金额
|
|
|
+ * @param {Object} url
|
|
|
+ */
|
|
|
+ get_year_month_amount(url) {
|
|
|
+ var _this = this
|
|
|
+ this.$axios.get('/api' + url)
|
|
|
+ .then(res => {
|
|
|
+ // console.log(res.data);
|
|
|
+ if (typeof(res.data) != 'undefined' && res.data != '' && JSON.stringify(res.data) !='{}') {
|
|
|
+ // _this.$message.success('数据加载成功！');
|
|
|
+ this.xiaofei.day_balance = parseFloat(res.data.money_day).toFixed(2)
|
|
|
+ this.xiaofei.month_balance = parseFloat(res.data.money_month).toFixed(2)
|
|
|
+ this.xiaofei.year_balance = parseFloat(res.data.money_year).toFixed(2)
|
|
|
+
|
|
|
+ this.today_xiaofei = parseFloat(res.data.money_day).toFixed(2)
|
|
|
+ } else {
|
|
|
+ _this.$message.success('年月消费暂无数据！');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ // console.log(err);
|
|
|
+ _this.$message.error('请求异常: ' + err);
|
|
|
+ })
|
|
|
+ },
|
|
|
onSubmit() {
|
|
|
console.log('submit!');
|
|
|
},
|
|
|
@@ -220,16 +371,14 @@
|
|
|
this.$refs.multipleTable.clearSelection();
|
|
|
}
|
|
|
},
|
|
|
- handleSelectionChange(val) {
|
|
|
- this.multipleSelection = val;
|
|
|
- },
|
|
|
- handleEdit(index, row) {
|
|
|
- this.editdialogFormVisible = true
|
|
|
- console.log(index, row);
|
|
|
+ // 显示消费对话框
|
|
|
+ showxiaofeiDialog() {
|
|
|
+ this.xiaofeiDialog = true
|
|
|
},
|
|
|
- handleDelete(index, row) {
|
|
|
- this.delDialogVisible = true
|
|
|
- console.log(index, row);
|
|
|
+ // 点击多选按钮获取的行数据数组
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ // this.multipleSelection = val
|
|
|
+ // console.log(val);
|
|
|
}
|
|
|
}
|
|
|
}
|
程志平