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