Skip to content

薪
薪瑞通-前端
Commit dbbdcf9a authored by 许珑标's avatar 许珑标
Browse files
Options

增加批量到支付宝功能

parent 0238e10d
Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 0 deletions
src/views/business/payOrder/batchToAli.vue 0 → 100644
View file @ dbbdcf9a
<template>
<div class="app-container">
<div style="padding:20px 10px 10px 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
<el-form ref="batchForm" :model="batchForm" :rules="batchRules" label-width="120px">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="支付名称" prop="batchPayName">
<el-input v-model="batchForm.batchPayName" placeholder="请输入支付名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="支付类型" prop="payTitle">
<el-select v-model="batchForm.payTitle" placeholder="请选择支付类型">
<el-option v-for="dict in dict.type.pay_type_title" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="付款账号" prop="payerAccNo">
<el-select v-model="batchForm.payerAccNo" placeholder="请选择付款账号">
<el-option v-for="item in payAccList" :key="item.id" :label="item.payAccNo + ' -- ' + item.companyName" :value="item.payAccNo">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="payRemark">
<el-input v-model="batchForm.payRemark" placeholder="请输入支付备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div style="padding:10px;margin-top:20px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" icon="el-icon-upload2" @click="importClick"
v-hasPermi="['business:outPersonal:add']">导入</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="page.rows" @selection-change="handleSelectionChange"
:highlight-current-row="true" :highlight-selection-row="true" :stripe="true">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="收款账户" align="center">
<el-table-column label="户名" align="center" prop="payeeAccName" />
<el-table-column label="账户" align="center" prop="payeeAccNo" />
<el-table-column label="类型" align="center" prop="payeeAccType" >
<template slot-scope="scope">
<el-row>
<el-col :span="12">
<dict-tag :options="dict.type.payee_acc_type" :value="scope.row.payeeAccType"/>
</el-col>
<el-col :span="12">
<el-tag v-if="scope.row.isPrivateAcc && scope.row.isPrivateAcc === 1">对私账户</el-tag>
<el-tag v-if="scope.row.isPrivateAcc && scope.row.isPrivateAcc === 2">对公账户</el-tag>
</el-col>
</el-row>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="支付金额" align="center" prop="amount" />
<el-table-column label="支付类型" align="center" prop="payTitle" />
<el-table-column label="备注" align="center" prop="payRemark" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot="header" slot-scope="scope">
<el-input
v-model="page.search"
size="mini"
@change="searchEvt"
placeholder="输入姓名搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row.indexKey, 'delRow')"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination style="margin-top: 10px"
v-show="page.total && page.total > 0"
@current-change="handleCurrentChange"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total">
</el-pagination>
<el-row :gutter="10" class="mb8" style="margin-top: 15px">
<el-col :span="1.5" style="float: right">
<span v-if="page.total">合计： {{ page.countAmount }} 元</span>
<el-button style="margin-left: 100px" type="primary" icon="el-icon-s-promotion" size="mini" @click="confirmPay">确认支付</el-button>
</el-col>
</el-row>
</div>
<!-- 添加或修改 批量支付明细对话框 -->
<el-dialog title="新增收款人" :visible.sync="addPanelOpen" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="支付类型" prop="payTitle">
<el-select v-model="form.payTitle" placeholder="请选择支付类型">
<el-option v-for="dict in dict.type.pay_type_title" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="收款人户名" prop="payeeAccName">
<el-input v-model="form.payeeAccName" placeholder="请输入收款人户名" />
</el-form-item>
<el-form-item label="收款人账户" prop="payeeAccNo">
<el-input v-model="form.payeeAccNo" placeholder="请输入收款人账户" />
</el-form-item>
<el-form-item label="收款账户类型" prop="payeeAccType">
<el-select v-model="form.payeeAccType" placeholder="请选择收款账户类型" disabled>
<el-option v-for="dict in dict.type.payee_acc_type" :key="dict.value" :label="dict.label"
:value="dict.value * 1" />
</el-select>
</el-form-item>
<el-form-item label="公户/私户" prop="isPrivateAcc">
<el-select v-model="form.isPrivateAcc" placeholder="请选择收款账户类型" disabled>
<el-option label="对私账户" :value="1" />
<el-option label="对公账户" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="金额" prop="amount">
<el-input-number style="width: 100%" v-model="form.amount" :precision="2" :step="0.1" placeholder="请输入支付金额" />
</el-form-item>
<el-form-item label="备注" prop="payRemark">
<el-input v-model="form.payRemark" placeholder="请输入支付备注" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="addDetail">确 定</el-button>
<el-button @click="addPanelOpen = false">取 消</el-button>
</div>
</el-dialog>
<!-- 导入对话框 -->
<el-dialog title="导入人员信息" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
:action="upload.url + '?templateType=' + upload.uploadRadio" :disabled="upload.isUploading"
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">-->
<!-- <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 -->
<!-- </div>-->
<span>仅允许导入xls、xlsx格式文件。</span>
<a style="color:#1890ff;margin:0px;line-height:14px" class="download" download="收款人明细模板"
href="/收款人明细模板.xlsx" target="_blank">下载模板</a>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="importByExcel">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listAllAccInfo } from '@/api/business/accInfo'
import { getToken } from '@/utils/auth'
import { addPayOrder } from '@/api/business/payOrder'
export default {
name: "batchToBank",
dicts: ['pay_type_title', 'payee_acc_type'],
data() {
return {
page: {
search: '',
rows: [],
pageNum: 1,
pageSize: 10,
total: 0,
countAmount: 0
},
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/business/payOrder/detail/importByExcel"
},
indexList: [],
payAccList: [],
batchForm: {},
batchRules: {
payTitle: [
{ required: true, message: "支付类型不能为空", trigger: "blur" }
],
batchPayName: [
{ required: true, message: "支付名称不能为空", trigger: "blur" }
],
payerAccNo: [
{ required: true, message: "请选择付款账号", trigger: "blur" }
],
},
addPanelOpen: false,
// 非多个禁用
multiple: true,
loading: false,
transMap: new Map(),
form: {
},
rules: {
payTitle: [
{ required: true, message: "支付类型不能为空", trigger: "blur" }
],
payeeAccName: [
{ required: true, message: "收款人户名不能为空", trigger: "blur" }
],
payeeAccNo: [
{ required: true, message: "收款人账户不能为空", trigger: "blur" }
],
payeeAccType: [
{ required: true, message: "请选择收款账户类型", trigger: "blur" }
],
amount: [
{ required: true, message: "转账金额不能为空", trigger: "blur" },
{
validator: (rule, value, callback) => {
if (value < 0.01) {
callback(new Error('转账金额必须大于0'));
} else {
callback();
}
}, trigger: 'blur'
}
],
}
};
},
created() {
},
mounted() {
this.getPayAccList()
},
methods: {
getPayAccList() {
listAllAccInfo().then(resp => {
if (resp.code == 200) {
this.payAccList = resp.data
}
})
},
// 新增明细
handleAdd() {
if (this.transMap && this.transMap.size >= 1000) {
return this.$modal.msgWarning("单次支付不能超过1000条")
}
this.addPanelOpen = true
this.form = {
amount: 0,
payeeAccType: 2,
isPrivateAcc: 1
}
if (this.batchForm.payTitle) {
this.form.payTitle = this.batchForm.payTitle
}
},
// 删除明细
handleDelete(indexKey, pStr) {
this.$confirm('确定执行删除操作吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log(pStr, indexKey)
if (pStr && pStr === 'delRow') {
this.transMap.delete(indexKey)
this.getList()
} else if (this.indexList && this.indexList.length > 0) {
this.indexList.forEach(item => {
this.transMap.delete(item)
})
this.indexList = [];
this.getList()
}
}).catch(() => {});
},
// 多选框选中数据
handleSelectionChange(selection) {
this.indexList = []
selection.map(item => {
this.indexList.push(item.indexKey)
});
this.single = selection.length !== 1
this.multiple = !selection.length
},
addDetail() {
this.$refs["form"].validate(valid => {
if (valid) {
this.form.indexKey = this.form.payeeAccNo + '' + this.transMap.size;
this.transMap.set(this.form.indexKey, this.form)
this.addPanelOpen = false
this.getList()
}
});
},
importClick() {
this.$refs["batchForm"].validate(valid => {
if (valid) {
this.upload.open = true
}
});
},
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
if (response.data && response.data.length > 0) {
response.data.forEach((item, index) => {
let indexKey = item.payeeAccNo + '' + this.transMap.size;
this.transMap.set(indexKey, {
indexKey: indexKey,
payTitle: this.batchForm.payTitle,
payeeAccName: item.payeeAccName,
payeeAccNo: item.payeeAccNo,
payeeAccType: 1,
isPrivateAcc: 1,
amount: item.amount,
payRemark: item.payRemark
})
})
this.getList()
}
},
importByExcel() {
this.$refs.upload.submit();
},
confirmPay() {
if (!this.transMap || this.transMap.size < 1) {
return this.$modal.msgWarning("支付明细列表不能为空!");
} else if (this.transMap.size >= 1000) {
return this.$modal.msgWarning("单次支付不能超过1000条")
}
this.$refs["batchForm"].validate(valid => {
if (valid) {
this.$confirm('确定提交支付吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.batchForm.details = [...this.transMap.values()];
addPayOrder(this.batchForm).then(resp => {
if (200 === resp.code) {
this.$modal.msgSuccess("操作成功");
this.$router.push({ path: "/transfer/record" });
}
})
}).catch(() => {});
}
});
},
handleCurrentChange(val) {
this.page.pageNum = val
this.getList()
},
searchEvt() {
this.getList()
},
getList() {
if (this.transMap && this.transMap.size > 0) {
let rows = [...this.transMap.values()]
if (this.page.search) {
rows = rows.filter(item => item.payeeAccName.indexOf(this.page.search) > -1)
}
this.page.rows = rows.slice(this.page.pageNum * this.page.pageSize - this.page.pageSize, this.page.pageNum * this.page.pageSize);
let countAmount = 0;
rows.forEach((item, index) => {
countAmount += item.amount
})
this.page.countAmount = countAmount.toFixed(2)
this.page.total = rows.length
} else {
this.page.rows = [];
this.page = {
countAmount: 0,
pageNum: 1,
pageSize: 10
}
}
}
}
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment