<template>
<div class="app-
container">
<el-form>
<el-row :gutter="14">
<el-col :span="7">
<el-form-item label="商户名称">
<el-select v-model="merchantValue" @change="handleMerchantChange" placeholder="请选择商户">
<el-option v-for="item in merchantOptions" :key="item
.value" :label="item
.label" :value="item
.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="车场名称">
<el-select v-model="parkingValue" @change="handleparkingChange" placeholder="请选择车场">
<el-option v-for="item in parkingOptions" :key="item
.value" :label="item
.label" :value="item
.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="scenario">
<span>场景</span>
<el-tag icon="el-icon-circle-plus-outline" style="margin-left: 10px" @click="scenarioAdd">+</el-tag>
<div v-for="(item, index) in scenarioList" :key="index" class="scenario-item">
<el-select v-model="item
.sceneId" placeholder="请选择场景" style="margin-left: 10px" @change="checkDuplicate(item)">
<el-option v-for="option in sceneBindingOptions" :key="option
.value" :label="option
.label" :value="option
.value" />
</el-select>
<span style="margin-left: 10px">条件</span>
<el-input v-model="item
.minAmount" placeholder="金额大于" style="width: 200px; margin-left: 10px" @input="checkAmountRange(item)" />
<el-input v-model="item
.maxAmount" placeholder="金额小于" style="width: 200px; margin-left: 10px" @input="checkAmountRange(item)" />
<span style="margin-left: 10px">支付账户</span>
<el-select v-model="item
.accountObj" value-key="value" placeholder="请选择账户" style="margin-left: 10px" @change="checkDuplicate(item)">
<el-option v-for="option in channelConfigOptions" :key="option
.channelKey" :label="option
.channelName" :value="item
.channelKey" />
</el-select>
<el-button type="danger" icon="el-icon-delete" style="margin-left: 10px" @click="scenarioRemove(index)">删除</el-button>
</div>
</div>
<el-button type="success" icon="el-icon-plus" style="margin-top: 15px; margin-left: 10px" @click="submit">提交</el-button>
</div>
</template>
<script>
import {
GetOpPayMerchantinfoList,
GetParkNameByMerchantCode,
GetOpPaySceneBindingList,
GetOpPayChannelConfigList,
addOpPayStrategy,
GetOpPayStrategyByParkId,
UpdateOpPayStrategy,
QueryOpPayChannelInfo
} from '@/api/openpay/opPayMerchant'
export default {
data() {
return {
merchantValue: '',
parkingValue: '',
merchantOptions: [],
parkingOptions: [],
channelConfigOptions: [],
sceneBindingOptions: [],
scenarioList: [
{
id: null,
sceneId: null,
sceneName: '',
parkId: null,
channelKey: '',
minAmount: null,
maxAmount: null,
accountObj: null,
isEdit: false,
},
],
}
},
mounted() {
this
.getMerchantList()
},
methods: {
getMerchantList() {
GetOpPayMerchantinfoList()
.then((res) => {
if (res
.code === 200) {
this
.merchantOptions = res
.data
.map((item) => ({
value: item
.merchantCode,
label: item
.merchantName,
}))
}
})
GetOpPaySceneBindingList()
.then((res) => {
if (res
.code === 200) {
this
.sceneBindingOptions = res
.data
.map((item) => ({
value: item
.id,
label: item
.sceneName,
}))
}
})
const param = {};
QueryOpPayChannelInfo(param)
.then((res) => {
if (res
.code === 200) {
console
.log(res
.data)
this
.channelConfigOptions = res
.data
.result
.map((item) => ({
value: item
.channelKey,
label: item
.channelName,
channelKey: item
.channelKey,
}))
}
})
},
handleMerchantChange() {
if (this
.merchantValue) {
GetParkNameByMerchantCode(this
.merchantValue)
.then((res) => {
if (res
.code === 200) {
this
.parkingOptions = res
.data
.map((item) => ({
value: item
.id,
label: item
.parkName,
}))
// 如果车场列表为空，清空场景列表并重置车场下拉框
if (this
.parkingOptions
.length === 0) {
this
.scenarioList = [
{
id: null,
sceneId: null,
sceneName: '',
parkId: null,
channelKey: '',
minAmount: null,
maxAmount: null,
accountObj: null,
isEdit: false,
},
]
this
.parkingValue = null // 重置车场下拉框
} else {
// 如果有车场数据，获取第一个车场的策略列表
this
.parkingValue = this
.parkingOptions[0]
.value
this
.getStrategyList()
}
}
})
} else {
this
.parkingOptions = []
this
.parkingValue = null // 重置车场下拉框
this
.scenarioList = [
{
id: null,
sceneId: null,
sceneName: '',
parkId: null,
channelKey: '',
minAmount: null,
maxAmount: null,
accountObj: null,
isEdit: false,
},
]
}
},
handleparkingChange() {
this
.getStrategyList()
},
// 检查是否存在金额范围冲突
isAmountRangeConflict(item) {
return this
.scenarioList
.some((existingItem) => {
// 排除当前编辑的项
if (existingItem
.id === item
.id) return false;
// 只在同一个场景下检查金额范围冲突
if (existingItem
.sceneId !== item
.sceneId) return false;
return (
parseFloat(item
.minAmount) < parseFloat(existingItem
.maxAmount) &&
parseFloat(item
.maxAmount) > parseFloat(existingItem
.minAmount)
);
});
},
// 检查是否存在相同的场景和支付账户组合
isDuplicateScenarioAndAccount(item) {
return this
.scenarioList
.some((existingItem) => {
return (
existingItem
.sceneId === item
.sceneId && existingItem
.accountObj?
.value === item
.accountObj?
.value && existingItem
.id !== item
.id // 排除当前编辑的项
)
})
},
checkAmountRange(item) {
if (this
.isAmountRangeConflict(item)) {
this
.$message({ type: 'warning', message: '金额范围与已有场景冲突！' })
// 清空当前输入
item
.minAmount = null
item
.maxAmount = null
}
},
checkDuplicate(item) {
if (this
.isDuplicateScenarioAndAccount(item)) {
this
.$message({ type: 'warning', message: '相同的场景和支付账户组合已存在！' })
// 清空当前选择
item
.sceneId = null
item
.accountObj = null
item
.maxAmount = null
item
.minAmount = null
}
},
getStrategyList() {
GetOpPayStrategyByParkId(this
.parkingValue)
.then((res) => {
if (res
.code === 200 && res
.data && res
.data
.length > 0) {
this
.scenarioList = res
.data
.map((item) => {
const accountObj = this
.channelConfigOptions
.find((opt) => opt
.label === item
.accountName)
return {
id: item
.syStrategyId,
sceneId: item
.sceneBindingId,
sceneName: item
.sceneName,
parkId: item
.parkId,
channelKey: item
.channelKey,
minAmount: item
.minAmount,
maxAmount: item
.maxAmount,
accountObj: accountObj || null,
isEdit: true, // 已存在的场景设置为可编辑
}
})
} else {
this
.scenarioList = [
{
id: null,
sceneId: null,
sceneName: '',
parkId: this
.parkingValue,
channelKey: '',
minAmount: null,
maxAmount: null,
accountObj: null,
isEdit: false, // 新增场景默认不可编辑
},
]
}
})
},
scenarioAdd() {
this
.scenarioList
.push({
id: null,
sceneId: null,
sceneName: '',
parkId: this
.parkingValue,
channelKey: '',
minAmount: null,
maxAmount: null,
accountObj: null,
isEdit: false, // 新增场景默认不可编辑
})
// 检查是否存在相同的场景和支付账户组合
if (this
.scenarioList
.some((item) => item
.sceneId === newItem
.sceneId && item
.accountObj?
.value === newItem
.accountObj?
.value)) {
this
.$message({ type: 'warning', message: '不能添加相同的场景和支付账户组合！' })
return
}
// 检查是否存在金额范围冲突
if (this
.isAmountRangeConflict(newItem)) {
this
.$message({ type: 'warning', message: '金额范围与已有场景冲突！' })
return
}
this
.scenarioList
.push(newItem)
},
scenarioRemove(index) {
this
.$confirm('确定要删除这条记录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
const item = this
.scenarioList[index]
if (!item
.isEdit) {
this
.$message
.warning('新增数据无法删除')
return
}
UpdateOpPayStrategy({
Id: item
.id,
ScenarioId: item
.sceneId,
ParkId: item
.parkId,
ChannelKey: item
.channelKey,
MinAmount: item
.minAmount,
MaxAmount: item
.maxAmount,
Status: '0', // 设置为禁用状态
})
.then((res) => {
if (res
.code === 200) {
this
.scenarioList
.splice(index, 1)
this
.$message({ type: 'success', message: '删除成功!' })
} else {
this
.$message({ type: 'error', message: res
.message || '删除失败!' })
}
})
.catch((error) => {
this
.$message({ type: 'error', message: `请求失败：${error
.message}` })
})
})
.catch(() => {
this
.$message({ type: 'info', message: '已取消删除' })
})
},
async submit() {
// 校验逻辑
for (let i = 0; i < this
.scenarioList
.length; i++) {
const item = this
.scenarioList[i]
if (!item
.sceneId) {
this
.$message({ type: 'warning', message: `第 ${i + 1} 个场景为空，请选择！` })
return
}
if (item
.minAmount === null || item
.minAmount === '' || parseFloat(item
.minAmount) < 0) {
this
.$message({ type: 'warning', message: `第 ${i + 1} 个场景的条件1必须是非负数！` })
return
}
if (!item
.maxAmount) {
this
.$message({ type: 'warning', message: `第 ${i + 1} 个场景的条件2为空，请输入！` })
return
}
if (!item
.accountObj) {
this
.$message({ type: 'warning', message: `第 ${i + 1} 个场景的支付账户为空，请选择！` })
return
}
if (parseFloat(item
.maxAmount) <= parseFloat(item
.minAmount)) {
this
.$message({ type: 'warning', message: `第 ${i + 1} 个场景的条件2必须大于条件1！` })
return
}
// 检查是否存在相同的场景和支付账户组合
if (this
.isDuplicateScenarioAndAccount(item)) {
this
.$message({ type: 'warning', message: `第 ${i + 1} 个场景和支付账户组合已存在！` })
return
}
// 检查是否存在金额范围冲突
if (this
.isAmountRangeConflict(item)) {
this
.$message({ type: 'warning', message: `第 ${i + 1} 个场景的金额范围与已有场景冲突！` })
return
}
}
try {
for (let i = 0; i < this
.scenarioList
.length; i++) {
const item = this
.scenarioList[i]
const data = {
ScenarioId: Number(item
.sceneId),
ParkId: this
.parkingValue,
ChannelKey: item
.accountObj?
.channelKey,
MinAmount: Number(parseFloat(item
.minAmount)
.toFixed(2)),
MaxAmount: Number(parseFloat(item
.maxAmount)
.toFixed(2)),
PayChannelConfigId: item
.accountObj?
.value,
Priority: 1,
Status: '1',
CreateTime: new Date(),
}
let response
if (item
.isEdit) {
// 如果是已存在的场景，调用更新接口
response = await UpdateOpPayStrategy({ Id: item
.id,
...data })
} else {
// 如果是新增的场景，调用新增接口
response = await addOpPayStrategy(data)
}
if (response
.code !== 200) {
// 如果某个操作失败，抛出错误
throw new Error(`第 ${i + 1} 个场景提交失败：${response
.message || '未知错误'}`)
}
}
// 所有操作成功
this
.$message({ type: 'success', message: '提交成功！' })
this
.getStrategyList() // 刷新列表
} catch (err) {
// 捕获错误并显示提示
this
.$message({ type: 'error', message: `提交失败：${err
.message}` })
}
},
},
}
</script>
<style scoped>
.app-
container {
padding: 20px;
}
.scenario-item {
margin-top: 10px;
}
/* 自定义样式 */
.el-button--danger {
background-color: #ff4d4f; /* 自定义背景颜色 */
border-color: #ff4d4f; /* 自定义边框颜色 */
padding: 8px 16px; /* 自定义内边距 */
font-size: 12px; /* 自定义字体大小 */
border-radius: 20px; /* 自定义圆角大小 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0
.1); /* 自定义阴影 */
color: #ffffff; /* 自定义文本颜色 */
}
.el-button--danger:hover {
background-color: #ff7875; /* 鼠标悬停时的背景颜色 */
border-color: #ff7875; /* 鼠标悬停时的边框颜色 */
}
</style>
这段代码中 QueryOpPayChannelInfo(param)
.then((res) => {
if (res
.code === 200) {
console
.log(res
.data)
this
.channelConfigOptions = res
.data
.result
.map((item) => ({
value: item
.channelKey,
label: item
.channelName,
channelKey: item
.channelKey,
}))
}
}) 这个方法 为什么没有获取到值
扫一扫
3930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
