接口嵌套

This commit is contained in:
bestlee 2026-06-24 17:16:13 +08:00
parent 3da01972a3
commit d784e10bcf
15 changed files with 1600 additions and 18 deletions

311
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^1.18.1",
"pinia": "^3.0.4",
"vant": "^4.9.24",
"vue": "^3.5.38",
@ -1214,6 +1215,18 @@
"node": ">=0.4.0"
}
},
"node_modules/agent-base": {
"version": "6.0.2",
"resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-6.0.2.tgz",
"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
"license": "MIT",
"dependencies": {
"debug": "4"
},
"engines": {
"node": ">= 6.0.0"
}
},
"node_modules/amfe-flexible": {
"version": "2.2.1",
"resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
@ -1263,6 +1276,24 @@
"url": "https://github.com/sponsors/sxzz"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/axios": {
"version": "1.18.1",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.18.1.tgz",
"integrity": "sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.16.0",
"form-data": "^4.0.5",
"https-proxy-agent": "^5.0.1",
"proxy-from-env": "^2.1.0"
}
},
"node_modules/baseline-browser-mapping": {
"version": "2.10.38",
"resolved": "https://registry.npmmirror.com/baseline-browser-mapping/-/baseline-browser-mapping-2.10.38.tgz",
@ -1335,6 +1366,19 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/call-bind-apply-helpers": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001799",
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
@ -1371,6 +1415,18 @@
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"license": "MIT",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/confbox": {
"version": "0.2.4",
"resolved": "https://registry.npmmirror.com/confbox/-/confbox-0.2.4.tgz",
@ -1409,7 +1465,6 @@
"version": "4.4.3",
"resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
"dev": true,
"license": "MIT",
"dependencies": {
"ms": "^2.1.3"
@ -1466,6 +1521,15 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"license": "MIT",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/detect-libc": {
"version": "2.1.2",
"resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-2.1.2.tgz",
@ -1476,6 +1540,20 @@
"node": ">=8"
}
},
"node_modules/dunder-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.1",
"es-errors": "^1.3.0",
"gopd": "^1.2.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/electron-to-chromium": {
"version": "1.5.377",
"resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.377.tgz",
@ -1505,6 +1583,51 @@
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/es-define-property": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-errors": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-object-atoms": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
"integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-set-tostringtag": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"get-intrinsic": "^1.2.6",
"has-tostringtag": "^1.0.2",
"hasown": "^2.0.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/escalade": {
"version": "3.2.0",
"resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
@ -1557,6 +1680,42 @@
}
}
},
"node_modules/follow-redirects": {
"version": "1.16.0",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.16.0.tgz",
"integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"license": "MIT",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.6",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.6.tgz",
"integrity": "sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"es-set-tostringtag": "^2.1.0",
"hasown": "^2.0.4",
"mime-types": "^2.1.35"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@ -1572,6 +1731,15 @@
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
}
},
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/gensync": {
"version": "1.0.0-beta.2",
"resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
@ -1582,12 +1750,113 @@
"node": ">=6.9.0"
}
},
"node_modules/get-intrinsic": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
"es-define-property": "^1.0.1",
"es-errors": "^1.3.0",
"es-object-atoms": "^1.1.1",
"function-bind": "^1.1.2",
"get-proto": "^1.0.1",
"gopd": "^1.2.0",
"has-symbols": "^1.1.0",
"hasown": "^2.0.2",
"math-intrinsics": "^1.1.0"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
"license": "MIT",
"dependencies": {
"dunder-proto": "^1.0.1",
"es-object-atoms": "^1.0.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/gopd": {
"version": "1.2.0",
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/has-symbols": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/has-tostringtag": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
"license": "MIT",
"dependencies": {
"has-symbols": "^1.0.3"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/hasown": {
"version": "2.0.4",
"resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.4.tgz",
"integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/hookable": {
"version": "5.5.3",
"resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
"integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
"license": "MIT"
},
"node_modules/https-proxy-agent": {
"version": "5.0.1",
"resolved": "https://registry.npmmirror.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
"license": "MIT",
"dependencies": {
"agent-base": "6",
"debug": "4"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/is-docker": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-3.0.0.tgz",
@ -2014,6 +2283,36 @@
"url": "https://github.com/sponsors/sxzz"
}
},
"node_modules/math-intrinsics": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"license": "MIT",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mitt": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
@ -2063,7 +2362,6 @@
"version": "2.1.3",
"resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
"dev": true,
"license": "MIT"
},
"node_modules/muggle-string": {
@ -2271,6 +2569,15 @@
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/proxy-from-env": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
"integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
"license": "MIT",
"engines": {
"node": ">=10"
}
},
"node_modules/quansync": {
"version": "0.2.11",
"resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.11.tgz",

View File

@ -11,6 +11,7 @@
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^1.18.1",
"pinia": "^3.0.4",
"vant": "^4.9.24",
"vue": "^3.5.38",

15
src/api/apply.js Normal file
View File

@ -0,0 +1,15 @@
import axios from 'axios';
// 已审批列表
export function applyListApi(params) {
return axios.get('/api/chain-remove-applies', {params});
}
// 待审批列表
export function waitListApi(params) {
return axios.get('/api/chain-remove-applies/my-tasks', {params});
}
// 详情
export function detailsApi(id) {
return axios.get('/api/chain-remove-applies/'+id);
}

7
src/api/login.js Normal file
View File

@ -0,0 +1,7 @@
import axios from 'axios';
// 用户登录
export function loginApi(data) {
return axios.post('/api/auth/login', data);
}

47
src/api/request.js Normal file
View File

@ -0,0 +1,47 @@
import axios from 'axios';
import router from '@/router'
import { showNotify } from 'vant';
const url = 'http://192.168.0.230';
axios.defaults.baseURL = url;
axios.defaults.withCredentials = false;
axios.defaults.timeout = 200000;
// 请求拦截器
axios.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token');
if (token) {
if (!config.headers) {
config.headers = {};
}
config.headers.Authorization = `Bearer ` + token;
config.headers['Content-Type'] =
'application/json;application/vnd.ms-excel;application/json;charset=UTF-8';
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 响应拦截器
axios.interceptors.response.use(
(response) => {
const res = response.data;
if (res.code === 200) {
return res;
}
return res;
},
(error) => {
if (error.response.status === 401) {
showNotify({ type: 'danger', message: '账号已过期,请重新登录!' });
router.push({ path: '/login' });
} else {
showNotify({ type: 'danger', message: error.response.data.message || '服务错误' });
}
return Promise.reject(error);;
}
);

View File

@ -89,3 +89,15 @@ body {
max-width: 1280px;
margin: 0 auto;
}
.global-loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.9);
z-index: 9999;
}

View File

@ -4,6 +4,8 @@ import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import 'amfe-flexible'
import 'vant/lib/index.css'
import '@/api/request';
const app = createApp(App)

View File

@ -26,20 +26,36 @@ const router = createRouter({
// 动态路由(需要权限的页面)
// 注意:这些路由不会在一开始注册,而是在守卫中动态添加
const asyncRoutes = [
// 列表
{
path: '/applyList',
name: 'applyList',
component: () => import('../views/applyList/index.vue'),
meta: {
title: '申请列表',
},
},
// 详情
{
path: '/detail',
name: 'detail',
component: () => import('../views/applyList/detail.vue'),
},
// 联锁详情
{
path: '/lockDetail',
name: 'lockDetail',
component: () => import('../views/applyList/lockDetail.vue'),
},
// 待审批列表
{
path: '/waitList',
name: 'waitList',
component: () => import('../views/applyList/waitList.vue'),
},
]
// 标志位:是否已添加动态路由
let isRoutesAdded = false
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
const token = localStorage.getItem('token') || '123'
if (token) {
// 关键:有 token 但业务路由还没挂载 => 动态添加(仅一次)
if (!isRoutesAdded) {

View File

@ -0,0 +1,272 @@
<script setup>
import { ref,onMounted } from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { showNotify } from 'vant'
import { detailsApi } from '@/api/apply';
const route = useRoute()
const loading = ref(false);
const params = ref(null)
const info = ref(null)
//
const statusList = ref([
{text:'草稿',value:0},
{text:'申请中(安全员/技术员)',value:1},
{text:'申请中(车间主任)',value:2},
{text:'申请中(车间值班人员)',value:101},
{text:'各部门会签中',value:3},
{text:'审批中',value:4},
{text:'通过',value:5},
{text:'已关闭',value:97},
{text:'已撤回',value:98},
{text:'已驳回',value:99},
]);
//
const matchOptions = (arr,val) => {
const target = arr.find(item => item.value == val);
return target ? target.text : '';
}
//
const jumpTo = (val) => {
//
if(val===0){
router.push({
path: '/applyList',
})
}
//
if(val===1){
router.push({
path: '/waitList',
})
}
//
if(val===2){
router.push({
path: '/lockDetail',
query: { id: params.value.id, type: params.value.type },
})
}
}
//
const agree = () => {
showNotify({ type: 'success', message: '同意成功' });
}
//
const getDetail = async () => {
loading.value = true;
try {
const res = await detailsApi(params.value?.id);
info.value = res.data;
if(res.data?.status>=1 && res.data?.status<=4){
let allEmpty = res.data?.draft_apply_steps.every(item => item.draft_cosign_items.length === 0);
if(res.data?.draft_apply_steps?.length && !allEmpty){
info.value.steps = res.data?.draft_apply_steps;
}else{
info.value.steps = res.data?.apply_steps;
}
}else{
info.value.steps = res.data?.apply_steps;
}
} finally {
loading.value = false;
}
}
onMounted(() => {
if(route.query){
params.value = route.query;
getDetail();
}
})
</script>
<template>
<!-- 全屏加载遮罩层 -->
<div v-if="loading" class="global-loading-overlay">
<van-loading size="30px" color="#1989fa" vertical></van-loading>
</div>
<div class="main">
<div class="tab-box">
<p class="tab" :class="{'active':params?.type==='finish'}" @click="jumpTo(0)">已审批</p>
<p class="tab" :class="{'active':params?.type==='wait'}" @click="jumpTo(1)">待审批</p>
</div>
<template v-if="info">
<div class="detail">
<div class="row">
<div v-if="info.template_id==4">
<p v-if="info.status==1">申请中车间值班人员</p>
<p v-else>{{matchOptions(statusList,info.status)}}</p>
</div>
<div v-else>
<p v-if="info.status==5 || info.status==100">通过</p>
<p v-else>{{matchOptions(statusList,info.status)}}</p>
</div>
<p>申请摘除数量({{info.chain_count}})</p>
</div>
<div class="row">
<p>岗位{{info.chain_position}}</p>
<p>类型{{info.template_name}}</p>
</div>
<div class="row">
<p>摘除理由{{info.reasons}}</p>
</div>
<div class="row">
<p>计划摘除时间{{info.plan_remove_time?.slice(0,16)}}</p>
</div>
<div class="row">
<p>计划恢复时间{{info.plan_recover_time?.slice(0,16)}}</p>
</div>
<div class="row col">
<p class="blue-color">风险辨识</p>
<p>{{info.risk_description}}</p>
</div>
<div class="row col">
<p class="blue-color">安全措施</p>
<p>{{info.safety_measures}}</p>
</div>
<div class="row col">
<div class="timeline">
<div class="timeline-item" v-if="info.template_id==4">
<div class="left">
<p class="timeline-dot"></p>
<div class="txt">班长</div>
<div class="txt">{{info?.apply_user?.realname}}</div>
</div>
</div>
<div class="timeline-item" v-if="info.template_id>=1 && info.template_id<=3">
<div class="left">
<p class="timeline-dot"></p>
<div class="txt">车间工程师</div>
<div class="txt">{{info?.apply_user?.realname}}</div>
</div>
</div>
<template v-for="(item, index) in info?.steps || []" :key="index">
<template v-for="(sItem,sIndex) in (item.cosigns || item.cosign_items || item.draft_cosign_items)" :key="sIndex">
<div class="timeline-item">
<div class="left">
<p class="timeline-dot"></p>
<div class="txt">{{sItem.dept_name}}</div>
<div class="txt">{{sItem.user_name}}</div>
</div>
<div class="txt" v-if="sItem.signed_at">{{(sItem.signed_at)?.slice(0,16)}}</div>
</div>
</template>
</template>
</div>
</div>
</div>
<div class="btns">
<p class="btn" @click="jumpTo(params?.type==='finish'?0:1)">返回列表</p>
<p class="btn" @click="jumpTo(2)">联锁详情</p>
<p class="btn" v-if="params?.type==='wait'" @click="agree">同意</p>
<p class="btn" v-if="params?.type==='wait'">驳回</p>
</div>
</template>
<template v-else>
<van-empty description="暂无数据" />
</template>
</div>
</template>
<style scoped>
.blue-color {
color: #1989fa;
}
.main {
height: 100vh;
padding: 12px;
overflow: hidden;
font-size: 14px;
}
/* tab切换 */
.tab-box {
display: flex;
border: 1px solid #1989fa;
}
.tab {
width: 50%;
padding: 5px 0;
text-align: center;
font-size: 16px;
color: #1989fa;
}
.tab.active {
background-color: #1989fa;
color: #fff;
}
/* 详情 */
.detail {
margin-top: 12px;
height: calc(100vh - 120px);
overflow-y: auto;
border: 1px solid #f1f1f1;
border-radius: 2px;
padding: 10px;
}
.detail .row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
gap: 10px;
}
.detail .col {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.detail .row:first-child {
margin-top: 0;
}
/* 底部按钮 */
.btns {
margin-top: 12px;
display: flex;
gap: 12px;
}
.btns .btn {
width: 100%;
text-align: center;
padding: 8px 0;
border: 1px solid #eee;
border-radius: 2px;
}
/* 时间线 */
.timeline {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
}
.timeline:before {
content: '';
width: 1px;
height: calc(100% - 6px);
background: #1989fa;
position: absolute;
top: 3px;
left: 6px;
}
.timeline-item {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.timeline-item .left {
display: flex;
align-items: center;
}
/* 圆点 */
.timeline-dot {
width: 12px;
height: 12px;
background: #1989fa;
border-radius: 50%;
margin-right: 10px;
}
</style>

View File

@ -1,12 +1,213 @@
<script setup>
import { ref,onMounted } from 'vue'
import router from '@/router'
import { applyListApi } from '@/api/apply';
const loading = ref(false);
const isAll = ref('1');
const currentPage = ref(1);
const total = ref(0);
//
const statusList = ref([
{text:'草稿',value:0},
{text:'申请中(安全员/技术员)',value:1},
{text:'申请中(车间主任)',value:2},
{text:'申请中(车间值班人员)',value:101},
{text:'各部门会签中',value:3},
{text:'审批中',value:4},
{text:'通过',value:5},
{text:'已关闭',value:97},
{text:'已撤回',value:98},
{text:'已驳回',value:99},
]);
const list = ref([])
//
const matchOptions = (arr,val) => {
const target = arr.find(item => item.value == val);
return target ? target.text : '';
}
//
const radioChange = (val) => {
isAll.value = val;
currentPage.value = 1;
getList();
}
//
const jumpTo = (type,item) => {
//
if(type==='wait'){
router.push({
path: '/waitList',
})
}
//
if(type==='detail'){
router.push({
path: '/detail',
query: {id: item.id,type: 'finish'}
})
}
}
//
const getList = async () => {
loading.value = true;
try {
const res = await applyListApi({
org_id: 1,
choice_status: Number(isAll.value),
remove_type: [],
status: [],
sort: JSON.stringify({'plan_remove_time':'','plan_recover_time':'','status_updated_at':''}),
page: currentPage.value,
per_page: 20
});
list.value = res.data.list;
total.value = res.data.meta.pagination.total;
} finally {
loading.value = false;
}
}
//
const pageChange = (val) => {
currentPage.value = val;
getList();
}
onMounted(() => {
getList();
});
</script>
<template>
<div class="login">申请列表</div>
<!-- 全屏加载遮罩层 -->
<div v-if="loading" class="global-loading-overlay">
<van-loading size="30px" color="#1989fa" vertical></van-loading>
</div>
<div class="main">
<div class="tab-box">
<p class="tab active">已审批</p>
<p class="tab" @click="jumpTo('wait',null)">待审批</p>
</div>
<div class="radio-box">
<van-radio-group v-model="isAll" direction="horizontal" @change="radioChange">
<van-radio name="1">只显示未关闭</van-radio>
<van-radio name="0">显示全部</van-radio>
</van-radio-group>
</div>
<div class="list">
<template v-if="list.length">
<div class="item" v-for="(item, index) in list" :key="index">
<div class="row">
<p>类型{{item.template_name}}</p>
<p>申请摘除数量({{item.chain_count}})</p>
</div>
<div class="row">
<div class="blue-color bold">
<div v-if="item.template_id==4">
<p v-if="item.status==1">申请中车间值班人员</p>
<p v-else>{{matchOptions(statusList,item.status)}}</p>
</div>
<div v-else>
<p v-if="item.status==5 || item.status==100">通过</p>
<p v-else>{{matchOptions(statusList,item.status)}}</p>
</div>
</div>
<p>岗位{{item.chain_position}}</p>
</div>
<div class="row">
<p>申请时间{{item.created_at?.slice(0,16)}}</p>
<p>申请人{{item?.apply_user?.realname}}</p>
</div>
<div class="row">
<p>计划摘除时间{{item.plan_remove_time?.slice(0,16)}}</p>
<p class="btn" @click="jumpTo('detail',item)">查看</p>
</div>
</div>
</template>
<template v-else>
<van-empty description="暂无数据" />
</template>
</div>
<van-pagination
v-if="list.length"
v-model="currentPage"
:total-items="total"
:show-page-size="3"
:items-per-page="20"
force-ellipses
@change="pageChange"
/>
</div>
</template>
<style scoped>
.login {
:deep(.van-radio-group--horizontal) {
justify-content: space-around;
}
.blue-color {
color: #1989fa;
}
.bold {
font-weight: bold;
}
.main {
height: 100vh;
padding: 12px;
overflow: hidden;
font-size: 14px;
}
/* tab切换 */
.tab-box {
display: flex;
border: 1px solid #1989fa;
}
.tab {
width: 50%;
padding: 5px 0;
text-align: center;
font-size: 16px;
color: #1989fa;
}
.tab.active {
background-color: #1989fa;
color: #fff;
}
/* 单选框 */
.radio-box {
padding: 12px 0;
}
/* 列表 */
.list {
height: calc(100vh - 155px);
margin-bottom: 12px;
overflow-y: auto;
}
.list .item {
border: 1px solid #f1f1f1;
border-radius: 4px;
padding: 10px;
margin-top: 12px;
}
.list .item:first-child {
margin-top: 0;
}
.list .item .row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
gap: 10px;
}
.list .item .row:first-child {
margin-top: 0;
}
.btn {
background-color: #1989fa;
color: #fff;
padding: 4px 15px;
border-radius: 2px;
}
</style>

View File

@ -0,0 +1,215 @@
<script setup>
import { ref, onMounted } from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { showNotify } from 'vant'
import { detailsApi } from '@/api/apply';
const route = useRoute()
const loading = ref(false);
const params = ref(null)
const info = ref(null)
const list = ref([{}])
//
const jumpTo = (val) => {
//
if(val===0){
router.push({
path: '/applyList',
})
}
//
if(val===1){
router.push({
path: '/waitList',
})
}
//
if(val===3){
router.push({
path: '/detail',
query: { id: params.value.id, type: params.value.type },
})
}
}
//
const getOrg = (data) => {
if(data && data.length){
let orgList = [];
for(let item of data){
orgList.push(item.label);
}
return orgList.join('/');
}
return '';
}
//
const agree = () => {
showNotify({ type: 'success', message: '同意成功' });
}
//
const getDetail = async () => {
loading.value = true;
try {
const res = await detailsApi(params.value?.id);
info.value = res.data;
console.log(info.value);
} finally {
loading.value = false;
}
}
onMounted(() => {
if(route.query){
params.value = route.query;
getDetail();
}
})
</script>
<template>
<!-- 全屏加载遮罩层 -->
<div v-if="loading" class="global-loading-overlay">
<van-loading size="30px" color="#1989fa" vertical></van-loading>
</div>
<div class="main">
<div class="tab-box">
<p class="tab" :class="{'active':params?.type==='finish'}" @click="jumpTo(0)">已审批</p>
<p class="tab" :class="{'active':params?.type==='wait'}" @click="jumpTo(1)">待审批</p>
</div>
<template v-if="list.length">
<div class="detail">
<div class="item" v-for="(item, index) in info?.items" :key="index">
<div class="row">
<p><span class="order">{{index+1}}</span>联锁名称二甲苯蒸馏釜冷凝器下料温度高高联锁</p>
</div>
<div class="row">
<p>层级{{getOrg(info?.organizations)}}</p>
<p>表决方式{{ item?.chain?.condition_num || '' }} {{ item?.chain?.choice_num || '' }}</p>
</div>
<div class="row">
<div class="node">
<p>仪表位号</p>
<table class="table">
<tr>
<th style="width: 65px;">仪表位号</th>
<th>单位</th>
<th style="width: 70px;">联锁值()</th>
<th style="width: 70px;">联锁值()</th>
</tr>
<tr v-for="(node,nodeIndex) in item?.chain?.nodes" :key="nodeIndex">
<td class="td">{{node.real_time_node_name}}</td>
<td class="td">{{node?.node?.unit}}</td>
<td class="td">{{node?.l}}</td>
<td class="td">{{node?.h}}</td>
</tr>
</table>
</div>
</div>
<div class="row">
<p>联锁动作{{item?.chain?.action.join(',')}}</p>
</div>
</div>
</div>
<div class="btns">
<p class="btn" @click="jumpTo(params?.type==='finish'?0:1)">返回列表</p>
<p class="btn" @click="jumpTo(3)">返回申请</p>
<p class="btn" v-if="params?.type==='wait'" @click="agree">同意</p>
<p class="btn" v-if="params?.type==='wait'">驳回</p>
</div>
</template>
<template v-else>
<van-empty description="暂无数据" />
</template>
</div>
</template>
<style scoped>
.main {
height: 100vh;
padding: 12px;
overflow: hidden;
font-size: 14px;
}
/* tab切换 */
.tab-box {
display: flex;
border: 1px solid #1989fa;
}
.tab {
width: 50%;
padding: 5px 0;
text-align: center;
font-size: 16px;
color: #1989fa;
}
.tab.active {
background-color: #1989fa;
color: #fff;
}
/* 详情 */
.detail {
margin-top: 12px;
height: calc(100vh - 120px);
overflow-y: auto;
}
.detail .item {
border: 1px solid #f1f1f1;
border-radius: 4px;
padding: 10px;
margin-top: 12px;
}
.detail .item:first-child {
margin-top: 0;
}
.detail .item .row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
gap: 10px;
}
.detail .item .row:first-child {
margin-top: 0;
}
.detail .item .order {
margin-right: 10px;
}
.node {
width: 100%;
display: flex;
align-items: flex-start;
gap: 10px;
}
.table {
flex: 1;
margin-top: -3px;
}
.table td {
text-align: center;
font-size: 13px;
}
.table .td {
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
word-break: break-all;
}
/* 底部按钮 */
.btns {
margin-top: 12px;
display: flex;
gap: 12px;
}
.btns .btn {
width: 100%;
text-align: center;
padding: 8px 0;
border: 1px solid #eee;
border-radius: 2px;
}
</style>

View File

@ -0,0 +1,177 @@
<script setup>
import { ref,onMounted } from 'vue'
import router from '@/router'
import { waitListApi } from '@/api/apply';
const loading = ref(false);
//
const statusList = ref([
{text:'草稿',value:0},
{text:'申请中(安全员/技术员)',value:1},
{text:'申请中(车间主任)',value:2},
{text:'申请中(车间值班人员)',value:101},
{text:'各部门会签中',value:3},
{text:'审批中',value:4},
{text:'通过',value:5},
{text:'已撤回',value:98},
{text:'已驳回',value:99},
]);
const list = ref([])
//
const matchOptions = (arr,val) => {
const target = arr.find(item => item.value == val);
return target ? target.text : '';
}
//
const jumpTo = (type,item) => {
//
if(type==='finish'){
router.push({
path: '/applyList',
})
}
//
if(type==='detail'){
router.push({
path: '/detail',
query: {id: item.id,type: 'wait'}
})
}
}
//
const getList = async () => {
loading.value = true;
try {
const res = await waitListApi({
org_id: 1,
remove_type: [],
status: [],
sort: JSON.stringify({'plan_remove_time':'','plan_recover_time':'','status_updated_at':''}),
page: 1,
per_page: 9999
});
res.data?.initiated.forEach((item) => { item.type = 'myself'; });
res.data?.pending.forEach((item) => { item.type = 'pending'; });
list.value = res.data?.initiated.concat(res.data?.pending);
} finally {
loading.value = false;
}
}
onMounted(() => {
getList();
});
</script>
<template>
<!-- 全屏加载遮罩层 -->
<div v-if="loading" class="global-loading-overlay">
<van-loading size="30px" color="#1989fa" vertical></van-loading>
</div>
<div class="main">
<div class="tab-box">
<p class="tab" @click="jumpTo('finish',null)">已审批</p>
<p class="tab active">待审批</p>
</div>
<div class="list">
<template v-if="list.length">
<div class="item" v-for="(item, index) in list" :key="index">
<div class="row">
<p>类型{{item.template_name}}</p>
<p>申请摘除数量({{item.chain_count}})</p>
</div>
<div class="row">
<div class="blue-color bold">
<div v-if="item.template_id==4">
<p v-if="item.status==1">申请中车间值班人员</p>
<p v-else>{{matchOptions(statusList,item.status)}}</p>
</div>
<div v-else>
<p v-if="item.status==5 || item.status==100">通过</p>
<p v-else>{{matchOptions(statusList,item.status)}}</p>
</div>
</div>
<p>岗位{{item.chain_position}}</p>
</div>
<div class="row">
<p>申请时间{{item.created_at?.slice(0,16)}}</p>
<p>申请人{{item?.apply_user?.realname}}</p>
</div>
<div class="row">
<p>计划摘除时间{{item.plan_remove_time?.slice(0,16)}}</p>
<p class="btn" @click="jumpTo('detail',item)">查看</p>
</div>
</div>
</template>
<template v-else>
<van-empty description="暂无数据" />
</template>
</div>
</div>
</template>
<style scoped>
.blue-color {
color: #1989fa;
}
.bold {
font-weight: bold;
}
.main {
height: 100vh;
padding: 12px;
overflow: hidden;
font-size: 14px;
}
/* tab切换 */
.tab-box {
display: flex;
border: 1px solid #1989fa;
}
.tab {
width: 50%;
padding: 5px 0;
text-align: center;
font-size: 16px;
color: #1989fa;
}
.tab.active {
background-color: #1989fa;
color: #fff;
}
/* 列表 */
.list {
height: calc(100vh - 70px);
overflow-y: auto;
margin-top: 12px;
}
.list .item {
border: 1px solid #f1f1f1;
border-radius: 4px;
padding: 10px;
margin-top: 12px;
}
.list .item:first-child {
margin-top: 0;
}
.list .item .row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
gap: 10px;
}
.list .item .row:first-child {
margin-top: 0;
}
.btn {
background-color: #1989fa;
color: #fff;
padding: 4px 15px;
border-radius: 2px;
}
</style>

View File

@ -1,3 +1,305 @@
<template>
<div>404</div>
</template>
<div class="not-found">
<!-- 背景装饰 -->
<div class="bg-decoration">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
<div class="circle circle-4"></div>
</div>
<!-- 主内容 -->
<div class="content">
<!-- 404 数字艺术字 -->
<div class="error-code">
<span class="digit digit-1">4</span>
<span class="digit digit-2">0</span>
<span class="digit digit-3">4</span>
</div>
<!-- 插画图标 -->
<div class="illustration">
<van-icon name="warning-o" size="51.2px" color="#ee0a24" />
<div class="illustration-line"></div>
</div>
<!-- 提示文字 -->
<div class="message">
<h1 class="title">哎呀页面走丢了</h1>
<p class="desc">您访问的页面不存在或已被移除</p>
<p class="sub-desc">可能是链接有误或页面已更新</p>
</div>
<!-- 操作按钮 -->
<div class="actions">
<van-button
type="danger"
round
block
size="normal"
@click="goBack"
>
返回上一页
</van-button>
</div>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
//
const goHome = () => {
router.push('/')
}
//
const goBack = () => {
router.go(-1)
}
</script>
<style scoped>
/* ===== 容器 ===== */
.not-found {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #f8f9fe 0%, #f0f2f8 100%);
padding: 24px 20px;
overflow: hidden;
box-sizing: border-box;
}
/* ===== 背景装饰 ===== */
.not-found .bg-decoration {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.not-found .circle {
position: absolute;
border-radius: 50%;
opacity: 0.4;
animation: float 8s ease-in-out infinite alternate;
}
.not-found .circle-1 {
width: 320px;
height: 320px;
top: -8%;
right: -10%;
background: radial-gradient(circle, rgba(238, 10, 36, 0.08), transparent);
animation-delay: 0s;
}
.not-found .circle-2 {
width: 224px;
height: 224px;
bottom: -5%;
left: -8%;
background: radial-gradient(circle, rgba(238, 10, 36, 0.06), transparent);
animation-delay: 2s;
}
.not-found .circle-3 {
width: 128px;
height: 128px;
top: 30%;
right: 5%;
background: radial-gradient(circle, rgba(238, 10, 36, 0.05), transparent);
animation-delay: 4s;
}
.not-found .circle-4 {
width: 160px;
height: 160px;
bottom: 20%;
left: 5%;
background: radial-gradient(circle, rgba(238, 10, 36, 0.04), transparent);
animation-delay: 1s;
}
@keyframes float {
0% {
transform: translate(0, 0) scale(1);
}
100% {
transform: translate(20px, -20px) scale(1.05);
}
}
/* ===== 内容区 ===== */
.not-found .content {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* ===== 404 数字 ===== */
.not-found .error-code {
display: flex;
align-items: center;
justify-content: center;
gap: 2.4px;
margin-bottom: 8px;
font-weight: 900;
line-height: 1;
user-select: none;
}
.not-found .error-code .digit {
font-size: 128px;
background: linear-gradient(135deg, #ee0a24 0%, #c41230 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 12px 40px rgba(238, 10, 36, 0.2);
position: relative;
transition: transform 0.3s ease;
}
.not-found .error-code .digit-1 {
animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.not-found .error-code .digit-2 {
animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
.not-found .error-code .digit-3 {
animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}
@keyframes popIn {
0% {
opacity: 0;
transform: scale(0.5) translateY(30px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* ===== 插画 ===== */
.not-found .illustration {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
opacity: 0;
animation: fadeUp 0.8s ease 0.7s both;
}
.not-found .illustration .van-icon {
filter: drop-shadow(0 4px 12px rgba(238, 10, 36, 0.2));
}
.not-found .illustration-line {
width: 40px;
height: 2px;
background: linear-gradient(90deg, rgba(238, 10, 36, 0.3), rgba(238, 10, 36, 0.05));
border-radius: 2px;
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ===== 提示文字 ===== */
.not-found .message {
margin-bottom: 32px;
opacity: 0;
animation: fadeUp 0.8s ease 0.9s both;
}
.not-found .message .title {
font-size: 24px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 8px 0;
letter-spacing: 0.02em;
}
.not-found .message .desc {
font-size: 16px;
color: #6b7280;
margin: 0 0 4px 0;
font-weight: 400;
line-height: 1.6;
}
.not-found .message .sub-desc {
font-size: 14px;
color: #9ca3af;
margin: 0;
font-weight: 300;
line-height: 1.6;
}
/* ===== 按钮 ===== */
.not-found .actions {
width: 100%;
}
/* ===== 移动端适配 ===== */
@media (max-width: 420px) {
.not-found .error-code .digit {
font-size: 96px;
}
.not-found .message .title {
font-size: 20px;
}
.not-found .message .desc {
font-size: 14.4px;
}
}
@media (max-width: 360px) {
.not-found .error-code .digit {
font-size: 76.8px;
}
.not-found .message .title {
font-size: 17.6px;
}
.not-found .content {
padding: 0 4px;
}
}
/* ===== 刘海屏 & 安全区适配 ===== */
@supports (padding: max(0px)) {
.not-found {
padding-top: max(24px, env(safe-area-inset-top));
padding-bottom: max(24px, env(safe-area-inset-bottom));
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
}
</style>

View File

@ -1,6 +1,7 @@
<script setup>
import { ref } from 'vue'
import router from '@/router'
import { loginApi } from '@/api/login';
const btnLoading = ref(false)
const formData = ref({
@ -9,13 +10,15 @@ const formData = ref({
})
//
const onSubmit = (values) => {
const onSubmit = async (values) => {
btnLoading.value = true;
console.log(values);
setTimeout(() => {
btnLoading.value = false;
try {
const res = await loginApi(values);
localStorage.setItem('token', res.data.access_token);
router.push({ path: '/applyList' });
}, 1000);
} finally {
btnLoading.value = false;
}
}
</script>
@ -26,12 +29,13 @@ const onSubmit = (values) => {
<img src="/public/logo.png" alt="">
<p class="login">登录</p>
</div>
<van-form @submit="onSubmit" size="small" label-width="1.2rem">
<van-form class="form" @submit="onSubmit" size="small" label-width="1.2rem">
<van-cell-group inset>
<van-field
v-model="formData.username"
name="username"
label="用户名"
clearable
placeholder="请输入用户名"
:rules="[{ required: true, message: '请输入用户名' }]"
/>
@ -40,6 +44,7 @@ const onSubmit = (values) => {
type="password"
name="password"
label="密码"
clearable
placeholder="请输入密码"
:rules="[{ required: true, message: '请输入密码' }]"
/>
@ -66,7 +71,7 @@ const onSubmit = (values) => {
padding: 10px;
}
.box {
width: 80%;
width: 90%;
background: #fff;
border-radius: 8px;
display: flex;
@ -89,6 +94,9 @@ const onSubmit = (values) => {
.login {
font-size: 20px;
}
.form {
width: 100%;
}
.btn {
margin-top: 10px;
}

View File

@ -13,7 +13,7 @@ export default defineConfig({
plugins: [
vue(),
vueJsx(),
vueDevTools(),
// vueDevTools(),
AutoImport({
resolvers: [VantResolver()],
}),