rczn001/RCZN-bs-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端代码第一次提交

Browse Source
This commit is contained in:
Lxq
2025-12-15 16:16:07 +08:00
parent 8aa2804b1c
commit 9c47f313b7
41 changed files with 7218 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
rc_autoplc_front/.env.development Normal file
View File

@@ -0,0 +1 @@
VITE_API_URL=http://192.168.110.204:9090

1
rc_autoplc_front/.env.production Normal file
View File

@@ -0,0 +1 @@
VITE_API_URL=http://192.168.110.204:9090

36
rc_autoplc_front/.gitignore vendored Normal file
View 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
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

42
rc_autoplc_front/README.md Normal file
View 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
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

13
rc_autoplc_front/index.html Normal file
View 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
View File

File diff suppressed because it is too large Load Diff

35
rc_autoplc_front/package.json Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

71
rc_autoplc_front/src/App.vue Normal file
View 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/department.ts Normal file
View 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/manage-log.ts Normal file
View 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/position.ts Normal file
View 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/listPpage',
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',
})
}

39
rc_autoplc_front/src/api/role.ts Normal file
View File

@@ -0,0 +1,39 @@
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',
})
}

39
rc_autoplc_front/src/api/user.ts Normal file
View File

@@ -0,0 +1,39 @@
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 userbyid(id: string | number) {
return request({
url: `/user/getById/${id}`,
method: 'get',
})
}

86
rc_autoplc_front/src/assets/base.css Normal file
View 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;
}

1
rc_autoplc_front/src/assets/logo.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

35
rc_autoplc_front/src/assets/main.css Normal file
View 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
View 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
View 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
View 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
View 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>

7
rc_autoplc_front/src/components/icons/IconDocumentation.vue Normal file
View File

@@ -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
View 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
View 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
View 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
View 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')

45
rc_autoplc_front/src/router/index.ts Normal file
View File

@@ -0,0 +1,45 @@
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
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'),
},
],
})
// 添加全局路由守卫
// 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
View 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
View 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
View 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

654
rc_autoplc_front/src/views/department/index.vue Normal file
View File

@@ -0,0 +1,654 @@
<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="leaderName"
label="部门领导"
min-width="150"
: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>
</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.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/department'
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
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
}
// 构建树形选择器的选项
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 {
// 这里需要根据实际API调整，暂时使用空数组
// 如果有用户列表API，可以在这里调用
// const res: any = await userlist({ pageNum: 1, pageSize: 9999 })
// const data = res?.data ?? res ?? {}
// const records = data.records || data.list || data.rows || data.items || []
// userOptions.value = Array.isArray(records) ? records : []
userOptions.value = []
} catch (error) {
console.error('load user list error', error)
}
}
// 加载部门列表
const loadList = async () => {
loading.value = true
try {
// 构建查询参数，过滤空字符串
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>

475
rc_autoplc_front/src/views/manage-log/index.vue Normal file
View File

@@ -0,0 +1,475 @@
<template>
<div class="log-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.operator"
placeholder="输入操作人"
clearable
style="width: 200px"
/>
</el-form-item>
<el-form-item label="操作类型">
<el-input
v-model="queryForm.operationType"
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="operator"
label="操作人"
min-width="120"
:formatter="formatCell"
/>
<el-table-column
prop="operationType"
label="操作类型"
min-width="120"
:formatter="formatCell"
/>
<el-table-column
prop="operationContent"
label="操作内容"
min-width="200"
:formatter="formatCell"
show-overflow-tooltip
/>
<el-table-column
prop="module"
label="操作模块"
min-width="120"
:formatter="formatCell"
/>
<el-table-column
prop="ipAddress"
label="IP地址"
min-width="140"
:formatter="formatCell"
/>
<el-table-column
prop="operationTime"
label="操作时间"
width="180"
:formatter="formatCell"
/>
<el-table-column
prop="remark"
label="备注"
min-width="150"
:formatter="formatCell"
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="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="operator">
<el-input v-model="form.operator" placeholder="请输入操作人" />
</el-form-item>
<el-form-item label="操作类型" prop="operationType">
<el-input v-model="form.operationType" placeholder="请输入操作类型" />
</el-form-item>
<el-form-item label="操作内容" prop="operationContent">
<el-input
v-model="form.operationContent"
type="textarea"
placeholder="请输入操作内容"
:rows="3"
maxlength="500"
show-word-limit
/>
</el-form-item>
<el-form-item label="操作模块" prop="module">
<el-input v-model="form.module" placeholder="请输入操作模块" />
</el-form-item>
<el-form-item label="IP地址" prop="ipAddress">
<el-input v-model="form.ipAddress" placeholder="请输入IP地址" />
</el-form-item>
<el-form-item label="操作时间" prop="operationTime">
<el-date-picker
v-model="form.operationTime"
type="datetime"
placeholder="请选择操作时间"
style="width: 100%"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</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/manage-log'
interface LogItem {
id?: number | string
operator?: string
operationType?: string
operationContent?: string
module?: string
ipAddress?: string
operationTime?: string
remark?: string
remarks?: string
createTime?: string
updateTime?: string
}
const loading = ref(false)
const submitLoading = ref(false)
const tableData = ref<LogItem[]>([])
const total = ref(0)
const queryForm = reactive({
operator: '',
operationType: '',
})
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,
operator: '',
operationType: '',
operationContent: '',
module: '',
ipAddress: '',
operationTime: '',
remark: '',
})
const rules: FormRules = {
operator: [{ required: true, message: '请输入操作人', trigger: 'blur' }],
operationType: [{ required: true, message: '请输入操作类型', trigger: 'blur' }],
operationContent: [{ required: true, message: '请输入操作内容', trigger: 'blur' }],
}
const resetForm = () => {
form.id = undefined
form.operator = ''
form.operationType = ''
form.operationContent = ''
form.module = ''
form.ipAddress = ''
form.operationTime = ''
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.operator && queryForm.operator.trim()) {
params.operator = queryForm.operator.trim()
}
if (queryForm.operationType && queryForm.operationType.trim()) {
params.operationType = queryForm.operationType.trim()
}
const res: any = await manageloglist(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 log 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.operator = ''
queryForm.operationType = ''
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.operator = data.operator ?? row.operator ?? ''
form.operationType = data.operationType ?? row.operationType ?? ''
form.operationContent = data.operationContent ?? row.operationContent ?? ''
form.module = data.module ?? row.module ?? ''
form.ipAddress = data.ipAddress ?? row.ipAddress ?? ''
form.operationTime = data.operationTime ?? row.operationTime ?? ''
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,
}
if (isEdit.value) {
await managelogupd(payload)
ElMessage.success('更新成功')
} else {
await managelogadd(payload)
ElMessage.success('新增成功')
}
drawerVisible.value = false
loadList()
} catch (error: any) {
console.error('submit log error', error)
const errorMsg = error?.message || error?.msg || (isEdit.value ? '更新失败' : '新增失败')
ElMessage.error(errorMsg)
} finally {
submitLoading.value = false
}
})
}
const handleDelete = (row: LogItem) => {
if (!row.id) {
ElMessage.warning('缺少日志ID')
return
}
ElMessageBox.confirm(`确认删除操作日志吗？`, '提示', {
type: 'warning',
})
.then(async () => {
if (row.id == null) {
ElMessage.warning('缺少日志ID，无法删除')
return
}
try {
await managelogdel(row.id)
ElMessage.success('删除成功')
loadList()
} catch (error: any) {
console.error('delete log error', error)
const errorMsg = error?.message || error?.msg || '删除失败'
ElMessage.error(errorMsg)
}
})
.catch(() => {})
}
onMounted(() => {
loadList()
})
</script>
<style scoped>
.log-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>

407
rc_autoplc_front/src/views/position/index.vue Normal file
View 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/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
View 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/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>

685
rc_autoplc_front/src/views/user/index.vue Normal file
View File

@@ -0,0 +1,685 @@
<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="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="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>
</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/user'
import { departtree } from '@/api/department'
import { positionselect } from '@/api/position'
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
}
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 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(() => {})
}
onMounted(() => {
loadDeptTree()
loadPositionList()
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>

12
rc_autoplc_front/tsconfig.app.json Normal file
View File

@@ -0,0 +1,12 @@
{
"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
View File

@@ -0,0 +1,11 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}

19
rc_autoplc_front/tsconfig.node.json Normal file
View 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
View 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))
},
},
})