作者 shenhailong

用户水费充值

import axios from 'axios'
let base = 'empt-location/queryWater';
export const getWater = params => { return axios.get(`${base}/list`, { params: params }); };
export const addOrder=params=>{return http.post(`${base}/add`, params);};
export const ediOrder=params=>{return http.put(`${base}/edi`, params);};
export const remove = params => { return axios({
method: 'DELETE',
url: `${base}/del`,
data: params,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})};
\ No newline at end of file
... ... @@ -3,7 +3,7 @@ import axios from 'axios'
let base = 'empt-location/water_meter';
export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
export const getList = params => { return axios.get(`${base}/selectAll`, { params: params }); };
export const remove = params => { return axios({
... ...
... ... @@ -21,7 +21,6 @@ import Location from './views/empt/Location.vue'
import QueryOrder from './views/empt/QueryOrder.vue'
import PayOrder from './views/empt/PayOrder.vue'
import userPayOrder from './views/empt/userPayOrder.vue'
import QueryWater from './views/empt/QueryWater.vue'
let routes = [
{
... ... @@ -82,7 +81,6 @@ let routes = [
{ path: '/PayOrder', component: PayOrder, name: '缴水电费订单' },
{ path: '/userPayOrder', component: userPayOrder, name: '用户水电缴费' },
{ path: '/QueryOrder', component: QueryOrder, name: '订单查询' },
{ path: '/QueryWater', component: QueryWater, name: '水表实施信息' },
]
},
{
... ...
... ... @@ -38,7 +38,7 @@
</el-table-column>
<el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleUpdate(scope.row)">快速编辑</el-button>
<!--<el-button type="primary" size="small" @click="handleUpdate(scope.row)">快速编辑</el-button>-->
<el-button type="primary" size="small" @click="handleUpdate(scope.row)">新增</el-button>
<el-button size="mini" type="danger" @click="handleModifyStatus(scope.row,'deleted')">{{ $t('table.delete') }}</el-button>
... ... @@ -48,11 +48,11 @@
<el-button v-if="scope.row.type=='3'" type="primary" size="small" @click="waterMeter(scope.row)">水表实时信息</el-button>
<el-button v-else disabled="" type="primary" size="small" @click="waterMeter(scope.row)">水表实时信息</el-button>
<el-button v-if="scope.row.type=='3'" type="primary" size="small" @click="electrixityMeterConfiguration(scope.row)">电表参数配置</el-button>
<el-button v-else type="primary" disabled="" size="small" @click="electrixityMeterConfiguration(scope.row)">电表参数配置</el-button>
<!--<el-button v-if="scope.row.type=='3'" type="primary" size="small" @click="electrixityMeterConfiguration(scope.row)">电表参数配置</el-button>-->
<!--<el-button v-else type="primary" disabled="" size="small" @click="electrixityMeterConfiguration(scope.row)">电表参数配置</el-button>-->
<el-button v-if="scope.row.type=='3'" type="primary" size="small" @click="electrixityMeterEdit(scope.row)">编辑电表参数配置</el-button>
<el-button v-else disabled="" type="primary" size="small" @click="electrixityMeterEdit(scope.row)">编辑电表参数配置</el-button>
<!--<el-button v-if="scope.row.type=='3'" type="primary" size="small" @click="electrixityMeterEdit(scope.row)">编辑电表参数配置</el-button>-->
<!--<el-button v-else disabled="" type="primary" size="small" @click="electrixityMeterEdit(scope.row)">编辑电表参数配置</el-button>-->
</template>
... ...
<template>
<section>
<el-col :span="24" class="toolbar" style="padding-bottom: 0px">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.orderNumber" placeholder="订单号"></el-input>
</el-form-item>
<el-form-item>
<div class="block">
<el-date-picker
v-model="filters.payTime"
type="datetimerange"
unlink-panels
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="QueryOrder()">查询</el-button>
</el-form-item>
</el-form>
</el-col>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column prop="ordernumber" label="订单号" width="180">
</el-table-column>
<el-table-column
prop="payuserid"
label="用户编号"
width="100">
</el-table-column>
<el-table-column
prop="payusername"
label="用户名称"
width="90">
</el-table-column>
<el-table-column
prop="paylocationname"
label="房间号码"
width="100">
</el-table-column>
<el-table-column
prop="paytime"
label="充值日期"
width="160">
</el-table-column>
<el-table-column
prop="payfees"
label="充值金额"
width="100">
</el-table-column>
<el-table-column prop="paytype" label="充值类型" width="100">
<template slot-scope="scope">
<div v-if="scope.row.paytype === false" style="color:#20a0ff">水</div>
<div v-else="scope.row.paytype === true" style="color: #42d885">电</div>
</template>
</el-table-column>
<el-table-column prop="payfesstype" label="支付方式" width="100">
<template slot-scope="scope">
<div v-if="scope.row.payfesstype === false" style="color:#42d885">微信</div>
<div v-else="scope.row.payfesstype === true" style="color: #20a0ff">支付宝</div>
</template>
</el-table-column>
<el-table-column prop="paystatus" label="支付状态" width="100">
<template slot-scope="scope">
<div v-if="scope.row.payfesstype === false" style="color:#ff4d51">未完成</div>
<div v-else="scope.row.payfesstype === true" style="color: #42d885">已完成</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
>
<template slot-scope="scope" align="center" class-name="small-padding fixed-width" >
<el-button @click="Pay(scope.row)" type="primary" size="mini">去完成</el-button>
<el-button type="primary" @click="payDelete(scope.$index,scope.row)" size="small">移除订单</el-button>
</template>
</el-table-column>
</el-table>
<!--工具条-->
<el-col :span="24" class="toolbar">
<!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
</el-pagination>
</el-col>
</section>
</template>
<script>
import { getWater,addOrder,ediOrder,remove} from '../../api/empt/PayWater';
import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
export default {
components: {ElButton},
data() {
return {
filters: {
orderNumber: '',
payTime:''
},
total: 0,
pageNum: 1,
pageSize: 5,
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]},
formInline: {
user: '',
date1:'',
},
tableData: [],
}
},
mounted() {
this.QueryOrder();
},
methods: {
handleCurrentChange(val) {
this.pageNum = val;
},
QueryOrder(){
// 清空后为null 问题
var payTimes = '';
if (this.filters.payTime!==null){
payTimes = this.filters.payTime[0]+','+this.filters.payTime[1]
}
let params = {
pageNum: this.pageNum,
pageSize: this.pageSize,
orderNumber: this.filters.orderNumber,
payTime: payTimes,
};
getOrder(params).then(res=>{
let resData = res.data;
this.total = resData.total;
this.tableData = resData.list;
}).catch((error) => {
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
let msg = error.response.statusText;
alert(status+msg);
}else {
alert(error);
}
})
},
//删除
payDelete: function (index, row) {
this.$confirm('确认移出该订单吗?', '提示', {
type: 'warning'
}).then(() => {
this.listLoading = true;
let para = { id: row.id };
remove(para).then((res) => {
this.listLoading = false;
//NProgress.done();
this.$message({
message: '移出成功',
type: 'success'
});
this.QueryOrder();
}).catch((error) => {
this.listLoading = false;
alert(error);
});
}).catch();
},
Pay(row){
this.$router.push({name:'缴水电费订单',params:{row,Edistatus:'update'}})
},
},
}
</script>
\ No newline at end of file
... ... @@ -15,73 +15,64 @@
</el-form-item>
</el-form>
<el-form :model="userPayForm" :rules="rules" ref="userPayForm" label-width="180px" :label-position="labelPosition">
<el-form :model="electricityForm" :rules="rules" ref="userPayForm" label-width="180px" :label-position="labelPosition">
<el-col :span="24">
<el-form-item label="透支电费">
<el-input disabled="" style="width: 100px" v-model="userPayForm.overdraftthreshold"></el-input>&nbsp;元
</el-form-item>
<el-input disabled="" style="width: 200px; -webkit-text-fill-color: #070A08" v-model="electricityForm.overdraftthreshold"></el-input>
<span style="margin-right: 200px">&nbsp;元</span>
</el-col>
<el-col :span="24">
<el-form-item label="状态">
<el-input disabled="" style="width: 100px" v-model="userPayForm.payUserName"></el-input>
<span style="margin-right: 140px">&nbsp;状态</span>
<el-input disabled="" style="width: 200px; -webkit-text-fill-color: #070A08" v-model="electricityForm.payUserName"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="剩余电费">
<el-input disabled="" style="width: 100px" v-model="userPayForm.payLocationName"></el-input>
<el-input disabled="" style="width: 200px; margin-right: 200px; -webkit-text-fill-color: #070A08" v-model="electricityForm.payLocationName"></el-input>
<span style="margin-right: 134px">&nbsp;充值日期</span>
<el-date-picker type="date" placeholder="" v-model="electricityForm.payTime" disabled="" style="width: 200px; -webkit-text-fill-color: #070A08" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="充值日期">
<el-date-picker type="date" placeholder="" v-model="userPayForm.payTime" disabled="" style="width: 200px;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item v-if="Edistatus=='create'" label="充值金额" prop="payFees">
<el-input type="number" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="userPayForm.payFees"></el-input>
<el-input type="number" style="width:200px" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="electricityForm.payFees"></el-input>
</el-form-item>
<el-form-item v-else label="充值金额" prop="payFees">
<el-input type="number" oninput ="value=value.replace(/[^0-9]/g,'')" v-model.number="userPayForm.payFees"></el-input>
<el-input type="number" style="width: 802px" oninput ="value=value.replace(/[^0-9]/g,'')" v-model.number="electricityForm.payFees"></el-input>
</el-form-item>
</el-col>
</el-form>
<el-form :model="waterForm" :rules="rules" ref="userPayForm" label-width="180px" :label-position="labelPosition">
<el-form :model="waterForm" :rules="rules" ref="waterForm" label-width="180px" :label-position="labelPosition">
<input type="hidden" v-model="waterForm.wmId" />
<el-col :span="24">
<el-form-item label="透支水费">
<el-input disabled="" style="width: 100px" v-model="waterForm.overdraftthreshold"></el-input>&nbsp;元
</el-form-item>
<el-input disabled="" style="width: 200px; -webkit-text-fill-color: #070A08" v-model="waterForm.overdraftthreshold"></el-input>
<span style="margin-right: 200px">&nbsp;元</span>
</el-col>
<el-col :span="24">
<el-form-item label="状态">
<el-input disabled="" style="width: 100px" v-model="waterForm.payUserName"></el-input>
<span style="margin-right: 140px">&nbsp;状态</span>
<el-input disabled style="width: 200px; -webkit-text-fill-color: #070A08" v-model="waterForm.wmFmstate"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="剩余水费">
<el-input disabled="" style="width: 100px" v-model="waterForm.payLocationName"></el-input>
<el-input disabled="" style="width: 200px; -webkit-text-fill-color: #070A08; margin-right: 200px;" v-model="waterForm.subtraction"></el-input>
<span style="margin-right: 134px">&nbsp;充值日期</span>
<el-date-picker type="date" placeholder="" v-model="waterForm.payTime" disabled="" style="width: 200px; -webkit-text-fill-color: #070A08" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="充值日期">
<el-date-picker type="date" placeholder="" v-model="waterForm.payTime" disabled="" style="width: 200px;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item v-if="Edistatus=='create'" label="充值金额" prop="payFees">
<el-input type="number" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="waterForm.payFees"></el-input>
<el-input type="number" style="width:200px" oninput ="value=value.replace(/[^0-9.]/g,'')" v-model.number="waterForm.payFees"></el-input>
</el-form-item>
<el-form-item v-else label="充值金额" prop="payFees">
<el-input type="number" oninput ="value=value.replace(/[^0-9]/g,'')" v-model.number="waterForm.payFees"></el-input>
<el-input type="number" style="width: 802px" oninput ="value=value.replace(/[^0-9]/g,'')" v-model.number="waterForm.payFees"></el-input>
</el-form-item>
</el-col>
</el-form>
<el-button style="margin-left:885px" type="primary" v-on:click="topUpWater()">充值水费</el-button>
</el-col>
... ... @@ -94,22 +85,28 @@
</style>
<script>
import loginUserInfo from '@/api/base'
import {getList} from '../../api/empt/userPayOrder';
import {getList, add} from '../../api/empt/userPayOrder';
import ElCol from "element-ui/packages/col/src/col";
export default {
components: {ElCol},
data() {
return{
filters:{
roomNumber:''
roomNumber:'三号楼一层卫生间'
},
userPayForm:{
electricityForm:{
overdraftthreshold:'',
payTime:'',
},
waterForm:{
overdraftthreshold:'',
wmFmstate:'',
payTime:'',
subtraction:'',
wmId:'',
payFees:''
},
rules:{
payType: [
... ... @@ -121,7 +118,6 @@
],
},
labelPosition:'left',
Edistatus:'',
shuibiao:'',
... ... @@ -130,7 +126,7 @@
},
methods:{
getdefaultData(){
getdefaultData() {
let para = {
roomNumber: this.filters.roomNumber
... ... @@ -139,18 +135,18 @@
getList(para).then((res) => {
let resData = res.data;
if (resData.length>0){
for(var i=0; i<resData.length; i++){
if(resData[i].wmId === null){
if (resData.length > 0) {
for (var i = 0; i < resData.length; i++) {
if (resData[i].wmId === null) {
this.userPayForm = resData[i];
this.userPayForm.payTime = new Date();
}else {
this.electricityForm = resData[i];
this.electricityForm.payTime = new Date();
} else {
this.waterForm = resData[i];
this.waterForm.payTime = new Date();
}
}
}else {
} else {
this.$alert('请输入正确的房间号', '提示', {
confirmButtonText: '确定',
callback: action => {
... ... @@ -163,14 +159,13 @@
//NProgress.done();
}).catch((error) => {
this.listLoading = false;
if(null!= error.response && error.response!==undefined){
let status= error.response.status;
if (null != error.response && error.response !== undefined) {
let status = error.response.status;
let msg = error.response.statusText;
alert("请输入所查询的房号1");
}else {
} else {
this.$alert('请输入房间号', '提示', {
confirmButtonText: '确定',
});
}
... ... @@ -179,7 +174,35 @@
},
//充值水费
topUpWater: function () {
this.$refs.waterForm.validate((valid) => {
if (valid) {
this.$confirm('确认充值吗?', '提示', {}).then(() => {
let para = Object.assign({}, this.waterForm);
add(para).then((res) => {
console.log(res.data.code)
console.log(res)
this.addLoading = false;
if (res.data.code == 200) {
this.$message({
message: '充值成功',
type: 'success'
});
}else {
this.$message({
message: '网络异常',
type: 'error'
});
}
}).catch(error => alert(error));
});
}
});
},
},
mounted(){
}
... ...