朱兆平 / vue_cli · 提交

转到一个项目

作者 shenhailong
提交 0780520ea3e9c1322275fbf1869f181b6cf75e24 1 个父辈 2f851c06

修改左侧菜单名称 完善电表实施信息loading加载

内嵌 并排对比
正在显示 5 个修改的文件 包含 170 行增加 和 18 行删除
  1 +import axios from 'axios'
  2 +
  3 +let base = 'empt-location/eeInfo';
  4 +
  5 +export const getList = params => { return axios.get(`${base}/list`, { params: params }); };
@@ -21,6 +21,7 @@ import Location from './views/empt/Location.vue' @@ -21,6 +21,7 @@ import Location from './views/empt/Location.vue'
21 import QueryOrder from './views/empt/QueryOrder.vue' 21 import QueryOrder from './views/empt/QueryOrder.vue'
22 import PayOrder from './views/empt/PayOrder.vue' 22 import PayOrder from './views/empt/PayOrder.vue'
23 import userPayOrder from './views/empt/userPayOrder.vue' 23 import userPayOrder from './views/empt/userPayOrder.vue'
  24 +import eeInfo from "./views/empt/eeInfo";
24 25
25 let routes = [ 26 let routes = [
26 { 27 {
@@ -77,10 +78,11 @@ let routes = [ @@ -77,10 +78,11 @@ let routes = [
77 name: '能源管理', 78 name: '能源管理',
78 iconCls: 'fa fa-id-card-o', 79 iconCls: 'fa fa-id-card-o',
79 children: [ 80 children: [
80 - { path: '/location', component: Location, name: '能源缴费' }, 81 + { path: '/location', component: Location, name: '公寓管理' },
81 { path: '/PayOrder', component: PayOrder, name: '缴水电费订单' }, 82 { path: '/PayOrder', component: PayOrder, name: '缴水电费订单' },
82 { path: '/userPayOrder', component: userPayOrder, name: '用户水电缴费' }, 83 { path: '/userPayOrder', component: userPayOrder, name: '用户水电缴费' },
83 { path: '/QueryOrder', component: QueryOrder, name: '订单查询' }, 84 { path: '/QueryOrder', component: QueryOrder, name: '订单查询' },
  85 + { path: '/eeInfo', component: eeInfo, name: '电表充值信息' },
84 ] 86 ]
85 }, 87 },
86 { 88 {
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> 4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
5 <el-form :inline="true" :model="filters"> 5 <el-form :inline="true" :model="filters">
6 <el-form-item> 6 <el-form-item>
7 - <el-input v-model="filters.processName" placeholder="公寓名称"></el-input> 7 + <el-input v-model="filters.processName" placeholder="公寓名称"></el-input>
8 </el-form-item> 8 </el-form-item>
9 <el-form-item> 9 <el-form-item>
10 <el-button type="primary" v-on:click="getList()">查询</el-button> 10 <el-button type="primary" v-on:click="getList()">查询</el-button>
@@ -21,9 +21,10 @@ @@ -21,9 +21,10 @@
21 row-key="id" 21 row-key="id"
22 border 22 border
23 v-loading = "listLoading" 23 v-loading = "listLoading"
  24 + lazy
  25 + :load="load"
24 :row-class-name="tableRowClassName" 26 :row-class-name="tableRowClassName"
25 - default-expand-all  
26 - :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> 27 + :tree-props="{children: 'children', hasChildren: 'type'}">
27 <el-table-column 28 <el-table-column
28 prop="adrname" 29 prop="adrname"
29 label="名称" 30 label="名称"
@@ -257,8 +258,8 @@ @@ -257,8 +258,8 @@
257 </el-dialog> 258 </el-dialog>
258 259
259 <!--电表实时信息--> 260 <!--电表实时信息-->
260 - <el-dialog title="电表实施信息" :visible.sync="electrixityeditFormVisible" :close-on-click-modal="false">  
261 - <el-form :model="electricityForm" label-width="100px" ref="waterMaterForm"> 261 + <el-dialog title="电表实施信息" :visible.sync="electrixityeditFormVisible" :close-on-click-modal="false">
  262 + <el-form v-loading = "electrixityLoading" :model="electricityForm" label-width="100px" ref="waterMaterForm">
262 <el-form-item label="电表编号" prop="deviceId"> 263 <el-form-item label="电表编号" prop="deviceId">
263 <el-input v-model="electricityForm.deviceId" auto-complete="off" ></el-input> 264 <el-input v-model="electricityForm.deviceId" auto-complete="off" ></el-input>
264 </el-form-item> 265 </el-form-item>
@@ -310,7 +311,7 @@ @@ -310,7 +311,7 @@
310 </el-form-item> 311 </el-form-item>
311 312
312 <el-col v-if="waterNumber === 'waterNum'"> 313 <el-col v-if="waterNumber === 'waterNum'">
313 - <el-form-item label="水表编号" prop="adrName"> 314 + <el-form-item label="水表编号" prop="wmid">
314 <el-select style="height: 38px; width: 100%" 315 <el-select style="height: 38px; width: 100%"
315 v-model="editLocationForm.wmid" 316 v-model="editLocationForm.wmid"
316 filterable 317 filterable
@@ -327,7 +328,9 @@ @@ -327,7 +328,9 @@
327 </el-select> 328 </el-select>
328 </el-form-item> 329 </el-form-item>
329 </el-col> 330 </el-col>
330 - 331 + <el-form-item v-if="electricityNumber==='eeNum'" label="电表编号" prop="eeid">
  332 + <el-input v-model="editLocationForm.eeid" auto-complete="off" placeholder="请输入电表编号"></el-input>
  333 + </el-form-item>
331 334
332 335
333 336
@@ -374,14 +377,15 @@ @@ -374,14 +377,15 @@
374 locationList:[], 377 locationList:[],
375 total: 0, 378 total: 0,
376 pageNum: 1, 379 pageNum: 1,
377 - pageSize: 5, 380 + pageSize: 30,
378 listLoading: false, 381 listLoading: false,
  382 + electrixityLoading: false,
379 waterNumber: undefined, 383 waterNumber: undefined,
  384 + electricityNumber: undefined,
380 waterMeterList:[], 385 waterMeterList:[],
381 restaurants: [], 386 restaurants: [],
382 state4: '', 387 state4: '',
383 timeout: null, 388 timeout: null,
384 -  
385 sels: [],//列表选中列 389 sels: [],//列表选中列
386 //编辑界面是否显示 390 //编辑界面是否显示
387 editFormVisible: false, 391 editFormVisible: false,
@@ -501,7 +505,8 @@ @@ -501,7 +505,8 @@
501 adrname: '', 505 adrname: '',
502 parent: '', 506 parent: '',
503 type:'', 507 type:'',
504 - wmid:'' 508 + wmid:'',
  509 + eeid:''
505 }, 510 },
506 centerDialogVisible: false, 511 centerDialogVisible: false,
507 dialogData:{ 512 dialogData:{
@@ -574,6 +579,7 @@ @@ -574,6 +579,7 @@
574 one: function(prepaid){ 579 one: function(prepaid){
575 return prepaid?true:one='是'?false:one='否' 580 return prepaid?true:one='是'?false:one='否'
576 }, 581 },
  582 +
577 //类型显示转换 583 //类型显示转换
578 formatType: function (row, column) { 584 formatType: function (row, column) {
579 let msg = '未知'; 585 let msg = '未知';
@@ -605,7 +611,8 @@ @@ -605,7 +611,8 @@
605 let para = { 611 let para = {
606 pageNum: this.pageNum, 612 pageNum: this.pageNum,
607 pageSize: this.pageSize, 613 pageSize: this.pageSize,
608 - processName: this.filters.processName 614 + processName: this.filters.processName,
  615 + parent: 0
609 }; 616 };
610 this.listLoading= true; 617 this.listLoading= true;
611 getList(para).then((res) => { 618 getList(para).then((res) => {
@@ -625,8 +632,26 @@ @@ -625,8 +632,26 @@
625 } 632 }
626 633
627 }); 634 });
  635 + },
  636 +
  637 + load(tree, treeNode, resolve) {
  638 + setTimeout(() => {
  639 + // tree为点击那一行的数据
  640 + let para = {
  641 + pageNum: this.pageNum,
  642 + pageSize: this.pageSize,
  643 + parent: tree.id
  644 + }
  645 + getList(para).then((res) => {
  646 + let resData = res.data.data;
  647 + resolve(resData.list);
  648 + }).catch((error) => {
  649 + alert(error);
628 650
  651 + });
  652 + }, 1000)
629 }, 653 },
  654 +
630 //删除 655 //删除
631 handleDel: function (row) { 656 handleDel: function (row) {
632 this.$confirm('确认删除该记录吗?', '提示', { 657 this.$confirm('确认删除该记录吗?', '提示', {
@@ -661,12 +686,13 @@ @@ -661,12 +686,13 @@
661 * @param row 为这行的数据对象 686 * @param row 为这行的数据对象
662 */ 687 */
663 electrixityMeterEdit: function (row) { 688 electrixityMeterEdit: function (row) {
664 - this.electrixityeditFormVisible = true;  
665 var ids = row.eeid; 689 var ids = row.eeid;
666 let para = { eeId: ids }; 690 let para = { eeId: ids };
667 // 查询电表参数配置表数据 691 // 查询电表参数配置表数据
  692 + this.electrixityeditFormVisible = true;
668 getEEModel(para).then((res) => { 693 getEEModel(para).then((res) => {
669 this.electrixityeditForm = res.data; 694 this.electrixityeditForm = res.data;
  695 + this.electrixityeditFormVisible = false;
670 }); 696 });
671 }, 697 },
672 698
@@ -734,6 +760,7 @@ @@ -734,6 +760,7 @@
734 this.editLocationForm = row; 760 this.editLocationForm = row;
735 if (row.type == 3){ 761 if (row.type == 3){
736 this.waterNumber ='waterNum'; 762 this.waterNumber ='waterNum';
  763 + this.electricityNumber ='eeNum';
737 } 764 }
738 }, 765 },
739 766
@@ -824,11 +851,12 @@ @@ -824,11 +851,12 @@
824 // 电表实施信息查询 851 // 电表实施信息查询
825 electicityInfo: function(row){ 852 electicityInfo: function(row){
826 this.electrixityeditFormVisible=true; 853 this.electrixityeditFormVisible=true;
  854 + this.electrixityLoading=true;
827 var eeId = row.eeid; 855 var eeId = row.eeid;
828 let para = { eeId: eeId}; 856 let para = { eeId: eeId};
829 electricityInfo(para).then((res) => { 857 electricityInfo(para).then((res) => {
830 this.electricityForm = res.data; 858 this.electricityForm = res.data;
831 - 859 + this.electrixityLoading = false;
832 }); 860 });
833 }, 861 },
834 862
  1 +<template>
  2 + <section>
  3 + <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
  4 + <el-form :inline="true" :model="filters">
  5 + <el-form-item>
  6 + <el-input v-model="filters.deviceId" placeholder="设备编号"></el-input>
  7 + </el-form-item>
  8 + <el-form-item>
  9 + <el-button type="primary" v-on:click="EeInfoQuery()">查询</el-button>
  10 + </el-form-item>
  11 + </el-form>
  12 + </el-col>
  13 + <el-table
  14 + v-loading="listLoading"
  15 + :data="eeInfoList"
  16 + stripe
  17 + style="width: 100%">
  18 + <el-table-column prop="orderNumber" label="订单号">
  19 + </el-table-column>
  20 +
  21 + <el-table-column prop="actionType" label="充值类型">
  22 + <template slot-scope="scope">
  23 + <div v-if="scope.row.actionType === '0'" style="color:#20a0ff">充值</div>
  24 + <div v-else="scope.row.paytype === 1" style="color: #42d885">扣费</div>
  25 + </template>
  26 + </el-table-column>
  27 +
  28 + <el-table-column prop="deviceId" label="设备编号">
  29 + </el-table-column>
  30 +
  31 + <el-table-column prop="money" label="充值金额">
  32 + </el-table-column>
  33 +
  34 + <el-table-column prop="status" label="充值状态">
  35 + <template slot-scope="scope">
  36 + <div v-if="scope.row.status === '0'" style="color:#42d885">成功</div>
  37 + <div v-else="scope.row.status === 1" style="color:#ff4d51">失败</div>
  38 + </template>
  39 + </el-table-column>
  40 +
  41 + <el-table-column prop="opertTime" :formatter="dateForma" label="充值日期">
  42 + </el-table-column>
  43 + </el-table>
  44 +
  45 + <!--工具条-->
  46 + <el-col :span="24" class="toolbar">
  47 + <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
  48 + </el-pagination>
  49 + </el-col>
  50 +
  51 + </section>
  52 +</template>
  53 +
  54 +<script>
  55 + import {getList} from "../../api/empt/eeInfo";
  56 + import moment from "moment";
  57 +
  58 + export default {
  59 + data() {
  60 + return {
  61 + filters: {
  62 + deviceId: ''
  63 + },
  64 + total: 0,
  65 + pageNum: 1,
  66 + pageSize: 5,
  67 + eeInfoList: [],
  68 + listLoading: false
  69 + }
  70 + },
  71 + methods: {
  72 + handleCurrentChange(val) {
  73 + this.pageNum = val;
  74 + this.EeInfoQuery();
  75 + },
  76 + EeInfoQuery(){
  77 + let params = {
  78 + pageNum: this.pageNum,
  79 + pageSize: this.pageSize,
  80 + deviceId: this.filters.deviceId
  81 +
  82 + };
  83 + this.listLoading = true;
  84 + getList(params).then(res=>{
  85 + let resData = res.data;
  86 + this.total = resData.total;
  87 + this.eeInfoList = resData.list;
  88 + this.listLoading = false;
  89 + }).catch((error) => {
  90 + if(null!= error.response && error.response!==undefined){
  91 + let status= error.response.status;
  92 + let msg = error.response.statusText;
  93 + this.listLoading = false;
  94 + alert(status+msg);
  95 + }else {
  96 + this.listLoading = false;
  97 + alert(error);
  98 + }
  99 + })
  100 + },
  101 +
  102 + dateForma:function(row,column){
  103 +
  104 + var date = row[column.property];
  105 +
  106 + if(date == undefined){return ''};
  107 +
  108 + return moment(date).format("YYYY-MM-DD HH:mm:ss")
  109 +
  110 + }
  111 + },
  112 + mounted() {
  113 + this.EeInfoQuery();
  114 + }
  115 + }
  116 +</script>
  117 +
  118 +<style scoped>
  119 +
  120 +</style>
@@ -131,13 +131,12 @@ @@ -131,13 +131,12 @@
131 } 131 }
132 }, 132 },
133 methods:{ 133 methods:{
134 -  
135 getdefaultData() { 134 getdefaultData() {
136 let para = { 135 let para = {
137 roomNumber: this.filters.roomNumber 136 roomNumber: this.filters.roomNumber
138 }; 137 };
139 this.loading=true; 138 this.loading=true;
140 - 139 + this.electricityForm.balance="";
141 getList(para).then((res) => { 140 getList(para).then((res) => {
142 let resData = res.data; 141 let resData = res.data;
143 if (resData.length > 0) { 142 if (resData.length > 0) {
@@ -248,8 +247,6 @@ @@ -248,8 +247,6 @@
248 createSocket(); 247 createSocket();
249 // 监听ws数据响应 248 // 监听ws数据响应
250 const getDataFunc = function(e) { 249 const getDataFunc = function(e) {
251 - console.log(e);  
252 - console.log(e.detail.data.data);  
253 if (e.detail.data.data!==undefined){ 250 if (e.detail.data.data!==undefined){
254 let resultMessage = JSON.parse(e.detail.data.data); 251 let resultMessage = JSON.parse(e.detail.data.data);
255 if(resultMessage.orderNumber===res.data.data.orderNumber){ 252 if(resultMessage.orderNumber===res.data.data.orderNumber){