作者 朱兆平

update:计费管理界面升级优化

update:http post 新增参数para用以传递url get参数,para负责get,data负责传递实体类
@@ -37,7 +37,7 @@ module.exports = { @@ -37,7 +37,7 @@ module.exports = {
37 } 37 }
38 }, 38 },
39 '/api':{ 39 '/api':{
40 - target: 'http://192.168.1.53:12343',//设置你调用的接口域名和端口号 别忘了加http 40 + target: 'http://192.168.1.63:12343',//设置你调用的接口域名和端口号 别忘了加http
41 // target: 'http://192.168.1.189:12343',//设置你调用的接口域名和端口号 别忘了加http 41 // target: 'http://192.168.1.189:12343',//设置你调用的接口域名和端口号 别忘了加http
42 // target: 'http://localhost:12343',//设置你调用的接口域名和端口号 别忘了加http 42 // target: 'http://localhost:12343',//设置你调用的接口域名和端口号 别忘了加http
43 changeOrigin: true, 43 changeOrigin: true,
@@ -5,7 +5,9 @@ let baseUrl = 'wlpt-custom-service-charge/bill' @@ -5,7 +5,9 @@ let baseUrl = 'wlpt-custom-service-charge/bill'
5 5
6 6
7 //折扣配置 7 //折扣配置
8 -export const list = params => { return http.get(`${baseUrl}/list`, params); }; 8 +export const list = (data,params) => {
  9 + return http.post(`${baseUrl}/list`,data, params);
  10 +};
9 export const save = params => { return http.post(`${baseUrl}/save`, params); }; 11 export const save = params => { return http.post(`${baseUrl}/save`, params); };
10 export const edit = params => { return http.put(`${baseUrl}/edit`, params); }; 12 export const edit = params => { return http.put(`${baseUrl}/edit`, params); };
11 export const remove = params => { return http.delByParam(`${baseUrl}/remove`, params); }; 13 export const remove = params => { return http.delByParam(`${baseUrl}/remove`, params); };
@@ -2,11 +2,12 @@ import axios from 'axios' @@ -2,11 +2,12 @@ import axios from 'axios'
2 import qs from 'qs' 2 import qs from 'qs'
3 3
4 export default { 4 export default {
5 - post(url, data) { 5 + post(url, data,params) {
6 return axios({ 6 return axios({
7 method: 'POST', // 请求协议 7 method: 'POST', // 请求协议
8 url: url, // 请求的地址 8 url: url, // 请求的地址
9 data: data, // post 请求的数据 9 data: data, // post 请求的数据
  10 + params: params,
10 timeout: 30000, // 超时时间, 单位毫秒 11 timeout: 30000, // 超时时间, 单位毫秒
11 headers: { 12 headers: {
12 'Content-Type': 'application/json;charset=UTF-8', 13 'Content-Type': 'application/json;charset=UTF-8',
@@ -2,35 +2,72 @@ @@ -2,35 +2,72 @@
2 <el-row> 2 <el-row>
3 <el-card style="background-color: #F5F7FA"> 3 <el-card style="background-color: #F5F7FA">
4 <!-- 搜索区域--> 4 <!-- 搜索区域-->
5 - <el-row class="toolbar">  
6 - <!-- <el-col :span="5">-->  
7 - <!-- <el-input v-model="queryInfo.companyId" prefix-icon="el-icon-search" size="small" style="width: 240px"-->  
8 - <!-- placeholder="公司ID" clearable>-->  
9 - <!-- <template slot="prepend">公司ID</template>-->  
10 - <!-- </el-input>-->  
11 - <!-- </el-col>-->  
12 - <!-- <el-col :span="5">-->  
13 - <!-- <el-input v-model="queryInfo.busnessType" prefix-icon="el-icon-search" size="small" style="width: 240px"-->  
14 - <!-- placeholder="业务类型" clearable>-->  
15 - <!-- <template slot="prepend">业务类型</template>-->  
16 - <!-- </el-input>-->  
17 - <!-- </el-col>-->  
18 - <!-- <el-col :span="5">-->  
19 - <!-- <div class="my-text-area">-->  
20 - <!-- <div class="el-input-group__prepend prepand">生效状态</div>-->  
21 - <!-- <el-select v-model="queryInfo.state" placeholder="生效状态" size="small" style="width: 140px">-->  
22 - <!-- <el-option label="生效" value="Y"></el-option>-->  
23 - <!-- <el-option label="失效" value="N"></el-option>-->  
24 - <!-- </el-select>-->  
25 - <!-- </div>-->  
26 - <!-- </el-col>-->  
27 - <el-col :span="5">  
28 - <el-button type="primary" icon="el-icon-search" size="small" @click="getList()"> 5 + <el-row class="toolbar" style ="height:110px;">
  6 + <el-row>
  7 + <el-col :span="6">
  8 + <el-input v-model="queryModel.billOwnerCompanyCode" prefix-icon="el-icon-search" style="width: 240px"
  9 + placeholder="客户简码如:BD" clearable>
  10 + <template slot="prepend">公司简码</template>
  11 + </el-input>
  12 + </el-col>
  13 + <el-col :span="6">
  14 + <el-input v-model="queryModel.billBusinessName" prefix-icon="el-icon-search" style="width: 240px"
  15 + placeholder="业务名称" clearable>
  16 + <template slot="prepend">业务名称</template>
  17 + </el-input>
  18 + </el-col>
  19 + <el-col :span="6">
  20 + <el-input v-model="queryModel.billType" prefix-icon="el-icon-search" style="width: 240px"
  21 + placeholder="业务类型" clearable>
  22 + <template slot="prepend">业务类型</template>
  23 + </el-input>
  24 + </el-col>
  25 + <el-col :span="6">
  26 + <div class="my-text-area">
  27 + <div class="el-input-group__prepend prepand">账单状态</div>
  28 + <el-select v-model="queryModel.billState" placeholder="账单状态" style="width: 140px" clearable>
  29 + <el-option label="未结算" value="000"></el-option>
  30 + <el-option label="已结算" value="001"></el-option>
  31 + <el-option label="作废" value="111"></el-option>
  32 + </el-select>
  33 + </div>
  34 + </el-col>
  35 + </el-row>
  36 +
  37 + <el-row>
  38 + <el-col :span="6">
  39 + <el-input v-model="queryModel.billWaybiilno" prefix-icon="el-icon-search" style="width: 240px"
  40 + placeholder="单证号" clearable>
  41 + <template slot="prepend">单证号码</template>
  42 + </el-input>
  43 + </el-col>
  44 + <el-col :span="12">
  45 + <div class="my-text-area">
  46 + <div class="el-input-group__prepend prepand">计费时间</div>
  47 + <el-date-picker
  48 + v-model="queryDateSearch"
  49 + type="daterange"
  50 + align="right"
  51 + unlink-panels
  52 + range-separator="至"
  53 + start-placeholder="开始日期"
  54 + end-placeholder="结束日期"
  55 + value-format="yyyy-MM-dd HH:mm:ss"
  56 + :default-time="['00:00:00', '23:59:59']"
  57 + @blur="datePickerBlur"
  58 + :picker-options="pickerOptions">
  59 + </el-date-picker>
  60 + </div>
  61 + </el-col>
  62 +
  63 + <el-col :span="6">
  64 + <el-button type="primary" icon="el-icon-search" @click="getList()">
29 查询 65 查询
30 </el-button> 66 </el-button>
31 -<!-- <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button>--> 67 + <!-- <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button>-->
32 </el-col> 68 </el-col>
33 </el-row> 69 </el-row>
  70 + </el-row>
34 <!-- 列表区域--> 71 <!-- 列表区域-->
35 <el-row> 72 <el-row>
36 <template> 73 <template>
@@ -112,6 +149,11 @@ @@ -112,6 +149,11 @@
112 width="160"> 149 width="160">
113 </el-table-column> 150 </el-table-column>
114 <el-table-column 151 <el-table-column
  152 + prop="billCreatTime"
  153 + label="计费时间"
  154 + width="160">
  155 + </el-table-column>
  156 + <el-table-column
115 fixed="right" 157 fixed="right"
116 label="操作" 158 label="操作"
117 width="160"> 159 width="160">
@@ -127,8 +169,8 @@ @@ -127,8 +169,8 @@
127 <el-pagination 169 <el-pagination
128 @size-change="handleSizeChange" 170 @size-change="handleSizeChange"
129 @current-change="handleCurrentChange" 171 @current-change="handleCurrentChange"
130 - :current-page="queryInfo.limitSize"  
131 - :page-size="queryInfo.pageSize" 172 + :current-page="queryInfo.pageSize"
  173 + :page-size="queryInfo.limitSize"
132 :page-sizes="[10, 50, 100, 500]" 174 :page-sizes="[10, 50, 100, 500]"
133 layout="total, sizes, prev, pager, next, jumper" 175 layout="total, sizes, prev, pager, next, jumper"
134 :total="total"> 176 :total="total">
@@ -262,11 +304,21 @@ @@ -262,11 +304,21 @@
262 // companyId:'', 304 // companyId:'',
263 // busnessType:'', 305 // busnessType:'',
264 // state:'', 306 // state:'',
265 - // 当前页数  
266 - limitSize: 10,  
267 // 每页大小 307 // 每页大小
  308 + limitSize: 10,
  309 + // 当前页数
268 pageSize: 1, 310 pageSize: 1,
269 }, 311 },
  312 + queryModel:{
  313 + billState:'',
  314 + billType:'',
  315 + billBusinessName:'',
  316 + billOwnerCompanyCode:'',
  317 + billCreatTimeStart:undefined,
  318 + billCreatTimeEnd:undefined,
  319 + billWaybiilno:''
  320 + },
  321 + queryDateSearch:[],
270 total: 0, 322 total: 0,
271 tableData:[], 323 tableData:[],
272 dialogMap: { 324 dialogMap: {
@@ -289,6 +341,33 @@ @@ -289,6 +341,33 @@
289 billCurrency: '', 341 billCurrency: '',
290 billSource:'', 342 billSource:'',
291 }, 343 },
  344 + pickerOptions: {
  345 + shortcuts: [{
  346 + text: '最近一周',
  347 + onClick(picker) {
  348 + const end = new Date();
  349 + const start = new Date();
  350 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  351 + picker.$emit('pick', [start, end]);
  352 + }
  353 + }, {
  354 + text: '最近一个月',
  355 + onClick(picker) {
  356 + const end = new Date();
  357 + const start = new Date();
  358 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  359 + picker.$emit('pick', [start, end]);
  360 + }
  361 + }, {
  362 + text: '最近三个月',
  363 + onClick(picker) {
  364 + const end = new Date();
  365 + const start = new Date();
  366 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  367 + picker.$emit('pick', [start, end]);
  368 + }
  369 + }]
  370 + },
292 formLabelWidth: '120px', 371 formLabelWidth: '120px',
293 rules: { 372 rules: {
294 companyId: [ 373 companyId: [
@@ -315,9 +394,15 @@ @@ -315,9 +394,15 @@
315 this.queryInfo.pageSize = val 394 this.queryInfo.pageSize = val
316 this.getList() 395 this.getList()
317 }, 396 },
  397 + datePickerBlur(){
  398 + if (this.queryDateSearch && this.queryDateSearch.length>0){
  399 + this.queryModel.billCreatTimeStart = this.queryDateSearch[0]
  400 + this.queryModel.billCreatTimeEnd = this.queryDateSearch[1]
  401 + }
  402 + },
318 getList() { 403 getList() {
319 const _this = this 404 const _this = this
320 - list(this.queryInfo).then((response) => { 405 + list(this.queryModel,this.queryInfo).then((response) => {
321 const res = response.data 406 const res = response.data
322 console.log(response.data) 407 console.log(response.data)
323 if (res.code !== '200') { 408 if (res.code !== '200') {