客户管理模块开发（客户信息管理，客户分类设置）

.env.development

@@ -6,4 +6,4 @@ VITE_APP_ENV = 'development'
 
 # 开发环境
 VITE_APP_BASE_API = 'http://192.168.18.9:8080/'
-VITE_APP_PLATFORM = 'http://192.168.18.99/platform'
+VITE_APP_PLATFORM = 'http://localhost:9000/platform'

.env.staging

@@ -1,11 +0,0 @@
-# 页面标题
-VITE_APP_TITLE = 运营云后台管理系统
-
-# 生产环境配置
-VITE_APP_ENV = 'staging'
-
-# 生产环境
-VITE_APP_BASE_API = '/stage-api'
-
-# 是否在打包时开启压缩，支持 gzip 和 brotli
-VITE_BUILD_COMPRESS = gzip

.env.test

@@ -0,0 +1,12 @@
+# 页面标题
+VITE_APP_TITLE = 运营云后台管理系统
+
+# 测试环境配置
+VITE_APP_ENV = 'production'
+
+# 测试环境
+VITE_APP_BASE_API = 'http://192.168.18.99:8080/'
+VITE_APP_PLATFORM = 'http://192.168.18.99/platform'
+
+# 是否在打包时开启压缩，支持 gzip 和 brotli
+VITE_BUILD_COMPRESS = gzip

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "dev": "vite",
     "build:prod": "vite build",
-    "build:stage": "vite build --mode staging",
+    "build:test": "vite build --mode test",
     "preview": "vite preview"
   },
   "repository": {
@@ -28,6 +28,7 @@
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "mockjs": "^1.1.0",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
     "splitpanes": "3.1.5",

src/assets/styles/custom.scss

@@ -0,0 +1,172 @@
+.app-container {
+  .container-custom {
+    width: 100%;
+    overflow: hidden; /* 防止全局滚动条 */
+
+    .search-box {
+      overflow: hidden;
+      margin: 0 0 16px 0;
+      padding: 16px 8px 0 16px;
+      border-radius: 16px;
+      background: #fff;
+    }
+    .search-bar {
+      display: flex;
+      flex-shrink: 0; /* 禁止收缩 */
+      min-height: 100px;
+
+      .search-bar-left {
+        flex: 1;
+      }
+
+      .search-bar-right {
+        width: 100px;
+        text-align: center;
+      }
+
+      .demo-form-inline {
+        text-align: left;
+      }
+
+      .el-form--inline .el-form-item {
+        margin-right: 30px;
+      }
+
+      .demo-form-inline .el-input {
+        --el-input-width: 160px;
+      }
+
+      .demo-form-inline .el-select {
+        --el-select-width: 160px;
+      }
+
+      .demo-form-inline .el-date-picker {
+        --el-select-width: 160px;
+      }
+      .el-form .el-form-item__label {
+        font-weight: 400;
+      }
+    }
+    .table-cont {
+      min-height: 300px;
+      border-radius: 16px;
+      overflow: hidden;
+      background-color: #fff;
+      position: relative;
+      .el-icon-custom {
+        vertical-align: middle;
+        cursor: pointer;
+      }
+    }
+
+    /* 自定义弹窗样式 */
+    .traceability-dialog {
+      background: transparent;
+      box-shadow: none;
+      border-radius: 16px !important;
+    }
+
+    /* 主要内容区域 */
+    .dialog-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background: white;
+      border-radius: 8px;
+      padding: 0 0 20px 0;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    /* 产品信息 */
+    .product-info {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      font-size: 14px;
+      color: #666;
+    }
+
+    .product-name {
+      font-weight: bold;
+      color: #333;
+    }
+
+    /* 二维码图片 */
+    .qrcode-image {
+      width: 200px;
+      height: 200px;
+      margin: 0 auto;
+    }
+
+    /* 下载区域 */
+    .download-section {
+      display: flex;
+      align-items: center;
+      margin: 0 0 10px 0;
+      color: #25bf82;
+      cursor: pointer;
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    .download-icon {
+      margin-left: 8px;
+      font-size: 16px;
+    }
+
+    /* 遗传编码区域 */
+    .code-section {
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+      background: rgba(37, 191, 130, 0.1);
+      border-radius: 4px;
+    }
+
+    .genetic-code {
+      font-family: monospace;
+      font-size: 14px;
+      color: #25bf82;
+      display: inline-block;
+      max-width: 250px;
+      padding: 0 10px;
+    }
+
+    .copy-icon {
+      margin-left: 10px;
+      color: #409eff;
+      cursor: pointer;
+      font-size: 16px;
+    }
+
+    /* 关闭按钮 */
+    .close-button {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -60px;
+      color: white;
+      font-size: 30px;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+    // 表格中文本的颜色
+    .color-gray {
+      color: #5a5a5a;
+    }
+    .color-orange {
+      color: orange;
+    }
+    .color-green {
+      color: green;
+    }
+    .color-red {
+      color: red;
+    }
+  }
+}
+.customer-control {
+    position: absolute;
+    height: 100%;
+}

src/assets/styles/index.scss

@@ -123,7 +123,8 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 16px;
+  background-color: #f5f5f5;
 }
 
 .components-container {

src/components/tableComponent.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="custom-table-container">
+    <div class="custom-table-tool">
+      <el-form :inline="true" class="demo-form-inline" :label-width="'auto'">
+        <el-form-item label="每页显示" style="margin-bottom: 10px;">
+          <el-select
+            v-model="internalPageSize"
+            placeholder="请选择"
+            style="width: 100px"
+            @change="pageSizeChange($event)"
+          >
+            <el-option
+              v-for="item in pageSizes"
+              :key="item"
+              :label="item + '条'"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table
+      style="flex: 1; display: flex; flex-direction: column"
+      :max-height="tableMaxHeight"
+      :data="pagedTableData"
+      :border="showBorder"
+      :stripe="showStripe"
+      v-bind="$attrs"
+      :header-cell-class-name="headerCellClassName"
+      :cell-class-name="cellClassName"
+      @selection-change="handleSelectionChange"
+    >
+      <!-- 首列多选框 -->
+      <el-table-column
+        v-if="showSelection"
+        type="selection"
+        width="55"
+        align="center"
+      />
+
+      <template v-for="column in columns" :key="column.prop">
+        <el-table-column
+          :prop="column.prop"
+          :label="column.label"
+          :width="column.width"
+          :align="column.align || 'left'"
+          :sortable="column.sortable"
+          :header-class-name="column.headerClassName"
+        >
+          <!-- 支持插槽 -->
+          <template v-if="column.slotName" #default="scope">
+            <slot :name="column.slotName" :row="scope.row"></slot>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <div v-if="showPagination" class="pagination-container">
+      <span class="custom-pagination-text">
+        第{{ internalPage }}页，共{{
+          Math.ceil(internalTotal / internalPageSize)
+        }}页，共{{ internalTotal }}条
+      </span>
+      <div
+        style="flex: 1; display: flex; justify-content: end; text-align: right"
+      >
+        <el-pagination
+          v-model:current-page="internalPage"
+          v-model:page-size="internalPageSize"
+          :page-sizes="pageSizes"
+          :small="small"
+          :disabled="disabled"
+          :background="background"
+          layout="prev, pager, next"
+          :total="internalTotal"
+          @current-change="handleCurrentChange"
+        />
+        <span class="custom-pagination-size">
+          {{ internalPageSize }}条/页
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted, onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  // 表格数据
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
+  // 列配置
+  columns: {
+    type: Array,
+    default: () => [],
+  },
+  // 是否显示分页
+  showPagination: {
+    type: Boolean,
+    default: true,
+  },
+  // 是否显示边框
+  showBorder: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示斑马纹
+  showStripe: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示首列多选框
+  showSelection: {
+    type: Boolean,
+    default: false,
+  },
+  // 每页显示条数选项
+  pageSizes: {
+    type: Array,
+    default: () => [10, 20, 30, 50],
+  },
+  // 是否使用小型分页样式
+  small: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否为分页按钮添加背景色
+  background: {
+    type: Boolean,
+    default: false,
+  },
+  // 自定义表头类名函数
+  headerCellClassName: {
+    type: Function,
+    default: () => "",
+  },
+  // 自定义单元格类名函数
+  cellClassName: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+const emit = defineEmits(["page-change", "selection-change"]);
+
+// 内部管理的分页状态
+const internalPage = ref(1);
+const internalPageSize = ref(props.pageSizes?.[0] || 10);
+const internalTotal = ref(0);
+
+// 计算当前页显示的数据
+const pagedTableData = computed(() => {
+  const start = (internalPage.value - 1) * internalPageSize.value;
+  const end = start + internalPageSize.value;
+  return props.tableData.slice(start, end);
+});
+
+// 计算总页数（可根据实际需求调整）
+watch(
+  () => props.tableData,
+  (newData) => {
+    internalTotal.value = newData.length; // 示例：假设总数据量是当前显示的3倍
+  },
+  { immediate: true }
+);
+
+// 分页大小改变
+const pageSizeChange = (val) => {
+  console.log(`每页 ${val} 条`);
+  internalPageSize.value = val;
+  internalPage.value = 1; // 重置为第一页
+  console.log(internalPage.value, internalPageSize.value);
+  emitPageChange();
+};
+
+// 当前页改变
+const handleCurrentChange = (val) => {
+  console.log(`当前页改变 ${val} 页`);
+  internalPage.value = val;
+  emitPageChange();
+};
+
+// 触发分页变化事件
+const emitPageChange = () => {
+  emit("page-change", {
+    page: internalPage.value,
+    pageSize: internalPageSize.value,
+  });
+};
+
+// 多选框变化
+const handleSelectionChange = (selection) => {
+  emit("selection-change", selection);
+};
+
+const tableRef = ref(null);
+const tableMaxHeight = ref(null); // 使用max-height而不是height
+
+// 自动计算最大高度（预留分页器空间）
+const calculateMaxHeight = () => {
+  const paginationHeight = 60; // 分页器固定高度
+  const container = tableRef.value?.$el?.parentElement;
+  if (container) {
+    const containerHeight = container.clientHeight;
+    tableMaxHeight.value = containerHeight - paginationHeight;
+  }
+};
+
+onMounted(() => {
+  calculateMaxHeight();
+  window.addEventListener("resize", calculateMaxHeight);
+
+  // 添加MutationObserver监听父容器尺寸变化
+  const observer = new MutationObserver(calculateMaxHeight);
+  if (tableRef.value?.$el?.parentElement) {
+    observer.observe(tableRef.value.$el.parentElement, {
+      attributes: true,
+      attributeFilter: ["style", "class"],
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", calculateMaxHeight);
+});
+</script>
+
+<style lang="scss" scoped>
+.custom-table-container {
+  // position: relative;
+  padding: 10px 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* 关键：继承父容器高度 */
+  overflow: hidden; /* 防止内容溢出 */
+}
+/* 表格弹性布局 */
+:deep(.el-table) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  /* 表头固定 */
+  .el-table__header-wrapper {
+    flex-shrink: 0;
+  }
+
+  /* 表体可滚动 */
+  .el-table__body-wrapper {
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+.demo-form-inline {
+  text-align: left;
+  padding-left: 20px;
+}
+
+.pagination-container {
+  margin-top: 10px;
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  color: #999;
+  font-weight: 400;
+}
+.custom-pagination-text {
+  flex: 1;
+  text-align: left;
+  line-height: 32px;
+  font-size: 14px;
+}
+
+.custom-pagination-size {
+  text-align: right;
+  line-height: 32px;
+  margin-left: 20px;
+  font-size: 14px;
+}
+
+/* 去除表格边框 */
+:deep(.el-table) {
+  --el-table-border-color: transparent;
+}
+
+/* 自定义鼠标悬停颜色 */
+:deep(.el-table__body tr:hover > td) {
+  background-color: rgba(37, 191, 130, 0.1) !important;
+}
+
+/* 自定义表头样式 */
+:deep(.custom-header) {
+  background-color: #fff !important;
+  color: #999;
+  font-weight: 400;
+}
+
+:deep(.el-pagination) {
+  /* 整体分页样式 */
+  font-size: 14px;
+  font-weight: normal;
+
+  /* 页码按钮容器 */
+  .el-pager {
+    /* 所有页码项 */
+    li {
+      font-weight: 400; /* 普通页码字体不加粗 */
+      color: #606266; /* 普通页码颜色 */
+      background: transparent;
+      font-size: 14px;
+
+      /* 当前选中页码 */
+      &.active,
+      &.is-active {
+        font-weight: 400 !important; /* 当前页不加粗 */
+        color: #25bf82 !important; /* 自定义当前页颜色 - 橙色示例 */
+      }
+
+      /* 悬停状态 */
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+
+  /* 上一页/下一页按钮 */
+  .btn-prev,
+  .btn-next {
+    font-weight: 400;
+
+    &:disabled {
+      color: #c0c4cc;
+    }
+  }
+
+  /* 每页条数选择器 */
+  .el-pagination__sizes {
+    .el-input__inner {
+      font-weight: 400;
+    }
+  }
+
+  /* 跳页输入框 */
+  .el-pagination__jump {
+    font-weight: 400;
+  }
+}
+</style>

src/layout/components/Sidebar/Logo.vue

@@ -33,9 +33,6 @@ import logoY from "@/assets/logo/yunying.png";
 import useSettingsStore from "@/store/modules/settings";
 import variables from "@/assets/styles/variables.module.scss";
 
-import useUserStore from "@/store/modules/user";
-const userStore = useUserStore();
-
 defineProps({
   collapse: {
     type: Boolean,
@@ -82,9 +79,6 @@ function getUser() {
 }
 getUser();
 
-onMounted(() => {
-  console.log(userStore.loginType);
-});
 </script>
 
 <style lang="scss" scoped>

src/layout/components/Sidebar/index.vue

@@ -287,7 +287,8 @@ const activeMenu = computed(() => {
 onMounted(async () => {
   baseRoutes.value = [...sidebarRouters.value];
   await nextTick();
-  console.log("运营云菜单" + baseRoutes.value);
+  console.log("运营云菜单");
+  console.log(baseRoutes.value);
 });
 </script>
 

src/main.js

@@ -8,6 +8,7 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
 import locale from 'element-plus/es/locale/lang/zh-cn'
 
 import '@/assets/styles/index.scss' // global css
+import '@/assets/styles/custom.scss'
 
 import App from './App'
 import store from './store'

src/router/index.js

@@ -89,6 +89,46 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/customer',
+    name: "customer",
+    component: Layout,
+    hidden: false,
+    alwaysShow: true,
+    redirect: 'noredirect',
+    meta: {
+      icon: "peoples",
+      link: null,
+      noCache: false,
+      title: "客户管理",
+    },
+    children: [
+      {
+        path: 'customer/customerManage',
+        component: () => import('@/views/customer/customerManage'),
+        name: 'customerManage',
+        hidden: false,
+        meta: {
+          title: "客户信息管理",
+          icon: "",
+          noCache: false,
+          link: null,
+        },
+      },
+      {
+        path: 'customer/customerCategory',
+        component: () => import('@/views/customer/customerCategory'),
+        name: 'customerCategory',
+        hidden: false,
+        meta: {
+          title: "客户分类设置",
+          icon: "",
+          noCache: false,
+          link: null,
+        },
+      }
+    ],
+  },
   {
     path: '/plant',
     name: "plant",

src/views/customer/customerCategory.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="app-container customer-control">
+    <div class="container-custom">
+      <!-- 搜索栏 -->
+      <div ref="searchBarRef" class="search-box">
+        <div class="search-bar">
+          <div class="search-bar-left">
+            <el-form
+              ref="searchForm"
+              :inline="true"
+              :model="formInline"
+              class="demo-form-inline"
+              :label-width="'auto'"
+            >
+              <el-form-item label="ID" prop="id">
+                <el-input
+                  v-model="formInline.id"
+                  placeholder="用户ID"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="分类名称" prop="userCategoryName">
+                <el-input
+                  v-model="formInline.userCategoryName"
+                  placeholder="用户分类名称"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="用户状态" prop="userStatus">
+                <el-select v-model="formInline.userStatus" placeholder="请选择">
+                  <el-option label="全部" value="99" />
+                  <el-option label="异常" value="0" />
+                  <el-option label="正常" value="1" />
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                label="申请日期"
+                prop="startDate"
+                style="margin-right: 0"
+              >
+                <el-date-picker
+                  v-model="formInline.startDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择起始日期"
+                  clearable
+                  :disabled-date="disableStartDate"
+                  style="width: 160px"
+                />
+                <span
+                  style="width: 30px; text-align: center; display: inline-block"
+                >
+                  -
+                </span>
+                <el-date-picker
+                  v-model="formInline.endDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择截止日期"
+                  clearable
+                  :disabled-date="disableEndDate"
+                  style="width: 160px"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="search-bar-right">
+            <el-button type="primary" icon="Search" @click="onSubmit"
+              >查询</el-button
+            >
+            <el-button
+              icon="Refresh"
+              style="margin: 16px 0 0 0"
+              @click="resetForm"
+              >重置</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
+        <tableComponent
+          :table-data="tableData"
+          :columns="columns"
+          :show-border="false"
+          :show-selection="false"
+          :header-cell-class-name="getHeaderClass"
+          @page-change="handlePaginationChange"
+          @selection-change="handleSelectionChange"
+        >
+          <!-- 自定义-状态 -->
+          <template #userStatus="slotProps">
+            <span v-if="slotProps.row.userStatus == 1" class="color-green"
+              >正常</span
+            >
+            <span v-else-if="slotProps.row.userStatus == 0" class="color-red"
+              >异常</span
+            >
+          </template>
+
+          <!-- 自定义-操作 -->
+          <template #action="slotProps">
+            <el-dropdown>
+              <span class="el-dropdown-link">
+                <el-icon><More /></el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="handleEdit(slotProps.row, 1)"
+                    >Action 1</el-dropdown-item
+                  >
+                  <el-dropdown-item @click="handleEdit(slotProps.row, 2)"
+                    >Action 2</el-dropdown-item
+                  >
+                  <el-dropdown-item @click="handleEdit(slotProps.row, 3)"
+                    >Action 3</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </tableComponent>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+import tableComponent from "@/components/tableComponent.vue";
+import Mock from "mockjs";
+import { id } from "element-plus/es/locales.mjs";
+
+const formInline = reactive({
+  id: "",
+  nickname: "",
+  userName: "",
+  userCategoryName: "",
+  accountNumber: "",
+  phoneNumber: "",
+  sex: "99",
+  userStatus: "99",
+  userCategory: "99",
+  unitPrice: "",
+  ordersNums: "",
+  startDate: "",
+  endDate: "",
+});
+
+// 禁用开始日期的逻辑（不能晚于已选的结束日期）
+const disableStartDate = (time) => {
+  if (!formInline.endDate) return false;
+  const endDate = new Date(formInline.endDate);
+  return time.getTime() > endDate.getTime();
+};
+
+// 禁用结束日期的逻辑（不能早于已选的开始日期）
+const disableEndDate = (time) => {
+  if (!formInline.startDate) return false;
+  const startDate = new Date(formInline.startDate).setHours(0, 0, 0, 0);
+  const currentDate = new Date(time).setHours(0, 0, 0, 0);
+  return currentDate < startDate;
+};
+
+const searchForm = ref(null);
+const onSubmit = () => {
+  console.log("submit!");
+  console.log(formInline);
+  loadData();
+};
+const resetForm = () => {
+  searchForm.value.resetFields();
+  formInline.endDate = "";
+};
+
+// 表格数据
+const tableData = ref([]);
+// 列配置
+const columns = ref([]);
+const columns1 = ref([
+  { prop: "id", label: "ID" },
+  { prop: "nickname", label: "昵称", width: "120" },
+  { prop: "userName", label: "姓名" },
+  { prop: "accountNumber", label: "账号" },
+  { prop: "phoneNumber", label: "手机号", width: "120" },
+  { prop: "sex", label: "性别" },
+  { prop: "userStatus", label: "用户状态", slotName: "userStatus" },
+  { prop: "userCategory", label: "用户分类" },
+  { prop: "unitPrice", label: "客单价" },
+  { prop: "ordersNums", label: "订单数目" },
+  { prop: "action", label: "操作", slotName: "action", width: "180" },
+]);
+
+// 生成食物主题昵称
+const generateFoodNickname = () => {
+  // 形容词（情绪/风格）
+  const adjectives = [
+    "暴躁的",
+    "快乐的",
+    "忧郁的",
+    "疯狂的",
+    "安静的",
+    "慵懒的",
+    "甜甜的",
+    "咸咸的",
+    "酸酸的",
+    "辣辣的",
+  ];
+
+  // 食物名词（仅限食物）
+  const foods = [
+    "辣椒",
+    "西瓜",
+    "土豆",
+    "番茄",
+    "黄瓜",
+    "苹果",
+    "蛋糕",
+    "面包",
+    "披萨",
+    "冰淇淋",
+    "奶茶",
+    "咖啡",
+    "啤酒",
+    "炸鸡",
+  ];
+
+  // 随机组合：形容词 + 食物
+  return Mock.mock(`@pick(${adjectives})`) + Mock.mock(`@pick(${foods})`);
+};
+// 生成模拟数据
+const generateMockData = () => {
+  return Mock.mock({
+    "list|30": [
+      {
+        "id|+1": 10000,
+        nickname: () => generateFoodNickname(), //昵称
+        userName: "@cname", //姓名
+        accountNumber: Mock.mock("@id").toString().slice(0, 10), //账号
+        phoneNumber: "@integer(13000000000, 18999999999)", //手机号
+        sex: '@pick(["男", "女"])', //性别
+        "userStatus|1": [0, 1], //0异常 1正常
+        "userCategory|1":
+          '@pick(["活跃/低消费", "活跃/中消费", "活跃/高消费"])', //用户分类
+        unitPrice: "@float(10, 200, 2, 2)", //客单价
+        ordersNums: "@integer(10, 200)",
+      },
+    ],
+  }).list;
+};
+// 加载数据
+const loadData = () => {
+  // 模拟API请求延迟
+  setTimeout(() => {
+    tableData.value = generateMockData();
+  }, 500);
+};
+// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
+const getHeaderClass = ({ column }) => {
+  return "custom-header";
+};
+// 分页变化
+const handlePaginationChange = ({ page, pageSize }) => {
+  console.log("分页变化:", page, pageSize);
+  // 这里可以调用API获取新数据
+  loadData();
+};
+// 多选框变化
+const handleSelectionChange = (selection) => {
+  console.log("选中项:", selection);
+};
+
+let nowClickRow = ref({});
+// 编辑操作
+const handleEdit = (row, num) => {
+  nowClickRow.value = row;
+  console.log("编辑的行:", row);
+  console.log("第几个按钮:", num);
+};
+
+const titleRef = ref(null);
+const searchBarRef = ref(null);
+const tableViewportHeight = ref(0);
+// 精确计算可用高度
+const calculateTableHeight = () => {
+  // 获取窗口总高度
+  const windowHeight = window.innerHeight;
+
+  // 获取各组件高度
+  const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
+  const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
+
+  // 计算容器内边距补偿（根据实际样式调整）
+  const paddingCompensation = 130;
+
+  // 最终计算
+  tableViewportHeight.value =
+    windowHeight - headerHeight - searchBarHeight - paddingCompensation;
+  // console.log(tableViewportHeight.value);
+};
+// 组件挂载时加载数据
+onMounted(() => {
+  columns.value = columns1.value;
+  loadData();
+
+  calculateTableHeight();
+
+  // 添加响应式监听
+  window.addEventListener("resize", calculateTableHeight);
+
+  // 监听DOM变化（适用于动态变化的header/searchbar）
+  const observer = new ResizeObserver(calculateTableHeight);
+  if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
+  if (searchBarRef.value) observer.observe(searchBarRef.value);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", calculateTableHeight);
+});
+</script>
+<style lang="scss" scoped></style>

src/views/customer/customerManage.vue

@@ -0,0 +1,379 @@
+<template>
+  <div class="app-container customer-control">
+    <div class="container-custom">
+      <!-- 搜索栏 -->
+      <div ref="searchBarRef" class="search-box">
+        <div class="search-bar">
+          <div class="search-bar-left">
+            <el-form
+              ref="searchForm"
+              :inline="true"
+              :model="formInline"
+              class="demo-form-inline"
+              :label-width="'auto'"
+            >
+              <el-form-item label="昵称" prop="nickname">
+                <el-input
+                  v-model="formInline.nickname"
+                  placeholder="用户昵称"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="ID" prop="id">
+                <el-input
+                  v-model="formInline.id"
+                  placeholder="用户ID"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="姓名" prop="userName">
+                <el-input
+                  v-model="formInline.userName"
+                  placeholder="用户姓名"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="账号" prop="accountNumber">
+                <el-input
+                  v-model="formInline.accountNumber"
+                  placeholder="用户账号"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="手机号" prop="phoneNumber">
+                <el-input
+                  v-model="formInline.phoneNumber"
+                  placeholder="用户手机号"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="性别" prop="sex">
+                <el-select v-model="formInline.sex" placeholder="请选择">
+                  <el-option label="全部" value="99" />
+                  <el-option label="男" value="1" />
+                  <el-option label="女" value="2" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="用户状态" prop="userStatus">
+                <el-select v-model="formInline.userStatus" placeholder="请选择">
+                  <el-option label="全部" value="99" />
+                  <el-option label="异常" value="0" />
+                  <el-option label="正常" value="1" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="用户分类" prop="userCategory">
+                <el-select
+                  v-model="formInline.userCategory"
+                  placeholder="请选择"
+                >
+                  <el-option label="全部" value="99" />
+                  <el-option label="活跃/低消费" value="1" />
+                  <el-option label="活跃/中消费" value="2" />
+                  <el-option label="活跃/高消费" value="3" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="客单价" prop="unitPrice">
+                <el-select
+                  v-model="formInline.unitPrice"
+                  placeholder="请选择"
+                  clearable
+                >
+                  <el-option label="≤500" value="1" />
+                  <el-option label="≤1000" value="2" />
+                  <el-option label="≤1500" value="3" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="订单数目" prop="ordersNums">
+                <el-select
+                  v-model="formInline.ordersNums"
+                  placeholder="请选择"
+                  clearable
+                >
+                  <el-option label="≤500" value="1" />
+                  <el-option label="≤1000" value="2" />
+                  <el-option label="≤1500" value="3" />
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                label="申请日期"
+                prop="startDate"
+                style="margin-right: 0"
+              >
+                <el-date-picker
+                  v-model="formInline.startDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择起始日期"
+                  clearable
+                  :disabled-date="disableStartDate"
+                  style="width: 160px"
+                />
+                <span
+                  style="width: 30px; text-align: center; display: inline-block"
+                >
+                  -
+                </span>
+                <el-date-picker
+                  v-model="formInline.endDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="请选择截止日期"
+                  clearable
+                  :disabled-date="disableEndDate"
+                  style="width: 160px"
+                />
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="search-bar-right">
+            <el-button type="primary" icon="Search" @click="onSubmit"
+              >查询</el-button
+            >
+            <el-button
+              icon="Refresh"
+              style="margin: 16px 0 0 0"
+              @click="resetForm"
+              >重置</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table-cont" :style="{ height: tableViewportHeight + 'px' }">
+        <tableComponent
+          :table-data="tableData"
+          :columns="columns"
+          :show-border="false"
+          :show-selection="false"
+          :header-cell-class-name="getHeaderClass"
+          @page-change="handlePaginationChange"
+          @selection-change="handleSelectionChange"
+        >
+          <!-- 自定义-状态 -->
+          <template #userStatus="slotProps">
+            <span v-if="slotProps.row.userStatus == 1" class="color-green"
+              >正常</span
+            >
+            <span v-else-if="slotProps.row.userStatus == 0" class="color-red"
+              >异常</span
+            >
+          </template>
+
+          <!-- 自定义-操作 -->
+          <template #action="slotProps">
+            <el-dropdown>
+              <span class="el-dropdown-link">
+                <el-icon><More /></el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="handleEdit(slotProps.row, 1)"
+                    >Action 1</el-dropdown-item
+                  >
+                  <el-dropdown-item @click="handleEdit(slotProps.row, 2)"
+                    >Action 2</el-dropdown-item
+                  >
+                  <el-dropdown-item @click="handleEdit(slotProps.row, 3)"
+                    >Action 3</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </tableComponent>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+import tableComponent from "@/components/tableComponent.vue";
+import Mock from "mockjs";
+import { id } from "element-plus/es/locales.mjs";
+
+const formInline = reactive({
+  id: "",
+  nickname: "",
+  userName: "",
+  accountNumber: "",
+  phoneNumber: "",
+  sex: "99",
+  userStatus: "99",
+  userCategory: "99",
+  unitPrice: "",
+  ordersNums: "",
+  startDate: "",
+  endDate: "",
+});
+
+// 禁用开始日期的逻辑（不能晚于已选的结束日期）
+const disableStartDate = (time) => {
+  if (!formInline.endDate) return false;
+  const endDate = new Date(formInline.endDate);
+  return time.getTime() > endDate.getTime();
+};
+
+// 禁用结束日期的逻辑（不能早于已选的开始日期）
+const disableEndDate = (time) => {
+  if (!formInline.startDate) return false;
+  const startDate = new Date(formInline.startDate).setHours(0, 0, 0, 0);
+  const currentDate = new Date(time).setHours(0, 0, 0, 0);
+  return currentDate < startDate;
+};
+
+const searchForm = ref(null);
+const onSubmit = () => {
+  console.log("submit!");
+  console.log(formInline);
+  loadData();
+};
+const resetForm = () => {
+  searchForm.value.resetFields();
+  formInline.endDate = "";
+};
+
+// 表格数据
+const tableData = ref([]);
+// 列配置
+const columns = ref([]);
+const columns1 = ref([
+  { prop: "id", label: "ID" },
+  { prop: "nickname", label: "昵称", width: "120" },
+  { prop: "userName", label: "姓名" },
+  { prop: "accountNumber", label: "账号" },
+  { prop: "phoneNumber", label: "手机号", width: "120" },
+  { prop: "sex", label: "性别" },
+  { prop: "userStatus", label: "用户状态", slotName: "userStatus" },
+  { prop: "userCategory", label: "用户分类" },
+  { prop: "unitPrice", label: "客单价" },
+  { prop: "ordersNums", label: "订单数目" },
+  { prop: "action", label: "操作", slotName: "action", width: "180" },
+]);
+
+// 生成食物主题昵称
+const generateFoodNickname = () => {
+  // 形容词（情绪/风格）
+  const adjectives = [
+    "暴躁的",
+    "快乐的",
+    "忧郁的",
+    "疯狂的",
+    "安静的",
+    "慵懒的",
+    "甜甜的",
+    "咸咸的",
+    "酸酸的",
+    "辣辣的",
+  ];
+
+  // 食物名词（仅限食物）
+  const foods = [
+    "辣椒",
+    "西瓜",
+    "土豆",
+    "番茄",
+    "黄瓜",
+    "苹果",
+    "蛋糕",
+    "面包",
+    "披萨",
+    "冰淇淋",
+    "奶茶",
+    "咖啡",
+    "啤酒",
+    "炸鸡",
+  ];
+
+  // 随机组合：形容词 + 食物
+  return Mock.mock(`@pick(${adjectives})`) + Mock.mock(`@pick(${foods})`);
+};
+// 生成模拟数据
+const generateMockData = () => {
+  return Mock.mock({
+    "list|30": [
+      {
+        "id|+1": 10000,
+        nickname: () => generateFoodNickname(), //昵称
+        userName: "@cname", //姓名
+        accountNumber: Mock.mock("@id").toString().slice(0, 10), //账号
+        phoneNumber: "@integer(13000000000, 18999999999)", //手机号
+        sex: '@pick(["男", "女"])', //性别
+        "userStatus|1": [0, 1], //0异常 1正常
+        "userCategory|1":
+          '@pick(["活跃/低消费", "活跃/中消费", "活跃/高消费"])', //用户分类
+        unitPrice: "@float(10, 200, 2, 2)", //客单价
+        ordersNums: "@integer(10, 200)",
+      },
+    ],
+  }).list;
+};
+// 加载数据
+const loadData = () => {
+  // 模拟API请求延迟
+  setTimeout(() => {
+    tableData.value = generateMockData();
+  }, 500);
+};
+// 自定义表头类名,也可以在columns指定列中添加headerClassName: 'custom-header'
+const getHeaderClass = ({ column }) => {
+  return "custom-header";
+};
+// 分页变化
+const handlePaginationChange = ({ page, pageSize }) => {
+  console.log("分页变化:", page, pageSize);
+  // 这里可以调用API获取新数据
+  loadData();
+};
+// 多选框变化
+const handleSelectionChange = (selection) => {
+  console.log("选中项:", selection);
+};
+
+let nowClickRow = ref({});
+// 编辑操作
+const handleEdit = (row, num) => {
+  nowClickRow.value = row;
+  console.log("编辑的行:", row);
+  console.log("第几个按钮:", num);
+};
+
+const titleRef = ref(null);
+const searchBarRef = ref(null);
+const tableViewportHeight = ref(0);
+// 精确计算可用高度
+const calculateTableHeight = () => {
+  // 获取窗口总高度
+  const windowHeight = window.innerHeight;
+
+  // 获取各组件高度
+  const headerHeight = titleRef.value?.$el?.offsetHeight || 0;
+  const searchBarHeight = searchBarRef.value?.offsetHeight || 0;
+
+  // 计算容器内边距补偿（根据实际样式调整）
+  const paddingCompensation = 130;
+
+  // 最终计算
+  tableViewportHeight.value =
+    windowHeight - headerHeight - searchBarHeight - paddingCompensation;
+  // console.log(tableViewportHeight.value);
+};
+// 组件挂载时加载数据
+onMounted(() => {
+  columns.value = columns1.value;
+  loadData();
+
+  calculateTableHeight();
+
+  // 添加响应式监听
+  window.addEventListener("resize", calculateTableHeight);
+
+  // 监听DOM变化（适用于动态变化的header/searchbar）
+  const observer = new ResizeObserver(calculateTableHeight);
+  if (titleRef.value?.$el) observer.observe(titleRef.value.$el);
+  if (searchBarRef.value) observer.observe(searchBarRef.value);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", calculateTableHeight);
+});
+</script>
+<style lang="scss" scoped></style>

src/views/index.vue

@@ -74,9 +74,9 @@
           <div class="body">
             <p>
               <i class="el-icon-s-promotion"></i> 平台首页：<el-link
-                href="http://192.168.18.99:88/platform"
+                href="http://47.109.205.240/platform"
                 target="_blank"
-                >http://192.168.18.99:88/platform</el-link
+                >http://47.109.205.240/platform</el-link
               >
             </p>
             <div style="height: 200px;"></div>