You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
353 lines
12 KiB
353 lines
12 KiB
<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="payModeId" label="支付方式" align="center">
|
|
<template slot-scope="scope">
|
|
<div>{{ dddw(dict.payMode, "id", scope.row.payModeId, "displayName") }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="billMoney" label="记账金额" align="center"/>
|
|
<el-table-column prop="billFlag" label="记账标志" align="center">
|
|
<template slot-scope="scope">
|
|
<div>{{ dddw(dict.billFlag, "id", scope.row.billFlag, "displayName") }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<!--
|
|
<el-table-column prop="creatorName" label="创建人员" align="center"/>
|
|
<el-table-column prop="creationTime" label="创建日期" width="150" align="center">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.creationTime">
|
|
{{ moment(scope.row.creationTime).format("yyyy-MM-DD") }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
-->
|
|
<el-table-column prop="lastModifierName" label="修改人员" align="center"/>
|
|
<el-table-column prop="lastModificationTime" label="修改日期" width="150" align="center">
|
|
</el-table-column>
|
|
</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] //需合计的列
|
|
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>
|