init
This commit is contained in:
30
.gitignore
vendored
Normal file
30
.gitignore
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
39
README.md
Normal file
39
README.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# vue-exc
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Run Unit Tests with [Vitest](https://vitest.dev/)
|
||||
|
||||
```sh
|
||||
npm run test:unit
|
||||
```
|
||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
7407
package-lock.json
generated
Normal file
7407
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
40
package.json
Normal file
40
package.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "vue-exc",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"test:unit": "vitest",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build --force"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"axios": "^1.7.5",
|
||||
"element-plus": "^2.8.1",
|
||||
"http-proxy-middleware": "^3.0.1",
|
||||
"less": "^4.2.0",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.29",
|
||||
"vue-router": "^4.4.3",
|
||||
"vuex": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/jsdom": "^21.1.7",
|
||||
"@types/node": "^20.14.5",
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.0",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"jsdom": "^24.1.0",
|
||||
"npm-run-all2": "^6.2.0",
|
||||
"typescript": "~5.4.0",
|
||||
"vite": "^5.3.1",
|
||||
"vitest": "^1.6.0",
|
||||
"vue-tsc": "^2.0.21"
|
||||
}
|
||||
}
|
||||
17
src/App.vue
Normal file
17
src/App.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import {RouterView} from 'vue-router'
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app {
|
||||
display: flex;
|
||||
border: 0px;
|
||||
}
|
||||
</style>
|
||||
18
src/api/myApi.js
Normal file
18
src/api/myApi.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request.js";
|
||||
// 发送验证码
|
||||
const getCode = (data) => {
|
||||
return request.post('/get/code', data)
|
||||
}
|
||||
|
||||
const userAuthentication = (data) => {
|
||||
return request.post('/user/authentication', data)
|
||||
}
|
||||
|
||||
const login = (data) => {
|
||||
return request.post('/login', data)
|
||||
}
|
||||
export {
|
||||
getCode,
|
||||
userAuthentication,
|
||||
login
|
||||
}
|
||||
86
src/assets/base.css
Normal file
86
src/assets/base.css
Normal file
@@ -0,0 +1,86 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
35
src/assets/main.css
Normal file
35
src/assets/main.css
Normal file
@@ -0,0 +1,35 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
el-header: 0rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: #181818;
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
55
src/components/A-side.vue
Normal file
55
src/components/A-side.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts" >
|
||||
import { ref,computed} from 'vue' ;
|
||||
import { useStore,mapstate } from 'vuex';
|
||||
const store = useStore();
|
||||
// const isCollapse = computed(()=>store.state.menu.isCollapse)
|
||||
const isCollapse = computed
|
||||
{
|
||||
mapstate(['isCollapse'])
|
||||
}
|
||||
import { useRouter} from 'vue-router';
|
||||
const router = useRouter();
|
||||
console.log(router,'router')
|
||||
const menuData = ref( router.options.routes[0].children);
|
||||
|
||||
console.log(menuData,'menuData')
|
||||
|
||||
import TreeMenu from "@/components/TreeMenu.vue";
|
||||
const handleOpen = ()=>{
|
||||
}
|
||||
const handleClose = ()=>{
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-menu
|
||||
:collapse="isCollapse"
|
||||
:style="{width:isCollapse?'64px':'230px'}"
|
||||
active-text-color="#ffd04b"
|
||||
background-color="#545c64"
|
||||
class="aside-container"
|
||||
default-active="2"
|
||||
text-color="#fff"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
>
|
||||
|
||||
<P class="aside-title">{{isCollapse?'DIDI': 'DIDI陪诊' }}</P>
|
||||
<TreeMenu :index ="1" :menuData="menuData"/>
|
||||
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.aside-container{
|
||||
height: 100%;
|
||||
.aside-title{
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height:50px;
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
src/components/TreeMenu.vue
Normal file
46
src/components/TreeMenu.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
const router = useRouter();
|
||||
|
||||
import {useStore} from "vuex";
|
||||
const store = useStore();
|
||||
const props = defineProps( ['menuData','index'] )
|
||||
// 点击后绑定域名,从router中获取
|
||||
const handleClick = ( item:any, active:any) => {
|
||||
store.commit('addMenu',item.meta)
|
||||
router.push(item.meta.path)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-for = '(item, index) in props.menuData' >
|
||||
<el-menu-item
|
||||
@click=" handleClick (item,`${props.index}-${item.meta.id} `)"
|
||||
v-if = "!item.children||item.children.length==0"
|
||||
:index = "`${props.index}-${item.meta.id} `"
|
||||
:key = "`${props.index}-${item.meta.id}`" >
|
||||
<el-icon size = "20">
|
||||
<component :is = "item.meta.icon"></component>
|
||||
</el-icon>
|
||||
<span>{{ item.meta.name }}</span>
|
||||
</el-menu-item>
|
||||
|
||||
|
||||
<el-sub-menu v-else
|
||||
:index = "`${props.index}-${item.meta.id} `">
|
||||
<template #title>
|
||||
<el-icon size = "20">
|
||||
<component :is = "item.meta.icon"></component>
|
||||
</el-icon>
|
||||
<span>{{ item.meta.name }}</span>
|
||||
</template>
|
||||
<TreeMenu
|
||||
:index = "`${props.index}-${item.meta.id} `"
|
||||
:menuData = "item.children"/>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
15
src/components/myMain.vue
Normal file
15
src/components/myMain.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<p clss="myMain">陪诊系统</p>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.myMain{
|
||||
display: flex;
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
</style>
|
||||
148
src/components/nveHeader.vue
Normal file
148
src/components/nveHeader.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink,useRoute,useRouter} from "vue-router";
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
// 拿到实例,与this.$store等效
|
||||
import {useStore} from "vuex";
|
||||
const store = useStore();
|
||||
import {computed} from "vue";
|
||||
// computed 属性值是通过计算得出的,无法直接访问。,这个函数会在依赖发生变化时重新执行
|
||||
const selectMenus = computed(()=>store.state.menu.selectMenus)
|
||||
// 点击关闭TAG
|
||||
const closeTab = (item:any,index:any)=>{
|
||||
store.commit('closeMenu',item)
|
||||
// 删除的非当前页
|
||||
if (route.path !== item.path){
|
||||
return
|
||||
}
|
||||
const selectMenusData = selectMenus.value
|
||||
//删除最后一个
|
||||
if (index == selectMenusData.length) {
|
||||
// 如果tag只有一个元素
|
||||
if ( !selectMenusData.length ) {
|
||||
router.push('/')
|
||||
} else {
|
||||
router.push({
|
||||
path: selectMenusData[index - 1].path
|
||||
})
|
||||
}
|
||||
}else{//删除中间位置
|
||||
router.push({
|
||||
path:selectMenusData[index].path
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header-container">
|
||||
<div class="header-left flex-box">
|
||||
<el-icon clsass="icon" size="20" @click="store.commit('collapseMenu')"><Fold /></el-icon>
|
||||
<ul class="flex-box tab ">
|
||||
<li v-for = "item in selectMenus"
|
||||
:key="item.path"
|
||||
:class="{selected:route.path===item.path}"
|
||||
class="flex-box tab ">
|
||||
<!-- 截取图标-->
|
||||
<el-icon size="14" ><component :is="item.icon"/></el-icon>
|
||||
<!-- 截取名字-->
|
||||
<!-- 用户点击这个链接时,Vue Router 会根据 item.path 的值导航到相应的路由。-->
|
||||
<router-link class="text tab flex-box" :to="item.path">{{item.name}}</router-link>
|
||||
<el-icon class="close" @click="closeTab(item,index)" size="14" ><Close/></el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<el-dropdown>
|
||||
<div class="el-dropdown-link flex-box">
|
||||
<el-avatar
|
||||
src="//cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
|
||||
/>
|
||||
<p class="username">admin</p>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
||||
<el-dropdown-item disabled>Action 4</el-dropdown-item>
|
||||
<el-dropdown-item divided>Action 5</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.flex-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.header-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
padding-right: 25px;
|
||||
.header-left{
|
||||
height: 100%;
|
||||
color: #181818;
|
||||
.icon{
|
||||
width: 45px;
|
||||
height: 100%;
|
||||
.icon:hover{
|
||||
background-color: #f5f5f5;
|
||||
//鼠标过去变手
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.tab{
|
||||
padding: 0 10px;
|
||||
height: 100%;
|
||||
.text{
|
||||
margin: 0 5px;
|
||||
}
|
||||
.close{
|
||||
visibility: hidden;
|
||||
}
|
||||
&.selected {
|
||||
a {
|
||||
color: #409eff;
|
||||
}
|
||||
i {
|
||||
color: #409eff;
|
||||
}
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
}
|
||||
.tab:hover{
|
||||
background-color: #f5f5f5;
|
||||
.close{
|
||||
visibility: inherit;
|
||||
cursor: pointer;
|
||||
color: #181818;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-right{
|
||||
.username{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.a{
|
||||
height: 100%;
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
29
src/main.ts
Normal file
29
src/main.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import store from './store/index'
|
||||
|
||||
import ElementPlus from 'element-plus'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import axios from 'axios'
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
app.config.globalProperties.axios = axios
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
// 挂载
|
||||
app.use(store)
|
||||
app.use(ElementPlus)
|
||||
|
||||
app.mount('#app')
|
||||
BIN
src/myImg/loginImg/1.png
Normal file
BIN
src/myImg/loginImg/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/myImg/loginImg/dfw.png
Normal file
BIN
src/myImg/loginImg/dfw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/myImg/loginImg/dzf.png
Normal file
BIN
src/myImg/loginImg/dzf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/myImg/loginImg/yqx.png
Normal file
BIN
src/myImg/loginImg/yqx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
src/myImg/loginImg/ywc.png
Normal file
BIN
src/myImg/loginImg/ywc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
12
src/pinia/counter.ts
Normal file
12
src/pinia/counter.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
71
src/router/index.ts
Normal file
71
src/router/index.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import MyMain from "@/views/My-main.vue";
|
||||
import login from "@/views/login/index.vue";
|
||||
import Admin from "@/views/auth/admin/index.vue";
|
||||
import Group from "@/views/auth/group/index.vue";
|
||||
import Order from "@/views/vppz/order/index.vue";
|
||||
import Staff from "@/views/vppz/staff/index.vue";
|
||||
import Dashboard from "@/views/dashboard/index.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'My-main',
|
||||
component: MyMain,
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
meta: {id: 1, name: '控制台', icon: 'platform', path: '/dashboard', describe: '用于展示当前系统中的统计数据、统计报表及重要实时数据'},
|
||||
component: Dashboard
|
||||
},
|
||||
{
|
||||
path: '/auth',
|
||||
meta: {id: 2, name: '权限管理', icon: 'Grid'},
|
||||
children: [
|
||||
{
|
||||
path: '/auth/admin',
|
||||
alias: ['admin'],
|
||||
meta: {id: 1, name: '账号管理', icon: 'Avatar', path: '/auth/admin', describe: "管理员可以进行编辑,权限修改后需要登出才会生效"},
|
||||
component: Admin
|
||||
},
|
||||
{
|
||||
path: '/auth/group',
|
||||
meta: {id: 2, name: '菜单管理', icon: 'Menu', path: '/auth/group', describe: "菜单规则通常对应一个控制器的方法,同时菜单栏数据也从规则中获取"},
|
||||
component: Group
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/vppz',
|
||||
meta: {id: 3, name: 'DIDI陪诊', icon: 'BellFilled'},
|
||||
children: [
|
||||
{
|
||||
path: '/vppz/staff',
|
||||
alias: ['staff'],
|
||||
meta: {
|
||||
id: '1', name: '陪护管理', icon: 'checked', path: '/vppz/staff', describe: '陪护师可以进行创建和' +
|
||||
'修改,设置对应生效状态控制C端选择'
|
||||
},
|
||||
component: Staff
|
||||
},
|
||||
{
|
||||
path: '/vppz/order',
|
||||
meta: {
|
||||
id: '2', name: '订单管理', icon: 'List', path: '/vppz/order', describe: 'c端下单后可以查看所有订单状态,已支付的订单可以完成' +
|
||||
'陪护状态修改'
|
||||
},
|
||||
component: Order
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: login
|
||||
},
|
||||
],
|
||||
})
|
||||
export default router
|
||||
8
src/store/index.ts
Normal file
8
src/store/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import {createStore} from 'vuex'
|
||||
import menu from './menu'
|
||||
|
||||
export default createStore({
|
||||
modules: {
|
||||
menu
|
||||
}
|
||||
})
|
||||
38
src/store/menu.ts
Normal file
38
src/store/menu.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
|
||||
// 引入VUEX
|
||||
import vuex from 'vuex'
|
||||
|
||||
// 用于存储数据
|
||||
const state = {
|
||||
isCollapse: false,
|
||||
selectMenus: [],
|
||||
}
|
||||
// 用于操作数据
|
||||
const mutations = {
|
||||
collapseMenu(state: any) {
|
||||
state.isCollapse = !state.isCollapse
|
||||
},
|
||||
addMenu(state: any, payload: any) {
|
||||
// 对数据进行去重
|
||||
if (state.selectMenus.findIndex(item => item.path === payload.path) === -1) {
|
||||
state.selectMenus.push(payload)
|
||||
}
|
||||
},
|
||||
closeMenu(state: any, payload: any) {
|
||||
// 找到点击数据的索引
|
||||
const index = state.selectMenus.findIndex(val => val.path === payload.path)
|
||||
|
||||
// 通过索引删除,index表示删除的位置 1表示删除的个数
|
||||
state.selectMenus.splice(index, 1)
|
||||
|
||||
},
|
||||
}
|
||||
// 用于响应组件的动作
|
||||
const actions = {
|
||||
|
||||
}
|
||||
// 暴露STORE
|
||||
export default {
|
||||
state,
|
||||
mutations,
|
||||
}
|
||||
32
src/utils/request.js
Normal file
32
src/utils/request.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import axios from 'axios'
|
||||
import {ElMessage} from 'element-plus'
|
||||
|
||||
const http = axios.create({
|
||||
baseURL: '/api',
|
||||
timeout: 5000
|
||||
})
|
||||
// 添加拦截器,request是请求,response是响应
|
||||
http.interceptors.request.use(function (config) {
|
||||
// 在发送请求之前做些什么,localStorage缓存
|
||||
const token = localStorage.getItem('pz-token')
|
||||
// 不需要添加token的白名单
|
||||
const whiteList = ['/get/code', '/user/authentication', '/login']
|
||||
if (token && !whiteList.includes(config.url)) {
|
||||
config.headers['x-token'] = token
|
||||
}
|
||||
return config;
|
||||
}, function (error) {
|
||||
// 对请求错误做些什么
|
||||
return Promise.reject(error);
|
||||
});
|
||||
// 添加响应拦截器
|
||||
http.interceptors.response.use(function (response) {
|
||||
// 对接口异常的数据,给用户提示
|
||||
if (response.data.code === -1) {
|
||||
ElMessage.error(response.data.message)
|
||||
}
|
||||
return response;
|
||||
}, function (error) {
|
||||
return Promise.reject(error);
|
||||
});
|
||||
export default http
|
||||
42
src/views/My-main.vue
Normal file
42
src/views/My-main.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import ASide from "@/components/A-side.vue";
|
||||
import nveHeader from "@/components/nveHeader.vue";
|
||||
import {RouterView} from 'vue-router';
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-aside style="width: auto">
|
||||
<ASide/>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<nve-header/>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<RouterView/>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.common-layout {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
.el-container{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.el-header{
|
||||
padding: 0px;
|
||||
|
||||
}
|
||||
.el-aside{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
11
src/views/auth/admin/index.vue
Normal file
11
src/views/auth/admin/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
11
src/views/auth/group/index.vue
Normal file
11
src/views/auth/group/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
11
src/views/dashboard/index.vue
Normal file
11
src/views/dashboard/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
178
src/views/login/index.vue
Normal file
178
src/views/login/index.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<script setup lang="ts">
|
||||
import {reactive, ref} from 'vue'
|
||||
import {ElMessage} from "element-plus"
|
||||
// 暴露为对象需要加花括号
|
||||
import { getCode , userAuthentication ,login } from "@/api/myApi"
|
||||
import {useRouter} from 'vue-router'
|
||||
|
||||
const imgUrl = new URL("@/myImg/loginImg/1.png", import.meta.url).href
|
||||
// 创建切换表单
|
||||
const formType = ref(0)
|
||||
// 点击切换登录和注册
|
||||
const handleChange = () => {
|
||||
formType.value = formType.value ? 0 : 1
|
||||
}
|
||||
// 账号校验规则
|
||||
const validateUser = (rule: any, value: string, callback: any) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入手机号'))
|
||||
} else {
|
||||
const phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
|
||||
phoneReg.test(value) ? callback() : callback(new Error('格式错误'))
|
||||
}
|
||||
}
|
||||
// 密码校验规则
|
||||
const validatePass = (rule: any, value: string, callback: any) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入密码'))
|
||||
} else {
|
||||
const reg = /^[a-zA-Z0-9_-]{4,16}$/
|
||||
reg.test(value) ? callback() : callback(new Error('格式错误'))
|
||||
}
|
||||
}
|
||||
// 表单校验
|
||||
const rules = reactive({
|
||||
userName: [{validator: validateUser, trigger: 'blur'}],
|
||||
passWord: [{validator: validatePass, trigger: 'blur'}]
|
||||
})
|
||||
|
||||
// 发送短信
|
||||
const countdown = reactive({
|
||||
validText: '获取验证码',
|
||||
time: 60
|
||||
})
|
||||
let flag = false
|
||||
// setInterval 是一个 JavaScript 函数,用于在指定的时间间隔内重复执行某个函数或代码块。它接受两个参数:第一个参数是要执行的函数或代码块,第二个参数是时间间隔(以毫秒为单位)。
|
||||
const countdownChange = () => {
|
||||
// 如果已发送不做处理
|
||||
if (flag) return
|
||||
// 判断手机号是否正确
|
||||
const phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
|
||||
if (!loginForm.userName || !phoneReg.test(loginForm.userName)) {
|
||||
return ElMessage({
|
||||
message: '请输入正确的手机号',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
// 倒计时
|
||||
const time = setInterval(() => {
|
||||
if (countdown.time <= 0) {
|
||||
countdown.time = 60
|
||||
countdown.validText = '获取验证码'
|
||||
flag = false
|
||||
clearInterval(time)
|
||||
} else {
|
||||
countdown.time -= 1
|
||||
countdown.validText = `剩余时间(${countdown.time}s)`
|
||||
}
|
||||
}, 1000)
|
||||
flag = true
|
||||
|
||||
getCode({tel: loginForm.userName}).then((data: any) => {
|
||||
if (data.code === 10000) {
|
||||
ElMessage.success('发送成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 表单提交
|
||||
const router = useRouter()
|
||||
const submitForm = async ( formEl: any | null) => {
|
||||
if (!formEl) return
|
||||
// validate手动触发表单校验
|
||||
await formEl.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
// 注册表单
|
||||
if (formType.value) {
|
||||
userAuthentication(loginForm).then((data:any) => {
|
||||
if (data.code === 10000) {
|
||||
ElMessage.success('注册成功')
|
||||
formType.value = 0
|
||||
}
|
||||
})
|
||||
} else {
|
||||
login(loginForm).then((data: any) => {
|
||||
if (data.code === 10000) {
|
||||
ElMessage.success('登录成功')
|
||||
localStorage.setItem('pz-taken', JSON.stringify(data.data.taken))
|
||||
localStorage.setItem('pz-userInfo', JSON.stringify(data.data.userInfo))
|
||||
router.push('/')
|
||||
}
|
||||
})
|
||||
}
|
||||
}else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const loginForm = reactive({
|
||||
userName: '',
|
||||
passWord: '',
|
||||
validCode: ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-row class="login-container" justify="center" :align="'middle'">
|
||||
<el-card style="max-width: 480px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<img :src="imgUrl" alt="">
|
||||
</div>
|
||||
</template>
|
||||
<div class="jump-link">
|
||||
<el-link type="primary" @click="handleChange">{{ formType === 0 ? '返回登录' : '注册账号' }}</el-link>
|
||||
</div>
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:rules="rules"
|
||||
:model="loginForm"
|
||||
style="max-width: 600px"
|
||||
clsaa="demo-ruleForm">
|
||||
<el-form-item prop="userName">
|
||||
<el-input v-model="loginForm.userName" placeholder="手机号" prefix-icon="UserFilled"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="passWord">
|
||||
<el-input v-model="loginForm.passWord" placeholder="密码" type="password" prefix-icon="Lock"/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="validCode">
|
||||
<el-input v-if="formType" :plain="true" v-model="loginForm.validCode" placeholder="验证码" prefix-icon="Lock">
|
||||
<template #append>
|
||||
<span @click="countdownChange">{{ countdown.validText }}</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :style="{width:'100%'}" @click="submitForm(loginFormRef)">
|
||||
{{ formType ? '注册账号' : '登录' }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
:deep(.el-card__header) {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.login-container {
|
||||
height: 100%;
|
||||
|
||||
.card-header {
|
||||
background-color: #899fe1;
|
||||
|
||||
img {
|
||||
width: 430px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.jump-link {
|
||||
text-align: right;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
11
src/views/vppz/order/index.vue
Normal file
11
src/views/vppz/order/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>12333333333</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
11
src/views/vppz/staff/index.vue
Normal file
11
src/views/vppz/staff/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
14
tsconfig.app.json
Normal file
14
tsconfig.app.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.vitest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
19
tsconfig.node.json
Normal file
19
tsconfig.node.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"extends": "@tsconfig/node20/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
11
tsconfig.vitest.json
Normal file
11
tsconfig.vitest.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"extends": "./tsconfig.app.json",
|
||||
"exclude": [],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
|
||||
|
||||
"lib": [],
|
||||
"types": ["node", "jsdom"]
|
||||
}
|
||||
}
|
||||
35
vite.config.ts
Normal file
35
vite.config.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import {fileURLToPath, URL} from 'node:url'
|
||||
|
||||
import {defineConfig} from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
|
||||
//
|
||||
// const {createProxyMiddleware} = require('http-proxy-middleware');
|
||||
// app.use('/api', createProxyMiddleware({
|
||||
// target: '/https:/v3pz.itndedu.com/v3pz/',
|
||||
// changeOrigin: true,
|
||||
// pathRewrite: {'^/api': ''}
|
||||
// }));
|
||||
//
|
||||
// // https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'https://v3pz.itndedu.com/v3pz/',
|
||||
changeOrigin: true,
|
||||
rewrite: (path): any => path.replace("/api", ''),
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
14
vitest.config.ts
Normal file
14
vitest.config.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
|
||||
import viteConfig from './vite.config'
|
||||
|
||||
export default mergeConfig(
|
||||
viteConfig,
|
||||
defineConfig({
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
exclude: [...configDefaults.exclude, 'e2e/**'],
|
||||
root: fileURLToPath(new URL('./', import.meta.url))
|
||||
}
|
||||
})
|
||||
)
|
||||
Reference in New Issue
Block a user