push
This commit is contained in:
ChoChoX
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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="section-header">
|
||||
<div class="header-line"></div>
|
||||
<h2 class="section-title">雪王简介</h2>
|
||||
<div class="header-line"></div>
|
||||
<!-- 功能卡片网格 -->
|
||||
<div class="card-grid">
|
||||
<div
|
||||
v-for="card in visibleCards"
|
||||
:key="card.route"
|
||||
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">
|
||||
<img src="/mixue.png" alt="雪王" class="xuewang-img">
|
||||
<!-- 快捷信息 -->
|
||||
<div class="info-section">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" class="info-card">
|
||||
<template #header>
|
||||
<div class="info-card-header">
|
||||
<span>我的信息</span>
|
||||
</div>
|
||||
<div class="txt-wrapper">
|
||||
<div class="quote">
|
||||
"我是手拿冰淇凌权杖的雪王"
|
||||
<br>
|
||||
"一生只爱冰淇凌与茶"
|
||||
</template>
|
||||
<div class="info-item">
|
||||
<span class="info-label">用户名</span>
|
||||
<span>{{ userInfo?.username }}</span>
|
||||
</div>
|
||||
<ul class="info-list">
|
||||
<li v-for="(item, index) in snowKingInfo" :key="index">
|
||||
<span class="info-label">{{ item.label }}</span>
|
||||
<span class="info-divider"></span>
|
||||
<span class="info-value">{{ item.value }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="info-item">
|
||||
<span class="info-label">部门</span>
|
||||
<span>{{ userInfo?.departmentDesc }}</span>
|
||||
</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([
|
||||
{ label: '生日', value: '11月22日' },
|
||||
{ label: '性格', value: '正直、友善、热情、进取' },
|
||||
{ label: '职位', value: '蜜雪冰城首席品控官兼全球品牌代言人' },
|
||||
{ label: '口头禅', value: '你爱我，我爱你，蜜雪冰城甜蜜蜜' },
|
||||
{ label: '爱好', value: '唱歌跳舞，研究冰淇淋与茶的新奇吃法' }
|
||||
])
|
||||
const router = useRouter()
|
||||
const userInfo = computed(() => getUserInfo())
|
||||
const roleLevel = computed(() => getRoleLevel())
|
||||
|
||||
// 主题色
|
||||
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 {
|
||||
min-height: 100%;
|
||||
.workspace-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ========== 视频横幅 ========== */
|
||||
.video-banner {
|
||||
position: relative;
|
||||
width: calc(100% + 40px);
|
||||
margin: -20px -20px 0 -20px;
|
||||
height: 300px;
|
||||
margin: -20px -20px 20px -20px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* ========== 简介区域 ========== */
|
||||
.intro-section {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.welcome-sub {
|
||||
margin: 0 0 4px 0;
|
||||
color: rgba(255,255,255,0.9);
|
||||
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: #303133;
|
||||
min-width: 70px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.info-divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: #E60012;
|
||||
margin: 0 16px;
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #606266;
|
||||
flex: 1;
|
||||
/* ========== 响应式 ========== */
|
||||
@media (max-width: 768px) {
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* ========== 响应式适配 ========== */
|
||||
@media (max-width: 900px) {
|
||||
.intro-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.pic-wrapper {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.txt-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.video-banner {
|
||||
height: 200px;
|
||||
.welcome-banner {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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,103 +33,56 @@ 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-menu
|
||||
:ellipsis="false"
|
||||
mode="horizontal"
|
||||
router
|
||||
class="header-menu"
|
||||
>
|
||||
<el-header class="app-header" :style="{ borderBottomColor: themeColor }">
|
||||
<div class="header-content">
|
||||
<!-- 左侧 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>
|
||||
</el-menu-item>
|
||||
<h1 class="logo-title" :style="{ color: themeColor }">蜜雪冰城管理系统</h1>
|
||||
<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>
|
||||
</div>
|
||||
</el-menu>
|
||||
</el-header>
|
||||
|
||||
<el-container>
|
||||
<!-- 侧边栏 -->
|
||||
<el-aside class="app-aside" :width="isCollapse ? '64px' : '200px'">
|
||||
<el-menu
|
||||
: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">
|
||||
<el-main class="app-main" :style="{ background: roleLevel <= 3 ? '#f5f7fa' : '#faf8f5' }">
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -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 {
|
||||
flex: 1;
|
||||
border-bottom: none !important;
|
||||
.header-content {
|
||||
display: flex;
|
||||
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 {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.logout-item:hover {
|
||||
color: #E60012 !important;
|
||||
}
|
||||
|
||||
/* ========== 侧边栏 ========== */
|
||||
.app-aside {
|
||||
transition: width 0.3s ease;
|
||||
background: #fff;
|
||||
border-right: 1px solid #eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aside-menu {
|
||||
height: 100%;
|
||||
.logout-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: none;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.aside-menu:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* 菜单项样式 */
|
||||
.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;
|
||||
.logout-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* ========== 主内容区 ========== */
|
||||
.app-main {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ========== 收缩动画 ========== */
|
||||
.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); }
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'">
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user