ChoChoX/backmanagerweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ChoChoX:99e87a6e8c397e10a164589f28826e4befdfdec6
Branches Tags
ChoChoX:main ChoChoX:feature/full-integration
..
compare: ChoChoX:main
Branches Tags
ChoChoX:main ChoChoX:feature/full-integration

8 Commits
99e87a6e8c ... main

Author SHA1 Message Date
ChoChoX
9fe8130994 push 2026-06-30 23:10:56 +08:00
ChoChoX
8360cbea77 修复 2026-06-29 14:49:46 +08:00
ChoChoX
bd64fc6b0a 最后小修 2026-06-29 11:30:24 +08:00
ChoChoX
d9814bbf52 最后小修 2026-06-28 19:50:06 +08:00
ChoChoX
f68d26597e 完成 2026-06-28 14:03:30 +08:00
ChoChoX
27ca129096 暂存 2026-06-28 00:36:03 +08:00
ChoChoX
63b6cc93c6 Merge branch 'main' of https://chochox.asia/ChoChoX/backmanagerweb 2026-06-27 17:32:45 +08:00
ChoChoX
468b762e8e 更新使用说明文档 2026-06-25 21:54:08 +08:00
14 changed files with 1416 additions and 610 deletions
Expand all files Collapse all files

4
src/components/Login.vue
View File

@@ -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>

246
src/components/contract.vue
View File

@@ -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()
})
// 监听搜索结果变化，重置页码
watch(searchResults, () => {
// 监听筛选变化（与 user.vue 一致）
watch([filterType, filterStatus], () => {
currentPage.value = 1
handleSearch()
})
// 分页后的数据
const filteredResults = computed(() => {
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
})
})
// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
const paginatedData = computed(() => searchResults.value)
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 = {}
if (select.value === '1') {
params.id = Number(search.value)
} else if (select.value === '2') {
params.contract_name = search.value
const params = {
page: 1,
pageSize: pageSize.value
}
if (dateRange.value && dateRange.value.length === 2) {
params.effective_date_start = formatDate(dateRange.value[0])
params.effective_date_end = formatDate(dateRange.value[1])
// 只在有搜索内容时才添加搜索参数（与 user.vue 一致）
if (search.value) {
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)
if (res.code === 0 || res.code === 200) {
searchResults.value = res.data.list || res.data
try {
const res = await getContractList(params)
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="2" />
<el-option label="合同编号" value="1" />
<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="生效日期"
end-placeholder="到期日期" style="margin-left: 10px;" @change="handleDateChange" />
<el-select v-model="filterType" placeholder="合同类型" clearable style="width: 150px; margin-left: 10px;">
<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-column prop="id" label="编号" width="70" />
<el-table-column prop="contract_name" label="合同名称" min-width="180" />
<el-table :data="paginatedData" border style="width: 100%" @row-dblclick="handleRowDblClick" row-class-name="clickable-row">
<el-table-column prop="id" label="合同编号" width="90" />
<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>

57
src/components/customer.vue
View File

@@ -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(() => {
}))
})
// 分页后的数据
const paginatedData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
const end = start + pageSize.value
return searchResults.value.slice(start, end)
})
// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
const paginatedData = computed(() => searchResults.value)
onMounted(() => {
fetchData()
})
// 监听搜索结果变化，重置页码
watch(searchResults, () => {
currentPage.value = 1
})
// 获取客户列表
const fetchData = async () => {
// 获取客户列表（服务端分页）
const fetchData = async (page) => {
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="2" />
<el-option label="客户姓名" value="1" />
<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>

225
src/components/employee.vue
View File

@@ -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(() => {
// 确认：进入用户创建表单
openUserForm(res.data)
).then((action) => {
if (action === 'confirm') {
// 确认：进入用户创建表单
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.department_id = 2
userForm.name = employee.name || ''
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({
username: userForm.username,
password: userForm.password,
department_id: userForm.department_id,
employee_id: userForm.employee_id,
is_active: userForm.is_active
})
ElMessage.success('用户创建成功')
cancelCreateUser()
fetchData()
try {
const empId = linkedEmployeeId.value || userForm.employee_id
const payload = {
username: userForm.username,
password: userForm.password,
department_id: userForm.department_id,
employee_id: empId,
is_active: userForm.is_active,
role_level: userForm.role_level
}
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="2" />
<el-option label="部门" value="3" />
<el-option label="员工编号" value="1" />
<el-option label="员工姓名" value="2" />
</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-option label="信息技术部" :value="1" />
<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 v-model="userForm.department_id" placeholder="请选择部门" style="width: 100%;" disabled>
<el-option v-for="dept in filteredDeptListForUser" :key="dept.id" :label="dept.description" :value="dept.id" />
</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;
}

409
src/components/home.vue
View File

@@ -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="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="../../public/mixue.png" alt="雪王" class="xuewang-img">
</div>
<div class="txt-wrapper">
<div class="quote">
"我是手拿冰淇凌权杖的雪王"
<br>
"一生只爱冰淇凌与茶"
</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>
</div>
<!-- 快捷信息 -->
<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>
</template>
<div class="info-item">
<span class="info-label">用户名</span>
<span>{{ userInfo?.username }}</span>
</div>
<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: 900px) {
.intro-content {
flex-direction: column;
gap: 30px;
/* ========== 响应式 ========== */
@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}
.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>

253
src/components/panel.vue
View File

@@ -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-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">
<img src="../../public/logo.png" alt="logo" class="logo-img">
<h1 class="logo-title">蜜雪冰城管理系统</h1>
</el-menu-item>
<div class="logo-section">
<img src="/logo.png" alt="logo" class="logo-img">
<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>
</el-menu>
</div>
</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">
<router-view />
</el-main>
</el-container>
<!-- 主内容区 -->
<el-main class="app-main" :style="{ background: roleLevel <= 3 ? '#f5f7fa' : '#faf8f5' }">
<router-view />
</el-main>
</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 {
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>

89
src/components/products.vue
View File

@@ -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()
})
// 监听搜索结果变化，重置页码
watch(searchResults, () => {
currentPage.value = 1
})
// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
const paginatedData = computed(() => searchResults.value)
// 分页后的数据
const paginatedData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
const end = start + pageSize.value
return searchResults.value.slice(start, end)
})
// 获取产品列表
const fetchData = async () => {
// 获取产品列表（服务端分页）
const fetchData = async (page) => {
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',
equipment: 'warning',
cleaning: 'info',
promote: 'danger'
'茶饮原料': '',
'包装物料': 'success',
'设备器具': 'warning'
}
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="2" />
<el-option label="产品编号" value="1" />
<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="packaging" />
<el-option label="设备器具" value="equipment" />
<el-option label="清洁用品" value="cleaning" />
<el-option label="宣传物料" value="promote" />
<el-option label="茶饮原料" value="茶饮原料" />
<el-option label="包装物料" value="包装物料" />
<el-option label="设备器具" value="设备器具" />
</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="packaging" />
<el-option label="设备器具" value="equipment" />
<el-option label="清洁用品" value="cleaning" />
<el-option label="宣传物料" value="promote" />
<el-option label="茶饮原料" value="茶饮原料" />
<el-option label="包装物料" value="包装物料" />
<el-option label="设备器具" value="设备器具" />
</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>

170
src/components/service.vue
View File

@@ -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()
})
// 监听搜索结果变化，重置页码
watch(searchResults, () => {
currentPage.value = 1
})
// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
const paginatedData = computed(() => searchResults.value)
const filteredResults = computed(() => {
if (!isOperationsManager.value) return searchResults.value
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 () => {
// 获取售后列表（服务端分页）
const fetchData = async (page) => {
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') {
params.id = Number(search.value)
} else if (select.value === '2') {
params.customer_id = search.value
} else if (select.value === '3') {
params.feedback = search.value
} else if (select.value === '4') {
params.customer_name = search.value
// 只在有搜索内容时才添加搜索参数（与 user.vue 一致）
if (search.value) {
if (select.value === '1') {
params.id = Number(search.value)
} else if (select.value === '2') {
params.customer_id = search.value
} else if (select.value === '3') {
params.feedback = search.value
} else if (select.value === '4') {
params.customer_name = search.value
}
}
const res = await getServiceList(params)
if (res.code === 0 || res.code === 200) {
searchResults.value = res.data.list || res.data
try {
const res = await getServiceList(params)
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="客户ID" value="2" />
<el-option label="售后编号" value="1" />
<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-column prop="id" label="编号" width="70" />
<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="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>

61
src/components/supplier.vue
View File

@@ -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()
})
// 监听搜索结果变化
watch(searchResults, () => {
currentPage.value = 1
})
// 分页后的数据（服务端已分页，searchResults 即为当前页数据）
const paginatedData = computed(() => searchResults.value)
// 分页后的数据
const paginatedData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
const end = start + pageSize.value
return searchResults.value.slice(start, end)
})
// 获取供应商列表
const fetchData = async () => {
// 获取供应商列表（服务端分页）
const fetchData = async (page) => {
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="2" />
<el-option label="供应商编号" value="1" />
<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>

136
src/components/user.vue
View File

@@ -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;
}

1
src/constants/departments.js
View File

@@ -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 表单的部门下拉选择） */

13
src/router.js
View File

@@ -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()

20
src/store/user.js
View File

@@ -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
}

342
系统使用说明.md Normal file
View File

@@ -0,0 +1,342 @@
# 蜜雪冰城企业管理系统 — 使用说明
> 本文档面向系统管理员及各部门工作人员，指导如何从零开始搭建和使用本系统。
---
## 一、系统总览
本系统用于蜜雪冰城总部管理加盟商、合同、员工、产品、供应商及售后事务。采用 **RBAC 权限模型**，不同角色拥有不同的菜单可见性和数据操作范围。
### 角色一览
| 角色 | 负责人 | 核心职责 |
|------|--------|---------|
| 系统管理员 | 信息技术部 | 系统搭建、账号管理、数据全权管理 |
| 总经理 | 总经理办公室 | 全局查看所有业务数据 |
| 招商经理 | 招商部 | 管理加盟商、创建加盟合同 |
| 运营经理 | 运营部 | 维护加盟商信息、处理售后 |
| 采购经理 | 采购部 | 管理产品、供应商、创建采购合同 |
| 财务人员 | 财务部 | 只读查看业务数据 |
---
## 二、从第一个人开始 — 系统管理员首次登录
系统首次启动后，数据库中已预置了一个管理员账号：
| 用户名 | 密码 | 角色 |
|--------|------|------|
| `admin` | `123456` | 系统管理员 |
### 第一步：登录系统
1. 打开浏览器，访问系统地址（如 `http://localhost:5173`）
2. 输入用户名 `admin`，密码 `123456`
3. 点击「登录」进入系统
### 第二步：认识系统界面
登录后进入主面板，左侧为导航菜单：
- **首页** — 系统概览
- **加盟商管理** — 管理所有加盟商信息
- **合同管理** — 管理所有合同
- **售后管理** — 管理售后记录
- **产品管理** — 管理产品原料信息
- **供应商管理** — 管理供应商信息
- **员工管理** — 管理所有员工
- **用户管理** — 管理系统登录账号
> 管理员拥有所有菜单和全部数据的访问权限。
---
## 三、搭建组织架构 — 逐步添加员工和用户
系统搭建的正确顺序是：**先建员工 → 再建用户账号**。因为用户账号需要关联一个已存在的员工。
### 第一步：添加员工
1. 点击左侧菜单「员工管理」
2. 点击「新增员工」按钮
3. 填写员工信息：
- **姓名**（必填）：如「张超」
- **部门**：如「总经理办公室」
- **职务**：如「总经理」
- 其他信息：性别、年龄、学历、入职日期、电话等
4. 点击「保存」
按此方式，将所有员工逐一录入系统：
| 姓名 | 部门 | 职务 | 后续分配角色 |
|------|------|------|-------------|
| 张超 | 总经理办公室 | 总经理 | 总经理 |
| 李明 | 招商部 | 招商经理 | 招商经理 |
| 王丽 | 运营部 | 运营经理 | 运营经理 |
| 赵强 | 采购部 | 采购经理 | 采购经理 |
| 陈芳 | 财务部 | 财务主管 | 财务人员 |
### 第二步：为员工创建用户账号
1. 点击左侧菜单「用户管理」
2. 点击「新增用户」按钮
3. 填写用户信息：
- **用户名**（必填）：如 `zhangchao`
- **密码**（必填）：如 `123456`（至少 6 位）
- **角色**：选择对应角色，如「总经理」
- **关联员工**：选择对应的员工，如「张超」
4. 点击「保存」
系统会自动将员工的部门信息同步到用户账号中。
> **也可以在员工管理中直接创建用户**：在员工列表中点击某行的「创建用户」按钮，系统会自动关联该员工并创建用户账号。
### 预置账号速查
系统首次启动时已自动创建以下账号，密码均为 `123456`：
| 用户名 | 姓名 | 角色 | 部门 |
|--------|------|------|------|
| `admin` | 系统管理员 | 系统管理员 | 信息技术部 |
| `zhangchao` | 张超 | 总经理 | 总经理办公室 |
| `liming` | 李明 | 招商经理 | 招商部 |
| `wangli` | 王丽 | 运营经理 | 运营部 |
| `zhaoqiang` | 赵强 | 采购经理 | 采购部 |
| `chenfang` | 陈芳 | 财务人员 | 财务部 |
---
## 四、各角色的工作流程
### 4.1 系统管理员（admin）
**日常职责：** 系统维护、账号管理、数据全权管理
| 操作 | 说明 |
|------|------|
| 管理员工 | 新增、编辑、删除员工信息 |
| 管理用户 | 创建、禁用、删除用户账号，分配角色 |
| 管理加盟商 | 新增、编辑、删除加盟商，指派负责人 |
| 管理合同 | 新增、编辑、删除所有合同 |
| 管理售后 | 新增、编辑、删除所有售后记录 |
| 管理产品 | 新增、编辑、删除产品信息 |
| 管理供应商 | 新增、编辑、删除供应商信息 |
**管理员独有操作：**
- 可以修改任何记录的「负责人」字段
- 不能删除自己、不能禁用自己、不能修改自己的角色
- 不能删除最后一个管理员账号
---
### 4.2 总经理（general_manager）
**日常职责：** 全局查看所有业务数据
| 操作 | 权限 |
|------|------|
| 查看加盟商 | ✅ 全部数据 |
| 查看合同 | ✅ 全部数据 |
| 查看售后 | ✅ 全部数据 |
| 查看员工 | ✅ 全部数据 |
| 新增/编辑/删除 | ❌ 无任何写入权限 |
> 总经理拥有全局只读权限，可以查看所有部门的所有数据，但不能进行任何增删改操作。
---
### 4.3 招商经理（franchise_manager）
**日常职责：** 开发加盟商、签订加盟合同
| 操作 | 权限 |
|------|------|
| 管理加盟商 | ✅ 新增、编辑自己负责的加盟商 |
| 管理加盟合同 | ✅ 新增、编辑自己负责的加盟合同 |
| 管理员工 | ✅ 查看本部门员工 |
| 创建采购合同 | ❌ 只能创建加盟合同 |
**工作流程：**
1. **新增加盟商**：在「加盟商管理」中录入新加盟商信息，系统自动将负责人设为当前用户
2. **签订加盟合同**：在「合同管理」中点击「新增合同」
- 合同类型自动设为「加盟合同」
- 必须选择关联客户
- 只能看到和编辑自己负责的加盟合同
3. **查看数据范围**：只能看到自己负责的加盟商和加盟合同
---
### 4.4 运营经理（operations_manager）
**日常职责：** 维护加盟商信息、处理售后
| 操作 | 权限 |
|------|------|
| 管理加盟商 | ✅ 编辑自己负责的加盟商 |
| 管理售后 | ✅ 新增、编辑自己负责的售后记录 |
| 管理合同 | ✅ 查看和编辑自己负责的加盟合同 |
| 管理员工 | ✅ 查本部门员工 |
**工作流程：**
1. **维护加盟商信息**：编辑加盟商的联系方式、地址等信息
2. **处理售后**：
- 在「售后管理」中点击「新增售后」
- 选择客户、填写反馈内容
- 将状态从「待处理」改为「处理中」后，选择处理业务员（仅限运营部员工）
- 填写处理方式，完成后将状态改为「已完成」
3. **查看数据范围**：只能看到自己负责的加盟商、售后记录和加盟合同
---
### 4.5 采购经理（procurement_manager）
**日常职责：** 管理产品原料、供应商、签订采购合同
| 操作 | 权限 |
|------|------|
| 管理产品 | ✅ 新增、编辑、删除所有产品 |
| 管理供应商 | ✅ 新增、编辑、删除所有供应商 |
| 管理采购合同 | ✅ 新增、编辑自己负责的采购合同 |
| 创建加盟合同 | ❌ 只能创建采购合同 |
**工作流程：**
1. **管理供应商**：在「供应商管理」中录入供应商信息
2. **管理产品**：在「产品管理」中录入产品信息，选择关联供应商
3. **签订采购合同**：
- 在「合同管理」中点击「新增合同」
- 合同类型自动设为「采购合同」
- 必须选择关联供应商
- 只能看到和编辑自己负责的采购合同
---
### 4.6 财务人员（finance）
**日常职责：** 只读查看业务数据
| 操作 | 权限 |
|------|------|
| 查看加盟商 | ✅ 全部数据 |
| 查看合同 | ✅ 全部数据 |
| 查看售后 | ✅ 全部数据 |
| 查看员工 | ✅ 全部数据 |
| 新增/编辑/删除 | ❌ 无任何写入权限 |
> 财务人员与总经理类似，拥有全局只读权限，用于财务审核和数据核对。
---
## 五、核心业务操作详解
### 5.1 加盟商管理
**新增加盟商：**
1. 点击「加盟商管理」→「新增加盟商」
2. 填写姓名（必填）、电话、地区、地址等信息
3. 管理员可指定负责人，其他角色自动设为当前用户
4. 保存后加盟商出现在列表中
**搜索加盟商：**
- 支持按姓名、电话、省份、城市搜索
- 支持按 ID 精确搜索
### 5.2 合同管理
**新增合同：**
1. 点击「合同管理」→「新增合同」
2. 选择合同类型（系统根据角色自动限制）
3. 加盟合同必须选择客户，采购合同必须选择供应商
4. 填写合同名称、金额、日期等信息
5. 保存合同
**合同状态流转：**
```
待审批 → 生效中 → 已完成
→ 已终止
→ 已到期（自动）
```
**搜索合同：**
- 支持按编号、名称、客户名、业务员名搜索
- 支持按生效日期范围筛选
### 5.3 售后管理
**新增售后：**
1. 点击「售后管理」→「新增售后」
2. 选择客户、填写反馈内容
3. 保存后状态默认为「待处理」
**处理售后：**
1. 将状态从「待处理」改为「处理中」
2. 选择处理业务员（仅限运营部员工）
3. 填写处理方式/解决方案
4. 完成后将状态改为「已完成」
### 5.4 产品与供应商管理
**管理供应商：** 录入供应商名称、联系人、电话、地址、类型等信息
**管理产品：** 录入产品名称、类型、数量、单价、规格，选择关联供应商
---
## 六、常见问题
### Q：为什么我看不到某些菜单？
A：您的角色没有对应权限。请联系管理员确认角色分配。
### Q：为什么我看不到某些数据？
A：系统有数据范围隔离。例如招商经理只能看到自己负责的加盟商和合同，看不到其他人的数据。
### Q：为什么合同的「客户」和「供应商」只能选一个？
A：合同分为「加盟合同」和「采购合同」两种类型。加盟合同关联客户，采购合同关联供应商，由合同类型决定。
### Q：为什么售后的「处理业务员」下拉是空的？
A：请先将售后状态从「待处理」改为「处理中」，业务员下拉才会启用。且只能选择运营部的员工。
### Q：如何修改其他人的负责人？
A：只有系统管理员可以在新增/编辑时修改「负责人」字段。其他角色的负责人在创建时自动设为当前用户，不可更改。
### Q：如何禁用一个用户？
A：管理员在「用户管理」中编辑用户，将状态改为「禁用」。该用户将无法登录系统，但已发出的 Token 在过期前仍有效。
### Q：如何删除员工？
A：在「员工管理」中点击删除。系统会同步删除该员工关联的用户账号。注意：不能删除自己关联的员工。
---
## 七、数据范围速查表
| 资源 | 管理员 | 总经理 | 招商经理 | 运营经理 | 采购经理 | 财务 |
|------|:------:|:------:|:--------:|:--------:|:--------:|:----:|
| 加盟商 | 全部 | 全部 | 自己负责 | 自己负责 | — | 全部 |
| 合同 | 全部 | 全部 | 自己的加盟合同 | 自己的加盟合同 | 自己的采购合同 | 全部 |
| 售后 | 全部 | 全部 | — | 自己负责 | — | 全部 |
| 员工 | 全部 | 全部 | 本部门 | 本部门 | 本部门 | 全部 |
| 产品 | 全部 | 全部 | — | — | 全部 | — |
| 供应商 | 全部 | 全部 | — | — | 全部 | — |
| 用户 | 全部 | — | — | — | — | — |
> **"—"** 表示该角色无权访问此资源。
---
## 八、快速上手清单
按以下步骤，10 分钟内完成系统搭建：
- [ ] 1. 管理员登录系统（`admin` / `123456`）
- [ ] 2. 确认员工已预置（或手动添加缺失的员工）
- [ ] 3. 确认用户账号已预置（或为每个员工创建用户账号）
- [ ] 4. 采购经理登录，添加供应商信息
- [ ] 5. 采购经理登录，添加产品信息
- [ ] 6. 招商经理登录，添加加盟商信息
- [ ] 7. 招商经理登录，创建加盟合同
- [ ] 8. 采购经理登录，创建采购合同
- [ ] 9. 运营经理登录，添加售后记录并处理
- [ ] 10. 总经理/财务登录，查看全局数据报表