push

src/components/Login.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="login-container">
     <!-- 背景视频 -->
-    <video src="../../public/登陆界面背景.mp4" autoplay muted loop class="bg-video"></video>
+    <video src="/登陆界面背景.mp4" autoplay muted loop class="bg-video"></video>
     <div class="video-overlay"></div>
 
     <!-- 登录卡片 -->
     <el-card class="login-card" shadow="always">
       <template #header>
         <div class="card-header">
-          <img src="../../public/logo.png" alt="logo" class="login-logo">
+          <img src="/logo.png" alt="logo" class="login-logo">
           <h2>蜜雪冰城管理系统</h2>
           <p class="subtitle">请输入您的账号信息</p>
         </div>

src/components/contract.vue

@@ -12,17 +12,20 @@ import { getSimpleCustomerList } from '../api/customer'
 import { getEmployeeList } from '../api/employee'
 import { getSimpleSupplierList } from '../api/suppliers'
 import { formatDateTime, formatDate } from "../utils/date"
-import { hasPermission, getUserInfo } from '../store/user'
+import { hasPermission, getUserInfo, getRoleLevel } from '../store/user'
 
 const search = ref('')
 const select = ref('1')
-const dateRange = ref([])
+const filterType = ref('')
+const filterStatus = ref('')
 const loading = ref(false)
 const searchResults = ref([])
 const showSearchResults = ref(false)
 const showAddForm = ref(false)
 const isEditMode = ref(false)
 const currentContractId = ref(null)
+const showDetailDialog = ref(false)
+const currentDetail = ref(null)
 const customerList = ref([])
 const employeeList = ref([])
 const supplierList = ref([])
@@ -30,10 +33,27 @@ const supplierList = ref([])
 // 分页相关
 const currentPage = ref(1)
 const pageSize = ref(10)
+const total = ref(0)
 
 // 采购经理只能操作采购合同，招商经理只能操作加盟合同（提前定义，供 form 初始化使用）
 const isProcurementManager = computed(() => getUserInfo()?.departmentName === 'procurement_manager')
 const isFranchiseManager = computed(() => getUserInfo()?.departmentName === 'franchise_manager')
+
+//是否是管理员
+const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
+
+// 是否是一般专员（role_level === 4）
+const isGeneralStaff = computed(() => getRoleLevel() === 4)
+
+// 招商部专员：锁定业务员为自己
+const isFranchiseStaff = computed(() => isFranchiseManager.value && isGeneralStaff.value)
+
+// 采购部专员：锁定业务员为自己
+const isProcurementStaff = computed(() => isProcurementManager.value && isGeneralStaff.value)
+
+// 业务员字段是否锁定
+const isEmployeeLocked = computed(() => isFranchiseStaff.value || isProcurementStaff.value)
+
 const getDefaultType = () => {
   if (isProcurementManager.value) return 'supply'
   if (isFranchiseManager.value) return 'franchise'
@@ -50,7 +70,7 @@ const form = reactive({
   effective_date: '',
   expiry_date: '',
   amount: 0,
-  status: '生效中',
+  status: '生效',
   remark: ''
 })
 
@@ -59,30 +79,19 @@ onMounted(() => {
   fetchOptions()
 })
 
-// 监听搜索结果变化，重置页码
+// 监听筛选变化（与 user.vue 一致）
-watch(searchResults, () => {
+watch([filterType, filterStatus], () => {
   currentPage.value = 1
+  handleSearch()
 })
 
-// 分页后的数据
+// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
-const filteredResults = computed(() => {
+const paginatedData = computed(() => searchResults.value)
-  if (!isFranchiseManager.value && !isProcurementManager.value) return searchResults.value
-  return searchResults.value.filter(row => {
-    if (row.type === 'supply' && isProcurementManager.value) return true
-    if (row.type === 'franchise' && isFranchiseManager.value) return true
-    return false
-  })
-})
 
-const paginatedData = computed(() => {
+// 页码变化（服务端分页：重新请求后端）
-  const start = (currentPage.value - 1) * pageSize.value
-  const end = start + pageSize.value
-  return filteredResults.value.slice(start, end)
-})
-
-// 页码变化
 const handleCurrentChange = (val) => {
   currentPage.value = val
+  fetchData(val)
 }
 
 // 获取客户、员工、供应商和用户列表供下拉选择
@@ -106,12 +115,22 @@ const fetchOptions = async () => {
   }
 }
 
-// 获取合同列表
+// 获取合同列表（服务端分页）
-const fetchData = async () => {
+const fetchData = async (page) => {
   loading.value = true
-  const res = await getContractList()
+  const params = {
+    page: page || currentPage.value,
+    pageSize: pageSize.value
+  }
+  const res = await getContractList(params)
   if (res.code === 0 || res.code === 200) {
-    searchResults.value = res.data.list || res.data
+    if (res.data && Array.isArray(res.data.list)) {
+      searchResults.value = res.data.list
+      total.value = res.data.total
+    } else if (Array.isArray(res.data)) {
+      searchResults.value = res.data
+      total.value = res.data.length
+    }
   }
   showSearchResults.value = true
   loading.value = false
@@ -124,40 +143,74 @@ const handleSearch = async () => {
     cancelAdd()
   }
 
+  currentPage.value = 1
   loading.value = true
 
-  const params = {}
+  const params = {
-  if (select.value === '1') {
+    page: 1,
-    params.id = Number(search.value)
+    pageSize: pageSize.value
-  } else if (select.value === '2') {
-    params.contract_name = search.value
   }
-  if (dateRange.value && dateRange.value.length === 2) {
+  // 只在有搜索内容时才添加搜索参数（与 user.vue 一致）
-    params.effective_date_start = formatDate(dateRange.value[0])
+  if (search.value) {
-    params.effective_date_end = formatDate(dateRange.value[1])
+    if (select.value === '1') {
+      params.id = Number(search.value)
+    } else if (select.value === '2') {
+      params.contract_name = search.value
+    }
+  }
+  if (filterType.value) {
+    params.type = filterType.value
+  }
+  if (filterStatus.value) {
+    params.status = filterStatus.value
   }
 
-  const res = await getContractList(params)
+  try {
-  if (res.code === 0 || res.code === 200) {
+    const res = await getContractList(params)
-    searchResults.value = res.data.list || res.data
+    if (res.code === 0 || res.code === 200) {
+      if (res.data && Array.isArray(res.data.list)) {
+        searchResults.value = res.data.list
+        total.value = res.data.total
+      } else if (Array.isArray(res.data)) {
+        searchResults.value = res.data
+        total.value = res.data.length
+      }
+    } else {
+      console.warn('[contract] handleSearch 响应异常:', res)
+      searchResults.value = []
+      total.value = 0
+    }
+  } catch (e) {
+    console.error('[contract] handleSearch 请求失败:', e)
+    searchResults.value = []
+    total.value = 0
   }
   showSearchResults.value = true
   loading.value = false
 }
 
-// 日期变更处理
-const handleDateChange = () => {
-  handleSearch()
-}
-
 // 重置搜索
 const resetSearch = () => {
   search.value = ''
   select.value = '1'
-  dateRange.value = []
+  filterType.value = ''
+  filterStatus.value = ''
+  currentPage.value = 1
   fetchData()
 }
 
+// 双击行查看详情
+const handleRowDblClick = (row) => {
+  currentDetail.value = { ...row }
+  showDetailDialog.value = true
+}
+
+// 关闭详情弹窗
+const closeDetail = () => {
+  showDetailDialog.value = false
+  currentDetail.value = null
+}
+
 // 新增合同
 const addContract = () => {
   resetForm()
@@ -257,7 +310,7 @@ const resetForm = () => {
     effective_date: '',
     expiry_date: '',
     amount: 0,
-    status: '生效中',
+    status: '生效',
     remark: ''
   })
   isEditMode.value = false
@@ -268,9 +321,7 @@ const resetForm = () => {
 const getStatusType = (status) => {
   const map = {
     '草稿': 'info',
-    '生效中': 'success',
     '生效': 'success',
-    '完成': 'success',
     '已完成': 'success',
     '作废': 'danger'
   }
@@ -314,19 +365,25 @@ const canUpdate = computed(() => hasPermission('contract', 'update'))
 const canDelete = computed(() => hasPermission('contract', 'delete'))
 const canOperate = computed(() => canUpdate.value || canDelete.value)
 
-// 招商经理只能编辑加盟合同，采购经理只能编辑采购合同
+//获取用户数据
+const userInfo = computed(() => getUserInfo())
+
+// 招商经理只能编辑加盟合同，采购经理只能编辑采购合同，且每个员工只能操作自己的合同（管理员除外）
 const canEditRow = (row) => {
   if (!canUpdate.value) return false
   if (isProcurementManager.value && row.type !== 'supply') return false
   if (isFranchiseManager.value && row.type !== 'franchise') return false
+  if (userInfo.value.employee_id !== row.employee_id) return false
   return true
 }
 const canDeleteRow = (row) => {
   if (!canDelete.value) return false
   if (isProcurementManager.value && row.type !== 'supply') return false
   if (isFranchiseManager.value && row.type !== 'franchise') return false
+  if (userInfo.value.employee_id !== row.employee_id) return false
   return true
 }
+
 </script>
 
 <template>
@@ -339,8 +396,8 @@ const canDeleteRow = (row) => {
           @keyup.enter="handleSearch">
           <template #prepend>
             <el-select v-model="select" placeholder="请选择" style="width: 115px">
-              <el-option label="编号" value="1" />
+              <el-option label="合同编号" value="1" />
-              <el-option label="名称" value="2" />
+              <el-option label="合同名称" value="2" />
             </el-select>
           </template>
           <template #append>
@@ -358,8 +415,17 @@ const canDeleteRow = (row) => {
       <div class="filter-row">
         <span class="filter-label">筛选条件：</span>
 
-        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="生效日期"
+        <el-select v-model="filterType" placeholder="合同类型" clearable style="width: 150px; margin-left: 10px;">
-          end-placeholder="到期日期" style="margin-left: 10px;" @change="handleDateChange" />
+          <el-option label="加盟合同" value="franchise" />
+          <el-option label="采购合同" value="supply" />
+        </el-select>
+
+        <el-select v-model="filterStatus" placeholder="合同状态" clearable style="width: 150px; margin-left: 10px;">
+          <el-option label="草稿" value="草稿" />
+          <el-option label="生效" value="生效" />
+          <el-option label="已完成" value="已完成" />
+          <el-option label="作废" value="作废" />
+        </el-select>
       </div>
     </div>
 
@@ -375,27 +441,17 @@ const canDeleteRow = (row) => {
 
       <div v-else>
         <div class="list-header">
-          <span class="total-count">共找到 {{ searchResults.length }} 条合同</span>
+          <span class="total-count">共找到 {{ total }} 条合同</span>
         </div>
 
-        <el-table :data="paginatedData" border style="width: 100%">
+        <el-table :data="paginatedData" border style="width: 100%" @row-dblclick="handleRowDblClick" row-class-name="clickable-row">
-          <el-table-column prop="id" label="编号" width="70" />
+          <el-table-column prop="id" label="合同编号" width="90" />
-          <el-table-column prop="contract_name" label="合同名称" min-width="180" />
+          <el-table-column prop="contract_name" label="合同名称" min-width="200" />
           <el-table-column prop="type" label="类型" width="90">
             <template #default="{ row }">
               <el-tag :type="row.type === 'franchise' ? 'success' : 'warning'">{{ row.type === 'franchise' ? '加盟' : '采购' }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column prop="customer_name" label="客户" width="100">
-            <template #default="{ row }">
-              {{ row.customer_name || '-' }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="supplier_name" label="供应商" width="100">
-            <template #default="{ row }">
-              {{ row.supplier_name || '-' }}
-            </template>
-          </el-table-column>
           <el-table-column prop="employee_name" label="业务员" width="90">
             <template #default="{ row }">
               {{ row.employee_name || '-' }}
@@ -411,16 +467,6 @@ const canDeleteRow = (row) => {
               <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column prop="effective_date" label="生效日期" width="110">
-            <template #default="{ row }">
-              {{ formatDate(row.effective_date) }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="expiry_date" label="到期日期" width="110">
-            <template #default="{ row }">
-              {{ formatDate(row.expiry_date) }}
-            </template>
-          </el-table-column>
           <el-table-column label="操作" width="160" fixed="right" v-if="canOperate">
             <template #default="{ row }">
               <el-button link type="primary" @click="editContract(row)" v-if="canEditRow(row)">编辑</el-button>
@@ -434,7 +480,7 @@ const canDeleteRow = (row) => {
           <el-pagination
             v-model:current-page="currentPage"
             :page-size="pageSize"
-            :total="filteredResults.length"
+            :total="total"
             layout="prev, pager, next"
             prev-text="上一页"
             next-text="下一页"
@@ -444,6 +490,35 @@ const canDeleteRow = (row) => {
       </div>
     </div>
 
+    <!-- 合同详情弹窗 -->
+    <el-dialog v-model="showDetailDialog" title="合同详情" width="700px" @close="closeDetail">
+      <div v-if="currentDetail" class="detail-content">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="合同编号">{{ currentDetail.id }}</el-descriptions-item>
+          <el-descriptions-item label="合同名称">{{ currentDetail.contract_name }}</el-descriptions-item>
+          <el-descriptions-item label="合同类型">
+            <el-tag :type="currentDetail.type === 'franchise' ? 'success' : 'warning'">{{ currentDetail.type === 'franchise' ? '加盟合同' : '采购合同' }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="getStatusType(currentDetail.status)">{{ currentDetail.status }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="客户">{{ currentDetail.customer_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="供应商">{{ currentDetail.supplier_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="业务员">{{ currentDetail.employee_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="负责人">{{ currentDetail.responsible_user_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="金额">¥{{ currentDetail.amount?.toLocaleString() }}</el-descriptions-item>
+          <el-descriptions-item label="生效日期">{{ formatDate(currentDetail.effective_date) }}</el-descriptions-item>
+          <el-descriptions-item label="到期日期">{{ formatDate(currentDetail.expiry_date) }}</el-descriptions-item>
+          <el-descriptions-item label="合同内容" :span="2">{{ currentDetail.contract_content || '无' }}</el-descriptions-item>
+          <el-descriptions-item label="备注" :span="2">{{ currentDetail.remark || '无' }}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+      <template #footer>
+        <el-button @click="closeDetail">关闭</el-button>
+        <el-button type="primary" @click="(() => { const d = currentDetail; closeDetail(); editContract(d) })()" v-if="canUpdate && userInfo.employee_id === currentDetail?.employee_id">编辑</el-button>
+      </template>
+    </el-dialog>
+
     <!-- 新增/编辑表单 -->
     <div v-if="showAddForm" class="contract-form" style="margin-top: 20px;">
       <el-divider content-position="left">{{ isEditMode ? '编辑合同' : '新增合同' }}</el-divider>
@@ -481,9 +556,10 @@ const canDeleteRow = (row) => {
           </el-col>
           <el-col :span="12">
             <el-form-item label="业务员">
-              <el-select v-model="form.employee_id" placeholder="请选择业务员" style="width: 100%;" filterable>
+              <el-select v-model="form.employee_id" placeholder="请选择业务员" style="width: 100%;" filterable :disabled="isEmployeeLocked">
                 <el-option v-for="e in employeeList" :key="e.id" :label="`${e.id} - ${e.name}`" :value="e.id" />
               </el-select>
+              <div class="field-hint" v-if="isEmployeeLocked">专员无法修改业务员，已锁定为自己</div>
             </el-form-item>
           </el-col>
         </el-row>
@@ -514,9 +590,8 @@ const canDeleteRow = (row) => {
             <el-form-item label="状态" required>
               <el-select v-model="form.status" style="width: 100%;">
                 <el-option label="草稿" value="草稿" />
-                <el-option label="生效中" value="生效中" />
                 <el-option label="生效" value="生效" />
-                <el-option label="完成" value="完成" />
+                <el-option label="已完成" value="已完成" />
                 <el-option label="作废" value="作废" />
               </el-select>
             </el-form-item>
@@ -603,4 +678,19 @@ const canDeleteRow = (row) => {
   padding-top: 15px;
   border-top: 1px solid #eee;
 }
+
+.clickable-row {
+  cursor: pointer;
+}
+
+.detail-content {
+  padding: 10px 0;
+}
+
+.field-hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+  line-height: 1.4;
+}
 </style>

src/components/customer.vue

@@ -38,6 +38,7 @@ const filterRegion = ref([])
 // 分页相关
 const currentPage = ref(1)
 const pageSize = ref(10)
+const total = ref(0)
 
 // 只保留省市两级的地区数据
 const regionDataTwoLevel = computed(() => {
@@ -50,28 +51,29 @@ const regionDataTwoLevel = computed(() => {
     }))
 })
 
-// 分页后的数据
+// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
-const paginatedData = computed(() => {
+const paginatedData = computed(() => searchResults.value)
-    const start = (currentPage.value - 1) * pageSize.value
-    const end = start + pageSize.value
-    return searchResults.value.slice(start, end)
-})
 
 onMounted(() => {
     fetchData()
 })
 
-// 监听搜索结果变化，重置页码
+// 获取客户列表（服务端分页）
-watch(searchResults, () => {
+const fetchData = async (page) => {
-    currentPage.value = 1
-})
-
-// 获取客户列表
-const fetchData = async () => {
     loading.value = true
-    const res = await getCustomerList()
+    const params = {
+        page: page || currentPage.value,
+        pageSize: pageSize.value
+    }
+    const res = await getCustomerList(params)
     if (res.code === 0 || res.code === 200) {
-        searchResults.value = res.data.list || res.data
+        if (res.data && Array.isArray(res.data.list)) {
+            searchResults.value = res.data.list
+            total.value = res.data.total
+        } else if (Array.isArray(res.data)) {
+            searchResults.value = res.data
+            total.value = res.data.length
+        }
     }
     showSearchResults.value = true
     loading.value = false
@@ -88,6 +90,8 @@ const handleSearch = async () => {
     loading.value = true
     try {
         const params = {
+            page: currentPage.value,
+            pageSize: pageSize.value,
             name: select.value === '1' ? search.value : undefined,
             id: select.value === '2' ? Number(search.value) : undefined,
             province: filterRegion.value?.[0] ? CodeToText[filterRegion.value[0]] : undefined,
@@ -96,7 +100,13 @@ const handleSearch = async () => {
         const res = await getCustomerList(params)
         if (seq !== searchSeq) return
         if (res.code === 0 || res.code === 200) {
-            searchResults.value = res.data.list || res.data
+            if (res.data && Array.isArray(res.data.list)) {
+                searchResults.value = res.data.list
+                total.value = res.data.total
+            } else if (Array.isArray(res.data)) {
+                searchResults.value = res.data
+                total.value = res.data.length
+            }
         }
         showSearchResults.value = true
     } finally {
@@ -215,9 +225,10 @@ const closeDetail = () => {
     currentDetail.value = null
 }
 
-// 页码变化
+// 页码变化（服务端分页：重新请求后端）
 const handleCurrentChange = (val) => {
     currentPage.value = val
+    fetchData(val)
 }
 
 // 检查权限
@@ -237,8 +248,8 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
                     class="customer-search-with-select" @keyup.enter="handleSearch">
                     <template #prepend>
                         <el-select v-model="select" placeholder="请选择" style="width: 115px">
-                            <el-option label="姓名" value="1" />
+                            <el-option label="客户姓名" value="1" />
-                            <el-option label="编号" value="2" />
+                            <el-option label="客户编号" value="2" />
                         </el-select>
                     </template>
                     <template #append>
@@ -278,11 +289,11 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
 
             <div v-else>
                 <div class="list-header">
-                    <span class="total-count">共找到 {{ searchResults.length }} 条记录</span>
+                    <span class="total-count">共找到 {{ total }} 条记录</span>
                 </div>
 
                 <el-table :data="paginatedData" v-loading="loading" border style="width: 100%" @row-dblclick="handleRowDblClick" row-class-name="clickable-row">
-                    <el-table-column prop="id" label="编号" width="80" />
+                    <el-table-column prop="id" label="客户编号" width="90" />
                     <el-table-column prop="name" label="姓名" width="120" />
                     <el-table-column prop="phone" label="电话" width="150" />
                     <el-table-column label="地区" min-width="150">
@@ -306,7 +317,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
                     <el-pagination
                         v-model:current-page="currentPage"
                         :page-size="pageSize"
-                        :total="searchResults.length"
+                        :total="total"
                         layout="prev, pager, next"
                         prev-text="上一页"
                         next-text="下一页"
@@ -326,7 +337,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
                 </el-form-item>
 
                 <el-form-item label="电话" required>
-                    <el-input v-model="form.phone" maxlength="11"
+                    <el-input v-model="form.phone" maxlength="11" oninput="this.value=this.value.replace(/\D/g,'')"
                         placeholder="请输入11位手机号" style="width: 100%" />
                 </el-form-item>
 

src/components/employee.vue

@@ -11,10 +11,10 @@ import {
     getDepartmentList,
     getSimpleEmployeeList
 } from '../api/employee'
-import { hasPermission, getUserInfo } from '../store/user'
+import { hasPermission, getUserInfo, getRoleLevel } from '../store/user'
 import { formatDateTime, formatDate } from '../utils/date'
 import { createUser } from '../api/user'
-import { DEPARTMENT_NAME_LIST } from '../constants/departments'
+import { DEPARTMENT_NAME_LIST, DEPARTMENT_LIST } from '../constants/departments'
 
 const form = reactive({
     name: '',
@@ -28,12 +28,14 @@ const form = reactive({
     phone: '',
     email: '',
     status: 1,
-    remark: ''
+    remark: '',
+    role_level: 4 // 默认一般专员
 })
 
 const search = ref('')
 const select = ref('1')
 const filterStatus = ref('')
+const filterDepartment = ref('')
 const searchResults = ref([])
 const showSearchResults = ref(false)
 const showAddForm = ref(false)
@@ -52,13 +54,29 @@ const totalPages = ref(0)
 // 新增用户相关状态
 const showCreateUserForm = ref(false)
 const justCreatedEmployee = ref(null)
+const linkedEmployeeId = ref(null)  // 独立 ref 追踪关联员工 ID
 const userForm = reactive({
     username: '',
     password: '',
     name: '',
     department_id: 2,
     is_active: 1,
-    employee_id: null
+    employee_id: null,
+    role_level: 4
+})
+
+// 角色级别选项
+const roleLevelOptions = computed(() => {
+    if (form.department === '总经理办公室') {
+        // 总经理办公室只能选择副总经理
+        return [{ value: 2, label: '副总经理' }]
+    }
+    // 一般部门没有总经理，只有部门经理以下三级
+    return [
+        { value: 2, label: '部门经理' },
+        { value: 3, label: '部门副经理' },
+        { value: 4, label: '一般专员' }
+    ]
 })
 
 // 部门列表
@@ -67,17 +85,39 @@ const departmentOptions = ref([...DEPARTMENT_NAME_LIST])
 // 学历列表
 const educationOptions = ['高中', '专科', '本科', '硕士', '博士']
 
+// 职务选项（根据部门动态变化）
+const positionOptions = computed(() => {
+  if (form.department === '总经理办公室') {
+    // 总经理办公室只能选择副总经理，总经理是系统预设的
+    return ['副总经理']
+  }
+  return [] // 其他部门自由输入
+})
+
+// 是否锁定职务选择
+const isPositionLocked = computed(() => form.department === '总经理办公室')
+
 // 分页后的数据（服务端已分页，searchResults 即为当前页数据）
 const paginatedData = computed(() => searchResults.value)
 
 // onMounted 已在下方合并（同时加载部门列表）
 
 // 监听筛选变化
-watch([filterStatus], () => {
+watch([filterStatus, filterDepartment], () => {
     currentPage.value = 1
     handleSearch()
 })
 
+// 监听部门变化：总经理办公室自动锁定职位为副总经理，重置角色级别
+watch(() => form.department, (val) => {
+    if (val === '总经理办公室') {
+        form.position = '副总经理'
+        form.role_level = 2 // 副总经理
+    } else {
+        form.role_level = 4 // 默认一般专员
+    }
+})
+
 // 监听筛选变化时重置页码（服务端分页：已由 filterStatus watch 处理）
 // watch(searchResults 不再重置页码，避免翻页后被重置回第 1 页
 
@@ -118,15 +158,14 @@ const handleSearch = async () => {
     const params = {
         page: 1,
         pageSize: pageSize.value,
-        status: filterStatus.value !== '' ? filterStatus.value : undefined
+        status: filterStatus.value !== '' ? filterStatus.value : undefined,
+        department: filterDepartment.value || undefined
     }
     if (search.value) {
         if (select.value === '1') {
             params.id = Number(search.value)
         } else if (select.value === '2') {
             params.name = search.value
-        } else if (select.value === '3') {
-            params.department = search.value
         }
     }
     const res = await getEmployeeList(params)
@@ -148,6 +187,7 @@ const handleSearch = async () => {
 const resetSearch = () => {
     search.value = ''
     filterStatus.value = ''
+    filterDepartment.value = ''
     showSearchResults.value = false
     showAddForm.value = false
     currentPage.value = 1
@@ -173,6 +213,7 @@ const resetForm = () => {
     form.email = ''
     form.status = 1
     form.remark = ''
+    form.role_level = 4
     isEditMode.value = false
     currentEmployeeId.value = null
 }
@@ -218,7 +259,8 @@ const saveEmployee = async () => {
         phone: form.phone,
         email: form.email,
         status: form.status,
-        remark: form.remark
+        remark: form.remark,
+        role_level: form.role_level
     }
 
     try {
@@ -241,11 +283,17 @@ const saveEmployee = async () => {
                     cancelButtonText: '暂不创建',
                     type: 'info'
                 }
-            ).then(() => {
+            ).then((action) => {
-                // 确认：进入用户创建表单
+                if (action === 'confirm') {
-                openUserForm(res.data)
+                    // 确认：进入用户创建表单
+                    openUserForm(res.data)
+                } else {
+                    // 取消：返回列表
+                    cancelAdd()
+                    fetchData()
+                }
             }).catch(() => {
-                // 取消：返回列表
+                // 用户点击了关闭按钮（X）：返回列表
                 cancelAdd()
                 fetchData()
             })
@@ -298,15 +346,25 @@ const handleCurrentChange = (val) => {
 }
 
 // 打开用户创建表单（从员工新增后调用）
-const openUserForm = (employee) => {
+const openUserForm = (emp) => {
+    // 兼容 res.data 嵌套：res.data 可能是 { data: {...} } 或直接 {...}
+    const employee = emp?.data || emp
+    if (!employee || !employee.id) {
+        console.error('[openUserForm] 员工数据异常:', emp)
+        ElMessage.error('员工信息获取失败，请重试')
+        return
+    }
     showAddForm.value = false
     showSearchResults.value = false
     showCreateUserForm.value = true
-    // 自动填充员工信息
+    // 用独立 ref 保存员工 ID，避免 reactive 对象异步问题
+    linkedEmployeeId.value = employee.id
+    // 自动填充员工信息，部门与员工一致
+    const deptMatch = DEPARTMENT_LIST.find(d => d.description === employee.department)
     userForm.username = ''
     userForm.password = ''
-    userForm.name = employee.name
+    userForm.name = employee.name || ''
-    userForm.department_id = 2
+    userForm.department_id = deptMatch ? deptMatch.id : 2
     userForm.is_active = 1
     userForm.employee_id = employee.id
 }
@@ -330,28 +388,37 @@ const saveUserFromEmployee = async () => {
         ElMessage.warning('请输入密码')
         return
     }
-    await createUser({
+    try {
-        username: userForm.username,
+        const empId = linkedEmployeeId.value || userForm.employee_id
-        password: userForm.password,
+        const payload = {
-        department_id: userForm.department_id,
+            username: userForm.username,
-        employee_id: userForm.employee_id,
+            password: userForm.password,
-        is_active: userForm.is_active
+            department_id: userForm.department_id,
-    })
+            employee_id: empId,
-    ElMessage.success('用户创建成功')
+            is_active: userForm.is_active,
-    cancelCreateUser()
+            role_level: userForm.role_level
-    fetchData()
+        }
+        await createUser(payload)
+        ElMessage.success('用户创建成功')
+        cancelCreateUser()
+        fetchData()
+    } catch (e) {
+        ElMessage.error(e?.response?.data?.message || e?.message || '用户创建失败')
+    }
 }
 
 // 取消创建用户
 const cancelCreateUser = () => {
     showCreateUserForm.value = false
     justCreatedEmployee.value = null
+    linkedEmployeeId.value = null
     userForm.username = ''
     userForm.password = ''
     userForm.name = ''
     userForm.department_id = 2
     userForm.is_active = 1
     userForm.employee_id = null
+    userForm.role_level = 4
     showSearchResults.value = true
 }
 
@@ -362,6 +429,38 @@ const canDelete = computed(() => hasPermission('employee', 'delete'))
 const canOperate = computed(() => canUpdate.value || canDelete.value)
 const showSalary = computed(() => ['总经理办公室', '财务部'].includes(getUserInfo()?.departmentDesc))
 
+// 获取当前用户角色级别
+const currentRoleLevel = computed(() => getRoleLevel())
+
+// 过滤后的部门列表（一般专员不能选择总经理办公室）
+const filteredDeptListForUser = computed(() => {
+    if (currentRoleLevel.value === 4) {
+        // 一般专员不能选择总经理办公室
+        return DEPARTMENT_LIST.filter(d => d.name !== 'general_manager')
+    }
+    return DEPARTMENT_LIST
+})
+
+// 是否是总经理办公室部门（用于用户创建表单）
+const isGeneralManagerDeptForUser = computed(() => {
+    const dept = DEPARTMENT_LIST.find(d => d.id === userForm.department_id)
+    return dept?.name === 'general_manager'
+})
+
+// 角色级别选项（根据部门动态变化，用于用户创建表单）
+const roleLevelOptionsForUser = computed(() => {
+    if (isGeneralManagerDeptForUser.value) {
+        // 总经理办公室只能选择副总经理
+        return [{ value: 2, label: '副总经理' }]
+    }
+    // 一般部门没有总经理，只有部门经理以下三级
+    return [
+        { value: 2, label: '部门经理' },
+        { value: 3, label: '部门副经理' },
+        { value: 4, label: '一般专员' }
+    ]
+})
+
 </script>
 
 <template>
@@ -373,9 +472,8 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                     class="employee-search-with-select" @keyup.enter="handleSearch">
                     <template #prepend>
                         <el-select v-model="select" placeholder="请选择" style="width: 115px">
-                            <el-option label="ID" value="1" />
+                            <el-option label="员工编号" value="1" />
-                            <el-option label="姓名" value="2" />
+                            <el-option label="员工姓名" value="2" />
-                            <el-option label="部门" value="3" />
                         </el-select>
                     </template>
                     <template #append>
@@ -391,6 +489,9 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
 
             <div class="filter-row">
                 <span class="filter-label">筛选条件：</span>
+                <el-select v-model="filterDepartment" placeholder="所属部门" clearable style="width: 140px; margin-right: 12px;">
+                    <el-option v-for="dept in DEPARTMENT_LIST" :key="dept.id" :label="dept.description" :value="dept.description" />
+                </el-select>
                 <el-select v-model="filterStatus" placeholder="在职状态" clearable style="width: 140px;">
                     <el-option label="在职" :value="1" />
                     <el-option label="离职" :value="0" />
@@ -413,7 +514,7 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                 </div>
 
                 <el-table :data="paginatedData" v-loading="loading" border style="width: 100%" @row-dblclick="handleRowDblClick" row-class-name="clickable-row">
-                    <el-table-column prop="id" label="ID" width="60" />
+                    <el-table-column prop="id" label="员工编号" width="90" />
                     <el-table-column prop="name" label="姓名" width="80" />
                     <el-table-column prop="gender" label="性别" width="60">
                         <template #default="{ row }">
@@ -506,11 +607,28 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                             <el-select v-model="form.department" placeholder="请选择部门" style="width: 100%;">
                                 <el-option v-for="dept in departmentOptions" :key="dept" :label="dept" :value="dept" />
                             </el-select>
+                            <div class="field-hint" v-if="isEditMode">修改部门将同步更新关联用户的部门</div>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
                         <el-form-item label="职务/岗位" required>
-                            <el-input v-model="form.position" placeholder="请输入职务" />
+                            <el-select v-if="isPositionLocked" v-model="form.position" placeholder="请选择职务" style="width: 100%;">
+                                <el-option v-for="pos in positionOptions" :key="pos" :label="pos" :value="pos" />
+                            </el-select>
+                            <el-input v-else v-model="form.position" placeholder="请输入职务" />
+                            <div class="field-hint" v-if="isPositionLocked">总经理办公室只能选择副总经理</div>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="角色级别" required>
+                            <el-select v-model="form.role_level" placeholder="请选择角色级别" style="width: 100%;">
+                                <el-option v-for="item in roleLevelOptions" :key="item.value" :label="item.label" :value="item.value" />
+                            </el-select>
+                            <div class="field-hint" v-if="form.department === '总经理办公室'">总经理办公室只能选择副总经理</div>
+                            <div class="field-hint" v-else>一般部门没有总经理级别</div>
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -522,7 +640,7 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
-                        <el-form-item label="工资">
+                        <el-form-item label="工资" v-if="showSalary">
                             <el-input-number v-model="form.salary" :min="0" :step="500" :precision="2" style="width: 100%;" />
                         </el-form-item>
                     </el-col>
@@ -531,7 +649,7 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                 <el-row :gutter="20">
                     <el-col :span="12">
                         <el-form-item label="联系电话">
-                            <el-input v-model="form.phone" placeholder="请输入手机号" />
+                            <el-input v-model="form.phone" placeholder="请输入手机号" type="tel" maxlength="11" oninput="this.value=this.value.replace(/\D/g,'')" />
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
@@ -566,7 +684,7 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                 <el-row :gutter="20">
                     <el-col :span="12">
                         <el-form-item label="关联员工ID">
-                            <el-input :model-value="userForm.employee_id" disabled />
+                            <el-input :model-value="linkedEmployeeId" disabled />
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
@@ -592,13 +710,8 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                 <el-row :gutter="20">
                     <el-col :span="12">
                         <el-form-item label="所属部门">
-                            <el-select v-model="userForm.department_id" placeholder="请选择部门" style="width: 100%;">
+                            <el-select v-model="userForm.department_id" placeholder="请选择部门" style="width: 100%;" disabled>
-                                <el-option label="信息技术部" :value="1" />
+                                <el-option v-for="dept in filteredDeptListForUser" :key="dept.id" :label="dept.description" :value="dept.id" />
-                                <el-option label="总经理办公室" :value="2" />
-                                <el-option label="招商部" :value="3" />
-                                <el-option label="运营部" :value="4" />
-                                <el-option label="采购部" :value="5" />
-                                <el-option label="财务部" :value="6" />
                             </el-select>
                         </el-form-item>
                     </el-col>
@@ -612,6 +725,23 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                     </el-col>
                 </el-row>
 
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="角色级别" required>
+                            <el-select v-model="userForm.role_level" placeholder="请选择角色级别" style="width: 100%;">
+                                <el-option
+                                    v-for="item in roleLevelOptionsForUser"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                />
+                            </el-select>
+                            <div class="field-hint" v-if="isGeneralManagerDeptForUser">总经理办公室只能选择副总经理</div>
+                            <div class="field-hint" v-else>一般部门没有总经理级别</div>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
                 <el-form-item>
                     <el-button type="primary" @click="saveUserFromEmployee">保存用户</el-button>
                     <el-button type="danger" @click="cancelCreateUser">暂不创建</el-button>
@@ -623,7 +753,7 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
         <el-dialog v-model="showDetailDialog" title="员工详情" width="650px" @close="closeDetail">
             <div v-if="currentDetail" class="detail-content">
                 <el-descriptions :column="2" border>
-                    <el-descriptions-item label="员工ID">{{ currentDetail.id }}</el-descriptions-item>
+                    <el-descriptions-item label="员工编号">{{ currentDetail.id }}</el-descriptions-item>
                     <el-descriptions-item label="姓名">{{ currentDetail.name }}</el-descriptions-item>
                     <el-descriptions-item label="性别">
                         <span :style="{ color: currentDetail.gender === '女' ? '#e6a23c' : '#409eff' }">{{ currentDetail.gender }}</span>
@@ -632,7 +762,7 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                     <el-descriptions-item label="学历">{{ currentDetail.education }}</el-descriptions-item>
                     <el-descriptions-item label="部门">{{ currentDetail.department }}</el-descriptions-item>
                     <el-descriptions-item label="职务">{{ currentDetail.position }}</el-descriptions-item>
-                    <el-descriptions-item label="工资">
+                    <el-descriptions-item label="工资" v-if="showSalary">
                         <span class="amount-text">¥{{ currentDetail.salary?.toLocaleString() }}</span>
                     </el-descriptions-item>
                     <el-descriptions-item label="入职时间">{{ formatDate(currentDetail.entry_date) }}</el-descriptions-item>
@@ -659,6 +789,13 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
 </template>
 
 <style scoped>
+.field-hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
 .employee-container {
   padding: 20px;
 }

src/components/home.vue

@@ -1,68 +1,156 @@
 <template>
-  <div class="home-container">
+  <div class="workspace-container">
     <!-- 顶部视频横幅 -->
     <div class="video-banner">
-      <video src="../../public/首页顶图.mp4" autoplay muted loop class="bg-video"></video>
+      <video src="/首页顶图.mp4" autoplay muted loop class="bg-video"></video>
       <div class="video-overlay">
-        <h2 class="banner-title">欢迎使用蜜雪冰城管理系统</h2>
+        <div class="welcome-text">
+          <h2 class="banner-title">欢迎回来，{{ userInfo?.name || '用户' }}</h2>
+          <p class="welcome-sub">{{ userInfo?.departmentDesc }} · {{ roleName }}</p>
+          <p class="welcome-date">{{ currentDate }}</p>
+        </div>
       </div>
     </div>
 
-    <!-- 雪王简介 -->
+    <!-- 功能卡片网格 -->
-    <div class="intro-section">
+    <div class="card-grid">
-      <div class="section-header">
+      <div
-        <div class="header-line"></div>
+        v-for="card in visibleCards"
-        <h2 class="section-title">雪王简介</h2>
+        :key="card.route"
-        <div class="header-line"></div>
+        class="function-card"
+        :style="{ borderTopColor: themeColor, '--hover-bg': themeBg }"
+        @click="navigateTo(card.route)"
+      >
+        <div class="card-icon" :style="{ background: themeBg, color: themeColor }">
+          <el-icon :size="28"><component :is="card.icon" /></el-icon>
+        </div>
+        <div class="card-content">
+          <h3 class="card-title">{{ card.title }}</h3>
+          <p class="card-desc">{{ card.description }}</p>
+        </div>
+        <div class="card-arrow">
+          <el-icon :style="{ color: themeColor }"><ArrowRight /></el-icon>
+        </div>
       </div>
+    </div>
 
-      <div class="intro-content">
+    <!-- 快捷信息 -->
-        <div class="pic-wrapper">
+    <div class="info-section">
-          <img src="../../public/mixue.png" alt="雪王" class="xuewang-img">
+      <el-row :gutter="20">
-        </div>
+        <el-col :span="12">
-        <div class="txt-wrapper">
+          <el-card shadow="hover" class="info-card">
-          <div class="quote">
+            <template #header>
-            "我是手拿冰淇凌权杖的雪王"
+              <div class="info-card-header">
-            <br>
+                <span>我的信息</span>
-            "一生只爱冰淇凌与茶"
+              </div>
-          </div>
+            </template>
-          <ul class="info-list">
+            <div class="info-item">
-            <li v-for="(item, index) in snowKingInfo" :key="index">
+              <span class="info-label">用户名</span>
-              <span class="info-label">{{ item.label }}</span>
+              <span>{{ userInfo?.username }}</span>
-              <span class="info-divider"></span>
+            </div>
-              <span class="info-value">{{ item.value }}</span>
+            <div class="info-item">
-            </li>
+              <span class="info-label">部门</span>
-          </ul>
+              <span>{{ userInfo?.departmentDesc }}</span>
-        </div>
+            </div>
-      </div>
+            <div class="info-item">
+              <span class="info-label">角色</span>
+              <span>{{ roleName }}</span>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card shadow="hover" class="info-card">
+            <template #header>
+              <div class="info-card-header">
+                <span>快速操作</span>
+              </div>
+            </template>
+            <div class="quick-actions">
+              <el-button
+                v-for="card in visibleCards.slice(0, 3)"
+                :key="card.route"
+                :style="{ borderColor: themeColor, color: themeColor }"
+                @click="navigateTo(card.route)"
+                plain
+              >
+                {{ card.title }}
+              </el-button>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { getUserInfo, hasPermission, getRoleLevel, isManager } from '../store/user'
 
-const snowKingInfo = ref([
+const router = useRouter()
-  { label: '生日', value: '11月22日' },
+const userInfo = computed(() => getUserInfo())
-  { label: '性格', value: '正直、友善、热情、进取' },
+const roleLevel = computed(() => getRoleLevel())
-  { label: '职位', value: '蜜雪冰城首席品控官兼全球品牌代言人' },
+
-  { label: '口头禅', value: '你爱我，我爱你，蜜雪冰城甜蜜蜜' },
+// 主题色
-  { label: '爱好', value: '唱歌跳舞，研究冰淇淋与茶的新奇吃法' }
+const themeColor = computed(() => roleLevel.value <= 3 ? '#E60012' : '#FF8C69')
-])
+const themeBg = computed(() => roleLevel.value <= 3 ? '#FEF0F0' : '#FFF5F0')
+const bannerBg = computed(() => roleLevel.value <= 3
+  ? 'linear-gradient(135deg, #FEF0F0 0%, #FFF5F5 100%)'
+  : 'linear-gradient(135deg, #FFF5F0 0%, #FFFAF5 100%)')
+
+// 角色名称
+const roleName = computed(() => {
+  const level = roleLevel.value
+  if (level === 1) return '总经理'
+  if (level === 2) return '部门经理'
+  if (level === 3) return '部门副经理'
+  return '一般专员'
+})
+
+// 当前日期
+const currentDate = computed(() => {
+  const d = new Date()
+  const days = ['日', '一', '二', '三', '四', '五', '六']
+  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 星期${days[d.getDay()]}`
+})
+
+// 功能卡片定义
+const allCards = [
+  { title: '客户管理', description: '管理加盟商信息、联系方式、地址等', icon: 'Avatar', route: '/panel/customer', permission: ['customer', 'read'] },
+  { title: '合同管理', description: '管理加盟合同和采购合同', icon: 'Document', route: '/panel/contract', permission: ['contract', 'read'] },
+  { title: '售后管理', description: '处理客户反馈和售后服务', icon: 'Service', route: '/panel/service', permission: ['after_sale', 'read'] },
+  { title: '产品管理', description: '管理茶饮原料、包装物料、设备', icon: 'Goods', route: '/panel/products', permission: ['product', 'read'] },
+  { title: '供应商管理', description: '管理供应商信息和合作关系', icon: 'Box', route: '/panel/supplier', permission: ['supplier', 'read'] },
+  { title: '员工管理', description: '管理员工信息、部门、职务', icon: 'User', route: '/panel/employee', permission: ['employee', 'read'] },
+  { title: '用户管理', description: '管理系统用户账号和权限', icon: 'UserFilled', route: '/panel/user', permission: ['user', 'manage'] },
+]
+
+// 根据权限过滤可见卡片
+const visibleCards = computed(() => {
+  return allCards.filter(card => hasPermission(card.permission[0], card.permission[1]))
+})
+
+// 导航
+const navigateTo = (route) => {
+  router.push(route)
+}
 </script>
 
 <style scoped>
-.home-container {
+.workspace-container {
-  min-height: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 /* ========== 视频横幅 ========== */
 .video-banner {
   position: relative;
   width: calc(100% + 40px);
-  margin: -20px -20px 0 -20px;
+  margin: -20px -20px 20px -20px;
-  height: 300px;
+  height: 260px;
   overflow: hidden;
+  border-radius: 0 0 12px 12px;
 }
 
 .bg-video {
@@ -80,155 +168,148 @@ const snowKingInfo = ref([
   background: linear-gradient(
     to bottom,
     rgba(230, 0, 18, 0.3) 0%,
-    rgba(0, 0, 0, 0.4) 100%
+    rgba(0, 0, 0, 0.5) 100%
   );
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.welcome-text {
+  text-align: center;
+}
+
 .banner-title {
   color: #fff;
-  font-size: 32px;
+  font-size: 28px;
   font-weight: 600;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-  margin: 0;
+  margin: 0 0 8px 0;
 }
 
-/* ========== 简介区域 ========== */
+.welcome-sub {
-.intro-section {
+  margin: 0 0 4px 0;
-  padding: 40px 20px;
+  color: rgba(255,255,255,0.9);
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-  margin-bottom: 40px;
-}
-
-.header-line {
-  flex: 1;
-  max-width: 200px;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #E60012, transparent);
-}
-
-.section-title {
-  font-size: 32px;
-  font-weight: 700;
-  color: #E60012;
-  margin: 0;
-  white-space: nowrap;
-}
-
-.intro-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 60px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-/* 雪王图片 */
-.pic-wrapper {
-  flex-shrink: 0;
-  width: 400px;
-  height: 400px;
-  border-radius: 20px;
-  overflow: hidden;
-  box-shadow: 0 8px 30px rgba(230, 0, 18, 0.15);
-  transition: transform 0.3s;
-}
-
-.pic-wrapper:hover {
-  transform: translateY(-5px);
-}
-
-.xuewang-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* 文字内容 */
-.txt-wrapper {
-  flex: 1;
-  max-width: 500px;
-}
-
-.quote {
-  font-size: 28px;
-  font-weight: 700;
-  color: #E60012;
-  line-height: 1.5;
-  margin-bottom: 40px;
-  padding-left: 20px;
-  border-left: 4px solid #E60012;
-}
-
-.info-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.info-list li {
-  display: flex;
-  align-items: center;
-  padding: 14px 0;
-  border-bottom: 1px dashed #eee;
   font-size: 16px;
 }
 
-.info-list li:last-child {
+.welcome-date {
+  margin: 0;
+  color: rgba(255,255,255,0.7);
+  font-size: 14px;
+}
+
+/* ========== 功能卡片网格 ========== */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.function-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  border-top: 3px solid #E60012;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.function-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  background: var(--hover-bg, #FEF0F0);
+}
+
+.card-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.card-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-title {
+  margin: 0 0 4px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.card-desc {
+  margin: 0;
+  font-size: 13px;
+  color: #909399;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-arrow {
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.function-card:hover .card-arrow {
+  opacity: 1;
+}
+
+/* ========== 信息区域 ========== */
+.info-section {
+  margin-bottom: 20px;
+}
+
+.info-card {
+  height: 100%;
+}
+
+.info-card-header {
+  font-weight: 600;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px dashed #eee;
+  font-size: 14px;
+}
+
+.info-item:last-child {
   border-bottom: none;
 }
 
 .info-label {
-  font-weight: 600;
+  color: #909399;
-  color: #303133;
-  min-width: 70px;
 }
 
-.info-divider {
+.quick-actions {
-  width: 1px;
+  display: flex;
-  height: 16px;
+  flex-wrap: wrap;
-  background: #E60012;
+  gap: 10px;
-  margin: 0 16px;
 }
 
-.info-value {
+/* ========== 响应式 ========== */
-  color: #606266;
+@media (max-width: 768px) {
-  flex: 1;
+  .card-grid {
-}
+    grid-template-columns: 1fr;
-
-/* ========== 响应式适配 ========== */
-@media (max-width: 900px) {
-  .intro-content {
-    flex-direction: column;
-    gap: 30px;
   }
 
-  .pic-wrapper {
+  .welcome-banner {
-    width: 100%;
+    padding: 20px;
-    max-width: 400px;
-    height: auto;
-    aspect-ratio: 1;
-  }
-
-  .txt-wrapper {
-    width: 100%;
-  }
-
-  .banner-title {
-    font-size: 24px;
-  }
-
-  .video-banner {
-    height: 200px;
   }
 }
 </style>

src/components/panel.vue

@@ -2,18 +2,20 @@
 import {ref, computed} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 import { ElMessageBox } from 'element-plus'
-import { getUserInfo, logout, hasPermission } from '../store/user'
+import { getUserInfo, logout, hasPermission, getRoleLevel, isManager } from '../store/user'
 
 const route = useRoute()
 const router = useRouter()
 
-const isCollapse = ref(false)
-const switchFold = () => {
-  isCollapse.value = !isCollapse.value
-}
-
 // 获取用户信息
 const userInfo = computed(() => getUserInfo())
+const roleLevel = computed(() => getRoleLevel())
+const isManagerLevel = computed(() => isManager())
+
+// 主题色：副经理以上(level<=3)用红色，一般专员(level=4)用浅色
+const themeColor = computed(() => roleLevel.value <= 3 ? '#E60012' : '#FF8C69')
+const themeBg = computed(() => roleLevel.value <= 3 ? '#FEF0F0' : '#FFF5F0')
+const themeBorder = computed(() => roleLevel.value <= 3 ? '#FECDD0' : '#FFDAB9')
 
 // 退出登录
 const handleLogout = () => {
@@ -31,102 +33,55 @@ const handleLogout = () => {
 const checkPermission = (resource, action) => {
   return hasPermission(resource, action)
 }
+
+// 角色级别名称
+const roleName = computed(() => {
+  const level = roleLevel.value
+  if (level === 1) return '总经理'
+  if (level === 2) return '部门经理'
+  if (level === 3) return '部门副经理'
+  return '一般专员'
+})
 </script>
 
 <template>
-  <el-container style="height: 100vh">
+  <el-container style="height: 100vh; flex-direction: column">
     <!-- 顶部导航栏 -->
-    <el-header class="app-header">
+    <el-header class="app-header" :style="{ borderBottomColor: themeColor }">
-      <el-menu
+      <div class="header-content">
-        :ellipsis="false"
-        mode="horizontal"
-        router
-        class="header-menu"
-      >
         <!-- 左侧 Logo -->
-        <el-menu-item index="" class="logo-item">
+        <div class="logo-section">
-          <img src="../../public/logo.png" alt="logo" class="logo-img">
+          <img src="/logo.png" alt="logo" class="logo-img">
-          <h1 class="logo-title">蜜雪冰城管理系统</h1>
+          <h1 class="logo-title" :style="{ color: themeColor }">蜜雪冰城管理系统</h1>
-        </el-menu-item>
+          <el-button
+            v-if="route.path !== '/panel/home'"
+            class="back-btn"
+            :style="{ color: themeColor }"
+            @click="router.push('/panel/home')"
+          >
+            <el-icon><ArrowLeft /></el-icon>
+            返回工作台
+          </el-button>
+        </div>
 
         <!-- 右侧用户信息和退出 -->
         <div class="header-right">
           <span class="user-info" v-if="userInfo">
             <el-icon><User /></el-icon>
-            {{ userInfo.name }}（{{ userInfo.departmentDesc }}）
+            {{ userInfo.name }}（{{ userInfo.departmentDesc }} · {{ roleName }}）
           </span>
-          <el-menu-item index="" class="logout-item" @click="handleLogout">
+          <el-button class="logout-btn" @click="handleLogout" :style="{ color: themeColor }">
             <el-icon><SwitchButton/></el-icon>
-            <template #title>退出登录</template>
+            退出登录
-          </el-menu-item>
+          </el-button>
         </div>
-      </el-menu>
+      </div>
     </el-header>
 
-    <el-container>
+    <!-- 主内容区 -->
-      <!-- 侧边栏 -->
+    <el-main class="app-main" :style="{ background: roleLevel <= 3 ? '#f5f7fa' : '#faf8f5' }">
-      <el-aside class="app-aside" :width="isCollapse ? '64px' : '200px'">
+      <router-view />
-        <el-menu
+    </el-main>
-          :collapse="isCollapse"
-          :default-active="route.path"
-          router
-          class="aside-menu"
-        >
-          <el-menu-item index="/panel/home">
-            <el-icon><House /></el-icon>
-            <template #title>首页</template>
-          </el-menu-item>
-
-          <el-menu-item index="/panel/customer" v-if="checkPermission('customer', 'read')">
-            <el-icon><Avatar /></el-icon>
-            <template #title>客户管理</template>
-          </el-menu-item>
-
-          <el-menu-item index="/panel/contract" v-if="checkPermission('contract', 'read')">
-            <el-icon><Document /></el-icon>
-            <template #title>合同管理</template>
-          </el-menu-item>
-
-          <el-menu-item index="/panel/service" v-if="checkPermission('after_sale', 'read')">
-            <el-icon><Service /></el-icon>
-            <template #title>售后管理</template>
-          </el-menu-item>
-
-          <el-menu-item index="/panel/products" v-if="checkPermission('product', 'read')">
-            <el-icon><IceTea /></el-icon>
-            <template #title>产品管理</template>
-          </el-menu-item>
-
-          <el-menu-item index="/panel/supplier" v-if="checkPermission('supplier', 'read')">
-            <el-icon><Box /></el-icon>
-            <template #title>供应商管理</template>
-          </el-menu-item>
-
-          <el-menu-item index="/panel/employee" v-if="checkPermission('employee', 'read')">
-            <el-icon><User /></el-icon>
-            <template #title>员工管理</template>
-          </el-menu-item>
-
-          <el-menu-item index="/panel/user" v-if="checkPermission('user', 'manage')">
-            <el-icon><UserFilled /></el-icon>
-            <template #title>用户管理</template>
-          </el-menu-item>
-
-          <!-- 底部收缩按钮 -->
-          <el-menu-item index="" class="collapse-btn" @click="switchFold">
-            <el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}">
-              <ArrowLeft />
-            </el-icon>
-            <template #title>收缩</template>
-          </el-menu-item>
-        </el-menu>
-      </el-aside>
-
-      <!-- 主内容区 -->
-      <el-main class="app-main">
-        <router-view />
-      </el-main>
-    </el-container>
   </el-container>
 </template>
 
@@ -137,29 +92,22 @@ const checkPermission = (resource, action) => {
   align-items: center;
   background: #fff;
   border-bottom: 2px solid #E60012;
-  padding: 0;
+  padding: 0 20px;
   height: 60px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
-.header-menu {
+.header-content {
-  flex: 1;
+  display: flex;
-  border-bottom: none !important;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 }
 
-.logo-item {
+.logo-section {
   display: flex;
   align-items: center;
   gap: 10px;
-  border-bottom: none !important;
-}
-
-.logo-item.is-active {
-  border-bottom: none !important;
-}
-
-.logo-item.is-active::after {
-  display: none !important;
 }
 
 .logo-img {
@@ -176,101 +124,56 @@ const checkPermission = (resource, action) => {
   white-space: nowrap;
 }
 
+.back-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 20px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.back-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
 .header-right {
   display: flex;
   align-items: center;
-  margin-left: auto;
+  gap: 20px;
 }
 
 .user-info {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-right: 20px;
   color: #606266;
   font-size: 14px;
 }
 
-.logout-item {
+.logout-btn {
-  color: #909399;
+  border: none;
-}
+  background: transparent;
-
+  cursor: pointer;
-.logout-item:hover {
+  font-size: 14px;
-  color: #E60012 !important;
-}
-
-/* ========== 侧边栏 ========== */
-.app-aside {
-  transition: width 0.3s ease;
-  background: #fff;
-  border-right: 1px solid #eee;
-  overflow: hidden;
-}
-
-.aside-menu {
-  height: 100%;
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  border-right: none;
+  gap: 4px;
-  overflow: hidden;
 }
 
-.aside-menu:not(.el-menu--collapse) {
+.logout-btn:hover {
-  width: 200px;
+  opacity: 0.8;
-}
-
-/* 菜单项样式 */
-.aside-menu .el-menu-item {
-  height: 50px;
-  line-height: 50px;
-  margin: 4px 8px;
-  border-radius: 8px;
-  color: #606266;
-  transition: all 0.3s;
-}
-
-.aside-menu .el-menu-item:hover {
-  background: #FEF0F0;
-  color: #E60012;
-}
-
-.aside-menu .el-menu-item.is-active {
-  background: #E60012;
-  color: #fff;
-}
-
-.aside-menu .el-menu-item.is-active .el-icon {
-  color: #fff;
-}
-
-/* 底部收缩按钮 */
-.collapse-btn {
-  margin-top: auto !important;
 }
 
 /* ========== 主内容区 ========== */
 .app-main {
   padding: 20px;
-  background: #f5f7fa;
   overflow-y: auto;
-}
+  flex: 1;
-
-/* ========== 收缩动画 ========== */
-.rotate-180-animation {
-  animation: rotate-180 0.3s ease-in-out forwards;
-}
-
-.rotate-180-animation-reverse {
-  animation: rotate-180-reverse 0.3s ease-in-out forwards;
-}
-
-@keyframes rotate-180 {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(180deg); }
-}
-
-@keyframes rotate-180-reverse {
-  from { transform: rotate(180deg); }
-  to { transform: rotate(0deg); }
 }
 </style>

src/components/products.vue

@@ -39,14 +39,13 @@ const supplierList = ref([])
 // 分页相关
 const currentPage = ref(1)
 const pageSize = ref(10)
+const total = ref(0)
 
 // 产品类型映射
 const productTypeMap = {
-    raw_material: '原材料',
+    '茶饮原料': '茶饮原料',
-    packaging: '包装材料',
+    '包装物料': '包装物料',
-    equipment: '设备器具',
+    '设备器具': '设备器具'
-    cleaning: '清洁用品',
-    promote: '宣传物料'
 }
 
 onMounted(() => {
@@ -67,24 +66,25 @@ watch(filterType, () => {
     handleSearch()
 })
 
-// 监听搜索结果变化，重置页码
+// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
-watch(searchResults, () => {
+const paginatedData = computed(() => searchResults.value)
-    currentPage.value = 1
-})
 
-// 分页后的数据
+// 获取产品列表（服务端分页）
-const paginatedData = computed(() => {
+const fetchData = async (page) => {
-    const start = (currentPage.value - 1) * pageSize.value
-    const end = start + pageSize.value
-    return searchResults.value.slice(start, end)
-})
-
-// 获取产品列表
-const fetchData = async () => {
     loading.value = true
-    const res = await getProductsList()
+    const params = {
+        page: page || currentPage.value,
+        pageSize: pageSize.value
+    }
+    const res = await getProductsList(params)
     if (res.code === 0 || res.code === 200) {
-        searchResults.value = res.data.list || res.data
+        if (res.data && Array.isArray(res.data.list)) {
+            searchResults.value = res.data.list
+            total.value = res.data.total
+        } else if (Array.isArray(res.data)) {
+            searchResults.value = res.data
+            total.value = res.data.length
+        }
     }
     showSearchResults.value = true
     loading.value = false
@@ -99,6 +99,8 @@ const handleSearch = async () => {
 
     loading.value = true
     const params = {
+        page: currentPage.value,
+        pageSize: pageSize.value,
         type: filterType.value || undefined
     }
     if (select.value === '1') {
@@ -110,7 +112,13 @@ const handleSearch = async () => {
     }
     const res = await getProductsList(params)
     if (res.code === 0 || res.code === 200) {
-        searchResults.value = res.data.list || res.data
+        if (res.data && Array.isArray(res.data.list)) {
+            searchResults.value = res.data.list
+            total.value = res.data.total
+        } else if (Array.isArray(res.data)) {
+            searchResults.value = res.data
+            total.value = res.data.length
+        }
     }
     showSearchResults.value = true
     loading.value = false
@@ -236,18 +244,17 @@ const closeDetail = () => {
 // 产品类型标签样式
 const getTypeTag = (type) => {
     const map = {
-        raw_material: '',
+        '茶饮原料': '',
-        packaging: 'success',
+        '包装物料': 'success',
-        equipment: 'warning',
+        '设备器具': 'warning'
-        cleaning: 'info',
-        promote: 'danger'
     }
     return map[type] || 'info'
 }
 
-// 页码变化
+// 页码变化（服务端分页：重新请求后端）
 const handleCurrentChange = (val) => {
     currentPage.value = val
+    fetchData(val)
 }
 
 // 检查权限
@@ -267,8 +274,8 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
                     class="products-search-with-select" @keyup.enter="handleSearch">
                     <template #prepend>
                         <el-select v-model="select" placeholder="请选择" style="width: 115px">
-                            <el-option label="ID" value="1" />
+                            <el-option label="产品编号" value="1" />
-                            <el-option label="名称" value="2" />
+                            <el-option label="产品名称" value="2" />
                             <el-option label="供应商" value="3" />
                         </el-select>
                     </template>
@@ -286,11 +293,9 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
             <div class="filter-row">
                 <span class="filter-label">筛选条件：</span>
                 <el-select v-model="filterType" placeholder="产品类型" clearable style="width: 140px; margin-right: 12px;">
-                    <el-option label="原材料" value="raw_material" />
+                    <el-option label="茶饮原料" value="茶饮原料" />
-                    <el-option label="包装材料" value="packaging" />
+                    <el-option label="包装物料" value="包装物料" />
-                    <el-option label="设备器具" value="equipment" />
+                    <el-option label="设备器具" value="设备器具" />
-                    <el-option label="清洁用品" value="cleaning" />
-                    <el-option label="宣传物料" value="promote" />
                 </el-select>
             </div>
         </div>
@@ -306,12 +311,12 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
 
             <div v-else>
                 <div class="list-header">
-                    <span class="total-count">共找到 {{ searchResults.length }} 条记录</span>
+                    <span class="total-count">共找到 {{ total }} 条记录</span>
                 </div>
 
                 <el-table :data="paginatedData" v-loading="loading" border style="width: 100%"
                     @row-dblclick="handleRowDblClick" row-class-name="clickable-row">
-                    <el-table-column prop="id" label="ID" width="70" />
+                    <el-table-column prop="id" label="产品编号" width="90" />
                     <el-table-column prop="name" label="产品名称" min-width="120" />
                     <el-table-column prop="type" label="产品类型" width="110">
                         <template #default="{ row }">
@@ -342,7 +347,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
                     <el-pagination
                         v-model:current-page="currentPage"
                         :page-size="pageSize"
-                        :total="searchResults.length"
+                        :total="total"
                         layout="prev, pager, next"
                         prev-text="上一页"
                         next-text="下一页"
@@ -362,11 +367,9 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
 
                 <el-form-item label="产品类型" required>
                     <el-select v-model="form.type" placeholder="请选择产品类型" style="width: 100%;">
-                        <el-option label="原材料" value="raw_material" />
+                        <el-option label="茶饮原料" value="茶饮原料" />
-                        <el-option label="包装材料" value="packaging" />
+                        <el-option label="包装物料" value="包装物料" />
-                        <el-option label="设备器具" value="equipment" />
+                        <el-option label="设备器具" value="设备器具" />
-                        <el-option label="清洁用品" value="cleaning" />
-                        <el-option label="宣传物料" value="promote" />
                     </el-select>
                 </el-form-item>
 
@@ -428,7 +431,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
             </div>
             <template #footer>
                 <el-button @click="closeDetail">关闭</el-button>
-                <el-button type="primary" @click="(() => { const d = currentDetail; closeDetail(); editProduct(d) })()">编辑</el-button>
+                <el-button type="primary" @click="(() => { const d = currentDetail; closeDetail(); editProduct(d) })()" v-if="canUpdate">编辑</el-button>
             </template>
         </el-dialog>
 

src/components/service.vue

@@ -11,7 +11,7 @@ import {
 } from '../api/service'
 import { getSimpleCustomerList } from '../api/customer'
 import { getSimpleEmployeeList } from '../api/employee'
-import { hasPermission, getUserInfo } from '../store/user'
+import { hasPermission, getUserInfo, getRoleLevel } from '../store/user'
 import { formatDate } from '../utils/date'
 
 const form = reactive({
@@ -32,6 +32,8 @@ const showSearchResults = ref(false)
 const showAddForm = ref(false)
 const isEditMode = ref(false)
 const currentServiceId = ref(null)
+const showDetailDialog = ref(false)
+const currentDetail = ref(null)
 const loading = ref(false)
 const customerList = ref([])
 const employeeList = ref([])
@@ -39,6 +41,7 @@ const employeeList = ref([])
 // 分页相关
 const currentPage = ref(1)
 const pageSize = ref(10)
+const total = ref(0)
 
 // 状态映射
 const statusMap = {
@@ -73,37 +76,31 @@ watch(() => form.handle_status, (val) => {
     }
 })
 
-// 监听筛选变化
+// 监听筛选变化（与 user.vue 一致）
 watch(filterStatus, () => {
     currentPage.value = 1
     handleSearch()
 })
 
-// 监听搜索结果变化，重置页码
+// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
-watch(searchResults, () => {
+const paginatedData = computed(() => searchResults.value)
-    currentPage.value = 1
-})
 
-const filteredResults = computed(() => {
+// 获取售后列表（服务端分页）
-    if (!isOperationsManager.value) return searchResults.value
+const fetchData = async (page) => {
-    return searchResults.value.filter(row => {
-        return row.responsible_user_id != null && Number(row.responsible_user_id) === Number(currentUserId.value)
-    })
-})
-
-// 分页后的数据
-const paginatedData = computed(() => {
-    const start = (currentPage.value - 1) * pageSize.value
-    const end = start + pageSize.value
-    return filteredResults.value.slice(start, end)
-})
-
-// 获取售后列表
-const fetchData = async () => {
     loading.value = true
-    const res = await getServiceList()
+    const params = {
+        page: page || currentPage.value,
+        pageSize: pageSize.value
+    }
+    const res = await getServiceList(params)
     if (res.code === 0 || res.code === 200) {
-        searchResults.value = res.data.list || res.data
+        if (res.data && Array.isArray(res.data.list)) {
+            searchResults.value = res.data.list
+            total.value = res.data.total
+        } else if (Array.isArray(res.data)) {
+            searchResults.value = res.data
+            total.value = res.data.length
+        }
     }
     showSearchResults.value = true
     loading.value = false
@@ -116,22 +113,44 @@ const handleSearch = async () => {
         cancelAdd()
     }
 
+    currentPage.value = 1
     loading.value = true
     const params = {
+        page: 1,
+        pageSize: pageSize.value,
         handle_status: filterStatus.value || undefined
     }
-    if (select.value === '1') {
+    // 只在有搜索内容时才添加搜索参数（与 user.vue 一致）
-        params.id = Number(search.value)
+    if (search.value) {
-    } else if (select.value === '2') {
+        if (select.value === '1') {
-        params.customer_id = search.value
+            params.id = Number(search.value)
-    } else if (select.value === '3') {
+        } else if (select.value === '2') {
-        params.feedback = search.value
+            params.customer_id = search.value
-    } else if (select.value === '4') {
+        } else if (select.value === '3') {
-        params.customer_name = search.value
+            params.feedback = search.value
+        } else if (select.value === '4') {
+            params.customer_name = search.value
+        }
     }
-    const res = await getServiceList(params)
+    try {
-    if (res.code === 0 || res.code === 200) {
+        const res = await getServiceList(params)
-        searchResults.value = res.data.list || res.data
+        if (res.code === 0 || res.code === 200) {
+            if (res.data && Array.isArray(res.data.list)) {
+                searchResults.value = res.data.list
+                total.value = res.data.total
+            } else if (Array.isArray(res.data)) {
+                searchResults.value = res.data
+                total.value = res.data.length
+            }
+        } else {
+            console.warn('[service] handleSearch 响应异常:', res)
+            searchResults.value = []
+            total.value = 0
+        }
+    } catch (e) {
+        console.error('[service] handleSearch 请求失败:', e)
+        searchResults.value = []
+        total.value = 0
     }
     showSearchResults.value = true
     loading.value = false
@@ -152,6 +171,18 @@ const clearSearch = () => {
     resetSearch()
 }
 
+// 双击行查看详情
+const handleRowDblClick = (row) => {
+    currentDetail.value = { ...row }
+    showDetailDialog.value = true
+}
+
+// 关闭详情弹窗
+const closeDetail = () => {
+    showDetailDialog.value = false
+    currentDetail.value = null
+}
+
 // 清空表单
 const resetForm = () => {
     form.customer_id = ''
@@ -253,9 +284,10 @@ const cancelAdd = () => {
     showSearchResults.value = true
 }
 
-// 页码变化
+// 页码变化（服务端分页：重新请求后端）
 const handleCurrentChange = (val) => {
     currentPage.value = val
+    fetchData(val)
 }
 
 // 检查权限
@@ -265,14 +297,27 @@ const canDelete = computed(() => hasPermission('after_sale', 'delete'))
 const canOperate = computed(() => canUpdate.value || canDelete.value)
 
 const isOperationsManager = computed(() => getUserInfo()?.departmentName === 'operations_manager')
+//是否是管理员
+const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
+
+// 是否是一般专员（role_level === 4）
+const isGeneralStaff = computed(() => getRoleLevel() === 4)
+
+// 运营部专员：锁定处理人员为自己
+const isOperationsStaff = computed(() => isOperationsManager.value && isGeneralStaff.value)
+
 const currentUserId = computed(() => getUserInfo()?.id)
 
+
+
 const canEditRow = (row) => {
   if (!canUpdate.value) return false
+  if (getUserInfo()?.employee_id !== row.employee_id) return false
   return true
 }
 const canDeleteRow = (row) => {
   if (!canDelete.value) return false
+  if (getUserInfo()?.employee_id !== row.employee_id) return false
   return true
 }
 
@@ -287,8 +332,8 @@ const canDeleteRow = (row) => {
                     class="service-search-with-select" @keyup.enter="handleSearch">
                     <template #prepend>
                         <el-select v-model="select" placeholder="请选择" style="width: 115px">
-                            <el-option label="编号" value="1" />
+                            <el-option label="售后编号" value="1" />
-                            <el-option label="客户ID" value="2" />
+                            <el-option label="客户编号" value="2" />
                             <el-option label="客户姓名" value="4" />
                             <el-option label="反馈内容" value="3" />
                         </el-select>
@@ -325,11 +370,11 @@ const canDeleteRow = (row) => {
 
             <div v-else>
                 <div class="list-header">
-                    <span class="total-count">共找到 {{ searchResults.length }} 条记录</span>
+                    <span class="total-count">共找到 {{ total }} 条记录</span>
                 </div>
 
-                <el-table :data="paginatedData" v-loading="loading" border style="width: 100%">
+                <el-table :data="paginatedData" v-loading="loading" border style="width: 100%" @row-dblclick="handleRowDblClick" row-class-name="clickable-row">
-                    <el-table-column prop="id" label="编号" width="70" />
+                    <el-table-column prop="id" label="售后编号" width="90" />
                     <el-table-column prop="customer_name" label="客户" width="100">
                         <template #default="{ row }">
                             {{ row.customer_name || row.customer_id }}
@@ -367,7 +412,7 @@ const canDeleteRow = (row) => {
                     <el-pagination
                         v-model:current-page="currentPage"
                         :page-size="pageSize"
-                        :total="filteredResults.length"
+                        :total="total"
                         layout="prev, pager, next"
                         prev-text="上一页"
                         next-text="下一页"
@@ -377,6 +422,29 @@ const canDeleteRow = (row) => {
             </div>
         </div>
 
+        <!-- 售后详情弹窗 -->
+        <el-dialog v-model="showDetailDialog" title="售后详情" width="700px" @close="closeDetail">
+            <div v-if="currentDetail" class="detail-content">
+                <el-descriptions :column="2" border>
+                    <el-descriptions-item label="售后编号">{{ currentDetail.id }}</el-descriptions-item>
+                    <el-descriptions-item label="客户">{{ currentDetail.customer_name || currentDetail.customer_id }}</el-descriptions-item>
+                    <el-descriptions-item label="业务员">{{ currentDetail.employee_name || currentDetail.employee_id || '—' }}</el-descriptions-item>
+                    <el-descriptions-item label="处理状态">
+                        <el-tag :type="statusMap[currentDetail.handle_status]">{{ currentDetail.handle_status }}</el-tag>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="售后日期">{{ formatDate(currentDetail.service_date) }}</el-descriptions-item>
+                    <el-descriptions-item label="负责人">{{ currentDetail.employee_name || '—' }}</el-descriptions-item>
+                    <el-descriptions-item label="反馈内容" :span="2">{{ currentDetail.feedback || '无' }}</el-descriptions-item>
+                    <el-descriptions-item label="处理方式" :span="2">{{ currentDetail.handle_method || '无' }}</el-descriptions-item>
+                    <el-descriptions-item label="备注" :span="2">{{ currentDetail.remark || '无' }}</el-descriptions-item>
+                </el-descriptions>
+            </div>
+            <template #footer>
+                <el-button @click="closeDetail">关闭</el-button>
+                <el-button type="primary" @click="(() => { const d = currentDetail; closeDetail(); editService(d) })()" v-if="canUpdate && getUserInfo()?.employee_id === currentDetail?.employee_id">编辑</el-button>
+            </template>
+        </el-dialog>
+
         <!-- 新增/编辑售后表单 -->
         <div v-if="showAddForm" class="service-info-label">
             <el-divider content-position="left">{{ isEditMode ? '编辑售后记录' : '新增售后' }}</el-divider>
@@ -405,9 +473,10 @@ const canDeleteRow = (row) => {
                 </el-form-item>
 
                 <el-form-item label="处理业务员">
-                    <el-select v-model="form.employee_id" placeholder="请选择业务员" style="width: 100%;" filterable clearable>
+                    <el-select v-model="form.employee_id" placeholder="请选择业务员" style="width: 100%;" filterable clearable :disabled="isOperationsStaff">
                         <el-option v-for="e in employeeList" :key="e.id" :label="`${e.id} - ${e.name}`" :value="e.id" />
                     </el-select>
+                    <div class="field-hint" v-if="isOperationsStaff">专员无法修改处理人员，已锁定为自己</div>
                 </el-form-item>
 
                 <el-form-item label="处理方式">
@@ -490,4 +559,19 @@ const canDeleteRow = (row) => {
   padding-top: 15px;
   border-top: 1px solid #eee;
 }
+
+.clickable-row {
+  cursor: pointer;
+}
+
+.detail-content {
+  padding: 10px 0;
+}
+
+.field-hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+  line-height: 1.4;
+}
 </style>

src/components/supplier.vue

@@ -37,9 +37,10 @@ const currentDetail = ref(null)
 // 分页相关
 const currentPage = ref(1)
 const pageSize = ref(10)
+const total = ref(0)
 
 // 供应商类型
-const supplierTypes = ['原材料', '包装', '设备']
+const supplierTypes = ['原料', '包装', '设备']
 
 onMounted(() => {
     fetchData()
@@ -51,24 +52,25 @@ watch([filterType, filterStatus], () => {
     handleSearch()
 })
 
-// 监听搜索结果变化
+// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
-watch(searchResults, () => {
+const paginatedData = computed(() => searchResults.value)
-    currentPage.value = 1
-})
 
-// 分页后的数据
+// 获取供应商列表（服务端分页）
-const paginatedData = computed(() => {
+const fetchData = async (page) => {
-    const start = (currentPage.value - 1) * pageSize.value
-    const end = start + pageSize.value
-    return searchResults.value.slice(start, end)
-})
-
-// 获取供应商列表
-const fetchData = async () => {
     loading.value = true
-    const res = await getSupplierList()
+    const params = {
+        page: page || currentPage.value,
+        pageSize: pageSize.value
+    }
+    const res = await getSupplierList(params)
     if (res.code === 0 || res.code === 200) {
-        searchResults.value = res.data.list || res.data
+        if (res.data && Array.isArray(res.data.list)) {
+            searchResults.value = res.data.list
+            total.value = res.data.total
+        } else if (Array.isArray(res.data)) {
+            searchResults.value = res.data
+            total.value = res.data.length
+        }
     }
     showSearchResults.value = true
     loading.value = false
@@ -83,6 +85,8 @@ const handleSearch = async () => {
 
     loading.value = true
     const params = {
+        page: currentPage.value,
+        pageSize: pageSize.value,
         type: filterType.value || undefined,
         status: filterStatus.value !== '' ? filterStatus.value : undefined
     }
@@ -96,7 +100,13 @@ const handleSearch = async () => {
     }
     const res = await getSupplierList(params)
     if (res.code === 0 || res.code === 200) {
-        searchResults.value = res.data.list || res.data
+        if (res.data && Array.isArray(res.data.list)) {
+            searchResults.value = res.data.list
+            total.value = res.data.total
+        } else if (Array.isArray(res.data)) {
+            searchResults.value = res.data
+            total.value = res.data.length
+        }
     }
     showSearchResults.value = true
     loading.value = false
@@ -217,9 +227,10 @@ const closeDetail = () => {
     currentDetail.value = null
 }
 
-// 页码变化
+// 页码变化（服务端分页：重新请求后端）
 const handleCurrentChange = (val) => {
     currentPage.value = val
+    fetchData(val)
 }
 
 // 检查权限
@@ -239,8 +250,8 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
                     class="supplier-search-with-select" @keyup.enter="handleSearch">
                     <template #prepend>
                         <el-select v-model="select" placeholder="请选择" style="width: 115px">
-                            <el-option label="ID" value="1" />
+                            <el-option label="供应商编号" value="1" />
-                            <el-option label="名称" value="2" />
+                            <el-option label="供应商名称" value="2" />
                         </el-select>
                     </template>
                     <template #append>
@@ -277,12 +288,12 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
 
             <div v-else>
                 <div class="list-header">
-                    <span class="total-count">共找到 {{ searchResults.length }} 条记录</span>
+                    <span class="total-count">共找到 {{ total }} 条记录</span>
                 </div>
 
                 <el-table :data="paginatedData" v-loading="loading" border style="width: 100%"
                     @row-dblclick="handleRowDblClick" row-class-name="clickable-row">
-                    <el-table-column prop="id" label="ID" width="70" />
+                    <el-table-column prop="id" label="供应商编号" width="100" />
                     <el-table-column prop="name" label="供应商名称" min-width="150" />
                     <el-table-column prop="contact" label="联系人" width="100" />
                     <el-table-column prop="phone" label="联系电话" width="130" />
@@ -312,7 +323,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
                     <el-pagination
                         v-model:current-page="currentPage"
                         :page-size="pageSize"
-                        :total="searchResults.length"
+                        :total="total"
                         layout="prev, pager, next"
                         prev-text="上一页"
                         next-text="下一页"
@@ -335,7 +346,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
                 </el-form-item>
 
                 <el-form-item label="联系电话">
-                    <el-input v-model="form.phone" placeholder="请输入联系电话" />
+                    <el-input v-model="form.phone" placeholder="请输入联系电话" type="tel" maxlength="11" oninput="this.value=this.value.replace(/\D/g,'')" />
                 </el-form-item>
 
                 <el-form-item label="地址">
@@ -370,7 +381,7 @@ const canOperate = computed(() => canUpdate.value || canDelete.value)
         <el-dialog v-model="showDetailDialog" title="供应商详情" width="650px" @close="closeDetail">
             <div v-if="currentDetail" class="detail-content">
                 <el-descriptions :column="2" border>
-                    <el-descriptions-item label="供应商ID">{{ currentDetail.id }}</el-descriptions-item>
+                    <el-descriptions-item label="供应商编号">{{ currentDetail.id }}</el-descriptions-item>
                     <el-descriptions-item label="供应商名称">{{ currentDetail.name }}</el-descriptions-item>
                     <el-descriptions-item label="联系人">{{ currentDetail.contact || '无' }}</el-descriptions-item>
                     <el-descriptions-item label="联系电话">{{ currentDetail.phone || '无' }}</el-descriptions-item>

src/components/user.vue

@@ -10,7 +10,7 @@ import {
     deleteUserAPI
 } from '../api/user'
 import { getSimpleEmployeeList, getDepartmentList } from '../api/employee'
-import { hasPermission } from '../store/user'
+import { hasPermission, getUserInfo, getRoleLevel } from '../store/user'
 import { formatDateTime } from '../utils/date'
 import { DEPARTMENT_LIST } from '../constants/departments'
 
@@ -19,7 +19,8 @@ const form = reactive({
     password: '',
     department_id: 2,
     employee_id: null,
-    is_active: 1
+    is_active: 1,
+    role_level: 4
 })
 
 const search = ref('')
@@ -44,6 +45,27 @@ const totalPages = ref(0)
 // 部门列表（动态加载，回退到常量）
 const deptList = ref([...DEPARTMENT_LIST])
 
+// 角色级别选项（根据部门动态变化）
+const roleLevelOptions = computed(() => {
+  const dept = deptList.value.find(d => d.id === form.department_id)
+  if (dept?.name === 'general_manager') {
+    // 总经理办公室只能选择副总经理
+    return [{ value: 2, label: '副总经理' }]
+  }
+  // 一般部门没有总经理，只有部门经理以下三级
+  return [
+    { value: 2, label: '部门经理' },
+    { value: 3, label: '部门副经理' },
+    { value: 4, label: '一般专员' }
+  ]
+})
+
+// 是否是总经理办公室部门
+const isGeneralManagerDept = computed(() => {
+  const dept = deptList.value.find(d => d.id === form.department_id)
+  return dept?.name === 'general_manager'
+})
+
 // 员工列表
 const employeeList = ref([])
 
@@ -67,6 +89,16 @@ watch([filterType, filterStatus], () => {
     handleSearch()
 })
 
+// 监听部门变化：总经理办公室自动锁定角色级别为副总经理(2)，一般部门重置为一般专员(4)
+watch(() => form.department_id, (val) => {
+    const dept = deptList.value.find(d => d.id === val)
+    if (dept?.name === 'general_manager') {
+        form.role_level = 2 // 副总经理
+    } else {
+        form.role_level = 4 // 默认一般专员
+    }
+})
+
 // 监听搜索结果变化（服务端分页：不重置页码，避免翻页后被重置回第 1 页）
 
 // 分页后的数据（服务端已分页）
@@ -74,12 +106,34 @@ const paginatedData = computed(() => searchResults.value)
 
 // 获取员工列表（用于下拉选择，改用 simple 接口：无数据范围限制，仅返还在职员工基本信息）
 const fetchEmployees = async () => {
-    const res = await getSimpleEmployeeList()
+    const params = {}
+    // 一般专员只能选择同级别或更低级别的员工
+    if (currentRoleLevel.value === 4) {
+        params.max_role_level = 4
+    }
+    const res = await getSimpleEmployeeList(params)
     if (res.code === 0 || res.code === 200) {
         employeeList.value = res.data
     }
 }
 
+// 过滤后的部门列表（一般专员不能选择总经理办公室）
+const filteredDeptList = computed(() => {
+    const level = currentRoleLevel.value
+    if (level === 4) {
+        // 一般专员不能选择总经理办公室
+        return deptList.value.filter(d => d.name !== 'general_manager')
+    }
+    return deptList.value
+})
+
+// 过滤后的员工列表（不能选择比自己职位高的员工）
+const filteredEmployeeList = computed(() => {
+    const level = currentRoleLevel.value
+    // 后端已经通过max_role_level参数过滤了，直接返回
+    return employeeList.value
+})
+
 // 获取用户列表
 const fetchData = async (page) => {
     loading.value = true
@@ -149,6 +203,7 @@ const resetForm = () => {
     form.department_id = 2
     form.employee_id = null
     form.is_active = 1
+    form.role_level = 4
     isEditMode.value = false
     currentUserId.value = null
 }
@@ -169,6 +224,7 @@ const editUser = (row) => {
     form.department_id = row.department_id
     form.employee_id = row.employee_id
     form.is_active = row.is_active
+    form.role_level = row.role_level || 4
     showAddForm.value = true
     showSearchResults.value = false
 }
@@ -188,7 +244,8 @@ const saveUser = async () => {
         username: form.username,
         department_id: form.department_id,
         employee_id: form.employee_id,
-        is_active: form.is_active
+        is_active: form.is_active,
+        role_level: form.role_level
     }
     if (!isEditMode.value) {
         formData.password = form.password
@@ -267,6 +324,24 @@ const handleCurrentChange = (val) => {
 
 // 检查权限
 const canManage = computed(() => hasPermission('user', 'manage'))
+const currentRoleLevel = computed(() => getRoleLevel())
+const isGeneralManager = computed(() => currentRoleLevel.value === 1)
+
+// 角色级别显示
+const getRoleLevelName = (level) => {
+  if (level === 1) return '总经理'
+  if (level === 2) return '部门经理'
+  if (level === 3) return '部门副经理'
+  return '一般专员'
+}
+
+const getRoleLevelTagType = (level) => {
+  const l = Number(level) || 4
+  if (l === 1) return 'danger'
+  if (l === 2) return 'warning'
+  if (l === 3) return 'success'
+  return 'info'
+}
 
 </script>
 
@@ -281,7 +356,7 @@ const canManage = computed(() => hasPermission('user', 'manage'))
                         <el-select v-model="select" placeholder="请选择" style="width: 115px">
                             <el-option label="用户名" value="1" />
                             <el-option label="真实姓名" value="2" />
-                            <el-option label="ID" value="3" />
+                            <el-option label="用户编号" value="3" />
                         </el-select>
                     </template>
                     <template #append>
@@ -323,7 +398,7 @@ const canManage = computed(() => hasPermission('user', 'manage'))
 
                 <el-table :data="paginatedData" v-loading="loading" border style="width: 100%"
                     @row-dblclick="handleRowDblClick" row-class-name="clickable-row">
-                    <el-table-column prop="id" label="ID" width="80" />
+                    <el-table-column prop="id" label="用户编号" width="90" />
                     <el-table-column prop="username" label="用户名" width="120" />
                     <el-table-column prop="real_name" label="真实姓名" min-width="120">
                         <template #default="{ row }">
@@ -335,6 +410,18 @@ const canManage = computed(() => hasPermission('user', 'manage'))
                             {{ row.dept_desc || '-' }}
                         </template>
                     </el-table-column>
+                    <el-table-column prop="role_level" label="角色级别" width="110">
+                        <template #default="{ row }">
+                            <el-tag :type="getRoleLevelTagType(row.role_level)">
+                                {{ getRoleLevelName(row.role_level) }}
+                            </el-tag>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="employee_id" label="关联员工" min-width="140">
+                        <template #default="{ row }">
+                            {{ row.employee_id ? `${row.employee_id} - ${row.real_name || '-'}` : '-' }}
+                        </template>
+                    </el-table-column>
                     <el-table-column prop="is_active" label="状态" width="100">
                         <template #default="{ row }">
                             <el-tag :type="row.is_active === 1 ? 'success' : 'danger'">
@@ -385,14 +472,17 @@ const canManage = computed(() => hasPermission('user', 'manage'))
 
                 <el-form-item label="关联员工">
                     <el-select v-model="form.employee_id" placeholder="请选择关联员工" style="width: 100%;" filterable clearable>
-                        <el-option v-for="emp in employeeList" :key="emp.id" :label="`${emp.id} - ${emp.name}`" :value="emp.id" />
+                        <el-option v-for="emp in filteredEmployeeList" :key="emp.id" :label="`${emp.id} - ${emp.name}`" :value="emp.id" />
                     </el-select>
+                    <div class="field-hint" v-if="currentRoleLevel === 4">一般专员只能关联同级别或更低级别的员工</div>
                 </el-form-item>
 
                 <el-form-item label="所属部门" required>
                     <el-select v-model="form.department_id" placeholder="请选择部门" style="width: 100%;">
-                        <el-option v-for="dept in deptList" :key="dept.id" :label="dept.description" :value="dept.id" />
+                        <el-option v-for="dept in filteredDeptList" :key="dept.id" :label="dept.description" :value="dept.id" />
                     </el-select>
+                    <div class="field-hint" v-if="currentRoleLevel === 4">一般专员不能选择总经理办公室</div>
+                    <div class="field-hint" v-else-if="isEditMode && form.employee_id">修改部门将同步更新关联员工的部门</div>
                 </el-form-item>
 
                 <el-form-item label="用户状态" required>
@@ -402,6 +492,20 @@ const canManage = computed(() => hasPermission('user', 'manage'))
                     </el-radio-group>
                 </el-form-item>
 
+                <el-form-item label="角色级别" required>
+                    <el-select v-model="form.role_level" placeholder="请选择角色级别" style="width: 100%;">
+                        <el-option
+                            v-for="item in roleLevelOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                            :disabled="item.value < currentRoleLevel"
+                        />
+                    </el-select>
+                    <div class="field-hint" v-if="isGeneralManagerDept">总经理办公室只能选择副总经理，总经理是系统预设的</div>
+                    <div class="field-hint" v-else>一般部门没有总经理级别，不能创建比自己级别高的用户</div>
+                </el-form-item>
+
                 <el-form-item>
                     <el-button type="primary" @click="saveUser">保存</el-button>
                     <el-button type="danger" @click="cancelAdd">取消</el-button>
@@ -414,11 +518,16 @@ const canManage = computed(() => hasPermission('user', 'manage'))
         <el-dialog v-model="showDetailDialog" title="用户详情" width="550px" @close="closeDetail">
             <div v-if="currentDetail" class="detail-content">
                 <el-descriptions :column="2" border>
-                    <el-descriptions-item label="用户ID">{{ currentDetail.id }}</el-descriptions-item>
+                    <el-descriptions-item label="用户编号">{{ currentDetail.id }}</el-descriptions-item>
                     <el-descriptions-item label="用户名">{{ currentDetail.username }}</el-descriptions-item>
                     <el-descriptions-item label="真实姓名">{{ currentDetail.real_name || '-' }}</el-descriptions-item>
                     <el-descriptions-item label="部门">{{ currentDetail.dept_desc || '-' }}</el-descriptions-item>
-                    <el-descriptions-item label="关联员工">{{ currentDetail.employee_id || '-' }}</el-descriptions-item>
+                    <el-descriptions-item label="角色级别">
+                        <el-tag :type="getRoleLevelTagType(currentDetail.role_level)">
+                            {{ getRoleLevelName(currentDetail.role_level) }}
+                        </el-tag>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="关联员工">{{ currentDetail.employee_id ? `${currentDetail.employee_id} - ${currentDetail.real_name || '-'}` : '-' }}</el-descriptions-item>
                     <el-descriptions-item label="状态">
                         <el-tag :type="currentDetail.is_active === 1 ? 'success' : 'danger'">
                             {{ currentDetail.is_active === 1 ? '启用' : '禁用' }}
@@ -437,6 +546,13 @@ const canManage = computed(() => hasPermission('user', 'manage'))
 </template>
 
 <style scoped>
+.field-hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
 .user-container {
   padding: 20px;
 }

src/constants/departments.js

@@ -16,6 +16,7 @@ export const DEPARTMENT_LIST = [
   { id: 4, name: 'operations_manager', description: '运营部' },
   { id: 5, name: 'procurement_manager', description: '采购部' },
   { id: 6, name: 'finance', description: '财务部' },
+  { id: 7, name: 'hr', description: '人力资源部' },
 ]
 
 /** 描述文本列表（用于 employee 表单的部门下拉选择） */

src/router.js

@@ -24,7 +24,7 @@ const routes = [
             { path: "service", component: Service, meta: { permission: 'after_sale:read' } },
             { path: "products", component: Products, meta: { permission: 'product:read' } },
             { path: "employee", component: Employee, meta: { permission: 'employee:read' } },
-            { path: "user", component: User, meta: { permission: 'user:manage' } },
+            { path: "user", component: User, meta: { permission: 'user:manage', requireManager: true } },
             { path: "supplier", component: Supplier, meta: { permission: 'supplier:read' } }
         ],
     },
@@ -58,12 +58,21 @@ router.beforeEach((to, from, next) => {
 
     // 检查路由权限
     if (to.meta.permission) {
-        const [resource, action] = to.meta.permission.split(':')
         const userInfo = JSON.parse(localStorage.getItem('userInfo') || 'null')
         if (!userInfo?.permissions?.includes(to.meta.permission)) {
             next('/panel/home')
             return
         }
+
+        // 用户管理页面：信息技术部所有人都可以访问，其他部门需要manager级别
+        if (to.meta.requireManager) {
+            const roleLevel = userInfo?.role_level || 4
+            const deptName = userInfo?.departmentName
+            if (deptName !== 'admin' && roleLevel > 2) {
+                next('/panel/home')
+                return
+            }
+        }
     }
 
     next()

src/store/user.js

@@ -54,6 +54,21 @@ export const hasPermission = (resource, action) => {
   return state.userInfo.permissions.includes(permission)
 }
 
+// 获取当前用户角色级别
+export const getRoleLevel = () => {
+  return state.userInfo?.role_level || 4
+}
+
+// 是否为管理层（总经理或部门经理，level <= 2）
+export const isManager = () => {
+  return getRoleLevel() <= 2
+}
+
+// 是否为总经理
+export const isGeneralManager = () => {
+  return getRoleLevel() === 1
+}
+
 // 获取当前用户信息
 export const getUserInfo = () => state.userInfo
 
@@ -68,5 +83,8 @@ export default {
   fetchUserInfo,
   hasPermission,
   getUserInfo,
-  getToken
+  getToken,
+  getRoleLevel,
+  isManager,
+  isGeneralManager
 }