2026-4-30:
1.后端代码初始化
This commit is contained in:
1
rc_autoplc_front/.env.development
Normal file
1
rc_autoplc_front/.env.development
Normal file
@@ -0,0 +1 @@
|
||||
VITE_API_URL=http://223.71.122.54:9090
|
||||
1
rc_autoplc_front/.env.production
Normal file
1
rc_autoplc_front/.env.production
Normal file
@@ -0,0 +1 @@
|
||||
VITE_API_URL=http://223.71.122.54:9090
|
||||
36
rc_autoplc_front/.gitignore
vendored
Normal file
36
rc_autoplc_front/.gitignore
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
||||
.eslintcache
|
||||
|
||||
# Cypress
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Vitest
|
||||
__screenshots__/
|
||||
3
rc_autoplc_front/.vscode/extensions.json
vendored
Normal file
3
rc_autoplc_front/.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
42
rc_autoplc_front/README.md
Normal file
42
rc_autoplc_front/README.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# rc_autoplc_front
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Recommended Browser Setup
|
||||
|
||||
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
|
||||
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
||||
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
|
||||
- Firefox:
|
||||
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
||||
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
1
rc_autoplc_front/env.d.ts
vendored
Normal file
1
rc_autoplc_front/env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
13
rc_autoplc_front/index.html
Normal file
13
rc_autoplc_front/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
3575
rc_autoplc_front/package-lock.json
generated
Normal file
3575
rc_autoplc_front/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
rc_autoplc_front/package.json
Normal file
35
rc_autoplc_front/package.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "rc_autoplc_front",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.13.2",
|
||||
"element-plus": "^2.12.0",
|
||||
"pinia": "^3.0.4",
|
||||
"pinia-plugin-persistedstate": "^4.7.1",
|
||||
"vue": "^3.5.25",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node24": "^24.0.3",
|
||||
"@types/node": "^24.10.1",
|
||||
"@vitejs/plugin-vue": "^6.0.2",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"npm-run-all2": "^8.0.4",
|
||||
"typescript": "~5.9.0",
|
||||
"vite": "^7.2.4",
|
||||
"vite-plugin-vue-devtools": "^8.0.5",
|
||||
"vue-tsc": "^3.1.5"
|
||||
}
|
||||
}
|
||||
BIN
rc_autoplc_front/public/favicon.ico
Normal file
BIN
rc_autoplc_front/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
71
rc_autoplc_front/src/App.vue
Normal file
71
rc_autoplc_front/src/App.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
rc_autoplc_front/src/api/system/department.ts
Normal file
46
rc_autoplc_front/src/api/system/department.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function departmentadd(data: any) {
|
||||
return request({
|
||||
url: '/depart/add',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function departmentdel(id: string | number) {
|
||||
return request({
|
||||
url: `/depart/del/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
export function departupd(data: any) {
|
||||
return request({
|
||||
url: '/depart/update',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function departlist(data: any) {
|
||||
return request({
|
||||
url: '/depart/listPage',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function departbyid(id: string | number) {
|
||||
return request({
|
||||
url: `/depart/getById/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function departtree() {
|
||||
return request({
|
||||
url: `/depart/tree`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
39
rc_autoplc_front/src/api/system/manage-log.ts
Normal file
39
rc_autoplc_front/src/api/system/manage-log.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function managelogadd(data: any) {
|
||||
return request({
|
||||
url: '/manage-log/add',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function managelogdel(id: string | number) {
|
||||
return request({
|
||||
url: `/manage-log/del/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
export function managelogupd(data: any) {
|
||||
return request({
|
||||
url: '/manage-log/update',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function manageloglist(data: any) {
|
||||
return request({
|
||||
url: '/manage-log/listPage',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function managelogbyid(id: string | number) {
|
||||
return request({
|
||||
url: `/manage-log/getById/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
46
rc_autoplc_front/src/api/system/position.ts
Normal file
46
rc_autoplc_front/src/api/system/position.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function positionadd(data: any) {
|
||||
return request({
|
||||
url: '/position/add',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function positiondel(id: string | number) {
|
||||
return request({
|
||||
url: `/position/del/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
export function positionupd(data: any) {
|
||||
return request({
|
||||
url: '/position/update',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function positionlist(data: any) {
|
||||
return request({
|
||||
url: '/position/listPage',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function positionbyid(id: string | number) {
|
||||
return request({
|
||||
url: `/position/getById/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function positionselect() {
|
||||
return request({
|
||||
url: `/position/list`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
47
rc_autoplc_front/src/api/system/role.ts
Normal file
47
rc_autoplc_front/src/api/system/role.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function roleadd(data: any) {
|
||||
return request({
|
||||
url: '/role/add',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function roledel(id: string | number) {
|
||||
return request({
|
||||
url: `/role/del/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
export function roleupd(data: any) {
|
||||
return request({
|
||||
url: '/role/update',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function rolelist(data: any) {
|
||||
return request({
|
||||
url: '/role/listPage',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function rolebyid(id: string | number) {
|
||||
return request({
|
||||
url: `/role/getById/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function rleselect(data: any) {
|
||||
return request({
|
||||
url: '/role/list',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
67
rc_autoplc_front/src/api/system/user-role.ts
Normal file
67
rc_autoplc_front/src/api/system/user-role.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 新增用户角色关联
|
||||
export function userRoleAdd(data: any) {
|
||||
return request({
|
||||
url: '/user-role/add',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 根据ID删除用户角色关联
|
||||
export function userRoleDel(id: string | number) {
|
||||
return request({
|
||||
url: `/user-role/del/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
// 分页查询用户角色关联列表
|
||||
export function userRoleList(data: any) {
|
||||
return request({
|
||||
url: '/user-role/listPage',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 根据ID查询用户角色关联
|
||||
export function userRoleById(id: string | number) {
|
||||
return request({
|
||||
url: `/user-role/getById/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 根据角色ID查询关联用户(先封装不调用)
|
||||
export function userRoleByRoleId(roleId: string | number) {
|
||||
return request({
|
||||
url: `/user-role/role/${roleId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 根据角色ID删除所有关联(先封装不调用)
|
||||
export function userRoleDelByRoleId(roleId: string | number) {
|
||||
return request({
|
||||
url: `/user-role/role/${roleId}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
// 根据用户ID查询关联角色(先封装不调用)
|
||||
export function userRoleByUserId(userId: string | number) {
|
||||
return request({
|
||||
url: `/user-role/user/${userId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 根据用户ID删除所有关联(先封装不调用)
|
||||
export function userRoleDelByUserId(userId: string | number) {
|
||||
return request({
|
||||
url: `/user-role/user/${userId}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
47
rc_autoplc_front/src/api/system/user.ts
Normal file
47
rc_autoplc_front/src/api/system/user.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function useradd(data: any) {
|
||||
return request({
|
||||
url: '/user/add',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function userdel(id: string | number) {
|
||||
return request({
|
||||
url: `/user/del/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
export function userupd(data: any) {
|
||||
return request({
|
||||
url: '/user/update',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function userlist(data: any) {
|
||||
return request({
|
||||
url: '/user/listPage',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function userselect(data: any) {
|
||||
return request({
|
||||
url: '/user/list',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function userbyid(id: string | number) {
|
||||
return request({
|
||||
url: `/user/getById/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
47
rc_autoplc_front/src/api/tb/devinfo.ts
Normal file
47
rc_autoplc_front/src/api/tb/devinfo.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function devInfoadd(data: any) {
|
||||
return request({
|
||||
url: '/devInfo/add',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function devInfodel(id: string | number) {
|
||||
return request({
|
||||
url: `/devInfo/del/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
export function devInfoupd(data: any) {
|
||||
return request({
|
||||
url: '/devInfo/update',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function devInfolist(data: any) {
|
||||
return request({
|
||||
url: '/devInfo/listPage',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function devInfobyid(id: string | number) {
|
||||
return request({
|
||||
url: `/devInfo/getById/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function devselect(data: any) {
|
||||
return request({
|
||||
url: '/devInfo/all',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
47
rc_autoplc_front/src/api/tb/devparam.ts
Normal file
47
rc_autoplc_front/src/api/tb/devparam.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function devparamadd(data: any) {
|
||||
return request({
|
||||
url: '/devParam/add',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function devparamdel(id: string | number) {
|
||||
return request({
|
||||
url: `/devParam/del/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
export function devparamupd(data: any) {
|
||||
return request({
|
||||
url: '/devParam/update',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function devparamlist(data: any) {
|
||||
return request({
|
||||
url: '/devParam/listPage',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function devparambyid(id: string | number) {
|
||||
return request({
|
||||
url: `/devParam/getById/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function devparamselect(data: any) {
|
||||
return request({
|
||||
url: '/devParam/list',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
39
rc_autoplc_front/src/api/tb/islandinfo.ts
Normal file
39
rc_autoplc_front/src/api/tb/islandinfo.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function islandInfoadd(data: any) {
|
||||
return request({
|
||||
url: '/islandInfo/add',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function islandInfodel(id: string | number) {
|
||||
return request({
|
||||
url: `/islandInfo/del/${id}`,
|
||||
method: 'delete',
|
||||
})
|
||||
}
|
||||
|
||||
export function islandInfoupd(data: any) {
|
||||
return request({
|
||||
url: '/islandInfo/update',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function islandInfolist(data: any) {
|
||||
return request({
|
||||
url: '/islandInfo/listPage',
|
||||
method: 'get',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function islandInfobyid(id: string | number) {
|
||||
return request({
|
||||
url: `/islandInfo/getById/${id}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
86
rc_autoplc_front/src/assets/base.css
Normal file
86
rc_autoplc_front/src/assets/base.css
Normal file
@@ -0,0 +1,86 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
BIN
rc_autoplc_front/src/assets/image/right.png
Normal file
BIN
rc_autoplc_front/src/assets/image/right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
1
rc_autoplc_front/src/assets/logo.svg
Normal file
1
rc_autoplc_front/src/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
35
rc_autoplc_front/src/assets/main.css
Normal file
35
rc_autoplc_front/src/assets/main.css
Normal file
@@ -0,0 +1,35 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
41
rc_autoplc_front/src/components/HelloWorld.vue
Normal file
41
rc_autoplc_front/src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
msg: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
95
rc_autoplc_front/src/components/TheWelcome.vue
Normal file
95
rc_autoplc_front/src/components/TheWelcome.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
|
||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||
+
|
||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
|
||||
>Vue - Official</a
|
||||
>. If you need to test your components and web pages, check out
|
||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||
and
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||
/
|
||||
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in
|
||||
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||
>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||
(our official Discord server), or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also follow the official
|
||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||
Bluesky account or the
|
||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
X account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
87
rc_autoplc_front/src/components/WelcomeItem.vue
Normal file
87
rc_autoplc_front/src/components/WelcomeItem.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
rc_autoplc_front/src/components/icons/IconCommunity.vue
Normal file
7
rc_autoplc_front/src/components/icons/IconCommunity.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
7
rc_autoplc_front/src/components/icons/IconEcosystem.vue
Normal file
7
rc_autoplc_front/src/components/icons/IconEcosystem.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
7
rc_autoplc_front/src/components/icons/IconSupport.vue
Normal file
7
rc_autoplc_front/src/components/icons/IconSupport.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
19
rc_autoplc_front/src/components/icons/IconTooling.vue
Normal file
19
rc_autoplc_front/src/components/icons/IconTooling.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
23
rc_autoplc_front/src/main.ts
Normal file
23
rc_autoplc_front/src/main.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// 创建 Pinia 实例并配置持久化插件
|
||||
const pinia = createPinia()
|
||||
pinia.use(piniaPluginPersistedstate)
|
||||
|
||||
app.use(ElementPlus, {
|
||||
locale: zhCn,
|
||||
})
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
71
rc_autoplc_front/src/router/index.ts
Normal file
71
rc_autoplc_front/src/router/index.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('../views/Layout.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/user',
|
||||
name: 'user',
|
||||
component: () => import('../views/user/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/role',
|
||||
name: 'role',
|
||||
component: () => import('../views/role/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/department',
|
||||
name: 'department',
|
||||
component: () => import('../views/department/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/position',
|
||||
name: 'position',
|
||||
component: () => import('../views/position/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/manage-log',
|
||||
name: 'manage-log',
|
||||
component: () => import('../views/manage-log/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/user-role',
|
||||
name: 'user-role',
|
||||
component: () => import('../views/user-role/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/island-info',
|
||||
name: 'island-info',
|
||||
component: () => import('../views/islandInfo/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/devinfo',
|
||||
name: 'devinfo',
|
||||
component: () => import('../views/devinfo/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/plc-devinfo',
|
||||
name: 'plc-devinfo',
|
||||
component: () => import('../views/devinfo/plc.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
// 添加全局路由守卫
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// const token = localStorage.getItem('token')
|
||||
|
||||
// if (to.path !== '/login' && !token) {
|
||||
// next('/login')
|
||||
// } else {
|
||||
// next()
|
||||
// }
|
||||
// })
|
||||
|
||||
export default router
|
||||
38
rc_autoplc_front/src/router/permission.ts
Normal file
38
rc_autoplc_front/src/router/permission.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
// import router from './index' // 导入你的路由实例(与index.ts对应)
|
||||
// import { ElMessage } from 'element-plus'
|
||||
// import { useAuthStore } from '@/stores/auth' // 你的Pinia auth store路径
|
||||
|
||||
// // 路由前置守卫:每次路由跳转前执行
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// const authStore = useAuthStore() // 获取auth store实例
|
||||
// const token = authStore.getToken() // 调用你的getToken()方法获取token
|
||||
|
||||
// // 1. 如果访问登录页
|
||||
// if (to.path === '/login') {
|
||||
// // 已登录状态下访问登录页,自动跳转到首页/dashboard
|
||||
// if (token) {
|
||||
// next('/dashboard')
|
||||
// ElMessage.success('已登录,自动跳转')
|
||||
// } else {
|
||||
// // 未登录,正常进入登录页
|
||||
// next()
|
||||
// }
|
||||
// return
|
||||
// }
|
||||
|
||||
// // 2. 访问非登录页,但未登录(无token)
|
||||
// if (!token) {
|
||||
// ElMessage.warning('请先登录')
|
||||
// next('/login') // 强制跳转到登录页
|
||||
// return
|
||||
// }
|
||||
|
||||
// // 3. 访问根路径,自动跳转到dashboard
|
||||
// if (to.path === '/') {
|
||||
// next('/dashboard')
|
||||
// return
|
||||
// }
|
||||
|
||||
// // 4. 已登录且访问合法页面,正常放行
|
||||
// next()
|
||||
// })
|
||||
27
rc_autoplc_front/src/stores/auth.ts
Normal file
27
rc_autoplc_front/src/stores/auth.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const token = ref<string>('')
|
||||
|
||||
function setToken(newToken: string) {
|
||||
token.value = newToken
|
||||
}
|
||||
|
||||
function getToken(): string {
|
||||
return token.value
|
||||
}
|
||||
|
||||
function removeToken() {
|
||||
token.value = ''
|
||||
}
|
||||
|
||||
return {
|
||||
token,
|
||||
setToken,
|
||||
getToken,
|
||||
removeToken,
|
||||
}
|
||||
}, {
|
||||
persist: true,
|
||||
})
|
||||
91
rc_autoplc_front/src/utils/request.ts
Normal file
91
rc_autoplc_front/src/utils/request.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import axios from 'axios'
|
||||
import type { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse } from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import router from '@/router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
// 创建 axios 实例
|
||||
const request: AxiosInstance = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL, // 从环境变量读取
|
||||
timeout: 10000, // 10秒超时
|
||||
})
|
||||
|
||||
// Token 管理器(使用 Pinia)
|
||||
const TokenManager = {
|
||||
setToken(token: string) {
|
||||
const authStore = useAuthStore()
|
||||
authStore.setToken(token)
|
||||
// 同时设置默认请求头
|
||||
request.defaults.headers.common['Authorization'] = `Bearer ${token}`
|
||||
},
|
||||
|
||||
getToken(): string {
|
||||
const authStore = useAuthStore()
|
||||
return authStore.getToken()
|
||||
},
|
||||
|
||||
removeToken() {
|
||||
const authStore = useAuthStore()
|
||||
authStore.removeToken()
|
||||
// 删除默认请求头
|
||||
delete request.defaults.headers.common['Authorization']
|
||||
},
|
||||
}
|
||||
|
||||
// 请求拦截器
|
||||
request.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
const token = TokenManager.getToken()
|
||||
if (token) {
|
||||
// .NET Core API使用标准的Bearer认证
|
||||
config.headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
request.interceptors.response.use(
|
||||
(response: AxiosResponse) => {
|
||||
const { data } = response
|
||||
|
||||
// 如果返回 code 为 0 且有新 token,更新 token
|
||||
if (data.code === 0 && data.token) {
|
||||
TokenManager.setToken(data.token)
|
||||
}
|
||||
|
||||
console.log('data*--', data)
|
||||
|
||||
// 处理业务错误码
|
||||
if (data.code === 302) {
|
||||
// 清除token
|
||||
TokenManager.removeToken()
|
||||
// 跳转到登录页
|
||||
router.replace('/login')
|
||||
return Promise.reject(data)
|
||||
}
|
||||
|
||||
// 其他错误码
|
||||
if (data.code !== 0 && data.code !== undefined) {
|
||||
ElMessage.error(data.message || data.msg || '请求失败')
|
||||
return Promise.reject(data)
|
||||
}
|
||||
|
||||
return data
|
||||
},
|
||||
(error) => {
|
||||
// 网络错误或其他错误
|
||||
ElMessage.error(
|
||||
error.response?.data?.message ||
|
||||
error.response?.data?.msg ||
|
||||
'请求失败'
|
||||
)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default request
|
||||
|
||||
213
rc_autoplc_front/src/views/Layout.vue
Normal file
213
rc_autoplc_front/src/views/Layout.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="layout-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<el-header class="layout-header">
|
||||
<div class="header-left">
|
||||
<h1 class="project-title">北京融创智能仪器管理系统</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="user-info">
|
||||
<el-icon><User /></el-icon>
|
||||
<span class="username">{{ userInfo.username || '管理员' }}</span>
|
||||
<el-icon class="el-icon--right"><CaretBottom /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
|
||||
<!-- 主体区域 -->
|
||||
<el-container class="layout-body">
|
||||
<!-- 左侧菜单 -->
|
||||
<el-aside width="200px" class="layout-aside">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
class="sidebar-menu"
|
||||
router
|
||||
:collapse="false"
|
||||
>
|
||||
<el-sub-menu index="system">
|
||||
<template #title>
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span>系统管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/user">
|
||||
<el-icon><User /></el-icon>
|
||||
<span>用户管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/role">
|
||||
<el-icon><Avatar /></el-icon>
|
||||
<span>角色管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/department">
|
||||
<el-icon><OfficeBuilding /></el-icon>
|
||||
<span>部门管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/position">
|
||||
<el-icon><Briefcase /></el-icon>
|
||||
<span>职位管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/manage-log">
|
||||
<el-icon><Document /></el-icon>
|
||||
<span>操作日志管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/user-role">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span>用户角色管理</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-sub-menu index="island">
|
||||
<template #title>
|
||||
<el-icon><Grid /></el-icon>
|
||||
<span>业务管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/island-info">
|
||||
<el-icon><Setting /></el-icon>
|
||||
<span>功能岛管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/devinfo">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<span>设备管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/plc-devinfo">
|
||||
<el-icon><Connection /></el-icon>
|
||||
<span>PLC设备管理</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<el-main class="layout-main">
|
||||
<RouterView />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { User, Setting, Avatar, OfficeBuilding, Briefcase, Document, CaretBottom, UserFilled, Grid, Monitor, Connection, Plus } from '@element-plus/icons-vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// 用户信息(可以从store或localStorage获取)
|
||||
const userInfo = ref({
|
||||
username: localStorage.getItem('username') || '管理员',
|
||||
})
|
||||
|
||||
// 当前激活的菜单
|
||||
const activeMenu = computed(() => {
|
||||
return route.path
|
||||
})
|
||||
|
||||
// 处理下拉菜单命令
|
||||
const handleCommand = (command: string) => {
|
||||
if (command === 'logout') {
|
||||
ElMessageBox.confirm('确认退出登录吗?', '提示', {
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
// 清除token和用户信息
|
||||
authStore.removeToken()
|
||||
localStorage.removeItem('username')
|
||||
ElMessage.success('退出成功')
|
||||
// 跳转到登录页(如果有登录页)
|
||||
// router.push('/login')
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layout-header {
|
||||
height: 60px;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.user-info:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.user-info .el-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.username {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.layout-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout-aside {
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
border-right: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
673
rc_autoplc_front/src/views/department/index.vue
Normal file
673
rc_autoplc_front/src/views/department/index.vue
Normal file
@@ -0,0 +1,673 @@
|
||||
<template>
|
||||
<div class="dept-page">
|
||||
<div class="dept-container">
|
||||
<!-- 左侧树形控件 -->
|
||||
<el-card class="tree-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="tree-header">
|
||||
<span>部门信息</span>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handleTreeReset"
|
||||
v-if="selectedDeptId"
|
||||
>
|
||||
显示全部
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="treeData"
|
||||
:props="{ children: 'children', label: 'deptName' }"
|
||||
node-key="id"
|
||||
:default-expand-all="false"
|
||||
:highlight-current="true"
|
||||
@node-click="handleTreeNodeClick"
|
||||
v-loading="treeLoading"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="tree-node">
|
||||
<span>{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-card>
|
||||
|
||||
<!-- 右侧列表区域 -->
|
||||
<div class="list-container">
|
||||
<el-card class="search-card" shadow="never">
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" :model="queryForm" label-width="80px">
|
||||
<el-form-item label="部门名称">
|
||||
<el-input
|
||||
v-model="queryForm.deptName"
|
||||
placeholder="输入部门名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门编码">
|
||||
<el-input
|
||||
v-model="queryForm.deptCode"
|
||||
placeholder="输入部门编码"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="openDrawer('create')">新增部门</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="70" />
|
||||
<el-table-column
|
||||
prop="deptName"
|
||||
label="部门名称"
|
||||
min-width="180"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="deptCode"
|
||||
label="部门编码"
|
||||
min-width="180"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="leaderId"
|
||||
label="部门领导"
|
||||
min-width="150"
|
||||
:formatter="formatLeaderCell"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
min-width="200"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="openDrawer('edit', scope.row)">编辑</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
:title="drawerTitle"
|
||||
direction="rtl"
|
||||
:size="520"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
class="drawer-form"
|
||||
>
|
||||
<el-form-item v-if="isEdit" label="部门ID">
|
||||
<el-input v-model="form.id" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门编码" prop="deptCode">
|
||||
<el-input v-model="form.deptCode" placeholder="请输入部门编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="上级部门" prop="parentId">
|
||||
<el-tree-select
|
||||
v-model="form.parentId"
|
||||
:data="treeOptions"
|
||||
:props="{ value: 'id', label: 'deptName', children: 'children' }"
|
||||
check-strictly
|
||||
placeholder="请选择上级部门"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门领导" prop="leaderId">
|
||||
<el-select
|
||||
v-model="form.leaderId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择部门领导"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userOptions"
|
||||
:key="item.id"
|
||||
:label="item.nicke || item.realName || item.nickName || item.username || item.name || ''"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"
|
||||
:rows="3"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="drawerVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitForm">
|
||||
{{ isEdit ? '更新' : '提交' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, computed } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
departbyid,
|
||||
departlist,
|
||||
departupd,
|
||||
departmentadd,
|
||||
departmentdel,
|
||||
departtree,
|
||||
} from '@/api/system/department'
|
||||
import { userselect } from '@/api/system/user'
|
||||
|
||||
interface DeptItem {
|
||||
id?: number | string
|
||||
deptName: string
|
||||
deptCode?: string
|
||||
parentId?: number | string | null
|
||||
parentName?: string
|
||||
leaderId?: number | string | null
|
||||
leaderName?: string
|
||||
remark?: string
|
||||
remarks?: string
|
||||
createTime?: string
|
||||
updateTime?: string
|
||||
children?: DeptItem[]
|
||||
}
|
||||
|
||||
interface UserItem {
|
||||
id: number | string
|
||||
username?: string
|
||||
realName?: string
|
||||
nickName?: string
|
||||
nicke?: string
|
||||
name?: string
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const treeLoading = ref(false)
|
||||
const tableData = ref<DeptItem[]>([])
|
||||
const total = ref(0)
|
||||
const treeData = ref<DeptItem[]>([])
|
||||
const userOptions = ref<UserItem[]>([])
|
||||
const selectedDeptId = ref<number | string | null>(null)
|
||||
const treeRef = ref()
|
||||
|
||||
const queryForm = reactive({
|
||||
deptName: '',
|
||||
deptCode: '',
|
||||
parentId: null as number | string | null,
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
const drawerVisible = ref(false)
|
||||
const drawerTitle = ref('新增部门')
|
||||
const isEdit = ref(false)
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive<DeptItem>({
|
||||
id: undefined,
|
||||
deptName: '',
|
||||
deptCode: '',
|
||||
parentId: null,
|
||||
leaderId: null,
|
||||
remark: '',
|
||||
})
|
||||
|
||||
const rules: FormRules = {
|
||||
deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
|
||||
deptCode: [{ required: true, message: '请输入部门编码', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.id = undefined
|
||||
form.deptName = ''
|
||||
form.deptCode = ''
|
||||
form.parentId = null
|
||||
form.leaderId = null
|
||||
form.remark = ''
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
const formatCell = (_row: any, _column: any, value: any) => {
|
||||
if (value === 0) return 0
|
||||
return value === undefined || value === null || value === '' ? '暂无' : value
|
||||
}
|
||||
|
||||
// 根据leaderId获取用户的nicke字段
|
||||
const getLeaderNicke = (leaderId: number | string | null | undefined): string => {
|
||||
if (!leaderId) return '暂无'
|
||||
const user = userOptions.value.find(u => u.id == leaderId)
|
||||
return user?.nicke || user?.realName || user?.nickName || user?.username || user?.name || '暂无'
|
||||
}
|
||||
|
||||
// 部门领导列的formatter
|
||||
const formatLeaderCell = (_row: any, _column: any, _value: any) => {
|
||||
return getLeaderNicke(_row.leaderId)
|
||||
}
|
||||
|
||||
// 构建树形选择器的选项
|
||||
const treeOptions = computed(() => {
|
||||
const buildOptions = (nodes: DeptItem[], excludeId?: number | string): any[] => {
|
||||
return nodes
|
||||
.filter((node) => node.id !== excludeId)
|
||||
.map((node) => ({
|
||||
id: node.id,
|
||||
deptName: node.deptName,
|
||||
children: node.children ? buildOptions(node.children, excludeId) : undefined,
|
||||
}))
|
||||
}
|
||||
return buildOptions(treeData.value, form.id)
|
||||
})
|
||||
|
||||
// 加载部门树
|
||||
const loadTree = async () => {
|
||||
treeLoading.value = true
|
||||
try {
|
||||
const res: any = await departtree()
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
// 兼容多种返回格式
|
||||
const treeNodes = Array.isArray(data)
|
||||
? data
|
||||
: Array.isArray(data.data)
|
||||
? data.data
|
||||
: Array.isArray(data.children)
|
||||
? data.children
|
||||
: []
|
||||
|
||||
treeData.value = treeNodes
|
||||
console.log('部门树数据:', treeData.value)
|
||||
} catch (error) {
|
||||
console.error('load department tree error', error)
|
||||
ElMessage.error('加载部门树失败')
|
||||
} finally {
|
||||
treeLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理树节点点击
|
||||
const handleTreeNodeClick = (data: DeptItem) => {
|
||||
selectedDeptId.value = data.id || null
|
||||
queryForm.parentId = data.id || null
|
||||
pagination.pageNum = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
// 重置树选择,显示全部部门
|
||||
const handleTreeReset = () => {
|
||||
selectedDeptId.value = null
|
||||
queryForm.parentId = null
|
||||
if (treeRef.value) {
|
||||
treeRef.value.setCurrentKey(null)
|
||||
}
|
||||
pagination.pageNum = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
// 加载用户列表(用于选择部门领导)
|
||||
const loadUsers = async () => {
|
||||
try {
|
||||
const res: any = await userselect({})
|
||||
// 兼容多种返回格式:res.data 或 res 本身
|
||||
const data = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
|
||||
userOptions.value = data
|
||||
} catch (error) {
|
||||
console.error('load user list error', error)
|
||||
ElMessage.error('加载用户列表失败')
|
||||
userOptions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 加载部门列表
|
||||
const loadList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 确保用户列表已加载(用于显示部门领导名称)
|
||||
if (userOptions.value.length === 0) {
|
||||
await loadUsers()
|
||||
}
|
||||
|
||||
// 构建查询参数,过滤空字符串
|
||||
const params: any = {
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
if (queryForm.deptName && queryForm.deptName.trim()) {
|
||||
params.deptName = queryForm.deptName.trim()
|
||||
}
|
||||
if (queryForm.deptCode && queryForm.deptCode.trim()) {
|
||||
params.deptCode = queryForm.deptCode.trim()
|
||||
}
|
||||
// 如果选中了树节点,查询该部门的下级部门
|
||||
if (queryForm.parentId) {
|
||||
params.parentId = queryForm.parentId
|
||||
}
|
||||
|
||||
const res: any = await departlist(params)
|
||||
|
||||
console.log('部门列表API返回数据:', res)
|
||||
|
||||
// 根据返回格式处理数据
|
||||
let pageData = res?.data
|
||||
|
||||
// 如果res.data不存在,可能是直接返回了分页数据
|
||||
if (!pageData && (res?.records || res?.total !== undefined)) {
|
||||
pageData = res
|
||||
}
|
||||
|
||||
// 兼容多种返回格式
|
||||
const recordsFromData =
|
||||
pageData?.records ||
|
||||
pageData?.list ||
|
||||
pageData?.rows ||
|
||||
pageData?.items ||
|
||||
(Array.isArray(pageData?.data) ? pageData.data : undefined)
|
||||
|
||||
const records = Array.isArray(recordsFromData)
|
||||
? recordsFromData
|
||||
: Array.isArray(pageData)
|
||||
? pageData
|
||||
: Array.isArray(res?.data)
|
||||
? res.data
|
||||
: []
|
||||
|
||||
const totalValue =
|
||||
pageData?.total ??
|
||||
pageData?.count ??
|
||||
pageData?.totalCount ??
|
||||
res?.total ??
|
||||
(Array.isArray(records) ? records.length : 0)
|
||||
|
||||
tableData.value = records
|
||||
total.value = Number(totalValue) || 0
|
||||
|
||||
console.log('解析后的数据:', {
|
||||
records: records.length,
|
||||
total: total.value,
|
||||
firstRecord: records[0]
|
||||
})
|
||||
} catch (error: any) {
|
||||
console.error('load department list error', error)
|
||||
const errorMsg = error?.message || error?.msg || '加载部门列表失败'
|
||||
ElMessage.error(errorMsg)
|
||||
tableData.value = []
|
||||
total.value = 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
const resetSearch = () => {
|
||||
queryForm.deptName = ''
|
||||
queryForm.deptCode = ''
|
||||
// 重置时不清除parentId,保持树选择状态
|
||||
// queryForm.parentId = null
|
||||
// selectedDeptId.value = null
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
loadList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.pageNum = page
|
||||
loadList()
|
||||
}
|
||||
|
||||
const openDrawer = async (mode: 'create' | 'edit', row?: DeptItem) => {
|
||||
resetForm()
|
||||
isEdit.value = mode === 'edit'
|
||||
drawerTitle.value = isEdit.value ? '编辑部门' : '新增部门'
|
||||
drawerVisible.value = true
|
||||
|
||||
// 加载部门树(编辑时需要排除当前部门)
|
||||
await loadTree()
|
||||
|
||||
if (isEdit.value && row?.id != null) {
|
||||
try {
|
||||
const res: any = await departbyid(row.id)
|
||||
const data = res?.data || res || {}
|
||||
form.id = data.id ?? row.id
|
||||
form.deptName = data.deptName ?? row.deptName
|
||||
form.deptCode = data.deptCode ?? row.deptCode ?? ''
|
||||
form.parentId = data.parentId ?? row.parentId ?? null
|
||||
form.leaderId = data.leaderId ?? row.leaderId ?? null
|
||||
form.remark =
|
||||
data.remark ??
|
||||
data.remarks ??
|
||||
row.remark ??
|
||||
(row as any)?.remarks ??
|
||||
''
|
||||
} catch (error) {
|
||||
ElMessage.error('获取部门详情失败')
|
||||
drawerVisible.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value?.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
const payload: any = {
|
||||
...form,
|
||||
remarks: form.remark,
|
||||
}
|
||||
|
||||
// 如果没有选择上级部门,parentId设为null或0
|
||||
if (!payload.parentId) {
|
||||
payload.parentId = null
|
||||
}
|
||||
|
||||
if (isEdit.value) {
|
||||
await departupd(payload)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await departmentadd(payload)
|
||||
ElMessage.success('新增成功')
|
||||
}
|
||||
drawerVisible.value = false
|
||||
loadList()
|
||||
loadTree() // 重新加载树形数据
|
||||
} catch (error: any) {
|
||||
console.error('submit department error', error)
|
||||
const errorMsg = error?.message || error?.msg || (isEdit.value ? '更新失败' : '新增失败')
|
||||
ElMessage.error(errorMsg)
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = (row: DeptItem) => {
|
||||
if (!row.id) {
|
||||
ElMessage.warning('缺少部门ID')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(`确认删除部门「${row.deptName}」吗?`, '提示', {
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
if (row.id == null) {
|
||||
ElMessage.warning('缺少部门ID,无法删除')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await departmentdel(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
loadList()
|
||||
loadTree() // 重新加载树形数据
|
||||
} catch (error: any) {
|
||||
console.error('delete department error', error)
|
||||
const errorMsg = error?.message || error?.msg || '删除失败'
|
||||
ElMessage.error(errorMsg)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadUsers()
|
||||
loadTree()
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dept-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
height: calc(100vh - 120px);
|
||||
}
|
||||
|
||||
.dept-container {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tree-card {
|
||||
width: 300px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tree-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tree-card :deep(.el-card__body) {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
padding-bottom: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.list-container :deep(.el-card__body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-container :deep(.el-table) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
1061
rc_autoplc_front/src/views/devinfo/index.vue
Normal file
1061
rc_autoplc_front/src/views/devinfo/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
583
rc_autoplc_front/src/views/devinfo/plc.vue
Normal file
583
rc_autoplc_front/src/views/devinfo/plc.vue
Normal file
@@ -0,0 +1,583 @@
|
||||
<template>
|
||||
<div class="plc-devinfo-page">
|
||||
<!-- 搜索栏 -->
|
||||
<el-card class="search-card" shadow="never">
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" :model="queryForm" label-width="100px">
|
||||
<el-form-item label="设备名称">
|
||||
<el-input
|
||||
v-model="queryForm.devName"
|
||||
placeholder="输入设备名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态">
|
||||
<el-select
|
||||
v-model="queryForm.status"
|
||||
placeholder="请选择设备状态"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option label="空闲" :value="0" />
|
||||
<el-option label="运行" :value="1" />
|
||||
<el-option label="故障" :value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新增PLC设备
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- PLC设备列表 -->
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="deviceList"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="60" :index="getIndex" />
|
||||
<el-table-column prop="devName" label="设备名称" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.devName || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="devModel" label="设备型号" min-width="100" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.devModel || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ipAddr" label="IP地址" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.ipAddr || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="port" label="端口" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.port || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="protocolType" label="协议" min-width="100" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.protocolType || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="company" label="公司名" min-width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.company || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.status)" size="small">
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="devDesc" label="描述" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.devDesc || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
{{ row.remark || '暂无' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
@click="handleEdit(row)"
|
||||
>
|
||||
<el-icon><Edit /></el-icon>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
link
|
||||
@click="handleDelete(row)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 新增/编辑抽屉 -->
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
:title="drawerTitle"
|
||||
direction="rtl"
|
||||
size="500px"
|
||||
:before-close="handleDrawerClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
label-position="left"
|
||||
>
|
||||
<el-form-item label="设备名称" prop="devName">
|
||||
<el-input
|
||||
v-model="formData.devName"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备型号">
|
||||
<el-input
|
||||
v-model="formData.devModel"
|
||||
disabled
|
||||
placeholder="PLC"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP地址" prop="ipAddr">
|
||||
<el-input
|
||||
v-model="formData.ipAddr"
|
||||
placeholder="请输入IP地址"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="端口" prop="port">
|
||||
<el-input-number
|
||||
v-model="formData.port"
|
||||
:min="1"
|
||||
:max="65535"
|
||||
placeholder="请输入端口"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="协议" prop="protocolType">
|
||||
<el-input
|
||||
v-model="formData.protocolType"
|
||||
placeholder="请输入协议类型"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="公司名" prop="company">
|
||||
<el-input
|
||||
v-model="formData.company"
|
||||
placeholder="请输入公司名"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="devDesc">
|
||||
<el-input
|
||||
v-model="formData.devDesc"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入描述"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="formData.remark"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="handleDrawerClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="submitting">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
|
||||
import {
|
||||
devInfoadd,
|
||||
devInfodel,
|
||||
devInfoupd,
|
||||
devInfolist,
|
||||
devInfobyid,
|
||||
} from '@/api/tb/devinfo'
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
|
||||
// 设备列表
|
||||
const deviceList = ref<any[]>([])
|
||||
const total = ref(0)
|
||||
|
||||
// 查询表单
|
||||
const queryForm = reactive({
|
||||
devName: '',
|
||||
status: undefined as number | undefined,
|
||||
})
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
// 抽屉相关
|
||||
const drawerVisible = ref(false)
|
||||
const drawerTitle = ref('新增PLC设备')
|
||||
const isEdit = ref(false)
|
||||
const formRef = ref()
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: undefined,
|
||||
devName: '',
|
||||
devModel: 'PLC',
|
||||
ipAddr: '',
|
||||
port: undefined as number | undefined,
|
||||
protocolType: '',
|
||||
company: '',
|
||||
devDesc: '',
|
||||
remark: '',
|
||||
status: 0, // 状态自动设置为0
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const formRules = {
|
||||
devName: [
|
||||
{ required: true, message: '请输入设备名称', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
|
||||
// 获取序号
|
||||
const getIndex = (index: number) => {
|
||||
return (pagination.pageNum - 1) * pagination.pageSize + index + 1
|
||||
}
|
||||
|
||||
// 获取状态类型
|
||||
const getStatusType = (status: number | null | undefined) => {
|
||||
if (status === 0) return 'success' // 空闲 - 绿色
|
||||
if (status === 1) return 'warning' // 运行 - 黄色
|
||||
if (status === 4) return 'danger' // 故障 - 红色
|
||||
return 'info'
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status: number | null | undefined) => {
|
||||
if (status === 0) return '空闲'
|
||||
if (status === 1) return '运行'
|
||||
if (status === 4) return '故障'
|
||||
return '未知'
|
||||
}
|
||||
|
||||
// 获取设备列表(只查询devModel为PLC的设备)
|
||||
const getDeviceList = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const params: any = {
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
devModel: 'PLC', // 只查询PLC设备
|
||||
}
|
||||
|
||||
// 设备名称模糊查询
|
||||
if (queryForm.devName) {
|
||||
params.devName = queryForm.devName
|
||||
}
|
||||
// 设备状态精确查询
|
||||
if (queryForm.status !== undefined && queryForm.status !== null) {
|
||||
params.status = queryForm.status
|
||||
}
|
||||
|
||||
const res: any = await devInfolist(params)
|
||||
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
// 兼容多种返回格式
|
||||
const recordsFromData =
|
||||
data.records ||
|
||||
data.list ||
|
||||
data.rows ||
|
||||
data.items ||
|
||||
(Array.isArray(data.data) ? data.data : undefined)
|
||||
|
||||
const records = Array.isArray(recordsFromData)
|
||||
? recordsFromData
|
||||
: Array.isArray(data)
|
||||
? data
|
||||
: []
|
||||
|
||||
// 再次过滤,确保只显示PLC设备
|
||||
const plcRecords = records.filter((item: any) => item.devModel === 'PLC')
|
||||
|
||||
const totalValue =
|
||||
data.total ?? data.count ?? data.totalCount ?? plcRecords.length ?? 0
|
||||
|
||||
deviceList.value = plcRecords
|
||||
total.value = Number(totalValue) || 0
|
||||
} catch (error) {
|
||||
console.error('获取PLC设备列表失败:', error)
|
||||
ElMessage.error('获取PLC设备列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 查询
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
getDeviceList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
const resetSearch = () => {
|
||||
queryForm.devName = ''
|
||||
queryForm.status = undefined
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
// 分页大小改变
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
getDeviceList()
|
||||
}
|
||||
|
||||
// 当前页改变
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.pageNum = page
|
||||
getDeviceList()
|
||||
}
|
||||
|
||||
// 打开新增抽屉
|
||||
const handleAdd = () => {
|
||||
isEdit.value = false
|
||||
drawerTitle.value = '新增PLC设备'
|
||||
resetForm()
|
||||
drawerVisible.value = true
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
formData.id = undefined
|
||||
formData.devName = ''
|
||||
formData.devModel = 'PLC'
|
||||
formData.ipAddr = ''
|
||||
formData.port = undefined
|
||||
formData.protocolType = ''
|
||||
formData.company = ''
|
||||
formData.devDesc = ''
|
||||
formData.remark = ''
|
||||
formData.status = 0
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
// 编辑设备
|
||||
const handleEdit = async (item: any) => {
|
||||
try {
|
||||
loading.value = true
|
||||
const res: any = await devInfobyid(item.id)
|
||||
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
formData.id = data.id ?? item.id
|
||||
formData.devName = data.devName ?? ''
|
||||
formData.devModel = data.devModel ?? 'PLC'
|
||||
formData.ipAddr = data.ipAddr ?? ''
|
||||
formData.port = data.port ?? undefined
|
||||
formData.protocolType = data.protocolType ?? ''
|
||||
formData.company = data.company ?? ''
|
||||
formData.devDesc = data.devDesc ?? ''
|
||||
formData.remark = data.remark ?? ''
|
||||
formData.status = data.status ?? 0
|
||||
|
||||
isEdit.value = true
|
||||
drawerTitle.value = '编辑PLC设备'
|
||||
drawerVisible.value = true
|
||||
} catch (error) {
|
||||
console.error('获取PLC设备信息失败:', error)
|
||||
ElMessage.error('获取PLC设备信息失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 删除设备
|
||||
const handleDelete = async (item: any) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除PLC设备"${item.devName || '未命名'}"吗?`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
|
||||
loading.value = true
|
||||
const res: any = await devInfodel(item.id)
|
||||
|
||||
if (res?.code === '0' || res?.code === 0 || res?.success) {
|
||||
ElMessage.success('删除成功')
|
||||
getDeviceList()
|
||||
} else {
|
||||
ElMessage.error(res?.message || res?.msg || '删除失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除PLC设备失败:', error)
|
||||
ElMessage.error('删除PLC设备失败')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
submitting.value = true
|
||||
|
||||
// 构建提交数据,只包含非空字段(根据后端要求:非空则入库/更新)
|
||||
const submitData: any = {
|
||||
devName: formData.devName,
|
||||
devModel: 'PLC', // 设备型号固定为PLC
|
||||
status: 0, // 状态自动设置为0
|
||||
}
|
||||
|
||||
// 添加其他字段(如果非空)
|
||||
if (formData.ipAddr) {
|
||||
submitData.ipAddr = formData.ipAddr
|
||||
}
|
||||
if (formData.port !== undefined && formData.port !== null) {
|
||||
submitData.port = formData.port
|
||||
}
|
||||
if (formData.protocolType) {
|
||||
submitData.protocolType = formData.protocolType
|
||||
}
|
||||
if (formData.company) {
|
||||
submitData.company = formData.company
|
||||
}
|
||||
if (formData.devDesc) {
|
||||
submitData.devDesc = formData.devDesc
|
||||
}
|
||||
if (formData.remark) {
|
||||
submitData.remark = formData.remark
|
||||
}
|
||||
|
||||
let res: any
|
||||
if (isEdit.value && formData.id) {
|
||||
// 编辑 - 需要传入ID,其他字段可选(非空则更新)
|
||||
res = await devInfoupd({
|
||||
id: formData.id,
|
||||
...submitData,
|
||||
})
|
||||
} else {
|
||||
// 新增
|
||||
res = await devInfoadd(submitData)
|
||||
}
|
||||
|
||||
if (res?.code === '0' || res?.code === 0 || res?.success) {
|
||||
ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
|
||||
drawerVisible.value = false
|
||||
getDeviceList()
|
||||
} else {
|
||||
ElMessage.error(res?.message || res?.msg || (isEdit.value ? '编辑失败' : '新增失败'))
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error !== false) {
|
||||
console.error('提交失败:', error)
|
||||
ElMessage.error('提交失败,请检查表单')
|
||||
}
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭抽屉
|
||||
const handleDrawerClose = () => {
|
||||
drawerVisible.value = false
|
||||
resetForm()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getDeviceList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plc-devinfo-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
1091
rc_autoplc_front/src/views/islandInfo/index.vue
Normal file
1091
rc_autoplc_front/src/views/islandInfo/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
461
rc_autoplc_front/src/views/manage-log/index.vue
Normal file
461
rc_autoplc_front/src/views/manage-log/index.vue
Normal file
@@ -0,0 +1,461 @@
|
||||
<template>
|
||||
<div class="manage-log-page">
|
||||
<el-card class="search-card" shadow="never">
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" :model="queryForm" label-width="90px">
|
||||
<el-form-item label="日志名称">
|
||||
<el-input
|
||||
v-model="queryForm.logName"
|
||||
placeholder="输入日志名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="日志类型">
|
||||
<el-input
|
||||
v-model="queryForm.logType"
|
||||
placeholder="输入日志类型"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建人ID">
|
||||
<el-input
|
||||
v-model="queryForm.createId"
|
||||
placeholder="输入创建人ID"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="openDrawer('create')">新增日志</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="80" />
|
||||
<el-table-column prop="logName" label="日志名称" min-width="150" />
|
||||
<el-table-column prop="logType" label="日志类型" min-width="120" />
|
||||
<el-table-column prop="logContent" label="日志内容" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="logWritetime" label="日志记录时间" min-width="180">
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.logWritetime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="openDrawer('edit', scope.row)">编辑</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
:title="drawerTitle"
|
||||
direction="rtl"
|
||||
:size="500"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="drawer-form"
|
||||
>
|
||||
<el-form-item v-if="isEdit" label="日志ID">
|
||||
<el-input v-model="form.id" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="日志名称" prop="logName">
|
||||
<el-input v-model="form.logName" placeholder="请输入日志名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="日志类型" prop="logType">
|
||||
<el-input v-model="form.logType" placeholder="请输入日志类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="日志内容" prop="logContent">
|
||||
<el-input
|
||||
v-model="form.logContent"
|
||||
type="textarea"
|
||||
placeholder="请输入日志内容"
|
||||
:rows="4"
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="日志记录时间" prop="logWritetime">
|
||||
<el-date-picker
|
||||
v-model="form.logWritetime"
|
||||
type="datetime"
|
||||
placeholder="选择日志记录时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss.SSSZ"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"
|
||||
:rows="3"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="drawerVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitForm">
|
||||
{{ isEdit ? '更新' : '提交' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
managelogadd,
|
||||
managelogbyid,
|
||||
managelogdel,
|
||||
manageloglist,
|
||||
managelogupd,
|
||||
} from '@/api/system/manage-log'
|
||||
|
||||
interface LogItem {
|
||||
id?: string | number
|
||||
logName: string
|
||||
logType: string
|
||||
logContent: string
|
||||
logWritetime?: string
|
||||
remark?: string
|
||||
createId?: string
|
||||
createTime?: string
|
||||
updateTime?: string
|
||||
updateId?: string
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const tableData = ref<LogItem[]>([])
|
||||
const total = ref(0)
|
||||
|
||||
const queryForm = reactive({
|
||||
logName: '',
|
||||
logType: '',
|
||||
createId: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
const drawerVisible = ref(false)
|
||||
const drawerTitle = ref('新增日志')
|
||||
const isEdit = ref(false)
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive<LogItem>({
|
||||
id: undefined,
|
||||
logName: '',
|
||||
logType: '',
|
||||
logContent: '',
|
||||
logWritetime: '',
|
||||
remark: '',
|
||||
})
|
||||
|
||||
const rules: FormRules = {
|
||||
logName: [{ required: true, message: '请输入日志名称', trigger: 'blur' }],
|
||||
logType: [{ required: true, message: '请输入日志类型', trigger: 'blur' }],
|
||||
logContent: [{ required: true, message: '请输入日志内容', trigger: 'blur' }],
|
||||
logWritetime: [{ required: true, message: '请选择日志记录时间', trigger: 'change' }],
|
||||
}
|
||||
|
||||
const formatDateTime = (dateTime?: string) => {
|
||||
if (!dateTime) return '-'
|
||||
try {
|
||||
const date = new Date(dateTime)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
} catch {
|
||||
return dateTime
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.id = undefined
|
||||
form.logName = ''
|
||||
form.logType = ''
|
||||
form.logContent = ''
|
||||
form.logWritetime = ''
|
||||
form.remark = ''
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
const loadList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params: any = {
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
|
||||
// 只添加有值的查询参数
|
||||
if (queryForm.logName) params.logName = queryForm.logName
|
||||
if (queryForm.logType) params.logType = queryForm.logType
|
||||
if (queryForm.createId) params.createId = queryForm.createId
|
||||
|
||||
const res: any = await manageloglist(params)
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
// 兼容多种返回格式:{data:{records,total}} | {records,total} | {data:[]} | []
|
||||
const recordsFromData =
|
||||
data.records ||
|
||||
data.list ||
|
||||
data.rows ||
|
||||
data.items ||
|
||||
(Array.isArray(data.data) ? data.data : undefined)
|
||||
|
||||
const records = Array.isArray(recordsFromData)
|
||||
? recordsFromData
|
||||
: Array.isArray(data)
|
||||
? data
|
||||
: []
|
||||
|
||||
const totalValue =
|
||||
data.total ?? data.count ?? data.totalCount ?? records.length ?? 0
|
||||
|
||||
tableData.value = records
|
||||
total.value = Number(totalValue) || 0
|
||||
} catch (error) {
|
||||
console.error('load log list error', error)
|
||||
ElMessage.error('获取日志列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
const resetSearch = () => {
|
||||
queryForm.logName = ''
|
||||
queryForm.logType = ''
|
||||
queryForm.createId = ''
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
loadList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.pageNum = page
|
||||
loadList()
|
||||
}
|
||||
|
||||
const openDrawer = async (mode: 'create' | 'edit', row?: LogItem) => {
|
||||
resetForm()
|
||||
isEdit.value = mode === 'edit'
|
||||
drawerTitle.value = isEdit.value ? '编辑日志' : '新增日志'
|
||||
drawerVisible.value = true
|
||||
|
||||
if (isEdit.value && row?.id != null) {
|
||||
try {
|
||||
const res: any = await managelogbyid(row.id)
|
||||
const data = res?.data || res || {}
|
||||
form.id = data.id ?? row.id
|
||||
form.logName = data.logName ?? row.logName ?? ''
|
||||
form.logType = data.logType ?? row.logType ?? ''
|
||||
form.logContent = data.logContent ?? row.logContent ?? ''
|
||||
form.logWritetime = data.logWritetime ?? row.logWritetime ?? ''
|
||||
form.remark = data.remark ?? row.remark ?? ''
|
||||
} catch (error) {
|
||||
ElMessage.error('获取日志详情失败')
|
||||
drawerVisible.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 将时间格式转换为ISO 8601格式
|
||||
const formatToISO = (dateTime?: string) => {
|
||||
if (!dateTime) return new Date().toISOString()
|
||||
try {
|
||||
// 如果已经是ISO格式,直接返回
|
||||
if (dateTime.includes('T') && dateTime.includes('Z')) {
|
||||
return dateTime
|
||||
}
|
||||
// 如果是其他格式,转换为ISO格式
|
||||
const date = new Date(dateTime)
|
||||
return date.toISOString()
|
||||
} catch {
|
||||
return new Date().toISOString()
|
||||
}
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value?.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
// 获取当前时间(ISO 8601格式)
|
||||
const now = new Date().toISOString()
|
||||
|
||||
// 获取用户ID(可以从localStorage或其他地方获取,这里先设为0)
|
||||
const userId = 0 // 可以根据实际情况从用户store或localStorage获取
|
||||
|
||||
// 准备提交数据,按照后端Swagger要求补充所有字段
|
||||
const submitData: any = {
|
||||
logName: form.logName,
|
||||
logType: form.logType,
|
||||
logContent: form.logContent || '',
|
||||
remark: form.remark || '',
|
||||
logWritetime: formatToISO(form.logWritetime),
|
||||
createId: userId,
|
||||
updateId: userId,
|
||||
createTime: now,
|
||||
updateTime: now,
|
||||
delSign: false, // 新增时delSign为false
|
||||
}
|
||||
|
||||
// 如果是编辑,需要包含id
|
||||
if (isEdit.value && form.id) {
|
||||
submitData.id = Number(form.id)
|
||||
} else {
|
||||
// 新增时id设为0
|
||||
submitData.id = 0
|
||||
}
|
||||
|
||||
if (isEdit.value) {
|
||||
await managelogupd(submitData)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await managelogadd(submitData)
|
||||
ElMessage.success('新增成功')
|
||||
}
|
||||
drawerVisible.value = false
|
||||
loadList()
|
||||
} catch (error: any) {
|
||||
console.error('submit log error', error)
|
||||
const errorMsg = error?.response?.data?.message || error?.message || (isEdit.value ? '更新失败' : '新增失败')
|
||||
ElMessage.error(errorMsg)
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = (row: LogItem) => {
|
||||
if (!row.id) {
|
||||
ElMessage.warning('缺少日志ID')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(`确认删除日志「${row.logName}」吗?`, '提示', {
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
if (row.id == null) {
|
||||
ElMessage.warning('缺少日志ID,无法删除')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await managelogdel(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
loadList()
|
||||
} catch (error) {
|
||||
console.error('delete log error', error)
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.manage-log-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.drawer-form {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
407
rc_autoplc_front/src/views/position/index.vue
Normal file
407
rc_autoplc_front/src/views/position/index.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="position-page">
|
||||
<el-card class="search-card" shadow="never">
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" :model="queryForm" label-width="80px">
|
||||
<el-form-item label="职位名称">
|
||||
<el-input
|
||||
v-model="queryForm.posiName"
|
||||
placeholder="输入职位名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="职位编码">
|
||||
<el-input
|
||||
v-model="queryForm.posiCode"
|
||||
placeholder="输入职位编码"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="openDrawer('create')">新增职位</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="70" />
|
||||
<el-table-column
|
||||
prop="posiName"
|
||||
label="职位名称"
|
||||
min-width="180"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="posiCode"
|
||||
label="职位编码"
|
||||
min-width="180"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
min-width="200"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="openDrawer('edit', scope.row)">编辑</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
:title="drawerTitle"
|
||||
direction="rtl"
|
||||
:size="420"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="90px"
|
||||
class="drawer-form"
|
||||
>
|
||||
<el-form-item v-if="isEdit" label="职位ID">
|
||||
<el-input v-model="form.id" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="职位名称" prop="posiName">
|
||||
<el-input v-model="form.posiName" placeholder="请输入职位名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="职位编码" prop="posiCode">
|
||||
<el-input v-model="form.posiCode" placeholder="请输入职位编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"
|
||||
:rows="3"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="drawerVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitForm">
|
||||
{{ isEdit ? '更新' : '提交' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { positionadd, positionbyid, positiondel, positionlist, positionupd } from '@/api/system/position'
|
||||
|
||||
interface PositionItem {
|
||||
id?: number | string
|
||||
posiName: string
|
||||
posiCode: string
|
||||
remark?: string
|
||||
remarks?: string
|
||||
createTime?: string
|
||||
updateTime?: string
|
||||
creator?: string
|
||||
updater?: string
|
||||
delFlag?: boolean
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const tableData = ref<PositionItem[]>([])
|
||||
const total = ref(0)
|
||||
|
||||
const queryForm = reactive({
|
||||
posiName: '',
|
||||
posiCode: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
const drawerVisible = ref(false)
|
||||
const drawerTitle = ref('新增职位')
|
||||
const isEdit = ref(false)
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive<PositionItem>({
|
||||
id: undefined,
|
||||
posiName: '',
|
||||
posiCode: '',
|
||||
remark: '',
|
||||
})
|
||||
|
||||
const rules: FormRules = {
|
||||
posiName: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
|
||||
posiCode: [{ required: true, message: '请输入职位编码', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.id = undefined
|
||||
form.posiName = ''
|
||||
form.posiCode = ''
|
||||
form.remark = ''
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
const formatCell = (_row: any, _column: any, value: any) => {
|
||||
if (value === 0) return 0
|
||||
return value === undefined || value === null || value === '' ? '暂无' : value
|
||||
}
|
||||
|
||||
const loadList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 构建查询参数,过滤空字符串
|
||||
const params: any = {
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
if (queryForm.posiName && queryForm.posiName.trim()) {
|
||||
params.posiName = queryForm.posiName.trim()
|
||||
}
|
||||
if (queryForm.posiCode && queryForm.posiCode.trim()) {
|
||||
params.posiCode = queryForm.posiCode.trim()
|
||||
}
|
||||
|
||||
const res: any = await positionlist(params)
|
||||
|
||||
console.log('职位列表API返回数据:', res)
|
||||
|
||||
// 根据Swagger文档,返回格式为: { code: 0, message: "string", data: { records: [], total: 0 } }
|
||||
// request拦截器返回的是整个响应体,所以res就是 { code: 0, message: "string", data: {...} }
|
||||
// 需要从res.data中获取分页数据
|
||||
let pageData = res?.data
|
||||
|
||||
// 如果res.data不存在,可能是直接返回了分页数据
|
||||
if (!pageData && (res?.records || res?.total !== undefined)) {
|
||||
pageData = res
|
||||
}
|
||||
|
||||
// 兼容多种返回格式
|
||||
const recordsFromData =
|
||||
pageData?.records ||
|
||||
pageData?.list ||
|
||||
pageData?.rows ||
|
||||
pageData?.items ||
|
||||
(Array.isArray(pageData?.data) ? pageData.data : undefined)
|
||||
|
||||
const records = Array.isArray(recordsFromData)
|
||||
? recordsFromData
|
||||
: Array.isArray(pageData)
|
||||
? pageData
|
||||
: Array.isArray(res?.data)
|
||||
? res.data
|
||||
: []
|
||||
|
||||
const totalValue =
|
||||
pageData?.total ??
|
||||
pageData?.count ??
|
||||
pageData?.totalCount ??
|
||||
res?.total ??
|
||||
(Array.isArray(records) ? records.length : 0)
|
||||
|
||||
tableData.value = records
|
||||
total.value = Number(totalValue) || 0
|
||||
|
||||
console.log('解析后的数据:', {
|
||||
records: records.length,
|
||||
total: total.value,
|
||||
pageData: pageData,
|
||||
firstRecord: records[0]
|
||||
})
|
||||
} catch (error: any) {
|
||||
console.error('load position list error', error)
|
||||
const errorMsg = error?.message || error?.msg || '加载职位列表失败'
|
||||
ElMessage.error(errorMsg)
|
||||
tableData.value = []
|
||||
total.value = 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
const resetSearch = () => {
|
||||
queryForm.posiName = ''
|
||||
queryForm.posiCode = ''
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
loadList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.pageNum = page
|
||||
loadList()
|
||||
}
|
||||
|
||||
const openDrawer = async (mode: 'create' | 'edit', row?: PositionItem) => {
|
||||
resetForm()
|
||||
isEdit.value = mode === 'edit'
|
||||
drawerTitle.value = isEdit.value ? '编辑职位' : '新增职位'
|
||||
drawerVisible.value = true
|
||||
|
||||
if (isEdit.value && row?.id != null) {
|
||||
try {
|
||||
const res: any = await positionbyid(row.id)
|
||||
const data = res?.data || res || {}
|
||||
form.id = data.id ?? row.id
|
||||
form.posiName = data.posiName ?? row.posiName
|
||||
form.posiCode = data.posiCode ?? row.posiCode
|
||||
form.remark =
|
||||
data.remark ??
|
||||
data.remarks ??
|
||||
row.remark ??
|
||||
(row as any)?.remarks ??
|
||||
''
|
||||
} catch (error) {
|
||||
ElMessage.error('获取职位详情失败')
|
||||
drawerVisible.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value?.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
// 同步备注的两种字段名,兼容后端不同写法
|
||||
await positionupd({ ...form, remarks: form.remark })
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await positionadd({ ...form, remarks: form.remark })
|
||||
ElMessage.success('新增成功')
|
||||
}
|
||||
drawerVisible.value = false
|
||||
loadList()
|
||||
} catch (error) {
|
||||
console.error('submit position error', error)
|
||||
ElMessage.error(isEdit.value ? '更新失败' : '新增失败')
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = (row: PositionItem) => {
|
||||
if (!row.id) {
|
||||
ElMessage.warning('缺少职位ID')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(`确认删除职位「${row.posiName}」吗?`, '提示', {
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
if (row.id == null) {
|
||||
ElMessage.warning('缺少职位ID,无法删除')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await positiondel(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
loadList()
|
||||
} catch (error) {
|
||||
console.error('delete position error', error)
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.position-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
334
rc_autoplc_front/src/views/role/index.vue
Normal file
334
rc_autoplc_front/src/views/role/index.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="role-page">
|
||||
<el-card class="search-card" shadow="never">
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" :model="queryForm" label-width="80px">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input
|
||||
v-model="queryForm.roleName"
|
||||
placeholder="输入角色名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色编码">
|
||||
<el-input
|
||||
v-model="queryForm.roleCode"
|
||||
placeholder="输入角色编码"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="openDrawer('create')">新增角色</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="180" />
|
||||
<el-table-column prop="roleName" label="角色名称" min-width="*" />
|
||||
<el-table-column prop="roleCode" label="角色编码" min-width="*" />
|
||||
<el-table-column label="操作" width="180" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="openDrawer('edit', scope.row)">编辑</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
:title="drawerTitle"
|
||||
direction="rtl"
|
||||
:size="420"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="90px"
|
||||
class="drawer-form"
|
||||
>
|
||||
<el-form-item v-if="isEdit" label="角色ID">
|
||||
<el-input v-model="form.id" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="form.roleName" placeholder="请输入角色名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色编码" prop="roleCode">
|
||||
<el-input v-model="form.roleCode" placeholder="请输入角色编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"
|
||||
:rows="3"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="drawerVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitForm">
|
||||
{{ isEdit ? '更新' : '提交' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { roleadd, rolebyid, roledel, rolelist, roleupd } from '@/api/system/role'
|
||||
|
||||
interface RoleItem {
|
||||
id?: number | string
|
||||
roleName: string
|
||||
roleCode: string
|
||||
remark?: string
|
||||
remarks?: string
|
||||
createTime?: string
|
||||
updateTime?: string
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const tableData = ref<RoleItem[]>([])
|
||||
const total = ref(0)
|
||||
|
||||
const queryForm = reactive({
|
||||
roleName: '',
|
||||
roleCode: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
const drawerVisible = ref(false)
|
||||
const drawerTitle = ref('新增角色')
|
||||
const isEdit = ref(false)
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive<RoleItem>({
|
||||
id: undefined,
|
||||
roleName: '',
|
||||
roleCode: '',
|
||||
remark: '',
|
||||
})
|
||||
|
||||
const rules: FormRules = {
|
||||
roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
roleCode: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.id = undefined
|
||||
form.roleName = ''
|
||||
form.roleCode = ''
|
||||
form.remark = ''
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
const loadList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res: any = await rolelist({
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
...queryForm,
|
||||
})
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
// 兼容多种返回格式:{data:{records,total}} | {records,total} | {data:[]} | []
|
||||
const recordsFromData =
|
||||
data.records ||
|
||||
data.list ||
|
||||
data.rows ||
|
||||
data.items ||
|
||||
(Array.isArray(data.data) ? data.data : undefined)
|
||||
|
||||
const records = Array.isArray(recordsFromData)
|
||||
? recordsFromData
|
||||
: Array.isArray(data)
|
||||
? data
|
||||
: []
|
||||
|
||||
const totalValue =
|
||||
data.total ?? data.count ?? data.totalCount ?? records.length ?? 0
|
||||
|
||||
tableData.value = records
|
||||
total.value = Number(totalValue) || 0
|
||||
} catch (error) {
|
||||
console.error('load role list error', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
const resetSearch = () => {
|
||||
queryForm.roleName = ''
|
||||
queryForm.roleCode = ''
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
loadList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.pageNum = page
|
||||
loadList()
|
||||
}
|
||||
|
||||
const openDrawer = async (mode: 'create' | 'edit', row?: RoleItem) => {
|
||||
resetForm()
|
||||
isEdit.value = mode === 'edit'
|
||||
drawerTitle.value = isEdit.value ? '编辑角色' : '新增角色'
|
||||
drawerVisible.value = true
|
||||
|
||||
if (isEdit.value && row?.id != null) {
|
||||
try {
|
||||
const res: any = await rolebyid(row.id)
|
||||
const data = res?.data || res || {}
|
||||
form.id = data.id ?? row.id
|
||||
form.roleName = data.roleName ?? row.roleName
|
||||
form.roleCode = data.roleCode ?? row.roleCode
|
||||
form.remark =
|
||||
data.remark ??
|
||||
data.remarks ??
|
||||
row.remark ??
|
||||
(row as any)?.remarks ??
|
||||
''
|
||||
} catch (error) {
|
||||
ElMessage.error('获取角色详情失败')
|
||||
drawerVisible.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value?.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
// 同步备注的两种字段名,兼容后端不同写法
|
||||
await roleupd({ ...form, remarks: form.remark })
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await roleadd({ ...form, remarks: form.remark })
|
||||
ElMessage.success('新增成功')
|
||||
}
|
||||
drawerVisible.value = false
|
||||
loadList()
|
||||
} catch (error) {
|
||||
console.error('submit role error', error)
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = (row: RoleItem) => {
|
||||
if (!row.id) {
|
||||
ElMessage.warning('缺少角色ID')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(`确认删除角色「${row.roleName}」吗?`, '提示', {
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
if (row.id == null) {
|
||||
ElMessage.warning('缺少角色ID,无法删除')
|
||||
return
|
||||
}
|
||||
await roledel(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
loadList()
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.role-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
527
rc_autoplc_front/src/views/user-role/index.vue
Normal file
527
rc_autoplc_front/src/views/user-role/index.vue
Normal file
@@ -0,0 +1,527 @@
|
||||
<template>
|
||||
<div class="user-role-page">
|
||||
<el-card class="search-card" shadow="never">
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" :model="queryForm" label-width="80px">
|
||||
<el-form-item label="用户">
|
||||
<el-select
|
||||
v-model="queryForm.userId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择用户"
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userOptions"
|
||||
:key="item.id"
|
||||
:label="item.userName || item.nicke || item.nickName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色">
|
||||
<el-select
|
||||
v-model="queryForm.roleId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择角色"
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.id"
|
||||
:label="item.roleName || item.roleCode"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="openDrawer('create')">新增用户角色关联</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="70" />
|
||||
<el-table-column
|
||||
prop="userId"
|
||||
label="用户名"
|
||||
min-width="150"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ getUserName(scope.row.userId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="roleId"
|
||||
label="角色名"
|
||||
min-width="150"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ getRoleName(scope.row.roleId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
min-width="200"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
title="新增用户角色关联"
|
||||
direction="rtl"
|
||||
:size="500"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
class="drawer-form"
|
||||
>
|
||||
<el-form-item label="用户" prop="userId">
|
||||
<el-select
|
||||
v-model="form.userId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择用户"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userOptions"
|
||||
:key="item.id"
|
||||
:label="item.userName || item.nicke || item.nickName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色" prop="roleId">
|
||||
<el-select
|
||||
v-model="form.roleId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择角色"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.id"
|
||||
:label="item.roleName || item.roleCode"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"
|
||||
:rows="3"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="drawerVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitForm">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { userRoleAdd, userRoleDel, userRoleList, userRoleByUserId } from '@/api/system/user-role'
|
||||
import { userselect } from '@/api/system/user'
|
||||
import { rleselect } from '@/api/system/role'
|
||||
|
||||
interface UserRoleItem {
|
||||
id?: number | string
|
||||
userId: number | string
|
||||
roleId: number | string
|
||||
remark?: string
|
||||
}
|
||||
|
||||
interface UserItem {
|
||||
id: number | string
|
||||
userName?: string
|
||||
nicke?: string
|
||||
nickName?: string
|
||||
}
|
||||
|
||||
interface RoleItem {
|
||||
id: number | string
|
||||
roleName?: string
|
||||
roleCode?: string
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const tableData = ref<UserRoleItem[]>([])
|
||||
const total = ref(0)
|
||||
const userOptions = ref<UserItem[]>([])
|
||||
const roleOptions = ref<RoleItem[]>([])
|
||||
const userMap = ref<Map<number | string, string>>(new Map())
|
||||
const roleMap = ref<Map<number | string, string>>(new Map())
|
||||
|
||||
const queryForm = reactive({
|
||||
userId: null as number | string | null,
|
||||
roleId: null as number | string | null,
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
const drawerVisible = ref(false)
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive<UserRoleItem>({
|
||||
userId: '',
|
||||
roleId: '',
|
||||
remark: '',
|
||||
})
|
||||
|
||||
const rules: FormRules = {
|
||||
userId: [{ required: true, message: '请选择用户', trigger: 'change' }],
|
||||
roleId: [{ required: true, message: '请选择角色', trigger: 'change' }],
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.userId = ''
|
||||
form.roleId = ''
|
||||
form.remark = ''
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
const formatCell = (_row: any, _column: any, value: any) => {
|
||||
if (value === 0) return 0
|
||||
return value === undefined || value === null || value === '' ? '暂无' : value
|
||||
}
|
||||
|
||||
// 获取用户名
|
||||
const getUserName = (userId: number | string | null | undefined) => {
|
||||
if (!userId) return '暂无'
|
||||
return userMap.value.get(userId) || '暂无'
|
||||
}
|
||||
|
||||
// 获取角色名
|
||||
const getRoleName = (roleId: number | string | null | undefined) => {
|
||||
if (!roleId) return '暂无'
|
||||
return roleMap.value.get(roleId) || '暂无'
|
||||
}
|
||||
|
||||
// 加载用户列表
|
||||
const loadUsers = async () => {
|
||||
try {
|
||||
const res: any = await userselect({})
|
||||
const data = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
|
||||
userOptions.value = data
|
||||
userMap.value.clear()
|
||||
data.forEach((user: UserItem) => {
|
||||
if (user.id) {
|
||||
const userName = user.userName || user.nicke || user.nickName || ''
|
||||
userMap.value.set(user.id, userName)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('load user list error', error)
|
||||
ElMessage.error('加载用户列表失败')
|
||||
userOptions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 加载角色列表
|
||||
const loadRoles = async () => {
|
||||
try {
|
||||
const res: any = await rleselect({})
|
||||
const data = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
|
||||
roleOptions.value = data
|
||||
roleMap.value.clear()
|
||||
data.forEach((role: RoleItem) => {
|
||||
if (role.id) {
|
||||
const roleName = role.roleName || role.roleCode || ''
|
||||
roleMap.value.set(role.id, roleName)
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('load role list error', error)
|
||||
ElMessage.error('加载角色列表失败')
|
||||
roleOptions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 加载用户角色关联列表
|
||||
const loadList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 确保用户和角色列表已加载
|
||||
if (userOptions.value.length === 0) {
|
||||
await loadUsers()
|
||||
}
|
||||
if (roleOptions.value.length === 0) {
|
||||
await loadRoles()
|
||||
}
|
||||
|
||||
const params: any = {
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
if (queryForm.userId) {
|
||||
params.userId = queryForm.userId
|
||||
}
|
||||
if (queryForm.roleId) {
|
||||
params.roleId = queryForm.roleId
|
||||
}
|
||||
|
||||
const res: any = await userRoleList(params)
|
||||
|
||||
console.log('用户角色关联列表API返回数据:', res)
|
||||
|
||||
let pageData = res?.data
|
||||
|
||||
if (!pageData && (res?.records || res?.total !== undefined)) {
|
||||
pageData = res
|
||||
}
|
||||
|
||||
const recordsFromData =
|
||||
pageData?.records ||
|
||||
pageData?.list ||
|
||||
pageData?.rows ||
|
||||
pageData?.items ||
|
||||
(Array.isArray(pageData?.data) ? pageData.data : undefined)
|
||||
|
||||
const records = Array.isArray(recordsFromData)
|
||||
? recordsFromData
|
||||
: Array.isArray(pageData)
|
||||
? pageData
|
||||
: Array.isArray(res?.data)
|
||||
? res.data
|
||||
: []
|
||||
|
||||
const totalValue =
|
||||
pageData?.total ??
|
||||
pageData?.count ??
|
||||
pageData?.totalCount ??
|
||||
res?.total ??
|
||||
(Array.isArray(records) ? records.length : 0)
|
||||
|
||||
tableData.value = records
|
||||
total.value = Number(totalValue) || 0
|
||||
|
||||
console.log('解析后的数据:', {
|
||||
records: records.length,
|
||||
total: total.value,
|
||||
firstRecord: records[0],
|
||||
})
|
||||
} catch (error: any) {
|
||||
console.error('load user role list error', error)
|
||||
const errorMsg = error?.message || error?.msg || '加载用户角色关联列表失败'
|
||||
ElMessage.error(errorMsg)
|
||||
tableData.value = []
|
||||
total.value = 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
const resetSearch = () => {
|
||||
queryForm.userId = null
|
||||
queryForm.roleId = null
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
loadList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.pageNum = page
|
||||
loadList()
|
||||
}
|
||||
|
||||
const openDrawer = async (mode: 'create') => {
|
||||
resetForm()
|
||||
drawerVisible.value = true
|
||||
|
||||
// 加载用户和角色数据
|
||||
await Promise.all([loadUsers(), loadRoles()])
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value?.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
|
||||
// 检查用户是否已拥有该角色
|
||||
try {
|
||||
const res: any = await userRoleByUserId(form.userId)
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
// 兼容多种返回格式
|
||||
const userRoles = Array.isArray(data)
|
||||
? data
|
||||
: Array.isArray(data.data)
|
||||
? data.data
|
||||
: Array.isArray(data.records)
|
||||
? data.records
|
||||
: Array.isArray(data.list)
|
||||
? data.list
|
||||
: []
|
||||
|
||||
// 检查是否已存在该角色关联
|
||||
const existingRole = userRoles.find((item: any) => item.roleId === form.roleId)
|
||||
|
||||
if (existingRole) {
|
||||
// 获取用户名和角色名
|
||||
const userName = getUserName(form.userId)
|
||||
const roleName = getRoleName(form.roleId)
|
||||
ElMessage.warning(`用户【${userName}】已拥有【${roleName}】角色,无需重复分配`)
|
||||
return
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('check user role error', error)
|
||||
// 如果检查失败,继续执行新增操作,让后端处理重复情况
|
||||
}
|
||||
|
||||
submitLoading.value = true
|
||||
try {
|
||||
const payload: any = {
|
||||
userId: form.userId,
|
||||
roleId: form.roleId,
|
||||
remark: form.remark || '',
|
||||
}
|
||||
|
||||
await userRoleAdd(payload)
|
||||
ElMessage.success('新增成功')
|
||||
drawerVisible.value = false
|
||||
loadList()
|
||||
} catch (error: any) {
|
||||
console.error('submit user role error', error)
|
||||
const errorMsg = error?.message || error?.msg || '新增失败'
|
||||
ElMessage.error(errorMsg)
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = (row: UserRoleItem) => {
|
||||
if (!row.id) {
|
||||
ElMessage.warning('缺少关联ID')
|
||||
return
|
||||
}
|
||||
const userName = getUserName(row.userId)
|
||||
const roleName = getRoleName(row.roleId)
|
||||
ElMessageBox.confirm(`确认删除用户「${userName}」与角色「${roleName}」的关联吗?`, '提示', {
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
if (row.id == null) {
|
||||
ElMessage.warning('缺少关联ID,无法删除')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await userRoleDel(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
loadList()
|
||||
} catch (error: any) {
|
||||
console.error('delete user role error', error)
|
||||
const errorMsg = error?.message || error?.msg || '删除失败'
|
||||
ElMessage.error(errorMsg)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadUsers()
|
||||
loadRoles()
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-role-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
844
rc_autoplc_front/src/views/user/index.vue
Normal file
844
rc_autoplc_front/src/views/user/index.vue
Normal file
@@ -0,0 +1,844 @@
|
||||
<template>
|
||||
<div class="user-page">
|
||||
<el-card class="search-card" shadow="never">
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" :model="queryForm" label-width="80px">
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
v-model="queryForm.userName"
|
||||
placeholder="输入用户名"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="resetSearch">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="toolbar">
|
||||
<el-button type="primary" @click="openDrawer('create')">新增用户</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
stripe
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="70" />
|
||||
<el-table-column
|
||||
prop="userName"
|
||||
label="用户名"
|
||||
min-width="120"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="nicke"
|
||||
label="昵称"
|
||||
min-width="120"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="sex"
|
||||
label="性别"
|
||||
width="80"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ scope.row.sex === true || scope.row.sex === 1 ? '男' : scope.row.sex === false || scope.row.sex === 0 ? '女' : '未知' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="depId"
|
||||
label="部门"
|
||||
min-width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ getDeptName(scope.row.depId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="posId"
|
||||
label="职位"
|
||||
min-width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ getPosName(scope.row.posId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="telephone"
|
||||
label="联系方式"
|
||||
min-width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ maskTelephone(scope.row.telephone) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="emailAddr"
|
||||
label="邮箱"
|
||||
min-width="180"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ maskEmail(scope.row.emailAddr) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="地址"
|
||||
min-width="150"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
min-width="150"
|
||||
:formatter="formatCell"
|
||||
/>
|
||||
<el-table-column label="操作" width="250" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="openDrawer('edit', scope.row)">编辑</el-button>
|
||||
<el-button type="success" link @click="openRoleDialog(scope.row)">分配角色</el-button>
|
||||
<el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.pageNum"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-drawer
|
||||
v-model="drawerVisible"
|
||||
:title="drawerTitle"
|
||||
direction="rtl"
|
||||
:size="600"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
class="drawer-form"
|
||||
>
|
||||
<el-form-item v-if="isEdit" label="用户ID">
|
||||
<el-input v-model="form.id" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="isEdit ? '新密码' : '密码'" :prop="isEdit ? '' : 'password'">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
:placeholder="isEdit ? '留空则不修改密码' : '请输入密码'"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称" prop="nicke">
|
||||
<el-input v-model="form.nicke" placeholder="请输入昵称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="form.sex">
|
||||
<el-radio :label="true">男</el-radio>
|
||||
<el-radio :label="false">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="emailAddr">
|
||||
<el-input v-model="form.emailAddr" placeholder="请输入邮箱地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="address">
|
||||
<el-input v-model="form.address" placeholder="请输入地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="telephone">
|
||||
<el-input v-model="form.telephone" placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门" prop="depId">
|
||||
<el-tree-select
|
||||
v-model="form.depId"
|
||||
:data="deptTreeOptions"
|
||||
:props="{ value: 'id', label: 'deptName', children: 'children' }"
|
||||
check-strictly
|
||||
placeholder="请选择部门"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="职位" prop="posId">
|
||||
<el-select
|
||||
v-model="form.posId"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择职位"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in positionOptions"
|
||||
:key="item.id"
|
||||
:label="item.posiName || item.posiCode"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入备注"
|
||||
:rows="3"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="drawerVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitForm">
|
||||
{{ isEdit ? '更新' : '提交' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 分配角色弹框 -->
|
||||
<el-dialog
|
||||
v-model="roleDialogVisible"
|
||||
title="分配角色"
|
||||
width="500px"
|
||||
>
|
||||
<el-checkbox-group v-model="selectedRoleIds">
|
||||
<el-checkbox
|
||||
v-for="role in roleOptions"
|
||||
:key="role.id"
|
||||
:label="role.id"
|
||||
>
|
||||
{{ role.roleName || role.roleCode }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="roleDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="assignRoleLoading" @click="handleAssignRole">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, computed } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useradd, userbyid, userdel, userlist, userupd } from '@/api/system/user'
|
||||
import { departtree } from '@/api/system/department'
|
||||
import { positionselect } from '@/api/system/position'
|
||||
import { userRoleAdd, userRoleByUserId, userRoleDel } from '@/api/system/user-role'
|
||||
import { rleselect } from '@/api/system/role'
|
||||
|
||||
interface UserItem {
|
||||
id?: number | string
|
||||
userName: string
|
||||
password?: string
|
||||
nicke?: string
|
||||
sex?: boolean | number
|
||||
emailAddr?: string
|
||||
address?: string
|
||||
telephone?: string
|
||||
depId?: number | string | null
|
||||
posId?: number | string | null
|
||||
remark?: string
|
||||
department?: any
|
||||
position?: any
|
||||
}
|
||||
|
||||
interface DeptItem {
|
||||
id?: number | string
|
||||
deptName: string
|
||||
deptCode?: string
|
||||
children?: DeptItem[]
|
||||
}
|
||||
|
||||
interface PositionItem {
|
||||
id?: number | string
|
||||
posiName?: string
|
||||
posiCode?: string
|
||||
}
|
||||
|
||||
interface RoleItem {
|
||||
id?: number | string
|
||||
roleName?: string
|
||||
roleCode?: string
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const tableData = ref<UserItem[]>([])
|
||||
const total = ref(0)
|
||||
const deptTreeData = ref<DeptItem[]>([])
|
||||
const positionOptions = ref<PositionItem[]>([])
|
||||
const deptMap = ref<Map<number | string, string>>(new Map())
|
||||
const posMap = ref<Map<number | string, string>>(new Map())
|
||||
const roleDialogVisible = ref(false)
|
||||
const assignRoleLoading = ref(false)
|
||||
const roleOptions = ref<RoleItem[]>([])
|
||||
const selectedRoleIds = ref<(number | string)[]>([])
|
||||
const currentAssignUserId = ref<number | string | null>(null)
|
||||
const originalUserRoles = ref<any[]>([]) // 保存用户原有的角色关联列表
|
||||
|
||||
const queryForm = reactive({
|
||||
userName: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
const drawerVisible = ref(false)
|
||||
const drawerTitle = ref('新增用户')
|
||||
const isEdit = ref(false)
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive<UserItem>({
|
||||
id: undefined,
|
||||
userName: '',
|
||||
password: '',
|
||||
nicke: '',
|
||||
sex: true,
|
||||
emailAddr: '',
|
||||
address: '',
|
||||
telephone: '',
|
||||
depId: null,
|
||||
posId: null,
|
||||
remark: '',
|
||||
})
|
||||
|
||||
const rules: FormRules = {
|
||||
userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
|
||||
],
|
||||
nicke: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
|
||||
emailAddr: [
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.id = undefined
|
||||
form.userName = ''
|
||||
form.password = ''
|
||||
form.nicke = ''
|
||||
form.sex = true
|
||||
form.emailAddr = ''
|
||||
form.address = ''
|
||||
form.telephone = ''
|
||||
form.depId = null
|
||||
form.posId = null
|
||||
form.remark = ''
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
const formatCell = (_row: any, _column: any, value: any) => {
|
||||
if (value === 0) return 0
|
||||
return value === undefined || value === null || value === '' ? '暂无' : value
|
||||
}
|
||||
|
||||
// 脱敏处理联系方式
|
||||
const maskTelephone = (telephone: string | null | undefined) => {
|
||||
if (!telephone || telephone === '') return '暂无'
|
||||
const str = String(telephone)
|
||||
// 手机号:显示前3位和后4位,中间用****代替
|
||||
if (str.length === 11) {
|
||||
return str.substring(0, 3) + '****' + str.substring(7)
|
||||
}
|
||||
// 其他长度:显示前2位和后2位,中间用****代替
|
||||
if (str.length > 4) {
|
||||
return str.substring(0, 2) + '****' + str.substring(str.length - 2)
|
||||
}
|
||||
// 长度小于等于4:全部用*代替
|
||||
return '****'
|
||||
}
|
||||
|
||||
// 脱敏处理邮箱
|
||||
const maskEmail = (email: string | null | undefined) => {
|
||||
if (!email || email === '') return '暂无'
|
||||
const str = String(email)
|
||||
const atIndex = str.indexOf('@')
|
||||
if (atIndex === -1) {
|
||||
// 没有@符号,当作普通字符串处理
|
||||
if (str.length > 4) {
|
||||
return str.substring(0, 2) + '***' + str.substring(str.length - 2)
|
||||
}
|
||||
return '***'
|
||||
}
|
||||
// 有@符号,处理邮箱格式
|
||||
const prefix = str.substring(0, atIndex)
|
||||
const suffix = str.substring(atIndex)
|
||||
if (prefix.length <= 2) {
|
||||
// 前缀长度小于等于2,只显示第一个字符
|
||||
return prefix.substring(0, 1) + '***' + suffix
|
||||
} else {
|
||||
// 前缀长度大于2,显示前2个字符和后缀
|
||||
return prefix.substring(0, 2) + '***' + suffix
|
||||
}
|
||||
}
|
||||
|
||||
// 构建部门树形选择器的选项
|
||||
const deptTreeOptions = computed(() => {
|
||||
const buildOptions = (nodes: DeptItem[]): any[] => {
|
||||
return nodes.map((node) => ({
|
||||
id: node.id,
|
||||
deptName: node.deptName,
|
||||
children: node.children ? buildOptions(node.children) : undefined,
|
||||
}))
|
||||
}
|
||||
return buildOptions(deptTreeData.value)
|
||||
})
|
||||
|
||||
// 构建部门映射(用于显示部门名称)
|
||||
const buildDeptMap = (nodes: DeptItem[]) => {
|
||||
nodes.forEach((node) => {
|
||||
if (node.id) {
|
||||
deptMap.value.set(node.id, node.deptName)
|
||||
}
|
||||
if (node.children) {
|
||||
buildDeptMap(node.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取部门名称
|
||||
const getDeptName = (depId: number | string | null | undefined) => {
|
||||
if (!depId) return '暂无'
|
||||
return deptMap.value.get(depId) || '暂无'
|
||||
}
|
||||
|
||||
// 获取职位名称
|
||||
const getPosName = (posId: number | string | null | undefined) => {
|
||||
if (!posId) return '暂无'
|
||||
return posMap.value.get(posId) || '暂无'
|
||||
}
|
||||
|
||||
// 加载部门树
|
||||
const loadDeptTree = async () => {
|
||||
try {
|
||||
const res: any = await departtree()
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
// 兼容多种返回格式
|
||||
const treeNodes = Array.isArray(data)
|
||||
? data
|
||||
: Array.isArray(data.data)
|
||||
? data.data
|
||||
: Array.isArray(data.children)
|
||||
? data.children
|
||||
: []
|
||||
|
||||
deptTreeData.value = treeNodes
|
||||
deptMap.value.clear()
|
||||
buildDeptMap(treeNodes)
|
||||
console.log('部门树数据:', deptTreeData.value)
|
||||
} catch (error) {
|
||||
console.error('load department tree error', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载职位列表
|
||||
const loadPositionList = async () => {
|
||||
try {
|
||||
const res: any = await positionselect()
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
// 兼容多种返回格式
|
||||
const positions = Array.isArray(data)
|
||||
? data
|
||||
: Array.isArray(data.data)
|
||||
? data.data
|
||||
: Array.isArray(data.records)
|
||||
? data.records
|
||||
: Array.isArray(data.list)
|
||||
? data.list
|
||||
: []
|
||||
|
||||
positionOptions.value = positions
|
||||
posMap.value.clear()
|
||||
positions.forEach((pos: PositionItem) => {
|
||||
if (pos.id) {
|
||||
posMap.value.set(pos.id, pos.posiName || pos.posiCode || '')
|
||||
}
|
||||
})
|
||||
console.log('职位列表数据:', positionOptions.value)
|
||||
} catch (error) {
|
||||
console.error('load position list error', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载用户列表
|
||||
const loadList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// 构建查询参数,过滤空字符串
|
||||
const params: any = {
|
||||
pageNum: pagination.pageNum,
|
||||
pageSize: pagination.pageSize,
|
||||
}
|
||||
if (queryForm.userName && queryForm.userName.trim()) {
|
||||
params.userName = queryForm.userName.trim()
|
||||
}
|
||||
|
||||
const res: any = await userlist(params)
|
||||
|
||||
console.log('用户列表API返回数据:', res)
|
||||
|
||||
// 根据返回格式处理数据
|
||||
let pageData = res?.data
|
||||
|
||||
// 如果res.data不存在,可能是直接返回了分页数据
|
||||
if (!pageData && (res?.records || res?.total !== undefined)) {
|
||||
pageData = res
|
||||
}
|
||||
|
||||
// 兼容多种返回格式
|
||||
const recordsFromData =
|
||||
pageData?.records ||
|
||||
pageData?.list ||
|
||||
pageData?.rows ||
|
||||
pageData?.items ||
|
||||
(Array.isArray(pageData?.data) ? pageData.data : undefined)
|
||||
|
||||
const records = Array.isArray(recordsFromData)
|
||||
? recordsFromData
|
||||
: Array.isArray(pageData)
|
||||
? pageData
|
||||
: Array.isArray(res?.data)
|
||||
? res.data
|
||||
: []
|
||||
|
||||
const totalValue =
|
||||
pageData?.total ??
|
||||
pageData?.count ??
|
||||
pageData?.totalCount ??
|
||||
res?.total ??
|
||||
(Array.isArray(records) ? records.length : 0)
|
||||
|
||||
tableData.value = records
|
||||
total.value = Number(totalValue) || 0
|
||||
|
||||
console.log('解析后的数据:', {
|
||||
records: records.length,
|
||||
total: total.value,
|
||||
firstRecord: records[0]
|
||||
})
|
||||
} catch (error: any) {
|
||||
console.error('load user list error', error)
|
||||
const errorMsg = error?.message || error?.msg || '加载用户列表失败'
|
||||
ElMessage.error(errorMsg)
|
||||
tableData.value = []
|
||||
total.value = 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.pageNum = 1
|
||||
loadList()
|
||||
}
|
||||
|
||||
const resetSearch = () => {
|
||||
queryForm.userName = ''
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pagination.pageSize = size
|
||||
loadList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page: number) => {
|
||||
pagination.pageNum = page
|
||||
loadList()
|
||||
}
|
||||
|
||||
const openDrawer = async (mode: 'create' | 'edit', row?: UserItem) => {
|
||||
resetForm()
|
||||
isEdit.value = mode === 'edit'
|
||||
drawerTitle.value = isEdit.value ? '编辑用户' : '新增用户'
|
||||
drawerVisible.value = true
|
||||
|
||||
// 加载部门和职位数据
|
||||
await Promise.all([loadDeptTree(), loadPositionList()])
|
||||
|
||||
if (isEdit.value && row?.id != null) {
|
||||
try {
|
||||
const res: any = await userbyid(row.id)
|
||||
const data = res?.data || res || {}
|
||||
form.id = data.id ?? row.id
|
||||
form.userName = data.userName ?? row.userName
|
||||
form.nicke = data.nicke ?? data.nickName ?? row.nicke ?? ''
|
||||
form.sex = data.sex ?? row.sex ?? true
|
||||
form.emailAddr = data.emailAddr ?? row.emailAddr ?? ''
|
||||
form.address = data.address ?? row.address ?? ''
|
||||
form.telephone = data.telephone ?? row.telephone ?? ''
|
||||
form.depId = data.depId ?? row.depId ?? null
|
||||
form.posId = data.posId ?? row.posId ?? null
|
||||
form.remark = data.remark ?? row.remark ?? ''
|
||||
// 编辑时不设置密码
|
||||
form.password = ''
|
||||
} catch (error) {
|
||||
ElMessage.error('获取用户详情失败')
|
||||
drawerVisible.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value?.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
const payload: any = {
|
||||
...form,
|
||||
}
|
||||
|
||||
// 编辑时,如果密码为空,则不发送密码字段
|
||||
if (isEdit.value && !payload.password) {
|
||||
delete payload.password
|
||||
}
|
||||
|
||||
// 处理空值
|
||||
if (!payload.depId) {
|
||||
payload.depId = null
|
||||
}
|
||||
if (!payload.posId) {
|
||||
payload.posId = null
|
||||
}
|
||||
|
||||
if (isEdit.value) {
|
||||
await userupd(payload)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await useradd(payload)
|
||||
ElMessage.success('新增成功')
|
||||
}
|
||||
drawerVisible.value = false
|
||||
loadList()
|
||||
} catch (error: any) {
|
||||
console.error('submit user error', error)
|
||||
const errorMsg = error?.message || error?.msg || (isEdit.value ? '更新失败' : '新增失败')
|
||||
ElMessage.error(errorMsg)
|
||||
} finally {
|
||||
submitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDelete = (row: UserItem) => {
|
||||
if (!row.id) {
|
||||
ElMessage.warning('缺少用户ID')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(`确认删除用户「${row.userName}」吗?`, '提示', {
|
||||
type: 'warning',
|
||||
})
|
||||
.then(async () => {
|
||||
if (row.id == null) {
|
||||
ElMessage.warning('缺少用户ID,无法删除')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await userdel(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
loadList()
|
||||
} catch (error: any) {
|
||||
console.error('delete user error', error)
|
||||
const errorMsg = error?.message || error?.msg || '删除失败'
|
||||
ElMessage.error(errorMsg)
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
// 加载角色列表
|
||||
const loadRoleList = async () => {
|
||||
try {
|
||||
const res: any = await rleselect({})
|
||||
const data = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : []
|
||||
roleOptions.value = data
|
||||
} catch (error) {
|
||||
console.error('load role list error', error)
|
||||
ElMessage.error('加载角色列表失败')
|
||||
roleOptions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 打开角色分配弹框
|
||||
const openRoleDialog = async (row: UserItem) => {
|
||||
if (!row.id) {
|
||||
ElMessage.warning('缺少用户ID')
|
||||
return
|
||||
}
|
||||
currentAssignUserId.value = row.id
|
||||
selectedRoleIds.value = []
|
||||
roleDialogVisible.value = true
|
||||
|
||||
// 确保角色列表已加载
|
||||
if (roleOptions.value.length === 0) {
|
||||
await loadRoleList()
|
||||
}
|
||||
|
||||
// 获取用户已有的角色
|
||||
try {
|
||||
const res: any = await userRoleByUserId(row.id)
|
||||
const data = res?.data ?? res ?? {}
|
||||
|
||||
// 兼容多种返回格式
|
||||
const userRoles = Array.isArray(data)
|
||||
? data
|
||||
: Array.isArray(data.data)
|
||||
? data.data
|
||||
: Array.isArray(data.records)
|
||||
? data.records
|
||||
: Array.isArray(data.list)
|
||||
? data.list
|
||||
: []
|
||||
|
||||
// 保存原有的角色关联列表(包含ID)
|
||||
originalUserRoles.value = userRoles
|
||||
|
||||
// 提取已有角色的ID列表
|
||||
if (Array.isArray(userRoles) && userRoles.length > 0) {
|
||||
selectedRoleIds.value = userRoles
|
||||
.map((item: any) => item.roleId)
|
||||
.filter((id: any) => id !== undefined && id !== null)
|
||||
} else {
|
||||
selectedRoleIds.value = []
|
||||
originalUserRoles.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('load user roles error', error)
|
||||
// 如果获取失败,不影响弹框打开,只是不预选角色
|
||||
originalUserRoles.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 分配角色
|
||||
const handleAssignRole = async () => {
|
||||
if (!currentAssignUserId.value) {
|
||||
ElMessage.warning('缺少用户ID')
|
||||
return
|
||||
}
|
||||
|
||||
assignRoleLoading.value = true
|
||||
try {
|
||||
// 获取原有的角色ID列表
|
||||
const originalRoleIds = originalUserRoles.value
|
||||
.map((item: any) => item.roleId)
|
||||
.filter((id: any) => id !== undefined && id !== null)
|
||||
|
||||
// 计算需要新增的角色(新选中但原来没有的)
|
||||
const rolesToAdd = selectedRoleIds.value.filter(
|
||||
(roleId) => !originalRoleIds.includes(roleId)
|
||||
)
|
||||
|
||||
// 计算需要删除的角色(原来有但现在未选中的)
|
||||
const rolesToDelete = originalUserRoles.value.filter(
|
||||
(item: any) => !selectedRoleIds.value.includes(item.roleId)
|
||||
)
|
||||
|
||||
// 执行新增操作
|
||||
const addPromises = rolesToAdd.map((roleId) => {
|
||||
return userRoleAdd({
|
||||
userId: currentAssignUserId.value,
|
||||
roleId: roleId,
|
||||
remark: '',
|
||||
})
|
||||
})
|
||||
|
||||
// 执行删除操作
|
||||
const deletePromises = rolesToDelete.map((item: any) => {
|
||||
if (item.id) {
|
||||
return userRoleDel(item.id)
|
||||
}
|
||||
return Promise.resolve()
|
||||
})
|
||||
|
||||
// 等待所有操作完成
|
||||
await Promise.all([...addPromises, ...deletePromises])
|
||||
|
||||
ElMessage.success('分配角色成功')
|
||||
roleDialogVisible.value = false
|
||||
} catch (error: any) {
|
||||
console.error('assign role error', error)
|
||||
const errorMsg = error?.message || error?.msg || '分配角色失败'
|
||||
ElMessage.error(errorMsg)
|
||||
} finally {
|
||||
assignRoleLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadDeptTree()
|
||||
loadPositionList()
|
||||
loadRoleList()
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
13
rc_autoplc_front/tsconfig.app.json
Normal file
13
rc_autoplc_front/tsconfig.app.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
11
rc_autoplc_front/tsconfig.json
Normal file
11
rc_autoplc_front/tsconfig.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
19
rc_autoplc_front/tsconfig.node.json
Normal file
19
rc_autoplc_front/tsconfig.node.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "@tsconfig/node24/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*",
|
||||
"eslint.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
18
rc_autoplc_front/vite.config.ts
Normal file
18
rc_autoplc_front/vite.config.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user