HINOTOR
2 years ago
parent
c26b42e83d
commit
b5c267924a
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2016-2023 vue-manage-system
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
// Generated by 'unplugin-auto-import'
|
||||||
|
export {}
|
||||||
|
declare global {
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
// generated by unplugin-vue-components
|
||||||
|
// We suggest you to commit this file into source control
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
import '@vue/runtime-core'
|
||||||
|
|
||||||
|
export {}
|
||||||
|
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||||
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
|
ElCard: typeof import('element-plus/es')['ElCard']
|
||||||
|
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||||
|
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||||
|
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||||
|
ElCol: typeof import('element-plus/es')['ElCol']
|
||||||
|
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||||
|
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||||
|
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||||
|
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||||
|
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||||
|
ElForm: typeof import('element-plus/es')['ElForm']
|
||||||
|
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||||
|
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||||
|
ElImage: typeof import('element-plus/es')['ElImage']
|
||||||
|
ElInput: typeof import('element-plus/es')['ElInput']
|
||||||
|
ElLink: typeof import('element-plus/es')['ElLink']
|
||||||
|
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||||
|
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||||
|
ElOption: typeof import('element-plus/es')['ElOption']
|
||||||
|
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||||
|
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||||
|
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||||
|
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||||
|
ElRow: typeof import('element-plus/es')['ElRow']
|
||||||
|
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||||
|
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||||
|
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||||
|
ElTable: typeof import('element-plus/es')['ElTable']
|
||||||
|
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||||
|
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||||
|
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||||
|
ElTag: typeof import('element-plus/es')['ElTag']
|
||||||
|
ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
|
||||||
|
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||||
|
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||||
|
Header: typeof import('./src/components/header.vue')['default']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
Sidebar: typeof import('./src/components/sidebar.vue')['default']
|
||||||
|
Tags: typeof import('./src/components/tags.vue')['default']
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title>vue-manage-system</title>
|
||||||
|
<link rel="stylesheet" href="https://at.alicdn.com/t/font_830376_qzecyukz0s.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||||
|
Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "vue-manage-system",
|
||||||
|
"version": "5.3.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc --noEmit && vite build",
|
||||||
|
"serve": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.0.9",
|
||||||
|
"axios": "^0.27.2",
|
||||||
|
"element-plus": "^2.2.14",
|
||||||
|
"md-editor-v3": "^2.2.1",
|
||||||
|
"pinia": "^2.0.20",
|
||||||
|
"vue": "^3.2.37",
|
||||||
|
"vue-cropperjs": "^5.0.0",
|
||||||
|
"vue-router": "^4.1.3",
|
||||||
|
"vue-schart": "^2.0.0",
|
||||||
|
"wangeditor": "^4.7.15",
|
||||||
|
"xlsx": "^0.18.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^3.0.0",
|
||||||
|
"@vue/compiler-sfc": "^3.1.2",
|
||||||
|
"typescript": "^4.6.4",
|
||||||
|
"unplugin-auto-import": "^0.11.2",
|
||||||
|
"unplugin-vue-components": "^0.22.4",
|
||||||
|
"vite": "^3.0.0",
|
||||||
|
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||||
|
"vue-tsc": "^0.38.4"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"list": [{
|
||||||
|
"id": 1,
|
||||||
|
"name": "张三",
|
||||||
|
"money": 123,
|
||||||
|
"address": "广东省东莞市长安镇",
|
||||||
|
"state": "成功",
|
||||||
|
"date": "2019-11-1",
|
||||||
|
"thumb": "https://lin-xin.gitee.io/images/post/wms.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "李四",
|
||||||
|
"money": 456,
|
||||||
|
"address": "广东省广州市白云区",
|
||||||
|
"state": "成功",
|
||||||
|
"date": "2019-10-11",
|
||||||
|
"thumb": "https://lin-xin.gitee.io/images/post/node3.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"name": "王五",
|
||||||
|
"money": 789,
|
||||||
|
"address": "湖南省长沙市",
|
||||||
|
"state": "失败",
|
||||||
|
"date": "2019-11-11",
|
||||||
|
"thumb": "https://lin-xin.gitee.io/images/post/parcel.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"name": "赵六",
|
||||||
|
"money": 1011,
|
||||||
|
"address": "福建省厦门市鼓浪屿",
|
||||||
|
"state": "成功",
|
||||||
|
"date": "2019-10-20",
|
||||||
|
"thumb": "https://lin-xin.gitee.io/images/post/notice.png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"pageTotal": 4
|
||||||
|
}
|
||||||
Binary file not shown.
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<el-config-provider :locale="zhCn">
|
||||||
|
<router-view />
|
||||||
|
</el-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ElConfigProvider } from 'element-plus';
|
||||||
|
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@import './assets/css/main.css';
|
||||||
|
@import './assets/css/color-dark.css';
|
||||||
|
</style>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import request from '../utils/request';
|
||||||
|
|
||||||
|
export const fetchData = () => {
|
||||||
|
return request({
|
||||||
|
url: './table.json',
|
||||||
|
method: 'get'
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
.header{
|
||||||
|
background-color: #242f42;
|
||||||
|
}
|
||||||
|
.login-wrap{
|
||||||
|
background: #324157;
|
||||||
|
}
|
||||||
|
.plugins-tips{
|
||||||
|
background: #eef1f6;
|
||||||
|
}
|
||||||
|
.plugins-tips a{
|
||||||
|
color: #20a0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li.active {
|
||||||
|
border: 1px solid #409EFF;
|
||||||
|
background-color: #409EFF;
|
||||||
|
}
|
||||||
|
.message-title{
|
||||||
|
color: #20a0ff;
|
||||||
|
}
|
||||||
|
.collapse-btn:hover{
|
||||||
|
background: rgb(40,52,70);
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
[class*=" el-icon-lx"],
|
||||||
|
[class^=el-icon-lx] {
|
||||||
|
font-family: lx-iconfont !important;
|
||||||
|
}
|
||||||
@ -0,0 +1,137 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app,
|
||||||
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.content-box {
|
||||||
|
position: absolute;
|
||||||
|
left: 250px;
|
||||||
|
right: 0;
|
||||||
|
top: 70px;
|
||||||
|
bottom: 0;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
-webkit-transition: left .3s ease-in-out;
|
||||||
|
transition: left .3s ease-in-out;
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: auto;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-collapse {
|
||||||
|
left: 65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 30px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crumbs {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table th {
|
||||||
|
background-color: #f5f7fa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugins-tips {
|
||||||
|
padding: 20px 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button+.el-tooltip {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table tr:hover {
|
||||||
|
background: #f6faff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mgb20 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.move-enter-active,
|
||||||
|
.move-leave-active {
|
||||||
|
transition: opacity .1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.move-enter-from,
|
||||||
|
.move-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*BaseForm*/
|
||||||
|
|
||||||
|
.form-box {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-box .line {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-time-panel__content::after,
|
||||||
|
.el-time-panel__content::before {
|
||||||
|
margin-top: -7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
[class*=" el-icon-"], [class^=el-icon-] {
|
||||||
|
speak: none;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 1;
|
||||||
|
vertical-align: baseline;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
.el-sub-menu [class^=el-icon-] {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 5px;
|
||||||
|
width: 24px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[hidden]{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 69 KiB |
@ -0,0 +1,154 @@
|
|||||||
|
<template>
|
||||||
|
<div class="header">
|
||||||
|
<!-- 折叠按钮 -->
|
||||||
|
<div class="collapse-btn" @click="collapseChage">
|
||||||
|
<el-icon v-if="sidebar.collapse"><Expand /></el-icon>
|
||||||
|
<el-icon v-else><Fold /></el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="logo">后台管理系统</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="header-user-con">
|
||||||
|
<!-- 消息中心 -->
|
||||||
|
<div class="btn-bell" @click="router.push('/tabs')">
|
||||||
|
<el-tooltip
|
||||||
|
effect="dark"
|
||||||
|
:content="message ? `有${message}条未读消息` : `消息中心`"
|
||||||
|
placement="bottom"
|
||||||
|
>
|
||||||
|
<i class="el-icon-lx-notice"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
<span class="btn-bell-badge" v-if="message"></span>
|
||||||
|
</div>
|
||||||
|
<!-- 用户头像 -->
|
||||||
|
<el-avatar class="user-avator" :size="30" :src="imgurl" />
|
||||||
|
<!-- 用户名下拉菜单 -->
|
||||||
|
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
{{ username }}
|
||||||
|
<el-icon class="el-icon--right">
|
||||||
|
<arrow-down />
|
||||||
|
</el-icon>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
|
||||||
|
<el-dropdown-item>项目仓库</el-dropdown-item>
|
||||||
|
</a>
|
||||||
|
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
||||||
|
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted } from 'vue';
|
||||||
|
import { useSidebarStore } from '../store/sidebar';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import imgurl from '../assets/img/img.jpg';
|
||||||
|
|
||||||
|
const username: string | null = localStorage.getItem('ms_username');
|
||||||
|
const message: number = 2;
|
||||||
|
|
||||||
|
const sidebar = useSidebarStore();
|
||||||
|
// 侧边栏折叠
|
||||||
|
const collapseChage = () => {
|
||||||
|
sidebar.handleCollapse();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (document.body.clientWidth < 1500) {
|
||||||
|
collapseChage();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 用户名下拉菜单选择事件
|
||||||
|
const router = useRouter();
|
||||||
|
const handleCommand = (command: string) => {
|
||||||
|
if (command == 'loginout') {
|
||||||
|
localStorage.removeItem('ms_username');
|
||||||
|
router.push('/login');
|
||||||
|
} else if (command == 'user') {
|
||||||
|
router.push('/user');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.header {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.collapse-btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
padding: 0 21px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.header .logo {
|
||||||
|
float: left;
|
||||||
|
width: 250px;
|
||||||
|
line-height: 70px;
|
||||||
|
}
|
||||||
|
.header-right {
|
||||||
|
float: right;
|
||||||
|
padding-right: 50px;
|
||||||
|
}
|
||||||
|
.header-user-con {
|
||||||
|
display: flex;
|
||||||
|
height: 70px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.btn-fullscreen {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
margin-right: 5px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.btn-bell,
|
||||||
|
.btn-fullscreen {
|
||||||
|
position: relative;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.btn-bell-badge {
|
||||||
|
position: absolute;
|
||||||
|
right: 4px;
|
||||||
|
top: 0px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #f56c6c;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-bell .el-icon-lx-notice {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.user-name {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.user-avator {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.el-dropdown-link {
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.el-dropdown-menu__item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sidebar">
|
||||||
|
<el-menu
|
||||||
|
class="sidebar-el-menu"
|
||||||
|
:default-active="onRoutes"
|
||||||
|
:collapse="sidebar.collapse"
|
||||||
|
background-color="#324157"
|
||||||
|
text-color="#bfcbd9"
|
||||||
|
active-text-color="#20a0ff"
|
||||||
|
unique-opened
|
||||||
|
router
|
||||||
|
>
|
||||||
|
<template v-for="item in items">
|
||||||
|
<template v-if="item.subs">
|
||||||
|
<el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss">
|
||||||
|
<template #title>
|
||||||
|
<el-icon>
|
||||||
|
<component :is="item.icon"></component>
|
||||||
|
</el-icon>
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-for="subItem in item.subs">
|
||||||
|
<el-sub-menu
|
||||||
|
v-if="subItem.subs"
|
||||||
|
:index="subItem.index"
|
||||||
|
:key="subItem.index"
|
||||||
|
v-permiss="item.permiss"
|
||||||
|
>
|
||||||
|
<template #title>{{ subItem.title }}</template>
|
||||||
|
<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
|
||||||
|
{{ threeItem.title }}
|
||||||
|
</el-menu-item>
|
||||||
|
</el-sub-menu>
|
||||||
|
<el-menu-item v-else :index="subItem.index" v-permiss="item.permiss">
|
||||||
|
{{ subItem.title }}
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</el-sub-menu>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<el-menu-item :index="item.index" :key="item.index" v-permiss="item.permiss">
|
||||||
|
<el-icon>
|
||||||
|
<component :is="item.icon"></component>
|
||||||
|
</el-icon>
|
||||||
|
<template #title>{{ item.title }}</template>
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { useSidebarStore } from '../store/sidebar';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
icon: 'Odometer',
|
||||||
|
index: '/dashboard',
|
||||||
|
title: '系统首页',
|
||||||
|
permiss: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Calendar',
|
||||||
|
index: '1',
|
||||||
|
title: '表格相关',
|
||||||
|
permiss: '2',
|
||||||
|
subs: [
|
||||||
|
{
|
||||||
|
index: '/table',
|
||||||
|
title: '常用表格',
|
||||||
|
permiss: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: '/import',
|
||||||
|
title: '导入Excel',
|
||||||
|
permiss: '2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: '/export',
|
||||||
|
title: '导出Excel',
|
||||||
|
permiss: '2',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'DocumentCopy',
|
||||||
|
index: '/tabs',
|
||||||
|
title: 'tab选项卡',
|
||||||
|
permiss: '3',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Edit',
|
||||||
|
index: '3',
|
||||||
|
title: '表单相关',
|
||||||
|
permiss: '4',
|
||||||
|
subs: [
|
||||||
|
{
|
||||||
|
index: '/form',
|
||||||
|
title: '基本表单',
|
||||||
|
permiss: '5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: '/upload',
|
||||||
|
title: '文件上传',
|
||||||
|
permiss: '6',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: '4',
|
||||||
|
title: '三级菜单',
|
||||||
|
permiss: '7',
|
||||||
|
subs: [
|
||||||
|
{
|
||||||
|
index: '/editor',
|
||||||
|
title: '富文本编辑器',
|
||||||
|
permiss: '8',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: '/markdown',
|
||||||
|
title: 'markdown编辑器',
|
||||||
|
permiss: '9',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Setting',
|
||||||
|
index: '/icon',
|
||||||
|
title: '自定义图标',
|
||||||
|
permiss: '10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'PieChart',
|
||||||
|
index: '/charts',
|
||||||
|
title: 'schart图表',
|
||||||
|
permiss: '11',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Warning',
|
||||||
|
index: '/permission',
|
||||||
|
title: '权限管理',
|
||||||
|
permiss: '13',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'CoffeeCup',
|
||||||
|
index: '/donate',
|
||||||
|
title: '支持作者',
|
||||||
|
permiss: '14',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const onRoutes = computed(() => {
|
||||||
|
return route.path;
|
||||||
|
});
|
||||||
|
|
||||||
|
const sidebar = useSidebarStore();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.sidebar {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 70px;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
.sidebar::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.sidebar-el-menu:not(.el-menu--collapse) {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
.sidebar > ul {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tags" v-if="tags.show">
|
||||||
|
<ul>
|
||||||
|
<li
|
||||||
|
class="tags-li"
|
||||||
|
v-for="(item, index) in tags.list"
|
||||||
|
:class="{ active: isActive(item.path) }"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<router-link :to="item.path" class="tags-li-title">{{ item.title }}</router-link>
|
||||||
|
<el-icon @click="closeTags(index)"><Close /></el-icon>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tags-close-box">
|
||||||
|
<el-dropdown @command="handleTags">
|
||||||
|
<el-button size="small" type="primary">
|
||||||
|
标签选项
|
||||||
|
<el-icon class="el-icon--right">
|
||||||
|
<arrow-down />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu size="small">
|
||||||
|
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useTagsStore } from '../store/tags';
|
||||||
|
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
const isActive = (path: string) => {
|
||||||
|
return path === route.fullPath;
|
||||||
|
};
|
||||||
|
|
||||||
|
const tags = useTagsStore();
|
||||||
|
// 关闭单个标签
|
||||||
|
const closeTags = (index: number) => {
|
||||||
|
const delItem = tags.list[index];
|
||||||
|
tags.delTagsItem(index);
|
||||||
|
const item = tags.list[index] ? tags.list[index] : tags.list[index - 1];
|
||||||
|
if (item) {
|
||||||
|
delItem.path === route.fullPath && router.push(item.path);
|
||||||
|
} else {
|
||||||
|
router.push('/');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置标签
|
||||||
|
const setTags = (route: any) => {
|
||||||
|
const isExist = tags.list.some(item => {
|
||||||
|
return item.path === route.fullPath;
|
||||||
|
});
|
||||||
|
if (!isExist) {
|
||||||
|
if (tags.list.length >= 8) tags.delTagsItem(0);
|
||||||
|
tags.setTagsItem({
|
||||||
|
name: route.name,
|
||||||
|
title: route.meta.title,
|
||||||
|
path: route.fullPath
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
setTags(route);
|
||||||
|
onBeforeRouteUpdate(to => {
|
||||||
|
setTags(to);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关闭全部标签
|
||||||
|
const closeAll = () => {
|
||||||
|
tags.clearTags();
|
||||||
|
router.push('/');
|
||||||
|
};
|
||||||
|
// 关闭其他标签
|
||||||
|
const closeOther = () => {
|
||||||
|
const curItem = tags.list.filter(item => {
|
||||||
|
return item.path === route.fullPath;
|
||||||
|
});
|
||||||
|
tags.closeTagsOther(curItem);
|
||||||
|
};
|
||||||
|
const handleTags = (command: string) => {
|
||||||
|
command === 'other' ? closeOther() : closeAll();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 关闭当前页面的标签页
|
||||||
|
// tags.closeCurrentTag({
|
||||||
|
// $router: router,
|
||||||
|
// $route: route
|
||||||
|
// });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tags {
|
||||||
|
position: relative;
|
||||||
|
height: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
padding-right: 120px;
|
||||||
|
box-shadow: 0 5px 10px #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags ul {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
float: left;
|
||||||
|
margin: 3px 5px 2px 3px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 23px;
|
||||||
|
border: 1px solid #e9eaec;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 5px 0 12px;
|
||||||
|
color: #666;
|
||||||
|
-webkit-transition: all 0.3s ease-in;
|
||||||
|
-moz-transition: all 0.3s ease-in;
|
||||||
|
transition: all 0.3s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li:not(.active):hover {
|
||||||
|
background: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li.active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li-title {
|
||||||
|
float: left;
|
||||||
|
max-width: 80px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-right: 5px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-li.active .tags-li-title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags-close-box {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 1px;
|
||||||
|
text-align: center;
|
||||||
|
width: 110px;
|
||||||
|
height: 30px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import { createPinia } from 'pinia';
|
||||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
||||||
|
import App from './App.vue';
|
||||||
|
import router from './router';
|
||||||
|
import { usePermissStore } from './store/permiss';
|
||||||
|
import 'element-plus/dist/index.css';
|
||||||
|
import './assets/css/icon.css';
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
app.use(createPinia());
|
||||||
|
app.use(router);
|
||||||
|
|
||||||
|
// 注册elementplus图标
|
||||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||||
|
app.component(key, component);
|
||||||
|
}
|
||||||
|
// 自定义权限指令
|
||||||
|
const permiss = usePermissStore();
|
||||||
|
app.directive('permiss', {
|
||||||
|
mounted(el, binding) {
|
||||||
|
if (!permiss.key.includes(String(binding.value))) {
|
||||||
|
el['hidden'] = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
app.mount('#app');
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
|
interface ObjectList {
|
||||||
|
[key: string]: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const usePermissStore = defineStore('permiss', {
|
||||||
|
state: () => {
|
||||||
|
const keys = localStorage.getItem('ms_keys');
|
||||||
|
return {
|
||||||
|
key: keys ? JSON.parse(keys) : <string[]>[],
|
||||||
|
defaultList: <ObjectList>{
|
||||||
|
admin: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
|
||||||
|
user: ['1', '2', '3', '11', '13', '14', '15']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
handleSet(val: string[]) {
|
||||||
|
this.key = val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
|
export const useSidebarStore = defineStore('sidebar', {
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
collapse: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getters: {},
|
||||||
|
actions: {
|
||||||
|
handleCollapse() {
|
||||||
|
this.collapse = !this.collapse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
|
interface ListItem {
|
||||||
|
name: string;
|
||||||
|
path: string;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useTagsStore = defineStore('tags', {
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
list: <ListItem[]>[]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
show: state => {
|
||||||
|
return state.list.length > 0;
|
||||||
|
},
|
||||||
|
nameList: state => {
|
||||||
|
return state.list.map(item => item.name);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
delTagsItem(index: number) {
|
||||||
|
this.list.splice(index, 1);
|
||||||
|
},
|
||||||
|
setTagsItem(data: ListItem) {
|
||||||
|
this.list.push(data);
|
||||||
|
},
|
||||||
|
clearTags() {
|
||||||
|
this.list = [];
|
||||||
|
},
|
||||||
|
closeTagsOther(data: ListItem[]) {
|
||||||
|
this.list = data;
|
||||||
|
},
|
||||||
|
closeCurrentTag(data: any) {
|
||||||
|
for (let i = 0, len = this.list.length; i < len; i++) {
|
||||||
|
const item = this.list[i];
|
||||||
|
if (item.path === data.$route.fullPath) {
|
||||||
|
if (i < len - 1) {
|
||||||
|
data.$router.push(this.list[i + 1].path);
|
||||||
|
} else if (i > 0) {
|
||||||
|
data.$router.push(this.list[i - 1].path);
|
||||||
|
} else {
|
||||||
|
data.$router.push('/');
|
||||||
|
}
|
||||||
|
this.list.splice(i, 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import axios, {AxiosInstance, AxiosError, AxiosResponse, AxiosRequestConfig} from 'axios';
|
||||||
|
|
||||||
|
const service:AxiosInstance = axios.create({
|
||||||
|
timeout: 5000
|
||||||
|
});
|
||||||
|
|
||||||
|
service.interceptors.request.use(
|
||||||
|
(config: AxiosRequestConfig) => {
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
(error: AxiosError) => {
|
||||||
|
console.log(error);
|
||||||
|
return Promise.reject();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
service.interceptors.response.use(
|
||||||
|
(response: AxiosResponse) => {
|
||||||
|
if (response.status === 200) {
|
||||||
|
return response;
|
||||||
|
} else {
|
||||||
|
Promise.reject();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
(error: AxiosError) => {
|
||||||
|
console.log(error);
|
||||||
|
return Promise.reject();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default service;
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<div class="error-page">
|
||||||
|
<div class="error-code">4<span>0</span>3</div>
|
||||||
|
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
|
||||||
|
<div class="error-handle">
|
||||||
|
<router-link to="/">
|
||||||
|
<el-button type="primary" size="large">返回首页</el-button>
|
||||||
|
</router-link>
|
||||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="403">
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const goBack = () => {
|
||||||
|
router.go(-2);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.error-page {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f3f3;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.error-code {
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 250px;
|
||||||
|
font-weight: bolder;
|
||||||
|
color: #f02d2d;
|
||||||
|
}
|
||||||
|
.error-code span {
|
||||||
|
color: #00a854;
|
||||||
|
}
|
||||||
|
.error-desc {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
.error-handle {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding-bottom: 200px;
|
||||||
|
}
|
||||||
|
.error-btn {
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<div class="error-page">
|
||||||
|
<div class="error-code">4<span>0</span>4</div>
|
||||||
|
<div class="error-desc">啊哦~ 你所访问的页面不存在</div>
|
||||||
|
<div class="error-handle">
|
||||||
|
<router-link to="/">
|
||||||
|
<el-button type="primary" size="large">返回首页</el-button>
|
||||||
|
</router-link>
|
||||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="404">
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const goBack = () => {
|
||||||
|
router.go(-1);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.error-page {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f3f3;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.error-code {
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 250px;
|
||||||
|
font-weight: bolder;
|
||||||
|
color: #2d8cf0;
|
||||||
|
}
|
||||||
|
.error-code span {
|
||||||
|
color: #00a854;
|
||||||
|
}
|
||||||
|
.error-desc {
|
||||||
|
font-size: 30px;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
.error-handle {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding-bottom: 200px;
|
||||||
|
}
|
||||||
|
.error-btn {
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="handle-box">
|
||||||
|
<el-button type="primary" @click="exportXlsx">导出Excel</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="tableData" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="name" label="姓名"></el-table-column>
|
||||||
|
<el-table-column prop="sno" label="学号"></el-table-column>
|
||||||
|
<el-table-column prop="class" label="班级"></el-table-column>
|
||||||
|
<el-table-column prop="age" label="年龄"></el-table-column>
|
||||||
|
<el-table-column prop="sex" label="性别"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="export">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import * as XLSX from 'xlsx';
|
||||||
|
|
||||||
|
interface TableItem {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
sno: string;
|
||||||
|
class: string;
|
||||||
|
age: string;
|
||||||
|
sex: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tableData = ref<TableItem[]>([]);
|
||||||
|
// 获取表格数据
|
||||||
|
const getData = () => {
|
||||||
|
tableData.value = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '小明',
|
||||||
|
sno: 'S001',
|
||||||
|
class: '一班',
|
||||||
|
age: '10',
|
||||||
|
sex: '男',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '小红',
|
||||||
|
sno: 'S002',
|
||||||
|
class: '一班',
|
||||||
|
age: '9',
|
||||||
|
sex: '女',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
|
getData();
|
||||||
|
|
||||||
|
const list = [['序号', '姓名', '学号', '班级', '年龄', '性别']];
|
||||||
|
const exportXlsx = () => {
|
||||||
|
tableData.value.map((item: any, i: number) => {
|
||||||
|
const arr: any[] = [i + 1];
|
||||||
|
arr.push(...[item.name, item.sno, item.class, item.age, item.sex]);
|
||||||
|
list.push(arr);
|
||||||
|
});
|
||||||
|
let WorkSheet = XLSX.utils.aoa_to_sheet(list);
|
||||||
|
let new_workbook = XLSX.utils.book_new();
|
||||||
|
XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
|
||||||
|
XLSX.writeFile(new_workbook, `表格.xlsx`);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.handle-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-select {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-input {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
color: #f56c6c;
|
||||||
|
}
|
||||||
|
.mr10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.table-td-thumb {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="form-box">
|
||||||
|
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
|
||||||
|
<el-form-item label="表单名称" prop="name">
|
||||||
|
<el-input v-model="form.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="选择器" prop="region">
|
||||||
|
<el-select v-model="form.region" placeholder="请选择">
|
||||||
|
<el-option key="小明" label="小明" value="小明"></el-option>
|
||||||
|
<el-option key="小红" label="小红" value="小红"></el-option>
|
||||||
|
<el-option key="小白" label="小白" value="小白"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="日期时间">
|
||||||
|
<el-col :span="11">
|
||||||
|
<el-form-item prop="date1">
|
||||||
|
<el-date-picker
|
||||||
|
type="date"
|
||||||
|
placeholder="选择日期"
|
||||||
|
v-model="form.date1"
|
||||||
|
style="width: 100%"
|
||||||
|
></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col class="line" :span="2">-</el-col>
|
||||||
|
<el-col :span="11">
|
||||||
|
<el-form-item prop="date2">
|
||||||
|
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%">
|
||||||
|
</el-time-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="城市级联" prop="options">
|
||||||
|
<el-cascader :options="options" v-model="form.options"></el-cascader>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="选择开关" prop="delivery">
|
||||||
|
<el-switch v-model="form.delivery"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="多选框" prop="type">
|
||||||
|
<el-checkbox-group v-model="form.type">
|
||||||
|
<el-checkbox label="小明" name="type"></el-checkbox>
|
||||||
|
<el-checkbox label="小红" name="type"></el-checkbox>
|
||||||
|
<el-checkbox label="小白" name="type"></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="单选框" prop="resource">
|
||||||
|
<el-radio-group v-model="form.resource">
|
||||||
|
<el-radio label="小明"></el-radio>
|
||||||
|
<el-radio label="小红"></el-radio>
|
||||||
|
<el-radio label="小白"></el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="文本框" prop="desc">
|
||||||
|
<el-input type="textarea" rows="5" v-model="form.desc"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="onSubmit(formRef)">表单提交</el-button>
|
||||||
|
<el-button @click="onReset(formRef)">重置表单</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="baseform">
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import type { FormInstance, FormRules } from 'element-plus';
|
||||||
|
|
||||||
|
const options = [
|
||||||
|
{
|
||||||
|
value: 'guangdong',
|
||||||
|
label: '广东省',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'guangzhou',
|
||||||
|
label: '广州市',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'tianhe',
|
||||||
|
label: '天河区',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'haizhu',
|
||||||
|
label: '海珠区',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'dongguan',
|
||||||
|
label: '东莞市',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'changan',
|
||||||
|
label: '长安镇',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'humen',
|
||||||
|
label: '虎门镇',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'hunan',
|
||||||
|
label: '湖南省',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'changsha',
|
||||||
|
label: '长沙市',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: 'yuelu',
|
||||||
|
label: '岳麓区',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const rules: FormRules = {
|
||||||
|
name: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
|
||||||
|
};
|
||||||
|
const formRef = ref<FormInstance>();
|
||||||
|
const form = reactive({
|
||||||
|
name: '',
|
||||||
|
region: '',
|
||||||
|
date1: '',
|
||||||
|
date2: '',
|
||||||
|
delivery: true,
|
||||||
|
type: ['小明'],
|
||||||
|
resource: '小红',
|
||||||
|
desc: '',
|
||||||
|
options: [],
|
||||||
|
});
|
||||||
|
// 提交
|
||||||
|
const onSubmit = (formEl: FormInstance | undefined) => {
|
||||||
|
// 表单校验
|
||||||
|
if (!formEl) return;
|
||||||
|
formEl.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
console.log(form);
|
||||||
|
ElMessage.success('提交成功！');
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 重置
|
||||||
|
const onReset = (formEl: FormInstance | undefined) => {
|
||||||
|
if (!formEl) return;
|
||||||
|
formEl.resetFields();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<v-header />
|
||||||
|
<v-sidebar />
|
||||||
|
<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
|
||||||
|
<v-tags></v-tags>
|
||||||
|
<div class="content">
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition name="move" mode="out-in">
|
||||||
|
<keep-alive :include="tags.nameList">
|
||||||
|
<component :is="Component"></component>
|
||||||
|
</keep-alive>
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useSidebarStore } from '../store/sidebar';
|
||||||
|
import { useTagsStore } from '../store/tags';
|
||||||
|
import vHeader from '../components/header.vue';
|
||||||
|
import vSidebar from '../components/sidebar.vue';
|
||||||
|
import vTags from '../components/tags.vue';
|
||||||
|
|
||||||
|
const sidebar = useSidebarStore();
|
||||||
|
const tags = useTagsStore();
|
||||||
|
</script>
|
||||||
@ -0,0 +1,129 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login-wrap">
|
||||||
|
<div class="ms-login">
|
||||||
|
<div class="ms-title">后台管理系统</div>
|
||||||
|
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
|
||||||
|
<el-form-item prop="username">
|
||||||
|
<el-input v-model="param.username" placeholder="username">
|
||||||
|
<template #prepend>
|
||||||
|
<el-button :icon="User"></el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<el-input
|
||||||
|
type="password"
|
||||||
|
placeholder="password"
|
||||||
|
v-model="param.password"
|
||||||
|
@keyup.enter="submitForm(login)"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<el-button :icon="Lock"></el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<div class="login-btn">
|
||||||
|
<el-button type="primary" @click="submitForm(login)">登录</el-button>
|
||||||
|
</div>
|
||||||
|
<p class="login-tips">Tips : 用户名和密码随便填。</p>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
|
import { useTagsStore } from '../store/tags';
|
||||||
|
import { usePermissStore } from '../store/permiss';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import type { FormInstance, FormRules } from 'element-plus';
|
||||||
|
import { Lock, User } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
|
interface LoginInfo {
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const param = reactive<LoginInfo>({
|
||||||
|
username: 'admin',
|
||||||
|
password: '123123'
|
||||||
|
});
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
username: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入用户名',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
||||||
|
};
|
||||||
|
const permiss = usePermissStore();
|
||||||
|
const login = ref<FormInstance>();
|
||||||
|
const submitForm = (formEl: FormInstance | undefined) => {
|
||||||
|
if (!formEl) return;
|
||||||
|
formEl.validate((valid: boolean) => {
|
||||||
|
if (valid) {
|
||||||
|
ElMessage.success('登录成功');
|
||||||
|
localStorage.setItem('ms_username', param.username);
|
||||||
|
const keys = permiss.defaultList[param.username == 'admin' ? 'admin' : 'user'];
|
||||||
|
permiss.handleSet(keys);
|
||||||
|
localStorage.setItem('ms_keys', JSON.stringify(keys));
|
||||||
|
router.push('/');
|
||||||
|
} else {
|
||||||
|
ElMessage.error('登录成功');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const tags = useTagsStore();
|
||||||
|
tags.clearTags();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.login-wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(../assets/img/login-bg.jpg);
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.ms-title {
|
||||||
|
width: 100%;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.ms-login {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 350px;
|
||||||
|
margin: -190px 0 0 -175px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.ms-content {
|
||||||
|
padding: 30px 30px;
|
||||||
|
}
|
||||||
|
.login-btn {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.login-btn button {
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.login-tips {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,191 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="handle-box">
|
||||||
|
<el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
|
||||||
|
<el-option key="1" label="广东省" value="广东省"></el-option>
|
||||||
|
<el-option key="2" label="湖南省" value="湖南省"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
|
||||||
|
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
||||||
|
<el-button type="primary" :icon="Plus">新增</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="name" label="用户名"></el-table-column>
|
||||||
|
<el-table-column label="账户余额">
|
||||||
|
<template #default="scope">￥{{ scope.row.money }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="头像(查看大图)" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-image
|
||||||
|
class="table-td-thumb"
|
||||||
|
:src="scope.row.thumb"
|
||||||
|
:z-index="10"
|
||||||
|
:preview-src-list="[scope.row.thumb]"
|
||||||
|
preview-teleported
|
||||||
|
>
|
||||||
|
</el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="address" label="地址"></el-table-column>
|
||||||
|
<el-table-column label="状态" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag
|
||||||
|
:type="scope.row.state === '成功' ? 'success' : scope.row.state === '失败' ? 'danger' : ''"
|
||||||
|
>
|
||||||
|
{{ scope.row.state }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column prop="date" label="注册时间"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="220" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="16">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
layout="total, prev, pager, next"
|
||||||
|
:current-page="query.pageIndex"
|
||||||
|
:page-size="query.pageSize"
|
||||||
|
:total="pageTotal"
|
||||||
|
@current-change="handlePageChange"
|
||||||
|
></el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 编辑弹出框 -->
|
||||||
|
<el-dialog title="编辑" v-model="editVisible" width="30%">
|
||||||
|
<el-form label-width="70px">
|
||||||
|
<el-form-item label="用户名">
|
||||||
|
<el-input v-model="form.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="地址">
|
||||||
|
<el-input v-model="form.address"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="editVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="saveEdit">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="basetable">
|
||||||
|
import { ref, reactive } from 'vue';
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||||
|
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
|
||||||
|
import { fetchData } from '../api/index';
|
||||||
|
|
||||||
|
interface TableItem {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
money: string;
|
||||||
|
state: string;
|
||||||
|
date: string;
|
||||||
|
address: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = reactive({
|
||||||
|
address: '',
|
||||||
|
name: '',
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 10
|
||||||
|
});
|
||||||
|
const tableData = ref<TableItem[]>([]);
|
||||||
|
const pageTotal = ref(0);
|
||||||
|
// 获取表格数据
|
||||||
|
const getData = () => {
|
||||||
|
fetchData().then(res => {
|
||||||
|
tableData.value = res.data.list;
|
||||||
|
pageTotal.value = res.data.pageTotal || 50;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
getData();
|
||||||
|
|
||||||
|
// 查询操作
|
||||||
|
const handleSearch = () => {
|
||||||
|
query.pageIndex = 1;
|
||||||
|
getData();
|
||||||
|
};
|
||||||
|
// 分页导航
|
||||||
|
const handlePageChange = (val: number) => {
|
||||||
|
query.pageIndex = val;
|
||||||
|
getData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除操作
|
||||||
|
const handleDelete = (index: number) => {
|
||||||
|
// 二次确认删除
|
||||||
|
ElMessageBox.confirm('确定要删除吗？', '提示', {
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
ElMessage.success('删除成功');
|
||||||
|
tableData.value.splice(index, 1);
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格编辑时弹窗和保存
|
||||||
|
const editVisible = ref(false);
|
||||||
|
let form = reactive({
|
||||||
|
name: '',
|
||||||
|
address: ''
|
||||||
|
});
|
||||||
|
let idx: number = -1;
|
||||||
|
const handleEdit = (index: number, row: any) => {
|
||||||
|
idx = index;
|
||||||
|
form.name = row.name;
|
||||||
|
form.address = row.address;
|
||||||
|
editVisible.value = true;
|
||||||
|
};
|
||||||
|
const saveEdit = () => {
|
||||||
|
editVisible.value = false;
|
||||||
|
ElMessage.success(`修改第 ${idx + 1} 行成功`);
|
||||||
|
tableData.value[idx].name = form.name;
|
||||||
|
tableData.value[idx].address = form.address;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.handle-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-select {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-input {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.red {
|
||||||
|
color: #F56C6C;
|
||||||
|
}
|
||||||
|
.mr10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.table-td-thumb {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'vue-schart';
|
||||||
|
declare module 'vue-cropperjs';
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"sourceMap": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"lib": ["ESNext", "DOM"],
|
||||||
|
"skipLibCheck": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts","src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite';
|
||||||
|
import Components from 'unplugin-vue-components/vite';
|
||||||
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
|
||||||
|
export default defineConfig({
|
||||||
|
base: './',
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
VueSetupExtend(),
|
||||||
|
AutoImport({
|
||||||
|
resolvers: [ElementPlusResolver()]
|
||||||
|
}),
|
||||||
|
Components({
|
||||||
|
resolvers: [ElementPlusResolver()]
|
||||||
|
})
|
||||||
|
],
|
||||||
|
optimizeDeps: {
|
||||||
|
include: ['schart.js']
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in new issue