emis-frontend/src/views/emis/emisSettlePayRecord/index.vue
2025-01-03 10:01:33 +08:00

587 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<XdPageContainer class="app-container">
<SearchForm slot="pageHeader" :model="queryParams" ref="queryForm" size="mini" :maxShow="10" label-width="100px" v-show="showSearch" @search="handleQuery" @reset="resetQuery">
<el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
<el-col :span="9">
<el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
<el-col :span="24">
<el-form-item label="" prop="queryKey" label-width="80px">
<div slot="label">
<el-radio-group class="query-label" v-model="queryOrderType">
<el-radio :key="1" label="1">运单号</el-radio>
<el-radio :key="2" label="2">账单号</el-radio>
</el-radio-group>
</div>
<XdTextareaInput
v-model="queryParams.queryKey"
:placeholder="$t('多个流水号逗号或换行隔开')"
clearable
:rows="2"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="登记时间" prop="createTime" label-width="100px" >
<div slot="label" style="text-align: left;">
<el-radio-group class="query-label" v-model="queryDateType">
<el-radio :key="1" label="1">登记时间</el-radio>
<el-radio :key="2" label="2">交易时间</el-radio>
</el-radio-group>
</div>
<elDateAdvPicker v-model="dateTimeRange" ></elDateAdvPicker>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="15">
<el-form-item label="支付类型" prop="payType">
<el-select v-model="queryParams.payType" placeholder="收款方式" clearable filterable style="width:100%">
<el-option label="企业微信收款" :value="3"></el-option>
<el-option label="对公付款" :value="4"></el-option>
<el-option label="微信支付" :value="1"></el-option>
<el-option label="支付宝支付" :value="2"></el-option>
<el-option label="其他" :value="5"></el-option>
</el-select>
</el-form-item>
<el-form-item label="收退类型" prop="recType">
<el-select v-model="queryParams.recType" placeholder="" clearable filterable style="width:100%">
<el-option label="收款" :value="1"></el-option>
<el-option label="退款" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="支付状态" prop="payStatus">
<el-select v-model="queryParams.payStatus" placeholder="" clearable filterable style="width:100%">
<el-option label="未支付" :value="0"></el-option>
<el-option label="支付成功" :value="1"></el-option>
<el-option label="支付失败" :value="2"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item :label="$t('销售联系人')" prop="salesmen">
<SalemanPicker :placeholder="$t('销售联系人')" v-model="queryParams.params.salesmen" ></SalemanPicker>
</el-form-item> -->
</el-col>
</el-row>
</SearchForm>
<XdTable
slot="pageContent"
slot-scope="slotProps"
:height="(slotProps.contentHeight)+'px'"
v-loading="loading"
border
size="mini"
storageName="emisSettlePayRecordList_main_s"
:data="emisSettlePayRecordList"
:showSearch.sync="showSearch"
:queryParams="queryParams"
:total="total"
@queryTable="getList"
@selection-change="handleSelectionChange"
@sort-change="handleSortChange"
show-summary
:summary-method="getSummaries"
>
<div slot="toolbar">
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['emis:emisSettlePayRecord:add']"
>新增</el-button>
</el-col> -->
<!--
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['emis:emisSettlePayRecord:edit']"
>修改</el-button>
</el-col>-->
<!-- <el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['emis:emisSettlePayRecord:remove']"
>作废</el-button>
</el-col> -->
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['emis:emisSettlePayRecord:export']"
>导出</el-button>
</el-col> -->
</el-row>
</div>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="60">
<template slot-scope="scope">
<span v-text="getIndex(scope.$index)"> </span>
</template>
</el-table-column>
<el-table-column :label="$t('交易时间')" align="center" prop="tradeDate" width="170" :show-overflow-tooltip="true" />
<el-table-column :label="$t('流水号')" align="center" prop="payId" width="170" :show-overflow-tooltip="true"/>
<el-table-column :label="$t('收款来源')" align="center" prop="settleType" width="80" >
<template slot-scope="scope">
<el-tag type="success" v-if="scope.row.settleType == '1'">月结收款</el-tag>
<el-tag type="success" v-if="scope.row.settleType == '2'">现金收款</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('缴款客户')" align="center" prop="payMan" width="150" :show-overflow-tooltip="true" />
<!-- <el-table-column :label="$t('月结编号')" align="center" prop="payManCode" width="100" :show-overflow-tooltip="true"/> -->
<el-table-column :label="$t('支付类型')" align="center" prop="payType" width="100" >
<template slot-scope="scope">
<span v-if="scope.row.payType == '1'">微信支付</span>
<span v-if="scope.row.payType == '2'">支付宝支付</span>
<span v-if="scope.row.payType == '3'">企业微信收款</span>
<span v-if="scope.row.payType == '4'">对公付款</span>
<span v-if="scope.row.payType == '5'">其他</span>
</template>
</el-table-column>
<el-table-column :label="$t('收付类型')" align="center" prop="recType" width="80" >
<template slot-scope="scope">
<span v-if="scope.row.recType == '1'">收款</span>
<span v-if="scope.row.recType == '2'">退款</span>
</template>
</el-table-column>
<el-table-column :label="$t('支付状态')" align="center" prop="payStatus" width="100" >
<template slot-scope="scope">
<el-tag type="info" v-if="scope.row.payStatus == '0' || scope.row.payStatus==null">未支付</el-tag>
<el-tag type="warning" v-if="scope.row.payStatus == '1'">支付中</el-tag>
<el-tag type="warning" v-if="scope.row.payStatus == '2'">支付成功</el-tag>
<el-tag type="error" v-if="scope.row.payStatus == '3'">支付失败 </el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('失败原因')" align="center" prop="payStatusDesc" width="100" :show-overflow-tooltip="true"/>
<el-table-column :label="$t('支付金额')" align="center" prop="payMoney" width="100" />
<el-table-column :label="$t('理赔金额')" align="center" prop="satisfyMoney" width="100" :show-overflow-tooltip="true"/>
<el-table-column :label="$t('折让金额')" align="center" prop="allowanceMoney" width="100" :show-overflow-tooltip="true"/>
<el-table-column :label="$t('抵扣金额')" align="center" prop="deductionMoney" width="100" :show-overflow-tooltip="true"/>
<el-table-column :label="$t('其他收费')" align="center" prop="otherMoney" width="100" :show-overflow-tooltip="true"/>
<el-table-column :label="$t('理赔原因')" align="center" prop="satisfyReason" width="100" :show-overflow-tooltip="true" />
<el-table-column :label="$t('折让原因')" align="center" prop="allowanceReason" width="100" :show-overflow-tooltip="true"/>
<el-table-column :label="$t('抵扣原因')" align="center" prop="deductionReason" width="100" :show-overflow-tooltip="true"/>
<el-table-column :label="$t('其他原因')" align="center" prop="otherReason" width="100" :show-overflow-tooltip="true" />
<el-table-column :label="$t('备注')" align="center" prop="remark" width="100" :show-overflow-tooltip="true"/>
<el-table-column label="登记人" align="center" prop="createByName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="登记网点" align="center" prop="createSiteName" width="80" :show-overflow-tooltip="true"/>
<el-table-column label="登记时间" align="center" prop="createTime" width="170"/>
</XdTable>
<el-dialog :title="titleForm" :visible.sync="openForm" width="50%" :destroy-on-close="true" v-dialogDrag append-to-body>
<emisSettlePayRecordForm :id="currentId" @on-changed="handleFormChanged" @on-cancel="cancelForm"></EmisSettlePayRecordForm>
</el-dialog>
</XdPageContainer>
</template>
<script>
import { listEmisSettlePayRecord, getEmisSettlePayRecord, delEmisSettlePayRecord, addEmisSettlePayRecord, updateEmisSettlePayRecord } from "@/api/emis/emisSettlePayRecord";
import emisSettlePayRecordForm from '@/views/emis/emisSettlePayRecord/emisSettlePayRecordForm';
import SalemanPicker from '@/views/emis/EmisBaseTools/SalemanPicker.vue';
import elDateAdvPicker from '@/components/DatePickerAdv/elDateAdvPicker';
export default {
name: "EmisSettlePayRecord",
components: { elDateAdvPicker,emisSettlePayRecordForm,SalemanPicker },
dicts: [
],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 创建时间搜索
dateTimeRange:[],
// 总条数
total: 0,
// 账单收退款记录表格数据
emisSettlePayRecordList: [],
currentId:null,
openForm: false,
titleForm: "",
queryOrderType:null,
queryDateType:null,
// 弹出展示层
id:null,
titleView:"",
openView: false,
// 更新站点时间范围
daterangeAuditDate: [],
// 更新站点时间范围
daterangeRefundDate: [],
// 更新站点时间范围
daterangeTradeDate: [],
// 更新站点时间范围
daterangeCreateTime: [],
// 更新站点时间范围
daterangeUpdateTime: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
queryKey:null,
payType: null,
recType: null,
payMan: null,
payManCode: null,
settleBillNo: null,
blAudit: null,
auditDate: null,
auditManCode: null,
auditSiteCode: null,
customerCode: null,
customerName: null,
payMoney: null,
payStatus: null,
payStatusDesc: null,
breakType: null,
breakReason: null,
breakEmpCode: null,
recManCode: null,
settleType: null,
refundDate: null,
refundManCode: null,
refundSeq: null,
refundMode: null,
refundMoney: null,
refundReason: null,
refundRemark: null,
refundOpManCode: null,
refundRegisterSiteCode: null,
refundRegisterManCode: null,
satisfyMoney: null,
satisfyReason: null,
allowanceMoney: null,
allowanceReason: null,
deductionMoney: null,
deductionReason: null,
otherMoney: null,
otherReason: null,
tradeDate: null,
remark: null,
params:{
billCode:null,
}
},
};
},
created() {
this.queryOrderType="1";
this.queryDateType="1";
this.getList();
},
methods: {
initQueryParams(){
// 按运单查询时的处理
if(this.queryOrderType==1){
this.queryParams.params.billCode=this.queryParams.queryKey;
this.queryParams.settleBillNo=null;
}
else if(this.queryOrderType==2){
this.queryParams.params.billCode=null;
this.queryParams.settleBillNo=this.queryParams.queryKey;
}
let thisQueryParams = {...this.queryParams};
if(this.queryDateType==1){
thisQueryParams = this.addDateRange(this.queryParams, this.dateTimeRange,"createTime");
}
else if(this.queryDateType==2){
thisQueryParams = this.addDateRange(this.queryParams, this.dateTimeRange,"tradeDate");
}
return thisQueryParams;
},
/** 查询账单收退款记录列表 */
getList() {
let qParam=this.initQueryParams();
this.loading = true;
listEmisSettlePayRecord(qParam).then(response => {
this.emisSettlePayRecordList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
// 排序 查询字段是表格中字段名字 动态取值排序顺序
handleSortChange(column) {
this.queryParams.orderByColumn = column.prop;
this.queryParams.isAsc = column.order;
this.getList();
},
/** 新增按钮操作 */
handleAdd(row) {
this.currentId=null;
this.openForm= true;
this.titleForm = "新增";
},
handleShowMoreInput(){
this.moreInputVisible = !this.moreInputVisible;
},
/** 修改按钮操作 */
handleUpdate(row) {
this.currentId= row.id;
this.openForm = true;
this.titleForm = "修改";
},
handleView(row) {
this.id=row.id;
this.titleView="查看";
this.openView=true;
// this.router.push({ path: '/emis/emisSettlePayRecord/viewDetail', query: { id: row.id }})
},
handleFormChanged(){
this.openForm = false;
this.getList();
},
cancelForm(){
this.openForm = false;
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除').then(function() {
return delEmisSettlePayRecord(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
//指定列求和
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
if (
column.property === 'payMoney'
) {
const values = data.map(item => Number(item.payMoney));
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] = sums[index].toFixed(2); //保留0位小数
}
else if (
column.property === 'satisfyMoney'
) {
const values = data.map(item => Number(item.satisfyMoney));
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] = sums[index].toFixed(2); //保留2位小数
}
else if (
column.property === 'allowanceMoney'
) {
const values = data.map(item => Number(item.allowanceMoney));
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] = sums[index].toFixed(2); //保留2位小数
}
else if(
column.property === 'deductionMoney'
){
const values = data.map(item => Number(item.deductionMoney));
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] = sums[index].toFixed(2); //保留2位小数
}
else if(
column.property === 'otherMoney'
){
const values = data.map(item => Number(item.otherMoney));
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] = sums[index].toFixed(2); //保留2位小数
}
});
console.log(sums);
return sums
},
/** 导出按钮操作 */
handleExport() {
// this.download('emis/emisSettlePayRecord/export', {
// ...this.queryParams
// }, `emisSettlePayRecord_${new Date().getTime()}.xlsx`)
const loadingInstance = this.$loading({
text: '正在导出...'
})
var qParam = {...this.queryParams};
qParam.pageNum=1;
qParam.pageSize=5000;
listEmisSettlePayRecord(this.addDateRange(qParam, this.dateTimeRange)).then(response => {
this.downloadLoading = false
if (response.code === 200) {
const curList = response.rows
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['id','支付序号','支付类型','收付类型','支付人名称','支付人编码','总账单号','审核状态','审核日期','审核人','审核站点','客户编码','客户名称','金额','支付状态','支付状态描述','break_type','break_reason','break_emp_code','收款人代码','结算类型','退款日期','退款人','退款序号','退款模式','退款金额','退款原因','退款备注','退款操作人','退款登记站点','退款登记人','理赔金额','理赔原因','allowance_money','allowance_reason','deduction_money','deduction_reason','other_money','other_reason','交易时间','备注','删除标志(0代表存在','创建者','创建时间','更新者','更新时间','创建站点','更新站点',];
const filterVal = ['id','payId','payType','recType','payMan','payManCode','settleBillNo','blAudit','auditDate','auditManCode','auditSiteCode','customerCode','customerName','payMoney','payStatus','payStatusDesc','breakType','breakReason','breakEmpCode','recManCode','settleType','refundDate','refundManCode','refundSeq','refundMode','refundMoney','refundReason','refundRemark','refundOpManCode','refundRegisterSiteCode','refundRegisterManCode','satisfyMoney','satisfyReason','allowanceMoney','allowanceReason','deductionMoney','deductionReason','otherMoney','otherReason','tradeDate','remark','delFlag','createBy','createTime','updateBy','updateTime','createSite','updateSite',];
const data = this.formatJson(filterVal, curList, response.rows)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '账单收退款记录',
autoWidth: true
})
loadingInstance.close()
})
}
});
},
formatJson(filterVal, jsonData, resData) {
let index = 0
return jsonData.map(v => filterVal.map(j => {
if (j === 'index') {
return ++index
}
if (j === 'status') {
var statusStr='xxx'
if(v[j] == 10){
statusStr='xxx'
}
return statusStr;
}
return v[j]
}))
},
/** 列索引函数 */
getIndex($index) {
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
},
/** 时间搜索响应函数 */
dateTimeChange(value){
this.dateTimeRange=value;
},
}
};
</script>
<style scoped>
.el-divider{
margin-top: 0px;
background: 0 0;
border-top: 1px solid #E6EBF5;
}
.el-divider__text {
color: #0955ee;
cursor: pointer;
}
</style>