pengjun
3 months ago
7 changed files with 446 additions and 158 deletions
-
3src/components/report/TurnoverReport.vue
-
3src/components/report/TurnoverReportM.vue
-
3src/components/report/TurnoverReportP.vue
-
153src/components/report/TurnoverReportS.vue
-
6src/router/index.js
-
104src/views/fee-settings/cardBill.vue
-
332src/views/fee-settings/cardBillSum.vue
@ -0,0 +1,332 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div style="position: relative"> |
||||
|
<div class="middlebox"> |
||||
|
<div class="contenttitle"> |
||||
|
收费 / |
||||
|
<span class="contenttitleBold" |
||||
|
>会员卡记账统计</span |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="margin-top:7px"> |
||||
|
<div style="background-color: #fff; padding: 15px; border-radius: 8px;display: flex;flex-wrap: wrap; margin-bottom: 10px;height:80px;margin-top: 7px;"> |
||||
|
<div class="query"> |
||||
|
<span>记账日期：</span> |
||||
|
<el-date-picker v-model="query.startDate" type="date" placeholder="起始日期" size="small" value-format="yyyy-MM-dd"/> |
||||
|
<span>--</span> |
||||
|
<el-date-picker v-model="query.endDate" type="date" placeholder="截止日期" size="small" value-format="yyyy-MM-dd"/> |
||||
|
</div> |
||||
|
<div class="query"> |
||||
|
<span>记账标志：</span> |
||||
|
<el-select v-model="query.billFlag" placeholder="请选择" filterable clearable size="small"> |
||||
|
<el-option v-for="item in dict.billFlag" :key="item.id" :label="item.displayName" :value="item.id" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="query"> |
||||
|
<span>支付方式：</span> |
||||
|
<el-select v-model="query.payModeIds" placeholder="请选择" filterable clearable size="small" multiple collapse-tags> |
||||
|
<el-option v-for="item in dict.payMode" :key="item.id" :label="item.displayName" :value="item.id" /> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="query"> |
||||
|
<span>卡号：</span> |
||||
|
<el-input placeholder="卡号" v-model="query.cardNo" size="small" clearable style="width: 190px"/> |
||||
|
</div> |
||||
|
<div class="query"> |
||||
|
<span>卡主姓名：</span> |
||||
|
<el-input placeholder="卡主姓名" v-model="query.customerName" size="small" clearable style="width: 190px"/> |
||||
|
</div> |
||||
|
<div class="query"> |
||||
|
<span>身份证号：</span> |
||||
|
<el-input placeholder="身份证号" v-model="query.idNo" size="small" clearable style="width: 190px"/> |
||||
|
</div> |
||||
|
<div class="query"> |
||||
|
<span>电话：</span> |
||||
|
<el-input placeholder="手机号/电话" v-model="query.mobileTelephone" size="small" clearable style="width: 190px"/> |
||||
|
</div> |
||||
|
<div class="query"> |
||||
|
<el-button class="commonbutton" @click="btnQuery">查询</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="background-color: #fff; padding: 15px; border-radius: 8px;"> |
||||
|
<el-table :data="dataList" width="100%" :height="window.pageHeight < 600 ? 330 : window.pageHeight - 250" |
||||
|
row-key="id" highlight-current-row ref="dataList" border show-summary :summary-method="getSummaries"> |
||||
|
<el-table-column type="index" label="序号" width="50" align="center"/> |
||||
|
<el-table-column prop="cardNo" label="会员卡号" width="150" align="center"/> |
||||
|
<el-table-column prop="customerName" label="卡主姓名" /> |
||||
|
<el-table-column prop="mobileTelephone" label="手机号" align="center"/> |
||||
|
<el-table-column prop="payModeNams" label="支付方式" align="center" /> |
||||
|
<el-table-column prop="billMoney" label="充值金额" align="center"/> |
||||
|
<el-table-column prop="billMoney" label="扣费金额" align="center"/> |
||||
|
<el-table-column prop="billMoney" label="退费金额" align="center"/> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import moment from "moment"; |
||||
|
import { mapState, mapActions } from "vuex"; |
||||
|
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
||||
|
import { dddw, objCopy, arrayReduce, arrayExistObj, deepCopy } from "@/utlis/proFunc"; |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
query: { |
||||
|
startDate:'', |
||||
|
endDate:'', |
||||
|
billFlag:'', |
||||
|
payModeIds:[], |
||||
|
cardNo:'', |
||||
|
customerName:'', |
||||
|
idNo:'', |
||||
|
mobileTelephone:'' |
||||
|
}, //查询条件 |
||||
|
dataList: [], //列表数据 |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
created() { |
||||
|
this.query.startDate = moment(new Date()).format("yyyy-MM-DD"); |
||||
|
this.query.endDate = this.query.startDate; |
||||
|
}, |
||||
|
|
||||
|
//挂载完成 |
||||
|
mounted() { |
||||
|
this.dicInit(); |
||||
|
this.enterToQuery() |
||||
|
}, |
||||
|
updated() { |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs['dataList'].doLayout() //刷新显示合计 |
||||
|
}) |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(["window", "dict"]), |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]), |
||||
|
dddw, moment, |
||||
|
|
||||
|
|
||||
|
//查询 |
||||
|
btnQuery(queryType) { |
||||
|
let body = deepCopy(this.query) |
||||
|
|
||||
|
switch (queryType) { |
||||
|
case 'idNo': |
||||
|
if(!this.query.idNo) return; |
||||
|
body = { idNo: this.query.idNo }; |
||||
|
break; |
||||
|
case 'cardNo': |
||||
|
if(!this.query.cardNo) return; |
||||
|
body = { cardNo: this.query.cardNo }; |
||||
|
break; |
||||
|
default: |
||||
|
if(this.query.idNo){ |
||||
|
body = { idNo: this.query.idNo }; |
||||
|
}else if(this.query.cardNo){ |
||||
|
body = { cardNo: this.query.cardNo }; |
||||
|
}else{ |
||||
|
// if(!this.query.startDate) this.query.startDate = moment(new Date()).format('yyyy-MM-DD'); |
||||
|
// if(!this.query.endDate) this.query.endDate = moment(new Date()).format('yyyy-MM-DD'); |
||||
|
if(this.query.startDate > this.query.endDate){ |
||||
|
this.$message.error("数据不合法，起始日期不能大于截止日期！"); |
||||
|
return; |
||||
|
} |
||||
|
if(!body.cardNo) delete body.cardNo |
||||
|
if(!body.billFlag) delete body.billFlag |
||||
|
if(!body.customerName) delete body.customerName |
||||
|
if(!body.idNo) delete body.idNo |
||||
|
if(!body.mobileTelephone) delete body.mobileTelephone |
||||
|
if(body?.payModeIds.length == 0) delete body.payModeIds |
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
// { |
||||
|
// "cardNo": "string", |
||||
|
// "customerName": "string", |
||||
|
// "idNo": "string", |
||||
|
// "mobileTelephone": "string", |
||||
|
// "billFlag": "string", |
||||
|
// "startDate": "string", |
||||
|
// "endDate": "string" |
||||
|
// } |
||||
|
|
||||
|
postapi('/api/app/cardbill/getcardbilllist', body) |
||||
|
.then((res) => { |
||||
|
if (res.code != -1) { |
||||
|
this.dataList = res.data; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
//合计 |
||||
|
getSummaries(param) { |
||||
|
//console.log('getSummaries param', param) |
||||
|
// if(!param){ |
||||
|
// param = { |
||||
|
// columns:[{}, {}, {}, {}, {}, {}, {property: 'asbitemMoney'},{property: 'customerOrgGroupDetailMoney'}], |
||||
|
// data:this.customerOrgGroupAsbitems |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
const { columns, data } = param; |
||||
|
const sumCol = [5,6,7] //需合计的列 |
||||
|
const sums = []; |
||||
|
columns.forEach((column, index) => { |
||||
|
//console.log('column, index,data',column, index,data) |
||||
|
//显示合计列 |
||||
|
if (index === 1) { |
||||
|
sums[index] = '合计'; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
//不合计的列 |
||||
|
if (sumCol.indexOf(index) == -1) { |
||||
|
sums[index] = ''; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
sums[index] = 0 |
||||
|
data.forEach(e => { |
||||
|
if (!isNaN(e[column.property])) sums[index] += Number(e[column.property])// * e['amount'] |
||||
|
}) |
||||
|
sums[index] = sums[index].toFixed(2) //+ ' 元'; |
||||
|
|
||||
|
}); |
||||
|
// this.groupPrice = sums[7]; |
||||
|
//console.log('getSummaries',sums) |
||||
|
// if (!this.totalFoucs) this.total = sums[5]; |
||||
|
// if (!this.discountFoucs) this.discount = Number(this.total * 100 / this.totalStand).toFixed(2); |
||||
|
return sums; |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
dicInit(){ |
||||
|
//支付方式 |
||||
|
getapi("/api/app/pay-mode").then((res) => { |
||||
|
if (res.code == 1) { |
||||
|
this.dict.payMode = res.data; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//回车替代查询 |
||||
|
enterToQuery() { |
||||
|
// console.log('enterToTab'); |
||||
|
this.$nextTick(() => { |
||||
|
let inputs = document.querySelectorAll(["input"]); //用数组可以读取多个标签的元素 //.inline-input |
||||
|
|
||||
|
// 为每个输入框添加键盘事件监听器 |
||||
|
inputs.forEach((input, i) => { |
||||
|
// console.log('input',input); |
||||
|
input.addEventListener('keydown', (event) => { |
||||
|
if (event.keyCode === 13) { |
||||
|
// 阻止回车键的默认行为（换行） |
||||
|
event.preventDefault(); |
||||
|
|
||||
|
// 如果按下的是回车查询 |
||||
|
// console.log(input.getAttribute('placeholder'),input.value) |
||||
|
let placeholder = input.getAttribute('placeholder') |
||||
|
switch (placeholder) { |
||||
|
case '卡号': |
||||
|
if (input.value) this.btnQuery() |
||||
|
input.select() |
||||
|
break; |
||||
|
case '身份证号': |
||||
|
if (input.value) this.btnQuery() |
||||
|
input.select() |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
input.addEventListener('click', (event) => { |
||||
|
let placeholder = input.getAttribute('placeholder') |
||||
|
switch (placeholder) { |
||||
|
case '卡号': |
||||
|
input.select() |
||||
|
break; |
||||
|
case '身份证号': |
||||
|
input.select() |
||||
|
break; |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
//监听事件 |
||||
|
watch: { |
||||
|
//触发查询事件 |
||||
|
"patientRegister.query.times"(newVal, oldVal) { |
||||
|
if (newVal != oldVal) { |
||||
|
//alert('触发查询事件') |
||||
|
this.query(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
@import "../../assets/css/global_button.css"; |
||||
|
@import "../../assets/css/global_dialog.css"; |
||||
|
@import "../../assets/css/global_table.css"; |
||||
|
@import "../../assets/css/global_form.css"; |
||||
|
@import "../../assets/css/global_input.css"; |
||||
|
@import "../../assets/css/global.css"; |
||||
|
::v-deep .el-input__inner { |
||||
|
/*text-align: center;*/ |
||||
|
padding-left: 5px; |
||||
|
padding-right: 25px; |
||||
|
} |
||||
|
::v-deep .el-icon-date:before { |
||||
|
content: "" |
||||
|
} |
||||
|
.query{ |
||||
|
margin-right: 15px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
color: #232748; |
||||
|
font-size: 400; |
||||
|
font-family: "NotoSansSC-Regular"; |
||||
|
} |
||||
|
.box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
:deep .el-form-item { |
||||
|
margin-bottom: 14px; |
||||
|
} |
||||
|
/* el-dialog的头部样式 */ |
||||
|
:deep .el-dialog__header { |
||||
|
padding: 11px 20px 11px; |
||||
|
} |
||||
|
/* el-dialog的主体样式 */ |
||||
|
:deep .el-dialog__body { |
||||
|
padding: 0px 20px 0px; |
||||
|
} |
||||
|
/* el-divider样式 */ |
||||
|
:deep .el-divider--horizontal { |
||||
|
margin: 0px 0 12px; |
||||
|
} |
||||
|
/* el-dialog的底部样式 */ |
||||
|
:deep .el-dialog__footer { |
||||
|
padding: 0px 20px 14px; |
||||
|
} |
||||
|
.query:last-child{ |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue