4 |
5 | 拖拽组件
6 | 拖拽弹框
7 |
8 |
9 |
10 |
12 |点我弹框
13 |
14 | 通过指令 v-dialogDrag 使 Dialog 对话框具有可拖拽的功能。
11 |12 |
3 |
5 |
6 |
--------------------------------------------------------------------------------
/src/api/api.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | let baseUrl = '';
3 | export const getUserList = params=>{
4 | return axios.get(`${baseUrl}/user/list`,{params:params})
5 | }
6 | export const getSysmenu = ()=>{
7 | return axios.get('../../menu.json')
8 | }
9 | export const getDeleUser = params=>{
10 | return axios.get('user/deletUsers',{params:params});
11 | }
12 | export const getEditUser = params=>{
13 | return axios.get(`${baseUrl}/user/editUser`,{
14 | params:params
15 | })
16 | }
17 | export const getAddUser = params=>{
18 | return axios.get(`${baseUrl}/user/addUser`,{
19 | params:params
20 | })
21 | }
22 | export const getDeleteOne = params=>{
23 | return axios.get(`${baseUrl}/user/DeleteOne`,{params:params})
24 | }
25 | export const testApi = ()=>{
26 | return axios.get("/testApi/getkeywhereisddata?CITY_NAME=全省&S_id=B08I00136&callback=")
27 | }
--------------------------------------------------------------------------------
/src/assets/css/color-dark.css:
--------------------------------------------------------------------------------
1 | .header{
2 | background-color: #242f42;
3 | }
4 | .login-wrap{
5 | background: #324157;
6 | }
7 | .plugins-tips{
8 | background: #eef1f6;
9 | }
10 | .plugins-tips a{
11 | color: #20a0ff;
12 | }
13 | .el-upload--text em {
14 | color: #20a0ff;
15 | }
16 | .pure-button{
17 | background: #20a0ff;
18 | }
19 | .tags-li.active {
20 | border: 1px solid #409EFF;
21 | background-color: #409EFF;
22 | }
23 | .message-title{
24 | color: #20a0ff;
25 | }
26 | .collapse-btn:hover{
27 | background: rgb(40,52,70);
28 | }
--------------------------------------------------------------------------------
/src/assets/css/icon.css:
--------------------------------------------------------------------------------
1 |
2 | [class*=" el-icon-lx"], [class^=el-icon-lx] {
3 | font-family: lx-iconfont!important;
4 | }
--------------------------------------------------------------------------------
/src/assets/css/main.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | html,
7 | body,
8 | #app,
9 | .wrapper {
10 | width: 100%;
11 | height: 100%;
12 | overflow: hidden;
13 | }
14 |
15 | body {
16 | font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
17 | }
18 |
19 | a {
20 | text-decoration: none
21 | }
22 |
23 |
24 | .content-box {
25 | position: absolute;
26 | left: 250px;
27 | right: 0;
28 | top: 70px;
29 | bottom: 0;
30 | padding-bottom: 30px;
31 | -webkit-transition: left .3s ease-in-out;
32 | transition: left .3s ease-in-out;
33 | background: #f0f0f0;
34 | }
35 |
36 | .content {
37 | width: auto;
38 | height: 100%;
39 | padding: 10px;
40 | overflow-y: scroll;
41 | box-sizing: border-box;
42 | }
43 |
44 | .content-collapse {
45 | left: 65px;
46 | }
47 |
48 | .container {
49 | padding: 30px;
50 | background: #fff;
51 | border: 1px solid #ddd;
52 | border-radius: 5px;
53 | }
54 |
55 | .crumbs {
56 | margin: 10px 0;
57 | }
58 |
59 | .pagination {
60 | margin: 20px 0;
61 | text-align: right;
62 | }
63 |
64 | .plugins-tips {
65 | padding: 20px 10px;
66 | margin-bottom: 20px;
67 | }
68 |
69 | .el-button+.el-tooltip {
70 | margin-left: 10px;
71 | }
72 |
73 | .el-table tr:hover {
74 | background: #f6faff;
75 | }
76 |
77 | .mgb20 {
78 | margin-bottom: 20px;
79 | }
80 |
81 | .move-enter-active,
82 | .move-leave-active {
83 | transition: opacity .5s;
84 | }
85 |
86 | .move-enter,
87 | .move-leave {
88 | opacity: 0;
89 | }
90 |
91 | /*BaseForm*/
92 |
93 | .form-box {
94 | width: 600px;
95 | }
96 |
97 | .form-box .line {
98 | text-align: center;
99 | }
100 |
101 | .el-time-panel__content::after,
102 | .el-time-panel__content::before {
103 | margin-top: -7px;
104 | }
105 |
106 | .el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
107 | padding-bottom: 0;
108 | }
109 |
110 | /*Upload*/
111 |
112 | .pure-button {
113 | width: 150px;
114 | height: 40px;
115 | line-height: 40px;
116 | text-align: center;
117 | color: #fff;
118 | border-radius: 3px;
119 | }
120 |
121 | .g-core-image-corp-container .info-aside {
122 | height: 45px;
123 | }
124 |
125 | .el-upload--text {
126 | background-color: #fff;
127 | border: 1px dashed #d9d9d9;
128 | border-radius: 6px;
129 | box-sizing: border-box;
130 | width: 360px;
131 | height: 180px;
132 | text-align: center;
133 | cursor: pointer;
134 | position: relative;
135 | overflow: hidden;
136 | }
137 |
138 | .el-upload--text .el-icon-upload {
139 | font-size: 67px;
140 | color: #97a8be;
141 | margin: 40px 0 16px;
142 | line-height: 50px;
143 | }
144 |
145 | .el-upload--text {
146 | color: #97a8be;
147 | font-size: 14px;
148 | text-align: center;
149 | }
150 |
151 | .el-upload--text em {
152 | font-style: normal;
153 | }
154 |
155 | /*VueEditor*/
156 |
157 | .ql-container {
158 | min-height: 400px;
159 | }
160 |
161 | .ql-snow .ql-tooltip {
162 | transform: translateX(117.5px) translateY(10px) !important;
163 | }
164 |
165 | .editor-btn {
166 | margin-top: 20px;
167 | }
168 | .el-button.el-is-disabled{
169 | color: #bfcbd9;
170 | cursor: not-allowed;
171 | background-image: none;
172 | background-color: #eef1f6;
173 | border-color: #d1dbe5;
174 | }
175 |
176 | /*markdown*/
177 |
178 | .v-note-wrapper .v-note-panel {
179 | min-height: 500px;
180 | }
181 |
--------------------------------------------------------------------------------
/src/assets/css/theme-green/color-green.css:
--------------------------------------------------------------------------------
1 | .header{
2 | background-color: #07c4a8;
3 | }
4 | .login-wrap{
5 | background: rgba(56, 157, 170, 0.82);;
6 | }
7 | .plugins-tips{
8 | background: #f2f2f2;
9 | }
10 | .plugins-tips a{
11 | color: #009688;
12 | }
13 | .el-upload--text em {
14 | color: #009688;
15 | }
16 | .pure-button{
17 | background: #009688;
18 | }
19 | .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
20 | background-color: #009688 !important;
21 | border-color: #009688 !important;
22 | }
23 | .tags-li.active {
24 | border: 1px solid #009688;
25 | background-color: #009688;
26 | }
27 | .collapse-btn:hover{
28 | background: #009688;
29 | }
--------------------------------------------------------------------------------
/src/assets/css/theme-green/fonts/element-icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Angelasp/vue-element-admin/908a0b6ac98be1d8ef8a8c38be8511047f19d9c2/src/assets/css/theme-green/fonts/element-icons.ttf
--------------------------------------------------------------------------------
/src/assets/css/theme-green/fonts/element-icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Angelasp/vue-element-admin/908a0b6ac98be1d8ef8a8c38be8511047f19d9c2/src/assets/css/theme-green/fonts/element-icons.woff
--------------------------------------------------------------------------------
/src/assets/img/img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Angelasp/vue-element-admin/908a0b6ac98be1d8ef8a8c38be8511047f19d9c2/src/assets/img/img.jpg
--------------------------------------------------------------------------------
/src/assets/img/login-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Angelasp/vue-element-admin/908a0b6ac98be1d8ef8a8c38be8511047f19d9c2/src/assets/img/login-bg.jpg
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Angelasp/vue-element-admin/908a0b6ac98be1d8ef8a8c38be8511047f19d9c2/src/assets/logo.png
--------------------------------------------------------------------------------
/src/assets/vuetable.json:
--------------------------------------------------------------------------------
1 | {
2 | "list": [{
3 | "date": "1997-11-11",
4 | "name": "林丽",
5 | "address": "吉林省 辽源市 龙山区"
6 | }, {
7 | "date": "1987-09-24",
8 | "name": "文敏",
9 | "address": "江西省 萍乡市 芦溪县"
10 | }, {
11 | "date": "1996-08-08",
12 | "name": "杨秀兰",
13 | "address": "黑龙江省 黑河市 五大连池市"
14 | }, {
15 | "date": "1978-06-18",
16 | "name": "魏强",
17 | "address": "广东省 韶关市 始兴县"
18 | }, {
19 | "date": "1977-07-09",
20 | "name": "石秀兰",
21 | "address": "江苏省 宿迁市 宿豫区"
22 | }, {
23 | "date": "1994-09-20",
24 | "name": "朱洋",
25 | "address": "海外 海外 -"
26 | }, {
27 | "date": "1980-01-22",
28 | "name": "傅敏",
29 | "address": "海外 海外 -"
30 | }, {
31 | "date": "1985-10-10",
32 | "name": "毛明",
33 | "address": "内蒙古自治区 包头市 九原区"
34 | }, {
35 | "date": "1975-09-08",
36 | "name": "何静",
37 | "address": "西藏自治区 阿里地区 普兰县"
38 | }, {
39 | "date": "1970-06-07",
40 | "name": "郭秀英",
41 | "address": "四川省 巴中市 恩阳区"
42 | }]
43 | }
--------------------------------------------------------------------------------
/src/components/common/Header.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
47 |
48 |
127 |
207 |
--------------------------------------------------------------------------------
/src/components/common/Home.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
7 | 后台管理系统
8 |
9 |
45 |
46 |
10 |
11 |
31 |
32 | {{username}}
33 |
34 |
35 |
36 |
37 | 用户信息
38 |
39 | 修改密码
40 | 退出登录
41 |
42 |
43 |
44 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 
28 |
29 |
30 |
28 |
3 |
16 |
17 |
18 |
20 |
21 |
23 |
24 |
26 |
27 |
31 |
32 |
33 |
34 |
35 |
97 |
--------------------------------------------------------------------------------
/src/components/common/Sidebar.vue:
--------------------------------------------------------------------------------
1 |
2 |
42 |
43 |
44 |
212 |
213 |
232 |
--------------------------------------------------------------------------------
/src/components/common/Tags.vue:
--------------------------------------------------------------------------------
1 |
2 |
23 |
24 |
111 |
112 |
113 |
189 |
--------------------------------------------------------------------------------
/src/components/common/bus.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | // 使用 Event Bus
4 | const bus = new Vue();
5 |
6 | export default bus;
--------------------------------------------------------------------------------
/src/components/common/directives.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | // v-dialogDrag: 弹窗拖拽属性
4 | Vue.directive('dialogDrag', {
5 | bind(el, binding, vnode, oldVnode) {
6 | const dialogHeaderEl = el.querySelector('.el-dialog__header');
7 | const dragDom = el.querySelector('.el-dialog');
8 |
9 | dialogHeaderEl.style.cssText += ';cursor:move;'
10 | dragDom.style.cssText += ';top:0px;'
11 |
12 | // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
13 | const sty = (() => {
14 | if (window.document.currentStyle) {
15 | return (dom, attr) => dom.currentStyle[attr];
16 | } else {
17 | return (dom, attr) => getComputedStyle(dom, false)[attr];
18 | }
19 | })()
20 |
21 | dialogHeaderEl.onmousedown = (e) => {
22 | // 鼠标按下，计算当前元素距离可视区的距离
23 | const disX = e.clientX - dialogHeaderEl.offsetLeft;
24 | const disY = e.clientY - dialogHeaderEl.offsetTop;
25 |
26 | const screenWidth = document.body.clientWidth; // body当前宽度
27 | const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
28 |
29 | const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
30 | const dragDomheight = dragDom.offsetHeight; // 对话框高度
31 |
32 | const minDragDomLeft = dragDom.offsetLeft;
33 | const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
34 |
35 | const minDragDomTop = dragDom.offsetTop;
36 | const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
37 |
38 |
39 | // 获取到的值带px 正则匹配替换
40 | let styL = sty(dragDom, 'left');
41 | let styT = sty(dragDom, 'top');
42 |
43 | // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
44 | if (styL.includes('%')) {
45 | styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
46 | styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
47 | } else {
48 | styL = +styL.replace(/\px/g, '');
49 | styT = +styT.replace(/\px/g, '');
50 | };
51 |
52 | document.onmousemove = function (e) {
53 | // 通过事件委托，计算移动的距离
54 | let left = e.clientX - disX;
55 | let top = e.clientY - disY;
56 |
57 | // 边界处理
58 | if (-(left) > minDragDomLeft) {
59 | left = -(minDragDomLeft);
60 | } else if (left > maxDragDomLeft) {
61 | left = maxDragDomLeft;
62 | }
63 |
64 | if (-(top) > minDragDomTop) {
65 | top = -(minDragDomTop);
66 | } else if (top > maxDragDomTop) {
67 | top = maxDragDomTop;
68 | }
69 |
70 | // 移动当前元素
71 | dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
72 | };
73 |
74 | document.onmouseup = function (e) {
75 | document.onmousemove = null;
76 | document.onmouseup = null;
77 | };
78 | }
79 | }
80 | })
81 |
--------------------------------------------------------------------------------
/src/components/page/403.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
15 |
8 |
9 |
10 |
12 |
13 |
14 |
3 |
12 |
13 |
14 |
23 |
24 |
25 |
57 |
--------------------------------------------------------------------------------
/src/components/page/404.vue:
--------------------------------------------------------------------------------
1 |
2 | 403
4 | 啊哦~ 你没有权限访问该页面哦
5 |
6 |
7 | 返回首页
8 |
9 | 返回上一页
10 |
11 |
3 |
12 |
13 |
14 |
23 |
24 |
25 |
57 |
--------------------------------------------------------------------------------
/src/components/page/BaseCharts.vue:
--------------------------------------------------------------------------------
1 |
2 | 404
4 | 啊哦~ 你所访问的页面不存在
5 |
6 |
7 | 返回首页
8 |
9 | 返回上一页
10 |
11 |
3 |
31 |
32 |
33 |
90 |
91 |
--------------------------------------------------------------------------------
/src/components/page/BaseForm.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | schart图表
6 |
7 |
8 |
9 |
30 |
10 | vue-schart：vue.js封装sChart.js的图表组件。
11 | 访问地址：vue-schart
12 |
13 |
14 |
17 | 柱状图
15 |
18 |
21 | 折线图
19 |
22 |
25 | 饼状图
23 |
26 |
29 | 环形图
27 |
3 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/src/components/page/BaseTable.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | 表单
6 | 基本表单
7 |
8 |
9 |
10 |
61 |
62 |
11 |
12 |
13 |
15 |
16 |
17 |
21 |
22 |
23 |
24 |
26 | -
27 |
28 |
30 |
31 |
32 |
34 |
35 |
37 |
38 |
39 |
43 |
44 |
45 |
46 |
50 |
51 |
52 |
54 |
55 | 表单提交
56 | 取消
57 |
58 |
59 |
60 |
3 |
41 |
42 |
43 |
45 |
46 |
48 |
49 |
51 |
52 |
53 |
57 |
58 |
59 |
60 |
61 |
67 |
68 |
69 |
70 |
187 |
188 |
216 |
--------------------------------------------------------------------------------
/src/components/page/DragDialog.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | 基础表格
6 |
7 |
8 |
9 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | 编辑
29 | 删除
30 |
31 |
32 |
33 |
38 |
39 |
40 |
10 | 批量删除
11 |
12 |
15 | 搜索
17 |
18 |
34 |
35 |
36 |
37 | 删除不可恢复，是否确定删除？
62 |
66 |
4 |
5 | 拖拽组件
6 | 拖拽排序
7 |
8 |
9 |
10 |
47 |
11 | Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件。
12 | 访问地址：Vue.Draggable
13 |
14 |
15 |
46 |
16 |
18 |
19 |
23 |
24 |
25 | todo
17 |
20 | {{item.content}}
21 |
22 |
26 |
28 |
29 |
33 |
34 |
35 | doing
27 |
30 | {{item.content}}
31 |
32 |
36 |
38 |
39 |
43 |
44 |
45 | done
37 |
40 | {{item.content}}
41 |
42 |
3 |
41 |
42 |
43 |
186 |
187 |
--------------------------------------------------------------------------------
/src/components/page/Login.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | 自定义图标
6 |
7 |
8 |
9 |
26 |
39 |
40 | 使用方法
10 |11 | 直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标） 12 |
13 |14 | 15 | <i class="el-icon-lx-redpacket_fill"></i> 16 |
17 |18 | 19 | <i class="el-icon-lx-weibo"></i> 20 |
21 |22 | 23 | <i class="el-icon-lx-emojifill"></i> 24 |
25 |26 |
图标
27 |
28 |
30 | -
31 |
-
32 | 33 | 34 | {{item}} 35 |36 |
37 |
3 |
23 |
24 |
25 |
58 |
59 |
--------------------------------------------------------------------------------
/src/components/page/Markdown.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
8 |
10 |
11 |
12 |
13 |
15 |
16 |
21 |
22 | 后台管理系统
5 |
17 | 登录
18 |
19 | Tips : 用户名和密码随便填随便填。
20 |
3 |
18 |
19 |
20 |
63 |
--------------------------------------------------------------------------------
/src/components/page/Permission.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | 表单
6 | markdown编辑器
7 |
8 |
9 |
17 |
3 |
15 |
16 |
17 |
24 |
25 |
--------------------------------------------------------------------------------
/src/components/page/Tabs.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | 权限测试
6 |
7 |
8 |
9 |
13 |
14 | 管理员权限页面
10 |只有用 admin 账号登录的才拥有管理员权限，才能进到这个页面，其他账号想进来都会跳到403页面，重新用管理员账号登录才有权限。
11 |想尝试一下，请
3 |
71 |
72 |
73 |
120 |
121 |
129 |
130 |
--------------------------------------------------------------------------------
/src/components/page/Upload.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | tab选项卡
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
19 |
20 | 标为已读
21 |
22 |
23 |
24 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
38 |
39 | 删除
40 |
41 |
42 |
43 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
58 |
59 | 还原
60 |
61 |
62 |
63 |
68 |
69 |
70 |
25 | 全部标为已读
26 |
27 |
44 | 删除全部
45 |
46 |
47 |
64 | 清空回收站
65 |
66 |
67 |
3 |
45 |
46 |
47 |
99 |
100 |
--------------------------------------------------------------------------------
/src/components/page/VueEditor.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | 表单
6 | 图片上传
7 |
8 |
9 |
10 |
20 |
21 |
24 |
37 |
43 |
44 | 支持拖拽
11 |
12 | Element UI自带上传组件。
13 | 访问地址：Element UI Upload
14 |
15 | 将文件拖到此处，或点击上传
22 | 只能上传jpg/png文件，且不超过500kb
23 | 支持裁剪
25 |
26 | vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。
27 | 访问地址：vue-cropperjs
28 |
29 |
30 | ![]()
31 |
35 |
36 | 选择图片
32 |
33 |
34 |
3 |
18 |
19 |
20 |
49 |
--------------------------------------------------------------------------------
/src/components/page/admin.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | 表单
6 | 编辑器
7 |
8 |
9 |
10 | 提交
16 |
17 |
11 | Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
12 | 访问地址：vue-quill-editor
13 |
14 |
3 |
4 |
5 |
6 |
22 |
23 |
24 |
25 |
26 |
41 |
42 |
152 |
--------------------------------------------------------------------------------
/src/components/page/sysmanager/usermanager.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
12 |
13 |
17 |
21 |
8 |
12 |
3 |
109 |
110 |
281 |
309 |
310 |
--------------------------------------------------------------------------------
/src/components/page/tree1.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 用户管理
6 |
7 |
8 |
9 |
29 |
38 |
39 | 编辑
44 | 删除
50 |
51 |
52 |
53 |
70 |
71 |
72 |
74 |
75 | 正常
76 | 禁用
77 |
78 |
79 |
83 |
84 |
85 |
86 |
87 |
88 |
90 |
91 |
92 |
96 |
97 |
98 | 正常
99 | 禁用
100 |
101 |
102 |
106 |
107 |
108 |
10 | 批量删除
17 | 搜索
19 | 新建用户
20 |
21 |
54 |
62 |
63 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
13 |
14 |
15 |
16 |
17 |
18 |
20 |
21 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/components/page/tree2.vue:
--------------------------------------------------------------------------------
1 |
2 | 基本类型树
9 |手风琴模式
19 |
3 |
4 |
7 |
8 |
11 |
12 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/components/page/tree3.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | 基础可选择
5 |懒加载
9 |默认选中
13 |
4 |
59 |
60 |
237 |
238 |
--------------------------------------------------------------------------------
/src/components/page/tree4.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Angelasp/vue-element-admin/908a0b6ac98be1d8ef8a8c38be8511047f19d9c2/src/components/page/tree4.vue
--------------------------------------------------------------------------------
/src/components/page/tree5.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Angelasp/vue-element-admin/908a0b6ac98be1d8ef8a8c38be8511047f19d9c2/src/components/page/tree5.vue
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import axios from 'axios';
5 | import ElementUI from 'element-ui';
6 | //import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
7 | import './assets/css/theme-green/index.css'; // 浅绿色主题
8 | import './assets/css/icon.css';
9 | import './components/common/directives';
10 | import "babel-polyfill";
11 | import store from './store'
12 | ////import Mock from './mock/mock'
13 | Vue.config.productionTip = false
14 | Vue.use(ElementUI, {
15 | size: 'small'
16 | });
17 | Vue.prototype.$axios = axios;
18 | //Mock.bootstrap();
19 | //使用钩子函数对路由进行权限跳转
20 | router.beforeEach((to, from, next) => {
21 | const role = localStorage.getItem('ms_username');
22 | if (!role && to.path !== '/login') {
23 | next('/login');
24 | } else if (to.meta.permission) {
25 | // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
26 | role === 'admin' ? next() : next('/403');
27 | } else {
28 | // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
29 | if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
30 | Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
31 | confirmButtonText: '确定'
32 | });
33 | } else {
34 | next();
35 | }
36 | }
37 | })
38 |
39 |
40 | new Vue({
41 | router,
42 | store,
43 | render: h => h(App)
44 | }).$mount('#app')
--------------------------------------------------------------------------------
/src/mock/data/user.js:
--------------------------------------------------------------------------------
1 | import Mock from 'mockjs';
2 | const users = [];
3 | for (let i = 0; i < 100; i++) {
4 | let user = {};
5 | user=Mock.mock({
6 | orderNum:i+1,
7 | userid:Mock.Random.guid(),
8 | username:Mock.Random.last(),
9 | isable:Mock.Random.integer(0,1).toString(),
10 | loginTime:Mock.Random.integer(0,20),
11 | loginDate:Mock.Random.date(),
12 | creater:Mock.Random.cname(),
13 | 'rolename|1':['admin','超级管理员','用户']
14 | })
15 | users.push(user);
16 | }
17 | export {users}
--------------------------------------------------------------------------------
/src/mock/mock.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import Mock from 'mockjs'
3 | import MockAdapter from 'axios-mock-adapter';
4 | import {users} from './data/user';
5 | import {sysmenu} from './data/sysmenu';
6 | let _users = users;
7 | export default{
8 | bootstrap(){
9 | let mock = new MockAdapter(axios);
10 | mock.onGet('/user/list').reply(config=>{
11 | let {searchInfo,page=1}=config.params;
12 | let getUsers = _users.filter(user=>{
13 | if(searchInfo&&user.username.indexOf(searchInfo)!=-1||user.rolename.indexOf(searchInfo)!=-1)return true;
14 | return false;
15 | })
16 | let total = getUsers.length;
17 | getUsers = getUsers.filter((user,index)=>{
18 | return index<20*page&&index>=20*(page-1);
19 | })
20 | return new Promise((resolve,reject)=>{
21 | setTimeout(()=>{
22 | resolve([200,{
23 | users:getUsers,
24 | total:total
25 | }])
26 | },1000)
27 | })
28 | })
29 | mock.onGet('/user/sysmenu').reply(()=>{
30 | return new Promise((resolve,reject)=>{
31 | resolve([200,{data:sysmenu}])
32 | })
33 | })
34 | mock.onGet('/user/deletUsers').reply((config)=>{
35 | let {delIds} = config.params;
36 | delIds = delIds.split(',')
37 | _users = _users.filter(u=>!delIds.includes(u.userid));
38 | return new Promise((resolve,reject)=>{
39 | setTimeout(()=>{
40 | resolve([200,{
41 | code:200,
42 | msg:'删除成功'
43 | }]),
44 | reject([500,{
45 | code:500,
46 | msg:'操作失败'
47 | }])
48 | },500)
49 |
50 | })
51 | })
52 | mock.onGet('/user/editUser').reply((config)=>{
53 | let {userid,username,isable} = config.params;
54 | _users.forEach(u => {
55 | if(u.userid==userid){
56 | u.username=username;
57 | u.isable=isable;
58 | }
59 | })
60 | return new Promise((resolve,reject)=>{
61 | resolve([200,{
62 | code:200,
63 | msg:'修改成功'
64 | }])
65 | })
66 | })
67 | mock.onGet('user/addUser').reply((config)=>{
68 | debugger
69 | let {id} = Mock.mock({
70 | id:Mock.Random.guid()
71 | })
72 | let orderNum = _users.length;
73 | let {username,rolename,isable} = config.params;
74 | _users.unshift({
75 | orderNum:++orderNum,
76 | userid:id,
77 | username:username,
78 | rolename:rolename,
79 | loginTime:'0',
80 | loginDate:'',
81 | creater:localStorage.getItem('ms_username'),
82 | isable:isable
83 | });
84 | return new Promise((resolve,reject)=>{
85 | resolve([200,{
86 | msg:'添加成功',
87 | code:200
88 | }])
89 | })
90 | })
91 | mock.onGet('/user/DeleteOne').reply(config=>{
92 | let {userid}=config.params;
93 | _users.forEach((item,index)=>{
94 | if(item.userid==userid){
95 | _users.splice(index,1);
96 | }
97 | })
98 | return new Promise((resolve,reject)=>{
99 | resolve([200,{
100 | code:200,
101 | msg:'删除成功'
102 | }])
103 | })
104 | })
105 | }
106 | }
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Router from 'vue-router';
3 |
4 | Vue.use(Router);
5 |
6 | export default new Router({
7 | routes: [
8 | {
9 | path: '/',
10 | redirect: '/dashboard'
11 | },
12 | {
13 | path: '/',
14 | component: resolve => require(['../components/common/Home.vue'], resolve),
15 | meta: { title: '自述文件' },
16 | children:[
17 | {
18 | path: '/dashboard',
19 | component: resolve => require(['../components/page/Dashboard.vue'], resolve),
20 | meta: { title: '系统首页' }
21 | },
22 | {
23 | path: '/icon',
24 | component: resolve => require(['../components/page/Icon.vue'], resolve),
25 | meta: { title: '自定义图标' }
26 | },
27 | {
28 | path: '/table',
29 | component: resolve => require(['../components/page/BaseTable.vue'], resolve),
30 | meta: { title: '基础表格' }
31 | },
32 | {
33 | path: '/tabs',
34 | component: resolve => require(['../components/page/Tabs.vue'], resolve),
35 | meta: { title: 'tab选项卡' }
36 | },
37 | {
38 | path: '/form',
39 | component: resolve => require(['../components/page/BaseForm.vue'], resolve),
40 | meta: { title: '基本表单' }
41 | },
42 | {
43 | path: '/tree1',
44 | component: resolve => require(['../components/page/tree1.vue'], resolve),
45 | meta: { title: '基本树' }
46 | },
47 | {
48 | path: '/tree2',
49 | component: resolve => require(['../components/page/tree2.vue'], resolve),
50 | meta: { title: '可选择树' }
51 | },
52 | {
53 | path: '/tree3',
54 | component: resolve => require(['../components/page/tree3.vue'], resolve),
55 | meta: { title: '可编辑树' }
56 | },
57 | {
58 | // 富文本编辑器组件
59 | path: '/tree4',
60 | component: resolve => require(['../components/page/tree4.vue'], resolve),
61 | meta: { title: '可查询树' }
62 | },
63 | {
64 | // 富文本编辑器组件
65 | path: '/tree5',
66 | component: resolve => require(['../components/page/tree5.vue'], resolve),
67 | meta: { title: '节点选择' }
68 | },
69 | {
70 | // 富文本编辑器组件
71 | path: '/editor',
72 | component: resolve => require(['../components/page/VueEditor.vue'], resolve),
73 | meta: { title: '富文本编辑器' }
74 | },
75 | {
76 | // markdown组件
77 | path: '/markdown',
78 | component: resolve => require(['../components/page/Markdown.vue'], resolve),
79 | meta: { title: 'markdown编辑器' }
80 | },
81 | {
82 | // 图片上传组件
83 | path: '/upload',
84 | component: resolve => require(['../components/page/Upload.vue'], resolve),
85 | meta: { title: '文件上传' }
86 | },
87 | {
88 | // vue-schart组件
89 | path: '/charts',
90 | component: resolve => require(['../components/page/BaseCharts.vue'], resolve),
91 | meta: { title: 'schart图表' }
92 | },
93 | {
94 | // 拖拽列表组件
95 | path: '/drag',
96 | component: resolve => require(['../components/page/DragList.vue'], resolve),
97 | meta: { title: '拖拽列表' }
98 | },
99 | {
100 | // 拖拽Dialog组件
101 | path: '/dialog',
102 | component: resolve => require(['../components/page/DragDialog.vue'], resolve),
103 | meta: { title: '拖拽弹框' }
104 | },
105 | {
106 | // 权限页面
107 | path: '/permission',
108 | component: resolve => require(['../components/page/Permission.vue'], resolve),
109 | meta: { title: '权限测试', permission: true }
110 | },
111 | {
112 | path: '/404',
113 | component: resolve => require(['../components/page/404.vue'], resolve),
114 | meta: { title: '404' }
115 | },
116 | {
117 | path: '/403',
118 | component: resolve => require(['../components/page/403.vue'], resolve),
119 | meta: { title: '403' }
120 | },
121 | {
122 | path: '/admin',
123 | component: resolve => require(['../components/page/admin.vue'], resolve),
124 | meta: { title: '用户信息' }
125 | },
126 | {
127 | path: '/usermanager',
128 | component: resolve => require(['../components/page/sysmanager/usermanager.vue'], resolve),
129 | meta: { title: '用户管理' }
130 | }
131 | ]
132 | },
133 | {
134 | path: '/login',
135 | component: resolve => require(['../components/page/Login.vue'], resolve)
136 | },
137 | {
138 | path: '*',
139 | redirect: '/404'
140 | }
141 | ]
142 | })
143 |
--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | import dailog from './modules/dailog'
4 | Vue.use(Vuex);
5 | const store = new Vuex.Store({
6 | modules:{
7 | dailog
8 | }
9 | });
10 | export default store;
--------------------------------------------------------------------------------
/src/store/modules/dailog.js:
--------------------------------------------------------------------------------
1 | const state={
2 | showUser:false
3 | };
4 | const getters={
5 | isShow(state){
6 | return state.showUser;
7 | }
8 | }
9 | const mutations={
10 | hide(state){
11 | state.showUser=false;
12 | },
13 | show(state){
14 | state.showUser=true;
15 | }
16 | }
17 | const actions={
18 | showDailog({commit}){
19 | commit('show');
20 | },
21 | hideDailog({commit}){
22 | commit('hide');
23 | }
24 | }
25 | export default{
26 | namespaced:true,
27 | getters,
28 | mutations,
29 | actions,
30 | state
31 | }
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | baseUrl: './',
3 | productionSourceMap: false,
4 | devServer: {
5 | //port:8888,
6 | proxy: {
7 | '/api':{
8 | target:'http://jsonplaceholder.typicode.com',
9 | changeOrigin:true,
10 | pathRewrite:{
11 | '/api':''
12 | }
13 | },
14 | '/testApi':{
15 | target:'http://111.8.20.247:89/api/apph5api',
16 | changeOrigin:true,
17 | pathRewrite:{
18 | '^/testApi':'/testApi'
19 | }
20 | },
21 | '/ms':{
22 | target: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
23 | changeOrigin: true
24 | }
25 | }
26 | }
27 | }
--------------------------------------------------------------------------------
5 |
6 |
7 |
19 |
20 |
39 |
40 |
41 |
57 |
58 |
8 |
18 | 使用 render-content
9 |
21 |
29 |
30 | {{ node.label }}
31 |
32 | Append
33 | Delete
34 |
35 |
36 |
37 |
38 | 使用 scoped slot
22 |