fix(dealer-orders):修复三级分销商显示逻辑并调整布局- 修正三级分销商信息显示条件，确保仅在有效用户ID时展示
- 调整结算月份文本的布局间距，增加顶部边距
This commit is contained in:
@@ -1,335 +0,0 @@
|
|||||||
<!-- 编辑弹窗 -->
|
|
||||||
<template>
|
|
||||||
<ele-modal
|
|
||||||
:width="900"
|
|
||||||
:visible="visible"
|
|
||||||
:maskClosable="false"
|
|
||||||
:maxable="maxable"
|
|
||||||
:title="isUpdate ? '分销订单' : '分销订单'"
|
|
||||||
:body-style="{ paddingBottom: '28px' }"
|
|
||||||
@update:visible="updateVisible"
|
|
||||||
:footer="null"
|
|
||||||
>
|
|
||||||
<a-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="form"
|
|
||||||
:rules="rules"
|
|
||||||
:label-col="{ span: 6 }"
|
|
||||||
:wrapper-col="{ span: 18 }"
|
|
||||||
>
|
|
||||||
<!-- 订单基本信息 -->
|
|
||||||
<a-divider orientation="left">
|
|
||||||
<span style="color: #1890ff; font-weight: 600;">基本信息</span>
|
|
||||||
</a-divider>
|
|
||||||
|
|
||||||
<a-row :gutter="16">
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="客户名称" name="comments">
|
|
||||||
{{ form.comments }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="订单编号" name="orderNo">
|
|
||||||
{{ form.orderNo }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="结算电量" name="orderPrice">
|
|
||||||
{{ parseFloat(form.orderPrice || 0).toFixed(2) }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="税率" name="rate">
|
|
||||||
{{ form.rate }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="单价" name="price">
|
|
||||||
{{ form.price }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="结算金额" name="payPrice">
|
|
||||||
{{ parseFloat(form.settledPrice || 0).toFixed(2) }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="实发金额" name="payPrice">
|
|
||||||
{{ parseFloat(form.payPrice || 0).toFixed(2) }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 分销商信息 -->
|
|
||||||
<a-divider orientation="left">
|
|
||||||
<span style="color: #1890ff; font-weight: 600;">收益计算</span>
|
|
||||||
</a-divider>
|
|
||||||
|
|
||||||
<!-- 二级分销商 -->
|
|
||||||
<div class="dealer-section">
|
|
||||||
<h4 class="dealer-title">
|
|
||||||
<a-tag color="orange">间推收益</a-tag>
|
|
||||||
</h4>
|
|
||||||
<a-row :gutter="16">
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="用户ID" name="firstUserId">
|
|
||||||
{{ form.firstUserId }}
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="昵称" name="firstNickname">
|
|
||||||
{{ form.firstNickname }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="占比" name="rate">
|
|
||||||
{{ '30%' }}
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="获取收益" name="firstMoney">
|
|
||||||
{{ form.firstMoney }}
|
|
||||||
<!-- <a-input-number-->
|
|
||||||
<!-- :min="0"-->
|
|
||||||
<!-- :precision="2"-->
|
|
||||||
<!-- placeholder="请输入一级分销佣金"-->
|
|
||||||
<!-- v-model:value=""-->
|
|
||||||
<!-- style="width: 100%"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <template #addonAfter>元</template>-->
|
|
||||||
<!-- </a-input-number>-->
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 一级分销商 -->
|
|
||||||
<div class="dealer-section">
|
|
||||||
<h4 class="dealer-title">
|
|
||||||
<a-tag color="orange">{{ form.thirdUserId > 0 ? '推荐收益' : '获取收益' }}</a-tag>
|
|
||||||
</h4>
|
|
||||||
<a-row :gutter="16">
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="用户ID" name="userId">
|
|
||||||
{{ form.userId }}
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="昵称" name="nickname">
|
|
||||||
{{ form.nickname }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="占比" name="rate">
|
|
||||||
{{ form?.thirdUserId > 0 ? '10%' : '70%' }}
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="获取收益" name="firstMoney">
|
|
||||||
{{ form.secondMoney }}
|
|
||||||
<!-- <a-input-number-->
|
|
||||||
<!-- :min="0"-->
|
|
||||||
<!-- :precision="2"-->
|
|
||||||
<!-- placeholder="请输入一级分销佣金"-->
|
|
||||||
<!-- v-model:value=""-->
|
|
||||||
<!-- style="width: 100%"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <template #addonAfter>元</template>-->
|
|
||||||
<!-- </a-input-number>-->
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 三级分销商 -->
|
|
||||||
<div class="dealer-section" v-if="form.thirdUserId > 0">
|
|
||||||
<h4 class="dealer-title">
|
|
||||||
<a-tag color="orange">{{ form.thirdUserId > 0 ? '获取收益' : '推荐收益' }}</a-tag>
|
|
||||||
</h4>
|
|
||||||
<a-row :gutter="16">
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="用户ID" name="secondUserId">
|
|
||||||
{{ form.secondUserId }}
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="昵称" name="secondNickname">
|
|
||||||
{{ form.secondNickname }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<a-form-item label="占比" name="rate">
|
|
||||||
{{ '60%' }}
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="获取收益" name="thirdMoney">
|
|
||||||
{{ form.thirdMoney }}
|
|
||||||
<!-- <a-input-number-->
|
|
||||||
<!-- :min="0"-->
|
|
||||||
<!-- :precision="2"-->
|
|
||||||
<!-- placeholder="请输入二级分销佣金"-->
|
|
||||||
<!-- v-model:value=""-->
|
|
||||||
<!-- style="width: 100%"-->
|
|
||||||
<!-- >-->
|
|
||||||
<!-- <template #addonAfter>元</template>-->
|
|
||||||
<!-- </a-input-number>-->
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a-form-item label="结算时间" name="settleTime" v-if="form.isSettled === 1">
|
|
||||||
{{ form.settleTime }}
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</ele-modal>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, reactive, watch } from 'vue';
|
|
||||||
import { Form } from 'ant-design-vue';
|
|
||||||
import { assignObject } from 'ele-admin-pro';
|
|
||||||
import { ShopDealerOrder } from '@/api/shop/shopDealerOrder/model';
|
|
||||||
import { FormInstance } from 'ant-design-vue/es/form';
|
|
||||||
|
|
||||||
// 是否是修改
|
|
||||||
const isUpdate = ref(false);
|
|
||||||
const useForm = Form.useForm;
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
// 弹窗是否打开
|
|
||||||
visible: boolean;
|
|
||||||
// 修改回显的数据
|
|
||||||
data?: ShopDealerOrder | null;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'done'): void;
|
|
||||||
(e: 'update:visible', visible: boolean): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
// 是否显示最大化切换按钮
|
|
||||||
const maxable = ref(true);
|
|
||||||
// 表格选中数据
|
|
||||||
const formRef = ref<FormInstance | null>(null);
|
|
||||||
|
|
||||||
// 表单数据
|
|
||||||
const form = reactive<ShopDealerOrder>({
|
|
||||||
id: undefined,
|
|
||||||
userId: undefined,
|
|
||||||
nickname: undefined,
|
|
||||||
orderNo: undefined,
|
|
||||||
orderPrice: undefined,
|
|
||||||
settledPrice: undefined,
|
|
||||||
price: undefined,
|
|
||||||
month: undefined,
|
|
||||||
payPrice: undefined,
|
|
||||||
firstUserId: undefined,
|
|
||||||
secondUserId: undefined,
|
|
||||||
thirdUserId: undefined,
|
|
||||||
firstMoney: undefined,
|
|
||||||
secondMoney: undefined,
|
|
||||||
thirdMoney: undefined,
|
|
||||||
firstNickname: undefined,
|
|
||||||
secondNickname: undefined,
|
|
||||||
thirdNickname: undefined,
|
|
||||||
rate: undefined,
|
|
||||||
comments: undefined,
|
|
||||||
isInvalid: 0,
|
|
||||||
isSettled: 0,
|
|
||||||
settleTime: undefined,
|
|
||||||
tenantId: undefined,
|
|
||||||
createTime: undefined,
|
|
||||||
updateTime: undefined
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 更新visible */
|
|
||||||
const updateVisible = (value: boolean) => {
|
|
||||||
emit('update:visible', value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 表单验证规则
|
|
||||||
const rules = reactive({
|
|
||||||
userId: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请选择用户ID',
|
|
||||||
trigger: 'blur'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const { resetFields } = useForm(form, rules);
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.visible,
|
|
||||||
(visible) => {
|
|
||||||
if (visible) {
|
|
||||||
if (props.data) {
|
|
||||||
assignObject(form, props.data);
|
|
||||||
if(props.data.orderPrice && props.data.rate){
|
|
||||||
form.firstMoney = (Number(props.data.payPrice) * 0.3).toFixed(2)
|
|
||||||
if(props.data.thirdUserId && props.data.thirdUserId > 0){
|
|
||||||
form.secondMoney = (Number(props.data.payPrice) * 0.1).toFixed(2)
|
|
||||||
}else {
|
|
||||||
form.secondMoney = (Number(props.data.payPrice) * 0.7).toFixed(2)
|
|
||||||
}
|
|
||||||
form.thirdMoney = (Number(props.data.payPrice) * 0.6).toFixed(2)
|
|
||||||
}
|
|
||||||
isUpdate.value = true;
|
|
||||||
} else {
|
|
||||||
// 重置为默认值
|
|
||||||
Object.assign(form, {
|
|
||||||
id: undefined,
|
|
||||||
userId: undefined,
|
|
||||||
orderId: undefined,
|
|
||||||
orderPrice: undefined,
|
|
||||||
firstUserId: undefined,
|
|
||||||
secondUserId: undefined,
|
|
||||||
thirdUserId: undefined,
|
|
||||||
firstMoney: undefined,
|
|
||||||
secondMoney: undefined,
|
|
||||||
thirdMoney: undefined,
|
|
||||||
isInvalid: 0,
|
|
||||||
isSettled: 0,
|
|
||||||
settleTime: undefined
|
|
||||||
});
|
|
||||||
isUpdate.value = false;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
resetFields();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.dealer-section {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
padding: 16px;
|
|
||||||
background: #fafafa;
|
|
||||||
border-radius: 6px;
|
|
||||||
border-left: 3px solid #1890ff;
|
|
||||||
|
|
||||||
.dealer-title {
|
|
||||||
margin: 0 0 16px 0;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
|
|
||||||
.ant-tag {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-divider-horizontal.ant-divider-with-text-left) {
|
|
||||||
margin: 24px 0 16px 0;
|
|
||||||
|
|
||||||
.ant-divider-inner-text {
|
|
||||||
padding: 0 16px 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-form-item) {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.ant-input-number) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user