feat(shopDealerOrder): 实现分销订单结算功能- 添加"立即结算"按钮并绑定保存事件

- 实现结算状态校验，防止重复结算 - 增加用户签约状态检查 - 调用 updateSdyDealerOrder 接口完成结算 -优化分销商信息展示，明确各级佣金比例 - 调整一级、二级、三级分销商显示顺序 - 添加开发调试信息区域，便于跟踪数据 - 移除未使用的表单输入组件和注释代码 - 更新分销商标签文案，统一使用佣金比例描述
2025-10-19 10:03:55 +08:00
parent 5a6c1f8ec3
commit bf38e7e6d9
2 changed files with 161 additions and 255 deletions
--- a/src/views/sdy/shopDealerOrder2/components/shopDealerOrderEdit.vue
+++ b/src/views/sdy/shopDealerOrder2/components/shopDealerOrderEdit.vue
@@ -8,7 +8,8 @@
    :title="isUpdate ? '分销订单' : '分销订单'"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
-    :footer="null"
+    :okText="`立即结算`"
+    @ok="save"
  >
    <a-form
      ref="formRef"
@@ -64,18 +65,22 @@
          </a-form-item>
        </a-col>
      </a-row>
-
-
-
+      <div class="font-bold text-gray-400 bg-gray-50">开发调试</div>
+      <div class="text-gray-400 bg-gray-50">
+        <div>业务员({{ form.userId }})：{{ form.nickname }}</div>
+        <div>一级分销商({{ form.firstUserId }})：{{ form.firstNickname }}，一级佣金30%：{{ form.firstMoney }}</div>
+        <div>二级分销商({{ form.secondUserId }})：{{ form.secondNickname }}，二级佣金10%：{{ form.secondMoney }}</div>
+        <div>三级分销商({{ form.thirdUserId }})：{{ form.thirdNickname }}，三级佣金60%：{{ form.thirdMoney }}</div>
+      </div>
      <!-- 分销商信息 -->
      <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>
+          <a-tag color="orange">一级佣金30%</a-tag>
        </h4>
        <a-row :gutter="16">
          <a-col :span="12">
@@ -92,49 +97,31 @@
            </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>
+          <a-tag color="orange">二级佣金10%</a-tag>
        </h4>
        <a-row :gutter="16">
          <a-col :span="12">
-            <a-form-item label="用户ID" name="userId">
-              {{ form.userId }}
+            <a-form-item label="用户ID" name="secondUserId">
+              {{ form.secondUserId }}
            </a-form-item>
            <a-form-item label="昵称" name="nickname">
-              {{ form.nickname }}
+              {{ form.secondNickname }}
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="占比" name="rate">
-              {{ form?.thirdUserId > 0 ? '10%' : '70%' }}
+              10%
            </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>
@@ -143,15 +130,15 @@
      <!-- 三级分销商 -->
      <div class="dealer-section" v-if="form.thirdUserId > 0">
        <h4 class="dealer-title">
-          <a-tag color="orange">{{ form.thirdUserId > 0 ? '获取收益' : '推荐收益' }}</a-tag>
+          <a-tag color="orange">三级佣金60%</a-tag>
        </h4>
        <a-row :gutter="16">
          <a-col :span="12">
-            <a-form-item label="用户ID" name="secondUserId">
-              {{ form.secondUserId }}
+            <a-form-item label="用户ID" name="thirdUserId">
+              {{ form.thirdUserId }}
            </a-form-item>
-            <a-form-item label="昵称" name="secondNickname">
-              {{ form.secondNickname }}
+            <a-form-item label="昵称" name="thirdNickname">
+              {{ form.thirdNickname }}
            </a-form-item>
          </a-col>
          <a-col :span="12">
@@ -160,15 +147,6 @@
            </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>
@@ -178,47 +156,51 @@
        {{ 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';
+import {ref, reactive, watch} from 'vue';
+import {Form, message} 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';
+import {updateSdyDealerOrder} from "@/api/sdy/sdyDealerOrder";

-  // 是否是修改
-  const isUpdate = ref(false);
-  const useForm = Form.useForm;
+// 是否是修改
+const isUpdate = ref(false);
+const useForm = Form.useForm;

-  const props = defineProps<{
+const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: ShopDealerOrder | null;
-  }>();
+}>();

-  const emit = defineEmits<{
+const emit = defineEmits<{
  (e: 'done'): void;
  (e: 'update:visible', visible: boolean): void;
-  }>();
+}>();

-  // 是否显示最大化切换按钮
-  const maxable = ref(true);
-  // 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
+// 提交状态
+const loading = ref(false);
+// 是否显示最大化切换按钮
+const maxable = ref(true);
+// 表格选中数据
+const formRef = ref<FormInstance | null>(null);

-  // 表单数据
-  const form = reactive<ShopDealerOrder>({
+// 表单数据
+const form = reactive<ShopDealerOrder>({
  id: undefined,
-    title: undefined,
  userId: undefined,
  nickname: undefined,
  orderNo: undefined,
+  title: undefined,
  orderPrice: undefined,
-    degreePrice: undefined,
  settledPrice: undefined,
+  degreePrice: undefined,
  price: undefined,
  month: undefined,
  payPrice: undefined,
@@ -239,15 +221,15 @@
  tenantId: undefined,
  createTime: undefined,
  updateTime: undefined
-  });
+});

-  /* 更新visible */
-  const updateVisible = (value: boolean) => {
+/* 更新visible */
+const updateVisible = (value: boolean) => {
  emit('update:visible', value);
-  };
+};

-  // 表单验证规则
-  const rules = reactive({
+// 表单验证规则
+const rules = reactive({
  userId: [
    {
      required: true,
@@ -255,13 +237,50 @@
      trigger: 'blur'
    }
  ],
+});
+
+
+const {resetFields} = useForm(form, rules);
+
+/* 保存编辑 */
+const save = () => {
+  if (!formRef.value) {
+    return;
+  }
+  if (form.isSettled == 1) {
+    message.error('请勿重复结算');
+    return;
+  }
+  if (form.userId == 0) {
+    message.error('未签约');
+    return;
+  }
+  formRef.value
+    .validate()
+    .then(() => {
+      loading.value = true;
+      const formData = {
+        ...form,
+        isSettled: 1
+      };
+      updateSdyDealerOrder(formData)
+        .then((msg) => {
+          loading.value = false;
+          message.success(msg);
+          updateVisible(false);
+          emit('done');
+        })
+        .catch((e) => {
+          loading.value = false;
+          message.error(e.message);
        });
+    })
+    .catch(() => {
+    });
+};

-
-
-  const { resetFields } = useForm(form, rules);
-
-  watch(
+console.log(localStorage.getItem(''))
+watch(
  () => props.visible,
  (visible) => {
    if (visible) {
@@ -273,7 +292,7 @@
        Object.assign(form, {
          id: undefined,
          userId: undefined,
-            orderId: undefined,
+          orderNo: undefined,
          orderPrice: undefined,
          firstUserId: undefined,
          secondUserId: undefined,
@@ -291,8 +310,8 @@
      resetFields();
    }
  },
-    { immediate: true }
-  );
+  {immediate: true}
+);
 </script>

 <style lang="less" scoped>
--- a/菜单备份恢复功能说明.md
+++ b/菜单备份恢复功能说明.md
@@ -1,113 +0,0 @@
-# 菜单模块备份与恢复功能实现说明
-
-## 功能概述
-参考 cmsWebsiteField 模块的备份与恢复功能，为系统菜单模块实现了完整的数据备份与恢复功能。
-
-## 修改内容
-
-### 1. 新增组件
-
-#### 1.1 Import.vue (导入组件)
- 位置: [/src/views/system/menu/components/Import.vue](file:///Users/gxwebsoft/VUE/mp-vue/src/views/system/menu/components/Import.vue)
- 功能: 提供 Excel 文件导入功能，用于恢复菜单数据
- 特点:
-  - 支持 .xls 和 .xlsx 文件格式
-  - 文件大小限制为 10MB
-  - 使用拖拽上传或点击上传方式
-  - 调用 `importSystemMenu` API 接口进行数据恢复
-
-#### 1.2 menu-search.vue (搜索组件)
- 位置: [/src/views/system/menu/components/menu-search.vue](file:///Users/gxwebsoft/VUE/mp-vue/src/views/system/menu/components/menu-search.vue)
- 功能: 提供菜单搜索、新建、备份、恢复功能
- 特点:
-  - 备份功能: 将当前菜单数据导出为 Excel 文件
-  - 恢复功能: 通过导入 Excel 文件恢复菜单数据
-  - 支持关键词搜索
-  - 保留原有新建功能
-
-### 2. 修改的文件
-
-#### 2.1 主页面 index.vue
- 位置: [/src/views/system/menu/index.vue](file:///Users/gxwebsoft/VUE/mp-vue/src/views/system/menu/index.vue)
- 修改内容:
-  - 更新了 Delete 和 Clone 组件的属性绑定，确保传递所有必需的参数
-  - 保留了原有功能不变
-
-### 3. API 接口
-
-#### 3.1 已存在的接口
-系统已提供以下相关 API 接口:
- `listMenus`: 获取菜单列表（用于备份）
- `importSystemMenu`: 导入菜单数据（用于恢复）
-
-## 功能详情
-
-### 1. 备份功能
- 点击"备份"按钮触发
- 导出当前所有菜单数据为 Excel 文件
- 导出字段包括:
-  - 菜单ID
-  - 父级ID
-  - 菜单名称
-  - 路由地址
-  - 组件路径
-  - 权限标识
-  - 菜单类型
-  - 图标
-  - 排序号
-  - 是否隐藏
-  - 创建时间
- 文件名格式: 菜单备份_YYYYMMDD.xlsx
-
-### 2. 恢复功能
- 点击"恢复"按钮触发
- 弹出导入对话框
- 支持拖拽上传或点击上传 Excel 文件
- 文件验证:
-  - 格式限制: 仅支持 .xls 和 .xlsx
-  - 大小限制: 不超过 10MB
- 导入成功后自动刷新菜单列表
-
-## 使用方法
-
-### 1. 数据备份
-1. 进入系统管理 -> 菜单管理页面
-2. 点击"备份"按钮
-3. 等待系统生成 Excel 文件并自动下载
-
-### 2. 数据恢复
-1. 进入系统管理 -> 菜单管理页面
-2. 点击"恢复"按钮
-3. 在弹出的对话框中:
-   - 拖拽 Excel 文件到指定区域，或
-   - 点击上传区域选择文件
-4. 等待系统处理完成，成功后会自动刷新页面
-
-## 技术实现
-
-### 1. 前端技术
- Vue 3 Composition API
- TypeScript 类型安全
- xlsx 库处理 Excel 文件
- Ant Design Vue 组件库
- 响应式设计适配不同屏幕尺寸
-
-### 2. 数据处理
- 备份时调用 `listMenus` 获取完整菜单数据
- 恢复时调用 `importSystemMenu` 上传并处理 Excel 文件
- 数据格式验证和错误处理
-
-### 3. 用户体验
- 加载状态提示
- 成功/失败消息反馈
- 文件格式和大小限制提示
- 操作按钮直观易用
-
-## 注意事项
-
-1. 备份文件包含所有菜单信息，请妥善保管
-2. 恢复操作会覆盖现有数据，请谨慎操作
-3. 建议在执行恢复操作前先进行备份
-4. 恢复功能仅限超级管理员使用（根据实际权限设置）
-
-该功能现已完整实现，用户可以方便地对菜单数据进行备份和恢复操作。