<First>苏州卡特开始
This commit is contained in:
commit
1931900966
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
19
README.md
Normal file
19
README.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
# wcs_web
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
10494
package-lock.json
generated
Normal file
10494
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
37
package.json
Normal file
37
package.json
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"name": "wcs_web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "2.5.6",
|
||||
"moment": "^2.30.1",
|
||||
"print-js": "^1.6.0",
|
||||
"qrcode": "^1.5.3",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
"vuex": "^4.0.0",
|
||||
"vuex-persist": "^3.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"axios": "^1.6.7",
|
||||
"sass": "^1.32.7",
|
||||
"sass-loader": "^12.0.0",
|
||||
"vue-cli-plugin-element-plus": "^0.0.13"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
BIN
public/ico/bklogo.ico
Normal file
BIN
public/ico/bklogo.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
public/image/BKLogoSmall.png
Normal file
BIN
public/image/BKLogoSmall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
25
public/index.html
Normal file
25
public/index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="ico/bklogo.ico">
|
||||
<title>WCS控制系统网页端</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</html>
|
||||
47
src/App.vue
Normal file
47
src/App.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<MainPage/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainPage from "@/view/layout/MainPage.vue";
|
||||
|
||||
const debounce = (fn, delay) => {
|
||||
let timer = null;
|
||||
return function () {
|
||||
let context = this;
|
||||
let args = arguments;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
fn.apply(context, args);
|
||||
}, delay);
|
||||
};
|
||||
};
|
||||
const _ResizeObserver = window.ResizeObserver;
|
||||
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
|
||||
constructor(callback) {
|
||||
callback = debounce(callback, 16);
|
||||
super(callback);
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
MainPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2c3e50;
|
||||
margin: 0 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
10
src/axios/api.accept.js
Normal file
10
src/axios/api.accept.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
|
||||
export default {
|
||||
// 分页控件查询
|
||||
getApiAcceptInfoWithPage(request) {
|
||||
return axios.post('/api/wcs/apiAccept/getApiAcceptWithPage', request)
|
||||
}
|
||||
}
|
||||
|
||||
14
src/axios/api.request.js
Normal file
14
src/axios/api.request.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
|
||||
export default {
|
||||
// 请求后台服务获取所有的请求列表
|
||||
getApiRequestInfo() {
|
||||
return axios.get('/api/wcs/apiRequest/getApiRequest')
|
||||
},
|
||||
// 分页控件查询
|
||||
getApiRequestInfoWithPage(request) {
|
||||
return axios.post('/api/wcs/apiRequest/getApiRequestWithPage', request)
|
||||
}
|
||||
}
|
||||
|
||||
33
src/axios/base/base.axios.js
Normal file
33
src/axios/base/base.axios.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import axios from "axios";
|
||||
|
||||
if(process.env.NODE_ENV === 'development') {
|
||||
axios.defaults.baseURL = 'http://localhost:890';
|
||||
}else {
|
||||
axios.defaults.baseURL = 'http://192.168.103.200:18990';
|
||||
}
|
||||
//axios.defaults.headers.post['Content-Type'] = 'application/json';
|
||||
//axios.defaults.responseType = 'application/json'
|
||||
axios.defaults.timeout = 5000
|
||||
|
||||
// axios.interceptors.request.use(function (config) {
|
||||
// // 在发送请求之前做些什么
|
||||
// return config;
|
||||
// }, function (error) {
|
||||
// // 对请求错误做些什么
|
||||
// return Promise.reject(error);
|
||||
// });
|
||||
|
||||
// 添加响应拦截器
|
||||
// axios.interceptors.response.use(function (response) {
|
||||
// // 2xx 范围内的状态码都会触发该函数。
|
||||
// // 对响应数据做点什么
|
||||
// return response;
|
||||
// }, function (error) {
|
||||
// // 超出 2xx 范围的状态码都会触发该函数。
|
||||
// // 对响应错误做点什么
|
||||
// console.log('请求发生错误,错误信息:' + error)
|
||||
// return Promise.reject(error);
|
||||
// });
|
||||
//
|
||||
|
||||
export default axios;
|
||||
14
src/axios/config.js
Normal file
14
src/axios/config.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
const config = {
|
||||
|
||||
// 分页获取系统配置信息
|
||||
getConfigWithPage(pageEntity) {
|
||||
return axios.post('api/wcs/config/getConfigWithPage', pageEntity)
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default config
|
||||
18
src/axios/location.js
Normal file
18
src/axios/location.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 请求Wcs服务获取所有的点位列表
|
||||
getLocation() {
|
||||
return axios.get('/api/wcs/location/getLocation')
|
||||
},
|
||||
|
||||
// 请求Wcs服务获取所有的点位列表 ---- 分页请求
|
||||
getLocationWithPage(pageEntity) {
|
||||
return axios.post('/api/wcs/location/getLocationWithPage', pageEntity)
|
||||
},
|
||||
|
||||
// 请求Wcs服务更新点位状态
|
||||
updateLocationStatus(locationDto) {
|
||||
return axios.post('/api/wcs/location/updateLocation', locationDto)
|
||||
}
|
||||
}
|
||||
17
src/axios/menu.js
Normal file
17
src/axios/menu.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 分页控件查询
|
||||
getMenuDataWithPage(request) {
|
||||
return axios.post('/api/wcs/menu/getMenuWithPage', request)
|
||||
},
|
||||
// 更新信息
|
||||
updateMenu(request) {
|
||||
return axios.post('/api/wcs/menu/updateMenu', request)
|
||||
},
|
||||
|
||||
addMenu(request) {
|
||||
return axios.post('/api/wcs/menu/addMenu', request)
|
||||
}
|
||||
}
|
||||
|
||||
34
src/axios/system.js
Normal file
34
src/axios/system.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 请求服务器获取所有信息列表 ---- 分页请求
|
||||
getSysMsgWithPage(pageEntity) {
|
||||
return axios.post('/api/wcs/runningInfo/getSysMsgWithPage', pageEntity)
|
||||
},
|
||||
|
||||
// 验证文件是否存在
|
||||
checkDownloadFile(req) {
|
||||
return axios.post('/api/wcs/runningInfo/checkDownLoadLog', req)
|
||||
},
|
||||
getLogFileName(req) {
|
||||
return axios.get('/api/wcs/runningInfo/getLogFileName', {
|
||||
params: {
|
||||
logType: req
|
||||
}
|
||||
})
|
||||
},
|
||||
// 下载文件
|
||||
downloadFile(req) {
|
||||
return axios({
|
||||
// 用axios发送post请求
|
||||
method: "post",
|
||||
url: '/api/wcs/runningInfo/downLoadLog', // 请求地址 ,也可以传递参数
|
||||
headers: {
|
||||
},
|
||||
data: req,
|
||||
responseType: "blob", // 表明返回服务器返回的数据类型
|
||||
timeout: 30000
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
20
src/axios/user.group.js
Normal file
20
src/axios/user.group.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 查询所有的用户组信息
|
||||
getUserGroup() {
|
||||
return axios.get('api/wcs/userGroup/getUserGroup')
|
||||
},
|
||||
// 添加用户组
|
||||
addUserGroup(userGroup) {
|
||||
return axios.post('api/wcs/userGroup/addUserGroup', userGroup)
|
||||
},
|
||||
// 删除用户组
|
||||
deleteUserGroup(groupId) {
|
||||
return axios.delete('api/wcs/userGroup/deleteUserGroup', {
|
||||
params: {
|
||||
groupId: groupId
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
17
src/axios/user.js
Normal file
17
src/axios/user.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 调用登录接口
|
||||
login(loginUser) {
|
||||
return axios.post('api/wcs/user/login', loginUser)
|
||||
},
|
||||
|
||||
/**
|
||||
* 分页查询所有的用户信息
|
||||
* @param searchParams
|
||||
* @returns {Promise<axios.AxiosResponse<any>>}
|
||||
*/
|
||||
getUserWithPage(searchParams) {
|
||||
return axios.post('api/wcs/user/getUserWithPage', searchParams)
|
||||
}
|
||||
}
|
||||
16
src/axios/user.rule.js
Normal file
16
src/axios/user.rule.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 查询所有的用户组对应的菜单权限信息
|
||||
getUserGroupMenu(groupId) {
|
||||
return axios.get('api/wcs/userRule/getUserRule', {
|
||||
params: {
|
||||
groupId: groupId
|
||||
}
|
||||
})
|
||||
},
|
||||
// 更新用户组权限
|
||||
updateUserGroupMenu(request) {
|
||||
return axios.post('api/wcs/userRule/updateUserRule', request)
|
||||
},
|
||||
}
|
||||
28
src/axios/wcs.task.js
Normal file
28
src/axios/wcs.task.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 请求Wcs服务获取所有的Wcs任务列表
|
||||
getWcsTask() {
|
||||
return axios.get('/api/wcs/wcsTask/getWcsTask')
|
||||
},
|
||||
// 请求后台获取对应WMS的WCS子任务用于展示
|
||||
getWcsTaskWithTaskId(taskId) {
|
||||
return axios.get('/api/Wcs/wcsTask/getWcsTaskWithTaskId',
|
||||
{
|
||||
params: {
|
||||
taskId: taskId
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 请求服务器获取所有 Wms 任务列表 ---- 分页请求
|
||||
getWcsTaskWithPage(pageEntity) {
|
||||
return axios.post('/api/wcs/wcsTask/getWcsTaskWithPage', pageEntity)
|
||||
},
|
||||
|
||||
|
||||
// 请求修改 wcs 任务的状态
|
||||
updateWcsStatus(updateData) {
|
||||
return axios.post('/api/wcs/wcsTask/updateStatus', updateData)
|
||||
}
|
||||
}
|
||||
23
src/axios/wms.task.js
Normal file
23
src/axios/wms.task.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import axios from '@/axios/base/base.axios';
|
||||
|
||||
export default {
|
||||
// 请求后台服务获取所有的Wms任务列表
|
||||
getWmsTask() {
|
||||
return axios.get('/api/wcs/wmsTask/getWmsTask')
|
||||
},
|
||||
// 请求后台服务器添加任务
|
||||
addWmsTask(wmsTask) {
|
||||
return axios.post("api/wcs/wmsTask/setStackerTask",wmsTask)
|
||||
},
|
||||
// 请求后台变更Wms任务状态
|
||||
changeTaskStatus(changeEntity) {
|
||||
return axios.post("api/wcs/wmsTask/updateWmsTaskStatus",changeEntity)
|
||||
},
|
||||
|
||||
// 请求服务器获取所有 Wms 任务列表 ---- 分页请求
|
||||
getWmsTaskWithPage(pageEntity) {
|
||||
return axios.post('/api/wcs/wmsTask/getWmsTaskWithPage', pageEntity)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
47
src/enum/taskEnum/wms.taskStatus.enum.js
Normal file
47
src/enum/taskEnum/wms.taskStatus.enum.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import baseColor from "@/plugins/color/base.color";
|
||||
|
||||
// wms任务状态
|
||||
export const wmsTaskStatusEnum = {
|
||||
creat: {
|
||||
value: 0,
|
||||
label: '新创建',
|
||||
color: 'Info'
|
||||
},
|
||||
queue: {
|
||||
value: 1,
|
||||
label: '排队中',
|
||||
color: 'Info'
|
||||
},
|
||||
running: {
|
||||
value: 2,
|
||||
label: '执行中',
|
||||
color: 'Primary'
|
||||
},
|
||||
finish: {
|
||||
value: 3,
|
||||
label: '执行完成',
|
||||
color: 'Success'
|
||||
},
|
||||
error: {
|
||||
value: 9,
|
||||
label: '执行异常',
|
||||
color: 'Warning'
|
||||
}
|
||||
}
|
||||
|
||||
export function formatterWmsTaskStatusEnum(value) {
|
||||
switch (parseInt(value)){
|
||||
case wmsTaskStatusEnum.creat.value:
|
||||
return {label: wmsTaskStatusEnum.creat.label, color: wmsTaskStatusEnum.creat.color};
|
||||
case wmsTaskStatusEnum.queue.value:
|
||||
return {label: wmsTaskStatusEnum.queue.label, color: wmsTaskStatusEnum.queue.color};
|
||||
case wmsTaskStatusEnum.running.value:
|
||||
return {label: wmsTaskStatusEnum.running.label, color: wmsTaskStatusEnum.running.color};
|
||||
case wmsTaskStatusEnum.finish.value:
|
||||
return {label: wmsTaskStatusEnum.finish.label, color: wmsTaskStatusEnum.finish.color};
|
||||
case wmsTaskStatusEnum.error.value:
|
||||
return {label: wmsTaskStatusEnum.error.label, color: wmsTaskStatusEnum.error.color};
|
||||
default:
|
||||
return {label: `未知类型:${value}`, color: baseColor.Red};
|
||||
}
|
||||
}
|
||||
47
src/enum/taskEnum/wms.taskType.enum.js
Normal file
47
src/enum/taskEnum/wms.taskType.enum.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import baseColor from "@/plugins/color/base.color";
|
||||
|
||||
// wms任务类型
|
||||
export const wmsTaskTypeEnum = {
|
||||
inTask:{
|
||||
value:1,
|
||||
label:'入库任务',
|
||||
color: 'Success'
|
||||
},
|
||||
outTask:{
|
||||
value:2,
|
||||
label:'出库任务',
|
||||
color: 'Warning'
|
||||
},
|
||||
pickTask:{
|
||||
value:4,
|
||||
label:'拣货任务',
|
||||
color: 'Info'
|
||||
},
|
||||
checkTask:{
|
||||
value:10,
|
||||
label:'盘点任务',
|
||||
color: 'Danger'
|
||||
},
|
||||
moveTask:{
|
||||
value:9,
|
||||
label:'移库任务',
|
||||
color: 'Primary'
|
||||
}
|
||||
}
|
||||
|
||||
export function formatterWmsTaskType(value) {
|
||||
switch (parseInt(value)){
|
||||
case wmsTaskTypeEnum.inTask.value:
|
||||
return {label: wmsTaskTypeEnum.inTask.label, color: wmsTaskTypeEnum.inTask.color}
|
||||
case wmsTaskTypeEnum.outTask.value:
|
||||
return {label: wmsTaskTypeEnum.outTask.label, color: wmsTaskTypeEnum.outTask.color}
|
||||
case wmsTaskTypeEnum.pickTask.value:
|
||||
return {label: wmsTaskTypeEnum.pickTask.label, color: wmsTaskTypeEnum.pickTask.color}
|
||||
case wmsTaskTypeEnum.checkTask.value:
|
||||
return {label: wmsTaskTypeEnum.checkTask.label, color: wmsTaskTypeEnum.checkTask.color}
|
||||
case wmsTaskTypeEnum.moveTask.value:
|
||||
return {label: wmsTaskTypeEnum.moveTask.label, color: wmsTaskTypeEnum.moveTask.color}
|
||||
default:
|
||||
return {label: `未知类型:${value}`, color: baseColor.Danger}
|
||||
}
|
||||
}
|
||||
14
src/main.js
Normal file
14
src/main.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import installElementPlus from './plugins/element'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
const app = createApp(App)
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
installElementPlus(app)
|
||||
|
||||
app.use(store).use(router).mount('#app')
|
||||
47
src/plugins/color/base.color.js
Normal file
47
src/plugins/color/base.color.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
|
||||
// 常用颜色
|
||||
export default {
|
||||
Primary: '#409EFF',
|
||||
Success: '#67C23A',
|
||||
Warning: '#E6A23C',
|
||||
Danger: '#F56C6C',
|
||||
Green: '#00B050',
|
||||
Red: '#FF0000',
|
||||
Blue: '#0088FF',
|
||||
Yellow: '#FFFF00',
|
||||
Purple: '#7030A0',
|
||||
Gray: '#808080',
|
||||
Black: '#000000',
|
||||
White: '#FFFFFF',
|
||||
Orange: '#FFC000',
|
||||
Pink: '#FF00FF',
|
||||
Brown: '#A52A2A',
|
||||
Cyan: '#00FFFF',
|
||||
Lime: '#CDDC39',
|
||||
Magenta: '#FF00FF',
|
||||
Navy: '#000080',
|
||||
Olive: '#808000',
|
||||
Teal: '#008080',
|
||||
Maroon: '#800000',
|
||||
Silver: '#C0C0C0',
|
||||
Gold: '#FFD700',
|
||||
Lavender: '#E6E6FA',
|
||||
Turquoise: '#40E0D0',
|
||||
Violet: '#EE82EE',
|
||||
Aquamarine: '#7FFFD4',
|
||||
Beige: '#F5F5DC',
|
||||
Coral: '#FF7F50',
|
||||
Crimson: '#DC143C',
|
||||
Fuchsia: '#FF00FF',
|
||||
Indigo: '#4B0082',
|
||||
Khaki: '#F0E68C',
|
||||
Lilac: '#C8A2C8',
|
||||
Mint: '#3EFF89',
|
||||
Plum:'#DDA0DD',
|
||||
Rose: '#FFC0CB',
|
||||
Sienna: '#A0522D',
|
||||
Tan: '#D2B48C',
|
||||
Wheat: '#F5DEB3',
|
||||
Aqua: '#00FFFF',
|
||||
Bisque: '#FFE4C4',
|
||||
}
|
||||
17
src/plugins/dataCheck/json.extend.js
Normal file
17
src/plugins/dataCheck/json.extend.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
const check ={
|
||||
isJson(value) {
|
||||
try {
|
||||
JSON.parse(value)
|
||||
return true
|
||||
}catch{}
|
||||
return false
|
||||
},
|
||||
toJsonParse(value) {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(value), null, 4)
|
||||
}catch{}
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
export default check
|
||||
7
src/plugins/element.js
Normal file
7
src/plugins/element.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/theme-chalk/index.css'
|
||||
import locale from 'element-plus/es/locale/lang/zh-cn'
|
||||
|
||||
export default (app) => {
|
||||
app.use(ElementPlus, { locale })
|
||||
}
|
||||
23
src/plugins/formatter/formatter.bool.js
Normal file
23
src/plugins/formatter/formatter.bool.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
const format = {
|
||||
// 格式化True False
|
||||
formatTrueFalse(bool) {
|
||||
switch (bool) {
|
||||
case true:
|
||||
return {msg: '是', type: 'success', color: ''};
|
||||
default:
|
||||
return {msg: `否`, type: 'danger', color: ''};
|
||||
}
|
||||
},
|
||||
formatTrueFalseNum(num) {
|
||||
switch (num) {
|
||||
case '1':
|
||||
return {msg: '是', type: 'success', color: ''};
|
||||
case 1:
|
||||
return {msg: '是', type: 'success', color: ''};
|
||||
default:
|
||||
return {msg: `否`, type: 'danger', color: ''};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default format
|
||||
21
src/plugins/formatter/formatter.location.js
Normal file
21
src/plugins/formatter/formatter.location.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
const format = {
|
||||
// 格式化库位状态
|
||||
formatLocationStatus(locationStatus) {
|
||||
switch (locationStatus) {
|
||||
case 0:
|
||||
return {msg: '空闲', type: 'success', color: ''};
|
||||
case 1:
|
||||
return {msg: '锁定', type: 'warning', color: ''};
|
||||
case 2:
|
||||
return {msg: '占用', type: 'primary', color: ''};
|
||||
case 9:
|
||||
return {msg: '禁用', type: 'danger', color: ''};
|
||||
case 999:
|
||||
return {msg: '特殊点位', type: 'danger', color: ''};
|
||||
default:
|
||||
return {msg: `未知类型:${locationStatus}`, type: 'danger', color: ''};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default format
|
||||
23
src/plugins/formatter/formatter.msglv.js
Normal file
23
src/plugins/formatter/formatter.msglv.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
const format = {
|
||||
// 格式化消息等级
|
||||
formatMsgLv(msglv) {
|
||||
switch (msglv) {
|
||||
case 0:
|
||||
return {msg: '信息', type: 'info', color: ''};
|
||||
case 1:
|
||||
return {msg: '提示', type: 'primary', color: ''};
|
||||
case 2:
|
||||
return {msg: '成功', type: 'success', color: ''};
|
||||
case 3:
|
||||
return {msg: '警告', type: 'warning', color: ''};
|
||||
case 4:
|
||||
return {msg: '错误', type: 'danger', color: ''};
|
||||
case 5:
|
||||
return {msg: '异常', type: 'danger', color: ''};
|
||||
default:
|
||||
return {msg: `未知类型:${msglv}`, type: 'danger', color: ''};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default format
|
||||
19
src/plugins/formatter/formatter.task.type.js
Normal file
19
src/plugins/formatter/formatter.task.type.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
const format = {
|
||||
// 格式化任务类型
|
||||
formatTaskType(taskType) {
|
||||
switch (taskType) {
|
||||
case 1:
|
||||
return {msg: '入库', type: 'success', color: ''};
|
||||
case 2:
|
||||
return {msg: '出库', type: 'primary', color: ''};
|
||||
case 4:
|
||||
return {msg: '拣选', type: 'info', color: ''};
|
||||
case 9:
|
||||
return {msg: '移库', type: 'warning', color: ''};
|
||||
default:
|
||||
return {msg: `未知类型:${taskType}`, type: 'danger', color: ''};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default format
|
||||
27
src/plugins/formatter/formatter.time.js
Normal file
27
src/plugins/formatter/formatter.time.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import moment from "moment";
|
||||
|
||||
const format = {
|
||||
formatTime(timeString) {
|
||||
if (timeString === null || timeString === '') {
|
||||
return ''
|
||||
}
|
||||
try {
|
||||
return moment(timeString).format('yyyy-MM-DD HH:mm:ss')
|
||||
}catch {
|
||||
return timeString
|
||||
}
|
||||
|
||||
},
|
||||
formatCellValueTime(row, column, cellValue) {
|
||||
if (cellValue === null || cellValue === '') {
|
||||
return ''
|
||||
}
|
||||
try {
|
||||
return moment(cellValue).format('yyyy-MM-DD HH:mm:ss')
|
||||
}catch {
|
||||
return cellValue
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default format
|
||||
15
src/plugins/formatter/formatter.user.status.js
Normal file
15
src/plugins/formatter/formatter.user.status.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
const format = {
|
||||
// 格式化用户状态
|
||||
formatUserStatus(userStatus) {
|
||||
switch (userStatus) {
|
||||
case 1:
|
||||
return {msg: '正常', type: 'success', color: ''};
|
||||
case 0:
|
||||
return {msg: '禁用', type: 'warning', color: ''};
|
||||
default:
|
||||
return {msg: userStatus.toString(), type: 'danger', color: ''};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default format
|
||||
23
src/plugins/formatter/formatter.wcstask.status.js
Normal file
23
src/plugins/formatter/formatter.wcstask.status.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
const format = {
|
||||
// 格式化Wcs任务状态
|
||||
formatTaskStatus(taskStatus) {
|
||||
switch (taskStatus) {
|
||||
case 1:
|
||||
return {msg: '离开起点', type: 'success', color: ''};
|
||||
case 2:
|
||||
return {msg: '执行中', type: 'success', color: ''};
|
||||
case 3:
|
||||
return {msg: '到达终点', type: 'primary', color: ''};
|
||||
case 4:
|
||||
return {msg: '执行完成', type: 'primary', color: ''};
|
||||
case 9:
|
||||
return {msg: '执行异常', type: 'warning', color: ''};
|
||||
case 0:
|
||||
return {msg: '待执行', type: 'info', color: ''};
|
||||
default:
|
||||
return {msg: `未知状态:${taskStatus}`, type: 'danger', color: ''};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default format
|
||||
21
src/plugins/formatter/formatter.wmstask.status.js
Normal file
21
src/plugins/formatter/formatter.wmstask.status.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
const format = {
|
||||
// 格式化Wms任务状态
|
||||
formatTaskStatus(taskStatus) {
|
||||
switch (taskStatus) {
|
||||
case 1:
|
||||
return {msg: '排队中', type: 'info', color: ''};
|
||||
case 2:
|
||||
return {msg: '执行中', type: 'success', color: ''};
|
||||
case 3:
|
||||
return {msg: '执行完成', type: 'primary', color: ''};
|
||||
case 9:
|
||||
return {msg: '执行异常', type: 'warning', color: ''};
|
||||
case 0:
|
||||
return {msg: '待解析', type: 'primary', color: ''};
|
||||
default:
|
||||
return {msg: `未知状态:${taskStatus}`, type: 'danger', color: ''};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default format
|
||||
85
src/router/index.js
Normal file
85
src/router/index.js
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', redirect: '/login' },
|
||||
{ path: '/login', name: 'login', component: () => import('../view/page/LoginPage.vue') },
|
||||
{
|
||||
path: '/wcs',
|
||||
name: 'wcs',
|
||||
component: () => import('../view/page/ContentPage.vue'),
|
||||
children: [
|
||||
{ path: 'nullPage', name: 'nullPage', component:() => import('../view/page/NullPage.vue') },
|
||||
// 系统状态
|
||||
{ path: 'runningInfo', name: 'runningInfo', component:() => import('../view/tab/systemStatus/RunningInfo.vue') }, // 运行信息
|
||||
{ path: 'stackerStatus', name: 'stackerStatus', component:() => import('../view/tab/systemStatus/StackerStatus.vue') }, // 堆垛机状态
|
||||
{ path: 'conveyStatus', name: 'conveyStatus', component:() => import('../view/tab/systemStatus/ConveyStatus.vue') }, // 输送机状态
|
||||
{ path: 'containerStatus', name: 'containerStatus', component:() => import('../view/tab/systemStatus/ContainerStatus.vue') }, // 智能货柜状态
|
||||
{ path: 'shuttleStatus', name: 'shuttleStatus', component:() => import('../view/tab/systemStatus/ShuttleStatus.vue') }, // 穿梭车状态
|
||||
// 任务管理
|
||||
{ path: 'wmsTask', name: 'wmsTask', component:() => import('../view/tab/taskManage/WmsTask.vue') }, // Wms任务管理
|
||||
{ path: 'wcsTask', name: 'wcsTask', component:() => import('../view/tab/taskManage/WcsTask.vue') }, // Wcs任务管理
|
||||
// 设备管理
|
||||
{ path: 'location', name: 'location', component:() => import('@/view/tab/equipmentManage/LocationData.vue') }, // 点位/库位管理
|
||||
{ path: 'stackerData', name: 'stackerData', component:() => import('@/view/tab/equipmentManage/StackerData.vue') }, // 堆垛机管理
|
||||
// 数据查询
|
||||
{ path: 'apiAccept', name: 'apiAccept', component:() => import('../view/tab/dataQuery/ApiAccept.vue') }, // 接口接收记录
|
||||
{ path: 'apiRequest', name: 'apiRequest', component:() => import('../view/tab/dataQuery/ApiRequest.vue') }, // 接口请求记录
|
||||
{ path: 'errMsg', name: 'errMsg', component:() => import('../view/tab/dataQuery/ErrMsg.vue') }, // 设备异常信息
|
||||
{ path: 'errMsgBase', name: 'errMsgBase', component:() => import('../view/tab/dataQuery/ErrMsgBase.vue') }, // 设备异常信息基础资料
|
||||
// 系统管理
|
||||
{ path: 'settingsData', name: 'settingsData', component:() => import('../view/tab/systemManage/SettingData.vue') }, // 系统设置
|
||||
// 工具箱
|
||||
{ path: 'printQRCode', name: 'printQRCode', component:() => import('../view/tab/tools/PrintQRCode.vue') }, // 二维码打印
|
||||
// 账户管理
|
||||
{ path: 'userMenuRule', name: 'userMenuRule', component:() => import('../view/tab/accountManage/UserMenuRule.vue') }, // 权限管理
|
||||
{ path: 'userData', name: 'userData', component:() => import('../view/tab/accountManage/UserData.vue') }, // 用户管理
|
||||
// 开发者选项
|
||||
{ path: 'plcData', name: 'plcData', component:() => import('@/view/tab/development/PLCData.vue') }, // PLC管理
|
||||
{ path: 'dbData', name: 'dbData', component:() => import('@/view/tab/development/DbData.vue') }, // PLC通讯管理(DB块)
|
||||
{ path: 'configData', name: 'configData', component:() => import('@/view/tab/development/ConfigData.vue') }, // 系统配置
|
||||
{ path: 'socketData', name: 'socketData', component:() => import('../view/tab/equipmentManage/SocketData.vue') }, // Socket通讯管理
|
||||
{ path: 'menuData', name: 'menuData', component:() => import('@/view/tab/development/MenuData.vue') }, // 菜单管理
|
||||
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
})
|
||||
// 导航守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 登陆页和错误页允许访问
|
||||
if(to.name === 'login' || to.name === 'limit') {
|
||||
next()
|
||||
return
|
||||
}
|
||||
// 校验用户是否登陆
|
||||
const userName = window.sessionStorage.getItem("userName")
|
||||
if(userName === undefined || userName === null || userName === '') {
|
||||
next({name: 'login'})
|
||||
return
|
||||
}
|
||||
// 校验是否访问不受限制的页面
|
||||
if(to.name === 'wcs' || to.name === 'nullPage') {
|
||||
next()
|
||||
return
|
||||
}
|
||||
// 校验用户是否有菜单
|
||||
const menuList = JSON.parse(window.sessionStorage.getItem("menuList"))
|
||||
if(menuList === undefined || menuList === null || menuList.length === 0) {
|
||||
next({name: 'login'})
|
||||
return
|
||||
}
|
||||
// 校验用户访问的是不是其有权限访问的菜单
|
||||
if(menuList.find(m => m.router === to.name) === undefined) {
|
||||
console.log(to.name)
|
||||
console.table(menuList)
|
||||
next({name: 'login'})
|
||||
return
|
||||
}
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
27
src/store/index.js
Normal file
27
src/store/index.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { createStore } from 'vuex'
|
||||
import user from "@/store/modules/user";
|
||||
import menu from "@/store/modules/menu";
|
||||
import VuexPersistence from "vuex-persist";
|
||||
import tab from "@/store/modules/tab";
|
||||
|
||||
|
||||
const vuexLocal = new VuexPersistence({
|
||||
storage: window.sessionStorage,
|
||||
modules: ['user', 'menu', 'tab']
|
||||
})
|
||||
export default createStore({
|
||||
state: {
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
user,
|
||||
menu,
|
||||
tab
|
||||
},
|
||||
plugins: [vuexLocal.plugin]
|
||||
})
|
||||
28
src/store/modules/menu.js
Normal file
28
src/store/modules/menu.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
|
||||
const menu = {
|
||||
state() {
|
||||
return {
|
||||
// 详细的菜单,接口返回的
|
||||
menuData: [],
|
||||
// 子菜单,拿出来单独放这里,后面用起来方便
|
||||
menuList: []
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
setMenuData(state, menu) {
|
||||
state.menuData = menu
|
||||
},
|
||||
setMenuList(state, menuList) {
|
||||
state.menuList = menuList
|
||||
},
|
||||
resetMenuData(state) {
|
||||
state.menuData = []
|
||||
state.menuList = []
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
actions: {},
|
||||
};
|
||||
|
||||
export default menu;
|
||||
34
src/store/modules/tab.js
Normal file
34
src/store/modules/tab.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
|
||||
const tab = {
|
||||
state() {
|
||||
return {
|
||||
// 选中的tab
|
||||
selectedTab: '',
|
||||
// tab 的列表
|
||||
tabs: []
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
setSelectedTab(state, tabValue) {
|
||||
state.selectedTab = tabValue
|
||||
},
|
||||
setTabs(state, tabs) {
|
||||
state.tabs = tabs
|
||||
},
|
||||
addTab(state, tab) {
|
||||
state.tabs.push(tab)
|
||||
},
|
||||
resetTabs(state) {
|
||||
state.tabs = [{
|
||||
title: '主页',
|
||||
name: '0-0'
|
||||
}]
|
||||
state.selectedTab = '0-0'
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
actions: {},
|
||||
};
|
||||
|
||||
export default tab;
|
||||
21
src/store/modules/user.js
Normal file
21
src/store/modules/user.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
|
||||
const user = {
|
||||
state() {
|
||||
return {
|
||||
userId: '',
|
||||
userName: ''
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
setUserInfo(state, { userId, userName }) {
|
||||
state.userId = userId
|
||||
state.userName = userName
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
|
||||
},
|
||||
actions: {},
|
||||
};
|
||||
|
||||
export default user;
|
||||
108
src/view/component/apiAccept/ApiAcceptDetail.vue
Normal file
108
src/view/component/apiAccept/ApiAcceptDetail.vue
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:model-value="modelValue"
|
||||
title="接口的接收记录详情"
|
||||
@close="() => {$emit('update:modelValue', false)}"
|
||||
>
|
||||
<el-form label-position="left" label-width="120px">
|
||||
<el-form-item label="接收编号:">
|
||||
<el-input class="showInput" v-model="apiData.acceptId"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求路径:">
|
||||
<el-input class="showInput" v-model="apiData.path"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求方法:">
|
||||
<el-input class="showInput" v-model="apiData.method"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据类型:">
|
||||
<el-input class="showInput" v-model="apiData.mediaType"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="客户端:">
|
||||
<el-input class="showInput" v-model="apiData.clientAddress"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求时间:">
|
||||
<el-input class="showInput" v-model="apiData.requestTime"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="响应时间:">
|
||||
<el-input class="showInput" v-model="apiData.responseTime"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="耗时(ms):">
|
||||
<el-input class="showInput" v-model="apiData.useTime"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求信息:">
|
||||
<el-input class="showInput" v-model="apiData.requestMsg"
|
||||
:autosize="{ minRows: 3, maxRows: 20 }"
|
||||
type="textarea"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="响应信息:">
|
||||
<el-input class="showInput" v-model="apiData.responseMsg"
|
||||
:autosize="{ minRows: 3, maxRows: 20 }"
|
||||
type="textarea"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="异常信息:">
|
||||
<el-input class="showInput" v-model="apiData.errMsg"
|
||||
:autosize="{ minRows: 3, maxRows: 20 }"
|
||||
type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'apiData'],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
132
src/view/component/apiAccept/ApiAcceptList.vue
Normal file
132
src/view/component/apiAccept/ApiAcceptList.vue
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<h5>服务端接收调用记录表</h5>
|
||||
<el-table :data="modelValue" border stripe max-height="calc(100vh - 450px)">
|
||||
<el-table-column fixed prop="acceptId" label="请求编号" width="100px" show-overflow-tooltip />
|
||||
<el-table-column fixed prop="path" label="请求路径" width="250px" show-overflow-tooltip />
|
||||
<el-table-column prop="method" label="请求方法" width="90px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="mediaType" label="数据类型" width="150px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="clientAddress" label="客户端" width="170px" show-overflow-tooltip/>
|
||||
<el-table-column prop="requestMsg" label="请求信息" width="280px" show-overflow-tooltip/>
|
||||
<el-table-column prop="responseMsg" label="响应信息" width="280px" show-overflow-tooltip/>
|
||||
<el-table-column prop="requestTime" label="请求时间" width="160px" align="center" show-overflow-tooltip :formatter="formatterTime" />
|
||||
<el-table-column prop="responseTime" label="响应时间" width="160px" align="center" show-overflow-tooltip :formatter="formatterTime" />
|
||||
<el-table-column prop="useTime" label="耗时(ms)" width="130px" align="center"/>
|
||||
<el-table-column prop="errMsg" label="异常信息" show-overflow-tooltip min-width="150px"/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<!-- 查看详情 -->
|
||||
<el-tooltip content="查看详情" placement="top" effect="light">
|
||||
<el-button type="primary" size="small" @click="checkDetail(scope.row)">
|
||||
<el-icon><Search/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-pagination
|
||||
small
|
||||
v-if="searchParams.page.totalRow > 0"
|
||||
background
|
||||
v-model:page-size="searchParams.page.pageSize"
|
||||
v-model:current-page="searchParams.page.pageIndex"
|
||||
:page-sizes="[20, 50, 100, 200]"
|
||||
layout="prev, pager, next, jumper, sizes"
|
||||
:total="searchParams.page.totalRow"
|
||||
@size-change="searchData"
|
||||
@current-change="searchData"
|
||||
/>
|
||||
</el-row>
|
||||
<!-- 展示详情的弹窗-->
|
||||
<ApiAcceptDetail v-model="showDetail" v-model:api-data="detailData"></ApiAcceptDetail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import formatterTime from "@/plugins/formatter/formatter.time";
|
||||
import ApiAcceptDetail from "@/view/component/apiAccept/ApiAcceptDetail.vue";
|
||||
import check from "@/plugins/dataCheck/json.extend";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {ApiAcceptDetail},
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: ['pageChange'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 是否展示详情
|
||||
showDetail: false,
|
||||
// 传入展示详情的数据
|
||||
detailData: [],
|
||||
|
||||
// -----
|
||||
formatterTime: formatterTime.formatCellValueTime,
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchData() {
|
||||
this.$emit('pageChange', this.searchParams)
|
||||
},
|
||||
checkDetail(row) {
|
||||
this.detailData = {
|
||||
acceptId: row.acceptId,
|
||||
path: row.path,
|
||||
method: row.method,
|
||||
mediaType: row.mediaType,
|
||||
clientAddress: row.clientAddress,
|
||||
requestTime: formatterTime.formatTime(row.requestTime),
|
||||
responseTime: formatterTime.formatTime(row.responseTime),
|
||||
useTime: row.useTime,
|
||||
requestMsg: check.toJsonParse(row.requestMsg),
|
||||
responseMsg: check.toJsonParse(row.responseMsg),
|
||||
errMsg: row.errMsg
|
||||
}
|
||||
check.isJson(row.requestMsg)
|
||||
this.showDetail = true
|
||||
},
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
123
src/view/component/apiAccept/SearchForm.vue
Normal file
123
src/view/component/apiAccept/SearchForm.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
|
||||
<el-row>
|
||||
<el-form :model="searchParams" label-width="120" label-position="left">
|
||||
<el-form-item label="查询关键字:">
|
||||
<el-input style="min-width: 300px" placeholder="输入 关键字 查询..." v-model="searchParams.searchStr" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="调用时间:">
|
||||
<el-date-picker
|
||||
v-model="searchParams.timeRange"
|
||||
type="datetimerange"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="截止时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button type="primary" @click="searchBtn">查询/搜索</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import apiAccept from "@/axios/api.accept";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['searchParams', 'modelValue'],
|
||||
emits: ['update:searchParams', 'update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchBtn() {
|
||||
this.searchParams.page.pageIndex = 1
|
||||
this.searchParams.page.pageSize = 20
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.searchData(this.searchParams)
|
||||
},
|
||||
// 查询数据,主要用于分页,不需要重置分页参数
|
||||
searchData(searchParams) {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.$emit('update:modelValue', [])
|
||||
apiAccept.getApiAcceptInfoWithPage(searchParams).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
// 正确请求,展示数据
|
||||
this.searchParams.page.totalRow = parseInt(responseData.msg)
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
|
||||
console.table(Object.freeze(responseData["returnData"]))
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
105
src/view/component/apiRequest/ApiRequestDetail.vue
Normal file
105
src/view/component/apiRequest/ApiRequestDetail.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:model-value="modelValue"
|
||||
title="WCS调用其他系统记录详情"
|
||||
@close="() => $emit('update:modelValue', false)"
|
||||
>
|
||||
<el-form label-position="left" label-width="120px">
|
||||
<el-form-item label="请求ID:">
|
||||
<el-input class="showInput" v-model="apiData.requestId"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求Url:">
|
||||
<el-input class="showInput" v-model="apiData.requestUrl"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否成功:">
|
||||
<el-input class="showInput" v-model="apiData.isSuccess"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求方法:">
|
||||
<el-input class="showInput" v-model="apiData.requestMethod"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求时间:">
|
||||
<el-input class="showInput" v-model="apiData.requestTime"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="响应时间:">
|
||||
<el-input class="showInput" v-model="apiData.responseTime"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="耗时(ms):">
|
||||
<el-input class="showInput" v-model="apiData.useTime"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求信息:">
|
||||
<el-input class="showInput" v-model="apiData.requestMsg"
|
||||
:autosize="{ minRows: 3, maxRows: 20 }"
|
||||
type="textarea"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="响应信息:">
|
||||
<el-input class="showInput" v-model="apiData.responseMsg"
|
||||
:autosize="{ minRows: 3, maxRows: 20 }"
|
||||
type="textarea"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="异常信息:">
|
||||
<el-input class="showInput" v-model="apiData.errMsg"
|
||||
:autosize="{ minRows: 3, maxRows: 20 }"
|
||||
type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'apiData'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
136
src/view/component/apiRequest/ApiRequestList.vue
Normal file
136
src/view/component/apiRequest/ApiRequestList.vue
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<h5>WCS调用其他系统记录表</h5>
|
||||
<el-table :data="modelValue" border stripe style="width: 100%;" max-height="calc(100vh - 450px)">
|
||||
<el-table-column fixed prop="requestId" label="请求ID" width="100px" show-overflow-tooltip/>
|
||||
<el-table-column fixed prop="requestUrl" label="请求Url" width="250px" show-overflow-tooltip/>
|
||||
<el-table-column prop="isSuccess" label="是否成功" align="center" width="95px">
|
||||
<template #default="scope">
|
||||
<el-tag class="ml-2" :type=formatterBool(scope.row.isSuccess).type>{{formatterBool(scope.row.isSuccess).msg }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="requestMethod" label="请求方法" align="center" width="100px"/>
|
||||
<el-table-column prop="requestMsg" label="请求信息" width="250px" show-overflow-tooltip/>
|
||||
<el-table-column prop="responseMsg" label="响应信息" width="250px" show-overflow-tooltip/>
|
||||
<el-table-column prop="requestTime" label="请求时间" align="center" width="160px" show-overflow-tooltip :formatter="formatterTime"/>
|
||||
<el-table-column prop="responseTime" label="响应时间" align="center" width="160px" show-overflow-tooltip :formatter="formatterTime"/>
|
||||
<el-table-column prop="useTime" label="耗时(ms)" align="center" width="130px"/>
|
||||
<el-table-column prop="errMsg" label="异常信息" show-overflow-tooltip/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<!-- 查看详情 -->
|
||||
<el-tooltip content="查看详情" placement="top" effect="light">
|
||||
<el-button type="primary" size="small" @click="checkDetail(scope.row)">
|
||||
<el-icon><Search/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-pagination
|
||||
small
|
||||
v-if="searchParams.page.totalRow > 0"
|
||||
background
|
||||
v-model:page-size="searchParams.page.pageSize"
|
||||
v-model:current-page="searchParams.page.pageIndex"
|
||||
:page-sizes="[20, 50, 100, 200]"
|
||||
layout="prev, pager, next, jumper, sizes"
|
||||
:total="searchParams.page.totalRow"
|
||||
@size-change="searchData"
|
||||
@current-change="searchData"
|
||||
/>
|
||||
</el-row>
|
||||
<!-- 展示详情的弹窗-->
|
||||
<ApiRequestDetail v-model="showDetail" v-model:api-data="detailData"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import formatterBool from "@/plugins/formatter/formatter.bool";
|
||||
import formatterTime from "@/plugins/formatter/formatter.time";
|
||||
import check from "@/plugins/dataCheck/json.extend";
|
||||
import ApiRequestDetail from "@/view/component/apiRequest/ApiRequestDetail.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {ApiRequestDetail},
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: ['pageChange'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 是否展示详情
|
||||
showDetail: false,
|
||||
// 传入展示详情的数据
|
||||
detailData: [],
|
||||
|
||||
// -----
|
||||
formatterTime: formatterTime.formatCellValueTime,
|
||||
formatterBool: formatterBool.formatTrueFalseNum
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchData() {
|
||||
this.$emit('pageChange', this.searchParams)
|
||||
},
|
||||
checkDetail(row) {
|
||||
this.detailData = {
|
||||
requestId: row.requestId,
|
||||
requestUrl: row.requestUrl,
|
||||
isSuccess: row.isSuccess,
|
||||
requestMethod: row.requestMethod,
|
||||
requestTime: formatterTime.formatTime(row.requestTime),
|
||||
responseTime: formatterTime.formatTime(row.responseTime),
|
||||
useTime: row.useTime,
|
||||
requestMsg: check.toJsonParse(row.requestMsg),
|
||||
responseMsg: check.toJsonParse(row.responseMsg),
|
||||
errMsg: row.errMsg
|
||||
}
|
||||
check.isJson(row.requestMsg)
|
||||
this.showDetail = true
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
123
src/view/component/apiRequest/SearchForm.vue
Normal file
123
src/view/component/apiRequest/SearchForm.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
|
||||
<el-row>
|
||||
<el-form :model="searchParams" label-width="120" label-position="left">
|
||||
<el-form-item label="查询关键字:">
|
||||
<el-input style="min-width: 300px" placeholder="输入 关键字 查询..." v-model="searchParams.searchStr" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="调用时间:">
|
||||
<el-date-picker
|
||||
v-model="searchParams.timeRange"
|
||||
type="datetimerange"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="截止时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button type="primary" @click="searchBtn">查询/搜索</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import apiRequestApi from "@/axios/api.request";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['searchParams', 'modelValue'],
|
||||
emits: ['update:searchParams', 'update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchBtn() {
|
||||
this.searchParams.page.pageIndex = 1
|
||||
this.searchParams.page.pageSize = 20
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.searchData(this.searchParams)
|
||||
},
|
||||
// 查询数据,主要用于分页,不需要重置分页参数
|
||||
searchData(searchParams) {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.$emit('update:modelValue', [])
|
||||
apiRequestApi.getApiRequestInfoWithPage(searchParams).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
// 正确请求,展示数据
|
||||
this.searchParams.page.totalRow = parseInt(responseData.msg)
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
104
src/view/component/configData/AddConfig.vue
Normal file
104
src/view/component/configData/AddConfig.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<!-- 添加配置项-->
|
||||
<div>
|
||||
<el-dialog
|
||||
title="添加配置项"
|
||||
:model-value="modelValue"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="160px"
|
||||
:model="configData"
|
||||
:inline="true"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item label="配置键:">
|
||||
<el-input v-model="configData.configKey" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置名称:">
|
||||
<el-input v-model="configData.configName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置值:">
|
||||
<el-input v-model="configData.configValue"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置类型:">
|
||||
<el-input v-model="configData.configType"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注信息:">
|
||||
<el-input v-model="configData.remark"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button type="primary" @click="addConfig">添加</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
configData: {
|
||||
configKey: '',
|
||||
configName: '',
|
||||
configValue: '',
|
||||
configType: '',
|
||||
remark: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 添加配置项
|
||||
addConfig() {
|
||||
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
105
src/view/component/configData/EditConfig.vue
Normal file
105
src/view/component/configData/EditConfig.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<!-- 编辑配置项-->
|
||||
<div>
|
||||
<el-dialog
|
||||
title="编辑配置项"
|
||||
:model-value="modelValue"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="160px"
|
||||
:model="configData"
|
||||
:inline="true"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item label="配置键:">
|
||||
<el-input v-model="configData.configKey" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置名称:">
|
||||
<el-input v-model="configData.configName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置值:">
|
||||
<el-input v-model="configData.configValue"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置类型:">
|
||||
<el-input v-model="configData.configType"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注信息:">
|
||||
<el-input v-model="configData.remark"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button type="primary" @click="saveConfig">保存</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'configData'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 保存配置项
|
||||
saveConfig() {
|
||||
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-form-inline {
|
||||
width: 100%;
|
||||
.el-input {
|
||||
--el-input-width: 100%;
|
||||
}
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
185
src/view/component/locationData/CheckDetail.vue
Normal file
185
src/view/component/locationData/CheckDetail.vue
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :model-value="modelValue" title="点位详情"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="100px"
|
||||
:model="locationDetail"
|
||||
:inline="true"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item label="Wcs点位:">
|
||||
<el-input v-model="locationDetail.wcsLocation" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Wms点位:">
|
||||
<el-input v-model="locationDetail.wmsLocation" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前载具号:">
|
||||
<el-input v-model="locationDetail.vehicleNo"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="巷道号:">
|
||||
<el-input v-model="locationDetail.tunnelNo" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备号:">
|
||||
<el-input v-model="locationDetail.equipmentId" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="当前状态:">
|
||||
<el-select placeholder='请选择库位状态'
|
||||
v-model="locationDetail.locationStatus"
|
||||
>
|
||||
<el-option label="空闲" value="0"/>
|
||||
<el-option label="锁定" value="1"/>
|
||||
<el-option label="占用" value="2"/>
|
||||
<el-option label="禁用" value="9"/>
|
||||
<el-option label="特殊点位" value="999"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排:">
|
||||
<el-input v-model="locationDetail.queue" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="列:">
|
||||
<el-input v-model="locationDetail.line" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="层:">
|
||||
<el-input v-model="locationDetail.layer" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="深:">
|
||||
<el-input v-model="locationDetail.depth" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="点位类型:">
|
||||
<el-input v-model="locationDetail.locationType" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="点位释义:">
|
||||
<el-input v-model="locationDetail.explain" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注信息:">
|
||||
<el-input v-model="locationDetail.remark"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button type="primary" @click="changeData">变更信息</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import locationApi from '@/axios/location'
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'locationDetail'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
changeData() {
|
||||
ElMessageBox.confirm(
|
||||
'确定变更该点位的数据?',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定变更',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
const locationDto = {
|
||||
wcsLocation: this.locationDetail.wcsLocation,
|
||||
wmsLocation: this.locationDetail.wmsLocation,
|
||||
vehicleNo: this.locationDetail.vehicleNo,
|
||||
tunnelNo: this.locationDetail.tunnelNo,
|
||||
equipmentId: this.locationDetail.equipmentId,
|
||||
locationStatus: this.locationDetail.locationStatus,
|
||||
queue: this.locationDetail.queue,
|
||||
line: this.locationDetail.line,
|
||||
layer: this.locationDetail.layer,
|
||||
depth: this.locationDetail.depth,
|
||||
locationType: this.locationDetail.locationType,
|
||||
explain: this.locationDetail.explain,
|
||||
remark: this.locationDetail.remark
|
||||
}
|
||||
locationApi.updateLocationStatus(locationDto).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '更新失败',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
loading.close()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.demo-form-inline .el-input {
|
||||
--el-input-width: 320px;
|
||||
}
|
||||
|
||||
.demo-form-inline .el-select {
|
||||
--el-select-width: 320px;
|
||||
}
|
||||
|
||||
</style>
|
||||
147
src/view/component/locationData/LocationList.vue
Normal file
147
src/view/component/locationData/LocationList.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<el-row style="width: 100%">
|
||||
<el-col :span="12">
|
||||
<h5>点位列表</h5>
|
||||
</el-col>
|
||||
<el-col :span="4" :offset="8">
|
||||
<div style="font-size: 0.8rem; color: coral; margin-top: 30px">
|
||||
信息仅供参考,具体状态请以 WMS 为准
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table :data="modelValue" border stripe max-height="calc(100vh - 450px)">
|
||||
<el-table-column fixed prop="wcsLocation" label="WCS点位" width="150px" align="center"/>
|
||||
<el-table-column prop="wmsLocation" label="映射WMS点位" width="150px" align="center"/>
|
||||
<el-table-column prop="vehicleNo" label="载具编号" width="150px" show-overflow-tooltip align="center"/>
|
||||
<el-table-column prop="tunnelNo" label="巷道号" width="100px" align="center"/>
|
||||
<el-table-column prop="equipmentId" label="设备号" width="100px" align="center"/>
|
||||
<el-table-column label="库位状态" width="100px" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag class="ml-2" :type=formatterLocationStatus(scope.row.locationStatus).type>{{formatterLocationStatus(scope.row.locationStatus).msg }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="queue" label="排" width="80px" align="center"/>
|
||||
<el-table-column prop="line" label="列" width="80px" align="center"/>
|
||||
<el-table-column prop="layer" label="层" width="80px" align="center"/>
|
||||
<el-table-column prop="depth" label="深" width="80px" align="center"/>
|
||||
<el-table-column prop="locationType" label="点位类型" width="150px" align="center"/>
|
||||
<el-table-column prop="explain" label="点位释义" width="150px" align="center"/>
|
||||
<el-table-column prop="remark" label="备注信息" min-width="100px"/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<!-- 编辑库位 -->
|
||||
<el-tooltip content="查看详情" placement="top" effect="light">
|
||||
<el-button type="primary" size="small" @click="checkDetail(scope.row)">
|
||||
<el-icon><Search/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-pagination
|
||||
small
|
||||
v-if="searchParams.page.totalRow > 0"
|
||||
background
|
||||
v-model:page-size="searchParams.page.pageSize"
|
||||
v-model:current-page="searchParams.page.pageIndex"
|
||||
:page-sizes="[20, 50, 100, 200, 300, 500]"
|
||||
layout="prev, pager, next, jumper, sizes, total"
|
||||
:total="searchParams.page.totalRow"
|
||||
@size-change="searchData"
|
||||
@current-change="searchData"
|
||||
/>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<CheckDetail v-model="showDetail" :location-detail="locationDetail"></CheckDetail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import formatterLocation from "@/plugins/formatter/formatter.location";
|
||||
import CheckDetail from "@/view/component/locationData/CheckDetail.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {CheckDetail},
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: ['pageChange'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 展示详情
|
||||
showDetail: false,
|
||||
// 发送给展示详情弹窗的信息
|
||||
locationDetail: {},
|
||||
|
||||
// ---
|
||||
formatterLocationStatus: formatterLocation.formatLocationStatus
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchData() {
|
||||
this.$emit('pageChange', this.searchParams)
|
||||
},
|
||||
checkDetail(row) {
|
||||
this.locationDetail = {
|
||||
wcsLocation: row.wcsLocation,
|
||||
wmsLocation: row.wmsLocation,
|
||||
vehicleNo: row.vehicleNo,
|
||||
tunnelNo: row.tunnelNo,
|
||||
equipmentId: row.equipmentId,
|
||||
locationStatus: row.locationStatus,
|
||||
queue: row.queue,
|
||||
line: row.line,
|
||||
layer: row.layer,
|
||||
depth: row.depth,
|
||||
locationType: row.locationType,
|
||||
explain: row.explain,
|
||||
remark: row.remark
|
||||
}
|
||||
this.showDetail = true
|
||||
},
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
119
src/view/component/locationData/SearchForm.vue
Normal file
119
src/view/component/locationData/SearchForm.vue
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
|
||||
<el-row>
|
||||
<el-form :model="searchParams" label-width="120" label-position="left">
|
||||
<el-form-item label="查询关键字:">
|
||||
<el-input placeholder="输入 料箱号/点位号 查询..." v-model="searchParams.searchStr" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="点位类型:">
|
||||
<el-checkbox-group v-model="searchParams.locationStatus">
|
||||
<el-checkbox label="空闲" checked />
|
||||
<el-checkbox label="锁定" checked />
|
||||
<el-checkbox label="占用" checked />
|
||||
<el-checkbox label="禁用" checked />
|
||||
<el-checkbox label="特殊点位" checked />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import locationApi from '@/axios/location'
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: ['update:searchParams', 'update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchBtn() {
|
||||
this.searchParams.page.pageIndex = 1
|
||||
this.searchParams.page.pageSize = 50
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.searchData(this.searchParams)
|
||||
},
|
||||
searchData(searchParams) {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
locationApi.getLocationWithPage(searchParams).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
// 正确请求,展示数据
|
||||
this.searchParams.page.totalRow = parseInt(responseData.msg)
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
|
||||
} else {
|
||||
// 服务报错
|
||||
this.showLocations = [];
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex) => {
|
||||
this.showLocations = [];
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
288
src/view/component/menuData/AddMenu.vue
Normal file
288
src/view/component/menuData/AddMenu.vue
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :model-value="modelValue" title="添加菜单"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<el-row>
|
||||
<el-col :span="10">
|
||||
<h5>当前存在的菜单信息参考</h5>
|
||||
<el-scrollbar :max-height="500">
|
||||
<el-tree :data="menu" @node-click="nodeClick">
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-col>
|
||||
<el-col :span="14" style="border-left: #2c3e5033 solid 1px; padding-left: 20px;">
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="160px"
|
||||
:model="menuData"
|
||||
:inline="true"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item label="一级菜单序号:">
|
||||
<el-input v-model="menuData.mainMenuIndex"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="一级菜单名称:">
|
||||
<el-input v-model="menuData.mainMenuName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="一级菜单图标:">
|
||||
<el-input v-model="menuData.mainMenuIco"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级菜单序号:">
|
||||
<el-input v-model="menuData.minorMenuIndex">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级菜单名称:">
|
||||
<el-input v-model="menuData.minorMenuName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级菜单图标:">
|
||||
<el-input v-model="menuData.minorMenuIco"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级菜单路由:">
|
||||
<el-input v-model="menuData.minorMenuRouter"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单状态:">
|
||||
<el-switch
|
||||
v-model="menuData.menuStatus"
|
||||
inline-prompt
|
||||
active-text="启用"
|
||||
inactive-text="停用"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注:">
|
||||
<el-input v-model="menuData.remark"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button type="primary" @click="addMenu">添加</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
import menuApi from "@/axios/menu";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'menuList'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
menuData: {
|
||||
mainMenuIndex: '',
|
||||
mainMenuName: '',
|
||||
mainMenuIco: '',
|
||||
minorMenuIndex: '',
|
||||
minorMenuName: '',
|
||||
minorMenuIco: '',
|
||||
minorMenuRouter: '',
|
||||
menuStatus: '1',
|
||||
remark: ''
|
||||
},
|
||||
// 显示在树形控件里的值
|
||||
menu: []
|
||||
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {
|
||||
modelValue(newValue, oldValue) {
|
||||
if(newValue === true) {
|
||||
this.showMenuTree()
|
||||
}
|
||||
}
|
||||
},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 添加菜单
|
||||
addMenu() {
|
||||
ElMessageBox.confirm(
|
||||
'确定添加该菜单?添加后只能在数据库删除',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定添加',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
const menuDto = {
|
||||
mainMenuIndex: this.menuData.mainMenuIndex,
|
||||
mainMenuName: this.menuData.mainMenuName,
|
||||
mainMenuIco: this.menuData.mainMenuIco,
|
||||
minorMenuIndex: this.menuData.minorMenuIndex,
|
||||
minorMenuName: this.menuData.minorMenuName,
|
||||
minorMenuIco: this.menuData.minorMenuIco,
|
||||
minorMenuRouter: this.menuData.minorMenuRouter,
|
||||
menuStatus: this.menuData.menuStatus,
|
||||
remark: this.menuData.remark
|
||||
}
|
||||
menuApi.addMenu(menuDto).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '添加菜单信息成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.showMenuTree()
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '更新失败',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
loading.close()
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
resetMenuData() {
|
||||
this.menuData.mainMenuIndex = ''
|
||||
this.menuData.mainMenuName = ''
|
||||
this.menuData.mainMenuIco = ''
|
||||
this.menuData.minorMenuIndex = ''
|
||||
this.menuData.minorMenuName = ''
|
||||
this.menuData.minorMenuIco = ''
|
||||
this.menuData.minorMenuRouter = ''
|
||||
this.menuData.menuStatus = '1'
|
||||
this.menuData.remark = ''
|
||||
},
|
||||
// 树形控件被点击的时候
|
||||
nodeClick(node) {
|
||||
this.resetMenuData()
|
||||
const menuLabel = node.label
|
||||
const menuInfo = menuLabel.split('*')
|
||||
const mainMenu = this.menuList.filter(f=>f.mainMenuIndex === menuInfo[0])
|
||||
if(mainMenu !== undefined && mainMenu.length > 0) {
|
||||
this.menuData.mainMenuIndex = mainMenu[0].mainMenuIndex
|
||||
this.menuData.mainMenuIco = mainMenu[0].mainMenuIco
|
||||
this.menuData.mainMenuName = mainMenu[0].mainMenuName
|
||||
return
|
||||
}
|
||||
const minorMenu = this.menuList.filter(f=>f.minorMenuIndex === menuInfo[0])
|
||||
if(minorMenu !== undefined && minorMenu.length > 0) {
|
||||
this.menuData.mainMenuIndex = minorMenu[0].mainMenuIndex
|
||||
this.menuData.mainMenuName = minorMenu[0].mainMenuName
|
||||
this.menuData.mainMenuIco = minorMenu[0].mainMenuIco
|
||||
this.menuData.minorMenuIndex = minorMenu[0].minorMenuIndex
|
||||
this.menuData.minorMenuIco = minorMenu[0].minorMenuIco
|
||||
this.menuData.minorMenuName = minorMenu[0].minorMenuName
|
||||
}
|
||||
},
|
||||
// 启动时加载树形控件的信息
|
||||
showMenuTree() {
|
||||
if(this.menuList === undefined || this.menuList.length < 1) {
|
||||
return
|
||||
}
|
||||
let menuTree = []
|
||||
this.menuList.forEach((value)=> {
|
||||
const filterResult = menuTree.filter(f=>f.mainMenuIndex === value.mainMenuIndex)
|
||||
if(filterResult === undefined || filterResult.length < 1) {
|
||||
menuTree.push({
|
||||
mainMenuIndex: value.mainMenuIndex,
|
||||
mainMenuName: value.mainMenuName,
|
||||
})
|
||||
}
|
||||
})
|
||||
if(menuTree.length > 1) {
|
||||
menuTree.forEach((value) => {
|
||||
value.minorMenu = [];
|
||||
const filterResult = this.menuList.filter(f=>f.mainMenuIndex === value.mainMenuIndex)
|
||||
if(filterResult !== undefined && filterResult.length > 0) {
|
||||
filterResult.forEach((minorValue)=>{
|
||||
value.minorMenu.push({
|
||||
minorMenuIndex: minorValue.minorMenuIndex,
|
||||
minorMenuName: minorValue.minorMenuName,
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 添加到树型控件
|
||||
if(menuTree.length > 1) {
|
||||
let treeItems = []
|
||||
menuTree.forEach((value)=>{
|
||||
let treeItem = {}
|
||||
treeItem.label = `${value.mainMenuIndex}*${value.mainMenuName}`
|
||||
treeItem.children = []
|
||||
value.minorMenu.forEach((minorValue)=>{
|
||||
treeItem.children.push({
|
||||
label: `${minorValue.minorMenuIndex}*${minorValue.minorMenuName}`
|
||||
})
|
||||
})
|
||||
treeItems.push(treeItem)
|
||||
})
|
||||
this.menu = treeItems
|
||||
}
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-form-inline {
|
||||
width: 100%;
|
||||
.el-input {
|
||||
--el-input-width: 100%;
|
||||
}
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.demo-form-inline .el-select {
|
||||
--el-select-width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
161
src/view/component/menuData/MenuDetail.vue
Normal file
161
src/view/component/menuData/MenuDetail.vue
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :model-value="modelValue" title="菜单详情"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<el-form
|
||||
label-position="top"
|
||||
label-width="180px"
|
||||
:model="menuDetail"
|
||||
:inline="true"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item label="一级菜单序号:">
|
||||
<el-input v-model="menuDetail.mainMenuIndex" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="一级菜单名称:">
|
||||
<el-input v-model="menuDetail.mainMenuName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="一级菜单图标:">
|
||||
<el-input v-model="menuDetail.mainMenuIco"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级菜单序号:">
|
||||
<el-input v-model="menuDetail.minorMenuIndex" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级菜单名称:">
|
||||
<el-input v-model="menuDetail.minorMenuName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级菜单图标:">
|
||||
<el-input v-model="menuDetail.minorMenuIco"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级菜单路由:">
|
||||
<el-input v-model="menuDetail.minorMenuRouter"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单状态:">
|
||||
<el-input v-model="menuDetail.menuStatus"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注:">
|
||||
<el-input v-model="menuDetail.remark"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button type="primary" @click="updateData">变更信息</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
import menuApi from '@/axios/menu'
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'menuDetail'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
updateData() {
|
||||
ElMessageBox.confirm(
|
||||
'确定变更该菜单的数据?',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定变更',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
const menuDto = {
|
||||
mainMenuIndex: this.menuDetail.mainMenuIndex,
|
||||
mainMenuName: this.menuDetail.mainMenuName,
|
||||
mainMenuIco: this.menuDetail.mainMenuIco,
|
||||
minorMenuIndex: this.menuDetail.minorMenuIndex,
|
||||
minorMenuName: this.menuDetail.minorMenuName,
|
||||
minorMenuIco: this.menuDetail.minorMenuIco,
|
||||
minorMenuRouter: this.menuDetail.minorMenuRouter,
|
||||
menuStatus: this.menuDetail.menuStatus,
|
||||
remark: this.menuDetail.remark
|
||||
}
|
||||
menuApi.updateMenu(menuDto).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '更新菜单信息成功',
|
||||
type: 'success',
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '更新失败',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
loading.close()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-form-inline .el-input {
|
||||
--el-input-width: 320px;
|
||||
}
|
||||
|
||||
.demo-form-inline .el-select {
|
||||
--el-select-width: 320px;
|
||||
}
|
||||
|
||||
</style>
|
||||
123
src/view/component/menuData/MenuList.vue
Normal file
123
src/view/component/menuData/MenuList.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<h5>系统菜单列表</h5>
|
||||
<el-table :data="modelValue" border stripe style="width: 100%;" max-height="calc(100vh - 330px)">
|
||||
<el-table-column fixed prop="mainMenuIndex" label="一级菜单序号" width="160px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="mainMenuName" label="一级菜单名称" width="160px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="mainMenuIco" label="一级菜单图标" width="160px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="minorMenuIndex" label="二级菜单序号" width="160px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="minorMenuName" label="二级菜单名称" width="160px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="minorMenuIco" label="二级菜单图标" width="160px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="minorMenuRouter" label="二级菜单路由" width="160px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="menuStatus" label="菜单状态" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="remark" label="备注" min-width="200px" show-overflow-tooltip/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<el-tooltip content="查看详情" placement="top" effect="light">
|
||||
<el-button type="primary" size="small" @click="checkDetail(scope.row)">
|
||||
<el-icon><Search/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px" v-if="searchParams !== undefined">
|
||||
<el-pagination
|
||||
v-if="searchParams.page.totalRow > 0"
|
||||
small
|
||||
background
|
||||
v-model:page-size="searchParams.page.pageSize"
|
||||
v-model:current-page="searchParams.page.pageIndex"
|
||||
:page-sizes="[1000]"
|
||||
layout="prev, pager, next, jumper, sizes, total"
|
||||
:total="searchParams.page.totalRow"
|
||||
@size-change="pageChangeEvent"
|
||||
@current-change="pageChangeEvent"
|
||||
/>
|
||||
</el-row>
|
||||
<!-- 查看详情,变更信息窗口-->
|
||||
<MenuDetail v-model="showMenuDetail" :menu-detail="menuDetail"></MenuDetail>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import MenuDetail from "@/view/component/menuData/MenuDetail.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {MenuDetail},
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: ['pageChange'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
showMenuDetail: false,
|
||||
menuDetail: { },
|
||||
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
checkDetail(row) {
|
||||
this.menuDetail = {
|
||||
mainMenuIndex : row.mainMenuIndex,
|
||||
mainMenuName : row.mainMenuName,
|
||||
mainMenuIco : row.mainMenuIco,
|
||||
minorMenuIndex : row.minorMenuIndex,
|
||||
minorMenuName : row.minorMenuName,
|
||||
minorMenuIco : row.minorMenuIco,
|
||||
minorMenuRouter : row.minorMenuRouter,
|
||||
menuStatus : row.menuStatus,
|
||||
remark : row.remark
|
||||
}
|
||||
this.showMenuDetail = true
|
||||
},
|
||||
|
||||
pageChangeEvent() {
|
||||
this.$emit('pageChange', this.searchParams)
|
||||
},
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
107
src/view/component/menuData/SearchForm.vue
Normal file
107
src/view/component/menuData/SearchForm.vue
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
|
||||
<el-button type="success" @click="addMenu">添加菜单</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import menuApi from '@/axios/menu'
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: ['update:searchParams', 'update:modelValue', 'addMenu'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchBtn() {
|
||||
this.searchParams.page.pageIndex = 1
|
||||
this.searchParams.page.pageSize = 1000
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.searchData(this.searchParams)
|
||||
},
|
||||
searchData(searchParams) {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.$emit('update:modelValue', [])
|
||||
menuApi.getMenuDataWithPage(searchParams).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
// 正确请求,展示数据
|
||||
this.searchParams.page.totalRow = parseInt(responseData.msg)
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
addMenu() {
|
||||
this.$emit('addMenu')
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
185
src/view/component/runningInfo/DownloadLog.vue
Normal file
185
src/view/component/runningInfo/DownloadLog.vue
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form :model="downLoadLog" :label-width="120" style="width: 30vh">
|
||||
<div style="font-size: 0.8rem; margin-bottom: 1rem; color: coral">
|
||||
下载路径在您的浏览器里设置哦
|
||||
</div>
|
||||
<el-form-item label="日志类型:">
|
||||
<el-select v-model="downLoadLog.logType" @change="changeLogType">
|
||||
<el-option label="系统日志" value="系统日志" />
|
||||
<el-option label="事件日志" value="事件日志" />
|
||||
<el-option label="接口请求日志" value="接口请求日志" />
|
||||
<el-option label="接口接收日志" value="接口接收日志" />
|
||||
<el-option label="异常日志" value="异常日志" />
|
||||
<el-option label="数据库日志" value="数据库日志" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="日志时间:">
|
||||
<el-badge :value="fileName.length">
|
||||
<el-select v-model="downLoadLog.logFileName" style="width: calc(30vh - 120px)">
|
||||
<el-option v-for="item in fileName" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-badge>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="preview">预览</el-button>
|
||||
<el-button type="primary" @click="startDownLoad">下载</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import sysApi from "@/axios/system";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
downLoadLog: {
|
||||
// log类型
|
||||
logType: '',
|
||||
// log文件名
|
||||
logFileName: ''
|
||||
},
|
||||
// 文件列表
|
||||
fileName: []
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 下载文件
|
||||
startDownLoad() {
|
||||
if(this.downLoadLog.logFileName === '' || this.downLoadLog.logType === '')
|
||||
{
|
||||
ElMessage({
|
||||
message: '需要先选择类型和时间',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
sysApi.checkDownloadFile(this.downLoadLog).then((response) => {
|
||||
const responseData = response.data
|
||||
if(responseData.success === false) {
|
||||
ElMessage({
|
||||
message: '文件不存在',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
sysApi.downloadFile(this.downLoadLog).then((response) => {
|
||||
const responseData = response.data
|
||||
const link = document.createElement('a');
|
||||
link.href = window.URL.createObjectURL(new Blob([responseData]));
|
||||
link.setAttribute('download', this.downLoadLog.logType + this.downLoadLog.logFileName);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
ElMessage({
|
||||
message: '您的下载将在 30秒内开始,请稍后',
|
||||
type: 'success',
|
||||
})
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '下载出现异常:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '下载文件验证出现异常:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
},
|
||||
changeLogType() {
|
||||
this.downLoadLog.logFileName = ''
|
||||
sysApi.getLogFileName(this.downLoadLog.logType).then((response) => {
|
||||
const responseData = response.data
|
||||
if(responseData.code !== 0 || responseData["returnData"] === undefined || responseData["returnData"] === null) {
|
||||
ElMessage({
|
||||
message: '没有文件',
|
||||
type: 'warning',
|
||||
})
|
||||
this.fileName = []
|
||||
return
|
||||
}
|
||||
this.fileName = responseData["returnData"]
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求出现异常:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
this.fileName = []
|
||||
})
|
||||
},
|
||||
// 预览
|
||||
preview() {
|
||||
if(this.downLoadLog.logFileName === '' || this.downLoadLog.logType === '')
|
||||
{
|
||||
ElMessage({
|
||||
message: '需要先选择类型和时间',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$emit('update:modelValue', '')
|
||||
sysApi.checkDownloadFile(this.downLoadLog).then((response) => {
|
||||
const responseData = response.data
|
||||
if(responseData.success === false) {
|
||||
ElMessage({
|
||||
message: '文件不存在',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
sysApi.downloadFile(this.downLoadLog).then((response) => {
|
||||
const responseData = response.data
|
||||
responseData.text().then(data=>{
|
||||
this.$emit('update:modelValue', data)
|
||||
}).catch(err=>{
|
||||
ElMessage({
|
||||
message: '预览出现异常:' + err,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '预览出现异常:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '预览文件验证出现异常:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
184
src/view/component/userData/AddUser.vue
Normal file
184
src/view/component/userData/AddUser.vue
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :model-value="modelValue" :show-close="false" title="创建新用户"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<div>
|
||||
<el-form
|
||||
label-position="right"
|
||||
label-width="100px"
|
||||
:model="user"
|
||||
require-asterisk-position="right"
|
||||
style="width: 600px"
|
||||
>
|
||||
<el-form-item label="用户ID:">
|
||||
<el-input v-model="user.userId" style="width: 500px"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称:">
|
||||
<el-input v-model="user.userName" style="width: 500px"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户密码:">
|
||||
<el-input v-model="user.userPassword" type="password" show-password style="width: 500px"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户状态:">
|
||||
<el-switch
|
||||
v-model="user.userStatus"
|
||||
inline-prompt
|
||||
active-text="正常"
|
||||
inactive-text="停用"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
style="width: 500px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户组:">
|
||||
<el-select v-model="user.userGroup" placeholder="请选择用户组" style="width: 500px">
|
||||
<el-option
|
||||
v-for="item in userGroup"
|
||||
:key="item.groupId"
|
||||
:label="item.groupId"
|
||||
:value="item.groupId"
|
||||
:disabled="item.groupId === 'developer'"
|
||||
>
|
||||
<span style="float: left">{{ item.groupId }}</span>
|
||||
<span
|
||||
style="
|
||||
float: right;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
"
|
||||
>{{ item.groupName }}</span
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div style="margin-top: 50px">
|
||||
<el-button type="success" @click="loadUserGroup">
|
||||
<el-icon class="el-icon--left"><Refresh/></el-icon>
|
||||
刷新用户组
|
||||
</el-button>
|
||||
<el-button type="primary" @click="addUser">
|
||||
<el-icon class="el-icon--left"><CirclePlus/></el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
<el-button @click="resetInput">
|
||||
<el-icon class="el-icon--left"><RefreshRight/></el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">
|
||||
<el-icon class="el-icon--left"><CircleCloseFilled/></el-icon>
|
||||
关闭
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {CircleCloseFilled, CirclePlus, Refresh, RefreshRight} from "@element-plus/icons-vue";
|
||||
import userGroupApi from '@/axios/user.group'
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {Refresh, CircleCloseFilled, RefreshRight, CirclePlus},
|
||||
props: ['modelValue'],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
user: {
|
||||
userId: '',
|
||||
userName: '',
|
||||
userPassword: '',
|
||||
userStatus: '',
|
||||
userGroup: '',
|
||||
},
|
||||
// 用户组
|
||||
userGroup: []
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
addUser() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置输入框
|
||||
*/
|
||||
resetInput() {
|
||||
this.user.userId = ''
|
||||
this.user.userName = ''
|
||||
this.user.userPassword = ''
|
||||
this.user.userStatus = '0'
|
||||
this.user.userGroup = ''
|
||||
},
|
||||
|
||||
loadUserGroup() {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
userGroupApi.getUserGroup().then((response) => {
|
||||
const responseData = response.data
|
||||
if(responseData.code === 0) {
|
||||
this.userGroup = responseData['returnData']
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((err) => {
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + err,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
145
src/view/component/userData/SearchForm.vue
Normal file
145
src/view/component/userData/SearchForm.vue
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
|
||||
<el-row>
|
||||
<el-form :model="searchParams" label-width="120" label-position="left">
|
||||
<el-form-item label="查询关键字:">
|
||||
<el-input placeholder="输入 用户ID/用户名称 查询..." v-model="searchParams.searchStr" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户状态:">
|
||||
<el-checkbox-group v-model="searchParams.userStatus">
|
||||
<el-checkbox label="正常" checked />
|
||||
<el-checkbox label="禁用" checked />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户创建时间:">
|
||||
<el-date-picker
|
||||
v-model="searchParams.timeRange"
|
||||
type="datetimerange"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="截止时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
|
||||
<el-button type="success" @click="addUser">添加用户</el-button>
|
||||
</el-row>
|
||||
<!-- 创建新用户-->
|
||||
<AddUser v-model="showAddUser" ref="addUser"></AddUser>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import userApi from '@/axios/user'
|
||||
import AddUser from "@/view/component/userData/AddUser.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {AddUser},
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: ['update:searchParams', 'update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 展示添加新用户弹窗
|
||||
showAddUser: false
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
/**
|
||||
* 查询用户信息
|
||||
*/
|
||||
searchBtn() {
|
||||
this.searchParams.page.pageIndex = 1
|
||||
this.searchParams.page.pageSize = 50
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.searchData(this.searchParams)
|
||||
},
|
||||
searchData(searchParams) {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.$emit('update:modelValue', [])
|
||||
userApi.getUserWithPage(searchParams).then((response) => {
|
||||
const responseData = response.data
|
||||
if(responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.searchParams.page.totalRow = parseInt(responseData.msg)
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((err) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + err,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 添加用户
|
||||
*/
|
||||
addUser() {
|
||||
this.$refs.addUser.loadUserGroup()
|
||||
this.showAddUser = true;
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
123
src/view/component/userData/UserList.vue
Normal file
123
src/view/component/userData/UserList.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<h5>用户账户列表</h5>
|
||||
<el-table :data="modelValue" border stripe style="width: 100%;" max-height="calc(100vh - 550px)">
|
||||
<el-table-column fixed prop="userId" label="用户ID" min-width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="userName" label="用户名称" min-width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column label="用户状态" width="95px" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag class="ml-2" :type=formatterUserStatus(scope.row.userStatus).type>{{formatterUserStatus(scope.row.userStatus).msg }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="modifyTime" label="修改时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="userGroup" label="所属用户组" min-width="180px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="100">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<el-tooltip content="查看详情" placement="top" effect="light">
|
||||
<el-button type="primary" size="small" @click="checkUser(scope.row)">
|
||||
<el-icon><Search/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除用户" placement="top" effect="light">
|
||||
<el-button type="danger" size="small" @click="deleteUser(scope.row)">
|
||||
<el-icon><Delete/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-pagination
|
||||
v-if="searchParams.page.totalRow > 0"
|
||||
small
|
||||
background
|
||||
v-model:page-size="searchParams.page.pageSize"
|
||||
v-model:current-page="searchParams.page.pageIndex"
|
||||
:page-sizes="[20, 50, 100, 200, 500]"
|
||||
layout="prev, pager, next, jumper, sizes, total"
|
||||
:total="searchParams.page.totalRow"
|
||||
@size-change="pageChangeEvent"
|
||||
@current-change="pageChangeEvent"
|
||||
/>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import formatterTime from "@/plugins/formatter/formatter.time";
|
||||
import {Delete, Search} from "@element-plus/icons-vue";
|
||||
import formatterUserStatus from "@/plugins/formatter/formatter.user.status";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {Delete, Search},
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
|
||||
// -----
|
||||
|
||||
formatterTime: formatterTime.formatCellValueTime,
|
||||
formatterUserStatus: formatterUserStatus.formatUserStatus
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
pageChangeEvent(){
|
||||
|
||||
},
|
||||
// 查看详情
|
||||
checkUser(row) {
|
||||
|
||||
},
|
||||
// 删除用户
|
||||
deleteUser(row) {
|
||||
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
146
src/view/component/userMenuRule/AddUserGroup.vue
Normal file
146
src/view/component/userMenuRule/AddUserGroup.vue
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :model-value="modelValue" title="添加用户组"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<el-row>
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="160px"
|
||||
:model="userGroupData"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item label="用户组ID:">
|
||||
<el-input v-model="userGroupData.groupId"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户组名称:">
|
||||
<el-input v-model="userGroupData.groupName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户组状态:">
|
||||
<el-switch
|
||||
v-model="userGroupData.groupStatus"
|
||||
inline-prompt
|
||||
active-text="启用"
|
||||
inactive-text="停用"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button type="primary" @click="addUserGroup">添加</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import userGroupApi from '@/axios/user.group'
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
userGroupData: {
|
||||
groupId: '',
|
||||
groupName: '',
|
||||
groupStatus: '1'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
addUserGroup() {
|
||||
if(this.userGroupData.groupId === '' || this.userGroupData.groupName === ''){
|
||||
ElMessage({
|
||||
message: '请填写用户组名称和用户组ID',
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
userGroupApi.addUserGroup(this.userGroupData).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '添加用户组成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.$emit('update:modelValue', false)
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '添加用户组失败,服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '添加用户组,请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-form-inline {
|
||||
width: 50%;
|
||||
.el-input {
|
||||
--el-input-width: 100%;
|
||||
}
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
181
src/view/component/userMenuRule/UserGroupList.vue
Normal file
181
src/view/component/userMenuRule/UserGroupList.vue
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tabs type="border-card" style="height: calc(100vh - 185px)">
|
||||
<el-tab-pane label="用户组列表">
|
||||
<el-row style="margin-bottom: 15px">
|
||||
<el-button type="primary" @click="queryUserGroup">查询/刷新 用户组</el-button>
|
||||
<el-button type="success" @click="()=>showAddUserGroup=true">添加用户组</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div v-if="editUserGroupId !== undefined && editUserGroupId !== ''"
|
||||
style="font-size: 0.8rem; color: #ec6408;margin-bottom: 10px">当前编辑的用户组:{{editUserGroupId}}</div>
|
||||
<el-table :data="userGroupList" border stripe max-height="calc(100vh - 350px)">
|
||||
<el-table-column fixed prop="groupId" label="用户组ID" align="center"/>
|
||||
<el-table-column prop="groupName" label="用户组名称" align="center"/>
|
||||
<el-table-column prop="groupStatus" label="用户组状态" align="center"/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="100">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<el-tooltip content="编辑权限" placement="top" effect="light">
|
||||
<el-button type="primary" size="small" @click="editUserRule(scope.row)">
|
||||
<el-icon><Edit/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除用户组" placement="top" effect="light"
|
||||
v-if="scope.row.groupId !== 'developer' ">
|
||||
<el-button type="danger" size="small" @click="deleteUserGroup(scope.row)">
|
||||
<el-icon><Delete/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 添加用户组-->
|
||||
<AddUserGroup v-model="showAddUserGroup"></AddUserGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {Delete, Edit} from "@element-plus/icons-vue";
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
import userGroupApi from "@/axios/user.group";
|
||||
import AddUserGroup from "@/view/component/userMenuRule/AddUserGroup.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {AddUserGroup, Edit, Delete},
|
||||
props: ['editUserGroupId'],
|
||||
emits: ['update:editUserGroupId', 'queryBaseMenu', 'queryUserRule'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 用户组列表
|
||||
userGroupList: [],
|
||||
// 展示添加用户组窗口
|
||||
showAddUserGroup: false
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 查询用户组
|
||||
queryUserGroup() {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
userGroupApi.getUserGroup().then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询用户组成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.userGroupList = Object.freeze(responseData["returnData"])
|
||||
this.$emit('queryBaseMenu')
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '查询用户组,服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '查询用户组,请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
// 编辑用户组权限
|
||||
editUserRule(row) {
|
||||
this.$emit('queryUserRule', row.groupId)
|
||||
|
||||
},
|
||||
// 删除用户组
|
||||
deleteUserGroup(row) {
|
||||
ElMessageBox.confirm(
|
||||
'确定删除该用户组?',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定删除',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
userGroupApi.deleteUserGroup(row.groupId).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '删除用户组成功',
|
||||
type: 'success',
|
||||
})
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '删除用户组失败,服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '删除用户组,请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
this.queryUserGroup()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
168
src/view/component/userMenuRule/UserMenu.vue
Normal file
168
src/view/component/userMenuRule/UserMenu.vue
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane :label="'用户菜单--' + userGroupId">
|
||||
<el-row style="margin-bottom: 15px">
|
||||
<el-button type="primary" @click="()=>$emit('queryMenu')">显示菜单</el-button>
|
||||
<el-button @click="queryUserMenu">查询/刷新 权限</el-button>
|
||||
<el-button type="success" @click="saveUserRule">保存权限</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-scrollbar style="height: calc(100vh - 300px)">
|
||||
<el-tree
|
||||
:data="menu"
|
||||
show-checkbox
|
||||
node-key="index"
|
||||
default-expand-all
|
||||
ref="menuTree">
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import userRuleApi from "@/axios/user.rule";
|
||||
import menuApi from "@/axios/menu";
|
||||
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['userGroupId', 'menu'],
|
||||
emits: ['queryMenu'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
queryUserMenu() {
|
||||
if(this.userGroupId === undefined || this.userGroupId === '') {
|
||||
ElMessage({
|
||||
message: '请先在左侧选择用户组',
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
userRuleApi.getUserGroupMenu(this.userGroupId).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询用户组菜单成功',
|
||||
type: 'success',
|
||||
})
|
||||
const menuList = Object.freeze(responseData["returnData"])
|
||||
let checkList = []
|
||||
menuList.forEach((value)=> {
|
||||
checkList.push(value.minorMenuIndex)
|
||||
})
|
||||
this.$refs.menuTree.setCheckedKeys(checkList, false)
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '查询用户组菜单,服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '查询用户组菜单,请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
},
|
||||
// 保存用户修改后的用户权限
|
||||
saveUserRule() {
|
||||
if(this.userGroupId === undefined || this.userGroupId === '') {
|
||||
ElMessage({
|
||||
message: '未识别到您选择的用户组,请先选择用户组',
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(
|
||||
'确定变更该用户的权限?',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定变更',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
const selectMenu = this.$refs.menuTree.getCheckedKeys(true)
|
||||
const request = {
|
||||
userGroupId: this.userGroupId,
|
||||
userRules: selectMenu
|
||||
}
|
||||
userRuleApi.updateUserGroupMenu(request).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '保存用户权限成功',
|
||||
type: 'success',
|
||||
})
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '保存用户权限,服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '保存用户权限,请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
168
src/view/component/wcsTask/ChangeWcsTask.vue
Normal file
168
src/view/component/wcsTask/ChangeWcsTask.vue
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :model-value="modelValue"
|
||||
title="变更 WCS 任务信息"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<div style="margin-left: 80px">
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="120px"
|
||||
:model="wcsTaskData"
|
||||
style="max-width: 600px"
|
||||
>
|
||||
<div style="font-size: 0.8rem; margin-bottom: 1rem; color: coral">
|
||||
注意:此处点位是设备点位,不一定和 Wms 系统内点位相同
|
||||
</div>
|
||||
<el-form-item label="PLC任务号:">
|
||||
<el-input class="form-input" v-model="wcsTaskData.plcId" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务号:">
|
||||
<el-input class="form-input" v-model="wcsTaskData.taskId" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="载具号:">
|
||||
<el-input class="form-input" v-model="wcsTaskData.vehicleNo" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="起点:">
|
||||
<el-input class="form-input" v-model="wcsTaskData.origin" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="终点:">
|
||||
<el-input class="form-input" v-model="wcsTaskData.destination" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="优先级:">
|
||||
<el-input-number class="form-input" v-model="wcsTaskData.priority"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务状态:">
|
||||
<el-select class="form-input"
|
||||
placeholder='请选择目标任务状态'
|
||||
v-model="wcsTaskData.taskStatus"
|
||||
>
|
||||
<el-option label="待执行" value="0"/>
|
||||
<el-option label="离开起点" value="1"/>
|
||||
<el-option label="执行中" value="2"/>
|
||||
<el-option label="到达终点" value="3"/>
|
||||
<el-option label="执行完成" value="4"/>
|
||||
<el-option label="执行异常" value="9"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="margin-top: 50px">
|
||||
<el-button type="primary" @click="changeTask">
|
||||
<el-icon class="el-icon--left"><CirclePlus/></el-icon>
|
||||
变更
|
||||
</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">
|
||||
<el-icon class="el-icon--left"><CircleCloseFilled/></el-icon>
|
||||
关闭
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {CircleCloseFilled, CirclePlus} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import wcsTaskApi from "@/axios/wcs.task";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {CircleCloseFilled, CirclePlus},
|
||||
props: ['modelValue', 'wcsTaskData'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
changeTask() {
|
||||
if(this.wcsTaskData.taskStatus === '') {
|
||||
ElMessageBox.alert(`请先选择任务状态`, '警告', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
showClose: false
|
||||
})
|
||||
return
|
||||
}
|
||||
const changeTaskData = {
|
||||
plcId: this.wcsTaskData.plcId,
|
||||
taskStatus: this.wcsTaskData.taskStatus,
|
||||
priority: this.wcsTaskData.priority
|
||||
}
|
||||
ElMessageBox.confirm(`确定变更PLC任务号:${this.wcsTaskData.plcId} 的任务状态吗?`, '变更状态确认', {
|
||||
confirmButtonText: '确定变更',
|
||||
cancelButtonText: '取消变更',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
wcsTaskApi.updateWcsStatus(changeTaskData).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
// 正确请求
|
||||
ElMessage({
|
||||
message: '任务状态变更成功, 请稍后刷新查看',
|
||||
type: 'success',
|
||||
})
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '服务器返回操作失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$input-width: 300px;
|
||||
|
||||
.form-input {
|
||||
width: $input-width;
|
||||
}
|
||||
|
||||
</style>
|
||||
141
src/view/component/wcsTask/SearchForm.vue
Normal file
141
src/view/component/wcsTask/SearchForm.vue
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
|
||||
<el-row>
|
||||
<el-form :model="searchParams" label-width="120" label-position="left">
|
||||
<el-form-item label="查询关键字:">
|
||||
<el-input placeholder="输入 PLC任务号/料箱号/库位/任务号 查询..." v-model="searchParams.searchStr" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型:">
|
||||
<el-checkbox-group v-model="searchParams.taskType">
|
||||
<el-checkbox label="入库任务" checked />
|
||||
<el-checkbox label="出库任务" checked />
|
||||
<el-checkbox label="拣选任务" checked />
|
||||
<el-checkbox label="盘点任务" checked />
|
||||
<el-checkbox label="移库任务" checked />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务状态:">
|
||||
<el-checkbox-group v-model="searchParams.taskStatus">
|
||||
<el-checkbox label="待执行" checked />
|
||||
<el-checkbox label="离开起点" checked />
|
||||
<el-checkbox label="执行中" checked />
|
||||
<el-checkbox label="到达终点" checked />
|
||||
<el-checkbox label="执行完成" checked />
|
||||
<el-checkbox label="执行异常" checked />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务创建时间:">
|
||||
<el-date-picker
|
||||
v-model="searchParams.timeRange"
|
||||
type="datetimerange"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="截止时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import wcsTaskApi from "@/axios/wcs.task";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: ['update:searchParams', 'update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchBtn() {
|
||||
this.searchParams.page.pageIndex = 1
|
||||
this.searchParams.page.pageSize = 50
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.searchData(this.searchParams)
|
||||
},
|
||||
searchData(searchParams) {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.$emit('update:modelValue', [])
|
||||
wcsTaskApi.getWcsTaskWithPage(searchParams).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
// 正确请求,展示数据
|
||||
this.searchParams.page.totalRow = parseInt(responseData.msg)
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
173
src/view/component/wcsTask/WcsTaskList.vue
Normal file
173
src/view/component/wcsTask/WcsTaskList.vue
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<h5>设备任务列表</h5>
|
||||
<el-table :data="modelValue" border stripe style="width: 100%;" max-height="calc(100vh - 550px)">
|
||||
<el-table-column fixed prop="plcId" label="PLC任务号" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="taskId" label="任务号" width="250px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column label="任务类型" width="95px" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag class="ml-2" :type=formatterTaskType(scope.row.taskType).type>{{formatterTaskType(scope.row.taskType).msg }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="taskSort" label="任务排序" width="90px" align="center"/>
|
||||
<el-table-column label="任务状态" width="95px" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag class="ml-2" :type=formatterWcsTaskStatus(scope.row.taskStatus).type>{{formatterWcsTaskStatus(scope.row.taskStatus).msg }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="priority" label="优先级" width="90px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="origin" label="搬运起点" width="150px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="destination" label="搬运终点" width="150px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="vehicleNo" label="载具号" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="plcVehicleNo" label="数字载具号" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="vehicleSize" label="载具尺寸" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="weight" label="总重量" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="createTime" label="任务创建时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="startTime" label="任务开始时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="completeTime" label="任务结束时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="remark" label="备注" min-width="200px" show-overflow-tooltip/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<!-- 变更任务状态 -->
|
||||
<el-tooltip content="变更任务状态" placement="top" effect="light">
|
||||
<el-button type="warning" size="small" @click="changeTaskStatus(scope.row)">
|
||||
<el-icon><Switch/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-pagination
|
||||
v-if="searchParams !== undefined && searchParams !== null && searchParams.page.totalRow > 0"
|
||||
small
|
||||
background
|
||||
v-model:page-size="searchParams.page.pageSize"
|
||||
v-model:current-page="searchParams.page.pageIndex"
|
||||
:page-sizes="[20, 50, 100, 200, 500]"
|
||||
layout="prev, pager, next, jumper, sizes, total"
|
||||
:total="searchParams.page.totalRow"
|
||||
@size-change="pageChangeEvent"
|
||||
@current-change="pageChangeEvent"
|
||||
/>
|
||||
</el-row>
|
||||
<!-- 变更 Wcs 任务信息弹窗-->
|
||||
<ChangeWcsTask v-model="showChangeTask" :wcs-task-data="wcsTaskData"></ChangeWcsTask>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import formatterTaskType from "@/plugins/formatter/formatter.task.type";
|
||||
import formatterWcsTaskStatus from "@/plugins/formatter/formatter.wcstask.status"
|
||||
import formatterTime from "@/plugins/formatter/formatter.time";
|
||||
import {Switch} from "@element-plus/icons-vue";
|
||||
import wcsTaskApi from '@/axios/wcs.task'
|
||||
import {ElMessage} from "element-plus";
|
||||
import ChangeWcsTask from "@/view/component/wcsTask/ChangeWcsTask.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {Switch, ChangeWcsTask},
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: ['pageChange'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 展示修改Wcs任务信息的弹窗
|
||||
showChangeTask: false,
|
||||
// 传入修改信息弹窗的信息
|
||||
wcsTaskData: {},
|
||||
// -----
|
||||
|
||||
formatterTaskType: formatterTaskType.formatTaskType,
|
||||
formatterWcsTaskStatus: formatterWcsTaskStatus.formatTaskStatus,
|
||||
formatterTime: formatterTime.formatCellValueTime,
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchData(taskId) {
|
||||
this.taskId = taskId
|
||||
this.wcsTaskList = []
|
||||
wcsTaskApi.getWcsTaskWithTaskId(taskId).then((response)=>{
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
// 查询成功
|
||||
this.wcsTaskList = responseData['returnData']
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '查询WCS任务服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '查询WCS任务请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
},
|
||||
changeTaskStatus(row) {
|
||||
this.wcsTaskData = {}
|
||||
this.wcsTaskData = {
|
||||
plcId: row.plcId,
|
||||
taskId: row.taskId,
|
||||
vehicleNo: row.vehicleNo,
|
||||
origin: row.origin,
|
||||
destination: row.destination,
|
||||
priority: row.priority,
|
||||
taskStatus: ''
|
||||
}
|
||||
this.showChangeTask = true
|
||||
},
|
||||
pageChangeEvent() {
|
||||
this.$emit('pageChange', this.searchParams)
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
227
src/view/component/wmsTask/AddWmsTask.vue
Normal file
227
src/view/component/wmsTask/AddWmsTask.vue
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :model-value="modelValue" :show-close="false" title="新增设备任务"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<div>
|
||||
<el-form
|
||||
label-width="100px"
|
||||
:model="wmsTask"
|
||||
require-asterisk-position="right"
|
||||
style="width: 600px"
|
||||
>
|
||||
<div style="font-size: 0.8rem; margin-bottom: 1rem; color: coral">
|
||||
请输入准确位置,否则可能不能正常运行任务(不建议使用此处操作,请前往WMS操作)
|
||||
</div>
|
||||
<el-form-item label="任务类型:" required>
|
||||
<el-select v-model="wmsTask.taskType"
|
||||
class="form-input"
|
||||
placeholder='请选择任务类型'>
|
||||
<el-option label="入库任务" value="1"/>
|
||||
<el-option label="出库任务" value="2"/>
|
||||
<el-option label="移库任务" value="9"/>
|
||||
<el-option label="拣选盘点任务" value="4"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="起点:" required>
|
||||
<el-autocomplete
|
||||
v-model="wmsTask.origin"
|
||||
:fetch-suggestions="locationFilter"
|
||||
clearable
|
||||
style="width: 300px"
|
||||
placeholder="请输入起点"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="中间点:">
|
||||
<el-autocomplete
|
||||
v-model="wmsTask.midPoint"
|
||||
:fetch-suggestions="locationFilter"
|
||||
clearable
|
||||
style="width: 300px"
|
||||
placeholder="请输入中间点"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="终点:" required>
|
||||
<el-autocomplete
|
||||
v-model="wmsTask.destination"
|
||||
:fetch-suggestions="locationFilter"
|
||||
clearable
|
||||
style="width: 300px"
|
||||
placeholder="请输入终点"
|
||||
:popper-append-to-body="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="载具号:" required>
|
||||
<el-input class="form-input" v-model="wmsTask.vehicleNo"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="优先级:" required>
|
||||
<el-input-number class="form-input" v-model="wmsTask.priority" />
|
||||
</el-form-item>
|
||||
<el-form-item label="重量:" required>
|
||||
<el-input-number class="form-input" v-model="wmsTask.weight" :precision="2"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="尺寸:" required>
|
||||
<el-input-number class="form-input" v-model="wmsTask.vehicleSize" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备用:">
|
||||
<el-input class="form-input" v-model="wmsTask.spare1"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div style="margin-top: 50px">
|
||||
<el-button type="primary" @click="addWmsTask">
|
||||
<el-icon class="el-icon--left"><CirclePlus/></el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
<el-button @click="resetInput">
|
||||
<el-icon class="el-icon--left"><RefreshRight/></el-icon>
|
||||
重置
|
||||
</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">
|
||||
<el-icon class="el-icon--left"><CircleCloseFilled/></el-icon>
|
||||
关闭
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import {CircleCloseFilled, CirclePlus, RefreshRight} from "@element-plus/icons-vue"
|
||||
import locationApi from '@/axios/location'
|
||||
import {ElMessage, ElMessageBox} from "element-plus"
|
||||
import wmsTaskApi from "@/axios/wms.task"
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {CircleCloseFilled, CirclePlus, RefreshRight},
|
||||
props: ['modelValue'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// wms任务实体数据
|
||||
wmsTask: {
|
||||
// 任务号,添加时不用填
|
||||
taskId: '',
|
||||
// 任务类型
|
||||
taskType: '',
|
||||
// 任务状态,添加时不用填
|
||||
taskStatus: '',
|
||||
// 任务起点
|
||||
origin: '',
|
||||
// 中间点
|
||||
midPoint: '',
|
||||
// 优先级
|
||||
priority: 0,
|
||||
// 任务终点
|
||||
destination: '',
|
||||
// 载具号
|
||||
vehicleNo: '',
|
||||
// 重量
|
||||
weight: 0,
|
||||
// 尺寸
|
||||
vehicleSize: 0,
|
||||
// 备用
|
||||
spare1: ''
|
||||
},
|
||||
// 点位信息,用于搜索填写值
|
||||
locations: []
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 添加Wms任务
|
||||
addWmsTask() {
|
||||
if (this.wmsTask.taskType === ''
|
||||
|| this.wmsTask.origin === ''
|
||||
|| this.wmsTask.destination === ''
|
||||
|| this.wmsTask.vehicleNo === '') {
|
||||
// 服务报错
|
||||
ElMessageBox.alert(`您有必填的项未填`, '警告', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
return;
|
||||
}
|
||||
wmsTaskApi.addWmsTask(this.wmsTask).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
// 正确请求
|
||||
ElMessage({
|
||||
message: '添加任务成功',
|
||||
type: 'success',
|
||||
})
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessageBox.alert(`服务器返回失败:${responseData.msg}`, '任务添加失败', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
showClose: false
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessageBox.alert(`添加任务请求服务器失败::${ex}`, '任务添加失败', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 重置输入框
|
||||
resetInput() {
|
||||
this.wmsTask.taskId = ''
|
||||
this.wmsTask.taskType = ''
|
||||
this.wmsTask.taskStatus = ''
|
||||
this.wmsTask.origin = ''
|
||||
this.wmsTask.midPoint = ''
|
||||
this.wmsTask.destination = ''
|
||||
this.wmsTask.priority = 0
|
||||
this.wmsTask.vehicleNo = ''
|
||||
this.wmsTask.weight = 0
|
||||
this.wmsTask.vehicleSize = 0
|
||||
this.wmsTask.spare1 = ''
|
||||
},
|
||||
// 查询起点终点筛选
|
||||
locationFilter(value, callBack) {
|
||||
if (value.length > 0) {
|
||||
const items = this.locations.filter(item => item.value.toLowerCase().includes(value.toLowerCase()))
|
||||
callBack(items)
|
||||
} else {
|
||||
callBack([])
|
||||
}
|
||||
},
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
// 请求获取所有的点位信息
|
||||
locationApi.getLocation().then((response) => {
|
||||
const responseData = response.data
|
||||
// 正确请求
|
||||
const locationData = responseData["returnData"];
|
||||
const locations = []
|
||||
locationData.forEach((value) => {
|
||||
locations.push({value: value['wmsLocation'], link: value['wmsLocation']})
|
||||
})
|
||||
this.locations = locations
|
||||
}).catch((ex) => {
|
||||
console.log(`请求获取点位信息失败,异常信息:${ex}`)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$input-width: 300px;
|
||||
|
||||
.form-input {
|
||||
width: $input-width;
|
||||
}
|
||||
|
||||
</style>
|
||||
160
src/view/component/wmsTask/ChangeWmsTask.vue
Normal file
160
src/view/component/wmsTask/ChangeWmsTask.vue
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog :model-value="modelValue"
|
||||
title="变更任务信息"
|
||||
@close="() => $emit('update:modelValue', false)">
|
||||
<div style="margin-left: 80px">
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="120px"
|
||||
:model="wmsTaskData"
|
||||
style="max-width: 600px"
|
||||
>
|
||||
<el-form-item label="任务号:">
|
||||
<el-input class="form-input" v-model="wmsTaskData.taskId" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="载具号:">
|
||||
<el-input class="form-input" v-model="wmsTaskData.vehicleNo" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="起点:">
|
||||
<el-input class="form-input" v-model="wmsTaskData.origin" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="中间点:">
|
||||
<el-input class="form-input" v-model="wmsTaskData.midPoint" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="终点:">
|
||||
<el-input class="form-input" v-model="wmsTaskData.destination" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="优先级:">
|
||||
<el-input-number class="form-input" v-model="wmsTaskData.priority" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务状态:">
|
||||
<el-select class="form-input"
|
||||
placeholder='请选择目标任务状态'
|
||||
v-model="wmsTaskData.taskStatus">
|
||||
<el-option label="重置任务" value="0"/>
|
||||
<el-option label="完成任务" value="3"/>
|
||||
<el-option label="删除任务" value="999"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="margin-top: 50px">
|
||||
<el-button type="primary" @click="changeTaskStatus">
|
||||
<el-icon class="el-icon--left"><CirclePlus/></el-icon>
|
||||
变更
|
||||
</el-button>
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">
|
||||
<el-icon class="el-icon--left"><CircleCloseFilled/></el-icon>
|
||||
关闭
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import {CircleCloseFilled, CirclePlus} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import wmsTaskApi from "@/axios/wms.task";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {CircleCloseFilled, CirclePlus},
|
||||
props: ['modelValue', 'wmsTaskData'],
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
changeTaskStatus() {
|
||||
if(this.wmsTaskData.taskStatus === '') {
|
||||
ElMessageBox.alert(`请先选择任务状态`, '警告', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定',
|
||||
showClose: false
|
||||
})
|
||||
return
|
||||
}
|
||||
const changeTaskData = {
|
||||
taskId : this.wmsTaskData.taskId,
|
||||
destination: this.wmsTaskData.destination,
|
||||
taskStatus: this.wmsTaskData.taskStatus,
|
||||
}
|
||||
ElMessageBox.confirm(`确定变更任务号:${this.wmsTaskData.taskId} 的任务状态吗?`, '变更状态确认', {
|
||||
confirmButtonText: '确定变更',
|
||||
cancelButtonText: '取消变更',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
wmsTaskApi.changeTaskStatus(changeTaskData).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
// 正确请求
|
||||
ElMessage({
|
||||
message: '任务状态变更成功, 请稍后刷新查看',
|
||||
type: 'success',
|
||||
})
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$input-width: 300px;
|
||||
|
||||
.form-input {
|
||||
width: $input-width;
|
||||
}
|
||||
|
||||
</style>
|
||||
119
src/view/component/wmsTask/SearchForm.vue
Normal file
119
src/view/component/wmsTask/SearchForm.vue
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<div style="border-radius: 5px; border: #2c3e5033 solid 1px; padding: 10px">
|
||||
<el-row>
|
||||
<el-form :model="searchParams" label-width="120" label-position="left" >
|
||||
<el-form-item label="查询关键字:">
|
||||
<el-input placeholder="输入 料箱号/库位/任务号 查询..." v-model="searchParams.searchStr" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类型:">
|
||||
<el-select v-model="searchParams.taskType" multiple placeholder="请选择需要查询的任务类型">
|
||||
<el-option v-for="item in wmsTaskTypeEnum" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务状态:">
|
||||
<el-select v-model="searchParams.taskStatus" multiple placeholder="请选择需要查询的任务状态">
|
||||
<el-option v-for="item in wmsTaskStatusEnum" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="任务创建时间:">
|
||||
<el-date-picker
|
||||
v-model="searchParams.timeRange"
|
||||
type="datetimerange"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DDTHH:mm:ss"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="截止时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button type="primary" @click="searchBtn">查询/刷新</el-button>
|
||||
<el-button type="success" @click="$emit('update:showAddWmsTask', true)">新增任务</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import wmsTaskApi from '@/axios/wms.task'
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import {wmsTaskTypeEnum} from "@/enum/taskEnum/wms.taskType.enum";
|
||||
import {wmsTaskStatusEnum} from "@/enum/taskEnum/wms.taskStatus.enum";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: ['modelValue', 'showAddWmsTask', 'searchParams'],
|
||||
emits:['update:searchParams', 'update:modelValue', 'update:showAddWmsTask'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
wmsTaskStatusEnum() {
|
||||
return wmsTaskStatusEnum
|
||||
},
|
||||
wmsTaskTypeEnum() {
|
||||
return wmsTaskTypeEnum
|
||||
}
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchBtn() {
|
||||
this.searchParams.page.pageIndex = 1
|
||||
this.searchParams.page.pageSize = 50
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.searchData(this.searchParams)
|
||||
},
|
||||
searchData(searchParams) {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.$emit('update:modelValue', [])
|
||||
wmsTaskApi.getWmsTaskWithPage(searchParams).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
// 正确请求,展示数据
|
||||
this.searchParams.page.totalRow = parseInt(responseData["tag"])
|
||||
this.$emit('update:searchParams', this.searchParams)
|
||||
this.$emit('update:modelValue', Object.freeze(responseData["returnData"]))
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
99
src/view/component/wmsTask/WcsTaskDetail.vue
Normal file
99
src/view/component/wmsTask/WcsTaskDetail.vue
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:model-value="modelValue"
|
||||
title="该任务的子任务列表"
|
||||
width="90vw"
|
||||
@close="$emit('update:modelValue', false)"
|
||||
>
|
||||
<div>
|
||||
<el-row style="margin-bottom: 10px">
|
||||
<div style="font-size: 0.8rem; color: chocolate">当前查询的任务号:{{taskId}}</div>
|
||||
</el-row>
|
||||
<el-scrollbar :max-height="500">
|
||||
<WcsTaskList v-model="wcsTaskList"></WcsTaskList>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="danger" @click="$emit('update:modelValue', false)">关闭窗口</el-button>
|
||||
<el-button type="primary" @click="searchData(taskId)">查询/刷新</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import formatterTaskType from "@/plugins/formatter/formatter.task.type";
|
||||
import formatterWcsTaskStatus from "@/plugins/formatter/formatter.wcstask.status"
|
||||
import formatterTime from "@/plugins/formatter/formatter.time";
|
||||
import {Switch} from "@element-plus/icons-vue";
|
||||
import wcsTaskApi from '@/axios/wcs.task'
|
||||
import {ElMessage} from "element-plus";
|
||||
import WcsTaskList from "@/view/component/wcsTask/WcsTaskList.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {Switch, WcsTaskList},
|
||||
props: ['modelValue'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
taskId: '',
|
||||
wcsTaskList: [],
|
||||
// -----
|
||||
|
||||
formatterTaskType: formatterTaskType.formatTaskType,
|
||||
formatterWcsTaskStatus: formatterWcsTaskStatus.formatTaskStatus,
|
||||
formatterTime: formatterTime.formatCellValueTime,
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchData(taskId) {
|
||||
console.log(9999)
|
||||
if(taskId === '') {
|
||||
ElMessage({
|
||||
message: '数据异常丢失,请关闭本页面后重试',
|
||||
type: 'warning',
|
||||
})
|
||||
return
|
||||
}
|
||||
this.taskId = taskId
|
||||
this.wcsTaskList = []
|
||||
wcsTaskApi.getWcsTaskWithTaskId(taskId).then((response)=>{
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
// 查询成功
|
||||
this.wcsTaskList = responseData['returnData']
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '查询Wcs任务服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '查询Wcs任务请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
140
src/view/component/wmsTask/WmsTaskList.vue
Normal file
140
src/view/component/wmsTask/WmsTaskList.vue
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<h5>任务列表</h5>
|
||||
<el-table :data="modelValue" border stripe max-height="calc(100vh - 550px)">
|
||||
<el-table-column fixed prop="taskId" label="任务号" width="230px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="taskType" label="任务类型" width="95px" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag class="ml-2" :type=formatterWmsTaskType(scope.row.taskType).color>
|
||||
{{formatterWmsTaskType(scope.row.taskType).label}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="taskStatus" label="任务状态" width="95px" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag class="ml-2" :type=formatterWmsTaskStatusEnum(scope.row.taskStatus).color effect="light">
|
||||
{{formatterWmsTaskStatusEnum(scope.row.taskStatus).label }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="priority" label="优先级" width="70px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="origin" label="搬运起点" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="midPoint" label="中间点" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="destination" label="搬运终点" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="vehicleNo" label="载具号" width="120px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="vehicleSize" label="载具尺寸" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="weight" label="总重量" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="createPerson" label="创建人" width="100px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="createTime" label="任务创建时间" :formatter="formatterTime" width="180px"
|
||||
align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="startTime" label="任务开始时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="endTime" label="任务结束时间" :formatter="formatterTime" width="180px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="taskMsg" label="任务信息" show-overflow-tooltip min-width="120px"/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="140">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<el-tooltip content="查看详情" placement="top" effect="light">
|
||||
<el-button type="primary" size="small" @click="checkDetail(scope.row)">
|
||||
<el-icon><Search/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="变更任务状态" placement="top" effect="light">
|
||||
<el-button type="warning" size="small" @click="changeTaskStatus(scope.row)">
|
||||
<el-icon><Switch/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-pagination
|
||||
small
|
||||
v-if="searchParams.page.totalRow > 0"
|
||||
background
|
||||
v-model:page-size="searchParams.page.pageSize"
|
||||
v-model:current-page="searchParams.page.pageIndex"
|
||||
:page-sizes="[20, 50, 100, 200, 500]"
|
||||
layout="prev, pager, next, jumper, sizes, total"
|
||||
:total="searchParams.page.totalRow"
|
||||
@size-change="searchData"
|
||||
@current-change="searchData"
|
||||
/>
|
||||
</el-row>
|
||||
<!-- Wcs任务列表的弹窗-->
|
||||
<WcsTaskDetail v-model="showWcsTask" ref="wcsTaskDetail"></WcsTaskDetail>
|
||||
<!-- 变更 Wms 任务状态的弹窗-->
|
||||
<ChangeWmsTask v-model="showChangeWmsTask" :wms-task-data="wmsTaskData"></ChangeWmsTask>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import formatterTaskType from "@/plugins/formatter/formatter.task.type";
|
||||
import formatterWmsTaskStatus from "@/plugins/formatter/formatter.wmstask.status";
|
||||
import formatterTime from "@/plugins/formatter/formatter.time";
|
||||
import { Switch } from "@element-plus/icons-vue";
|
||||
import ChangeWmsTask from "@/view/component/wmsTask/ChangeWmsTask.vue";
|
||||
import WcsTaskDetail from "@/view/component/wmsTask/WcsTaskDetail.vue";
|
||||
import {formatterWmsTaskType} from "@/enum/taskEnum/wms.taskType.enum"
|
||||
import {formatterWmsTaskStatusEnum} from "@/enum/taskEnum/wms.taskStatus.enum";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {WcsTaskDetail, Switch, ChangeWmsTask },
|
||||
props: ['modelValue', 'searchParams'],
|
||||
emits: ['pageChange'],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 展示WCS任务列表的弹窗
|
||||
showWcsTask: false,
|
||||
// 展示修改任务信息的弹窗
|
||||
showChangeWmsTask: false,
|
||||
// 传给修改任务窗口的值
|
||||
wmsTaskData: {},
|
||||
|
||||
// -----
|
||||
|
||||
formatterTaskType: formatterTaskType.formatTaskType,
|
||||
formatterWmsTaskStatus: formatterWmsTaskStatus.formatTaskStatus,
|
||||
formatterTime: formatterTime.formatCellValueTime,
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
formatterWmsTaskStatusEnum,
|
||||
formatterWmsTaskType,
|
||||
searchData() {
|
||||
this.$emit('pageChange', this.searchParams)
|
||||
},
|
||||
checkDetail(row) {
|
||||
this.showWcsTask = true
|
||||
this.$refs.wcsTaskDetail.searchData(row.taskId)
|
||||
},
|
||||
changeTaskStatus(row) {
|
||||
this.wmsTaskData = {
|
||||
taskId: row.taskId,
|
||||
vehicleNo: row.vehicleNo,
|
||||
origin: row.origin,
|
||||
midPoint: row.midPoint,
|
||||
destination: row.destination,
|
||||
priority: row.priority,
|
||||
taskStatus: ''
|
||||
}
|
||||
this.showChangeWmsTask = true
|
||||
}
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
113
src/view/layout/MainAside.vue
Normal file
113
src/view/layout/MainAside.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<div>
|
||||
<h3 class="mb-2" style="text-align: center;">主菜单</h3>
|
||||
<el-scrollbar height="calc(100vh - 120px)">
|
||||
<el-menu active-text-color="#666699" background-color=#ffffff class="el-menu-vertical-demo"
|
||||
text-color="#000000" v-for="{ico, index, mainMenu, minor} in menu" style="border: 0">
|
||||
<el-sub-menu :index='index'>
|
||||
<template #title>
|
||||
<el-icon color="#409EFC">
|
||||
<component :is='ico'></component>
|
||||
</el-icon>
|
||||
<span class="menuTitle">{{ mainMenu }}</span>
|
||||
</template>
|
||||
<div v-for="minorItem in (minor)">
|
||||
<el-menu-item :index='minorItem.index' @click="clickMenu(minorItem)">
|
||||
{{ minorItem['minorMenu'] }}
|
||||
</el-menu-item>
|
||||
</div>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import router from '@/router';
|
||||
import {ElMessageBox} from "element-plus";
|
||||
import {h} from "vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
menu: {
|
||||
get() {
|
||||
return this.$store.state.menu.menuData
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('setMenuData', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
clickMenu(minorItem) {
|
||||
if(minorItem.router === null || minorItem.router === '') {
|
||||
ElMessageBox.alert(
|
||||
h('div', null, [
|
||||
h('div', null, '在做了在做了,不要再催啦'),
|
||||
h('div', { style: { height: '10px' }}),
|
||||
h('div', null, '(。•́︿•̀。) ')
|
||||
]),
|
||||
'页面维护', {
|
||||
confirmButtonText: '我知道啦',
|
||||
callback: (action) => {}
|
||||
})
|
||||
return
|
||||
}
|
||||
try {
|
||||
let tabName = minorItem.index
|
||||
const tab = this.$store.state.tab.tabs.filter(f=>f.name === tabName)
|
||||
if (tab === undefined || tab.length === 0) {
|
||||
const data = {
|
||||
title: minorItem['minorMenu'],
|
||||
name: tabName
|
||||
}
|
||||
this.$store.commit('addTab', data)
|
||||
this.$store.commit('setSelectedTab', tabName)
|
||||
} else {
|
||||
this.$store.commit('setSelectedTab', tab[0].name)
|
||||
tabName = tab[0].name
|
||||
}
|
||||
const tabRouter = this.$store.state.menu.menuList.filter(f => f.index === tabName)
|
||||
if(tabRouter === undefined || tabRouter.length < 1) {
|
||||
} else {
|
||||
router.push({ name: tabRouter[0].router })
|
||||
}
|
||||
}catch (err) {
|
||||
ElMessageBox.alert(
|
||||
h('div', null, [
|
||||
h('div', null, `页面无法打开,请重新登陆后再试`),
|
||||
h('div', null, '(。•́︿•̀。) '),
|
||||
h('div', null, `若重新登陆后此异常还在请联系我们,并提供以下信息:`),
|
||||
h('div', null, err.toString())
|
||||
]),
|
||||
'页面打开失败', {
|
||||
confirmButtonText: '确认',
|
||||
callback: (action) => {}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
114
src/view/layout/MainContent.vue
Normal file
114
src/view/layout/MainContent.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<div style="margin-left:10px; font-size: 1.2rem">
|
||||
<el-tabs
|
||||
v-model='selectedTabName'
|
||||
type='card'
|
||||
@tab-click='clickTab'
|
||||
@tab-remove='removeTab'
|
||||
>
|
||||
<el-tab-pane
|
||||
:closable = "item.name !== '0-0'"
|
||||
v-for='item in tabs'
|
||||
:key='item.name'
|
||||
:label='item.title'
|
||||
:name='item.name'
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="10" style="padding: 10px; font-weight: bolder">{{ item.title }}</el-col>
|
||||
<el-col :span="2" :offset ="12">
|
||||
<img src="@/../public/image/BKLogoSmall.png" alt="logo" style="width: 80px; height: 40px">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-scrollbar height="calc(100vh - 180px)">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive><component :is="Component"/></keep-alive>
|
||||
</router-view>
|
||||
</el-scrollbar>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import router from '@/router';
|
||||
|
||||
export default {
|
||||
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {
|
||||
selectedTabName: {
|
||||
get() {
|
||||
return this.$store.state.tab.selectedTab
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('setSelectedTab', value)
|
||||
}
|
||||
},
|
||||
tabs: {
|
||||
get() {
|
||||
return this.$store.state.tab.tabs
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('setTabs', value)
|
||||
}
|
||||
},
|
||||
menuList: {
|
||||
get() {
|
||||
return this.$store.state.menu.menuList
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('setMenuList', value)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 点击tab时触发
|
||||
clickTab(tabsPaneContext, event) {
|
||||
const tabName = tabsPaneContext.paneName
|
||||
const tabRouterInfo = this.menuList.filter(f => f.index === tabName)
|
||||
if(tabRouterInfo === undefined || tabRouterInfo === null || tabRouterInfo.length < 1) {
|
||||
router.push({ name: 'nullPage' })
|
||||
} else {
|
||||
router.push({ name: tabRouterInfo[0].router })
|
||||
}
|
||||
},
|
||||
removeTab(tabName) {
|
||||
if(tabName === '0-0') {
|
||||
return // 主页不让关
|
||||
}
|
||||
this.tabs = this.tabs.filter(f => f.name !== tabName)
|
||||
const lastTab = this.tabs[this.tabs.length - 1]
|
||||
const tabRouterInfo = this.menuList.filter(f => f.index === lastTab.name)
|
||||
if(tabRouterInfo === undefined || tabRouterInfo === null || tabRouterInfo.length < 1) {
|
||||
router.push({ name: 'nullPage' })
|
||||
} else {
|
||||
this.$store.commit('setSelectedTab', lastTab.name)
|
||||
router.push({ name: tabRouterInfo[0].router })
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
51
src/view/layout/MainHeader.vue
Normal file
51
src/view/layout/MainHeader.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-page-header :icon="null" class="header">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3" style="color: aliceblue"> WCS设备控制系统 </span>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="flex items-center">菲达宝开</div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<div class="flex items-center rightText" v-if="vuexData.user.userName !== ''" style="font-size: 0.8rem">
|
||||
用户名:{{ vuexData.user.userName }}
|
||||
</div>
|
||||
</template>
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 例如:import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
vuexData: this.$store.state
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
background-color: #4b5cc4;
|
||||
padding: 13px;
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
</style>
|
||||
37
src/view/layout/MainPage.vue
Normal file
37
src/view/layout/MainPage.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
主要框架
|
||||
<template>
|
||||
<div>
|
||||
<MainHeader style="width: 100%; height: 50px"/>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 这里可以导入其他文件(比如:组件,工具 js,第三方插件 js,json 文件,图片文件等等)
|
||||
// 例如:import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import MainHeader from "@/view/layout/MainHeader.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {MainHeader},
|
||||
props: {},
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
43
src/view/page/ContentPage.vue
Normal file
43
src/view/page/ContentPage.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div style="display: flex">
|
||||
<div class="aside">
|
||||
<MainAside/>
|
||||
</div>
|
||||
<div style="width: calc(100vw - 260px);">
|
||||
<MainContent/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import MainAside from "@/view/layout/MainAside.vue";
|
||||
import MainContent from "@/view/layout/MainContent.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {MainContent, MainAside},
|
||||
props: {},
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aside {
|
||||
border-right: #4b5cc455 solid 1px;
|
||||
width: 240px;
|
||||
}
|
||||
</style>
|
||||
139
src/view/page/LoginPage.vue
Normal file
139
src/view/page/LoginPage.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<template>
|
||||
<div class='formBorderMid'>
|
||||
<div class='mainTitle'>WCS 设备控制系统</div>
|
||||
<el-form
|
||||
label-position="left"
|
||||
label-width="70px"
|
||||
:model="loginUser"
|
||||
style="max-width: 460px; text-align: center; margin: auto auto"
|
||||
>
|
||||
<el-form-item label="您的 ID">
|
||||
<el-input v-model="loginUser.userId"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的密码">
|
||||
<el-input v-model="loginUser.userPassword" show-password/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="loginBtn" color="#4b5cc4" @click="onSubmit" :loading="loading">登 录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import userApi from '@/axios/user.js';
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import router from '@/router';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
loginUser: {
|
||||
userId: '',
|
||||
userPassword: ''
|
||||
},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 登陆按钮
|
||||
onSubmit() {
|
||||
if(this.loginUser.userId === '' || this.loginUser.userPassword === '') {
|
||||
ElMessageBox.alert(`账户名或者密码为空`, '登陆失败', {
|
||||
confirmButtonText: '确定'
|
||||
}).catch(()=>{ })
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
userApi.login(this.loginUser).then((response) => {
|
||||
const data = response.data
|
||||
if(data.code !== 0) {
|
||||
// 服务器返回失败
|
||||
ElMessageBox.alert(`登陆失败,信息:${data.msg}`, '登陆失败', {
|
||||
confirmButtonText: '确定'
|
||||
}).catch(()=>{ })
|
||||
} else {
|
||||
// 登陆成功
|
||||
ElMessage({
|
||||
message: '登陆成功',
|
||||
type: 'success',
|
||||
})
|
||||
const returnData = data['returnData']
|
||||
window.sessionStorage.setItem("userName", returnData.userName)
|
||||
let userInfo = { userId: this.loginUser.userId, userName: returnData.userName}
|
||||
this.$store.commit('setUserInfo', userInfo)
|
||||
this.loadMenu(returnData.menu) // 加载菜单
|
||||
router.push({name: 'wcs'})
|
||||
}
|
||||
this.loading = false
|
||||
}).catch((err) => {
|
||||
ElMessageBox.alert(`请求登陆失败,异常信息:${err}`, '登陆失败', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定'
|
||||
}).catch(()=>{ })
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 加载菜单
|
||||
loadMenu(menu) {
|
||||
if(menu === undefined || menu.length < 1) {
|
||||
return
|
||||
}
|
||||
this.$store.commit('setMenuData', menu)
|
||||
let menuList = []
|
||||
menu.forEach((menuItem, index) => {
|
||||
const minor = menuItem.minor
|
||||
if(minor === undefined || minor.length < 1) {
|
||||
return
|
||||
}
|
||||
minor.forEach((minorItem, index) => {
|
||||
menuList.push(minorItem)
|
||||
})
|
||||
})
|
||||
this.$store.commit('setMenuList', menuList)
|
||||
window.sessionStorage.setItem("menuList", JSON.stringify(menuList))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.commit('resetMenuData')
|
||||
this.$store.commit('resetTabs')
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
if(process.env.NODE_ENV === 'development'){
|
||||
this.loginUser.userId = 'developer'
|
||||
this.loginUser.userPassword = 'developer'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.formBorderMid {
|
||||
border: #6b778c50 1px solid;
|
||||
border-radius: 15px;
|
||||
margin: 250px auto auto auto;
|
||||
padding: 30px;
|
||||
width: 500px;
|
||||
}
|
||||
.mainTitle {
|
||||
font-size: 25px;
|
||||
margin: auto auto 45px auto;
|
||||
text-align: center;
|
||||
}
|
||||
.loginBtn {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
32
src/view/page/NullPage.vue
Normal file
32
src/view/page/NullPage.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
87
src/view/tab/accountManage/UserData.vue
Normal file
87
src/view/tab/accountManage/UserData.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<SearchForm v-model="userList" v-model:search-params="searchParams" style="width: 100%"/>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<UserList v-model="userList" v-model:search-params="searchParams" />
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import SearchForm from "@/view/component/userData/SearchForm.vue";
|
||||
import UserList from "@/view/component/userData/UserList.vue";
|
||||
import AddUser from "@/view/component/userData/AddUser.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {AddUser, UserList, SearchForm},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 查找参数,用于传递使用,具体定义在SearchForm组件内
|
||||
searchParams: {
|
||||
// 查询关键字
|
||||
searchStr: '',
|
||||
// 用户状态
|
||||
userStatus: [],
|
||||
// 起止时间
|
||||
timeRange: [],
|
||||
// 分页控件信息
|
||||
page: {
|
||||
// 每页显示的行数
|
||||
pageSize: 50,
|
||||
// 当前页码
|
||||
pageIndex: 1,
|
||||
// 总行数
|
||||
totalRow: 0
|
||||
},
|
||||
},
|
||||
// 任务列表
|
||||
userList: [],
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
175
src/view/tab/accountManage/UserMenuRule.vue
Normal file
175
src/view/tab/accountManage/UserMenuRule.vue
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row style="width: calc(100vw - 270px)">
|
||||
<el-col :span="10">
|
||||
<UserGroupList v-model:edit-user-group-id="editeUserGroupId"
|
||||
@query-base-menu="loadBaseMenu"
|
||||
@query-user-rule="queryUserRule"></UserGroupList>
|
||||
</el-col>
|
||||
<el-col :span="13" :offset="1">
|
||||
<UserMenu v-model:user-group-id="editeUserGroupId" v-model:menu="menu"
|
||||
@query-menu="queryMenu"
|
||||
ref="userMenu"></UserMenu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import UserGroupList from "@/view/component/userMenuRule/UserGroupList.vue";
|
||||
import UserMenu from "@/view/component/userMenuRule/UserMenu.vue";
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import menuApi from "@/axios/menu";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {UserMenu, UserGroupList},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
editeUserGroupId: '',
|
||||
// 菜单树列表
|
||||
menu: [],
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
loadBaseMenu() {
|
||||
if(this.menu === [] || this.menu.length < 1) {
|
||||
this.queryMenu()
|
||||
}
|
||||
},
|
||||
// 加载基础菜单
|
||||
queryMenu() {
|
||||
const searchParams = {
|
||||
page: {
|
||||
pageIndex: 1,
|
||||
pageSize: 1000
|
||||
}
|
||||
}
|
||||
menuApi.getMenuDataWithPage(searchParams).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询菜单信息成功',
|
||||
type: 'success',
|
||||
})
|
||||
const menuList = Object.freeze(responseData["returnData"])
|
||||
this.queryMenuTree(menuList)
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '查询菜单,服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '查询菜单,请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
},
|
||||
// 将菜单列表转换成树形控件
|
||||
queryMenuTree(menuList) {
|
||||
if(menuList === undefined || menuList.length < 1) {
|
||||
this.menu = []
|
||||
return
|
||||
}
|
||||
let menuTree = []
|
||||
menuList.forEach((value)=> {
|
||||
const filterResult = menuTree.filter(f=>f.mainMenuIndex === value.mainMenuIndex)
|
||||
if(filterResult === undefined || filterResult.length < 1) {
|
||||
menuTree.push({
|
||||
mainMenuIndex: value.mainMenuIndex,
|
||||
mainMenuName: value.mainMenuName
|
||||
})
|
||||
}
|
||||
})
|
||||
if(menuTree.length > 1) {
|
||||
menuTree.forEach((value) => {
|
||||
value.minorMenu = [];
|
||||
const filterResult = menuList.filter(f=>f.mainMenuIndex === value.mainMenuIndex)
|
||||
if(filterResult !== undefined && filterResult.length > 0) {
|
||||
filterResult.forEach((minorValue)=>{
|
||||
if(minorValue.menuStatus !== 1) {
|
||||
minorValue.minorMenuName = minorValue.minorMenuName + '(禁用)'
|
||||
}
|
||||
value.minorMenu.push({
|
||||
minorMenuIndex: minorValue.minorMenuIndex,
|
||||
minorMenuName: minorValue.minorMenuName
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 添加到树型控件
|
||||
if(menuTree.length > 1) {
|
||||
let treeItems = []
|
||||
menuTree.forEach((value)=>{
|
||||
let treeItem = {}
|
||||
treeItem.label = `【${value.mainMenuIndex}】${value.mainMenuName}`
|
||||
treeItem.index = value.mainMenuIndex
|
||||
treeItem.children = []
|
||||
value.minorMenu.forEach((minorValue)=>{
|
||||
treeItem.children.push({
|
||||
label: `【${minorValue.minorMenuIndex}】${minorValue.minorMenuName}`,
|
||||
index: minorValue.minorMenuIndex
|
||||
})
|
||||
})
|
||||
treeItems.push(treeItem)
|
||||
})
|
||||
this.menu = treeItems
|
||||
}
|
||||
},
|
||||
// 查询用户权限
|
||||
queryUserRule(groupId) {
|
||||
this.editeUserGroupId = groupId
|
||||
setTimeout(() => {
|
||||
this.$refs.userMenu.queryUserMenu()
|
||||
}, 100)
|
||||
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
90
src/view/tab/dataQuery/ApiAccept.vue
Normal file
90
src/view/tab/dataQuery/ApiAccept.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<SearchForm v-model="apiMessageData" v-model:search-params="searchParams" style="width: 100%" ref="searchForm"></SearchForm>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<ApiAcceptList v-model="apiMessageData"
|
||||
v-model:search-params="searchParams"
|
||||
@page-change="pageChange">
|
||||
</ApiAcceptList>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import SearchForm from "@/view/component/apiAccept/SearchForm.vue";
|
||||
import ApiAcceptList from "@/view/component/apiAccept/ApiAcceptList.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {ApiAcceptList, SearchForm},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 查询出来的数据
|
||||
apiMessageData:[],
|
||||
// 分页控件信息
|
||||
searchParams: {
|
||||
// 查询关键字
|
||||
searchStr: '',
|
||||
// 起止时间
|
||||
timeRange: [],
|
||||
// 分页控件信息
|
||||
page: {
|
||||
// 每页显示的行数
|
||||
pageSize: 20,
|
||||
// 当前页码
|
||||
pageIndex: 1,
|
||||
// 总行数
|
||||
totalRow: 0
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
pageChange(searchParams) {
|
||||
this.$refs.searchForm.searchData(searchParams)
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
90
src/view/tab/dataQuery/ApiRequest.vue
Normal file
90
src/view/tab/dataQuery/ApiRequest.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<SearchForm v-model="apiMessageData" v-model:search-params="searchParams" style="width: 100%" ref="searchForm"></SearchForm>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<ApiRequestList v-model="apiMessageData"
|
||||
v-model:search-params="searchParams"
|
||||
@page-change="pageChange"></ApiRequestList>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import SearchForm from "@/view/component/apiRequest/SearchForm.vue";
|
||||
import ApiRequestList from "@/view/component/apiRequest/ApiRequestList.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {ApiRequestList, SearchForm},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 查询出来的数据
|
||||
apiMessageData:[],
|
||||
// 分页控件信息
|
||||
searchParams: {
|
||||
// 查询关键字
|
||||
searchStr: '',
|
||||
// 起止时间
|
||||
timeRange: [],
|
||||
// 分页控件信息
|
||||
page: {
|
||||
// 每页显示的行数
|
||||
pageSize: 20,
|
||||
// 当前页码
|
||||
pageIndex: 1,
|
||||
// 总行数
|
||||
totalRow: 0
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
pageChange(searchParams) {
|
||||
this.$refs.searchForm.searchData(searchParams)
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
57
src/view/tab/dataQuery/ErrMsg.vue
Normal file
57
src/view/tab/dataQuery/ErrMsg.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
57
src/view/tab/dataQuery/ErrMsgBase.vue
Normal file
57
src/view/tab/dataQuery/ErrMsgBase.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
184
src/view/tab/development/ConfigData.vue
Normal file
184
src/view/tab/development/ConfigData.vue
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<!-- 系统配置项-->
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<el-input class="searchInput" placeholder="输入关键字查询..." v-model="searchParams.searchStr" clearable></el-input>
|
||||
</el-col>
|
||||
<el-button type="primary" @click="searchData" style="margin-left: 10px">查询/刷新</el-button>
|
||||
<el-button type="success" @click="addConfig" style="margin-left: 10px">添加配置</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<h5>系统配置项列表</h5>
|
||||
<el-table :data="configData" border stripe style="width: 100%;" max-height="calc(100vh - 330px)">
|
||||
<el-table-column fixed prop="configKey" label="配置键" width="200px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="configName" label="配置名称" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="configValue" label="配置值" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="configType" label="配置类型" width="200px" align="center" show-overflow-tooltip/>
|
||||
<el-table-column prop="remark" label="备注信息" align="center" show-overflow-tooltip/>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="140">
|
||||
<template #default="scope">
|
||||
<el-button-group class="ml-4">
|
||||
<el-tooltip content="编辑" placement="top" effect="light">
|
||||
<el-button type="primary" size="small" @click="editConfig(scope.row)">
|
||||
<el-icon><Edit/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top" effect="light">
|
||||
<el-button type="danger" size="small" @click="deleteConfig(scope.row)">
|
||||
<el-icon><Delete/></el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-pagination
|
||||
small
|
||||
v-if="searchParams.totalRow > 0"
|
||||
background
|
||||
v-model:page-size="searchParams.pageSize"
|
||||
v-model:current-page="searchParams.pageIndex"
|
||||
:page-sizes="[50, 100, 200, 500]"
|
||||
layout="prev, pager, next, jumper, sizes, total"
|
||||
:total="searchParams.totalRow"
|
||||
@size-change="searchData"
|
||||
@current-change="searchData"
|
||||
/>
|
||||
</el-row>
|
||||
<!--编辑配置项弹窗-->
|
||||
<EditConfig v-model="showEdit" :config-data="editConfigData"></EditConfig>
|
||||
<!-- 添加配置项弹窗-->
|
||||
<AddConfig v-model="showAdd" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import configApi from '@/axios/config'
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import {Delete, Edit} from "@element-plus/icons-vue";
|
||||
import EditConfig from "@/view/component/configData/EditConfig.vue";
|
||||
import AddConfig from "@/view/component/configData/AddConfig.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {AddConfig, EditConfig, Delete, Edit},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 查询参数
|
||||
searchParams: {
|
||||
// 查询字符串
|
||||
searchStr: '',
|
||||
// 每页显示的行数
|
||||
pageSize: 50,
|
||||
// 当前页码
|
||||
pageIndex: 1,
|
||||
// 总行数
|
||||
totalRow: 0
|
||||
},
|
||||
// 配置项列表
|
||||
configData: [],
|
||||
// 是否展示编辑配置项弹窗
|
||||
showEdit: false,
|
||||
// 传入编辑配置项的数据
|
||||
editConfigData: { },
|
||||
// 是否展示添加配置项弹窗
|
||||
showAdd: false
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
// 模糊查询配置项
|
||||
searchData() {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
configApi.getConfigWithPage(this.searchParams).then((response) => {
|
||||
const responseData = Object.freeze(response.data)
|
||||
if(responseData.code !== 0) {
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.configData = responseData["returnData"]
|
||||
this.searchParams.totalRow = parseInt(responseData.msg)
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex => {
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
}))
|
||||
},
|
||||
// 编辑配置项
|
||||
editConfig(row) {
|
||||
this.editConfigData = {
|
||||
configKey: row.configKey,
|
||||
configName: row.configName,
|
||||
configValue: row.configValue,
|
||||
configType: row.configType,
|
||||
remark: row.remark
|
||||
}
|
||||
this.showEdit = true
|
||||
},
|
||||
// 删除配置项
|
||||
deleteConfig(row) {
|
||||
|
||||
},
|
||||
// 添加配置
|
||||
addConfig() {
|
||||
this.showAdd = true
|
||||
}
|
||||
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
57
src/view/tab/development/DbData.vue
Normal file
57
src/view/tab/development/DbData.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
99
src/view/tab/development/MenuData.vue
Normal file
99
src/view/tab/development/MenuData.vue
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<SearchForm v-model="menuList"
|
||||
v-model:search-params="searchParams"
|
||||
@add-menu="addMenu"
|
||||
style="width: 100%" ref="searchForm"></SearchForm>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<MenuList
|
||||
v-model="menuList"
|
||||
v-model:search-params="searchParams"
|
||||
@page-change="pageChange"></MenuList>
|
||||
</el-row>
|
||||
<!-- 添加菜单弹窗-->
|
||||
<AddMenu v-model="showAddMenu" :menu-list="menuList"></AddMenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import SearchForm from "@/view/component/menuData/SearchForm.vue";
|
||||
import MenuList from "@/view/component/menuData/MenuList.vue";
|
||||
import AddMenu from "@/view/component/menuData/AddMenu.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {AddMenu, MenuList, SearchForm},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 查找参数,用于传递使用,具体定义在SearchForm组件内
|
||||
searchParams: {
|
||||
// 分页控件信息
|
||||
page: {
|
||||
// 每页显示的行数
|
||||
pageSize: 50,
|
||||
// 当前页码
|
||||
pageIndex: 1,
|
||||
// 总行数
|
||||
totalRow: 0
|
||||
},
|
||||
},
|
||||
// 任务列表
|
||||
menuList: [],
|
||||
// 添加菜单的弹窗
|
||||
showAddMenu: false
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
pageChange(searchParams) {
|
||||
this.$refs.searchForm.searchData(searchParams)
|
||||
},
|
||||
// 添加菜单弹窗
|
||||
addMenu() {
|
||||
this.showAddMenu = true
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
57
src/view/tab/development/PLCData.vue
Normal file
57
src/view/tab/development/PLCData.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
91
src/view/tab/equipmentManage/LocationData.vue
Normal file
91
src/view/tab/equipmentManage/LocationData.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<SearchForm v-model="locationList" v-model:search-params="searchParams" style="width: 100%" ref="searchForm"></SearchForm>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<LocationList v-model="locationList"
|
||||
v-model:search-params="searchParams"
|
||||
@page-change="pageChange">
|
||||
</LocationList>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import SearchForm from "@/view/component/locationData/SearchForm.vue";
|
||||
import LocationList from "@/view/component/locationData/LocationList.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {LocationList, SearchForm},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 查找参数,用于传递使用,具体定义在SearchForm组件内
|
||||
searchParams: {
|
||||
// 查询关键字
|
||||
searchStr: '',
|
||||
// 点位类型
|
||||
locationStatus: [],
|
||||
// 分页控件信息
|
||||
page: {
|
||||
// 每页显示的行数
|
||||
pageSize: 50,
|
||||
// 当前页码
|
||||
pageIndex: 1,
|
||||
// 总行数
|
||||
totalRow: 0
|
||||
},
|
||||
},
|
||||
// 点位信息
|
||||
locationList: []
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
pageChange(searchParams) {
|
||||
this.$refs.searchForm.searchData(searchParams)
|
||||
}
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
57
src/view/tab/equipmentManage/SocketData.vue
Normal file
57
src/view/tab/equipmentManage/SocketData.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
58
src/view/tab/equipmentManage/StackerData.vue
Normal file
58
src/view/tab/equipmentManage/StackerData.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<!-- 堆垛机管理-->
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
57
src/view/tab/systemManage/SettingData.vue
Normal file
57
src/view/tab/systemManage/SettingData.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
58
src/view/tab/systemStatus/ContainerStatus.vue
Normal file
58
src/view/tab/systemStatus/ContainerStatus.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<!-- 智能货柜状态-->
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
58
src/view/tab/systemStatus/ConveyStatus.vue
Normal file
58
src/view/tab/systemStatus/ConveyStatus.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<!-- 输送机状态-->
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
106
src/view/tab/systemStatus/RunningInfo.vue
Normal file
106
src/view/tab/systemStatus/RunningInfo.vue
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<DownloadLog style="margin-left: 10px" v-model="sysMsg"/>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<h5>系统运行信息</h5>
|
||||
<el-scrollbar style="height: calc(100vh - 430px); width: calc(100vw - 270px)">
|
||||
<el-input
|
||||
v-model="sysMsg"
|
||||
autosize
|
||||
type="textarea"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
import sysApi from "@/axios/system"
|
||||
import DownloadLog from "@/view/component/runningInfo/DownloadLog.vue";
|
||||
import {ElLoading, ElMessage} from "element-plus";
|
||||
import formatterTime from "@/plugins/formatter/formatter.time";
|
||||
import formatterMsglv from "@/plugins/formatter/formatter.msglv"
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {DownloadLog},
|
||||
props: {},
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 查询
|
||||
searchParams: {
|
||||
// 查询字符串
|
||||
searchStr: '',
|
||||
// 每页显示的行数
|
||||
pageSize: 50,
|
||||
// 当前页码
|
||||
pageIndex: 1,
|
||||
// 总行数
|
||||
totalRow: 0
|
||||
},
|
||||
// 信息数据
|
||||
sysMsg: '',
|
||||
|
||||
showDownLoad: false,
|
||||
|
||||
// -------------------------
|
||||
|
||||
formatterTime: formatterTime.formatCellValueTime,
|
||||
formatterMsglv: formatterMsglv.formatMsgLv
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
searchData() {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
})
|
||||
this.sysInfo = []
|
||||
sysApi.getSysMsgWithPage(this.searchParams).then((response) => {
|
||||
const responseData = response.data
|
||||
if (responseData.code === 0) {
|
||||
ElMessage({
|
||||
message: '查询成功',
|
||||
type: 'success',
|
||||
})
|
||||
// 正确请求,展示数据
|
||||
this.searchParams.totalRow = parseInt(responseData.msg)
|
||||
// 正确请求,展示数据
|
||||
this.sysInfo = Object.freeze(responseData["returnData"])
|
||||
} else {
|
||||
// 服务报错
|
||||
ElMessage({
|
||||
message: '服务器返回失败:' + responseData.msg,
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
loading.close()
|
||||
}).catch((ex) => {
|
||||
// 通讯报错
|
||||
ElMessage({
|
||||
message: '请求服务器失败:' + ex,
|
||||
type: 'error',
|
||||
})
|
||||
loading.close()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
58
src/view/tab/systemStatus/ShuttleStatus.vue
Normal file
58
src/view/tab/systemStatus/ShuttleStatus.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<!-- 穿梭车状态-->
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
57
src/view/tab/systemStatus/StackerStatus.vue
Normal file
57
src/view/tab/systemStatus/StackerStatus.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
97
src/view/tab/taskManage/WcsTask.vue
Normal file
97
src/view/tab/taskManage/WcsTask.vue
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<SearchForm v-model="taskList" v-model:searchParams="searchParams" style="width: 100%" ref="searchForm"></SearchForm>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<WcsTaskList
|
||||
v-model="taskList"
|
||||
v-model:searchParams="searchParams"
|
||||
@page-change="pageChange">
|
||||
</WcsTaskList>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import 《组件名称》 from '《组件路径》 ';
|
||||
|
||||
import SearchForm from "@/view/component/wcsTask/SearchForm.vue";
|
||||
import WcsTaskList from "@/view/component/wcsTask/WcsTaskList.vue";
|
||||
|
||||
export default {
|
||||
// import 引入的组件需要注入到对象中才能使用
|
||||
components: {WcsTaskList, SearchForm},
|
||||
props: [],
|
||||
emits: [],
|
||||
data() {
|
||||
// 这里存放数据
|
||||
return {
|
||||
// 查找参数,用于传递使用,具体定义在SearchForm组件内
|
||||
searchParams: {
|
||||
// 查询关键字
|
||||
searchStr: '',
|
||||
// 任务类型
|
||||
taskType: [],
|
||||
// 任务状态
|
||||
taskStatus: [],
|
||||
// 起止时间
|
||||
timeRange: [],
|
||||
// 分页控件信息
|
||||
page: {
|
||||
// 每页显示的行数
|
||||
pageSize: 50,
|
||||
// 当前页码
|
||||
pageIndex: 1,
|
||||
// 总行数
|
||||
totalRow: 0
|
||||
},
|
||||
},
|
||||
// 任务列表
|
||||
taskList: [],
|
||||
}
|
||||
},
|
||||
// 计算属性 类似于 data 概念
|
||||
computed: {},
|
||||
// 监控 data 中的数据变化
|
||||
watch: {},
|
||||
// 方法集合
|
||||
methods: {
|
||||
pageChange(searchParams) {
|
||||
this.$refs.searchForm.searchData(searchParams)
|
||||
},
|
||||
},
|
||||
// 组合式 API
|
||||
setup() {
|
||||
},
|
||||
// 创建之前
|
||||
beforeCreate() {
|
||||
},
|
||||
// 创建完成(可以访问 this 实例)
|
||||
created() {
|
||||
},
|
||||
// 生命周期 - 挂载之前
|
||||
beforeMount() {
|
||||
},
|
||||
// 生命周期 - 挂载完成(可以访问 DOM 元素)
|
||||
mounted() {
|
||||
},
|
||||
// 更新之前
|
||||
beforeUpdate() {
|
||||
},
|
||||
// 更新之后
|
||||
updated() {
|
||||
},
|
||||
// 销毁之前
|
||||
beforeUnmount() {
|
||||
},
|
||||
// 销毁完成
|
||||
unmounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user