update: 计费中心

src/views/recharge/board.vue

@@ -39,7 +39,7 @@
     <div class="dm-wrap">
       <h3 class="title">今日消费</h3>
       <select-depart v-if="config.isMoreAccount && config.showAllDepartment" :data="deparment1" class="mb20" @load="() => load('one')" @getDepartId="id => getDepartId(id, 'one')" @remote-search="val => remoteSearch(val, 'one')" :loading="deparment1.loading" />
-      <el-row class="recharge-today" :gutter="20">
+      <el-row class="recharge-today" :gutter="20" v-loading="loading1">
         <el-col :span="6">
           <div class="recharge-today-item border2 flex_between">
             <div class="text-center">
@@ -118,7 +118,7 @@
         </el-col>
       </el-row>
     </div>
-    <div class="dm-wrap" v-loading="loading">
+    <div class="dm-wrap">
       <div class="pb22">
         <div slot="header" class="clearfix">
           <el-date-picker :pickerOptions="pickerOptions" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="consumeRecord('two')"></el-date-picker>
@@ -126,7 +126,7 @@
           <span class="fz12 gray">* 此处仅支持筛选近半年的统计数据</span>
         </div>
       </div>
-      <el-table tooltipEffect="light" :data="tableList" style="width: 100%">
+      <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading2">
         <el-table-column align="left" prop="name" label="计费项目"></el-table-column>
         <el-table-column align="left" prop="count" label="时长/条数">
           <template slot-scope="scope">
@@ -175,7 +175,8 @@ export default {
     return {
       dateTime: [Date.now(), Date.now()],
       minDate: new Date(),
-      loading: false,
+      loading1: false,
+      loading2: false,
       tableList: [],
       recharge: {},
       listParams: {
@@ -277,7 +278,9 @@ export default {
     async consumeRecord(type) {
       const depart = type == 'one' ? this.deparment1 : this.deparment2;
       const para = this.listParams;
-      this.loading = true;
+      const loading = type == 'one' ? 'loading1' : 'loading2';
+      console.log(loading);
+      this[loading] = true;
       if (this.dateTime) {
         para.beginTime = formatDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
         para.endTime = formatDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
@@ -298,12 +301,12 @@ export default {
         let res = await consumeRecord(para);
         const result = res.result;
         // , { name: '视频流量', type: 'video', fee: result.allTraffic, count: result.allTrafficCost }
-        if (type == 'one') this.tableList = [{ name: '短信营销', type: 'marketing', fee: result.messageFee, count: result.messageCount }, { name: '短信验证码', type: 'sms', fee: result.smsFee, count: result.smsCount }, { name: '双向呼叫', type: 'call', fee: result.callFee, count: result.callTime }, { name: '通话录音', type: 'record', fee: result.recordCallfee, count: result.recordCallTime }]; // eslint-disable-line
+        if (type != 'one') this.tableList = [{ name: '短信营销', type: 'marketing', fee: result.messageFee, count: result.messageCount }, { name: '短信验证码', type: 'sms', fee: result.smsFee, count: result.smsCount }, { name: '双向呼叫', type: 'call', fee: result.callFee, count: result.callTime }, { name: '通话录音', type: 'record', fee: result.recordCallfee, count: result.recordCallTime }]; // eslint-disable-line
         else this.recharge = res.result;
       } catch (err) {
         console.log(err);
       }
-      this.loading = false;
+      this[loading] = false;
     },
     // 获取计费部门
     async getDepartmentList(type) {
@@ -346,13 +349,12 @@ export default {
       // 选中不同下拉得id时，调用对应得表格方法
       const depart = type == 'one' ? this.deparment1 : this.deparment2;
       depart['departId'] = id;
-      if (type == 'one') this.consumeRecord(type);
-      else this.consumeRecord(type);
+      this.consumeRecord(type);
     },
     // 下拉远程搜索
     remoteSearch(val, type) {
       const depart = type == 'one' ? this.deparment1 : this.deparment2;
-      depart['searchParams'] = val;
+      depart['searchParams'] = val.trim();
       depart['currentPage'] = 1;
       depart['isLimit'] = false;
       depart['list'] = [];

src/views/recharge/components/select-depart.vue

 <template>
-  <el-select v-model="departId" placeholder="请选择计费部门" clearable class="select_more" ref="select" @change="handleChange" filterable remote :remote-method="remoteMethod" suffix-icon="el-icon-search">
+  <el-select v-model="departId" placeholder="请选择计费部门" class="select_more" ref="select" @change="handleChange" filterable remote :remote-method="remoteMethod" suffix-icon="el-icon-search">
     <div class="infinite-list" ref="infinite-list" v-infinite-scroll="load" style="overflow:auto;max-height:260px">
       <el-option v-for="item in data.list" :key="item.accountDepartId" :value="item.accountDepartId" :label="item.accountDepartName">{{ item.accountDepartName }}</el-option>
       <p style="text-align: center" :hidden="!loading"><i class="el-icon-loading"></i></p>

src/views/recharge/components/set-rule-dialog.vue

@@ -51,8 +51,8 @@
               <el-radio :label="1">总部</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="登录观云台小程序：" prop="lcx" class="mb20">
-            <el-radio-group v-model="form.lcx">
+          <el-form-item label="登录观云台小程序：" prop="gytRule" class="mb20">
+            <el-radio-group v-model="form.gytRule">
               <el-radio :label="1">总部</el-radio>
             </el-radio-group>
           </el-form-item>
@@ -106,7 +106,7 @@ export default {
         smsOpenCardRule: 1, // 认证
         smsHaobanRule: 4, // 好办
         callRule: 4, // 双向呼叫
-        lcx: 1 // 观云台小程序
+        gytRule: 1 // 观云台小程序
       },
       isMoreAccount: false,
       rules: {
@@ -114,7 +114,7 @@ export default {
         smsEcmRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [2, 3]) }],
         smsValidCodeRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [2, 1]) }],
         smsOpenCardRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [1]) }],
-        lcx: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [1]) }],
+        gytRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [1]) }],
         smsHaobanRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [4]) }],
         callRule: [{ required: true, validator: (rule, val, cb) => validate(val, cb, [3, 4]) }]
       }