完成用户管理（主管、员工、管理员、用户）+课程模块+仪表盘+主管绩效分页查询+员工绩效分夜查询+主管抽成占比+员工抽成占比+用户申请员工分页查询+审核通过+审核驳回

src/view/performance/performanceManagement.vue

@@ -1,43 +1,68 @@
 <script setup lang="ts">
-import {ref, onMounted} from "vue";
-import {useRoute, useRouter} from "vue-router";
-import {message} from "ant-design-vue";
-
-// 修改列定义为主管业绩相关字段
+import {ref, onMounted, reactive} from "vue";
+import {useRouter} from "vue-router";
+import {message, Modal} from "ant-design-vue";
+import myAxios from "../../api/myAxios.ts";
+const visible = ref(false); // 控制弹窗显示
+const newRate = ref("");   // 新比例值
+const updating = ref(false); // 更新状态
+// 修改列定义以匹配接口返回的字段
 const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    key: 'id',
+    width: 100,
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: '主管ID',
+    dataIndex: 'userId',
+    key: 'userId',
+    width: 100,
+    fixed: 'left',
+    align: 'center'
+  },
   {
     title: '主管姓名',
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'nickName',
+    key: 'nickName',
     width: 100,
     fixed: 'left',
     align: 'center'
   },
   {
     title: '手机号',
-    dataIndex: 'phone',
-    key: 'phone',
+    dataIndex: 'phoneNumber',
+    key: 'phoneNumber',
     width: 120,
     align: 'center'
   },
   {
-    title: '员工数',
-    dataIndex: 'staffCount',
-    key: 'staffCount',
-    width: 80,
+    title: '订单总金额',
+    dataIndex: 'totalAmount',
+    key: 'totalAmount',
+    width: 90,
     align: 'center'
   },
   {
+    title: '净成交',
+    dataIndex: 'netAmount',
+    key: 'netAmount',
+    width: 100,
+    align: 'center'
+  }, {
     title: '推广数',
-    dataIndex: 'promotionCount',
-    key: 'promotionCount',
+    dataIndex: 'promoCount',
+    key: 'promoCount',
     width: 80,
     align: 'center'
   },
   {
-    title: '比例',
-    dataIndex: 'ratio',
-    key: 'ratio',
+    title: '员工数',
+    dataIndex: 'empCount',
+    key: 'empCount',
     width: 80,
     align: 'center'
   },
@@ -48,45 +73,33 @@ const columns = [
     width: 80,
     align: 'center'
   },
-  {
-    title: '总订单',
-    dataIndex: 'totalOrders',
-    key: 'totalOrders',
-    width: 90,
-    align: 'center'
-  },
-  {
-    title: '退款',
-    dataIndex: 'refund',
-    key: 'refund',
-    width: 80,
-    align: 'center'
-  },
-  {
-    title: '净成交',
-    dataIndex: 'netAmount',
-    key: 'netAmount',
-    width: 100,
-    align: 'center'
-  },
+
+
   {
     title: '待释放',
-    dataIndex: 'pendingRelease',
-    key: 'pendingRelease',
+    dataIndex: 'toRelease',
+    key: 'toRelease',
     width: 90,
     align: 'center'
   },
   {
     title: '可结算',
-    dataIndex: 'settleable',
-    key: 'settleable',
+    dataIndex: 'toSettle',
+    key: 'toSettle',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: '已结算',
+    dataIndex: 'settled',
+    key: 'settled',
     width: 90,
     align: 'center'
   },
   {
     title: '已回退',
-    dataIndex: 'returned',
-    key: 'returned',
+    dataIndex: 'refunded',
+    key: 'refunded',
     width: 90,
     align: 'center'
   },
@@ -99,21 +112,20 @@ const columns = [
   }
 ];
 
-// 定义主管业绩数据结构
+// 定义主管业绩数据结构以匹配接口
 interface ManagerPerformance {
   id: number;
-  name: string;
-  phone: string;
-  staffCount: number;
-  promotionCount: number;
-  ratio: string;
+  nickName: string;
+  phoneNumber: string;
+  empCount: number;
+  promoCount: number;
   orderCount: number;
-  totalOrders: number;
-  refund: number;
+  totalAmount: number;
   netAmount: number;
-  pendingRelease: number;
-  settleable: number;
-  returned: number;
+  toRelease: number;
+  toSettle: number;
+  refunded: number;
+  userId: number;
 }
 
 const tableData = ref<ManagerPerformance[]>([]);
@@ -121,93 +133,272 @@ const loading = ref(false);
 const searchName = ref("");
 const searchPhone = ref("");
 
-// 生成模拟数据
-const generateMockData = () => {
-  const mockData: ManagerPerformance[] = [];
-  const names = ['张主管', '李经理', '王总监', '赵主任', '钱组长', '孙课长', '周经理', '吴主管'];
-  const phones = ['13800138000', '13900139000', '13700137000', '13600136000', '13500135000', '13400134000', '13300133000', '13200132000'];
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条记录`,
+  pageSizeOptions: ['10', '20', '30', '50'],
+});
 
-  for (let i = 0; i < 15; i++) {
-    const nameIndex = i % names.length;
-    const phoneIndex = i % phones.length;
+// 获取主管业绩数据
+const fetchManagerPerformance = async () => {
+  loading.value = true;
+  const storedToken = localStorage.getItem('token');
+  try {
+    const params = {
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      nickName: searchName.value,
+      phoneNumber: searchPhone.value,
+      // 移除不必要的参数
+      sortField: "id",
+      sortOrder: "",
+      startDate: "",
+      endDate: ""
+    };
 
-    mockData.push({
-      id: i + 1,
-      name: names[nameIndex],
-      phone: phones[phoneIndex],
-      staffCount: Math.floor(Math.random() * 20) + 5,
-      promotionCount: Math.floor(Math.random() * 100) + 50,
-      ratio: `${Math.floor(Math.random() * 20) + 10}%`,
-      orderCount: Math.floor(Math.random() * 500) + 100,
-      totalOrders: Math.floor(Math.random() * 1000) + 500,
-      refund: Math.floor(Math.random() * 50) + 10,
-      netAmount: Math.floor(Math.random() * 50000) + 10000,
-      pendingRelease: Math.floor(Math.random() * 10000) + 5000,
-      settleable: Math.floor(Math.random() * 30000) + 10000,
-      returned: Math.floor(Math.random() * 5000) + 1000
-    });
+    // 修正请求格式：直接发送params作为请求体
+    const response: any = await myAxios.post(
+        "/perform/supervisor/page",
+        params, // 直接发送params对象作为请求体
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (response.code === 1) {
+      tableData.value = response.data.records;
+      pagination.total = response.data.total || 0;
+    } else {
+      message.error(response.message || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("获取主管业绩数据失败:", error);
+    message.error("获取数据失败，请重试");
+  } finally {
+    loading.value = false;
   }
-
-  return mockData;
 };
 
-const originalTableData = ref<ManagerPerformance[]>([]);
+// 处理分页变化
+const handlePaginationChange = (pag: { current: number; pageSize: number }) => {
+  pagination.current = pag.current;
+  pagination.pageSize = pag.pageSize;
+  fetchManagerPerformance();
+};
+
 
-// 搜索功能
 const handleSearch = () => {
-  if (!searchName.value.trim() && !searchPhone.value.trim()) {
-    tableData.value = [...originalTableData.value];
-    return;
+  // 验证手机号：如果输入了手机号但不是11位
+  if (searchPhone.value && searchPhone.value.length !== 11) {
+    message.warning("请输入11位手机号码");
+    return; // 不执行搜索
   }
 
-  const filtered = originalTableData.value.filter(item => {
-    const nameMatch = searchName.value ? item.name.includes(searchName.value) : true;
-    const phoneMatch = searchPhone.value ? item.phone.includes(searchPhone.value) : true;
-    return nameMatch && phoneMatch;
-  });
-
-  if (filtered.length === 0) {
-    message.warning("未找到匹配的主管业绩数据");
-    tableData.value = [];
-  } else {
-    tableData.value = filtered;
-  }
+  pagination.current = 1; // 重置到第一页
+  fetchManagerPerformance();
 };
 
 // 重置搜索
 const reset = () => {
   searchName.value = "";
   searchPhone.value = "";
-  tableData.value = [...originalTableData.value];
+  pagination.current = 1;
+  fetchManagerPerformance();
 };
 
 const router = useRouter();
 
-// 查看员工绩效明细 - 添加跳转功能
+// 查看员工绩效明细
 const viewStaffPerformance = (record: ManagerPerformance) => {
-  // 跳转到员工绩效页面，并传递主管ID作为参数
   router.push({
     path: '/employeePerformaince',
     query: {
-      managerId: record.id,
-      managerName: record.name
+      managerId: record.userId
     }
   });
 };
+const proportionRate = ref(''); // 默认值
+// 获取抽成比例
+const fetchProportionRate = async () => {
+  const storedToken = localStorage.getItem('token');
+  try {
+    const response: any = await myAxios.post(
+        "/perform/query/level/rate",
+        { level: "first" }, // 按照接口要求发送level参数
+        { headers: { Authorization: storedToken } }
+    );
 
+    if (response.code === 1) {
+      proportionRate.value = response.data;
+    } else {
+      message.error(response.message || "获取抽成比例失败");
+    }
+  } catch (error) {
+    console.error("获取抽成比例失败:", error);
+    message.error("获取抽成比例失败，请重试");
+  }
+};
+// 打开修改比例弹窗
+const openRateModal = () => {
+  newRate.value = proportionRate.value.toString();
+  visible.value = true;
+};
+
+// 更新比例
+const updateProportionRate = async () => {
+  // 验证输入
+  if (!newRate.value) {
+    message.warning("请输入抽成比例");
+    return;
+  }
+
+  const rateValue = parseFloat(newRate.value);
+  if (isNaN(rateValue)) {
+    message.warning("请输入有效的数字");
+    return;
+  }
+
+  if (rateValue < 0 || rateValue > 1) {
+    message.warning("比例值应在0到1之间");
+    return;
+  }
+
+  updating.value = true;
+  const storedToken = localStorage.getItem('token');
+
+  try {
+    const response: any = await myAxios.post(
+        "/perform/update/rate",
+        {
+          level: "first",
+          rate: rateValue.toFixed(2) // 保留一位小数
+        },
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (response.code === 1) {
+      message.success("抽成比例更新成功");
+      proportionRate.value = rateValue.toFixed(2);
+      visible.value = false;
+    } else {
+      message.error(response.message || "更新抽成比例失败");
+    }
+  } catch (error) {
+    console.error("更新抽成比例失败:", error);
+    message.error("更新抽成比例失败，请重试");
+  } finally {
+    updating.value = false;
+  }
+};
 onMounted(() => {
-  loading.value = true;
-  // 模拟数据加载延迟
-  setTimeout(() => {
-    const mockData = generateMockData();
-    tableData.value = mockData;
-    originalTableData.value = mockData;
-    loading.value = false;
-  }, 800);
+  fetchManagerPerformance();
+  fetchProportionRate(); // 调用获取抽成比例
 });
 
-const goBack = () => {
-  router.push('/project');
+const filterNameInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  let value = input.value;
+
+  // 使用正则表达式过滤非中文字符
+  // value = value.replace(/[^\u4e00-\u9fa5]/g, '');
+  value = value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '');
+  // 更新输入框值
+  input.value = value;
+  searchName.value = value;
+};
+const filterPhoneInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  let value = input.value;
+
+  // 1. 移除非数字字符
+  value = value.replace(/\D/g, '');
+
+  // 2. 限制最多11位数字
+  if (value.length > 11) {
+    value = value.slice(0, 11);
+  }
+
+  // 更新输入框值
+  input.value = value;
+  searchPhone.value = value;
+};
+
+const filterRateInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  let value = input.value;
+
+  // 1. 移除非数字和非小数点的字符（但允许小数点）
+  value = value.replace(/[^\d.]/g, '');
+
+  // 2. 确保只有一个小数点
+  const decimalParts = value.split('.');
+  if (decimalParts.length > 2) {
+    // 如果有多个小数点，只保留第一个和第二个之间的内容
+    value = decimalParts[0] + '.' + decimalParts.slice(1).join('');
+  }
+
+  // 3. 限制小数点后最多两位数字
+  if (decimalParts.length > 1) {
+    value = decimalParts[0] + '.' + decimalParts[1].slice(0, 2);
+  }
+
+  // 4. 如果以小数点开头，在前面添加0
+  if (value.startsWith('.')) {
+    value = '0' + value;
+  }
+
+  // 5. 更新输入框值
+  input.value = value;
+  newRate.value = value;
+};
+
+
+const settlement = async () => {
+  const storedToken = localStorage.getItem('token');
+
+  // 添加确认提示
+  const confirmSettlement = () => {
+    return new Promise((resolve) => {
+      Modal.confirm({
+        title: '确定要执行一键结算吗？',
+        content: '此操作会将所有可结算的金额全部加到已结算上，请谨慎操作',
+        onOk() { resolve(true); },
+        onCancel() { resolve(false); }
+      });
+    });
+  };
+
+  const proceed = await confirmSettlement();
+  if (!proceed) return;
+
+  try {
+    loading.value = true;
+    const response: any = await myAxios.post(
+        "/perform/unite/settle",
+        {}, // 空请求体
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (response.code === 1) {
+      message.success("结算成功，页面即将刷新");
+
+      // 1.5秒后刷新页面数据
+      setTimeout(() => {
+        fetchManagerPerformance(); // 刷新主管业绩数据
+        fetchProportionRate();    // 刷新抽成比例
+      }, 1500);
+    } else {
+      message.error(response.message || "结算失败");
+    }
+  } catch (error) {
+    console.error("结算请求失败:", error);
+    message.error("结算失败，请重试");
+  } finally {
+    loading.value = false;
+  }
 };
 </script>
 
@@ -217,48 +408,73 @@ const goBack = () => {
     <a-form layout="inline">
       <a-space>
         <a-form-item label="主管姓名">
-          <a-input-search
-              style="width: 300px"
+          <a-input
+              style="width: 300px;"
               placeholder="请输入主管姓名"
-              class="custom-search"
-              enter-button
               v-model:value="searchName"
-              @pressEnter="handleSearch"
+              @click="handleSearch"
+              @input="filterNameInput"
+              class="custom-search"
           />
         </a-form-item>
         <a-form-item label="手机号">
-          <a-input-search
-              style="width: 300px"
+          <a-input
+              style="width: 200px"
               placeholder="请输入手机号"
               v-model:value="searchPhone"
-              @pressEnter="handleSearch"
-              enter-button
               class="custom-search"
+              @input="filterPhoneInput"
           />
         </a-form-item>
+        <a-button @click="handleSearch" style="margin-right: 10px" class="custom-button">搜索</a-button>
         <a-button @click="reset">重置</a-button>
-        <a-button class="custom-button" @click="goBack">返回</a-button>
+        抽成占比<a-tag color="orange">{{ proportionRate }}</a-tag>
+        <a-button @click="openRateModal" style="margin-left: 10px" class="custom-button">修改比例</a-button>
+        <a-button @click="settlement" style="margin-left: 10px" class="custom-button">一键结算</a-button>
       </a-space>
     </a-form>
   </div>
+  <!-- 修改比例弹窗 -->
+  <a-modal
+      v-model:visible="visible"
+      title="修改抽成比例"
+      @ok="updateProportionRate"
+      :confirm-loading="updating"
+      :mask-closable="false"
+  >
+    <a-form layout="vertical">
+      <a-form-item label="新比例值（0-1之间）">
+        <a-input
+            v-model:value="newRate"
+            placeholder="请输入比例值（如0.35）"
+            @keyup.enter="updateProportionRate"
+            @input="filterRateInput"
 
+        />
+        <div style="margin-top: 8px; color: #999">
+          提示：比例值应为0到1之间的小数（如0.35表示35%），保留两位小数
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
   <!-- 数据表格 -->
   <a-table
       :columns="columns"
       :data-source="tableData"
-      :scroll="{ x: 1500 }"
+      :scroll="{ x: 1600, y: 550 }"
       :loading="loading"
+      :pagination="pagination"
+      @change="handlePaginationChange"
       bordered
       rowKey="id"
-      size="middle"
   >
     <template #bodyCell="{ column, record }">
       <!-- 金额格式化 -->
-      <template v-if="['netAmount', 'pendingRelease', 'settleable', 'returned','refund'].includes(column.dataIndex)">
-        ¥{{ record[column.dataIndex as keyof ManagerPerformance].toLocaleString() }}
+      <template v-if="['totalAmount', 'netAmount', 'toRelease', 'tosettle', 'refunded','settled','toSettle'].includes(column.dataIndex)">
+        ¥{{ (record[column.dataIndex as keyof ManagerPerformance] || 0).toLocaleString() }}
       </template>
 
-      <!-- 操作列 - 添加点击事件 -->
+      <!-- 操作列 -->
       <template v-if="column.key === 'action'">
         <a-button
             size="small"
@@ -270,8 +486,8 @@ const goBack = () => {
     </template>
   </a-table>
 </template>
-
 <style scoped>
+/* 样式保持不变 */
 .search-box {
   margin-bottom: 20px;
   padding: 16px;
@@ -307,7 +523,7 @@ const goBack = () => {
 .custom-button:focus {
   background-color: #ffa940;
   border-color: #ffa940;
-  color: #fff;
+  color:#fff;
   opacity: 0.9;
 }
 
@@ -322,8 +538,12 @@ const goBack = () => {
   border-color: #fa8c16;
 }
 
-
 .custom-search :deep(.ant-input) {
   border-right-color: #ffa940;
 }
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+}
+
 </style>