|
|
@ -4,63 +4,73 @@ |
|
|
<div class="middlebox"> |
|
|
<div class="middlebox"> |
|
|
<div class="contenttitle"> |
|
|
<div class="contenttitle"> |
|
|
收费 / |
|
|
收费 / |
|
|
<span class="contenttitleBold" |
|
|
|
|
|
>会员卡记账统计</span |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<span class="contenttitleBold">会员卡记账统计</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div style="margin-top:7px"> |
|
|
<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"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<span>充值员</span> |
|
|
|
|
|
<el-select v-model="query.feeUserIds" placeholder="请选择" style="margin-left: 10px;width: 170px;" filterable |
|
|
|
|
|
clearable size="small" multiple collapse-tags> |
|
|
|
|
|
<el-option v-for="item in users" :key="item.id" :label="item.surname" :value="item.id" /> |
|
|
|
|
|
</el-select> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="query"> |
|
|
<el-button class="commonbutton" @click="btnQuery">查询</el-button> |
|
|
<el-button class="commonbutton" @click="btnQuery">查询</el-button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div style="background-color: #fff; padding: 15px; border-radius: 8px;"> |
|
|
<div style="background-color: #fff; padding: 15px; border-radius: 8px;"> |
|
|
<el-table :data="dataList" width="100%" :height="window.pageHeight < 600 ? 330 : window.pageHeight - 250" |
|
|
<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"> |
|
|
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 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="customerName" label="卡主姓名" /> |
|
|
<el-table-column prop="mobileTelephone" label="手机号" align="center"/> |
|
|
|
|
|
<el-table-column prop="remark" label="备注" align="center"/> |
|
|
|
|
|
|
|
|
<el-table-column prop="mobileTelephone" label="手机号" align="center" /> |
|
|
|
|
|
<el-table-column prop="remark" label="备注" align="center" /> |
|
|
<el-table-column prop="payModeName" label="支付方式" align="center" /> |
|
|
<el-table-column prop="payModeName" label="支付方式" align="center" /> |
|
|
<el-table-column prop="sumChargeMoney" label="充值金额" align="center"/> |
|
|
|
|
|
<el-table-column prop="sumDeductionMoney" label="扣费金额" align="center"/> |
|
|
|
|
|
<el-table-column prop="sumRefundMoney" label="退费金额" align="center"/> |
|
|
|
|
|
|
|
|
<el-table-column prop="sumChargeMoney" label="充值金额" align="center" /> |
|
|
|
|
|
<el-table-column prop="sumDeductionMoney" label="扣费金额" align="center" /> |
|
|
|
|
|
<el-table-column prop="sumRefundMoney" label="退费金额" align="center" /> |
|
|
</el-table> |
|
|
</el-table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -81,16 +91,18 @@ export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
query: { |
|
|
query: { |
|
|
startDate:'', |
|
|
|
|
|
endDate:'', |
|
|
|
|
|
billFlag:'', |
|
|
|
|
|
payModeIds:[], |
|
|
|
|
|
cardNo:'', |
|
|
|
|
|
customerName:'', |
|
|
|
|
|
idNo:'', |
|
|
|
|
|
mobileTelephone:'' |
|
|
|
|
|
|
|
|
startDate: '', |
|
|
|
|
|
endDate: '', |
|
|
|
|
|
billFlag: '', |
|
|
|
|
|
payModeIds: [], |
|
|
|
|
|
cardNo: '', |
|
|
|
|
|
customerName: '', |
|
|
|
|
|
idNo: '', |
|
|
|
|
|
mobileTelephone: '', |
|
|
|
|
|
feeUserIds: [] |
|
|
}, //查询条件 |
|
|
}, //查询条件 |
|
|
dataList: [], //列表数据 |
|
|
dataList: [], //列表数据 |
|
|
|
|
|
users: [], |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
@ -123,31 +135,31 @@ export default { |
|
|
|
|
|
|
|
|
switch (queryType) { |
|
|
switch (queryType) { |
|
|
case 'idNo': |
|
|
case 'idNo': |
|
|
if(!this.query.idNo) return; |
|
|
|
|
|
|
|
|
if (!this.query.idNo) return; |
|
|
body = { idNo: this.query.idNo }; |
|
|
body = { idNo: this.query.idNo }; |
|
|
break; |
|
|
break; |
|
|
case 'cardNo': |
|
|
case 'cardNo': |
|
|
if(!this.query.cardNo) return; |
|
|
|
|
|
|
|
|
if (!this.query.cardNo) return; |
|
|
body = { cardNo: this.query.cardNo }; |
|
|
body = { cardNo: this.query.cardNo }; |
|
|
break; |
|
|
break; |
|
|
default: |
|
|
default: |
|
|
if(this.query.idNo){ |
|
|
|
|
|
|
|
|
if (this.query.idNo) { |
|
|
body = { idNo: this.query.idNo }; |
|
|
body = { idNo: this.query.idNo }; |
|
|
}else if(this.query.cardNo){ |
|
|
|
|
|
|
|
|
} else if (this.query.cardNo) { |
|
|
body = { cardNo: this.query.cardNo }; |
|
|
body = { cardNo: this.query.cardNo }; |
|
|
}else{ |
|
|
|
|
|
|
|
|
} else { |
|
|
// if(!this.query.startDate) this.query.startDate = moment(new Date()).format('yyyy-MM-DD'); |
|
|
// 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.endDate) this.query.endDate = moment(new Date()).format('yyyy-MM-DD'); |
|
|
if(this.query.startDate > this.query.endDate){ |
|
|
|
|
|
|
|
|
if (this.query.startDate > this.query.endDate) { |
|
|
this.$message.error("数据不合法，起始日期不能大于截止日期！"); |
|
|
this.$message.error("数据不合法，起始日期不能大于截止日期！"); |
|
|
return; |
|
|
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 |
|
|
|
|
|
|
|
|
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; |
|
|
break; |
|
|
} |
|
|
} |
|
|
@ -180,7 +192,7 @@ export default { |
|
|
// } |
|
|
// } |
|
|
|
|
|
|
|
|
const { columns, data } = param; |
|
|
const { columns, data } = param; |
|
|
const sumCol = [6,7,8] //需合计的列 |
|
|
|
|
|
|
|
|
const sumCol = [6, 7, 8] //需合计的列 |
|
|
const sums = []; |
|
|
const sums = []; |
|
|
columns.forEach((column, index) => { |
|
|
columns.forEach((column, index) => { |
|
|
//console.log('column, index,data',column, index,data) |
|
|
//console.log('column, index,data',column, index,data) |
|
|
@ -211,13 +223,21 @@ export default { |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dicInit(){ |
|
|
|
|
|
|
|
|
dicInit() { |
|
|
//支付方式 |
|
|
//支付方式 |
|
|
getapi("/api/app/pay-mode").then((res) => { |
|
|
getapi("/api/app/pay-mode").then((res) => { |
|
|
if (res.code == 1) { |
|
|
if (res.code == 1) { |
|
|
this.dict.payMode = res.data; |
|
|
this.dict.payMode = res.data; |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 获取收费员 |
|
|
|
|
|
postapi('/api/identity/users/GetUserListBySaleRole', { roleSysParmId: "fee_role_id" }) |
|
|
|
|
|
.then(res => { |
|
|
|
|
|
if (res.code > -1) { |
|
|
|
|
|
this.users = res.data |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
}, |
|
|
}, |
|
|
//回车替代查询 |
|
|
//回车替代查询 |
|
|
enterToQuery() { |
|
|
enterToQuery() { |
|
|
@ -285,48 +305,58 @@ export default { |
|
|
@import "../../assets/css/global_form.css"; |
|
|
@import "../../assets/css/global_form.css"; |
|
|
@import "../../assets/css/global_input.css"; |
|
|
@import "../../assets/css/global_input.css"; |
|
|
@import "../../assets/css/global.css"; |
|
|
@import "../../assets/css/global.css"; |
|
|
|
|
|
|
|
|
::v-deep .el-input__inner { |
|
|
::v-deep .el-input__inner { |
|
|
/*text-align: center;*/ |
|
|
/*text-align: center;*/ |
|
|
padding-left: 5px; |
|
|
padding-left: 5px; |
|
|
padding-right: 25px; |
|
|
padding-right: 25px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
::v-deep .el-icon-date:before { |
|
|
::v-deep .el-icon-date:before { |
|
|
content: "" |
|
|
|
|
|
|
|
|
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"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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 { |
|
|
.box { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
:deep .el-form-item { |
|
|
:deep .el-form-item { |
|
|
margin-bottom: 14px; |
|
|
margin-bottom: 14px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* el-dialog的头部样式 */ |
|
|
/* el-dialog的头部样式 */ |
|
|
:deep .el-dialog__header { |
|
|
:deep .el-dialog__header { |
|
|
padding: 11px 20px 11px; |
|
|
padding: 11px 20px 11px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* el-dialog的主体样式 */ |
|
|
/* el-dialog的主体样式 */ |
|
|
:deep .el-dialog__body { |
|
|
:deep .el-dialog__body { |
|
|
padding: 0px 20px 0px; |
|
|
padding: 0px 20px 0px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* el-divider样式 */ |
|
|
/* el-divider样式 */ |
|
|
:deep .el-divider--horizontal { |
|
|
:deep .el-divider--horizontal { |
|
|
margin: 0px 0 12px; |
|
|
margin: 0px 0 12px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/* el-dialog的底部样式 */ |
|
|
/* el-dialog的底部样式 */ |
|
|
:deep .el-dialog__footer { |
|
|
:deep .el-dialog__footer { |
|
|
padding: 0px 20px 14px; |
|
|
padding: 0px 20px 14px; |
|
|
} |
|
|
} |
|
|
.query:last-child{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.query:last-child { |
|
|
margin-right: 0; |
|
|
margin-right: 0; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
pengjun
3 months ago