初始化项目
This commit is contained in:
commit
60c416e553
79 files changed
+5609
No files matched your search
@@ -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'
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "none",
|
||||
"arrowParens": "avoid",
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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')
|
||||
}
|
||||
@@ -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 } })
|
||||
}
|
||||
@@ -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}`)
|
||||
}
|
||||
@@ -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}`)
|
||||
}
|
||||
@@ -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')
|
||||
@@ -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
|
||||
@@ -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
|
||||
}
|
||||
)
|
||||
@@ -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
|
||||
}
|
||||
@@ -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
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
@@ -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" }]
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -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']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in new issue
Block a user