605 lines
20 KiB
Vue
605 lines
20 KiB
Vue
<template>
|
||
<div class="box-centenr">
|
||
<div style="width: 100%;display: flex">
|
||
<el-alert
|
||
title="说明"
|
||
type="error"
|
||
description="为了保证加油站商户日常在线支付业务的稳定性，油客里里目前支持多通道支付
|
||
可以有效的避免单支付通道带来不稳定性，从而造成油站不能正常支付问题
|
||
加油站一旦出现不能正常支付的情况，可以随时手工切换支付通道，来保证加油站支付收款业务"
|
||
:closable="false"
|
||
>
|
||
</el-alert>
|
||
|
||
<div style="width: 150%;display: flex;justify-content: right">
|
||
<div class="mingc">功能状态</div>
|
||
<el-switch
|
||
v-model="value1"
|
||
@change="changeStatus1"
|
||
>
|
||
</el-switch>
|
||
</div>
|
||
</div>
|
||
<!-- <div style="margin-top: 20px"><el-button type="primary" icon="el-icon-plus" @click="addMerchant">添加商户信息</el-button></div>-->
|
||
<div class="content-box">
|
||
<!-- <el-card class="box-card" shadow="hover" v-for="(item,index) in 10" :key="index">-->
|
||
<!-- <div slot="header" class="clearfix">-->
|
||
<!-- <span>卡片名称</span>-->
|
||
<!-- <el-button style="float: right; padding: 3px 0" type="text">切换为当前通道</el-button>-->
|
||
<!-- </div>-->
|
||
<!-- <div>商户编号:1861975</div>-->
|
||
<!-- </el-card>-->
|
||
<el-card class="box-card" shadow="hover" v-for="item in merchantList" :key="item.id">
|
||
<div slot="header" class="clearfix">
|
||
<span @click="getMerchantList(item.id)"><dict-tag :options="dict.type.payment_channel" :value="item.merchantName"/></span>
|
||
<el-button v-if="item.isUse=='0'"
|
||
@click="editStatus(item,1)"
|
||
style="float: right; padding: 3px 0" type="text">切换为当前通道</el-button>
|
||
<el-tag v-else effect="dark" type="success" style="float: right">当前使用中</el-tag>
|
||
</div>
|
||
<div>商户编号: {{ item.mchntCd }}</div>
|
||
<div>备注: <span style="color: #00afff;margin-left: 3px" @click="editRemark(item.id)">{{ item.remark ? item.remark : "--" }}</span></div>
|
||
</el-card>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<div class="cont-box">
|
||
<div style="width: 40%">
|
||
<el-alert
|
||
title="使用说明"
|
||
type="error"
|
||
description="添加/编辑对应的规则->规则配置正常->发布规则->规则生效
|
||
注意:功能状态启用且通道规则发布生效后当前功能才有效,否则使用系统单商户号模式"
|
||
:closable="false"
|
||
>
|
||
</el-alert>
|
||
</div>
|
||
|
||
<div style="display: flex;align-items: center">
|
||
<div class="mingc">规则周期</div>
|
||
<el-radio-group v-model="labelPosition" @input="ruleCycle == labelPosition" size="small">
|
||
<el-radio-button label="permanent">永久</el-radio-button>
|
||
<el-radio-button label="singleDay">单日</el-radio-button>
|
||
</el-radio-group>
|
||
<div class="mingc">功能状态</div>
|
||
<el-switch
|
||
v-model="value"
|
||
@change="changeStatus"
|
||
>
|
||
</el-switch>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cont-box" >
|
||
<div><el-button type="primary" icon="el-icon-plus" @click="addOil">添加规则</el-button></div>
|
||
<div><el-button type="success" icon="el-icon-s-promotion" @click="open">发布规则</el-button></div>
|
||
</div>
|
||
<div class="hangbox" v-for="(item,index) in oilConfigList" :key="item.id">
|
||
<div>{{index + 1}}.通道</div>
|
||
<div class="jiaong">{{ item.merchantName }}({{ item.remark }})</div>
|
||
<div> 商户号 </div>
|
||
<div class="jiaong">{{ item.mchntCd }}</div>
|
||
<!-- <div> 交易满 </div>-->
|
||
<div> 交易占比 </div>
|
||
<div class="jiaong"> {{ item.proportion }} </div>
|
||
<div style="margin-right: 20px"> %更换支付通道 </div>
|
||
<!-- <div class="jiaong"> 参与次数不固定次数 </div>-->
|
||
|
||
<el-button type="primary" icon="el-icon-edit" @click="editOilConfig(item.id)">编辑</el-button>
|
||
<el-button type="danger" icon="el-icon-close" @click="deleteOilConfig(item.id)">删除</el-button>
|
||
</div>
|
||
<!-- <div class="hangbox" v-for="(item,index) in 3" :key="index">-->
|
||
<!-- <div>{{index + 1}}.通道</div>-->
|
||
<!-- <div class="jiaong"> 名称 </div>-->
|
||
<!-- <div> 商户号 </div>-->
|
||
<!-- <div class="jiaong"> 1231213213212</div>-->
|
||
<!--<!– <div> 交易满 </div>–>-->
|
||
<!-- <div> 交易占比 </div>-->
|
||
<!-- <div class="jiaong"> 2 </div>-->
|
||
<!-- <div> %更换支付通道 参与次数 </div>-->
|
||
<!-- <div class="jiaong"> 不固定次数 </div>-->
|
||
|
||
<!-- <el-button type="primary" icon="el-icon-edit">编辑</el-button>-->
|
||
<!-- <el-button type="danger" icon="el-icon-close">删除</el-button>-->
|
||
<!-- </div>-->
|
||
<div class="hsize">注:规则按照顺序进行处理并自动更换支付通道，新增或变更规则后需要发布当前规则才生效,发布生效后的规则将从序号1的配置生效</div>
|
||
|
||
<el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
|
||
<el-form :model="form1" ref="form1" :rules="rules" >
|
||
<el-form-item label="支付通道" :label-width="formLabelWidth" prop="merchantName" width="300px">
|
||
<el-select
|
||
v-model="form1.merchantName"
|
||
placeholder="全部"
|
||
clearable
|
||
style="width: 240px"
|
||
>
|
||
<el-option
|
||
v-for="dict in dict.type.payment_channel"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="商户号" :label-width="formLabelWidth" prop="mchntCd" >
|
||
<el-input v-model="form1.mchntCd" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="备注" :label-width="formLabelWidth" prop="remark" >
|
||
<el-input v-model="form1.remark" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="submitMerchant">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<el-dialog :title="title" :visible.sync="show" width="25%" style="margin-top: 200px">
|
||
<span>请输入备注信息</span>
|
||
<el-input placeholder="请输入备注信息" style="margin-top: 20px"
|
||
v-model="merchantConfig.remark"
|
||
clearable>
|
||
</el-input>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="show = false">取 消</el-button>
|
||
<el-button type="primary" @click="submitRemark">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 编辑通道规则-->
|
||
<el-dialog :title="title" :visible.sync="dialogFormVisible"
|
||
width="30%">
|
||
<el-form :model="form" ref="form">
|
||
|
||
<el-form-item label="支付通道" :label-width="formLabelWidth" width="300px">
|
||
<el-select v-model="form.merchConfigId"
|
||
@change="changeMerch"
|
||
:disabled="isDis" placeholder="请选择商户信息" style="width: 100%">
|
||
<el-option
|
||
v-for="item in merchantList" :key="item.id"
|
||
:label="item.merchantName"
|
||
:value="item.id">
|
||
<span style="float: left">
|
||
<dict-tag :options="dict.type.payment_channel" :value="item.merchantName"/>
|
||
</span>
|
||
<span style="color: #30a1ff">({{ item.remark ? item.remark : "--" }})</span>
|
||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.mchntCd }}</span>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="商户号" :label-width="formLabelWidth">
|
||
<el-input v-model="form.mchntCd" disabled autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="交易占比" :label-width="formLabelWidth">
|
||
<el-input v-model="form.proportion" autocomplete="off">
|
||
<template slot="append">%</template>
|
||
</el-input>
|
||
<div>交易占比满足规则后切换到下一个支付通道</div>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="参与次数" :label-width="formLabelWidth">-->
|
||
<!-- <el-radio-group v-model="form.resource" >-->
|
||
<!-- <el-radio label="不固定次数"></el-radio>-->
|
||
<!-- <el-radio label="固定次数"></el-radio>-->
|
||
<!-- </el-radio-group>-->
|
||
<!-- <div>是否限制当前配置在生效期间内的参与次数</div>-->
|
||
<!-- </el-form-item>-->
|
||
|
||
<!-- <el-form-item label="排序" :label-width="formLabelWidth">-->
|
||
<!-- <el-input-number v-model="form.num" controls-position="right" :min="1" :max="100"></el-input-number>-->
|
||
<!-- <div>数值越大顺序越在前</div>-->
|
||
<!-- </el-form-item>-->
|
||
|
||
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="clearOil">取 消</el-button>
|
||
<el-button type="primary" @click="submitOilConfig">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<el-dialog
|
||
title="配置消费记录信息"
|
||
:visible.sync="dialogVisibleList">
|
||
<div class="wrap-wrap">
|
||
<el-table ref="tables" v-loading="loading" :data="merchantRecordList">
|
||
<el-table-column label="ID" align="center" prop="id" width="80" />
|
||
<el-table-column label="入账类型" align="center" prop="type" >
|
||
<template slot-scope="scope">
|
||
<el-tag type="success" v-if="scope.row.type=='0'">增加</el-tag>
|
||
<el-tag type="danger" v-if="scope.row.type=='1'">减少</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="入账金额" align="center" prop="amount"/>
|
||
<el-table-column label="入账状态" align="center" prop="isSuccess">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.isSuccess=='yes'">成功</span>
|
||
<span v-if="scope.row.isSuccess=='no'">失败</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="关联订单号" align="center" width="300" prop="orderNo"/>
|
||
<el-table-column label="注册时间" align="center" width="200" prop="createTime">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.page"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getMerchantList(merchantId)"
|
||
/>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
addMerchant,
|
||
editMerchant,
|
||
editMerchantRemark,
|
||
listMerchant, listMerchantConfigRecord,
|
||
merchantInfo
|
||
} from "@/api/payConfig/merchantconfig";
|
||
import {
|
||
addOilConfig,
|
||
delOilConfig,
|
||
editOilConfig,
|
||
isOpenOilConfig,
|
||
listOilConfig,
|
||
oilConfigInfo
|
||
} from "@/api/payConfig/oilconfig";
|
||
import {addUser, getUserMobile, updateUser} from "@/api/staff/user/user";
|
||
|
||
export default {
|
||
dicts: ['payment_channel'],
|
||
name: 'peizhi',
|
||
data(){
|
||
return{
|
||
// 是否禁用
|
||
isDis:false,
|
||
// 商户配置信息
|
||
merchantList:[],
|
||
// 商品规则配置信息
|
||
oilConfigList:[],
|
||
// 规则周期
|
||
ruleCycle:"singleDay",
|
||
form: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
num: 1,
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: ''
|
||
},
|
||
form1:{},
|
||
formLabelWidth: '80px',
|
||
dialogFormVisible:false,
|
||
dialogVisible:false,
|
||
dialogVisibleList:false,
|
||
show:false,
|
||
value:false,
|
||
value1:true,
|
||
labelPosition: 'singleDay',
|
||
title:"",
|
||
merchantConfig:{},
|
||
rules:{
|
||
merchantName: [
|
||
{ required: true, message: '请选择支付通道', trigger: 'blur' },
|
||
],
|
||
mchntCd: [
|
||
{ required: true, message: '请填写商户号', trigger: 'blur' },
|
||
],
|
||
},
|
||
// 查询参数
|
||
queryParams: {
|
||
page: 1,
|
||
pageSize: 10,
|
||
merchantId:""
|
||
},
|
||
merchantRecordList:[],
|
||
total:0,
|
||
loading:false,
|
||
merchantId:"",
|
||
}
|
||
},
|
||
created() {
|
||
this.getList();
|
||
},
|
||
methods:{
|
||
getMerchantList(id){
|
||
this.dialogVisibleList = true
|
||
this.loading = true;
|
||
if (id){
|
||
this.merchantId = id
|
||
}
|
||
this.queryParams.merchantId = this.merchantId
|
||
listMerchantConfigRecord(this.queryParams).then(res => {
|
||
this.merchantRecordList = res.data.records;
|
||
this.total = res.data.total;
|
||
this.loading = false;
|
||
})
|
||
},
|
||
// 修改商户备注信息
|
||
submitRemark(){
|
||
editMerchantRemark(this.merchantConfig).then(res => {
|
||
if (res.data===1){
|
||
this.$modal.msgSuccess("修改成功")
|
||
this.getList()
|
||
this.show = false
|
||
}
|
||
})
|
||
},
|
||
// 打开修改商户备注信息对话框
|
||
editRemark(id){
|
||
this.title = "备注"
|
||
this.show = true
|
||
merchantInfo(id).then(res => {
|
||
this.merchantConfig = res.data
|
||
})
|
||
},
|
||
submitMerchant(){
|
||
this.$refs["form1"].validate(valid => {
|
||
if (valid) {
|
||
addMerchant(this.form1).then(res => {
|
||
if (res.data == 1){
|
||
this.$modal.msgSuccess("添加成功");
|
||
this.getList()
|
||
this.dialogVisible = false
|
||
}else {
|
||
this.$modal.msgError("添加失败，此通道暂未配置");
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 添加商户号信息
|
||
addMerchant(){
|
||
this.title = "添加商户信息"
|
||
this.dialogVisible = true
|
||
this.form1 = {}
|
||
},
|
||
// 删除支付配置信息
|
||
deleteOilConfig(id){
|
||
this.$confirm('确认删除此通道规则吗?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
delOilConfig(id).then( response => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '规则数据删除成功'
|
||
});
|
||
this.getList();
|
||
this.value1 = true;
|
||
this.changeStatus1();
|
||
})
|
||
}).catch(() => {});
|
||
},
|
||
// 添加商户信息
|
||
addOil(){
|
||
this.title = "添加商户规则"
|
||
this.dialogFormVisible = true;
|
||
this.form = {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
num: 1,
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: ''
|
||
}
|
||
},
|
||
// 选择下拉商户信息
|
||
changeMerch(val){
|
||
this.merchantList.forEach(item => {
|
||
if (item.id == val){
|
||
this.form.mchntCd = item.mchntCd
|
||
}
|
||
})
|
||
},
|
||
// 提交按钮
|
||
submitOilConfig(){
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
if (this.form.id) {
|
||
editOilConfig(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改通道成功");
|
||
this.getList();
|
||
this.dialogFormVisible = false;
|
||
this.isDis = false;
|
||
});
|
||
} else {
|
||
addOilConfig(this.form).then( response => {
|
||
if (response.data==0){
|
||
this.$modal.msgError("已存在当前通道商户号的规则");
|
||
}else {
|
||
this.$modal.msgSuccess("新增通道成功");
|
||
this.getList();
|
||
this.dialogFormVisible = false;
|
||
this.isDis = false;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 取消按钮
|
||
clearOil(){
|
||
this.dialogFormVisible = false;
|
||
this.isDis = false;
|
||
},
|
||
// 修改支付配置信息
|
||
editOilConfig(id){
|
||
this.title = "修改商户规则"
|
||
this.isDis = true;
|
||
this.dialogFormVisible = true;
|
||
oilConfigInfo(id).then( response => {
|
||
this.form = response.data
|
||
})
|
||
},
|
||
// 修改启用状态
|
||
changeStatus(){
|
||
if (this.value){
|
||
isOpenOilConfig({isOpen:1,ruleCycle:this.ruleCycle}).then( response => {
|
||
if (response.data!=1){
|
||
this.$message({
|
||
type: 'error',
|
||
message: '支付通道切换失败,请确保交易占比相加满足百分之百'
|
||
});
|
||
this.value = false;
|
||
this.value1 = true;
|
||
}else {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '发布成功!'
|
||
});
|
||
this.value1 = false;
|
||
}
|
||
})
|
||
}else {
|
||
isOpenOilConfig({isOpen:0,ruleCycle:this.ruleCycle}).then( response => {
|
||
this.value1 = true;
|
||
})
|
||
}
|
||
},
|
||
changeStatus1(){
|
||
if (this.value1){
|
||
isOpenOilConfig({isOpen:0,ruleCycle:this.ruleCycle}).then( response => {
|
||
this.value = false;
|
||
})
|
||
}else {
|
||
isOpenOilConfig({isOpen:1,ruleCycle:this.ruleCycle}).then( response => {
|
||
if (response.data!=1){
|
||
this.$message({
|
||
type: 'error',
|
||
message: '支付通道切换失败,请确保交易占比相加满足百分之百'
|
||
});
|
||
this.value = false;
|
||
this.value1 = true;
|
||
}else {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '发布成功!'
|
||
});
|
||
this.value = true;
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 修改商户使用状态
|
||
editStatus(data,isUse){
|
||
this.$confirm('确定将当前支付配置切换为商户号('+data.mchntCd+')吗?切换后实时生效!', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
data.isUse = isUse
|
||
editMerchant(data).then( response => {
|
||
this.getList();
|
||
this.$message({
|
||
type: 'success',
|
||
message: '支付通道切换成功,已实时切换为商户号('+data.mchntCd+')'
|
||
});
|
||
this.value1 = true;
|
||
this.changeStatus1();
|
||
})
|
||
}).catch(() => {});
|
||
},
|
||
// 获取商户列表信息
|
||
getList(){
|
||
listMerchant().then( response => {
|
||
this.merchantList = response.data;
|
||
this.merchantList.forEach(item => {
|
||
if (item.isOpenRule == "1"){
|
||
this.value1 = false;
|
||
this.value = true;
|
||
}
|
||
})
|
||
})
|
||
listOilConfig().then( response => {
|
||
this.oilConfigList = response.data;
|
||
})
|
||
},
|
||
open() {
|
||
this.$confirm('此操作会发布事件, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.value1 = false;
|
||
this.changeStatus1()
|
||
}).catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消发布'
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.box-centenr{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
}
|
||
.content-box{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 20px;
|
||
}
|
||
.box-card{
|
||
width: 24%;
|
||
margin-right: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.cont-box{
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
margin: 20px 0px;
|
||
}
|
||
.hangbox{
|
||
width: 100%;
|
||
border-bottom: 1px solid #f4f5f6;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 15px 0px;
|
||
}
|
||
.jiaong{
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
padding: 5px 20px;
|
||
background: #F2F6FC;
|
||
color: #409EFF;
|
||
font-weight: bold;
|
||
margin: 0px 5px;
|
||
border-radius: 4px;
|
||
|
||
}
|
||
.mingc{
|
||
margin: 0px 10px;
|
||
color: #999;
|
||
}
|
||
.hsize{
|
||
color: #999;
|
||
}
|
||
|
||
|
||
</style>
|