<template>
<
el-dialog
:append
-to
-body="true"
:title="titleText === 'Add' ? '新增'
: '编辑'"
v
-if="hasLoaded"
:close
-on
-click
-modal="false"
v
-mod
el="dialogVisible"
width="1000
px"
center
@close="handleDialogVisible"
>
<div class="line"></div>
<!
-- 主表单区域
-->
<
el-form ref="form"
:mod
el="form" lab
el-width="120
px" size="default"
:rules="rules">
<
el-form
-item lab
el="提成类型" prop="commissionType">
<
el-radio
-group v
-mod
el="form
.commissionType">
<
el-radio value="operation" @change="handleChanne">运营提成</
el-radio>
<
el-radio value="chann
el" @change="handleChann
elChange">渠道提成</
el-radio>
</
el-radio
-group>
</
el-form
-item>
<
el-form
-item lab
el="负责人类型" prop="responsibleType">
<
el-radio
-group v
-mod
el="form
.responsibleType">
<
el-radio value="operator">运营人员</
el-radio>
<
el-radio value="merchant"
:key="`merchant
-radio
-${showMerchant}`" v
-if="showMerchant">商户</
el-radio>
</
el-radio
-group>
</
el-form
-item>
<
el-form
-item lab
el="负责人" prop="responsible">
<
el-select v
-mod
el="form
.responsible" placeholder="请输入商户名称或者ID">
<
el-option v
-for="item in responsibleOptions"
:key="item
.value"
:lab
el="item
.lab
el"
:value="item
.value"></
el-option>
</
el-select>
</
el-form
-item>
<
el-form
-item lab
el="有效期开始时间" prop="validStartTime">
<
el-date
-picker v
-mod
el="form
.validStartTime" type="datetime" placeholder="选择开始时间" value
-format="YYYY
-MM
-DD HH
:mm
:ss"></
el-date
-picker>
</
el-form
-item>
<
el-form
-item lab
el="有效期结束时间" prop="validEndTime">
<
el-date
-picker
v
-mod
el="form
.validEndTime"
type="datetime"
format="YYYY
-MM
-DD 23
:59
:59"
placeholder="选择结束时间"
value
-format="YYYY
-MM
-DD"
@change="handleEndDateChange"
:disabled="isEndTimeDisabled"
></
el-date
-picker>
<
el-checkbox v
-mod
el="isUnlimited" class="radio
-style
-checkbox" @change="handleUnlimitedChange">
不限 </
el-checkbox>
</
el-form
-item>
</
el-form>
<!
-- 商户操作区域
-->
<
el-button type="primary" @click="showMerchantForm(false)" style="
margin: 10
px 0"> 新增商户 </
el-button>
<
el-table
:data="merchantList" border>
<
el-table
-column lab
el="商户编码" prop="merchantCode" align="center" min
-width="150" />
<
el-table
-column lab
el="商户名称" prop="name" min
-width="100" show
-overflow
-tooltip align="center" />
<
el-table
-column lab
el="经纪公司" min
-width="100" show
-overflow
-tooltip align="center">
<template #default="{ row }">
{{ row
.brokerageText || '
不限' }}
</template>
</
el-table
-column>
<
el-table
-column lab
el="销售区域" min
-width="100" show
-overflow
-tooltip align="center">
<template #default="{ row }">
{{
row
.salesArea
.length > 0
? row
.salesArea
.map((areaId) => {
const area = this
.salesAreaOptions
.find((item) => item
.id === areaId);
return area ? area
.name
: '';
})
.filter(Boolean)
.join('、')
: '
不限'
}}
</template>
</
el-table
-column>
<
el-table
-column lab
el="提成比例" prop="commissionRatio" min
-width="120" show
-overflow
-tooltip align="center" />
<
el-table
-column lab
el="操作" width="150" align="center">
<template #default="{ row, $index }">
<div style="display
: flex; justify
-content
: center; align
-items
: center; height
: 100%; padding
: 6
px 0">
<
el-button type="primary" link @click="showMerchantForm(true, row, $index)" style="color
: #b29350">修改</
el-button>
<
el-button type="primary" link @click="d
eleteMerchant($index)" style="color
: #b29350">删除</
el-button>
</div>
</template>
</
el-table
-column>
</
el-table>
<!
-- 主表单按钮
-->
<div class="dialog
-footer">
<
el-button @click="dialogVisible = false">取消</
el-button>
<
el-button type="primary" @click="handleSave" v
-if="titleText === 'Add'">保存</
el-button>
<
el-button type="primary" @click="handleSave" v
-if="titleText === 'Edit'">保存</
el-button>
</div>
<
el-dialog
:title="isEditMerchant ? '修改商户'
: '新增商户'" v
-mod
el="merchantFormVisible" width="600
px"
:close
-on
-click
-modal="false" center>
<div class="line"></div>
<
el-form ref="merchantForm"
:mod
el="merchantForm" lab
el-width="100
px"
:rules="merchantRules">
<
el-form
-item lab
el="商户" prop="id">
<
el-select v
-mod
el="merchantForm
.id" placeholder="请选择商户" @change="handleMerchant
Select" clearable multiple>
<
el-option v
-for="item in merchantOptions"
:key="item
.id"
:lab
el="item
.name"
:value="item
.id" />
</
el-select>
</
el-form
-item>
<
el-form
-item lab
el="销售区域" prop="salesArea">
<
el-checkbox
-group v
-mod
el="merchantForm
.salesArea"
:disabled="salesAreaUnlimited" @change="handleSalesAreaChange">
<
el-checkbox v
-for="item in salesAreaOptions"
:key="item
.id"
:value="item
.id"
:lab
el="item
.name">
{{ item
.name }}
</
el-checkbox>
</
el-checkbox
-group>
<
el-checkbox
v
-mod
el="salesAreaUnlimited"
:value="true"
style="position
: absolute; right
: 0; top
: 1
px"
class="radio
-style
-checkbox"
@change="handleSalesAreaUnlimited"
>
不限
</
el-checkbox>
</
el-form
-item>
<
el-form
-item lab
el="经纪公司" prop="brokerageIds">
<
el-checkbox
-group v
-mod
el="merchantForm
.brokerageIds"
:disabled="brokerageUnlimited" @change="handleBrokerage
Select">
<
el-checkbox
v
-for="item in userBrokerCompanies"
:key="item
.brokerCompanyId"
:value="item
.brokerCompanyId"
:lab
el="item
.brokerCompanyAbbr"
/>
</
el-checkbox
-group>
<
el-checkbox
v
-mod
el="brokerageUnlimited"
value="true"
class="radio
-style
-checkbox"
style="position
: absolute; right
: 0; top
: 1
px"
@change="handleBrokerageUnlimited"
>
不限
</
el-checkbox>
</
el-form
-item>
<
el-form
-item lab
el="提成比例" prop="commissionRatio">
<
el-input v
-mod
el.number="merchantForm
.commissionRatio" placeholder="请输入提成比例" suffix
-icon="
el-icon
-percentage" clearable></
el-input>
</
el-form
-item>
</
el-form>
<template #footer>
<span class="dialog
-footer">
<
el-button @click="merchantFormVisible = false">取消</
el-button>
<
el-button type="primary" @click="saveMerchant" v
-if="isEditMerchant">保存</
el-button>
<
el-button type="primary" @click="saveMerchant" v
-else>保存</
el-button>
</span>
</template>
</
el-dialog>
</
el-dialog>
</template>
<script>
import _ from 'lodash';
import {
ElMessageBox,
ElMessage } from '
element
-plus';
import { ArrowRight, ArrowLeft, Money } from '@
element
-plus/icons
-vue';
import { userBrokerCompanyList } from '/@/api/
admin/signer';
import { getListAll as merchantListAll } from '/@/api/
admin/merchant';
export default {
components
: { ArrowRight, ArrowLeft },
props
: {
id
: {
type
: String,
default
: '',
},
titleText
: {
type
: String,
default
: 'Add', // 默认为新增
},
},
data() {
return {
// 主弹窗状态
dialogVisible
: true,
hasLoaded
: false,
showMerchant
: false,
// 主表单数据
form
: {
commissionType
: '',
responsibleType
: '',
responsible
: '',
validStartTime
: '',
validEndTime
: '',
},
isUnlimited
: false,
isEndTimeDisabled
: false,
// 下拉选项数据
responsibleOptions
: [],
userBrokerCompanies
: [],
merchantOptions
: [],
// 销售区域数据源（包含ID和名称）
salesAreaOptions
: [
{ id
: 1, name
: '香港' },
{ id
: 2, name
: '澳门' },
{ id
: 3, name
: '新加坡' },
{ id
: 4, name
: '百慕大' },
],
// 商户列表数据
merchantList
: [],
currentEditIndex
: -1,
// 商户表单相关（适配多选）
merchantFormVisible
: false,
isEditMerchant
: false,
merchantForm
: {
id
: [], // 改为数组存储选中的商户ID（多选）
name
: '', // 存储选中的商户名称，用于
显示
salesArea
: [], // 销售区域ID数组
brokerageIds
: [], // 经纪公司ID数组
brokerageText
: '', // 经纪公司名称（文字）
commissionRatio
: null,
},
salesAreaUnlimited
: false,
brokerageUnlimited
: false,
// 验证规则（调整商户选择的验证）
rules
: {
commissionType
: [{ required
: true, message
: '请选择提成类型', trigger
: 'change' }],
responsibleType
: [{ required
: true, message
: '请选择负责人类型', trigger
: 'change' }],
responsible
: [{ required
: true, message
: '请选择负责人', trigger
: 'change' }],
validStartTime
: [{ required
: true, message
: '请选择有效期开始时间', trigger
: 'change' }],
validEndTime
: [
{
required
: true,
message
: '请选择有效期结束时间',
trigger
: 'change',
validator
: (rule, value, callback) => {
if (this
.isUnlimited) {
callback();
}
else if (!value) {
callback(new Error('请选择有效期结束时间'));
}
else {
callback();
}
},
},
],
},
merchantRules
: {
// 调整商户选择的验证规则，支持数组长度判断
id
: [
{
required
: true,
message
: '请选择商户',
trigger
: ['blur', 'change'],
validator
: (rule, value, callback) => {
if (Array
.isArray(value) && value
.length > 0) {
callback();
}
else {
callback(new Error('请选择至少一个商户'));
}
},
},
],
salesArea
: [
{
required
: true,
message
: '请选择销售区域或选择
不限',
trigger
: ['blur', 'change'],
validator
: (rule, value, callback) => {
if (this
.salesAreaUnlimited || value
.length > 0) {
callback();
}
else {
callback(new Error('请选择销售区域或选择
不限'));
}
},
},
],
brokerageIds
: [
{
required
: true,
message
: '请选择经纪公司或选择
不限',
trigger
: ['blur', 'change'],
validator
: (rule, value, callback) => {
if (this
.brokerageUnlimited || value
.length > 0) {
callback();
}
else {
callback(new Error('请选择经纪公司或选择
不限'));
}
},
},
],
commissionRatio
: [
{ required
: true, message
: '请输入提成比例', trigger
: 'blur' },
{ type
: 'number', min
: 0, max
: 100, message
: '提成比例必须在0
-100之间', trigger
: 'blur' },
],
},
};
},
created() {
this
.initData();
// 加载经纪公司列表
userBrokerCompanyList()
.then((res) => {
this
.userBrokerCompanies = res
.data || [];
});
// 加载商户列表
merchantListAll()
.then((res) => {
this
.merchantOptions = (res
.data || [])
.filter((item) => item
.id !== 1);
});
},
methods
: {
// 初始化数据（适配多选商户）
initData() {
// 模拟负责人数据
this
.responsibleOptions = [
{ value
: 'merchant1', lab
el: '商户1' },
{ value
: 'merchant2', lab
el: '商户2' },
{ value
: 'operator1', lab
el: '运营人员1' },
{ value
: 'operator2', lab
el: '运营人员2' },
];
// 模拟初始商户数据（id改为数组）
this
.merchantList = [
{
merchantCode
: 'MER001',
id
: [1, 2],
name
: '商户A、商户B',
brokerageIds
: ['1'],
brokerageText
: 'BWM经纪公司',
salesArea
: [1, 2],
commissionRatio
: 15,
},
// {
// merchantCode
: 'MER002',
// merchantId
: [3], // 单个商户也用数组
// merchantNames
: '商户C',
// brokerageIds
: [],
// brokerageText
: '
不限',
// salesArea
: [],
// commissionRatio
: 8,
// },
// {
// merchantCode
: 'MER003',
// merchantId
: [4, 5],
// merchantNames
: '商户D、商户E',
// brokerageIds
: ['2'],
// brokerageText
: 'BIB经纪公司',
// salesArea
: [3], // 新加坡的ID
// commissionRatio
: 12,
// },
];
this
.hasLoaded = true;
},
// 提成类型切换
handleChann
elChange(val) {
this
.showMerchant = val === 'chann
el';
},
handleChanne(val) {
this
.showMerchant = val !== 'operation';
},
// 有效期结束日期处理
handleEndDateChange(
selectedDate) {
if (
selectedDate) {
this
.form
.validEndTime = `${
selectedDate} 23
:59
:59`;
}
else {
this
.form
.validEndTime = '';
}
},
// 有效期
不限切换
handleUnlimitedChange(val) {
if (val) {
this
.form
.validEndTime = '';
this
.isEndTimeDisabled = true;
}
else {
this
.isEndTimeDisabled = false;
}
},
//
显示商户表单（适配多选）
showMerchantForm(isEdit, row = null, index =
-1) {
this
.isEditMerchant = isEdit;
this
.merchantFormVisible = true;
this
.currentEditIndex = index;
// 重置表单
this
.$nextTick(() => {
if (this
.$refs
.merchantForm) {
this
.$refs
.merchantForm
.resetFi
elds();
}
});
if (isEdit && row) {
this
.merchantForm = {
id
: [
...row
.id], // 保留 ID 用于提交
name
: row
.name, //
显示名称，修改此处
salesArea
: [
...row
.salesArea],
brokerageIds
: [
...row
.brokerageIds],
brokerageText
: row
.brokerageText || '',
commissionRatio
: row
.commissionRatio,
};
this
.salesAreaUnlimited = row
.salesArea
.length === 0;
this
.brokerageUnlimited = row
.brokerageIds
.length === 0;
}
else {
// 新增状态：重置表单
this
.merchantForm = {
id
: [],
name
: '',
salesArea
: [],
brokerageIds
: [],
brokerageText
: '',
commissionRatio
: null,
};
this
.salesAreaUnlimited = false;
this
.brokerageUnlimited = false;
}
},
// 选择商户后同步名称（适配多选）
handleMerchant
Select(merchantIds) {
if (!merchantIds || !merchantIds
.length) {
this
.merchantForm
.name = '';
return;
}
// 筛选所有选中的商户并拼接名称
const
selectedMerchants = this
.merchantOptions
.filter((item) => merchantIds
.includes(item
.id));
this
.merchantForm
.name =
selectedMerchants
.map((item) => item
.name)
.join('、');
},
// 选择经纪公司后同步文字名称
handleBrokerage
Select(ids) {
if (!ids || ids
.length === 0) {
this
.merchantForm
.brokerageText = '';
return;
}
// 从所有经纪公司中筛选选中的项
const
selectedBrokers = this
.userBrokerCompanies
.filter((item) => ids
.includes(item
.brokerCompanyId));
// 拼接选中的经纪公司简称
this
.merchantForm
.brokerageText =
selectedBrokers
.map((item) => item
.brokerCompanyAbbr)
.join('、');
},
// 销售区域选择变化
handleSalesAreaChange() {
if (this
.merchantForm
.salesArea
.length > 0) {
this
.salesAreaUnlimited = false;
}
},
// 经纪公司选择变化
handleBrokerageChange() {
if (this
.merchantForm
.brokerageIds
.length > 0) {
this
.brokerageUnlimited = false;
}
},
// 销售区域
不限切换
handleSalesAreaUnlimited(val) {
if (val) {
this
.merchantForm
.salesArea = [];
}
},
// 经纪公司
不限切换
handleBrokerageUnlimited(val) {
if (val) {
this
.merchantForm
.brokerageIds = [];
this
.merchantForm
.brokerageText = '
不限';
}
},
// 保存商户数据（适配多选）
saveMerchant() {
this
.$refs
.merchantForm
.validate((valid) => {
if (valid) {
// 处理经纪公司文字
显示（
不限状态）
const brokerageText = this
.brokerageUnlimited ? '
不限'
: this
.merchantForm
.brokerageText;
if (this
.isEditMerchant && this
.currentEditIndex !==
-1) {
// 修改操作
const updatedData = {
...this
.merchantList[this
.currentEditIndex],
id
: [
...this
.merchantForm
.id], // 保存ID数组
name
: this
.merchantForm
.name, // 保存名称拼接
salesArea
: this
.salesAreaUnlimited ? []
: [
...this
.merchantForm
.salesArea],
brokerageIds
: this
.brokerageUnlimited ? []
: [
...this
.merchantForm
.brokerageIds],
brokerageText,
commissionRatio
: this
.merchantForm
.commissionRatio,
};
this
.merchantList
.splice(this
.currentEditIndex, 1, updatedData);
const params = {
id
: [
...this
.merchantForm
.id],
id
: this
.merchantForm
.id,
salesArea
: this
.salesAreaUnlimited ? []
: [
...this
.merchantForm
.salesArea],
brokerageIds
: this
.brokerageUnlimited ? []
: [
...this
.merchantForm
.brokerageIds],
commissionRatio
: this
.merchantForm
.commissionRatio,
};
console
.log('9999999', params);
// this
.$http
//
.post(this
.$api
.merchant
.config, params)
//
.then((res) => {
// if (res
.code == '1') {
// this
.$message
.success('配置人员成功');
// this
.$emit('onSuccess');
// }
else {
// this
.$message
.error(res
.message);
// }
// })
//
.catch((err) => {
// this
.$message
.error('配置人员失败');
// this
.$emit('onClose');
// });
ElMessage
.success('商户修改成功');
}
else {
// 新增操作：生成唯一编码
const maxCode = this
.merchantList
.reduce((max, item) => {
const num = parseInt(item
.merchantCode?
.replace('MER', '') || '0');
return num > max ? num
: max;
}, 0);
const newCode = `MER${String(maxCode + 1)
.padStart(3, '0')}`;
const newMerchant = {
merchantCode
: newCode,
id
: [
...this
.merchantForm
.id],
name
: this
.merchantForm
.name,
salesArea
: this
.salesAreaUnlimited ? []
: [
...this
.merchantForm
.salesArea],
brokerageIds
: this
.brokerageUnlimited ? []
: [
...this
.merchantForm
.brokerageIds],
brokerageText,
commissionRatio
: this
.merchantForm
.commissionRatio,
};
this
.merchantList
.push(newMerchant);
console
.log('4444444444444', newMerchant);
const params = {
merchantCode
: newCode,
id
: [
...this
.merchantForm
.id],
id
: this
.merchantForm
.id,
salesArea
: this
.salesAreaUnlimited ? []
: [
...this
.merchantForm
.salesArea],
brokerageIds
: this
.brokerageUnlimited ? []
: [
...this
.merchantForm
.brokerageIds],
commissionRatio
: this
.merchantForm
.commissionRatio,
};
console
.log('22222222222', params);
// this
.$http
//
.post(this
.$api
.merchant
.config, params)
//
.then((res) => {
// if (res
.code == '1') {
// this
.$message
.success('配置人员成功');
// this
.$emit('onSuccess');
// }
else {
// this
.$message
.error(res
.message);
// }
// })
//
.catch((err) => {
// this
.$message
.error('配置人员失败');
// this
.$emit('onClose');
// });
ElMessage
.success('商户新增成功');
}
this
.merchantFormVisible = false;
}
});
},
// 删除商户
async d
eleteMerchant(index) {
const result = await
ElMessageBox
.confirm(`确定要删除【${this
.merchantList[index]
.name}】吗？`, '删除确认', {
confirmButtonText
: '确认删除',
canc
elButtonText
: '取消',
type
: 'warning',
})
.catch(() => false);
if (result) {
this
.merchantList
.splice(index, 1);
ElMessage
.success('删除成功');
}
},
// 保存主表单
handleSave() {
this
.$refs
.form
.validate((valid) => {
if (valid) {
if (this
.merchantList
.length === 0) {
ElMessage
.warning('请至少新增一条商户数据');
return;
}
// 构建提交数据（商户ID为数组）
const submitData = {
...this
.form,
validEndTime
: this
.isUnlimited ? ''
: this
.form
.validEndTime,
merchantList
: this
.merchantList
.map((merchant) => ({
...merchant,
id
: merchant
.id, // 提交ID数组
salesArea
: merchant
.salesArea,
brokerageIds
: merchant
.brokerageIds,
})),
};
console
.log('提交的数据
:', submitData);
ElMessage
.success('保存成功');
this
.$emit('onSuccess');
}
});
},
// 关闭弹窗
handleDialogVisible() {
this
.$emit('onClose');
},
},
};
</script>
<style lang="scss" scoped>
::v
-deep
.el-input {
width
: 240
px;
}
::v
-deep
.el-select {
width
: 240
px;
}
.dialog
-footer {
display
: flex;
justify
-content
: center;
margin-top
: 20
px;
}
/* 商户表单样式 */
::v
-deep
.el-checkbox
-group {
margin-bottom: 10
px;
}
/* 表格样式优化 */
::v
-deep
.el-table {
margin-bottom: 20
px;
}
/* 操作按钮样式 */
::v
-deep
.el-button
--text {
padding
: 5
px 10
px;
}
::v
-deep
.radio
-style
-checkbox {
margin-left
: 10
px;
.el-checkbox__inner {
border
-radius
: 50% !important; /* 圆形边框 */
width
: 16
px !important;
height
: 16
px !important;
}
.el-checkbox__inner
::after {
content
: '';
position
: absolute;
top
: 50%;
left
: 50%;
transform
: translate(
-50%,
-50%);
width
: 4
px;
height
: 4
px;
border
-radius
: 50%;
background
-color
: #ffff;
opacity
: 0;
}
&
.is
-checked
.el-checkbox__inner
::after {
opacity
: 1;
}
}
.line {
margin-top
: -20
px;
margin-bottom: 23
px;
border
-bottom: 1
px solid #3333 !important;
}
.text
-btn {
color
: var(
--el-color
-primary);
}
</style> this
.merchantForm = {
id
: [
...row
.id], // 保留 ID 用于提交
name
: row
.name, //
显示名称，修改此处
salesArea
: [
...row
.salesArea],
brokerageIds
: [
...row
.brokerageIds],
brokerageText
: row
.brokerageText || '',
commissionRatio
: row
.commissionRatio,
};为什么点击修改商户返显的是id 改成name
扫一扫
2134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
