初始化项目

This commit is contained in:
andy committed 2026-01-23 17:20:52 +08:00
commit 60c416e553
79 files changed
+5609

No files matched your search

+25
View File
@@ -0,0 +1,25 @@
module.exports = {
root: true,
env: {
node: true,
browser: true,
es2021: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended'
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 2021,
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'vue/multi-word-component-names': 'off',
'@typescript-eslint/no-explicit-any': 'warn',
'vue/no-v-html': 'off'
}
}
+8
View File
@@ -0,0 +1,8 @@
{
"semi": false,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none",
"arrowParens": "avoid",
"endOfLine": "lf"
}
+13
View File
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>经销商管理系统</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
+39
View File
@@ -0,0 +1,39 @@
{
"name": "by-crm-frontend",
"version": "1.0.0",
"description": "经销商管理系统前端",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},
"dependencies": {
"vue": "^3.4.0",
"vue-router": "^4.2.0",
"pinia": "^2.1.0",
"pinia-plugin-persistedstate": "^3.2.0",
"axios": "^1.6.0",
"element-plus": "^2.5.0",
"@element-plus/icons-vue": "^2.3.0",
"dayjs": "^1.11.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"vite": "^5.0.0",
"vue-tsc": "^1.8.0",
"typescript": "^5.3.0",
"@types/node": "^20.10.0",
"eslint": "^8.55.0",
"eslint-plugin-vue": "^9.19.0",
"@typescript-eslint/parser": "^6.15.0",
"@typescript-eslint/eslint-plugin": "^6.15.0",
"prettier": "^3.1.0",
"sass": "^1.69.0"
},
"engines": {
"node": ">=16.0.0",
"pnpm": ">=8.0.0"
}
}
+25
View File
@@ -0,0 +1,25 @@
<template>
<router-view />
</template>
<script setup lang="ts">
// App 根组件
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body,
#app {
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
}
</style>
+17
View File
@@ -0,0 +1,17 @@
import { http } from '@/utils/request'
import type { LoginRequest, LoginResponse, User } from '@/types'
// 用户登录
export const login = (data: LoginRequest) => {
return http.post<LoginResponse>('/auth/login', data)
}
// 获取当前用户信息
export const getUserInfo = () => {
return http.get<User>('/auth/user/info')
}
// 用户退出
export const logout = () => {
return http.post('/auth/logout')
}
+32
View File
@@ -0,0 +1,32 @@
import { http } from '@/utils/request'
import type { Customer, CustomerForm, PageQuery, PageResult } from '@/types'
// 分页查询客户
export const getCustomerPage = (params: PageQuery & { name?: string; industry?: string; status?: number }) => {
return http.get<PageResult<Customer>>('/customer/page', { params })
}
// 根据ID获取客户详情
export const getCustomerById = (id: number) => {
return http.get<Customer>(`/customer/${id}`)
}
// 创建客户
export const createCustomer = (data: CustomerForm) => {
return http.post('/customer', data)
}
// 更新客户
export const updateCustomer = (id: number, data: CustomerForm) => {
return http.put(`/customer/${id}`, data)
}
// 删除客户
export const deleteCustomer = (id: number) => {
return http.delete(`/customer/${id}`)
}
// 根据名称搜索客户
export const searchCustomerByName = (name: string) => {
return http.get<Customer[]>('/customer/search', { params: { name } })
}
+27
View File
@@ -0,0 +1,27 @@
import { http } from '@/utils/request'
import type { Dealer } from '@/types'
// 查询所有经销商
export const getDealerList = (params?: { name?: string; code?: string; status?: number }) => {
return http.get<Dealer[]>('/dealer/list', { params })
}
// 根据ID获取经销商
export const getDealerById = (id: number) => {
return http.get<Dealer>(`/dealer/${id}`)
}
// 创建经销商
export const createDealer = (data: Partial<Dealer>) => {
return http.post('/dealer', data)
}
// 更新经销商
export const updateDealer = (id: number, data: Partial<Dealer>) => {
return http.put(`/dealer/${id}`, data)
}
// 删除经销商
export const deleteDealer = (id: number) => {
return http.delete(`/dealer/${id}`)
}
+32
View File
@@ -0,0 +1,32 @@
import { http } from '@/utils/request'
import type { Report, ReportForm, ReportAuditForm, PageQuery, PageResult } from '@/types'
// 分页查询报备
export const getReportPage = (params: PageQuery & {
dealerId?: number
dealerName?: string
customerName?: string
status?: number
}) => {
return http.get<PageResult<Report>>('/report/page', { params })
}
// 根据ID获取报备详情
export const getReportById = (id: number) => {
return http.get<Report>(`/report/${id}`)
}
// 创建报备
export const createReport = (data: ReportForm) => {
return http.post('/report', data)
}
// 审核报备
export const auditReport = (id: number, data: ReportAuditForm) => {
return http.put(`/report/${id}/audit`, data)
}
// 撤回报备
export const withdrawReport = (id: number) => {
return http.delete(`/report/${id}`)
}
+24
View File
@@ -0,0 +1,24 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)
app.use(ElementPlus)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#app')
+82
View File
@@ -0,0 +1,82 @@
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { useUserStore } from '@/stores/user'
const routes: RouteRecordRaw[] = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/Login.vue'),
meta: { title: '登录' }
},
{
path: '/',
component: () => import('@/views/Layout.vue'),
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { title: '首页' }
},
{
path: 'customer',
name: 'Customer',
component: () => import('@/views/Customer.vue'),
meta: { title: '客户管理' }
},
{
path: 'report',
name: 'Report',
component: () => import('@/views/Report.vue'),
meta: { title: '报备管理' }
},
{
path: 'dealer',
name: 'Dealer',
component: () => import('@/views/Dealer.vue'),
meta: { title: '经销商管理', requiresAdmin: true }
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
// 路由守卫
router.beforeEach((to, from, next) => {
const userStore = useUserStore()
// 设置页面标题
document.title = `${to.meta.title || ''} - 经销商管理系统`
// 如果访问登录页,已登录则跳转到首页
if (to.path === '/login') {
if (userStore.isLoggedIn) {
next('/')
} else {
next()
}
return
}
// 其他页面需要登录
if (!userStore.isLoggedIn) {
next('/login')
return
}
// 管理员权限校验
if (to.meta.requiresAdmin && !userStore.isAdmin) {
next('/')
return
}
next()
})
export default router
+57
View File
@@ -0,0 +1,57 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { login as loginApi, getUserInfo, logout as logoutApi } from '@/api/auth'
import type { LoginRequest, User } from '@/types'
export const useUserStore = defineStore(
'user',
() => {
const token = ref<string>(localStorage.getItem('token') || '')
const userInfo = ref<User | null>(null)
const isLoggedIn = computed(() => !!token.value)
const isAdmin = computed(() => userInfo.value?.role === 0)
const isDealer = computed(() => userInfo.value?.role === 1)
// 登录
const login = async (loginForm: LoginRequest) => {
const res = await loginApi(loginForm)
token.value = res.token
localStorage.setItem('token', res.token)
await fetchUserInfo()
}
// 获取用户信息
const fetchUserInfo = async () => {
if (token.value) {
try {
userInfo.value = await getUserInfo()
} catch (error) {
console.error('获取用户信息失败', error)
logout()
}
}
}
// 退出登录
const logout = () => {
token.value = ''
userInfo.value = null
localStorage.removeItem('token')
}
return {
token,
userInfo,
isLoggedIn,
isAdmin,
isDealer,
login,
fetchUserInfo,
logout
}
},
{
persist: true
}
)
+101
View File
@@ -0,0 +1,101 @@
// 用户相关类型
export interface User {
userId: number
username: string
realName: string
dealerId?: number
dealerName?: string
role: number
roleDesc: string
}
export interface LoginRequest {
username: string
password: string
}
export interface LoginResponse {
token: string
}
// 客户相关类型
export interface Customer {
id: number
name: string
phone?: string
address?: string
industry?: string
status: number
statusDesc: string
createdAt: string
updatedAt: string
}
export interface CustomerForm {
name: string
phone?: string
address?: string
industry?: string
}
// 经销商相关类型
export interface Dealer {
id: number
name: string
code: string
contactPerson: string
contactPhone: string
email?: string
status: number
createdAt: string
updatedAt: string
}
// 报备相关类型
export interface Report {
id: number
dealerId: number
dealerName: string
customerId: number
customerName: string
customerPhone?: string
description?: string
status: number
statusDesc: string
rejectReason?: string
protectStartDate?: string
protectEndDate?: string
remainDays?: number
createdAt: string
updatedAt: string
}
export interface ReportForm {
customerId: number
description?: string
}
export interface ReportAuditForm {
approved: boolean
rejectReason?: string
}
// 分页相关类型
export interface PageQuery {
current: number
size: number
}
export interface PageResult<T> {
total: number
records: T[]
current: number
size: number
pages: number
}
// 字典相关类型
export interface DictItem {
label: string
value: string | number
}
+78
View File
@@ -0,0 +1,78 @@
import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
// 响应数据接口
export interface ApiResponse<T = any> {
code: number
message: string
data: T
timestamp: number
}
// 创建 axios 实例
const service: AxiosInstance = axios.create({
baseURL: '/api',
timeout: 30000,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
// 请求拦截器
service.interceptors.request.use(
(config) => {
const userStore = useUserStore()
if (userStore.token) {
config.headers.Authorization = `Bearer ${userStore.token}`
}
return config
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(response: AxiosResponse<ApiResponse>) => {
const { data } = response
if (data.code === 200) {
return data.data
} else if (data.code === 401) {
ElMessage.error('登录已过期,请重新登录')
const userStore = useUserStore()
userStore.logout()
window.location.href = '/login'
return Promise.reject(new Error(data.message || '未授权'))
} else {
ElMessage.error(data.message || '请求失败')
return Promise.reject(new Error(data.message || '请求失败'))
}
},
(error) => {
ElMessage.error(error.message || '网络请求失败')
return Promise.reject(error)
}
)
// 封装请求方法
export const http = {
get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
return service.get(url, config)
},
post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
return service.post(url, data, config)
},
put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
return service.put(url, data, config)
},
delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
return service.delete(url, config)
}
}
export default service
+273
View File
@@ -0,0 +1,273 @@
<template>
<div class="customer-page">
<el-card>
<template #header>
<div class="card-header">
<span>客户管理</span>
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
新增客户
</el-button>
</div>
</template>
<!-- 查询表单 -->
<el-form :inline="true" :model="queryForm" class="query-form">
<el-form-item label="客户名称">
<el-input v-model="queryForm.name" placeholder="请输入客户名称" clearable />
</el-form-item>
<el-form-item label="所属行业">
<el-select v-model="queryForm.industry" placeholder="请选择行业" clearable>
<el-option label="制造业" value="manufacturing" />
<el-option label="互联网" value="internet" />
<el-option label="金融" value="finance" />
<el-option label="零售" value="retail" />
<el-option label="教育" value="education" />
<el-option label="医疗" value="healthcare" />
<el-option label="其他" value="other" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
<el-option label="可报备" :value="0" />
<el-option label="保护中" :value="1" />
<el-option label="已失效" :value="2" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<el-icon><Search /></el-icon>
查询
</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table :data="tableData" border stripe v-loading="loading">
<el-table-column prop="name" label="客户名称" />
<el-table-column prop="phone" label="联系电话" />
<el-table-column prop="address" label="地址" />
<el-table-column prop="industry" label="所属行业">
<template #default="{ row }">
{{ getIndustryLabel(row.industry) }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态">
<template #default="{ row }">
<el-tag v-if="row.status === 0" type="success">可报备</el-tag>
<el-tag v-else-if="row.status === 1" type="warning">保护中</el-tag>
<el-tag v-else type="info">已失效</el-tag>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" width="180" />
<el-table-column label="操作" width="180" fixed="right">
<template #default="{ row }">
<el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-model:current-page="queryForm.current"
v-model:page-size="queryForm.size"
:total="total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="fetchData"
@current-change="fetchData"
style="margin-top: 20px; justify-content: flex-end"
/>
</el-card>
<!-- 新增/编辑对话框 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="600px"
@close="handleDialogClose"
>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="客户名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入客户名称" />
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model="formData.phone" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="formData.address" placeholder="请输入地址" />
</el-form-item>
<el-form-item label="所属行业" prop="industry">
<el-select v-model="formData.industry" placeholder="请选择行业" style="width: 100%">
<el-option label="制造业" value="manufacturing" />
<el-option label="互联网" value="internet" />
<el-option label="金融" value="finance" />
<el-option label="零售" value="retail" />
<el-option label="教育" value="education" />
<el-option label="医疗" value="healthcare" />
<el-option label="其他" value="other" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { getCustomerPage, createCustomer, updateCustomer, deleteCustomer } from '@/api/customer'
import type { Customer, CustomerForm } from '@/types'
const loading = ref(false)
const tableData = ref<Customer[]>([])
const total = ref(0)
const dialogVisible = ref(false)
const dialogTitle = computed(() => (formData.id ? '编辑客户' : '新增客户'))
const formRef = ref<FormInstance>()
const queryForm = reactive({
current: 1,
size: 10,
name: '',
industry: '',
status: undefined as number | undefined
})
const formData = reactive<CustomerForm & { id?: number }>({
name: '',
phone: '',
address: '',
industry: ''
})
const rules: FormRules = {
name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
}
// 获取行业标签
const getIndustryLabel = (industry: string) => {
const map: Record<string, string> = {
manufacturing: '制造业',
internet: '互联网',
finance: '金融',
retail: '零售',
education: '教育',
healthcare: '医疗',
other: '其他'
}
return map[industry] || industry
}
// 查询数据
const fetchData = async () => {
loading.value = true
try {
const res = await getCustomerPage(queryForm)
tableData.value = res.records
total.value = res.total
} catch (error) {
console.error('查询失败', error)
} finally {
loading.value = false
}
}
// 查询按钮
const handleQuery = () => {
queryForm.current = 1
fetchData()
}
// 重置按钮
const handleReset = () => {
queryForm.name = ''
queryForm.industry = ''
queryForm.status = undefined
queryForm.current = 1
fetchData()
}
// 新增按钮
const handleAdd = () => {
dialogVisible.value = true
}
// 编辑按钮
const handleEdit = (row: Customer) => {
Object.assign(formData, row)
dialogVisible.value = true
}
// 删除按钮
const handleDelete = async (row: Customer) => {
try {
await ElMessageBox.confirm('确定要删除该客户吗?', '提示', { type: 'warning' })
await deleteCustomer(row.id)
ElMessage.success('删除成功')
fetchData()
} catch (error) {
// 取消删除
}
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (valid) {
try {
if (formData.id) {
await updateCustomer(formData.id, formData)
ElMessage.success('更新成功')
} else {
await createCustomer(formData)
ElMessage.success('创建成功')
}
dialogVisible.value = false
fetchData()
} catch (error) {
console.error('提交失败', error)
}
}
})
}
// 对话框关闭
const handleDialogClose = () => {
formRef.value?.resetFields()
Object.assign(formData, {
name: '',
phone: '',
address: '',
industry: ''
})
delete formData.id
}
onMounted(() => {
fetchData()
})
</script>
<style scoped>
.customer-page {
width: 100%;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.query-form {
margin-bottom: 20px;
}
</style>
+152
View File
@@ -0,0 +1,152 @@
<template>
<div class="dashboard">
<el-row :gutter="20">
<el-col :span="6">
<el-card class="stat-card">
<div class="stat-content">
<div class="stat-icon" style="background-color: #409eff">
<el-icon :size="30"><User /></el-icon>
</div>
<div class="stat-info">
<div class="stat-label">客户总数</div>
<div class="stat-value">{{ stats.customerCount }}</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="stat-card">
<div class="stat-content">
<div class="stat-icon" style="background-color: #67c23a">
<el-icon :size="30"><Document /></el-icon>
</div>
<div class="stat-info">
<div class="stat-label">报备总数</div>
<div class="stat-value">{{ stats.reportCount }}</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="stat-card">
<div class="stat-content">
<div class="stat-icon" style="background-color: #e6a23c">
<el-icon :size="30"><Clock /></el-icon>
</div>
<div class="stat-info">
<div class="stat-label">待审核</div>
<div class="stat-value">{{ stats.pendingCount }}</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="stat-card">
<div class="stat-content">
<div class="stat-icon" style="background-color: #f56c6c">
<el-icon :size="30"><Shop /></el-icon>
</div>
<div class="stat-info">
<div class="stat-label">经销商数</div>
<div class="stat-value">{{ stats.dealerCount }}</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-card class="welcome-card" style="margin-top: 20px">
<h3>欢迎使用经销商管理系统</h3>
<p v-if="userStore.isAdmin">您是管理员,可以管理所有客户、报备和经销商信息。</p>
<p v-else>您是经销商用户,可以管理客户和提交报备申请。</p>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import * as statisticsApi from '@/api/customer'
const userStore = useUserStore()
const stats = ref({
customerCount: 0,
reportCount: 0,
pendingCount: 0,
dealerCount: 0
})
// 加载统计数据(模拟数据)
onMounted(() => {
stats.value = {
customerCount: 5,
reportCount: 0,
pendingCount: 0,
dealerCount: 3
}
})
</script>
<style scoped>
.dashboard {
width: 100%;
}
.stat-card {
cursor: pointer;
transition: all 0.3s;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.stat-content {
display: flex;
align-items: center;
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-right: 15px;
}
.stat-info {
flex: 1;
}
.stat-label {
font-size: 14px;
color: #909399;
margin-bottom: 8px;
}
.stat-value {
font-size: 24px;
font-weight: bold;
color: #303133;
}
.welcome-card {
text-align: center;
padding: 40px;
}
.welcome-card h3 {
margin-bottom: 15px;
color: #303133;
}
.welcome-card p {
color: #606266;
line-height: 1.8;
}
</style>
+237
View File
@@ -0,0 +1,237 @@
<template>
<div class="dealer-page">
<el-card>
<template #header>
<div class="card-header">
<span>经销商管理</span>
<el-button type="primary" @click="handleAdd">
<el-icon><Plus /></el-icon>
新增经销商
</el-button>
</div>
</template>
<!-- 查询表单 -->
<el-form :inline="true" :model="queryForm" class="query-form">
<el-form-item label="经销商名称">
<el-input v-model="queryForm.name" placeholder="请输入经销商名称" clearable />
</el-form-item>
<el-form-item label="经销商编码">
<el-input v-model="queryForm.code" placeholder="请输入经销商编码" clearable />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
<el-option label="启用" :value="1" />
<el-option label="禁用" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<el-icon><Search /></el-icon>
查询
</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table :data="tableData" border stripe v-loading="loading">
<el-table-column prop="name" label="经销商名称" />
<el-table-column prop="code" label="经销商编码" />
<el-table-column prop="contactPerson" label="联系人" />
<el-table-column prop="contactPhone" label="联系电话" />
<el-table-column prop="email" label="邮箱" />
<el-table-column prop="status" label="状态">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" width="180" />
<el-table-column label="操作" width="180" fixed="right">
<template #default="{ row }">
<el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 新增/编辑对话框 -->
<el-dialog
v-model="dialogVisible"
:title="dialogTitle"
width="600px"
@close="handleDialogClose"
>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="经销商名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入经销商名称" />
</el-form-item>
<el-form-item label="经销商编码" prop="code">
<el-input v-model="formData.code" placeholder="请输入经销商编码" />
</el-form-item>
<el-form-item label="联系人" prop="contactPerson">
<el-input v-model="formData.contactPerson" placeholder="请输入联系人" />
</el-form-item>
<el-form-item label="联系电话" prop="contactPhone">
<el-input v-model="formData.contactPhone" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { getDealerList, createDealer, updateDealer, deleteDealer } from '@/api/dealer'
import type { Dealer } from '@/types'
const loading = ref(false)
const tableData = ref<Dealer[]>([])
const dialogVisible = ref(false)
const dialogTitle = computed(() => (formData.id ? '编辑经销商' : '新增经销商'))
const formRef = ref<FormInstance>()
const queryForm = reactive({
name: '',
code: '',
status: undefined as number | undefined
})
const formData = reactive<Partial<Dealer> & { id?: number }>({
name: '',
code: '',
contactPerson: '',
contactPhone: '',
email: '',
status: 1
})
const rules: FormRules = {
name: [{ required: true, message: '请输入经销商名称', trigger: 'blur' }],
code: [{ required: true, message: '请输入经销商编码', trigger: 'blur' }],
contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
}
// 查询数据
const fetchData = async () => {
loading.value = true
try {
const res = await getDealerList(queryForm)
tableData.value = res
} catch (error) {
console.error('查询失败', error)
} finally {
loading.value = false
}
}
// 查询按钮
const handleQuery = () => {
fetchData()
}
// 重置按钮
const handleReset = () => {
queryForm.name = ''
queryForm.code = ''
queryForm.status = undefined
fetchData()
}
// 新增按钮
const handleAdd = () => {
dialogVisible.value = true
}
// 编辑按钮
const handleEdit = (row: Dealer) => {
Object.assign(formData, row)
dialogVisible.value = true
}
// 删除按钮
const handleDelete = async (row: Dealer) => {
try {
await ElMessageBox.confirm('确定要删除该经销商吗?', '提示', { type: 'warning' })
await deleteDealer(row.id)
ElMessage.success('删除成功')
fetchData()
} catch (error) {
// 取消删除
}
}
// 提交表单
const handleSubmit = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (valid) {
try {
if (formData.id) {
await updateDealer(formData.id, formData)
ElMessage.success('更新成功')
} else {
await createDealer(formData)
ElMessage.success('创建成功')
}
dialogVisible.value = false
fetchData()
} catch (error) {
console.error('提交失败', error)
}
}
})
}
// 对话框关闭
const handleDialogClose = () => {
formRef.value?.resetFields()
Object.assign(formData, {
name: '',
code: '',
contactPerson: '',
contactPhone: '',
email: '',
status: 1
})
delete formData.id
}
onMounted(() => {
fetchData()
})
</script>
<style scoped>
.dealer-page {
width: 100%;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.query-form {
margin-bottom: 20px;
}
</style>
+142
View File
@@ -0,0 +1,142 @@
<template>
<el-container class="layout-container">
<el-aside width="200px">
<div class="logo">经销商管理系统</div>
<el-menu
:default-active="activeMenu"
router
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409eff"
>
<el-menu-item index="/dashboard">
<el-icon><HomeFilled /></el-icon>
<span>首页</span>
</el-menu-item>
<el-menu-item index="/customer">
<el-icon><User /></el-icon>
<span>客户管理</span>
</el-menu-item>
<el-menu-item index="/report">
<el-icon><Document /></el-icon>
<span>报备管理</span>
</el-menu-item>
<el-menu-item v-if="userStore.isAdmin" index="/dealer">
<el-icon><Shop /></el-icon>
<span>经销商管理</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header>
<div class="header-content">
<div class="breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="user-info">
<el-dropdown>
<span class="user-name">
<el-icon><Avatar /></el-icon>
{{ userStore.userInfo?.realName }}
<el-tag v-if="userStore.isAdmin" type="danger" size="small" style="margin-left: 8px">
管理员
</el-tag>
<el-tag v-else type="success" size="small" style="margin-left: 8px">经销商</el-tag>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="handleLogout">
<el-icon><SwitchButton /></el-icon>
退出登录
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const activeMenu = computed(() => route.path)
const currentPageTitle = computed(() => route.meta.title as string || '首页')
const handleLogout = async () => {
try {
await ElMessageBox.confirm('确定要退出登录吗?', '提示', {
type: 'warning'
})
userStore.logout()
router.push('/login')
} catch {
// 取消退出
}
}
</script>
<style scoped>
.layout-container {
height: 100%;
}
.el-aside {
background-color: #304156;
color: #fff;
}
.logo {
height: 60px;
line-height: 60px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #2b3a4b;
}
.el-header {
background-color: #fff;
border-bottom: 1px solid #e6e6e6;
display: flex;
align-items: center;
padding: 0 20px;
}
.header-content {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.user-name {
display: flex;
align-items: center;
cursor: pointer;
}
.user-name .el-icon {
margin-right: 5px;
}
.el-main {
background-color: #f0f2f5;
padding: 20px;
}
</style>
+106
View File
@@ -0,0 +1,106 @@
<template>
<div class="login-container">
<div class="login-box">
<h2 class="login-title">经销商管理系统</h2>
<el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-form">
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
placeholder="请输入用户名"
prefix-icon="User"
size="large"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
prefix-icon="Lock"
size="large"
@keyup.enter="handleLogin"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="large" :loading="loading" @click="handleLogin" class="login-btn">
登录
</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user'
const router = useRouter()
const userStore = useUserStore()
const loginFormRef = ref<FormInstance>()
const loading = ref(false)
const loginForm = reactive({
username: '',
password: ''
})
const rules: FormRules = {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
const handleLogin = async () => {
if (!loginFormRef.value) return
await loginFormRef.value.validate(async (valid) => {
if (valid) {
loading.value = true
try {
await userStore.login(loginForm)
ElMessage.success('登录成功')
router.push('/')
} catch (error) {
console.error('登录失败', error)
} finally {
loading.value = false
}
}
})
}
</script>
<style scoped>
.login-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.login-box {
width: 400px;
padding: 40px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.login-title {
text-align: center;
margin-bottom: 30px;
color: #333;
}
.login-form {
margin-top: 20px;
}
.login-btn {
width: 100%;
}
</style>
+348
View File
@@ -0,0 +1,348 @@
<template>
<div class="report-page">
<el-card>
<template #header>
<div class="card-header">
<span>报备管理</span>
<el-button type="primary" @click="handleAdd" v-if="!userStore.isAdmin">
<el-icon><Plus /></el-icon>
提交报备
</el-button>
</div>
</template>
<!-- 查询表单 -->
<el-form :inline="true" :model="queryForm" class="query-form">
<el-form-item label="客户名称">
<el-input v-model="queryForm.customerName" placeholder="请输入客户名称" clearable />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
<el-option label="待审核" :value="0" />
<el-option label="已通过" :value="1" />
<el-option label="已驳回" :value="2" />
<el-option label="已失效" :value="3" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<el-icon><Search /></el-icon>
查询
</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table :data="tableData" border stripe v-loading="loading">
<el-table-column prop="dealerName" label="经销商" />
<el-table-column prop="customerName" label="客户名称" />
<el-table-column prop="customerPhone" label="联系电话" />
<el-table-column prop="description" label="报备说明" show-overflow-tooltip />
<el-table-column prop="status" label="状态">
<template #default="{ row }">
<el-tag v-if="row.status === 0" type="warning">待审核</el-tag>
<el-tag v-else-if="row.status === 1" type="success">已通过</el-tag>
<el-tag v-else-if="row.status === 2" type="danger">已驳回</el-tag>
<el-tag v-else type="info">已失效</el-tag>
</template>
</el-table-column>
<el-table-column prop="protectEndDate" label="保护期截止" width="180">
<template #default="{ row }">
{{ row.protectEndDate || '-' }}
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" width="180" />
<el-table-column label="操作" width="200" fixed="right">
<template #default="{ row }">
<el-button link type="primary" @click="handleView(row)">查看</el-button>
<el-button
v-if="userStore.isAdmin && row.status === 0"
link
type="success"
@click="handleAudit(row)"
>
审核
</el-button>
<el-button
v-if="!userStore.isAdmin && row.status === 0"
link
type="danger"
@click="handleWithdraw(row)"
>
撤回
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
v-model:current-page="queryForm.current"
v-model:page-size="queryForm.size"
:total="total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
@size-change="fetchData"
@current-change="fetchData"
style="margin-top: 20px; justify-content: flex-end"
/>
</el-card>
<!-- 提交报备对话框 -->
<el-dialog v-model="dialogVisible" title="提交报备" width="600px" @close="handleDialogClose">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="客户" prop="customerId">
<el-select
v-model="formData.customerId"
placeholder="请选择客户"
filterable
remote
:remote-method="searchCustomer"
:loading="searchLoading"
style="width: 100%"
>
<el-option
v-for="item in customerOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="报备说明" prop="description">
<el-input
v-model="formData.description"
type="textarea"
:rows="4"
placeholder="请输入报备说明"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">提交</el-button>
</template>
</el-dialog>
<!-- 审核对话框 -->
<el-dialog v-model="auditDialogVisible" title="审核报备" width="600px">
<el-form ref="auditFormRef" :model="auditForm" label-width="100px">
<el-form-item label="审核结果">
<el-radio-group v-model="auditForm.approved">
<el-radio :label="true">通过</el-radio>
<el-radio :label="false">驳回</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="驳回原因" prop="rejectReason" v-if="!auditForm.approved">
<el-input
v-model="auditForm.rejectReason"
type="textarea"
:rows="4"
placeholder="请输入驳回原因"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="auditDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleAuditSubmit">确定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { getReportPage, createReport, auditReport, withdrawReport } from '@/api/report'
import { searchCustomerByName } from '@/api/customer'
import type { Report, ReportForm } from '@/types'
const userStore = useUserStore()
const loading = ref(false)
const tableData = ref<Report[]>([])
const total = ref(0)
const dialogVisible = ref(false)
const auditDialogVisible = ref(false)
const auditReportId = ref<number>()
const formRef = ref<FormInstance>()
const auditFormRef = ref<FormInstance>()
const searchLoading = ref(false)
const customerOptions = ref<Array<{ id: number; name: string }>>([])
const queryForm = reactive({
current: 1,
size: 10,
customerName: '',
status: undefined as number | undefined
})
const formData = reactive<ReportForm>({
customerId: 0,
description: ''
})
const auditForm = reactive({
approved: true,
rejectReason: ''
})
const rules: FormRules = {
customerId: [{ required: true, message: '请选择客户', trigger: 'change' }]
}
// 查询数据
const fetchData = async () => {
loading.value = true
try {
const res = await getReportPage(queryForm)
tableData.value = res.records
total.value = res.total
} catch (error) {
console.error('查询失败', error)
} finally {
loading.value = false
}
}
// 搜索客户
const searchCustomer = async (query: string) => {
if (!query) return
searchLoading.value = true
try {
const res = await searchCustomerByName(query)
customerOptions.value = res
} catch (error) {
console.error('搜索客户失败', error)
} finally {
searchLoading.value = false
}
}
// 查询按钮
const handleQuery = () => {
queryForm.current = 1
fetchData()
}
// 重置按钮
const handleReset = () => {
queryForm.customerName = ''
queryForm.status = undefined
queryForm.current = 1
fetchData()
}
// 新增按钮
const handleAdd = () => {
dialogVisible.value = true
}
// 查看详情
const handleView = (row: Report) => {
ElMessageBox.alert(
`
<div style="line-height: 2;">
<p><strong>经销商:</strong>${row.dealerName}</p>
<p><strong>客户名称:</strong>${row.customerName}</p>
<p><strong>联系电话:</strong>${row.customerPhone || '-'}</p>
<p><strong>报备说明:</strong>${row.description || '-'}</p>
<p><strong>状态:</strong>${row.statusDesc}</p>
<p><strong>驳回原因:</strong>${row.rejectReason || '-'}</p>
<p><strong>保护期:</strong>${row.protectStartDate || '-'} ~ ${row.protectEndDate || '-'}</p>
</div>
`,
'报备详情',
{
dangerouslyUseHTMLString: true,
confirmButtonText: '关闭'
}
)
}
// 审核按钮
const handleAudit = (row: Report) => {
auditReportId.value = row.id
auditForm.approved = true
auditForm.rejectReason = ''
auditDialogVisible.value = true
}
// 撤回按钮
const handleWithdraw = async (row: Report) => {
try {
await ElMessageBox.confirm('确定要撤回该报备吗?', '提示', { type: 'warning' })
await withdrawReport(row.id)
ElMessage.success('撤回成功')
fetchData()
} catch (error) {
// 取消撤回
}
}
// 提交报备
const handleSubmit = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid) => {
if (valid) {
try {
await createReport(formData)
ElMessage.success('提交成功')
dialogVisible.value = false
fetchData()
} catch (error) {
console.error('提交失败', error)
}
}
})
}
// 审核提交
const handleAuditSubmit = async () => {
if (!auditReportId.value) return
if (!auditForm.approved && !auditForm.rejectReason) {
ElMessage.warning('请输入驳回原因')
return
}
try {
await auditReport(auditReportId.value, auditForm)
ElMessage.success('审核成功')
auditDialogVisible.value = false
fetchData()
} catch (error) {
console.error('审核失败', error)
}
}
// 对话框关闭
const handleDialogClose = () => {
formRef.value?.resetFields()
Object.assign(formData, {
customerId: 0,
description: ''
})
customerOptions.value = []
}
onMounted(() => {
fetchData()
})
</script>
<style scoped>
.report-page {
width: 100%;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.query-form {
margin-bottom: 20px;
}
</style>
+7
View File
@@ -0,0 +1,7 @@
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
+31
View File
@@ -0,0 +1,31 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
/* Path alias */
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
+10
View File
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
+34
View File
@@ -0,0 +1,34 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
},
server: {
port: 5173,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
},
build: {
outDir: 'dist',
sourcemap: false,
rollupOptions: {
output: {
manualChunks: {
'element-plus': ['element-plus'],
'vue-vendor': ['vue', 'vue-router', 'pinia']
}
}
}
}
})