push

src/components/contract.vue

@@ -12,7 +12,7 @@ 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')
@@ -42,6 +42,18 @@ const isFranchiseManager = computed(() => getUserInfo()?.departmentName === 'fra
 //是否是管理员
 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'
@@ -544,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>
@@ -673,4 +686,11 @@ const canDeleteRow = (row) => {
 .detail-content {
   padding: 10px 0;
 }
+
+.field-hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+  line-height: 1.4;
+}
 </style>

src/components/employee.vue

@@ -11,7 +11,7 @@ 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, DEPARTMENT_LIST } from '../constants/departments'
@@ -28,7 +28,8 @@ const form = reactive({
     phone: '',
     email: '',
     status: 1,
-    remark: ''
+    remark: '',
+    role_level: 4 // 默认一般专员
 })
 
 const search = ref('')
@@ -60,7 +61,22 @@ const userForm = reactive({
     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: '一般专员' }
+    ]
 })
 
 // 部门列表
@@ -69,6 +85,18 @@ 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)
 
@@ -80,6 +108,16 @@ watch([filterStatus, filterDepartment], () => {
     handleSearch()
 })
 
+// 监听部门变化：总经理办公室自动锁定职位为副总经理，重置角色级别
+watch(() => form.department, (val) => {
+    if (val === '总经理办公室') {
+        form.position = '副总经理'
+        form.role_level = 2 // 副总经理
+    } else {
+        form.role_level = 4 // 默认一般专员
+    }
+})
+
 // 监听筛选变化时重置页码（服务端分页：已由 filterStatus watch 处理）
 // watch(searchResults 不再重置页码，避免翻页后被重置回第 1 页
 
@@ -175,6 +213,7 @@ const resetForm = () => {
     form.email = ''
     form.status = 1
     form.remark = ''
+    form.role_level = 4
     isEditMode.value = false
     currentEmployeeId.value = null
 }
@@ -220,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 {
@@ -355,7 +395,8 @@ const saveUserFromEmployee = async () => {
             password: userForm.password,
             department_id: userForm.department_id,
             employee_id: empId,
-            is_active: userForm.is_active
+            is_active: userForm.is_active,
+            role_level: userForm.role_level
         }
         await createUser(payload)
         ElMessage.success('用户创建成功')
@@ -377,6 +418,7 @@ const cancelCreateUser = () => {
     userForm.department_id = 2
     userForm.is_active = 1
     userForm.employee_id = null
+    userForm.role_level = 4
     showSearchResults.value = true
 }
 
@@ -387,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>
@@ -538,7 +612,23 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                     </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>
@@ -621,7 +711,7 @@ const showSalary = computed(() => ['总经理办公室', '财务部'].includes(g
                     <el-col :span="12">
                         <el-form-item label="所属部门">
                             <el-select v-model="userForm.department_id" placeholder="请选择部门" style="width: 100%;" disabled>
-                                <el-option v-for="dept in DEPARTMENT_LIST" :key="dept.id" :label="dept.description" :value="dept.id" />
+                                <el-option v-for="dept in filteredDeptListForUser" :key="dept.id" :label="dept.description" :value="dept.id" />
                             </el-select>
                         </el-form-item>
                     </el-col>
@@ -635,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>

src/components/home.vue

@@ -1,68 +1,156 @@
 <template>
-  <div class="home-container">
+  <div class="workspace-container">
     <!-- 顶部视频横幅 -->
     <div class="video-banner">
       <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="/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="/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/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({
@@ -300,6 +300,12 @@ const isOperationsManager = computed(() => getUserInfo()?.departmentName === 'op
 //是否是管理员
 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)
 
 
@@ -467,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="处理方式">
@@ -560,4 +567,11 @@ const canDeleteRow = (row) => {
 .detail-content {
   padding: 10px 0;
 }
+
+.field-hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+  line-height: 1.4;
+}
 </style>

src/components/user.vue

@@ -10,7 +10,7 @@ import {
     deleteUserAPI
 } from '../api/user'
 import { getSimpleEmployeeList, getDepartmentList } from '../api/employee'
-import { hasPermission, getUserInfo } 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,7 +324,24 @@ const handleCurrentChange = (val) => {
 
 // 检查权限
 const canManage = computed(() => hasPermission('user', 'manage'))
-const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
+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>
 
@@ -291,7 +365,7 @@ const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
                 </el-input>
 
                 <div class="search-buttons">
-                    <el-button color="#E60012" @click="addUser" v-if="canManage && !isAdmin">新增用户</el-button>
+                    <el-button color="#E60012" @click="addUser" v-if="canManage">新增用户</el-button>
                     <el-button type="default" @click="clearSearch">重置</el-button>
                 </div>
             </div>
@@ -336,6 +410,13 @@ const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
                             {{ 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 || '-'}` : '-' }}
@@ -356,7 +437,7 @@ const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
                     <el-table-column label="操作" width="150" fixed="right" v-if="canManage">
                         <template #default="{ row }">
                             <el-button link type="primary" @click="editUser(row)">编辑</el-button>
-                            <el-button link type="danger" @click="deleteUser(row.id)" v-if="!isAdmin">删除</el-button>
+                            <el-button link type="danger" @click="deleteUser(row.id)">删除</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
@@ -391,15 +472,17 @@ const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
 
                 <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="isEditMode && form.employee_id">修改部门将同步更新关联员工的部门</div>
+                    <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>
@@ -409,6 +492,20 @@ const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
                     </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>
@@ -425,6 +522,11 @@ const isAdmin = computed(() => getUserInfo()?.departmentName === 'admin')
                     <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="角色级别">
+                        <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'">

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
 }