Compare commits
3 Commits
e1e45cee1a
...
feature/fu
| Author | SHA1 | Date | |
|---|---|---|---|
| 0fc3d6c7c8 | |||
|
c0b84b9ea4 | ||
|
|
e5a0753e58 |
48
.gitignore
vendored
48
.gitignore
vendored
@@ -1,24 +1,24 @@
|
|||||||
# Logs
|
# Logs
|
||||||
logs
|
logs
|
||||||
*.log
|
*.log
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
pnpm-debug.log*
|
pnpm-debug.log*
|
||||||
lerna-debug.log*
|
lerna-debug.log*
|
||||||
|
|
||||||
node_modules
|
node_modules
|
||||||
dist
|
dist
|
||||||
dist-ssr
|
dist-ssr
|
||||||
*.local
|
*.local
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
.vscode/*
|
.vscode/*
|
||||||
!.vscode/extensions.json
|
!.vscode/extensions.json
|
||||||
.idea
|
.idea
|
||||||
.DS_Store
|
.DS_Store
|
||||||
*.suo
|
*.suo
|
||||||
*.ntvs*
|
*.ntvs*
|
||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
|||||||
6
.vscode/extensions.json
vendored
6
.vscode/extensions.json
vendored
@@ -1,3 +1,3 @@
|
|||||||
{
|
{
|
||||||
"recommendations": ["Vue.volar"]
|
"recommendations": ["Vue.volar"]
|
||||||
}
|
}
|
||||||
|
|||||||
10
README.md
10
README.md
@@ -1,5 +1,5 @@
|
|||||||
# Vue 3 + Vite
|
# Vue 3 + Vite
|
||||||
|
|
||||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||||
|
|||||||
26
index.html
26
index.html
@@ -1,13 +1,13 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link href="/favicon.svg" rel="icon" type="image/svg+xml" />
|
<link href="/favicon.svg" rel="icon" type="image/svg+xml" />
|
||||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||||
<title>backmanagerweb</title>
|
<title>backmanagerweb</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script src="/src/main.js" type="module"></script>
|
<script src="/src/main.js" type="module"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
2948
package-lock.json
generated
2948
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
46
package.json
46
package.json
@@ -1,23 +1,23 @@
|
|||||||
{
|
{
|
||||||
"name": "backmanagerweb",
|
"name": "backmanagerweb",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "^2.3.2",
|
"@element-plus/icons-vue": "^2.3.2",
|
||||||
"element-china-area-data": "^6.1.0",
|
"axios": "^1.18.0",
|
||||||
"element-plus": "^2.14.1",
|
"element-china-area-data": "^6.1.0",
|
||||||
"pinia": "^3.0.4",
|
"element-plus": "^2.14.1",
|
||||||
"vue": "^3.5.34",
|
"vue": "^3.5.34",
|
||||||
"vue-router": "4"
|
"vue-router": "4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^6.0.6",
|
"@vitejs/plugin-vue": "^6.0.6",
|
||||||
"vite": "^8.0.12"
|
"vite": "^8.0.12"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,24 +1,24 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg">
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
</symbol>
|
</symbol>
|
||||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
</symbol>
|
</symbol>
|
||||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
</symbol>
|
</symbol>
|
||||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
</symbol>
|
</symbol>
|
||||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
</symbol>
|
</symbol>
|
||||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
</symbol>
|
</symbol>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/登陆界面背景.mp4
Normal file
BIN
public/登陆界面背景.mp4
Normal file
Binary file not shown.
@@ -1,3 +1,3 @@
|
|||||||
<template>
|
<template>
|
||||||
<router-view />
|
<router-view />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
22
src/api/afterSales.js
Normal file
22
src/api/afterSales.js
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
// api/afterSales.js —— 售后管理接口
|
||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getAfterSalesList(params) {
|
||||||
|
return request.get('/after-sales', {params})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getAfterSalesDetail(id) {
|
||||||
|
return request.get(`/after-sales/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createAfterSales(data) {
|
||||||
|
return request.post('/after-sales', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateAfterSales(id, data) {
|
||||||
|
return request.put(`/after-sales/${id}`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteAfterSales(id) {
|
||||||
|
return request.delete(`/after-sales/${id}`)
|
||||||
|
}
|
||||||
22
src/api/contract.js
Normal file
22
src/api/contract.js
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
// api/contract.js —— 合同管理接口
|
||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getContractList(params) {
|
||||||
|
return request.get('/contracts', {params})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getContractDetail(id) {
|
||||||
|
return request.get(`/contracts/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createContract(data) {
|
||||||
|
return request.post('/contracts', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateContract(id, data) {
|
||||||
|
return request.put(`/contracts/${id}`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteContract(id) {
|
||||||
|
return request.delete(`/contracts/${id}`)
|
||||||
|
}
|
||||||
22
src/api/customer.js
Normal file
22
src/api/customer.js
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
// api/customer.js —— 客户管理接口
|
||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getCustomerList(params) {
|
||||||
|
return request.get('/customers', {params})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCustomerDetail(id) {
|
||||||
|
return request.get(`/customers/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createCustomer(data) {
|
||||||
|
return request.post('/customers', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateCustomer(id, data) {
|
||||||
|
return request.put(`/customers/${id}`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteCustomer(id) {
|
||||||
|
return request.delete(`/customers/${id}`)
|
||||||
|
}
|
||||||
22
src/api/employee.js
Normal file
22
src/api/employee.js
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
// api/employee.js —— 员工管理接口
|
||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getEmployeeList(params) {
|
||||||
|
return request.get('/employees', {params})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getEmployeeDetail(id) {
|
||||||
|
return request.get(`/employees/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createEmployee(data) {
|
||||||
|
return request.post('/employees', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateEmployee(id, data) {
|
||||||
|
return request.put(`/employees/${id}`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteEmployee(id) {
|
||||||
|
return request.delete(`/employees/${id}`)
|
||||||
|
}
|
||||||
22
src/api/product.js
Normal file
22
src/api/product.js
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
// api/product.js —— 产品管理接口
|
||||||
|
import request from '../utils/request'
|
||||||
|
|
||||||
|
export function getProductList(params) {
|
||||||
|
return request.get('/products', {params})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getProductDetail(id) {
|
||||||
|
return request.get(`/products/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createProduct(data) {
|
||||||
|
return request.post('/products', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateProduct(id, data) {
|
||||||
|
return request.put(`/products/${id}`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteProduct(id) {
|
||||||
|
return request.delete(`/products/${id}`)
|
||||||
|
}
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
import axios from 'axios'
|
|
||||||
import {ElMessage} from 'element-plus'
|
|
||||||
import {useUserStore} from '@/stores/user'
|
|
||||||
import router from '@/router'
|
|
||||||
|
|
||||||
const request = axios.create({
|
|
||||||
baseURL: '/api',
|
|
||||||
timeout: 10000,
|
|
||||||
})
|
|
||||||
|
|
||||||
// 请求拦截：自动带 token
|
|
||||||
request.interceptors.request.use(
|
|
||||||
(config) => {
|
|
||||||
const userStore = useUserStore()
|
|
||||||
if (userStore.token){
|
|
||||||
config.headers.Authorization = `Bearer ${userStore.token}`
|
|
||||||
}
|
|
||||||
return config
|
|
||||||
},
|
|
||||||
(err) => Promise.reject(err)
|
|
||||||
)
|
|
||||||
|
|
||||||
// 响应拦截：统一处理 { code, data, message } + 401 跳登录
|
|
||||||
request.interceptors.response.use(
|
|
||||||
(res) => {
|
|
||||||
const body = res.data
|
|
||||||
if (typeof body?.code === 'undefined') return res.data
|
|
||||||
if (body.code === 0) return body.data
|
|
||||||
ElMessage.error(body.message || '请求失败')
|
|
||||||
return Promise.reject(new Error(body.message || '请求失败'))
|
|
||||||
},
|
|
||||||
(err) => {
|
|
||||||
const status = err.response?.status
|
|
||||||
if (status === 401) {
|
|
||||||
const userStore = useUserStore()
|
|
||||||
userStore.logout()
|
|
||||||
ElMessage.error('登录已过期，请重新登录')
|
|
||||||
router.push('/login')
|
|
||||||
}else {
|
|
||||||
ElMessage.error(err.response?.data?.message || err.message || '网络异常')
|
|
||||||
}
|
|
||||||
return Promise.reject(err)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export default request
|
|
||||||
@@ -1,5 +1,43 @@
|
|||||||
import request from './request'
|
// api/user.js —— 用户相关接口
|
||||||
|
import request from '../utils/request'
|
||||||
export const login = (data) => request.post('/user/login', data)
|
|
||||||
export const getUserInfo = () => request.get('/user/info')
|
// 登录
|
||||||
export const logout = () => request.post('/user/logout')
|
export function login(data) {
|
||||||
|
return request.post('/user/login', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取当前用户信息
|
||||||
|
export function getUserInfo() {
|
||||||
|
return request.get('/user/info')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登出
|
||||||
|
export function logout() {
|
||||||
|
return request.post('/user/logout')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改密码
|
||||||
|
export function changePassword(data) {
|
||||||
|
return request.put('/user/password', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 用户管理 CRUD（管理员） ==========
|
||||||
|
export function getUserList(params) {
|
||||||
|
return request.get('/users', {params})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getUserDetail(id) {
|
||||||
|
return request.get(`/users/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createUser(data) {
|
||||||
|
return request.post('/users', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateUser(id, data) {
|
||||||
|
return request.put(`/users/${id}`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteUser(id) {
|
||||||
|
return request.delete(`/users/${id}`)
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
@@ -1,2 +1,2 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07"
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07"
|
||||||
height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
Before Width: | Height: | Size: 459 B After Width: | Height: | Size: 458 B |
@@ -1,143 +1,221 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<el-card class="login-card" shadow="always">
|
<!-- 背景视频 -->
|
||||||
<template #header>
|
<video src="../../public/登陆界面背景.mp4" autoplay muted loop class="bg-video"></video>
|
||||||
<div class="card-header">
|
<div class="video-overlay"></div>
|
||||||
<h2>欢迎登录</h2>
|
|
||||||
<p class="subtitle">请输入您的账号信息</p>
|
<!-- 登录卡片 -->
|
||||||
</div>
|
<el-card class="login-card" shadow="always">
|
||||||
</template>
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
<el-form
|
<img src="../../public/logo.png" alt="logo" class="login-logo">
|
||||||
ref="loginFormRef"
|
<h2>蜜雪冰城管理系统</h2>
|
||||||
:model="loginForm"
|
<p class="subtitle">请输入您的账号信息</p>
|
||||||
:rules="rules"
|
</div>
|
||||||
label-position="top"
|
</template>
|
||||||
@keyup.enter="handleLogin"
|
|
||||||
>
|
<el-form
|
||||||
<el-form-item label="用户名" prop="username">
|
ref="loginFormRef"
|
||||||
<el-input
|
:model="loginForm"
|
||||||
v-model="loginForm.username"
|
:rules="rules"
|
||||||
:prefix-icon="User"
|
label-position="top"
|
||||||
clearable
|
@keyup.enter="handleLogin"
|
||||||
placeholder="请输入用户名"
|
>
|
||||||
/>
|
<el-form-item label="用户名" prop="username">
|
||||||
</el-form-item>
|
<el-input
|
||||||
|
v-model="loginForm.username"
|
||||||
<el-form-item label="密码" prop="password">
|
:prefix-icon="User"
|
||||||
<el-input
|
clearable
|
||||||
v-model="loginForm.password"
|
placeholder="请输入用户名"
|
||||||
:prefix-icon="Lock"
|
/>
|
||||||
clearable
|
</el-form-item>
|
||||||
placeholder="请输入密码"
|
|
||||||
show-password
|
<el-form-item label="密码" prop="password">
|
||||||
type="password"
|
<el-input
|
||||||
/>
|
v-model="loginForm.password"
|
||||||
</el-form-item>
|
:prefix-icon="Lock"
|
||||||
|
clearable
|
||||||
<el-form-item>
|
placeholder="请输入密码"
|
||||||
<el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
|
show-password
|
||||||
</el-form-item>
|
type="password"
|
||||||
|
/>
|
||||||
<el-form-item class="login-form-button">
|
</el-form-item>
|
||||||
<el-button
|
|
||||||
:loading="loading"
|
<el-form-item>
|
||||||
class="login-btn"
|
<el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
|
||||||
type="primary"
|
</el-form-item>
|
||||||
@click="handleLogin"
|
|
||||||
>
|
<el-form-item class="login-form-button">
|
||||||
登 录
|
<el-button
|
||||||
</el-button>
|
:loading="loading"
|
||||||
</el-form-item>
|
class="login-btn"
|
||||||
|
type="primary"
|
||||||
</el-form>
|
@click="handleLogin"
|
||||||
|
>
|
||||||
</el-card>
|
登 录
|
||||||
</div>
|
</el-button>
|
||||||
</template>
|
</el-form-item>
|
||||||
|
|
||||||
<script setup>
|
</el-form>
|
||||||
import {reactive, ref} from 'vue'
|
|
||||||
import {ElMessage} from 'element-plus'
|
</el-card>
|
||||||
import {Lock, User} from '@element-plus/icons-vue'
|
</div>
|
||||||
import {useRouter} from 'vue-router'
|
</template>
|
||||||
import {useUserStore} from "@/stores/user.js";
|
|
||||||
|
<script setup>
|
||||||
const router = useRouter()
|
import {reactive, ref} from 'vue'
|
||||||
const userStore = useUserStore()
|
import {ElMessage} from 'element-plus'
|
||||||
|
import {Lock, User} from '@element-plus/icons-vue'
|
||||||
const loginFormRef = ref(null)
|
import {useRouter} from 'vue-router'
|
||||||
const loading = ref(false)
|
import {login} from '../api/user'
|
||||||
|
|
||||||
const loginForm = reactive({
|
const router = useRouter()
|
||||||
username: '',
|
|
||||||
password: '',
|
const loginFormRef = ref(null)
|
||||||
remember: false,
|
const loading = ref(false)
|
||||||
})
|
|
||||||
|
const loginForm = reactive({
|
||||||
const rules = {
|
username: '',
|
||||||
username: [
|
password: '',
|
||||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
remember: false,
|
||||||
],
|
})
|
||||||
password: [
|
|
||||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
const rules = {
|
||||||
],
|
username: [
|
||||||
}
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||||
|
],
|
||||||
const handleLogin = async () => {
|
password: [
|
||||||
if (!loginFormRef.value) return
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||||
try {
|
],
|
||||||
await loginFormRef.value.validate()
|
}
|
||||||
loading.value = true
|
|
||||||
await userStore.login({
|
const handleLogin = async () => {
|
||||||
username: loginForm.username,
|
if (!loginFormRef.value) return
|
||||||
password: loginForm.password,
|
try {
|
||||||
})
|
await loginFormRef.value.validate()
|
||||||
ElMessage.success('登录成功')
|
loading.value = true
|
||||||
router.push('/panel')
|
const res = await login({
|
||||||
} catch(e) {
|
username: loginForm.username,
|
||||||
// 校验失败，element-plus 会自动显示红色提示
|
password: loginForm.password,
|
||||||
console.warn('login failed',e?.message)
|
})
|
||||||
} finally {
|
// 保存 token 和用户信息
|
||||||
loading.value = false
|
localStorage.setItem('token', res.data.token)
|
||||||
}
|
localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
|
||||||
}
|
if (loginForm.remember) {
|
||||||
</script>
|
localStorage.setItem('rememberUser', loginForm.username)
|
||||||
|
} else {
|
||||||
<style scoped>
|
localStorage.removeItem('rememberUser')
|
||||||
.login-container {
|
}
|
||||||
display: flex;
|
ElMessage.success('登录成功')
|
||||||
justify-content: center;
|
router.push('/panel')
|
||||||
align-items: center;
|
} catch {
|
||||||
min-height: 100vh;
|
// 校验失败或 API 错误，拦截器已弹提示
|
||||||
padding: 20px;
|
} finally {
|
||||||
}
|
loading.value = false
|
||||||
|
}
|
||||||
.login-card {
|
}
|
||||||
width: 420px;
|
</script>
|
||||||
border-radius: 12px;
|
|
||||||
border: none;
|
<style scoped>
|
||||||
}
|
.login-container {
|
||||||
|
position: relative;
|
||||||
.card-header {
|
display: flex;
|
||||||
text-align: center;
|
justify-content: flex-end;
|
||||||
}
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
.card-header h2 {
|
padding: 20px 60px 20px 20px;
|
||||||
margin: 0 0 8px;
|
overflow: hidden;
|
||||||
color: #303133;
|
}
|
||||||
}
|
|
||||||
|
/* 背景视频 */
|
||||||
.subtitle {
|
.bg-video {
|
||||||
margin: 0;
|
position: absolute;
|
||||||
font-size: 14px;
|
top: 0;
|
||||||
color: #909399;
|
left: 0;
|
||||||
}
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
.login-btn {
|
object-fit: cover;
|
||||||
display: block;
|
z-index: 0;
|
||||||
margin: 0 auto;
|
}
|
||||||
text-align: center;
|
|
||||||
width: 75%;
|
.video-overlay {
|
||||||
}
|
position: absolute;
|
||||||
</style>
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 登录卡片 */
|
||||||
|
.login-card {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
width: 420px;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: none;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card :deep(.el-card__header) {
|
||||||
|
border-bottom: 2px solid #E60012;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo {
|
||||||
|
display: block;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0 auto 12px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header h2 {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
color: #E60012;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 输入框聚焦时红色边框 */
|
||||||
|
.login-card :deep(.el-input__wrapper:focus-within) {
|
||||||
|
box-shadow: 0 0 0 1px #E60012 inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 登录按钮 */
|
||||||
|
.login-btn {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
width: 75%;
|
||||||
|
background: #E60012;
|
||||||
|
border-color: #E60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn:hover {
|
||||||
|
background: #d50010;
|
||||||
|
border-color: #d50010;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 记住我复选框 */
|
||||||
|
.login-card :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
||||||
|
background-color: #E60012;
|
||||||
|
border-color: #E60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
|
||||||
|
color: #E60012;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
277
src/components/contract.vue
Normal file
277
src/components/contract.vue
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-container">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<div class="search-bar">
|
||||||
|
<el-input v-model="search.contract_no" placeholder="合同编号" clearable style="width: 180px" @keyup.enter="handleSearch" />
|
||||||
|
<el-input v-model="search.customer_name" placeholder="客户名称" clearable style="width: 180px" @keyup.enter="handleSearch" />
|
||||||
|
<el-input v-model="search.employee_name" placeholder="业务员" clearable style="width: 180px" @keyup.enter="handleSearch" />
|
||||||
|
<el-select v-model="search.status" placeholder="合同状态" clearable style="width: 130px">
|
||||||
|
<el-option label="草稿" value="草稿" />
|
||||||
|
<el-option label="生效" value="生效" />
|
||||||
|
<el-option label="完成" value="完成" />
|
||||||
|
<el-option label="作废" value="作废" />
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
||||||
|
<el-button @click="resetSearch">重置</el-button>
|
||||||
|
<el-button color="#E60012" @click="openAdd">新增合同</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table :data="tableData" border v-loading="loading" stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="60" />
|
||||||
|
<el-table-column prop="contract_no" label="合同编号" width="130" />
|
||||||
|
<el-table-column prop="contract_name" label="合同名称" min-width="150" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="customer_name" label="客户" width="100" />
|
||||||
|
<el-table-column prop="employee_name" label="业务员" width="100" />
|
||||||
|
<el-table-column prop="amount" label="金额" width="100">
|
||||||
|
<template #default="{ row }">{{ row.amount != null ? '¥' + row.amount : '-' }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="effective_date" label="生效日期" width="110">
|
||||||
|
<template #default="{ row }">{{ row.effective_date?.slice(0, 10) || '-' }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="expiry_date" label="到期日期" width="110">
|
||||||
|
<template #default="{ row }">{{ row.expiry_date?.slice(0, 10) || '-' }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="status" label="状态" width="80">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="statusType(row.status)">{{ row.status }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="remark" label="备注" width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="150" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button link type="primary" @click="openEdit(row)">编辑</el-button>
|
||||||
|
<el-button link type="danger" @click="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination-bar">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="fetchList"
|
||||||
|
@current-change="fetchList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑合同' : '新增合同'" width="650px" destroy-on-close>
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px" label-position="top">
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="合同名称" prop="contract_name">
|
||||||
|
<el-input v-model="form.contract_name" placeholder="请输入合同名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="合同编号">
|
||||||
|
<el-input v-model="form.contract_no" placeholder="请输入编号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="关联客户" prop="customer_id">
|
||||||
|
<el-select v-model="form.customer_id" filterable placeholder="选择客户" style="width:100%">
|
||||||
|
<el-option v-for="c in customerOptions" :key="c.id" :label="c.name" :value="c.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="业务员">
|
||||||
|
<el-select v-model="form.employee_id" filterable placeholder="选择业务员" clearable style="width:100%">
|
||||||
|
<el-option v-for="e in employeeOptions" :key="e.id" :label="e.name" :value="e.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="金额">
|
||||||
|
<el-input-number v-model="form.amount" :min="0" :precision="2" controls-position="right" style="width:100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="生效日期">
|
||||||
|
<el-date-picker v-model="form.effective_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width:100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="到期日期">
|
||||||
|
<el-date-picker v-model="form.expiry_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width:100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="合同状态">
|
||||||
|
<el-select v-model="form.status" style="width: 200px">
|
||||||
|
<el-option label="草稿" value="草稿" />
|
||||||
|
<el-option label="生效" value="生效" />
|
||||||
|
<el-option label="完成" value="完成" />
|
||||||
|
<el-option label="作废" value="作废" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="合同内容">
|
||||||
|
<el-input v-model="form.contract_content" type="textarea" :rows="3" placeholder="合同条款/内容" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注信息" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref, reactive, onMounted} from 'vue'
|
||||||
|
import {Search} from '@element-plus/icons-vue'
|
||||||
|
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||||
|
import {getContractList, createContract, updateContract, deleteContract} from '../api/contract'
|
||||||
|
import {getCustomerList} from '../api/customer'
|
||||||
|
import {getEmployeeList} from '../api/employee'
|
||||||
|
|
||||||
|
const search = reactive({contract_no: '', customer_name: '', employee_name: '', status: ''})
|
||||||
|
const loading = ref(false)
|
||||||
|
const tableData = ref([])
|
||||||
|
const pagination = reactive({page: 1, pageSize: 10, total: 0})
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const isEdit = ref(false)
|
||||||
|
const editId = ref(null)
|
||||||
|
const submitLoading = ref(false)
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
// 下拉选项
|
||||||
|
const customerOptions = ref([])
|
||||||
|
const employeeOptions = ref([])
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
contract_name: '', contract_no: '', customer_id: null, employee_id: null,
|
||||||
|
amount: null, effective_date: '', expiry_date: '', status: '生效',
|
||||||
|
contract_content: '', remark: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
contract_name: [{required: true, message: '请输入合同名称', trigger: 'blur'}],
|
||||||
|
customer_id: [{required: true, message: '请选择客户', trigger: 'change'}],
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusType = (s) => ({'草稿': 'info', '生效': 'success', '完成': '', '作废': 'danger'}[s] || 'info')
|
||||||
|
|
||||||
|
const fetchList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params = {page: pagination.page, pageSize: pagination.pageSize, ...search}
|
||||||
|
Object.keys(params).forEach(k => { if (!params[k]) delete params[k] })
|
||||||
|
const res = await getContractList(params)
|
||||||
|
tableData.value = res.data.list
|
||||||
|
pagination.total = res.data.total
|
||||||
|
} catch {} finally { loading.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载下拉选项
|
||||||
|
const loadOptions = async () => {
|
||||||
|
try {
|
||||||
|
const [cRes, eRes] = await Promise.all([
|
||||||
|
getCustomerList({pageSize: 100}),
|
||||||
|
getEmployeeList({pageSize: 100}),
|
||||||
|
])
|
||||||
|
customerOptions.value = cRes.data.list
|
||||||
|
employeeOptions.value = eRes.data.list
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => { pagination.page = 1; fetchList() }
|
||||||
|
const resetSearch = () => {
|
||||||
|
Object.assign(search, {contract_no: '', customer_name: '', employee_name: '', status: ''})
|
||||||
|
handleSearch()
|
||||||
|
}
|
||||||
|
|
||||||
|
const openAdd = () => {
|
||||||
|
isEdit.value = false
|
||||||
|
editId.value = null
|
||||||
|
Object.assign(form, {
|
||||||
|
contract_name: '', contract_no: '', customer_id: null, employee_id: null,
|
||||||
|
amount: null, effective_date: '', expiry_date: '', status: '生效',
|
||||||
|
contract_content: '', remark: '',
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const openEdit = (row) => {
|
||||||
|
isEdit.value = true
|
||||||
|
editId.value = row.id
|
||||||
|
Object.assign(form, {
|
||||||
|
contract_name: row.contract_name || '',
|
||||||
|
contract_no: row.contract_no || '',
|
||||||
|
customer_id: row.customer_id,
|
||||||
|
employee_id: row.employee_id,
|
||||||
|
amount: row.amount,
|
||||||
|
effective_date: row.effective_date?.slice(0, 10) || '',
|
||||||
|
expiry_date: row.expiry_date?.slice(0, 10) || '',
|
||||||
|
status: row.status || '生效',
|
||||||
|
contract_content: row.contract_content || '',
|
||||||
|
remark: row.remark || '',
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
await formRef.value.validate()
|
||||||
|
submitLoading.value = true
|
||||||
|
try {
|
||||||
|
const payload = {...form}
|
||||||
|
if (!payload.employee_id) payload.employee_id = null
|
||||||
|
if (!payload.amount) payload.amount = null
|
||||||
|
if (isEdit.value) {
|
||||||
|
await updateContract(editId.value, payload)
|
||||||
|
ElMessage.success('更新成功')
|
||||||
|
} else {
|
||||||
|
await createContract(payload)
|
||||||
|
ElMessage.success('新增成功')
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
fetchList()
|
||||||
|
} catch {} finally { submitLoading.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定删除该合同？', '提示', {type: 'warning'})
|
||||||
|
await deleteContract(id)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => { fetchList(); loadOptions() })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.pagination-bar {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
268
src/components/customer.vue
Normal file
268
src/components/customer.vue
Normal file
@@ -0,0 +1,268 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-container">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<div class="search-bar">
|
||||||
|
<el-input
|
||||||
|
v-model="search.name"
|
||||||
|
placeholder="搜索客户姓名"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
@keyup.enter="handleSearch"
|
||||||
|
/>
|
||||||
|
<el-input
|
||||||
|
v-model="search.phone"
|
||||||
|
placeholder="搜索电话"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
@keyup.enter="handleSearch"
|
||||||
|
/>
|
||||||
|
<el-select v-model="search.customer_type" placeholder="客户类型" clearable style="width: 150px">
|
||||||
|
<el-option label="地区总代理" value="VIP" />
|
||||||
|
<el-option label="普通代理" value="Normal" />
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
||||||
|
<el-button @click="resetSearch">重置</el-button>
|
||||||
|
<el-button color="#E60012" @click="openAdd">新增客户</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table :data="tableData" border v-loading="loading" stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="60" />
|
||||||
|
<el-table-column prop="name" label="姓名" width="100" />
|
||||||
|
<el-table-column prop="phone" label="电话" width="130" />
|
||||||
|
<el-table-column label="地区" width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ [row.province, row.city, row.district].filter(Boolean).join(' / ') || '-' }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="address" label="详细地址" min-width="150" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="email" label="邮箱" width="160" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="customer_type" label="类型" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.customer_type === 'VIP' ? 'danger' : 'info'">
|
||||||
|
{{ row.customer_type === 'VIP' ? '总代理' : '普通代理' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="remark" label="备注" width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="150" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button link type="primary" @click="openEdit(row)">编辑</el-button>
|
||||||
|
<el-button link type="danger" @click="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination-bar">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="fetchList"
|
||||||
|
@current-change="fetchList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
:title="isEdit ? '编辑客户' : '新增客户'"
|
||||||
|
width="600px"
|
||||||
|
destroy-on-close
|
||||||
|
>
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="top">
|
||||||
|
<el-form-item label="姓名" prop="name">
|
||||||
|
<el-input v-model="form.name" placeholder="请输入姓名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="电话">
|
||||||
|
<el-input v-model="form.phone" placeholder="请输入电话" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="地区">
|
||||||
|
<el-cascader
|
||||||
|
v-model="form.region"
|
||||||
|
:options="regionData"
|
||||||
|
:props="{ expandTrigger: 'hover' }"
|
||||||
|
placeholder="请选择省/市/区"
|
||||||
|
clearable
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="详细地址">
|
||||||
|
<el-input v-model="form.address" placeholder="请输入详细地址" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="邮箱">
|
||||||
|
<el-input v-model="form.email" placeholder="请输入邮箱" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户类型">
|
||||||
|
<el-radio-group v-model="form.customer_type">
|
||||||
|
<el-radio value="VIP">地区总代理</el-radio>
|
||||||
|
<el-radio value="Normal">普通代理</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注信息" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref, reactive, onMounted} from 'vue'
|
||||||
|
import {Search} from '@element-plus/icons-vue'
|
||||||
|
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||||
|
import {regionData} from 'element-china-area-data'
|
||||||
|
import {getCustomerList, createCustomer, updateCustomer, deleteCustomer} from '../api/customer'
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const search = reactive({name: '', phone: '', customer_type: ''})
|
||||||
|
const loading = ref(false)
|
||||||
|
const tableData = ref([])
|
||||||
|
const pagination = reactive({page: 1, pageSize: 10, total: 0})
|
||||||
|
|
||||||
|
// 弹窗
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const isEdit = ref(false)
|
||||||
|
const editId = ref(null)
|
||||||
|
const submitLoading = ref(false)
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
name: '', phone: '', region: [], address: '', email: '', customer_type: 'Normal', remark: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: [{required: true, message: '请输入客户姓名', trigger: 'blur'}],
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取列表
|
||||||
|
const fetchList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params = {
|
||||||
|
page: pagination.page,
|
||||||
|
pageSize: pagination.pageSize,
|
||||||
|
...search,
|
||||||
|
}
|
||||||
|
// 清空空值
|
||||||
|
Object.keys(params).forEach(k => { if (!params[k]) delete params[k] })
|
||||||
|
const res = await getCustomerList(params)
|
||||||
|
tableData.value = res.data.list
|
||||||
|
pagination.total = res.data.total
|
||||||
|
} catch {} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
pagination.page = 1
|
||||||
|
fetchList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetSearch = () => {
|
||||||
|
search.name = ''
|
||||||
|
search.phone = ''
|
||||||
|
search.customer_type = ''
|
||||||
|
handleSearch()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开新增
|
||||||
|
const openAdd = () => {
|
||||||
|
isEdit.value = false
|
||||||
|
editId.value = null
|
||||||
|
Object.assign(form, {name: '', phone: '', region: [], address: '', email: '', customer_type: 'Normal', remark: ''})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开编辑
|
||||||
|
const openEdit = (row) => {
|
||||||
|
isEdit.value = true
|
||||||
|
editId.value = row.id
|
||||||
|
Object.assign(form, {
|
||||||
|
name: row.name || '',
|
||||||
|
phone: row.phone || '',
|
||||||
|
region: [],
|
||||||
|
address: row.address || '',
|
||||||
|
email: row.email || '',
|
||||||
|
customer_type: row.customer_type || 'Normal',
|
||||||
|
remark: row.remark || '',
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
await formRef.value.validate()
|
||||||
|
submitLoading.value = true
|
||||||
|
try {
|
||||||
|
// 从 region cascader 拆出省市区
|
||||||
|
const [province, city, district] = form.region
|
||||||
|
const payload = {
|
||||||
|
name: form.name,
|
||||||
|
phone: form.phone || null,
|
||||||
|
province: province || null,
|
||||||
|
city: city || null,
|
||||||
|
district: district || null,
|
||||||
|
address: form.address || null,
|
||||||
|
email: form.email || null,
|
||||||
|
customer_type: form.customer_type,
|
||||||
|
remark: form.remark || null,
|
||||||
|
}
|
||||||
|
if (isEdit.value) {
|
||||||
|
await updateCustomer(editId.value, payload)
|
||||||
|
ElMessage.success('更新成功')
|
||||||
|
} else {
|
||||||
|
await createCustomer(payload)
|
||||||
|
ElMessage.success('新增成功')
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
fetchList()
|
||||||
|
} catch {} finally {
|
||||||
|
submitLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定删除该客户？', '提示', {type: 'warning'})
|
||||||
|
await deleteCustomer(id)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-bar {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
266
src/components/employee.vue
Normal file
266
src/components/employee.vue
Normal file
@@ -0,0 +1,266 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-container">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<div class="search-bar">
|
||||||
|
<el-input v-model="search.name" placeholder="员工姓名" clearable style="width: 200px" @keyup.enter="handleSearch" />
|
||||||
|
<el-input v-model="search.department" placeholder="部门" clearable style="width: 180px" @keyup.enter="handleSearch" />
|
||||||
|
<el-select v-model="search.status" placeholder="在职状态" clearable style="width: 130px">
|
||||||
|
<el-option label="在职" :value="1" />
|
||||||
|
<el-option label="离职" :value="0" />
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
||||||
|
<el-button @click="resetSearch">重置</el-button>
|
||||||
|
<el-button color="#E60012" @click="openAdd">新增员工</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table :data="tableData" border v-loading="loading" stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="60" />
|
||||||
|
<el-table-column prop="name" label="姓名" width="90" />
|
||||||
|
<el-table-column prop="gender" label="性别" width="60" />
|
||||||
|
<el-table-column prop="age" label="年龄" width="60" />
|
||||||
|
<el-table-column prop="education" label="学历" width="80" />
|
||||||
|
<el-table-column prop="department" label="部门" width="100" />
|
||||||
|
<el-table-column prop="position" label="职务" width="100" />
|
||||||
|
<el-table-column prop="entry_date" label="入职日期" width="110">
|
||||||
|
<template #default="{ row }">{{ row.entry_date?.slice(0, 10) || '-' }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="salary" label="工资" width="90">
|
||||||
|
<template #default="{ row }">{{ row.salary != null ? '¥' + row.salary : '-' }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="phone" label="电话" width="120" />
|
||||||
|
<el-table-column prop="email" label="邮箱" width="160" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="status" label="状态" width="70">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.status === 1 ? 'success' : 'danger'">{{ row.status === 1 ? '在职' : '离职' }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="remark" label="备注" width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="150" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button link type="primary" @click="openEdit(row)">编辑</el-button>
|
||||||
|
<el-button link type="danger" @click="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination-bar">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="fetchList"
|
||||||
|
@current-change="fetchList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑员工' : '新增员工'" width="650px" destroy-on-close>
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="top">
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="姓名" prop="name">
|
||||||
|
<el-input v-model="form.name" placeholder="姓名" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="性别">
|
||||||
|
<el-select v-model="form.gender" placeholder="选择" style="width:100%">
|
||||||
|
<el-option label="男" value="男" />
|
||||||
|
<el-option label="女" value="女" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="年龄">
|
||||||
|
<el-input-number v-model="form.age" :min="18" :max="70" controls-position="right" style="width:100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="学历">
|
||||||
|
<el-select v-model="form.education" placeholder="选择" clearable style="width:100%">
|
||||||
|
<el-option label="高中" value="高中" />
|
||||||
|
<el-option label="专科" value="专科" />
|
||||||
|
<el-option label="本科" value="本科" />
|
||||||
|
<el-option label="硕士" value="硕士" />
|
||||||
|
<el-option label="博士" value="博士" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="部门">
|
||||||
|
<el-input v-model="form.department" placeholder="所属部门" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="职务">
|
||||||
|
<el-input v-model="form.position" placeholder="职务/岗位" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="入职日期">
|
||||||
|
<el-date-picker v-model="form.entry_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width:100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="工资">
|
||||||
|
<el-input-number v-model="form.salary" :min="0" :precision="2" controls-position="right" style="width:100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="在职状态">
|
||||||
|
<el-select v-model="form.status" style="width:100%">
|
||||||
|
<el-option label="在职" :value="1" />
|
||||||
|
<el-option label="离职" :value="0" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="电话">
|
||||||
|
<el-input v-model="form.phone" placeholder="联系电话" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="邮箱">
|
||||||
|
<el-input v-model="form.email" placeholder="电子邮箱" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注信息" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref, reactive, onMounted} from 'vue'
|
||||||
|
import {Search} from '@element-plus/icons-vue'
|
||||||
|
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||||
|
import {getEmployeeList, createEmployee, updateEmployee, deleteEmployee} from '../api/employee'
|
||||||
|
|
||||||
|
const search = reactive({name: '', department: '', status: ''})
|
||||||
|
const loading = ref(false)
|
||||||
|
const tableData = ref([])
|
||||||
|
const pagination = reactive({page: 1, pageSize: 10, total: 0})
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const isEdit = ref(false)
|
||||||
|
const editId = ref(null)
|
||||||
|
const submitLoading = ref(false)
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
const defaultForm = () => ({
|
||||||
|
name: '', gender: '男', age: null, education: '', department: '',
|
||||||
|
entry_date: '', position: '', salary: null, phone: '', email: '',
|
||||||
|
status: 1, remark: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const form = reactive(defaultForm())
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params = {page: pagination.page, pageSize: pagination.pageSize, ...search}
|
||||||
|
Object.keys(params).forEach(k => { if (params[k] === '' || params[k] === null) delete params[k] })
|
||||||
|
const res = await getEmployeeList(params)
|
||||||
|
tableData.value = res.data.list
|
||||||
|
pagination.total = res.data.total
|
||||||
|
} catch {} finally { loading.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => { pagination.page = 1; fetchList() }
|
||||||
|
const resetSearch = () => {
|
||||||
|
Object.assign(search, {name: '', department: '', status: ''})
|
||||||
|
handleSearch()
|
||||||
|
}
|
||||||
|
|
||||||
|
const openAdd = () => {
|
||||||
|
isEdit.value = false
|
||||||
|
editId.value = null
|
||||||
|
Object.assign(form, defaultForm())
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const openEdit = (row) => {
|
||||||
|
isEdit.value = true
|
||||||
|
editId.value = row.id
|
||||||
|
Object.assign(form, {
|
||||||
|
name: row.name || '', gender: row.gender || '男', age: row.age,
|
||||||
|
education: row.education || '', department: row.department || '',
|
||||||
|
entry_date: row.entry_date?.slice(0, 10) || '', position: row.position || '',
|
||||||
|
salary: row.salary, phone: row.phone || '', email: row.email || '',
|
||||||
|
status: row.status ?? 1, remark: row.remark || '',
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
await formRef.value.validate()
|
||||||
|
submitLoading.value = true
|
||||||
|
try {
|
||||||
|
const payload = {...form}
|
||||||
|
if (!payload.age) payload.age = null
|
||||||
|
if (!payload.entry_date) payload.entry_date = null
|
||||||
|
if (isEdit.value) {
|
||||||
|
await updateEmployee(editId.value, payload)
|
||||||
|
ElMessage.success('更新成功')
|
||||||
|
} else {
|
||||||
|
await createEmployee(payload)
|
||||||
|
ElMessage.success('新增成功')
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
fetchList()
|
||||||
|
} catch {} finally { submitLoading.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定删除该员工？', '提示', {type: 'warning'})
|
||||||
|
await deleteEmployee(id)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => { fetchList() })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.pagination-bar {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,194 +1,234 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-container">
|
<div class="home-container">
|
||||||
<div class="banner">
|
<!-- 顶部视频横幅 -->
|
||||||
<video src="../../public/蜜雪冰城-雪王百科.mp4" autoplay muted loop></video>
|
<div class="video-banner">
|
||||||
</div>
|
<video src="../../public/首页顶图.mp4" autoplay muted loop class="bg-video"></video>
|
||||||
</div>
|
<div class="video-overlay">
|
||||||
|
<h2 class="banner-title">欢迎使用蜜雪冰城管理系统</h2>
|
||||||
<div class="home-body">
|
</div>
|
||||||
<div class="first-head">雪王简介</div>
|
</div>
|
||||||
<div class="intro-content">
|
|
||||||
<div class="pic">
|
<!-- 雪王简介 -->
|
||||||
<img src="../../public/mixue.png" alt="雪王">
|
<div class="intro-section">
|
||||||
</div>
|
<div class="section-header">
|
||||||
<div class="txt">
|
<div class="header-line"></div>
|
||||||
<div class="second-head">
|
<h2 class="section-title">雪王简介</h2>
|
||||||
"我是手拿冰淇凌权杖的雪王"
|
<div class="header-line"></div>
|
||||||
<br>
|
</div>
|
||||||
"一生只爱冰淇凌与茶"
|
|
||||||
</div>
|
<div class="intro-content">
|
||||||
<ul class="xuewang-list">
|
<div class="pic-wrapper">
|
||||||
<li v-for="(item, index) in snowKingInfo" :key="index">
|
<img src="../../public/mixue.png" alt="雪王" class="xuewang-img">
|
||||||
<span class="label">{{ item.label }}</span>
|
</div>
|
||||||
<span class="divider"></span>
|
<div class="txt-wrapper">
|
||||||
<span class="value">{{ item.value }}</span>
|
<div class="quote">
|
||||||
</li>
|
"我是手拿冰淇凌权杖的雪王"
|
||||||
</ul>
|
<br>
|
||||||
</div>
|
"一生只爱冰淇凌与茶"
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<ul class="info-list">
|
||||||
</template>
|
<li v-for="(item, index) in snowKingInfo" :key="index">
|
||||||
|
<span class="info-label">{{ item.label }}</span>
|
||||||
<script setup>
|
<span class="info-divider"></span>
|
||||||
import { ref } from 'vue'
|
<span class="info-value">{{ item.value }}</span>
|
||||||
|
</li>
|
||||||
const snowKingInfo = ref([
|
</ul>
|
||||||
{ label: '生日', value: '11月22日' },
|
</div>
|
||||||
{ label: '性格', value: '正直、友善、热情、进取' },
|
</div>
|
||||||
{ label: '职位', value: '蜜雪冰城首席品控官兼全球品牌代言人' },
|
</div>
|
||||||
{ label: '口头禅', value: '你爱我，我爱你，蜜雪冰城甜蜜蜜' },
|
</div>
|
||||||
{ label: '爱好', value: '唱歌跳舞，研究冰淇淋与茶的新奇吃法' }
|
</template>
|
||||||
])
|
|
||||||
</script>
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
<style scoped>
|
|
||||||
.home-container {
|
const snowKingInfo = ref([
|
||||||
padding: 0;
|
{ label: '生日', value: '11月22日' },
|
||||||
text-align: center;
|
{ label: '性格', value: '正直、友善、热情、进取' },
|
||||||
}
|
{ label: '职位', value: '蜜雪冰城首席品控官兼全球品牌代言人' },
|
||||||
|
{ label: '口头禅', value: '你爱我，我爱你，蜜雪冰城甜蜜蜜' },
|
||||||
.banner {
|
{ label: '爱好', value: '唱歌跳舞，研究冰淇淋与茶的新奇吃法' }
|
||||||
width: 100%;
|
])
|
||||||
height: 90vh;
|
</script>
|
||||||
min-height: 500px;
|
|
||||||
}
|
<style scoped>
|
||||||
|
.home-container {
|
||||||
.banner video {
|
min-height: 100%;
|
||||||
width: 100%;
|
}
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
/* ========== 视频横幅 ========== */
|
||||||
}
|
.video-banner {
|
||||||
|
position: relative;
|
||||||
.home-body {
|
width: calc(100% + 40px);
|
||||||
padding: 100px 80px;
|
margin: -20px -20px 0 -20px;
|
||||||
background: linear-gradient(180deg, #FEF7F7 0%, rgba(254, 247, 247, 0.00) 64.96%);
|
height: 300px;
|
||||||
}
|
overflow: hidden;
|
||||||
|
}
|
||||||
.first-head {
|
|
||||||
text-align: center;
|
.bg-video {
|
||||||
font-size: 58px;
|
width: 100%;
|
||||||
font-weight: 700;
|
height: 100%;
|
||||||
color: #2E2F30;
|
object-fit: cover;
|
||||||
margin-bottom: 68px;
|
}
|
||||||
line-height: 1.17;
|
|
||||||
}
|
.video-overlay {
|
||||||
|
position: absolute;
|
||||||
.intro-content {
|
top: 0;
|
||||||
display: flex;
|
left: 0;
|
||||||
justify-content: space-between;
|
right: 0;
|
||||||
align-items: center;
|
bottom: 0;
|
||||||
max-width: 1400px;
|
background: linear-gradient(
|
||||||
margin: 0 auto;
|
to bottom,
|
||||||
}
|
rgba(230, 0, 18, 0.3) 0%,
|
||||||
|
rgba(0, 0, 0, 0.4) 100%
|
||||||
.pic {
|
);
|
||||||
width: 750px;
|
display: flex;
|
||||||
height: 660px;
|
align-items: center;
|
||||||
border-radius: 30px;
|
justify-content: center;
|
||||||
overflow: hidden;
|
}
|
||||||
}
|
|
||||||
|
.banner-title {
|
||||||
.pic img {
|
color: #fff;
|
||||||
width: 100%;
|
font-size: 32px;
|
||||||
height: 100%;
|
font-weight: 600;
|
||||||
object-fit: cover;
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||||
transition: transform 0.5s;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pic:hover img {
|
/* ========== 简介区域 ========== */
|
||||||
transform: scale(1.05);
|
.intro-section {
|
||||||
}
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
.txt {
|
|
||||||
width: 676px;
|
.section-header {
|
||||||
}
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
.second-head {
|
justify-content: center;
|
||||||
font-size: 46px;
|
gap: 20px;
|
||||||
font-weight: 700;
|
margin-bottom: 40px;
|
||||||
color: #E60012;
|
}
|
||||||
line-height: 1.33;
|
|
||||||
margin-bottom: 67px;
|
.header-line {
|
||||||
}
|
flex: 1;
|
||||||
|
max-width: 200px;
|
||||||
.xuewang-list {
|
height: 2px;
|
||||||
list-style: none;
|
background: linear-gradient(90deg, transparent, #E60012, transparent);
|
||||||
padding: 0;
|
}
|
||||||
}
|
|
||||||
|
.section-title {
|
||||||
.xuewang-list li {
|
font-size: 32px;
|
||||||
display: flex;
|
font-weight: 700;
|
||||||
align-items: center;
|
color: #E60012;
|
||||||
margin-bottom: 18px;
|
margin: 0;
|
||||||
color: #666;
|
white-space: nowrap;
|
||||||
font-size: 24px;
|
}
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.5;
|
.intro-content {
|
||||||
}
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
.xuewang-list li:last-child {
|
align-items: center;
|
||||||
margin-bottom: 0;
|
gap: 60px;
|
||||||
}
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
.xuewang-list .label {
|
}
|
||||||
color: #2E2F30;
|
|
||||||
font-weight: 700;
|
/* 雪王图片 */
|
||||||
min-width: 80px;
|
.pic-wrapper {
|
||||||
}
|
flex-shrink: 0;
|
||||||
|
width: 400px;
|
||||||
.xuewang-list .divider {
|
height: 400px;
|
||||||
width: 1px;
|
border-radius: 20px;
|
||||||
height: 18px;
|
overflow: hidden;
|
||||||
background-color: #999;
|
box-shadow: 0 8px 30px rgba(230, 0, 18, 0.15);
|
||||||
margin: 0 15px;
|
transition: transform 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xuewang-list .value {
|
.pic-wrapper:hover {
|
||||||
display: flex;
|
transform: translateY(-5px);
|
||||||
align-items: center;
|
}
|
||||||
}
|
|
||||||
|
.xuewang-img {
|
||||||
/* 响应式适配 */
|
width: 100%;
|
||||||
@media (max-width: 1200px) {
|
height: 100%;
|
||||||
.intro-content {
|
object-fit: cover;
|
||||||
flex-direction: column;
|
}
|
||||||
}
|
|
||||||
|
/* 文字内容 */
|
||||||
.pic {
|
.txt-wrapper {
|
||||||
width: 100%;
|
flex: 1;
|
||||||
height: auto;
|
max-width: 500px;
|
||||||
aspect-ratio: 750/660;
|
}
|
||||||
}
|
|
||||||
|
.quote {
|
||||||
.txt {
|
font-size: 28px;
|
||||||
width: 100%;
|
font-weight: 700;
|
||||||
margin-top: 48px;
|
color: #E60012;
|
||||||
}
|
line-height: 1.5;
|
||||||
}
|
margin-bottom: 40px;
|
||||||
|
padding-left: 20px;
|
||||||
@media (max-width: 768px) {
|
border-left: 4px solid #E60012;
|
||||||
.home-body {
|
}
|
||||||
padding: 50px 20px;
|
|
||||||
}
|
.info-list {
|
||||||
|
list-style: none;
|
||||||
.first-head {
|
padding: 0;
|
||||||
font-size: 36px;
|
margin: 0;
|
||||||
margin-bottom: 40px;
|
}
|
||||||
}
|
|
||||||
|
.info-list li {
|
||||||
.second-head {
|
display: flex;
|
||||||
font-size: 28px;
|
align-items: center;
|
||||||
margin-bottom: 40px;
|
padding: 14px 0;
|
||||||
}
|
border-bottom: 1px dashed #eee;
|
||||||
|
font-size: 16px;
|
||||||
.xuewang-list li {
|
}
|
||||||
font-size: 18px;
|
|
||||||
flex-direction: column;
|
.info-list li:last-child {
|
||||||
align-items: flex-start;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.xuewang-list .divider {
|
.info-label {
|
||||||
display: none;
|
font-weight: 600;
|
||||||
}
|
color: #303133;
|
||||||
}
|
min-width: 70px;
|
||||||
</style>
|
}
|
||||||
|
|
||||||
|
.info-divider {
|
||||||
|
width: 1px;
|
||||||
|
height: 16px;
|
||||||
|
background: #E60012;
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
color: #606266;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 响应式适配 ========== */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.intro-content {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pic-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.txt-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-banner {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,148 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
|
|
||||||
import { Search } from '@element-plus/icons-vue'
|
|
||||||
import { ref,reactive } from 'vue'
|
|
||||||
import { regionData } from 'element-china-area-data'
|
|
||||||
import { ElMessage } from 'element-plus'
|
|
||||||
|
|
||||||
const form = reactive({
|
|
||||||
name: '', // 姓名，默认为空字符串
|
|
||||||
phone: '', // 电话，默认为空字符串
|
|
||||||
region: [], // 地区，默认为空数组（省市区三级代码）
|
|
||||||
address: '', // 详细地址，默认为空字符串
|
|
||||||
email: '', // 电子邮箱，默认为空字符串
|
|
||||||
customer_type: 'Normal' // 客户类型，默认选中"普通客户"
|
|
||||||
})
|
|
||||||
|
|
||||||
const search = ref('')
|
|
||||||
const select = ref('1')
|
|
||||||
|
|
||||||
const searchResults=ref([])
|
|
||||||
|
|
||||||
const showSearchResults=ref(false) //是否显示搜索结果
|
|
||||||
const showAddForm=ref(false) //是否显示新增表单
|
|
||||||
const isEditMode = ref(false) //是否为编辑模式
|
|
||||||
const currentCustomerId = ref(null) //当前编辑的客户的ID
|
|
||||||
|
|
||||||
// 清空表单
|
|
||||||
const resetForm = () => {
|
|
||||||
form.name = ''
|
|
||||||
form.phone = ''
|
|
||||||
form.region = []
|
|
||||||
form.address = ''
|
|
||||||
form.email = ''
|
|
||||||
form.customer_type = 'Normal'
|
|
||||||
isEditMode.value = false
|
|
||||||
currentCustomerId.value = null
|
|
||||||
}
|
|
||||||
|
|
||||||
// 显示新增表单
|
|
||||||
const addCustomer = () => {
|
|
||||||
resetForm()
|
|
||||||
showAddForm.value = true
|
|
||||||
showSearchResults.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空搜索
|
|
||||||
const clearSearch = () => {
|
|
||||||
search.value = ''
|
|
||||||
showSearchResults.value = false
|
|
||||||
showAddForm.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="customer-container">
|
|
||||||
<!-- 搜索栏区域 -->
|
|
||||||
<div class="customer-search">
|
|
||||||
<el-input v-model="search" style="max-width: 600px" placeholder="Please input"
|
|
||||||
class="customer-search-with-select">
|
|
||||||
<template #prepend>
|
|
||||||
<el-select v-model="select" placeholder="Select" style="width: 115px">
|
|
||||||
<el-option label="姓名" value="1" />
|
|
||||||
<el-option label="电话" value="2" />
|
|
||||||
<el-option label="邮箱" value="3" />
|
|
||||||
</el-select>
|
|
||||||
</template>
|
|
||||||
<template #append>
|
|
||||||
<el-button :icon="Search" />
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
|
|
||||||
<el-button type="primary" @click="addCustomer" style="margin-left: 20px">
|
|
||||||
新增用户
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="showSearchResults" class="customer-table">
|
|
||||||
<el-table :data="searchResults" border style="width: 100%">
|
|
||||||
<el-table-column prop="name" label="姓名" width="120" />
|
|
||||||
<el-table-column prop="phone" label="电话" width="150" />
|
|
||||||
<el-table-column prop="regionText" label="地区" width="200" />
|
|
||||||
<el-table-column prop="address" label="详细地址" width="200" />
|
|
||||||
<el-table-column prop="email" label="电子邮箱" width="200" />
|
|
||||||
<el-table-column prop="customer_type" label="代理商类型" width="120">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-tag :type="row.customer_type === 'VIP' ? 'danger' : 'info'">
|
|
||||||
{{ row.customer_type === 'VIP' ? '地区总代理' : '普通代理' }}
|
|
||||||
</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" width="150" fixed="right">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-button link type="primary" @click="editCustomer(row)">编辑</el-button>
|
|
||||||
<el-button link type="danger" @click="deleteCustomer(row.id)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div style="margin-top: 10px; color: #909399; font-size: 14px;">
|
|
||||||
找到 {{ searchResults.length }} 条结果
|
|
||||||
<el-button link type="primary" @click="clearSearch">清空搜索</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 新增客户表单 -->
|
|
||||||
<div v-if="showAddForm" class="customer-info-label">
|
|
||||||
<el-form :model="form" label-width="auto" style="max-width: 600px" label-position="top">
|
|
||||||
<el-form-item label="姓名">
|
|
||||||
<el-input v-model="form.name" placeholder="请输入姓名" />
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="电话">
|
|
||||||
<el-input v-model="form.phone" :controls="false" :min="0" :max="99999999999" :precision="0"
|
|
||||||
placeholder="请输入11位手机号" style="width: 100%" />
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="地区">
|
|
||||||
<el-cascader v-model="form.region" :options="regionData" :props="{ expandTrigger: 'hover' }"
|
|
||||||
placeholder="请选择省/市/区" clearable style="width: 100%" />
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="详细地址">
|
|
||||||
<el-input v-model="form.address" placeholder=" 请输入详细地址" />
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="电子邮箱">
|
|
||||||
<el-input v-model="form.email" placeholder=" 请输入邮箱地址" />
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="代理商类型">
|
|
||||||
<el-radio-group v-model="form.customer_type">
|
|
||||||
<el-radio value="VIP">地区总代理</el-radio>
|
|
||||||
<el-radio value="Normal">普通代理</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="saveCustomer">保存</el-button>
|
|
||||||
<el-button type="danger" @click="cancelAdd">取消</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>hello ,im 2</h1>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>hello ,im 3</h1>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,129 +1,256 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref} from 'vue'
|
import {ref, computed} from 'vue'
|
||||||
import {useRoute} from 'vue-router'
|
import {useRoute, useRouter} from 'vue-router'
|
||||||
|
import {ElMessageBox} from 'element-plus'
|
||||||
const route = useRoute()
|
|
||||||
|
const route = useRoute()
|
||||||
const isCollapse = ref(false)
|
const router = useRouter()
|
||||||
const switchFold = () => {
|
|
||||||
isCollapse.value = !isCollapse.value
|
const isCollapse = ref(false)
|
||||||
}
|
const switchFold = () => {
|
||||||
|
isCollapse.value = !isCollapse.value
|
||||||
|
}
|
||||||
</script>
|
|
||||||
|
// 获取当前用户信息
|
||||||
<template>
|
const userInfo = computed(() => {
|
||||||
<el-container style="height: 100vh">
|
try {
|
||||||
<el-header style="display: flex; align-items: center;">
|
return JSON.parse(localStorage.getItem('userInfo') || '{}')
|
||||||
<el-menu
|
} catch {
|
||||||
:ellipsis="false"
|
return {}
|
||||||
mode="horizontal"
|
}
|
||||||
router
|
})
|
||||||
style="flex: 1;"
|
|
||||||
>
|
const isAdmin = computed(() => userInfo.value.role === 'admin')
|
||||||
<!-- 左侧 -->
|
|
||||||
<el-menu-item index="">
|
// 退出登录
|
||||||
<h1 style="margin: 0;">信息管理系统</h1>
|
const handleLogout = async () => {
|
||||||
</el-menu-item>
|
try {
|
||||||
|
await ElMessageBox.confirm('确定退出登录？', '提示', {
|
||||||
<!-- 右侧：margin-left: auto 把它推到底部 -->
|
confirmButtonText: '确定',
|
||||||
<el-menu-item index="/login" style="margin-left: auto">
|
cancelButtonText: '取消',
|
||||||
<el-icon><SwitchButton/></el-icon>
|
type: 'warning',
|
||||||
<template #title>LogOut</template>
|
})
|
||||||
</el-menu-item>
|
localStorage.removeItem('token')
|
||||||
</el-menu>
|
localStorage.removeItem('userInfo')
|
||||||
</el-header>
|
router.push('/login')
|
||||||
|
} catch {
|
||||||
<el-container>
|
// 取消
|
||||||
<el-aside style="display: flex; flex-direction: column" width="200px">
|
}
|
||||||
<el-menu
|
}
|
||||||
:collapse="isCollapse"
|
</script>
|
||||||
:default-active="route.path"
|
|
||||||
router
|
<template>
|
||||||
style="flex: 1; display: flex; flex-direction: column"
|
<el-container style="height: 100vh">
|
||||||
>
|
<!-- 顶部导航栏 -->
|
||||||
<!-- <el-sub-menu index="1">
|
<el-header class="app-header">
|
||||||
<template #title>
|
<el-menu
|
||||||
<el-icon><IconMenu/></el-icon>
|
:ellipsis="false"
|
||||||
<span>一号栏</span>
|
mode="horizontal"
|
||||||
</template>
|
router
|
||||||
</el-sub-menu> -->
|
class="header-menu"
|
||||||
|
>
|
||||||
<el-menu-item index="/panel/home">
|
<!-- 左侧 Logo -->
|
||||||
<el-icon><House /></el-icon>
|
<el-menu-item index="" class="logo-item">
|
||||||
<template #title>首页</template>
|
<img src="../../public/logo.png" alt="logo" class="logo-img">
|
||||||
</el-menu-item>
|
<h1 class="logo-title">蜜雪冰城管理系统</h1>
|
||||||
|
</el-menu-item>
|
||||||
<el-menu-item index="/panel/page1">
|
|
||||||
<el-icon><Avatar /></el-icon>
|
<!-- 右侧用户信息 + 退出 -->
|
||||||
<template #title>客户管理</template>
|
<div class="header-right">
|
||||||
</el-menu-item>
|
<span class="user-name">{{ userInfo.real_name || userInfo.username || '用户' }}</span>
|
||||||
|
<el-button type="danger" text @click="handleLogout">
|
||||||
<el-menu-item index="/panel/page2">
|
<el-icon><SwitchButton /></el-icon>
|
||||||
<el-icon><Document /></el-icon>
|
退出登录
|
||||||
<template #title>合同管理</template>
|
</el-button>
|
||||||
</el-menu-item>
|
</div>
|
||||||
<el-menu-item index="/panel/page3">
|
</el-menu>
|
||||||
<el-icon><Service /></el-icon>
|
</el-header>
|
||||||
<template #title>售后管理</template>
|
|
||||||
</el-menu-item>
|
<el-container>
|
||||||
<el-menu-item index="/panel/page3">
|
<!-- 侧边栏 -->
|
||||||
<el-icon><IceTea /></el-icon>
|
<el-aside class="app-aside" :width="isCollapse ? '64px' : '200px'">
|
||||||
<template #title>产品管理</template>
|
<el-menu
|
||||||
</el-menu-item>
|
:collapse="isCollapse"
|
||||||
<el-menu-item index="/panel/page3">
|
:default-active="route.path"
|
||||||
<el-icon><User /></el-icon>
|
router
|
||||||
<template #title>员工管理</template>
|
class="aside-menu"
|
||||||
</el-menu-item>
|
>
|
||||||
|
<el-menu-item index="/panel/home">
|
||||||
<!-- ⭐ 关键：margin-top: auto 把它推到最底部 -->
|
<el-icon><House /></el-icon>
|
||||||
<el-menu-item style="margin-top: auto" @click="switchFold">
|
<template #title>首页</template>
|
||||||
<el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}" ><ArrowLeft /></el-icon>
|
</el-menu-item>
|
||||||
<template #title>收缩</template>
|
|
||||||
</el-menu-item>
|
<el-menu-item index="/panel/customer">
|
||||||
</el-menu>
|
<el-icon><Avatar /></el-icon>
|
||||||
</el-aside>
|
<template #title>客户管理</template>
|
||||||
|
</el-menu-item>
|
||||||
<el-main>
|
|
||||||
<!-- ⭐ 这个 router-view 渲染嵌套的子路由（page1/page2/page3） -->
|
<el-menu-item index="/panel/contract">
|
||||||
<router-view />
|
<el-icon><Document /></el-icon>
|
||||||
</el-main>
|
<template #title>合同管理</template>
|
||||||
</el-container>
|
</el-menu-item>
|
||||||
</el-container>
|
|
||||||
</template>
|
<el-menu-item index="/panel/service">
|
||||||
|
<el-icon><Service /></el-icon>
|
||||||
<style scoped>
|
<template #title>售后管理</template>
|
||||||
|
</el-menu-item>
|
||||||
.rotate-180-animation {
|
|
||||||
/* 修改为你想要的动画：旋转180度，执行一次，持续0.5秒 */
|
<el-menu-item index="/panel/product">
|
||||||
animation: rotate-180 0.3s ease-in-out;
|
<el-icon><Goods /></el-icon>
|
||||||
animation-fill-mode:forwards;
|
<template #title>产品管理</template>
|
||||||
}
|
</el-menu-item>
|
||||||
|
|
||||||
.rotate-180-animation-reverse {
|
<el-menu-item index="/panel/employee">
|
||||||
/* 修改为你想要的动画：旋转180度，执行一次，持续0.5秒 */
|
<el-icon><UserFilled /></el-icon>
|
||||||
animation: rotate-180-reverse 0.3s ease-in-out;
|
<template #title>员工管理</template>
|
||||||
animation-fill-mode:forwards;
|
</el-menu-item>
|
||||||
}
|
|
||||||
|
<!-- 用户管理仅管理员可见 -->
|
||||||
@keyframes rotate-180 {
|
<el-menu-item v-if="isAdmin" index="/panel/user">
|
||||||
from {
|
<el-icon><User /></el-icon>
|
||||||
transform: rotate(0deg);
|
<template #title>用户管理</template>
|
||||||
}
|
</el-menu-item>
|
||||||
to {
|
|
||||||
transform: rotate(180deg);
|
<!-- 底部收缩按钮 -->
|
||||||
}
|
<el-menu-item index="" class="collapse-btn" @click="switchFold">
|
||||||
}
|
<el-icon :class="{'rotate-180-animation':!isCollapse,'rotate-180-animation-reverse':isCollapse}">
|
||||||
|
<ArrowLeft />
|
||||||
@keyframes rotate-180-reverse {
|
</el-icon>
|
||||||
from {
|
<template #title>收缩</template>
|
||||||
transform: rotate(180deg);
|
</el-menu-item>
|
||||||
}
|
</el-menu>
|
||||||
to {
|
</el-aside>
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
<!-- 主内容区 -->
|
||||||
}
|
<el-main class="app-main">
|
||||||
|
<router-view />
|
||||||
|
</el-main>
|
||||||
</style>
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* ========== 顶部导航栏 ========== */
|
||||||
|
.app-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 2px solid #E60012;
|
||||||
|
padding: 0;
|
||||||
|
height: 60px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-menu {
|
||||||
|
flex: 1;
|
||||||
|
border-bottom: none !important;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #E60012;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 侧边栏 ========== */
|
||||||
|
.app-aside {
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
background: #fff;
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-menu {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-menu:not(.el-menu--collapse) {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 菜单项样式 */
|
||||||
|
.aside-menu .el-menu-item {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
margin: 4px 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #606266;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-menu .el-menu-item:hover {
|
||||||
|
background: #FEF0F0;
|
||||||
|
color: #E60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-menu .el-menu-item.is-active {
|
||||||
|
background: #E60012;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-menu .el-menu-item.is-active .el-icon {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部收缩按钮 */
|
||||||
|
.collapse-btn {
|
||||||
|
margin-top: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 主内容区 ========== */
|
||||||
|
.app-main {
|
||||||
|
padding: 20px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 收缩动画 ========== */
|
||||||
|
.rotate-180-animation {
|
||||||
|
animation: rotate-180 0.3s ease-in-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotate-180-animation-reverse {
|
||||||
|
animation: rotate-180-reverse 0.3s ease-in-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-180 {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(180deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-180-reverse {
|
||||||
|
from { transform: rotate(180deg); }
|
||||||
|
to { transform: rotate(0deg); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
213
src/components/product.vue
Normal file
213
src/components/product.vue
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-container">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<div class="search-bar">
|
||||||
|
<el-input v-model="search.name" placeholder="产品名称" clearable style="width: 200px" @keyup.enter="handleSearch" />
|
||||||
|
<el-input v-model="search.type" placeholder="产品类型" clearable style="width: 180px" @keyup.enter="handleSearch" />
|
||||||
|
<el-input v-model="search.supplier" placeholder="供应商" clearable style="width: 180px" @keyup.enter="handleSearch" />
|
||||||
|
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
||||||
|
<el-button @click="resetSearch">重置</el-button>
|
||||||
|
<el-button color="#E60012" @click="openAdd">新增产品</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table :data="tableData" border v-loading="loading" stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="60" />
|
||||||
|
<el-table-column prop="name" label="产品名称" min-width="150" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="type" label="类型" width="100" />
|
||||||
|
<el-table-column prop="quantity" label="库存" width="80" />
|
||||||
|
<el-table-column prop="price" label="单价" width="90">
|
||||||
|
<template #default="{ row }">¥{{ row.price }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="unit" label="单位" width="60" />
|
||||||
|
<el-table-column prop="specification" label="规格" width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="supplier" label="供应商" width="130" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="remark" label="备注" width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="150" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button link type="primary" @click="openEdit(row)">编辑</el-button>
|
||||||
|
<el-button link type="danger" @click="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination-bar">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="fetchList"
|
||||||
|
@current-change="fetchList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑产品' : '新增产品'" width="600px" destroy-on-close>
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="top">
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="产品名称" prop="name">
|
||||||
|
<el-input v-model="form.name" placeholder="产品名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="类型">
|
||||||
|
<el-input v-model="form.type" placeholder="产品类型" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="库存">
|
||||||
|
<el-input-number v-model="form.quantity" :min="0" controls-position="right" style="width:100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="单价">
|
||||||
|
<el-input-number v-model="form.price" :min="0" :precision="2" controls-position="right" style="width:100%" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-form-item label="单位">
|
||||||
|
<el-input v-model="form.unit" placeholder="件" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="规格">
|
||||||
|
<el-input v-model="form.specification" placeholder="产品规格/型号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="供应商">
|
||||||
|
<el-input v-model="form.supplier" placeholder="供应商名称" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注信息" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref, reactive, onMounted} from 'vue'
|
||||||
|
import {Search} from '@element-plus/icons-vue'
|
||||||
|
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||||
|
import {getProductList, createProduct, updateProduct, deleteProduct} from '../api/product'
|
||||||
|
|
||||||
|
const search = reactive({name: '', type: '', supplier: ''})
|
||||||
|
const loading = ref(false)
|
||||||
|
const tableData = ref([])
|
||||||
|
const pagination = reactive({page: 1, pageSize: 10, total: 0})
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const isEdit = ref(false)
|
||||||
|
const editId = ref(null)
|
||||||
|
const submitLoading = ref(false)
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
const defaultForm = () => ({
|
||||||
|
name: '', type: '', quantity: 0, price: 0, unit: '件',
|
||||||
|
specification: '', supplier: '', remark: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const form = reactive(defaultForm())
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: [{required: true, message: '请输入产品名称', trigger: 'blur'}],
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params = {page: pagination.page, pageSize: pagination.pageSize, ...search}
|
||||||
|
Object.keys(params).forEach(k => { if (!params[k]) delete params[k] })
|
||||||
|
const res = await getProductList(params)
|
||||||
|
tableData.value = res.data.list
|
||||||
|
pagination.total = res.data.total
|
||||||
|
} catch {} finally { loading.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => { pagination.page = 1; fetchList() }
|
||||||
|
const resetSearch = () => {
|
||||||
|
Object.assign(search, {name: '', type: '', supplier: ''})
|
||||||
|
handleSearch()
|
||||||
|
}
|
||||||
|
|
||||||
|
const openAdd = () => {
|
||||||
|
isEdit.value = false
|
||||||
|
editId.value = null
|
||||||
|
Object.assign(form, defaultForm())
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const openEdit = (row) => {
|
||||||
|
isEdit.value = true
|
||||||
|
editId.value = row.id
|
||||||
|
Object.assign(form, {
|
||||||
|
name: row.name || '', type: row.type || '', quantity: row.quantity ?? 0,
|
||||||
|
price: row.price ?? 0, unit: row.unit || '件', specification: row.specification || '',
|
||||||
|
supplier: row.supplier || '', remark: row.remark || '',
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
await formRef.value.validate()
|
||||||
|
submitLoading.value = true
|
||||||
|
try {
|
||||||
|
if (isEdit.value) {
|
||||||
|
await updateProduct(editId.value, {...form})
|
||||||
|
ElMessage.success('更新成功')
|
||||||
|
} else {
|
||||||
|
await createProduct({...form})
|
||||||
|
ElMessage.success('新增成功')
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
fetchList()
|
||||||
|
} catch {} finally { submitLoading.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定删除该产品？', '提示', {type: 'warning'})
|
||||||
|
await deleteProduct(id)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => { fetchList() })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.pagination-bar {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
237
src/components/service.vue
Normal file
237
src/components/service.vue
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-container">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<div class="search-bar">
|
||||||
|
<el-input v-model="search.customer_name" placeholder="客户名称" clearable style="width: 200px" @keyup.enter="handleSearch" />
|
||||||
|
<el-select v-model="search.handle_status" placeholder="处理状态" clearable style="width: 150px">
|
||||||
|
<el-option label="待处理" value="待处理" />
|
||||||
|
<el-option label="处理中" value="处理中" />
|
||||||
|
<el-option label="已完成" value="已完成" />
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
||||||
|
<el-button @click="resetSearch">重置</el-button>
|
||||||
|
<el-button color="#E60012" @click="openAdd">新增售后</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table :data="tableData" border v-loading="loading" stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="60" />
|
||||||
|
<el-table-column prop="customer_name" label="客户" width="100" />
|
||||||
|
<el-table-column prop="feedback" label="反馈内容" min-width="200" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="employee_name" label="处理人" width="100" />
|
||||||
|
<el-table-column prop="handle_method" label="处理方式" width="150" show-overflow-tooltip />
|
||||||
|
<el-table-column prop="handle_status" label="状态" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="statusType(row.handle_status)">{{ row.handle_status }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="service_date" label="售后日期" width="110">
|
||||||
|
<template #default="{ row }">{{ row.service_date?.slice(0, 10) || '-' }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="remark" label="备注" width="120" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="150" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button link type="primary" @click="openEdit(row)">编辑</el-button>
|
||||||
|
<el-button link type="danger" @click="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination-bar">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="fetchList"
|
||||||
|
@current-change="fetchList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑售后' : '新增售后'" width="600px" destroy-on-close>
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px" label-position="top">
|
||||||
|
<el-form-item label="客户" prop="customer_id">
|
||||||
|
<el-select v-model="form.customer_id" filterable placeholder="选择客户" style="width:100%">
|
||||||
|
<el-option v-for="c in customerOptions" :key="c.id" :label="c.name" :value="c.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="反馈内容" prop="feedback">
|
||||||
|
<el-input v-model="form.feedback" type="textarea" :rows="3" placeholder="客户反馈内容" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="处理人">
|
||||||
|
<el-select v-model="form.employee_id" filterable placeholder="选择处理人" clearable style="width:100%">
|
||||||
|
<el-option v-for="e in employeeOptions" :key="e.id" :label="e.name" :value="e.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="处理状态">
|
||||||
|
<el-select v-model="form.handle_status" style="width:100%">
|
||||||
|
<el-option label="待处理" value="待处理" />
|
||||||
|
<el-option label="处理中" value="处理中" />
|
||||||
|
<el-option label="已完成" value="已完成" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-form-item label="售后日期">
|
||||||
|
<el-date-picker v-model="form.service_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width:100%" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理方式">
|
||||||
|
<el-input v-model="form.handle_method" type="textarea" :rows="2" placeholder="处理方式/解决方案" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注信息" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref, reactive, onMounted} from 'vue'
|
||||||
|
import {Search} from '@element-plus/icons-vue'
|
||||||
|
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||||
|
import {getAfterSalesList, createAfterSales, updateAfterSales, deleteAfterSales} from '../api/afterSales'
|
||||||
|
import {getCustomerList} from '../api/customer'
|
||||||
|
import {getEmployeeList} from '../api/employee'
|
||||||
|
|
||||||
|
const search = reactive({customer_name: '', handle_status: ''})
|
||||||
|
const loading = ref(false)
|
||||||
|
const tableData = ref([])
|
||||||
|
const pagination = reactive({page: 1, pageSize: 10, total: 0})
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const isEdit = ref(false)
|
||||||
|
const editId = ref(null)
|
||||||
|
const submitLoading = ref(false)
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
const customerOptions = ref([])
|
||||||
|
const employeeOptions = ref([])
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
customer_id: null, feedback: '', employee_id: null,
|
||||||
|
handle_method: '', handle_status: '待处理', service_date: '', remark: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
customer_id: [{required: true, message: '请选择客户', trigger: 'change'}],
|
||||||
|
feedback: [{required: true, message: '请输入反馈内容', trigger: 'blur'}],
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusType = (s) => ({'待处理': 'warning', '处理中': 'info', '已完成': 'success'}[s] || 'info')
|
||||||
|
|
||||||
|
const fetchList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params = {page: pagination.page, pageSize: pagination.pageSize, ...search}
|
||||||
|
Object.keys(params).forEach(k => { if (!params[k]) delete params[k] })
|
||||||
|
const res = await getAfterSalesList(params)
|
||||||
|
tableData.value = res.data.list
|
||||||
|
pagination.total = res.data.total
|
||||||
|
} catch {} finally { loading.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadOptions = async () => {
|
||||||
|
try {
|
||||||
|
const [cRes, eRes] = await Promise.all([
|
||||||
|
getCustomerList({pageSize: 100}),
|
||||||
|
getEmployeeList({pageSize: 100}),
|
||||||
|
])
|
||||||
|
customerOptions.value = cRes.data.list
|
||||||
|
employeeOptions.value = eRes.data.list
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => { pagination.page = 1; fetchList() }
|
||||||
|
const resetSearch = () => {
|
||||||
|
Object.assign(search, {customer_name: '', handle_status: ''})
|
||||||
|
handleSearch()
|
||||||
|
}
|
||||||
|
|
||||||
|
const openAdd = () => {
|
||||||
|
isEdit.value = false
|
||||||
|
editId.value = null
|
||||||
|
Object.assign(form, {
|
||||||
|
customer_id: null, feedback: '', employee_id: null,
|
||||||
|
handle_method: '', handle_status: '待处理', service_date: '', remark: '',
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const openEdit = (row) => {
|
||||||
|
isEdit.value = true
|
||||||
|
editId.value = row.id
|
||||||
|
Object.assign(form, {
|
||||||
|
customer_id: row.customer_id,
|
||||||
|
feedback: row.feedback || '',
|
||||||
|
employee_id: row.employee_id,
|
||||||
|
handle_method: row.handle_method || '',
|
||||||
|
handle_status: row.handle_status || '待处理',
|
||||||
|
service_date: row.service_date?.slice(0, 10) || '',
|
||||||
|
remark: row.remark || '',
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
await formRef.value.validate()
|
||||||
|
submitLoading.value = true
|
||||||
|
try {
|
||||||
|
const payload = {...form}
|
||||||
|
if (!payload.employee_id) payload.employee_id = null
|
||||||
|
if (!payload.service_date) payload.service_date = null
|
||||||
|
if (isEdit.value) {
|
||||||
|
await updateAfterSales(editId.value, payload)
|
||||||
|
ElMessage.success('更新成功')
|
||||||
|
} else {
|
||||||
|
await createAfterSales(payload)
|
||||||
|
ElMessage.success('新增成功')
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
fetchList()
|
||||||
|
} catch {} finally { submitLoading.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定删除该售后记录？', '提示', {type: 'warning'})
|
||||||
|
await deleteAfterSales(id)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => { fetchList(); loadOptions() })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.pagination-bar {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
216
src/components/user.vue
Normal file
216
src/components/user.vue
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-container">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<div class="search-bar">
|
||||||
|
<el-input v-model="search.username" placeholder="用户名" clearable style="width: 200px" @keyup.enter="handleSearch" />
|
||||||
|
<el-select v-model="search.role" placeholder="角色" clearable style="width: 130px">
|
||||||
|
<el-option label="管理员" value="admin" />
|
||||||
|
<el-option label="普通用户" value="user" />
|
||||||
|
</el-select>
|
||||||
|
<el-select v-model="search.status" placeholder="状态" clearable style="width: 130px">
|
||||||
|
<el-option label="启用" :value="1" />
|
||||||
|
<el-option label="禁用" :value="0" />
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
||||||
|
<el-button @click="resetSearch">重置</el-button>
|
||||||
|
<el-button color="#E60012" @click="openAdd">新增用户</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table :data="tableData" border v-loading="loading" stripe>
|
||||||
|
<el-table-column prop="id" label="ID" width="60" />
|
||||||
|
<el-table-column prop="username" label="用户名" width="120" />
|
||||||
|
<el-table-column prop="real_name" label="真实姓名" width="120" />
|
||||||
|
<el-table-column prop="role" label="角色" width="100">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.role === 'admin' ? 'danger' : 'info'">
|
||||||
|
{{ row.role === 'admin' ? '管理员' : '普通用户' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="status" label="状态" width="80">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="row.status === 1 ? 'success' : 'danger'">{{ row.status === 1 ? '启用' : '禁用' }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="created_at" label="创建时间" width="170">
|
||||||
|
<template #default="{ row }">{{ row.created_at?.slice(0, 19)?.replace('T', ' ') || '-' }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="200" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button link type="primary" @click="openEdit(row)">编辑</el-button>
|
||||||
|
<el-button link type="warning" @click="resetPwd(row.id)">重置密码</el-button>
|
||||||
|
<el-button link type="danger" @click="handleDelete(row.id)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination-bar">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.page"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="fetchList"
|
||||||
|
@current-change="fetchList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<el-dialog v-model="dialogVisible" :title="isEdit ? '编辑用户' : '新增用户'" width="500px" destroy-on-close>
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px" label-position="top">
|
||||||
|
<el-form-item label="用户名" prop="username">
|
||||||
|
<el-input v-model="form.username" placeholder="3-50个字符" :disabled="isEdit" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="!isEdit" label="密码" prop="password">
|
||||||
|
<el-input v-model="form.password" type="password" show-password placeholder="至少6位" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="真实姓名">
|
||||||
|
<el-input v-model="form.real_name" placeholder="真实姓名" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-row :gutter="16">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="角色">
|
||||||
|
<el-select v-model="form.role" style="width:100%">
|
||||||
|
<el-option label="管理员" value="admin" />
|
||||||
|
<el-option label="普通用户" value="user" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-select v-model="form.status" style="width:100%">
|
||||||
|
<el-option label="启用" :value="1" />
|
||||||
|
<el-option label="禁用" :value="0" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref, reactive, onMounted} from 'vue'
|
||||||
|
import {Search} from '@element-plus/icons-vue'
|
||||||
|
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||||
|
import {getUserList, createUser, updateUser, deleteUser} from '../api/user'
|
||||||
|
|
||||||
|
const search = reactive({username: '', role: '', status: ''})
|
||||||
|
const loading = ref(false)
|
||||||
|
const tableData = ref([])
|
||||||
|
const pagination = reactive({page: 1, pageSize: 10, total: 0})
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const isEdit = ref(false)
|
||||||
|
const editId = ref(null)
|
||||||
|
const submitLoading = ref(false)
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
username: '', password: '', real_name: '', role: 'user', status: 1,
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
username: [{required: true, message: '请输入用户名', trigger: 'blur'}, {min: 3, max: 50, message: '3-50个字符', trigger: 'blur'}],
|
||||||
|
password: [{required: true, message: '请输入密码', trigger: 'blur'}, {min: 6, message: '至少6位', trigger: 'blur'}],
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const params = {page: pagination.page, pageSize: pagination.pageSize, ...search}
|
||||||
|
Object.keys(params).forEach(k => { if (params[k] === '' || params[k] === null) delete params[k] })
|
||||||
|
const res = await getUserList(params)
|
||||||
|
tableData.value = res.data.list
|
||||||
|
pagination.total = res.data.total
|
||||||
|
} catch {} finally { loading.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => { pagination.page = 1; fetchList() }
|
||||||
|
const resetSearch = () => {
|
||||||
|
Object.assign(search, {username: '', role: '', status: ''})
|
||||||
|
handleSearch()
|
||||||
|
}
|
||||||
|
|
||||||
|
const openAdd = () => {
|
||||||
|
isEdit.value = false
|
||||||
|
editId.value = null
|
||||||
|
Object.assign(form, {username: '', password: '', real_name: '', role: 'user', status: 1})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const openEdit = (row) => {
|
||||||
|
isEdit.value = true
|
||||||
|
editId.value = row.id
|
||||||
|
Object.assign(form, {
|
||||||
|
username: row.username, password: '', real_name: row.real_name || '',
|
||||||
|
role: row.role, status: row.status,
|
||||||
|
})
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!formRef.value) return
|
||||||
|
await formRef.value.validate()
|
||||||
|
submitLoading.value = true
|
||||||
|
try {
|
||||||
|
if (isEdit.value) {
|
||||||
|
const payload = {real_name: form.real_name, role: form.role, status: form.status}
|
||||||
|
await updateUser(editId.value, payload)
|
||||||
|
ElMessage.success('更新成功')
|
||||||
|
} else {
|
||||||
|
await createUser({username: form.username, password: form.password, real_name: form.real_name, role: form.role, status: form.status})
|
||||||
|
ElMessage.success('新增成功')
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
fetchList()
|
||||||
|
} catch {} finally { submitLoading.value = false }
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetPwd = async (id) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('将密码重置为 123456，确定？', '重置密码', {type: 'warning'})
|
||||||
|
await updateUser(id, {password: '123456'})
|
||||||
|
ElMessage.success('密码已重置为 123456')
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (id) => {
|
||||||
|
try {
|
||||||
|
await ElMessageBox.confirm('确定删除该用户？', '提示', {type: 'warning'})
|
||||||
|
await deleteUser(id)
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => { fetchList() })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.page-container {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.pagination-bar {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
35
src/main.js
35
src/main.js
@@ -1,18 +1,17 @@
|
|||||||
import { createPinia } from 'pinia'
|
import {createApp} from 'vue'
|
||||||
import {createApp} from 'vue'
|
import './style.css'
|
||||||
import './style.css'
|
import ElementPlus from 'element-plus'
|
||||||
import ElementPlus from 'element-plus'
|
import 'element-plus/dist/index.css'
|
||||||
import 'element-plus/dist/index.css'
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
import App from './App.vue'
|
||||||
import App from './App.vue'
|
import router from './router'
|
||||||
import router from './router'
|
|
||||||
|
const app = createApp(App)
|
||||||
const app = createApp(App)
|
|
||||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
app.component(key, component)
|
||||||
app.component(key, component)
|
}
|
||||||
}
|
|
||||||
|
app.use(ElementPlus)
|
||||||
app.use(ElementPlus)
|
app.use(router)
|
||||||
app.use(router)
|
app.mount('#app')
|
||||||
router.isReady().then(() => app.mount('#app'))
|
|
||||||
|
|||||||
@@ -1,43 +1,49 @@
|
|||||||
import {createRouter, createWebHistory} from "vue-router";
|
import {createRouter, createWebHistory} from "vue-router";
|
||||||
import Login from "./components/Login.vue";
|
import Login from "./components/Login.vue";
|
||||||
import Home from "./components/home.vue"
|
import Home from "./components/home.vue"
|
||||||
import Panel from "./components/panel.vue";
|
import Panel from "./components/panel.vue";
|
||||||
import Page1 from "./components/page1.vue";
|
import Customer from "./components/customer.vue";
|
||||||
import Page2 from "./components/page2.vue";
|
import Contract from "./components/contract.vue";
|
||||||
import Page3 from "./components/page3.vue";
|
import Service from "./components/service.vue";
|
||||||
|
import Employee from "./components/employee.vue";
|
||||||
const routes = [
|
import Product from "./components/product.vue";
|
||||||
{ path: "/", redirect: "/login" },
|
import User from "./components/user.vue";
|
||||||
{ path: "/login", component: Login },
|
|
||||||
{
|
const routes = [
|
||||||
path: "/panel",
|
{ path: "/", redirect: "/login" },
|
||||||
component: Panel,
|
{ path: "/login", component: Login },
|
||||||
redirect: "/panel/home",
|
{
|
||||||
children: [
|
path: "/panel",
|
||||||
{ path: "home", component:Home},
|
component: Panel,
|
||||||
{ path: "page1", component: Page1 },
|
redirect: "/panel/home",
|
||||||
{ path: "page2", component: Page2 },
|
meta: { requiresAuth: true },
|
||||||
{ path: "page3", component: Page3 },
|
children: [
|
||||||
],
|
{ path: "home", component: Home },
|
||||||
},
|
{ path: "customer", component: Customer },
|
||||||
]
|
{ path: "contract", component: Contract },
|
||||||
|
{ path: "service", component: Service },
|
||||||
const router = createRouter({
|
{ path: "employee", component: Employee },
|
||||||
history: createWebHistory(),
|
{ path: "product", component: Product },
|
||||||
routes,
|
{ path: "user", component: User },
|
||||||
})
|
],
|
||||||
|
},
|
||||||
router.beforeEach((to, from, next) => {
|
]
|
||||||
const token = localStorage.getItem("bm_token");
|
|
||||||
if (to.meta['requiresAuth'] && !token) {
|
const router = createRouter({
|
||||||
return next('/login');
|
history: createWebHistory(),
|
||||||
}
|
routes,
|
||||||
if (to.path === "/login" && token) {
|
})
|
||||||
return next('/panel');
|
|
||||||
}
|
// 路由守卫：未登录时跳转到登录页
|
||||||
next()
|
router.beforeEach((to, from, next) => {
|
||||||
})
|
const token = localStorage.getItem('token')
|
||||||
|
if (to.path !== '/login' && !token) {
|
||||||
|
next('/login')
|
||||||
|
} else if (to.path === '/login' && token) {
|
||||||
export default router;
|
next('/panel')
|
||||||
|
} else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router;
|
||||||
|
|||||||
@@ -1,38 +0,0 @@
|
|||||||
import {defineStore} from "pinia";
|
|
||||||
import {ref} from "vue";
|
|
||||||
import {login as loginApi, getUserInfo, logout as logoutApi} from "@/api/user.js";
|
|
||||||
|
|
||||||
const TOKEN_KEY = 'bm_token'
|
|
||||||
|
|
||||||
export const useUserStore = defineStore('user', () => {
|
|
||||||
const token = ref(localStorage.getItem(TOKEN_KEY) || '')
|
|
||||||
const userInfo = ref({})
|
|
||||||
|
|
||||||
async function login(form) {
|
|
||||||
const data = await loginApi(form)
|
|
||||||
token.value = data.token
|
|
||||||
userInfo.value = data.user
|
|
||||||
localStorage.setItem(TOKEN_KEY, data.token)
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchUserInfo() {
|
|
||||||
const data = await getUserInfo()
|
|
||||||
userInfo.value = data
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
|
|
||||||
async function logout() {
|
|
||||||
try {
|
|
||||||
await logoutApi()
|
|
||||||
} catch (_) {
|
|
||||||
|
|
||||||
}
|
|
||||||
token.value = ''
|
|
||||||
userInfo.value = {}
|
|
||||||
localStorage.removeItem(TOKEN_KEY)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {token, userInfo, logout, login, fetchUserInfo}
|
|
||||||
|
|
||||||
})
|
|
||||||
54
src/utils/request.js
Normal file
54
src/utils/request.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
// utils/request.js —— axios 实例：自动带 token、统一错误处理
|
||||||
|
import axios from 'axios'
|
||||||
|
import {ElMessage} from 'element-plus'
|
||||||
|
import router from '../router'
|
||||||
|
|
||||||
|
const request = axios.create({
|
||||||
|
baseURL: '/api',
|
||||||
|
timeout: 10000,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 请求拦截器：自动携带 token
|
||||||
|
request.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
const token = localStorage.getItem('token')
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
(error) => Promise.reject(error)
|
||||||
|
)
|
||||||
|
|
||||||
|
// 响应拦截器：统一错误提示
|
||||||
|
request.interceptors.response.use(
|
||||||
|
(res) => {
|
||||||
|
const {code, message} = res.data
|
||||||
|
// 后端 code === 0 或 code === 200 表示成功
|
||||||
|
if (code === 0 || code === 200) {
|
||||||
|
return res.data
|
||||||
|
}
|
||||||
|
ElMessage.error(message || '请求失败')
|
||||||
|
return Promise.reject(new Error(message))
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
if (error.response) {
|
||||||
|
const {status, data} = error.response
|
||||||
|
if (status === 401) {
|
||||||
|
ElMessage.error('登录已过期，请重新登录')
|
||||||
|
localStorage.removeItem('token')
|
||||||
|
localStorage.removeItem('userInfo')
|
||||||
|
router.push('/login')
|
||||||
|
} else if (status === 403) {
|
||||||
|
ElMessage.error(data?.message || '没有权限')
|
||||||
|
} else {
|
||||||
|
ElMessage.error(data?.message || '服务器错误')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error('网络异常，请检查连接')
|
||||||
|
}
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default request
|
||||||
@@ -1,22 +1,15 @@
|
|||||||
import {defineConfig} from 'vite'
|
import {defineConfig} from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import { fileURLToPath, URL } from 'node:url'
|
|
||||||
|
// https://vite.dev/config/
|
||||||
// https://vite.dev/config/
|
export default defineConfig({
|
||||||
export default defineConfig({
|
plugins: [vue()],
|
||||||
plugins: [vue()],
|
server: {
|
||||||
resolve: {
|
proxy: {
|
||||||
alias: {
|
'/api': {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url)), //代码里写 @/api/user 时，自动当成 ./src/api/user 来找文件
|
target: 'http://127.0.0.1:3000',
|
||||||
},
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
server: {
|
},
|
||||||
port: 5173,
|
},
|
||||||
proxy: {
|
})
|
||||||
'/api': {
|
|
||||||
target: 'http://localhost:3000',
|
|
||||||
changeOrigin: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|||||||
Reference in New Issue
Block a user