补充新生报名页面stu
This commit is contained in:
parent
2fe6a590e8
commit
d85ebeb7f0
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/// <reference types="vite/client" />
|
||||
import { Request } from './src/utils/http/request'
|
||||
declare global {
|
||||
const $request: Request
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>stu</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "stu",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.13.2",
|
||||
"element-plus": "^2.11.9",
|
||||
"ofetch": "^1.5.1",
|
||||
"vue": "^3.5.24",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.10.1",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"autoprefixer": "^8.0.0",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-loader": "^8.2.0",
|
||||
"sass-embedded": "^1.93.3",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "npm:rolldown-vite@7.2.5",
|
||||
"vue-tsc": "^3.1.4"
|
||||
},
|
||||
"overrides": {
|
||||
"vite": "npm:rolldown-vite@7.2.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,204 @@
|
|||
<!-- App.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const isMenuOpen = ref(false); // 用于移动端菜单控制
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 导航栏固定在页面顶端 -->
|
||||
<header class="navbar">
|
||||
<div class="navbar-container">
|
||||
<!-- 品牌标识 -->
|
||||
<div class="navbar-brand">
|
||||
<router-link to="/">新生报名系统</router-link>
|
||||
</div>
|
||||
|
||||
<!-- 桌面端导航 -->
|
||||
<nav class="navbar-nav">
|
||||
<router-link
|
||||
to="/apply"
|
||||
:class="{ active: route.path === '/apply' }"
|
||||
>
|
||||
报名注册
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/query"
|
||||
:class="{ active: route.path === '/query' }"
|
||||
>
|
||||
状态查询
|
||||
</router-link>
|
||||
</nav>
|
||||
|
||||
<!-- 移动端菜单按钮 -->
|
||||
<button class="menu-toggle" @click="isMenuOpen = !isMenuOpen">
|
||||
<span v-if="!isMenuOpen">☰</span>
|
||||
<span v-else>✕</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 移动端导航菜单 -->
|
||||
<div class="mobile-menu" v-if="isMenuOpen">
|
||||
<router-link
|
||||
to="/apply"
|
||||
:class="{ active: route.path === '/apply' }"
|
||||
@click="isMenuOpen = false"
|
||||
>
|
||||
报名注册
|
||||
</router-link>
|
||||
<router-link
|
||||
to="/query"
|
||||
:class="{ active: route.path === '/query' }"
|
||||
@click="isMenuOpen = false"
|
||||
>
|
||||
状态查询
|
||||
</router-link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main><router-view /></main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 重置页面默认边距，确保导航栏紧贴顶端 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden; /* 防止横向滚动 */
|
||||
}
|
||||
|
||||
/* 导航栏固定在顶端，z-index设为最高确保不被遮挡 */
|
||||
.navbar {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
position: fixed; /* 改为fixed确保始终固定在顶端 */
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10; /* 提高层级，避免被其他元素覆盖 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.navbar-brand a {
|
||||
color: #165DFF;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.navbar-nav a {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-nav a:hover {
|
||||
color: #165DFF;
|
||||
}
|
||||
|
||||
.navbar-nav a.active {
|
||||
color: #165DFF;
|
||||
}
|
||||
|
||||
.navbar-nav a.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #165DFF;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #333333;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
padding: 15px 20px;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.mobile-menu a {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.mobile-menu a:hover {
|
||||
color: #165DFF;
|
||||
}
|
||||
|
||||
.mobile-menu a.active {
|
||||
color: #165DFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 主内容区添加顶部内边距，避免被固定导航栏遮挡 */
|
||||
main {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 80px 20px 20px; /* 顶部padding=导航栏高度(60px)+20px间距 */
|
||||
}
|
||||
|
||||
.app {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.navbar-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 移动端主内容区顶部padding调整（考虑展开的移动端菜单） */
|
||||
main {
|
||||
padding-top: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// api/enrollment.ts
|
||||
import request from './request'
|
||||
|
||||
export function submitEnrollmentInfo(params: any) {
|
||||
return request.post('enrollment/submit', params)
|
||||
}
|
||||
|
||||
export function getEnrollmentProcessStatus(params: any) {
|
||||
return request.get('enrollment/processStatus', params)
|
||||
}
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
// api/request.ts
|
||||
export class Request {
|
||||
private baseURL: string
|
||||
private interceptors: {
|
||||
request: Array<(config: any) => any>
|
||||
response: Array<(response: any) => any>
|
||||
}
|
||||
|
||||
constructor(baseURL: string = '') {
|
||||
this.baseURL = baseURL
|
||||
this.interceptors = {
|
||||
request: [],
|
||||
response: []
|
||||
}
|
||||
}
|
||||
|
||||
// 添加请求拦截器
|
||||
useRequestInterceptor(interceptor: (config: any) => any) {
|
||||
this.interceptors.request.push(interceptor)
|
||||
}
|
||||
|
||||
// 添加响应拦截器
|
||||
useResponseInterceptor(interceptor: (response: any) => any) {
|
||||
this.interceptors.response.push(interceptor)
|
||||
}
|
||||
|
||||
async request(method: string, url: string, data?: any) {
|
||||
let config = {
|
||||
method,
|
||||
url: this.baseURL + url,
|
||||
data,
|
||||
headers: {},
|
||||
// 添加params字段用于区分GET参数
|
||||
params: method === 'GET' || method === 'HEAD' ? data : undefined
|
||||
}
|
||||
|
||||
// 执行请求拦截器
|
||||
for (const interceptor of this.interceptors.request) {
|
||||
config = await interceptor(config)
|
||||
}
|
||||
|
||||
// 构建完整的URL（处理GET参数）
|
||||
let fullUrl = config.url
|
||||
if (config.params && Object.keys(config.params).length > 0) {
|
||||
const queryString = new URLSearchParams(config.params).toString()
|
||||
fullUrl += (fullUrl.includes('?') ? '&' : '?') + queryString
|
||||
}
|
||||
|
||||
const fetchConfig: RequestInit = {
|
||||
method: config.method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...config.headers
|
||||
}
|
||||
}
|
||||
|
||||
// 只有非GET/HEAD请求才设置body
|
||||
if (config.method !== 'GET' && config.method !== 'HEAD' && config.data) {
|
||||
fetchConfig.body = JSON.stringify(config.data)
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(fullUrl, fetchConfig)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP错误: ${response.status}`)
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
let finalResult = { ...result, status: response.status }
|
||||
for (const interceptor of this.interceptors.response) {
|
||||
finalResult = await interceptor(finalResult)
|
||||
}
|
||||
|
||||
return finalResult
|
||||
} catch (error) {
|
||||
// 错误处理
|
||||
console.error('请求失败:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
get(url: string, params?: any) {
|
||||
return this.request('GET', url, params)
|
||||
}
|
||||
|
||||
post(url: string, data?: any) {
|
||||
return this.request('POST', url, data)
|
||||
}
|
||||
|
||||
put(url: string, data?: any) {
|
||||
return this.request('PUT', url, data)
|
||||
}
|
||||
|
||||
delete(url: string, data?: any) {
|
||||
return this.request('DELETE', url, data)
|
||||
}
|
||||
}
|
||||
|
||||
// 创建实例
|
||||
const request = new Request('http://192.168.123.111:8083/api/')
|
||||
|
||||
// 添加全局请求拦截器
|
||||
request.useRequestInterceptor(async (config) => {
|
||||
// 添加认证token
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
|
||||
if (config.url.includes('/enrollment/') && config.params?.idCard) {
|
||||
const idCardRegex = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/
|
||||
if (!idCardRegex.test(config.params.idCard)) {
|
||||
throw new Error('身份证号格式不正确')
|
||||
}
|
||||
}
|
||||
|
||||
return config
|
||||
})
|
||||
|
||||
// 添加全局响应拦截器
|
||||
request.useResponseInterceptor(async (response) => {
|
||||
// 根据你的后端返回结构调整
|
||||
if (response.code && response.code !== 200 && response.code !== 0 && response.code !== 1) {
|
||||
// 处理业务错误
|
||||
switch (response.code) {
|
||||
case 401:
|
||||
window.location.href = '/login'
|
||||
break
|
||||
case 403:
|
||||
throw new Error('权限不足，无法访问')
|
||||
default:
|
||||
throw new Error(response.message || '请求失败')
|
||||
}
|
||||
}
|
||||
return response
|
||||
})
|
||||
|
||||
// 添加错误处理拦截器
|
||||
request.useResponseInterceptor(async (response) => {
|
||||
return response
|
||||
})
|
||||
|
||||
export default request
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
|
|
@ -0,0 +1,223 @@
|
|||
<template>
|
||||
<!-- 报名表单区域 -->
|
||||
<div class="border-b border-br pb-5">
|
||||
<span class="text-2xl font-medium">新生报名</span>
|
||||
</div>
|
||||
<el-card class="!border-none mb-4" shadow="never">
|
||||
<div class="lg:flex gap-6">
|
||||
<!-- 基本信息表单 -->
|
||||
<el-card class="!border-none flex-1" shadow="never">
|
||||
<el-form
|
||||
layout="vertical"
|
||||
:model="studentData.baseInfo"
|
||||
class="mt-4"
|
||||
>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<el-form-item label="学生姓名">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.name"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group
|
||||
v-model="studentData.baseInfo.gender"
|
||||
>
|
||||
<el-radio :label="0">男</el-radio>
|
||||
<el-radio :label="1">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.idCard"
|
||||
placeholder="请输入18位身份证号"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期">
|
||||
<el-date-picker
|
||||
v-model="studentData.baseInfo.birthday"
|
||||
type="datetime"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请输入出生日期"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.phone"
|
||||
placeholder="请输入手机号码"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电子邮箱">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.email"
|
||||
placeholder="请输入电子邮箱"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="籍贯">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.nativePlace"
|
||||
placeholder="请输入籍贯"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.nationality"
|
||||
placeholder="请输入民族"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="政治面貌">
|
||||
<el-select
|
||||
v-model="studentData.baseInfo.politicalStatus"
|
||||
clearable
|
||||
>
|
||||
<el-option label="群众" :value="0" />
|
||||
<el-option label="团员" :value="1" />
|
||||
<el-option label="党员" :value="2" />
|
||||
<el-option label="其他" :value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="毕业年份">
|
||||
<el-input-number
|
||||
v-model="studentData.baseInfo.graduationYear"
|
||||
placeholder="请输入毕业年份"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="毕业院校">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.previousSchool"
|
||||
placeholder="请输入毕业院校"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="学校类型">
|
||||
<el-select
|
||||
v-model="studentData.baseInfo.schoolType"
|
||||
clearable
|
||||
>
|
||||
<el-option label="普通高中" :value="1" />
|
||||
<el-option label="职业高中" :value="2" />
|
||||
<el-option label="中专" :value="3" />
|
||||
<el-option label="大专" :value="4" />
|
||||
<el-option label="本科" :value="5" />
|
||||
<el-option label="其他" :value="6" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="家庭住址"
|
||||
class="md:col-span-2"
|
||||
>
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.homeAddress"
|
||||
placeholder="请输入详细家庭住址"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="紧急联系人">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.emergencyContact"
|
||||
placeholder="请输入紧急联系人姓名"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="紧急联系电话">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.emergencyPhone"
|
||||
placeholder="请输入紧急联系人电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="与紧急联系人关系">
|
||||
<el-input
|
||||
v-model="studentData.baseInfo.relationship"
|
||||
placeholder="请输入与紧急联系人的关系"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 提交按钮 -->
|
||||
<el-card class="!border-none mb-4 flex-1" shadow="never">
|
||||
<div class="mt-6">
|
||||
<el-button
|
||||
class="ml-4"
|
||||
type="primary"
|
||||
block
|
||||
@click="handleConfirmSubmit"
|
||||
>
|
||||
提交报名
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
import { ElButton, ElMessage, ElForm, ElFormItem, ElInput } from 'element-plus'
|
||||
import {
|
||||
submitEnrollmentInfo
|
||||
} from '@/api/enrollment'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 学生信息数据
|
||||
const studentData = reactive({
|
||||
baseInfo: {
|
||||
name: '',
|
||||
gender: 0,
|
||||
idCard: '',
|
||||
birthday: '',
|
||||
nationality: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
homeAddress: '',
|
||||
nativePlace: '',
|
||||
invitationCode: '',
|
||||
politicalStatus: 0,
|
||||
previousSchool: '',
|
||||
schoolType: '',
|
||||
graduationYear: 2025,
|
||||
emergencyContact: '',
|
||||
emergencyPhone: '',
|
||||
relationship: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 确认提交
|
||||
const handleConfirmSubmit = async () => {
|
||||
try {
|
||||
// 提交前校验身份证号
|
||||
if (!/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(studentData.baseInfo.idCard)) {
|
||||
ElMessage.warning('请输入有效的18位身份证号')
|
||||
return
|
||||
}
|
||||
const data = await submitEnrollmentInfo(studentData.baseInfo)
|
||||
console.log(data)
|
||||
if(data.code === 1){
|
||||
ElMessage.success('报名提交成功')
|
||||
router.push({
|
||||
path: '/query',
|
||||
query: { idCard: studentData.baseInfo.idCard }
|
||||
})
|
||||
}
|
||||
else ElMessage.error(data.msg)
|
||||
} catch (error) {
|
||||
ElMessage.error('报名提交失败，请稍后重试')
|
||||
console.error('提交报名信息失败：', error)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-tabs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,383 @@
|
|||
<template>
|
||||
<div class="px-[30px] py-5 user-info min-h-full flex flex-col">
|
||||
<!-- 标签页切换 -->
|
||||
<el-form>
|
||||
<!-- 查询进度区域 -->
|
||||
<div class="border-b border-br pb-5">
|
||||
<span class="text-2xl font-medium">查询报名进度</span>
|
||||
</div>
|
||||
<!-- 查询表单 -->
|
||||
<el-card class="!border-none mb-6" shadow="never">
|
||||
<el-form
|
||||
:model="queryForm"
|
||||
:rules="queryRules"
|
||||
ref="queryFormRef"
|
||||
label-width="100px"
|
||||
class="mt-4"
|
||||
>
|
||||
<el-form-item label="身份证号" prop="idCard">
|
||||
<el-input
|
||||
v-model="queryForm.idCard"
|
||||
placeholder="请输入18位身份证号"
|
||||
maxlength="18"
|
||||
@input="handleIdCardInput"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuerySubmit" :loading="isQueryLoading">
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<!-- 进度展示区域 -->
|
||||
<div v-if="submission" class="border-b border-br pb-5">
|
||||
<span class="text-2xl font-medium">注册状态</span>
|
||||
</div>
|
||||
<el-card
|
||||
v-if="submission"
|
||||
class="!border-none mb-4 flex-1"
|
||||
shadow="never"
|
||||
>
|
||||
<div class="status-info mt-4">
|
||||
<!-- 步骤条展示 -->
|
||||
<div class="mb-6">
|
||||
<div class="text-tx-secondary text-sm mb-4">状态进度</div>
|
||||
<el-steps
|
||||
:active="activeStep"
|
||||
finish-status="success"
|
||||
class="w-full"
|
||||
style="text-align: left"
|
||||
>
|
||||
<el-step
|
||||
v-for="(step, index) in statusConfig.steps"
|
||||
:key="index"
|
||||
:title="stepTitles[index]"
|
||||
:description="getStepDescription(index)"
|
||||
:status="getStepStatus(index)"
|
||||
/>
|
||||
</el-steps>
|
||||
</div>
|
||||
<!-- 显示拒绝原因 -->
|
||||
<div v-if="rejectionReason" class="text-danger mt-4">
|
||||
<i class="el-icon-error mr-2"></i>
|
||||
拒绝原因：{{ rejectionReason }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-form>
|
||||
|
||||
<!-- 查询进度弹窗（保持全局可访问） -->
|
||||
<el-dialog
|
||||
v-model="isQueryDialogOpen"
|
||||
title="查询报名进度"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
:model="queryForm"
|
||||
:rules="queryRules"
|
||||
ref="queryFormRef"
|
||||
label-width="100px"
|
||||
class="mt-4"
|
||||
>
|
||||
<el-form-item label="身份证号" prop="idCard">
|
||||
<el-input
|
||||
v-model="queryForm.idCard"
|
||||
placeholder="请输入18位身份证号"
|
||||
maxlength="18"
|
||||
@input="handleIdCardInput"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="isQueryDialogOpen = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleQuerySubmit" :loading="isQueryLoading">
|
||||
查询
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, computed, onMounted, ref, unref } from 'vue'
|
||||
import { ElButton, ElMessage, ElForm, ElFormItem, ElInput, ElDialog, ElTabs, ElTabPane } from 'element-plus'
|
||||
import {
|
||||
getEnrollmentProcessStatus
|
||||
} from '@/api/enrollment'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const activeTab = ref('enroll') // 默认显示报名页面
|
||||
const route = useRoute()
|
||||
// 步骤标题与后端状态对应
|
||||
const stepTitles = ['报名', '缴费', '等待录取']
|
||||
const submission = ref(false) // 提交状态
|
||||
const rejectionReason = ref('') // 拒绝原因
|
||||
// 查询相关状态
|
||||
const isQueryDialogOpen = ref(false) // 查询弹窗显示状态
|
||||
const isQueryLoading = ref(false) // 查询加载状态
|
||||
const queryFormRef = ref<InstanceType<typeof ElForm> | null>(null) // 查询表单引用
|
||||
// 查询表单数据
|
||||
const queryForm = reactive({
|
||||
idCard: ''
|
||||
})
|
||||
|
||||
// 查询表单校验规则
|
||||
const queryRules = reactive({
|
||||
idCard: [
|
||||
{ required: true, message: '请输入身份证号', trigger: 'blur' },
|
||||
{
|
||||
pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
|
||||
message: '请输入有效的18位身份证号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 学生信息数据
|
||||
const studentData = reactive({
|
||||
baseInfo: {
|
||||
name: '',
|
||||
gender: 0,
|
||||
idCard: '',
|
||||
birthday: '',
|
||||
nationality: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
homeAddress: '',
|
||||
nativePlace: '',
|
||||
invitationCode: '',
|
||||
politicalStatus: 0,
|
||||
previousSchool: '',
|
||||
schoolType: '',
|
||||
graduationYear: 2025,
|
||||
emergencyContact: '',
|
||||
emergencyPhone: '',
|
||||
relationship: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 状态配置
|
||||
const statusConfig = reactive({
|
||||
steps: [
|
||||
{ completed: false, time: 0, status: 0 }, // 报名
|
||||
{ completed: false, time: 0, status: 0 }, // 缴费
|
||||
{ completed: false, time: 0, status: 0 }, // 等待录取通知
|
||||
],
|
||||
applicationNumber: '' // 报名编号
|
||||
})
|
||||
|
||||
// 格式化时间戳为日期
|
||||
const formatTime = (timestamp: number) => {
|
||||
if (!timestamp) return ''
|
||||
const date = new Date(timestamp)
|
||||
return date.toLocaleDateString()
|
||||
}
|
||||
|
||||
// 获取步骤描述
|
||||
const getStepDescription = (index: number) => {
|
||||
const step = statusConfig.steps[index]
|
||||
const timeStr = formatTime(step.time)
|
||||
if (index === 0) {
|
||||
return step.completed ? `已完成${timeStr}` : '状态异常'
|
||||
} else if (index === 1) {
|
||||
if (step.status === 0) return '未缴费'
|
||||
if (step.status === 1) return `已缴费 ${timeStr}`
|
||||
} else if (index === 2) {
|
||||
if (step.status === 0) return '等待录取通知'
|
||||
if (step.status === 1) return `录取通知已发送 ${timeStr}`
|
||||
if (step.status === 2) return `未录取 ${timeStr}`
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// 处理身份证输入
|
||||
const handleIdCardInput = () => {
|
||||
let idCardStr = String(queryForm.idCard || '')
|
||||
idCardStr = idCardStr.replace(/[^0-9Xx]/g, '')
|
||||
idCardStr = idCardStr.toUpperCase()
|
||||
if (idCardStr.length > 18) {
|
||||
idCardStr = idCardStr.slice(0, 18)
|
||||
}
|
||||
queryForm.idCard = idCardStr
|
||||
}
|
||||
|
||||
// 提交查询
|
||||
const handleQuerySubmit = async () => {
|
||||
const formRef = unref(queryFormRef)
|
||||
if (!formRef) return
|
||||
|
||||
|
||||
try {
|
||||
await formRef.validate()
|
||||
isQueryLoading.value = true
|
||||
|
||||
const data = await getEnrollmentProcessStatus(queryForm)
|
||||
const statusRes = data.data
|
||||
|
||||
if (statusRes) {
|
||||
isQueryDialogOpen.value = false
|
||||
submission.value = true
|
||||
|
||||
statusConfig.applicationNumber = statusRes.applicationNumber || ''
|
||||
rejectionReason.value = statusRes.rejectionReason || ''
|
||||
|
||||
statusConfig.steps[0] = {
|
||||
completed: statusRes.applicationNumber ? true : false,
|
||||
time: statusRes.applicationTime || 0,
|
||||
status: statusRes.applicationTime > 0 ? 1 : 0
|
||||
}
|
||||
statusConfig.steps[1] = {
|
||||
completed: statusRes.approvalStatus === 1,
|
||||
time: statusRes.approvalTime || 0,
|
||||
status: statusRes.approvalStatus || 0
|
||||
}
|
||||
statusConfig.steps[2] = {
|
||||
completed: statusRes.admissionStatus === 6,
|
||||
time: statusRes.admissionTime || 0,
|
||||
status: statusRes.admissionStatus || 0
|
||||
}
|
||||
|
||||
ElMessage.success('查询成功')
|
||||
} else {
|
||||
ElMessage.info('未查询到相关报名记录')
|
||||
resetStatusConfig()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('查询进度失败：', error)
|
||||
ElMessage.error('查询失败，请稍后重试')
|
||||
} finally {
|
||||
isQueryLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加载流程状态
|
||||
const loadProcessStatus = async (idCard?: string) => {
|
||||
const cardNo = idCard || studentData.baseInfo.idCard
|
||||
if (!cardNo || typeof cardNo !== 'string') return
|
||||
|
||||
try {
|
||||
const statusRes = await getEnrollmentProcessStatus(cardNo)
|
||||
if (statusRes) {
|
||||
submission.value = true
|
||||
statusConfig.applicationNumber = statusRes.data.applicationNumber || ''
|
||||
rejectionReason.value = statusRes.data.rejectionReason || ''
|
||||
|
||||
statusConfig.steps[0] = {
|
||||
completed: statusRes.data.applicationNumber ? true : false,
|
||||
time: statusRes.data.applicationTime || 0,
|
||||
status: statusRes.data.applicationTime > 0 ? 1 : 0
|
||||
}
|
||||
statusConfig.steps[1] = {
|
||||
completed: statusRes.data.approvalStatus === 1,
|
||||
time: statusRes.data.approvalTime || 0,
|
||||
status: statusRes.data.approvalStatus || 0
|
||||
}
|
||||
statusConfig.steps[2] = {
|
||||
completed: statusRes.data.admissionStatus === 1,
|
||||
time: statusRes.data.admissionTime || 0,
|
||||
status: statusRes.data.admissionStatus || 0
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('刷新状态失败：', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 重置状态配置
|
||||
const resetStatusConfig = () => {
|
||||
statusConfig.steps = [
|
||||
{ completed: false, time: 0, status: 0 },
|
||||
{ completed: false, time: 0, status: 0 },
|
||||
{ completed: false, time: 0, status: 0 }
|
||||
]
|
||||
statusConfig.applicationNumber = ''
|
||||
rejectionReason.value = ''
|
||||
submission.value = false
|
||||
const graduationYear = studentData.baseInfo.graduationYear
|
||||
Object.assign(studentData.baseInfo, {
|
||||
name: '',
|
||||
gender: 0,
|
||||
idCard: '',
|
||||
birthday: '',
|
||||
nationality: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
homeAddress: '',
|
||||
nativePlace: '',
|
||||
politicalStatus: 0,
|
||||
previousSchool: '',
|
||||
schoolType: '',
|
||||
graduationYear,
|
||||
emergencyContact: '',
|
||||
emergencyPhone: '',
|
||||
relationship: ''
|
||||
})
|
||||
}
|
||||
|
||||
// 动态推导当前激活的步骤
|
||||
const activeStep = computed(() => {
|
||||
if (
|
||||
statusConfig.steps[1].status === 2 ||
|
||||
statusConfig.steps[2].status === 2
|
||||
) {
|
||||
return statusConfig.steps[1].status === 2 ? 1 : 2
|
||||
}
|
||||
|
||||
const count = completedStepCount.value
|
||||
return count >= statusConfig.steps.length
|
||||
? statusConfig.steps.length - 1
|
||||
: count
|
||||
})
|
||||
|
||||
// 获取步骤状态
|
||||
const getStepStatus = (index: number) => {
|
||||
if (statusConfig.steps[index].completed) {
|
||||
return 'finish'
|
||||
}
|
||||
|
||||
if (
|
||||
(index === 1 && statusConfig.steps[index].status === 2) ||
|
||||
(index === 2 && statusConfig.steps[index].status === 2)
|
||||
) {
|
||||
return 'error'
|
||||
}
|
||||
|
||||
return index === activeStep.value ? 'process' : 'wait'
|
||||
}
|
||||
|
||||
// 计算已完成的步骤数量
|
||||
const completedStepCount = computed(() => {
|
||||
return statusConfig.steps.filter((step) => step.completed).length
|
||||
})
|
||||
|
||||
// 页面加载时初始化
|
||||
onMounted(() => {
|
||||
// 新增：从路由参数获取身份证号并自动查询
|
||||
const idCardFromRoute = route.query.idCard as string
|
||||
if (idCardFromRoute) {
|
||||
queryForm.idCard = idCardFromRoute
|
||||
// 延迟执行避免表单验证时机问题
|
||||
setTimeout(() => {
|
||||
handleQuerySubmit()
|
||||
}, 100)
|
||||
} else {
|
||||
const idCard = studentData.baseInfo.idCard
|
||||
if (idCard && typeof idCard === 'string') {
|
||||
loadProcessStatus(idCard)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-tabs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
//菜单主题类型
|
||||
export enum ThemeEnum {
|
||||
LIGHT = 'light',
|
||||
DARK = 'dark'
|
||||
}
|
||||
|
||||
// 菜单类型
|
||||
export enum MenuEnum {
|
||||
CATALOGUE = 'M',
|
||||
MENU = 'C',
|
||||
BUTTON = 'A'
|
||||
}
|
||||
|
||||
// 屏幕
|
||||
export enum ScreenEnum {
|
||||
SM = 640,
|
||||
MD = 768,
|
||||
LG = 1024,
|
||||
XL = 1280,
|
||||
'2XL' = 1536
|
||||
}
|
||||
|
||||
export enum SMSEnum {
|
||||
LOGIN = 'YZMDL',
|
||||
BIND_MOBILE = 'BDSJHM',
|
||||
CHANGE_MOBILE = 'BGSJHM',
|
||||
FIND_PASSWORD = 'ZHDLMM'
|
||||
}
|
||||
|
||||
export enum PolicyAgreementEnum {
|
||||
SERVICE = 'service',
|
||||
PRIVACY = 'privacy'
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// 本地缓冲key
|
||||
|
||||
//token
|
||||
export const TOKEN_KEY = 'token'
|
||||
//账号
|
||||
export const ACCOUNT_KEY = 'account'
|
||||
//设置
|
||||
export const SETTING_KEY = 'setting'
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export enum PageEnum {
|
||||
//登录页面
|
||||
LOGIN = '/login',
|
||||
//无权限页面
|
||||
ERROR_403 = '/403',
|
||||
INDEX = '/'
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
export enum ContentTypeEnum {
|
||||
// json
|
||||
JSON = 'application/json;charset=UTF-8',
|
||||
// form-data 上传资源（图片，视频）
|
||||
FORM_DATA = 'multipart/form-data'
|
||||
}
|
||||
|
||||
export enum RequestMethodsEnum {
|
||||
GET = 'GET',
|
||||
POST = 'POST'
|
||||
}
|
||||
|
||||
export enum RequestCodeEnum {
|
||||
NOT_INSTALL = -2,
|
||||
LOGIN_FAILURE = -1,
|
||||
FAIL = 0,
|
||||
SUCCESS = 1,
|
||||
OPEN_NEW_PAGE = 2
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import router from './router'
|
||||
|
||||
createApp(App)
|
||||
.use(ElementPlus)
|
||||
.use(router)
|
||||
.mount('#app')
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
// src/router/index.ts
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
// 导入组件（支持懒加载）
|
||||
import apply from '@/components/apply.vue'
|
||||
import query from '@/components/query.vue'
|
||||
|
||||
// 1. 定义路由数组：用 RouteRecordRaw 约束类型
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/apply'
|
||||
},
|
||||
{
|
||||
path: '/apply',
|
||||
name: 'apply', // 路由名称（可选，用于编程式导航）
|
||||
component: apply,
|
||||
meta: {
|
||||
title: '申请', // 自定义元信息（可扩展类型）
|
||||
requiresAuth: false // 是否需要登录
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/query',
|
||||
name: 'query',
|
||||
component: query,
|
||||
meta: {
|
||||
title: '查询',
|
||||
requiresAuth: false
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 2. 创建路由实例
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL), // HTML5 模式（无 #）
|
||||
routes // 传入路由数组
|
||||
})
|
||||
|
||||
// 3. 路由守卫（可选，示例：修改页面标题）
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.meta.title) {
|
||||
document.title = to.meta.title as string // TS 类型断言（因 meta 已扩展，可优化）
|
||||
}
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/**
|
||||
* @description 获取客户端类型
|
||||
*/
|
||||
export function getClient() {
|
||||
return useRuntimeConfig().public.client
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取版本号
|
||||
*/
|
||||
export function getVersion() {
|
||||
return useRuntimeConfig().public.version
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取请求域名
|
||||
*/
|
||||
export function getApiUrl() {
|
||||
return (
|
||||
useRuntimeConfig().public.apiUrl || 'http://192.168.123.111:8084/api/'
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取请求前缀
|
||||
*/
|
||||
export function getApiPrefix() {
|
||||
return useRuntimeConfig().public.apiPrefix
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import {
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElNotification,
|
||||
ElLoading,
|
||||
type ElMessageBoxOptions
|
||||
} from 'element-plus'
|
||||
import type { LoadingInstance } from 'element-plus/es/components/loading/src/loading'
|
||||
|
||||
export class Feedback {
|
||||
private loadingInstance: LoadingInstance | null = null
|
||||
static instance: Feedback | null = null
|
||||
static getInstance() {
|
||||
return this.instance ?? (this.instance = new Feedback())
|
||||
}
|
||||
// 消息提示
|
||||
msg(msg: string) {
|
||||
ElMessage.info(msg)
|
||||
}
|
||||
// 错误消息
|
||||
msgError(msg: string) {
|
||||
ElMessage.error(msg)
|
||||
}
|
||||
// 成功消息
|
||||
msgSuccess(msg: string) {
|
||||
ElMessage.success(msg)
|
||||
}
|
||||
// 警告消息
|
||||
msgWarning(msg: string) {
|
||||
ElMessage.warning(msg)
|
||||
}
|
||||
// 弹出提示
|
||||
alert(msg: string) {
|
||||
ElMessageBox.alert(msg, '系统提示')
|
||||
}
|
||||
// 错误提示
|
||||
alertError(msg: string) {
|
||||
ElMessageBox.alert(msg, '系统提示', { type: 'error' })
|
||||
}
|
||||
// 成功提示
|
||||
alertSuccess(msg: string) {
|
||||
ElMessageBox.alert(msg, '系统提示', { type: 'success' })
|
||||
}
|
||||
// 警告提示
|
||||
alertWarning(msg: string) {
|
||||
ElMessageBox.alert(msg, '系统提示', { type: 'warning' })
|
||||
}
|
||||
// 通知提示
|
||||
notify(msg: string) {
|
||||
ElNotification.info(msg)
|
||||
}
|
||||
// 错误通知
|
||||
notifyError(msg: string) {
|
||||
ElNotification.error(msg)
|
||||
}
|
||||
// 成功通知
|
||||
notifySuccess(msg: string) {
|
||||
ElNotification.success(msg)
|
||||
}
|
||||
// 警告通知
|
||||
notifyWarning(msg: string) {
|
||||
ElNotification.warning(msg)
|
||||
}
|
||||
// 确认窗体
|
||||
confirm(msg: string) {
|
||||
return ElMessageBox.confirm(msg, '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
// 提交内容
|
||||
prompt(content: string, title: string, options?: ElMessageBoxOptions) {
|
||||
return ElMessageBox.prompt(content, title, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
...options
|
||||
})
|
||||
}
|
||||
// 打开全局loading
|
||||
loading(msg: string) {
|
||||
this.loadingInstance = ElLoading.service({
|
||||
lock: true,
|
||||
text: msg
|
||||
})
|
||||
}
|
||||
// 关闭全局loading
|
||||
closeLoading() {
|
||||
this.loadingInstance?.close()
|
||||
}
|
||||
}
|
||||
|
||||
const feedback = Feedback.getInstance()
|
||||
|
||||
export default feedback
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import { FetchOptions } from 'ofetch'
|
||||
import { RequestCodeEnum, RequestMethodsEnum } from '@/enums/requestEnums'
|
||||
import feedback from '@/utils/feedback'
|
||||
import { merge } from 'lodash-es'
|
||||
import { Request } from './request'
|
||||
import { getApiPrefix, getApiUrl, getVersion } from '../env'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
export function createRequest(opt?: Partial<FetchOptions>) {
|
||||
const userStore = useUserStore()
|
||||
// const { setPopupType, toggleShowPopup } = useAccount()
|
||||
const defaultOptions: FetchOptions = {
|
||||
// 基础接口地址
|
||||
baseURL: getApiUrl(),
|
||||
//请求头
|
||||
headers: {
|
||||
version: getVersion()
|
||||
},
|
||||
retry: 2,
|
||||
requestOptions: {
|
||||
apiPrefix: getApiPrefix(),
|
||||
isTransformResponse: true,
|
||||
isReturnDefaultResponse: false,
|
||||
withToken: true,
|
||||
isParamsToData: true,
|
||||
requestInterceptorsHook(options) {
|
||||
const { apiPrefix, isParamsToData, withToken } =
|
||||
options.requestOptions
|
||||
// 拼接请求前缀
|
||||
if (apiPrefix) {
|
||||
options.url = `${apiPrefix}${options.url}`
|
||||
}
|
||||
const params = options.params || {}
|
||||
// POST请求下如果无data，则将params视为data
|
||||
if (
|
||||
isParamsToData &&
|
||||
!Reflect.has(options, 'body') &&
|
||||
options.method?.toUpperCase() === RequestMethodsEnum.POST
|
||||
) {
|
||||
options.body = params
|
||||
options.params = {}
|
||||
}
|
||||
const headers = options.headers || {}
|
||||
if (withToken) {
|
||||
const token = userStore.token
|
||||
headers['token'] = token
|
||||
}
|
||||
options.headers = headers
|
||||
return options
|
||||
},
|
||||
async responseInterceptorsHook(response, options) {
|
||||
const { isTransformResponse, isReturnDefaultResponse } =
|
||||
options.requestOptions
|
||||
//返回默认响应，当需要获取响应头及其他数据时可使用
|
||||
if (isReturnDefaultResponse) {
|
||||
return response
|
||||
}
|
||||
// 是否需要对数据进行处理
|
||||
if (!isTransformResponse) {
|
||||
return response._data
|
||||
}
|
||||
const { code, data, show, msg } = response._data
|
||||
switch (code) {
|
||||
case RequestCodeEnum.SUCCESS:
|
||||
if (show) {
|
||||
msg && feedback.msgSuccess(msg)
|
||||
}
|
||||
return data
|
||||
case RequestCodeEnum.FAIL:
|
||||
if (show) {
|
||||
msg && feedback.msgError(msg)
|
||||
}
|
||||
return Promise.reject(msg)
|
||||
case RequestCodeEnum.LOGIN_FAILURE:
|
||||
userStore.logout()
|
||||
return Promise.reject(data)
|
||||
case RequestCodeEnum.NOT_INSTALL:
|
||||
window.location.replace('/install/install.php')
|
||||
break
|
||||
default:
|
||||
return data
|
||||
}
|
||||
},
|
||||
responseInterceptorsCatchHook(err) {
|
||||
return err
|
||||
}
|
||||
}
|
||||
}
|
||||
return new Request(
|
||||
// 深度合并
|
||||
merge(defaultOptions, opt || {})
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
import {
|
||||
FetchOptions,
|
||||
$fetch,
|
||||
$Fetch,
|
||||
FetchResponse,
|
||||
RequestOptions,
|
||||
FileParams,
|
||||
RequestEventStreamOptions
|
||||
} from 'ofetch'
|
||||
import { merge } from 'lodash-es'
|
||||
import { isFunction } from '../validate'
|
||||
import { RequestMethodsEnum } from '@/enums/requestEnums'
|
||||
import { objectToQuery } from '../util'
|
||||
|
||||
export class Request {
|
||||
private requestOptions: RequestOptions
|
||||
private fetchInstance: $Fetch
|
||||
constructor(private fetchOptions: FetchOptions) {
|
||||
this.fetchInstance = $fetch.create(fetchOptions)
|
||||
this.requestOptions = fetchOptions.requestOptions
|
||||
}
|
||||
|
||||
getInstance() {
|
||||
return this.fetchInstance
|
||||
}
|
||||
/**
|
||||
* @description get请求
|
||||
*/
|
||||
get(fetchOptions: FetchOptions, requestOptions?: Partial<RequestOptions>) {
|
||||
return this.request(
|
||||
{ ...fetchOptions, method: RequestMethodsEnum.GET },
|
||||
requestOptions
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description post请求
|
||||
*/
|
||||
post(fetchOptions: FetchOptions, requestOptions?: Partial<RequestOptions>) {
|
||||
return this.request(
|
||||
{ ...fetchOptions, method: RequestMethodsEnum.POST },
|
||||
requestOptions
|
||||
)
|
||||
}
|
||||
/**
|
||||
* @description: 文件上传
|
||||
*/
|
||||
uploadFile(options: FetchOptions, params: FileParams) {
|
||||
const formData = new FormData()
|
||||
const customFilename = params.name || 'file'
|
||||
formData.append(customFilename, params.file)
|
||||
if (params.data) {
|
||||
Object.keys(params.data).forEach((key) => {
|
||||
const value = params.data![key]
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((item) => {
|
||||
formData.append(`${key}[]`, item)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
formData.append(key, params.data![key])
|
||||
})
|
||||
}
|
||||
return this.request({
|
||||
...options,
|
||||
method: RequestMethodsEnum.POST,
|
||||
body: formData
|
||||
})
|
||||
}
|
||||
/**
|
||||
* @description 请求函数
|
||||
*/
|
||||
request(
|
||||
fetchOptions: FetchOptions,
|
||||
requestOptions?: Partial<RequestOptions>
|
||||
): Promise<any> {
|
||||
let mergeOptions = merge({}, this.fetchOptions, fetchOptions)
|
||||
mergeOptions.requestOptions = merge(
|
||||
{},
|
||||
this.requestOptions,
|
||||
requestOptions
|
||||
)
|
||||
const {
|
||||
requestInterceptorsHook,
|
||||
responseInterceptorsHook,
|
||||
responseInterceptorsCatchHook
|
||||
} = this.requestOptions
|
||||
if (requestInterceptorsHook && isFunction(requestInterceptorsHook)) {
|
||||
mergeOptions = requestInterceptorsHook(mergeOptions)
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
return this.fetchInstance
|
||||
.raw(mergeOptions.url, mergeOptions)
|
||||
.then(async (response: FetchResponse<any>) => {
|
||||
if (
|
||||
responseInterceptorsHook &&
|
||||
isFunction(responseInterceptorsHook)
|
||||
) {
|
||||
try {
|
||||
response = await responseInterceptorsHook(
|
||||
response,
|
||||
mergeOptions
|
||||
)
|
||||
|
||||
resolve(response)
|
||||
} catch (error) {
|
||||
reject(error)
|
||||
}
|
||||
return
|
||||
}
|
||||
resolve(response)
|
||||
})
|
||||
.catch((err) => {
|
||||
if (
|
||||
responseInterceptorsCatchHook &&
|
||||
isFunction(responseInterceptorsCatchHook)
|
||||
) {
|
||||
reject(responseInterceptorsCatchHook(err))
|
||||
return
|
||||
}
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
/**
|
||||
* @description 添加单位
|
||||
* @param {String | Number} value 值 100
|
||||
* @param {String} unit 单位 px em rem
|
||||
*/
|
||||
export const addUnit = (value: string | number, unit = 'px') => {
|
||||
return !Object.is(Number(value), NaN) ? `${value}${unit}` : value
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 树转数组，队列实现广度优先遍历
|
||||
* @param {Array} data 数据
|
||||
* @param {Object} props `{ children: 'children' }`
|
||||
*/
|
||||
|
||||
export const treeToArray = (data: any[], props = { children: 'children' }) => {
|
||||
data = JSON.parse(JSON.stringify(data))
|
||||
const { children } = props
|
||||
const newData = []
|
||||
const queue: any[] = []
|
||||
data.forEach((child: any) => queue.push(child))
|
||||
while (queue.length) {
|
||||
const item: any = queue.shift()
|
||||
if (item[children]) {
|
||||
item[children].forEach((child: any) => queue.push(child))
|
||||
delete item[children]
|
||||
}
|
||||
newData.push(item)
|
||||
}
|
||||
return newData
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取正确的路经
|
||||
* @param {String} path 数据
|
||||
*/
|
||||
export function getNormalPath(path: string) {
|
||||
if (path.length === 0 || !path || path == 'undefined') {
|
||||
return path
|
||||
}
|
||||
const newPath = path.replace('//', '/')
|
||||
const length = newPath.length
|
||||
if (newPath[length - 1] === '/') {
|
||||
return newPath.slice(0, length - 1)
|
||||
}
|
||||
return newPath
|
||||
}
|
||||
|
||||
/**
|
||||
* @description对象格式化为Query语法
|
||||
* @param { Object } params
|
||||
* @return {string} Query语法
|
||||
*/
|
||||
export function objectToQuery(params: Record<string, any>): string {
|
||||
let query = ''
|
||||
for (const props of Object.keys(params)) {
|
||||
const value = params[props]
|
||||
if (!isEmpty(value)) {
|
||||
query += props + '=' + value + '&'
|
||||
}
|
||||
}
|
||||
return query.slice(0, -1)
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
export {
|
||||
isArray,
|
||||
isBoolean,
|
||||
isDate,
|
||||
isObject,
|
||||
isFunction,
|
||||
isString,
|
||||
isNumber,
|
||||
isNull
|
||||
} from 'lodash-es'
|
||||
import { isObject } from 'lodash-es'
|
||||
/**
|
||||
* @description 是否是http，邮件，电话号码
|
||||
*/
|
||||
export function isExternal(path: string) {
|
||||
return /^(https?:|mailto:|tel:)/.test(path)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 是否是http
|
||||
*/
|
||||
export const isLinkHttp = (link: string): boolean =>
|
||||
/^(https?:)?\/\//.test(link)
|
||||
|
||||
/**
|
||||
* @description 是否是电话号码
|
||||
*/
|
||||
export const isLinkTel = (link: string): boolean => /^tel:/.test(link)
|
||||
|
||||
/**
|
||||
* @description 是否是邮件
|
||||
*/
|
||||
export const isLinkMailto = (link: string): boolean => /^mailto:/.test(link)
|
||||
|
||||
/**
|
||||
* @description 是否为空
|
||||
* @param {unknown} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
export const isEmpty = (value: unknown) => {
|
||||
return value !== null && value !== '' && typeof value !== 'undefined'
|
||||
}
|
||||
/**
|
||||
* @description 是否为空对象
|
||||
* @param {Object} value
|
||||
* @return {Boolean}
|
||||
*/
|
||||
export const isEmptyObject = (target: object) => {
|
||||
return isObject(target) && !Object.keys(target).length
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./index.html',
|
||||
'./src/**/*.{vue,js}'
|
||||
],
|
||||
theme: {
|
||||
colors: {
|
||||
white: 'var(--color-white)',
|
||||
black: 'var(--el-color-black)',
|
||||
primary: {
|
||||
DEFAULT: 'var(--el-color-primary)',
|
||||
'light-3': 'var(--el-color-primary-light-3)',
|
||||
'light-5': 'var(--el-color-primary-light-5)',
|
||||
'light-7': 'var(--el-color-primary-light-7)',
|
||||
'light-8': 'var(--el-color-primary-light-8)',
|
||||
'light-9': 'var(--el-color-primary-light-9)',
|
||||
'dark-2': 'var(--el-color-primary-dark-2)'
|
||||
},
|
||||
success: 'var(--el-color-success)',
|
||||
warning: 'var(--el-color-warning)',
|
||||
danger: 'var(--el-color-danger)',
|
||||
error: 'var(--el-color-error)',
|
||||
info: 'var(--el-color-info)',
|
||||
body: 'var(--el-bg-color)',
|
||||
page: 'var(--el-bg-color-page)',
|
||||
'tx-primary': 'var(--el-text-color-primary)',
|
||||
'tx-regular': 'var(--el-text-color-regular)',
|
||||
'tx-secondary': 'var(--el-text-color-secondary)',
|
||||
'tx-placeholder': 'var(--el-text-color-placeholder)',
|
||||
'tx-disabled': 'var(--el-text-color-disabled)',
|
||||
br: 'var(--el-border-color)',
|
||||
'br-light': 'var(--el-border-color-light)',
|
||||
'br-extra-light': 'var(--el-border-color-extra-light)',
|
||||
'br-dark': 'var( --el-border-color-dark)',
|
||||
fill: 'var(--el-fill-color)',
|
||||
mask: 'var(--el-mask-color)',
|
||||
overlay: 'var(--el-overlay-color-light)'
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'PingFang SC',
|
||||
'Arial',
|
||||
'Hiragino Sans GB',
|
||||
'Microsoft YaHei',
|
||||
'sans-serif'
|
||||
]
|
||||
},
|
||||
boxShadow: {
|
||||
DEFAULT: 'var(--el-box-shadow)',
|
||||
light: 'var(--el-box-shadow-light)',
|
||||
lighter: 'var(--el-box-shadow-lighter)',
|
||||
dark: 'var(--el-box-shadow-dark)'
|
||||
},
|
||||
fontSize: {
|
||||
xs: 'var(--el-font-size-extra-small)',
|
||||
sm: 'var( --el-font-size-small)',
|
||||
base: 'var( --el-font-size-base)',
|
||||
lg: 'var( --el-font-size-medium)',
|
||||
xl: 'var( --el-font-size-large)',
|
||||
'2xl': 'var( --el-font-size-extra-large)',
|
||||
'3xl': '20px',
|
||||
'4xl': '24px',
|
||||
'5xl': '28px',
|
||||
'6xl': '30px',
|
||||
'7xl': '36px',
|
||||
'8xl': '48px',
|
||||
'9xl': '60px'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"types": ["vite/client"],
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"composite":true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
"verbatimModuleSyntax": false,
|
||||
"baseUrl": ".", // 基础路径为项目根目录
|
||||
"paths": { "@/*": ["src/*"] } // 与 Vite 别名同步
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 5274,
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue