后台管理第一次提交
This commit is contained in:
commit
25a377d05c
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
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
33
README.md
Normal file
33
README.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# vue_project
|
||||
|
||||
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
|
||||
```
|
||||
7
env.d.ts
vendored
Normal file
7
env.d.ts
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
declare module '*.vue' {
|
||||
import { defineComponent } from 'vue';
|
||||
const component: ReturnType<typeof defineComponent>;
|
||||
export default component;
|
||||
}
|
||||
|
||||
declare module '*.js'
|
||||
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>
|
||||
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"name": "vue_project",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
33
package.json
Normal file
33
package.json
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "vue_project",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build --force"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"axios": "^1.7.2",
|
||||
"element-plus": "^2.7.5",
|
||||
"mitt": "^3.0.1",
|
||||
"querystring": "^0.2.1",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/node": "^20.12.5",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"npm-run-all2": "^6.1.2",
|
||||
"sass": "^1.77.5",
|
||||
"typescript": "~5.4.0",
|
||||
"vite": "^5.2.8",
|
||||
"vue-tsc": "^2.0.11"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
13
src/App.vue
Normal file
13
src/App.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<RouterView></RouterView>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
BIN
src/assets/admin.jpg
Normal file
BIN
src/assets/admin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
16
src/assets/gloable.css
Normal file
16
src/assets/gloable.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body{
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.ml-5{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.pd-10{
|
||||
padding:10px 0;
|
||||
}
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
src/img/Login/login_top.png
Normal file
BIN
src/img/Login/login_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
src/img/Login/登录底图.png
Normal file
BIN
src/img/Login/登录底图.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 642 KiB |
37
src/layout/Manage.vue
Normal file
37
src/layout/Manage.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div style="height: 100vh">
|
||||
|
||||
<el-container style="min-height: 100%">
|
||||
|
||||
<!-- 侧边栏-->
|
||||
<Aside/>
|
||||
|
||||
<!-- 主体-->
|
||||
<el-container>
|
||||
<!-- 头部-->
|
||||
<el-header style="font-size: 12px; border-bottom:2px solid #ccc; line-height: 60px; height: 70px;">
|
||||
<Header/>
|
||||
</el-header>
|
||||
<!-- 身体-->
|
||||
<el-main>
|
||||
<!-- 表示当前页面的子路由会在router-view里面展示-->
|
||||
<router-view/>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import Aside from '@/layout/components/Aside.vue'
|
||||
import Header from "@/layout/components/Header.vue";
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
96
src/layout/components/Aside.vue
Normal file
96
src/layout/components/Aside.vue
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); box-shadow: rgba(0, 21, 155, 0.35) 2px 0 6px">
|
||||
<el-aside :style="AsideObj">
|
||||
<el-menu
|
||||
style="height: 100vh; overflow-x: hidden"
|
||||
background-color="rgb(170, 113, 81)"
|
||||
:collapse="isCollapse"
|
||||
:collapse-transition="false"
|
||||
text-color="#fff"
|
||||
router
|
||||
active-text-color="#ffd04b">
|
||||
<div style="height: 80px; color: white; font-weight: bold;
|
||||
display: flex; align-items: center; justify-content: center">
|
||||
<img src="../../assets/logo.png" alt="" style="height: 30px">
|
||||
<span style="margin-left: 5px" v-show="isShow">泠珑水阁管理系统</span>
|
||||
</div>
|
||||
|
||||
<el-sub-menu index="1">
|
||||
<template #title>
|
||||
<el-icon><HomeFilled /></el-icon>
|
||||
<span>用户管理</span>
|
||||
</template>
|
||||
|
||||
<el-menu-item index="/UserManagement">
|
||||
<el-icon><List /></el-icon>
|
||||
<span slot="title">用户列表</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/PersonalCenter">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span slot="title">个人中心</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-sub-menu index="2">
|
||||
<template #title>
|
||||
<el-icon><HomeFilled /></el-icon>
|
||||
<span>商品管理</span>
|
||||
</template>
|
||||
|
||||
<el-menu-item index="/AddProduct">
|
||||
<el-icon><Menu /></el-icon>
|
||||
<span slot="title">添加商品</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="/MerchandiseCenter">
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
<span slot="title">商品中心</span>
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
</el-aside>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import { defineProps } from 'vue';
|
||||
import emitter from '@/utils/emitter'
|
||||
import router from '@/router';
|
||||
import {List} from "@element-plus/icons-vue";
|
||||
defineProps(['send-data'])
|
||||
|
||||
const showLog = ref(true)
|
||||
|
||||
const isCollapse = ref(false)
|
||||
const isShow = ref(true)
|
||||
const sideWidth = ref(200)
|
||||
const AsideObj = ref({
|
||||
width: '200px'
|
||||
})
|
||||
|
||||
emitter.on('Aside', (value:any) => {
|
||||
showLog.value = value
|
||||
if(showLog.value){
|
||||
AsideObj.value.width = '64px'
|
||||
isCollapse.value = true
|
||||
isShow.value = false
|
||||
sideWidth.value = 64
|
||||
}else{
|
||||
AsideObj.value.width = '200px'
|
||||
isCollapse.value = false
|
||||
isShow.value = true
|
||||
sideWidth.value = 200
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
148
src/layout/components/Header.vue
Normal file
148
src/layout/components/Header.vue
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
<!--<template>-->
|
||||
<!-- <div style=" height: 70px; width: 1248px; display: flex;-->
|
||||
<!-- justify-content: space-between; align-items: center;">-->
|
||||
<!-- <div style=" display: flex; justify-content: center;-->
|
||||
<!-- align-items: center; margin-left: 10px">-->
|
||||
<!-- <el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px"><Expand/></el-icon>-->
|
||||
<!-- <el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px"><Fold /></el-icon>-->
|
||||
|
||||
|
||||
<!-- <el-breadcrumb separator="/">-->
|
||||
<!-- <el-breadcrumb-item :to="{ path: currentPath}">{{ strArr[0] }}</el-breadcrumb-item>-->
|
||||
<!-- <el-breadcrumb-item><a :href="currentPath">{{ strArr[1] }}</a></el-breadcrumb-item>-->
|
||||
<!-- </el-breadcrumb>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div :style="{display: 'flex', justifyContent:'center', alignItems: 'center', marginRight: offset + 'px'}">-->
|
||||
<!-- <el-avatar style="margin-right: 10px">-->
|
||||
<!-- <img src="../assets/admin.jpg" alt="">-->
|
||||
<!-- </el-avatar>-->
|
||||
|
||||
<!-- <el-dropdown style="cursor: pointer;" size="default">-->
|
||||
<!-- <span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">-->
|
||||
<!-- <span>{{ currentUser.username }}</span><el-icon class="el-icon--right"><arrow-down /></el-icon>-->
|
||||
<!-- </span>-->
|
||||
<!-- <template #dropdown>-->
|
||||
<!-- <el-dropdown-menu>-->
|
||||
<!-- <el-dropdown-item @click="$router.push('/manage/person')">个人信息</el-dropdown-item>-->
|
||||
<!-- <el-dropdown-item @click="logout">退出登录</el-dropdown-item>-->
|
||||
<!-- </el-dropdown-menu>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-dropdown>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--</template>-->
|
||||
|
||||
<!--<script setup lang="ts">-->
|
||||
<!--import {computed, onMounted, ref} from 'vue'-->
|
||||
<!--import emitter from '@/utils/emitter'-->
|
||||
<!--import { useRouter} from 'vue-router';-->
|
||||
<!--import { ElMessage } from 'element-plus';-->
|
||||
<!--import { pathInfo } from '@/store/pathInfo'-->
|
||||
<!--const pathStore = pathInfo()-->
|
||||
<!--const strArr = computed(() => pathStore.currentPathName.split('/'))-->
|
||||
<!--const currentPath = computed(() => pathStore.currentPath)-->
|
||||
|
||||
<!--const router = useRouter()-->
|
||||
<!--const offset = ref(20)-->
|
||||
<!--const showLog = ref(false)-->
|
||||
<!--const currentUser = ref('')-->
|
||||
|
||||
<!--onMounted(() => {-->
|
||||
<!-- currentUser.value = JSON.parse(localStorage.getItem('user'))-->
|
||||
<!--})-->
|
||||
|
||||
|
||||
|
||||
|
||||
<!--const changeState = () => {-->
|
||||
<!-- showLog.value = !showLog.value-->
|
||||
<!-- emitter.emit('Aside', showLog.value)-->
|
||||
<!-- if(showLog.value){-->
|
||||
<!-- offset.value = -116-->
|
||||
<!-- }else{-->
|
||||
<!-- offset.value = 20-->
|
||||
<!-- }-->
|
||||
<!--}-->
|
||||
|
||||
<!--const logout = () => {-->
|
||||
<!-- ElMessage({-->
|
||||
<!-- message: '退出成功',-->
|
||||
<!-- type: 'success'-->
|
||||
<!-- })-->
|
||||
<!-- router.push('/login')-->
|
||||
<!-- localStorage.removeItem('user')-->
|
||||
<!--}-->
|
||||
|
||||
<!--</script>-->
|
||||
|
||||
<!--<style scoped>-->
|
||||
<!--:deep(.el-tooltip__trigger:focus-visible) {-->
|
||||
<!-- outline: unset;-->
|
||||
<!--}-->
|
||||
|
||||
<!--</style>-->
|
||||
<template>
|
||||
<div style=" height: 70px; width: 1248px; display: flex;
|
||||
justify-content: space-between; align-items: center;">
|
||||
<div style=" display: flex; justify-content: center;
|
||||
align-items: center; margin-left: 10px">
|
||||
<el-icon @click="changeState" v-show="showLog" size="20px" style="margin-right: 10px"><Expand/></el-icon>
|
||||
<el-icon @click="changeState" v-show="!showLog" size="20px" style="margin-right: 10px"><Fold /></el-icon>
|
||||
|
||||
|
||||
<el-breadcrumb separator="/">
|
||||
<a-breadcrumb-item>{{route.name}}</a-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div :style="{display: 'flex', justifyContent:'center', alignItems: 'center', marginRight: offset + 'px'}">
|
||||
<el-avatar style="margin-right: 10px">
|
||||
<img src="../../assets/admin.jpg" alt="">
|
||||
</el-avatar>
|
||||
|
||||
<el-dropdown style="cursor: pointer;" size="default">
|
||||
<span class="el-dropdown-link" style="font-size: 16px; font-weight: bold;">
|
||||
<span>用户名称</span><el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="$router.push('/PersonalCenter')">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue'
|
||||
import emitter from '@/utils/emitter'
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const offset = ref(20)
|
||||
const showLog = ref(false)
|
||||
|
||||
const logout = () => {
|
||||
router.push('/')
|
||||
}
|
||||
const changeState = () => {
|
||||
showLog.value = !showLog.value
|
||||
emitter.emit('Aside', showLog.value)
|
||||
if(showLog.value){
|
||||
offset.value = -116
|
||||
}else{
|
||||
offset.value = 20
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-tooltip__trigger:focus-visible) {
|
||||
outline: unset;
|
||||
}
|
||||
</style>
|
||||
19
src/main.ts
Normal file
19
src/main.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import './assets/gloable.css'
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.use(ElementPlus, {size: 'small'})
|
||||
app.use(router)
|
||||
app.mount('#app')
|
||||
|
||||
|
||||
11
src/router/index.ts
Normal file
11
src/router/index.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import {createRouter, createWebHashHistory} from "vue-router";
|
||||
import {routes} from "./routes";
|
||||
|
||||
// 创建路由实例并传递 `routes` 配置
|
||||
const router = createRouter({
|
||||
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
|
||||
history: createWebHashHistory(),
|
||||
routes, // `routes: routes` 的缩写
|
||||
})
|
||||
|
||||
export default router
|
||||
35
src/router/routes.ts
Normal file
35
src/router/routes.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
|
||||
|
||||
export const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name:'login',
|
||||
component: () => import("../views/Login.vue")
|
||||
},
|
||||
{
|
||||
path: '/manage',
|
||||
component: () => import("@/layout/Manage.vue"),
|
||||
children:[
|
||||
{
|
||||
path: '/UserManagement',
|
||||
name:'用户列表',
|
||||
component: ()=> import("../views/User/UserManagement.vue")
|
||||
},
|
||||
{
|
||||
path: '/PersonalCenter',
|
||||
name:'个人中心',
|
||||
component: ()=> import("../views/User/PersonalCenter.vue")
|
||||
},
|
||||
{
|
||||
path: '/AddProduct',
|
||||
name: '添加商品',
|
||||
component: ()=> import("../views/Commodity/AddProduct.vue")
|
||||
},
|
||||
{
|
||||
path: '/MerchandiseCenter',
|
||||
name: '商品中心',
|
||||
component: ()=> import("../views/Commodity/MerchandiseCenter.vue")
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
5
src/utils/emitter.ts
Normal file
5
src/utils/emitter.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import mitt from 'mitt'
|
||||
|
||||
const emitter = mitt()
|
||||
|
||||
export default emitter
|
||||
34
src/utils/request.js
Normal file
34
src/utils/request.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import axios from 'axios'
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: 'http://localhost:9090'
|
||||
})
|
||||
instance.interceptors.request.use(
|
||||
config =>{ // 拦截器成功函数
|
||||
if(config.methods == "post"){
|
||||
config.data = querystring.stringify(config.data)
|
||||
}
|
||||
|
||||
// config:包含着网络请求的所有信息
|
||||
return config;
|
||||
},
|
||||
error =>{ // 拦截器失败函数
|
||||
|
||||
// 返回错误信息
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 拦截器----获取数据之前
|
||||
instance.interceptors.response.use(
|
||||
response =>{ // 拦截器成功函数
|
||||
return response.status == 200 ? Promise.resolve(response):Promise.reject(response)
|
||||
},
|
||||
error =>{ // 拦截器失败函数
|
||||
const { response } = error;
|
||||
errorHandle(response.status,response.info)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
export default instance
|
||||
143
src/views/Commodity/AddProduct.vue
Normal file
143
src/views/Commodity/AddProduct.vue
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<!-- 添加商品图片-->
|
||||
<div style="height: auto;margin-bottom: 10px;width: 480px;">
|
||||
<div style="font-size: 20px;margin-bottom: 10px">添加商品图片</div>
|
||||
<el-upload action="#" v-model:file-list="uploadedFiles" list-type="picture-card" :auto-upload="false" multiple="true">
|
||||
<el-icon><Plus /></el-icon>
|
||||
|
||||
<template #file="{ file }">
|
||||
<div>
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span
|
||||
class="el-upload-list__item-preview"
|
||||
@click="handlePictureCardPreview(file)"
|
||||
>
|
||||
<el-icon><zoom-in /></el-icon>
|
||||
</span>
|
||||
<span
|
||||
v-if="!disabled"
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<!-- 添加图文描述-->
|
||||
<div style="margin-bottom: 10px;">
|
||||
<div style="font-size: 20px;margin-bottom: 10px">添加图文描述</div>
|
||||
<el-upload action="#" v-model:file-list="uploadedDescription" list-type="picture-card" :auto-upload="false" multiple="true">
|
||||
<el-icon><Plus /></el-icon>
|
||||
|
||||
<template #file="{ file }">
|
||||
<div>
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span
|
||||
class="el-upload-list__item-preview"
|
||||
@click="handlePictureCardPreview(file)"
|
||||
>
|
||||
<el-icon><zoom-in /></el-icon>
|
||||
</span>
|
||||
<span
|
||||
v-if="!disabled"
|
||||
class="el-upload-list__item-delete"
|
||||
@click="descriptionRemove(file)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
<!-- 表单-->
|
||||
<div style="position: absolute;right: 20px;top: 100px;max-width: 60%" >
|
||||
<el-form :model="form" label-width="auto" style="width: 750px" size="large">
|
||||
<el-form-item label="产品名称">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="产品价格">
|
||||
<el-input v-model="form.price" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品">
|
||||
<el-input v-model="form.quantity" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为限定类产品" >
|
||||
<el-select v-model="form.region" placeholder="否">
|
||||
<el-option label="是" value="ture" />
|
||||
<el-option label="否" value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.region=='ture' " label="节日名称">
|
||||
<el-input v-model="form.festivalName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类型" >
|
||||
<el-radio-group v-model="form.resource" >
|
||||
<el-radio value="1">材料包</el-radio>
|
||||
<el-radio value="2">手持物</el-radio>
|
||||
<el-radio value="3">头饰</el-radio>
|
||||
<el-radio value="4">定制</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品标签">
|
||||
<el-input v-model="form.label" type="textarea" placeholder=""/>
|
||||
</el-form-item>
|
||||
<el-form-item label="详情描述">
|
||||
<el-input v-model="form.desc" type="textarea" placeholder="产品尺寸，服务等"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">上架</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref,reactive } from 'vue';
|
||||
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
|
||||
import type { UploadFile } from 'element-plus';
|
||||
|
||||
const dialogImageUrl = ref('');
|
||||
const dialogVisible = ref(false);
|
||||
const disabled = ref(false);
|
||||
const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
|
||||
const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
|
||||
const handleRemove = (file: UploadFile) => {
|
||||
uploadedFiles.value = uploadedFiles.value.filter((f) => f.uid !== file.uid);
|
||||
};
|
||||
const descriptionRemove = (file: UploadFile) => {
|
||||
uploadedDescription.value = uploadedDescription.value.filter((f) => f.uid !== file.uid);
|
||||
}
|
||||
const handlePictureCardPreview = (file: UploadFile) => {
|
||||
dialogImageUrl.value = file.url!;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
const form = reactive({
|
||||
name:'',
|
||||
price:'',
|
||||
quantity:'',//产品数量
|
||||
region:'',//是否为限定
|
||||
festivalName:'',//节日名称
|
||||
resource:'',//类型
|
||||
label:[],//商品标签
|
||||
desc:'',//详情描述
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
}
|
||||
</script>
|
||||
149
src/views/Commodity/MerchandiseCenter.vue
Normal file
149
src/views/Commodity/MerchandiseCenter.vue
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<div style="margin: 10px 0">
|
||||
<el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入商品名称" v-model="username"></el-input>
|
||||
<el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
|
||||
<el-button type="warning" @click="reset" style="height:25px">重置</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" border stripe header-cell-class-name="headerBg" :cell-style="{textAlign: 'center'}"
|
||||
@selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="selectedItems" label="商品编号"></el-table-column>
|
||||
<el-table-column prop="uploadedFiles" label="商品图片"></el-table-column>
|
||||
<el-table-column prop="name" label="商品名称" ></el-table-column>
|
||||
<el-table-column prop="price" label="价格"></el-table-column>
|
||||
<el-table-column prop="resource" label="类型"></el-table-column>
|
||||
<el-table-column prop="quantity" label="商品数量"></el-table-column>
|
||||
<el-table-column prop="state" label="状态"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="danger" slot="reference">详情<i class="el-icon-remove-outline"></i></el-button>
|
||||
<el-button type="success" @click="handleEdit(scope.row)">编辑<i class="el-icon-edit"></i></el-button>
|
||||
|
||||
<el-popconfirm
|
||||
class="ml-5"
|
||||
confirm-button-text='确定'
|
||||
cancel-button-text='取消'
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="您确定删除吗？"
|
||||
@confirm="del(scope.row.id)"
|
||||
>
|
||||
<el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
|
||||
<el-button type="danger" slot="reference">下架<i class="el-icon-remove-outline"></i></el-button>
|
||||
</el-popconfirm>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="padding: 10px 0">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageNum"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[2, 5, 10, 20]"
|
||||
:small="null"
|
||||
:disabled="null"
|
||||
:background="null"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="商品信息" v-model="dialogTableVisible" width="30%">
|
||||
<el-table-column property="name" label="商品名称" width="150" />
|
||||
<el-table-column property="price" label="商品价格" width="200" />
|
||||
<el-table-column property="quantity" label="商品数量" />
|
||||
<el-table-column property="region" label="是否为限定产品" />
|
||||
<el-table-column property="resource" label="商品类型" />
|
||||
<el-table-column property="label" label="商品标签" />
|
||||
<el-table-column property="desc" label="详情描述" />
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button style="height: 30px;" @click="dialogTableVisible = false">取消</el-button>
|
||||
<el-button style="height: 30px" type="primary" @click=save>确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import instance from '@/utils/request';
|
||||
import {ref, onMounted} from 'vue'
|
||||
const tableData = ref([])
|
||||
const pageNum = ref(0)
|
||||
const pageSize = ref(0)
|
||||
const total = ref(0)
|
||||
const selectedItems = ref([])
|
||||
onMounted(() => {
|
||||
load()
|
||||
})
|
||||
const handleSelectionChange = (row: any) => {
|
||||
selectedItems.value = JSON.parse(JSON.stringify(row))
|
||||
}
|
||||
const username = ref('')
|
||||
const dialogTableVisible = ref(false)
|
||||
const reset =()=>{
|
||||
username.value = ''
|
||||
}
|
||||
const form=ref({
|
||||
selectedItems:'',
|
||||
uploadedFiles:'',
|
||||
name:'',
|
||||
price:'',
|
||||
resource:'',
|
||||
quantity:'',
|
||||
state:'',
|
||||
region:'',
|
||||
label:[],
|
||||
desc:'',
|
||||
})
|
||||
const handleEdit = (row: any) => {
|
||||
dialogTableVisible.value = true
|
||||
form.value = row
|
||||
load()
|
||||
}
|
||||
|
||||
const load = async () => {
|
||||
await instance.get('/admin/findAllUsers').then(res => {
|
||||
console.log(res.data.data)
|
||||
res.data.data.foreach((item:any) => {
|
||||
console.log(item)
|
||||
})
|
||||
tableData.value = res.data.data
|
||||
})
|
||||
}
|
||||
|
||||
const save = () => {
|
||||
const formObj = toRaw(form.value)
|
||||
formObj.isCarbon = formObj.isCarbon == '是' ? true : false
|
||||
console.log(formObj)
|
||||
instance.post('/admin/updateOrInsertUser', formObj).then(res => {
|
||||
if(res.data.code == '200'){
|
||||
load()
|
||||
updateSuccess()
|
||||
}else{
|
||||
load()
|
||||
updataFail()
|
||||
}
|
||||
})
|
||||
dialogTableVisible.value = false
|
||||
}
|
||||
|
||||
const handleAdd = async () => {
|
||||
dialogTableVisible.value = true
|
||||
form.value = {}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.headerBg{
|
||||
background-color: #eee !important;
|
||||
}
|
||||
</style>
|
||||
13
src/views/Home.vue
Normal file
13
src/views/Home.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>这是主页</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
64
src/views/Login.vue
Normal file
64
src/views/Login.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 200px auto; background-color: #fff; width: 800px; height: 400px; border-radius: 10px">
|
||||
<div >
|
||||
<img
|
||||
class="image"
|
||||
style="height: 400px;width: 300px;float: left;"
|
||||
src="../img/Login/login_top.png"
|
||||
/>
|
||||
</div>
|
||||
<div style="height: 400px;width: 430px;float: left;margin:30px 0 0 40px;">
|
||||
<div style="margin: 20px 0; text-align: center; font-size: 24px"><b>匠承非遗后台管理系统</b></div>
|
||||
<el-form :model="user" ref="userForm">
|
||||
<el-form-item prop="username">
|
||||
<h2>账号</h2>
|
||||
<el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<h2>密码</h2>
|
||||
<el-input size="medium" style="margin: 10px 0;" prefix-icon="el-icon-lock" show-password v-model="password"></el-input>
|
||||
</el-form-item>
|
||||
<div style="margin: 10px 0; text-align: right">
|
||||
<div style="display: block;
|
||||
font-size: 15px;
|
||||
width: 80%;
|
||||
margin: 50px auto 0 auto;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
background-color: rgb(172, 115, 82);
|
||||
line-height: 40px;
|
||||
" @click="login">登录</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, reactive} from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {useRouter} from 'vue-router'
|
||||
|
||||
const user = ref({})
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const router = useRouter()
|
||||
const login = () => {
|
||||
// console.log(username)
|
||||
// console.log(password)
|
||||
if(username.value ==="a"&& password.value ==="1"){
|
||||
router.push("/UserManagement")
|
||||
}}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrapper{
|
||||
height: 100vh;
|
||||
background-image:url("../img/Login/登录底图.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
32
src/views/Person.vue
Normal file
32
src/views/Person.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<el-card style="width: 500px">
|
||||
<el-form label-width="80px" size="small">
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="form.username" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="学号">
|
||||
<el-input v-model="form.nickname" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="form.email" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话">
|
||||
<el-input v-model="form.phone" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input v-model="form.address" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="save">确 定</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
src/views/User/PersonalCenter.vue
Normal file
11
src/views/User/PersonalCenter.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<template>
|
||||
个人中心
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
104
src/views/User/UserManagement.vue
Normal file
104
src/views/User/UserManagement.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<div style="margin: 10px 0">
|
||||
<el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入用户名" v-model="username"></el-input>
|
||||
<el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
|
||||
<el-button type="warning" @click="reset" style="height:25px">重置</el-button>
|
||||
</div>
|
||||
<!-- <div style="margin: 15px 0">-->
|
||||
<!-- <el-button class="ml-5" type="primary" @click="handleAdd" style="height: 25px;">新增 <el-icon style="margin-left: 5px"><CirclePlus /></el-icon></el-button>-->
|
||||
|
||||
<!-- <el-popconfirm-->
|
||||
<!-- class="ml-5"-->
|
||||
<!-- confirm-button-text='确定'-->
|
||||
<!-- cancel-button-text='取消'-->
|
||||
<!-- icon="InfoFilled"-->
|
||||
<!-- icon-color="red"-->
|
||||
<!-- title="您确定批量删除这些数据吗？"-->
|
||||
<!-- @confirm="delBatch"-->
|
||||
<!-- width=180-->
|
||||
<!-- >-->
|
||||
<!-- <template #reference>-->
|
||||
<!-- <el-button style="height: 25px" class="ml-5" type="danger" slot="reference">批量删除 <el-icon style="margin-left: 5px;"><Remove /></el-icon></el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-popconfirm>-->
|
||||
<!-- </div>-->
|
||||
<el-table :data="tableData" border stripe header-cell-class-name="headerBg" :cell-style="{textAlign: 'center'}"
|
||||
@selection-change="handleSelectionChange" :header-cell-style="{'text-align': 'center'}">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="id" label="序号" width="50"></el-table-column>
|
||||
<el-table-column prop="username" label="用户昵称" ></el-table-column>
|
||||
<el-table-column prop="avatar" label="头像"></el-table-column>
|
||||
<el-table-column prop="identity" label="身份"></el-table-column>
|
||||
<el-table-column prop="phone" label="手机号"></el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
|
||||
|
||||
<el-popconfirm
|
||||
class="ml-5"
|
||||
confirm-button-text='确定'
|
||||
cancel-button-text='取消'
|
||||
icon="el-icon-info"
|
||||
icon-color="red"
|
||||
title="您确定删除吗？"
|
||||
@confirm="del(scope.row.id)"
|
||||
>
|
||||
<el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
|
||||
</el-popconfirm>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="padding: 10px 0">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageNum"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="[2, 5, 10, 20]"
|
||||
:small="null"
|
||||
:disabled="null"
|
||||
:background="null"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import instance from '@/utils/request';
|
||||
import {ref, onMounted} from 'vue'
|
||||
const tableData = ref([])
|
||||
const pageNum = ref(0)
|
||||
const pageSize = ref(0)
|
||||
const total = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
})
|
||||
const username = ref('')
|
||||
const reset =()=>{
|
||||
username.value = ''
|
||||
}
|
||||
const load = async () => {
|
||||
await instance.get('/admin/findAllUsers').then(res => {
|
||||
console.log(res.data.data)
|
||||
res.data.data.foreach((item:any) => {
|
||||
console.log(item)
|
||||
})
|
||||
tableData.value = res.data.data
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.headerBg{
|
||||
background-color: #eee !important;
|
||||
}
|
||||
</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",
|
||||
"allowJs": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
11
tsconfig.json
Normal file
11
tsconfig.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
18
tsconfig.node.json
Normal file
18
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"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"]
|
||||
}
|
||||
}
|
||||
16
vite.config.ts
Normal file
16
vite.config.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user