├── .browserslistrc
├── .gitattributes
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── assets
        ├── avatar.jpg
        ├── css
        │   └── global.css
        └── logo.png
    ├── components
        ├── Home.vue
        ├── Login.vue
        ├── Welcome.vue
        ├── goods
        │   ├── Add.vue
        │   ├── Cate.vue
        │   ├── Edit.vue
        │   ├── List.vue
        │   └── Params.vue
        ├── order
        │   ├── Order.vue
        │   └── citydata.js
        ├── power
        │   ├── Rights.vue
        │   └── Roles.vue
        ├── report
        │   └── Report.vue
        └── user
        │   └── Users.vue
    ├── main.js
    ├── plugins
        ├── axios.js
        └── element.js
    └── router
        └── index.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.js linguist-language=vue


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-shop
 2 | 
 3 | ## Blog
 4 | 
 5 | https://naccl.top/blog/15
 6 | 
 7 | ## Project setup
 8 | 
 9 | ```
10 | npm install
11 | ```
12 | 
13 | ### Compiles and hot-reloads for development
14 | ```
15 | npm run serve
16 | ```
17 | 
18 | ### Compiles and minifies for production
19 | ```
20 | npm run build
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | //项目发布阶段使用的babel插件
 2 | const prodPlugins = []
 3 | if (process.env.NODE_ENV === 'production') {
 4 | 	prodPlugins.push('transform-remove-console')
 5 | }
 6 | 
 7 | module.exports = {
 8 | 	"presets": [
 9 | 		"@vue/cli-plugin-babel/preset"
10 | 	],
11 | 	'plugins': [
12 | 		...prodPlugins
13 | 	]
14 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-shop",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "core-js": "^3.6.5",
11 |     "echarts": "^4.8.0",
12 |     "element-ui": "^2.4.5",
13 |     "lodash": "^4.17.19",
14 |     "moment": "^2.27.0",
15 |     "nprogress": "^0.2.0",
16 |     "vue": "^2.6.11",
17 |     "vue-quill-editor": "^3.0.6",
18 |     "vue-router": "^3.2.0"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "~4.4.0",
22 |     "@vue/cli-plugin-router": "~4.4.0",
23 |     "@vue/cli-plugin-vuex": "~4.4.0",
24 |     "@vue/cli-service": "~4.4.0",
25 |     "axios": "^0.18.0",
26 |     "babel-plugin-transform-remove-console": "^6.9.4",
27 |     "less-loader": "^6.2.0",
28 |     "vue-cli-plugin-axios": "0.0.4",
29 |     "vue-cli-plugin-element": "^1.0.1",
30 |     "vue-template-compiler": "^2.6.11"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Naccl/vue-shop/eed28f5ad4e75ac6abf306b9569248e41a7f64e1/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | export default {
10 |   name: 'app',
11 | }
12 | </script>
13 | 
14 | <style>
15 | 
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/assets/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Naccl/vue-shop/eed28f5ad4e75ac6abf306b9569248e41a7f64e1/src/assets/avatar.jpg


--------------------------------------------------------------------------------
/src/assets/css/global.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | #app {
 4 |     height: 100%;
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     min-width: 1366px;
 8 | }
 9 | 
10 | .el-breadcrumb {
11 |     margin-bottom: 15px;
12 | }
13 | 
14 | .el-card {
15 |     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
16 | }
17 | 
18 | .el-table {
19 |     margin-top: 15px;
20 |     margin-bottom: 15px;
21 | }
22 | 
23 | .el-steps {
24 |     margin: 20px 0;
25 | }
26 | 
27 | .el-step__title {
28 |     font-size: 14px;
29 | }
30 | 
31 | .ql-editor {
32 |     min-height: 300px;
33 | }


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Naccl/vue-shop/eed28f5ad4e75ac6abf306b9569248e41a7f64e1/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<el-container class="home-container">
  3 | 		<!--头部-->
  4 | 		<el-header>
  5 | 			<div>
  6 | 				<img src="../assets/logo.png" alt="" height="60">
  7 | 				<span>电商后台管理系统</span>
  8 | 			</div>
  9 | 			<el-button type="info" @click="logout">退出</el-button>
 10 | 		</el-header>
 11 | 		<!--页面主体-->
 12 | 		<el-container>
 13 | 			<!--侧边栏-->
 14 | 			<el-aside :width="isCollapse? '64px' : '200px'">
 15 | 				<div class="toggle-button" @click="isCollapse=!isCollapse"><i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i></div>
 16 | 				<!--菜单-->
 17 | 				<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" :default-openeds="defaultOpeneds"
 18 | 				         :unique-opened="false" :collapse="isCollapse" :collapse-transition="false"
 19 | 				         :router="true" :default-active="activePath">
 20 | 					<!-- 一级菜单 -->
 21 | 					<el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
 22 | 						<!-- 一级菜单的模板区域 -->
 23 | 						<template slot="title">
 24 | 							<i :class="iconsObj[item.id]"></i>
 25 | 							<span>{{ item.authName }}</span>
 26 | 						</template>
 27 | 						<!-- 二级菜单 -->
 28 | 						<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/'+subItem.path)">
 29 | 							<template slot="title">
 30 | 								<i class="el-icon-menu"></i>
 31 | 								<span>{{ subItem.authName }}</span>
 32 | 							</template>
 33 | 						</el-menu-item>
 34 | 					</el-submenu>
 35 | 				</el-menu>
 36 | 			</el-aside>
 37 | 			<!--右侧内容主体-->
 38 | 			<el-main>
 39 | 				<router-view></router-view>
 40 | 			</el-main>
 41 | 		</el-container>
 42 | 	</el-container>
 43 | </template>
 44 | 
 45 | <script>
 46 | 	export default {
 47 | 		name: "Home",
 48 | 		data() {
 49 | 			return {
 50 | 				menulist: [],
 51 | 				iconsObj: {
 52 | 					'125': 'iconfont el-icon-user-solid',
 53 | 					'103': 'iconfont el-icon-s-grid',
 54 | 					'101': 'iconfont el-icon-s-management',
 55 | 					'102': 'iconfont el-icon-s-order',
 56 | 					'145': 'iconfont el-icon-s-data',
 57 | 				},
 58 | 				//是否折叠
 59 | 				isCollapse: false,
 60 | 				//被激活的链接地址
 61 | 				activePath: '',
 62 | 				//默认打开的菜单
 63 | 				defaultOpeneds: []
 64 | 			}
 65 | 		},
 66 | 		created() {
 67 | 			this.getMenuList()
 68 | 			this.activePath = window.sessionStorage.getItem('activePath')
 69 | 		},
 70 | 		methods: {
 71 | 			logout() {
 72 | 				window.sessionStorage.clear()
 73 | 				this.$router.push('/login')
 74 | 			},
 75 | 			//获取所有的菜单
 76 | 			getMenuList() {
 77 | 				axios.get('menus').then(response => {
 78 | 					const res = response.data
 79 | 					if (res.meta.status === 200) {
 80 | 						res.data.forEach(item => {
 81 | 							this.defaultOpeneds.push('' + item.id)
 82 | 						})
 83 | 						this.menulist = res.data
 84 | 					} else {
 85 | 						this.$message.error(res.meta.msg)
 86 | 					}
 87 | 				}).catch(() => {
 88 | 					this.$message.error("获取失败")
 89 | 				})
 90 | 			},
 91 | 			//保存链接的激活状态
 92 | 			saveNavState(activePath) {
 93 | 				this.activePath = activePath
 94 | 				window.sessionStorage.setItem('activePath', activePath)
 95 | 			}
 96 | 		}
 97 | 	}
 98 | </script>
 99 | 
100 | <style lang="less" scoped>
101 | 	.home-container {
102 | 		height: 100%;
103 | 	}
104 | 
105 | 	.el-header {
106 | 		background-color: #373D41;
107 | 		display: flex;
108 | 		justify-content: space-between;
109 | 		padding-left: 10px;
110 | 		align-items: center;
111 | 		color: #ffffff;
112 | 		font-size: 22px;
113 | 
114 | 		> div {
115 | 			display: flex;
116 | 			align-items: center;
117 | 
118 | 			span {
119 | 				margin-left: 15px;
120 | 			}
121 | 		}
122 | 	}
123 | 
124 | 	.el-aside {
125 | 		background-color: #333744;
126 | 
127 | 		.el-menu {
128 | 			border-right: none;
129 | 		}
130 | 	}
131 | 
132 | 	.el-main {
133 | 		background-color: #eaedf1;
134 | 	}
135 | 
136 | 	.iconfont {
137 | 		margin-right: 20px;
138 | 		font-size: 20px;
139 | 	}
140 | 
141 | 	.toggle-button {
142 | 		background-color: #4a5064;
143 | 		font-size: 20px;
144 | 		line-height: 40px;
145 | 		color: #ffffff;
146 | 		text-align: center;
147 | 		cursor: pointer;
148 | 	}
149 | </style>


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="login_container">
  3 | 		<div class="login_box">
  4 | 			<!--头像区域-->
  5 | 			<div class="avatar_box">
  6 | 				<img src="../assets/avatar.jpg" alt="">
  7 | 			</div>
  8 | 			<!--登录表单区域-->
  9 | 			<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form">
 10 | 				<el-form-item prop="username">
 11 | 					<el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
 12 | 				</el-form-item>
 13 | 				<el-form-item prop="password">
 14 | 					<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" show-password></el-input>
 15 | 				</el-form-item>
 16 | 				<el-form-item class="btns">
 17 | 					<el-button type="primary" @click="login">登录</el-button>
 18 | 					<el-button type="info" @click="resetLoginForm">重置</el-button>
 19 | 				</el-form-item>
 20 | 			</el-form>
 21 | 		</div>
 22 | 	</div>
 23 | </template>
 24 | 
 25 | <script>
 26 | 	export default {
 27 | 		name: "Login",
 28 | 		data() {
 29 | 			return {
 30 | 				loginForm: {
 31 | 					username: 'admin',
 32 | 					password: '123456'
 33 | 				},
 34 | 				loginFormRules: {
 35 | 					username: [
 36 | 						{required: true, message: '请输入用户名', trigger: 'blur'},
 37 | 					],
 38 | 					password: [
 39 | 						{required: true, message: '请输入密码', trigger: 'blur'},
 40 | 					]
 41 | 				}
 42 | 			}
 43 | 		},
 44 | 		methods: {
 45 | 			resetLoginForm() {
 46 | 				this.$refs.loginFormRef.resetFields();
 47 | 			},
 48 | 			login() {
 49 | 				this.$refs.loginFormRef.validate(valid => {
 50 | 					if (valid) {
 51 | 						axios.post("login", this.loginForm).then(response => {
 52 | 							const res = response.data
 53 | 							if (res.meta.status === 200) {
 54 | 								this.$message.success(res.meta.msg);
 55 | 								window.sessionStorage.setItem('token', res.data.token)
 56 | 								this.$router.push('/home')
 57 | 							} else {
 58 | 								this.$message.error(res.meta.msg);
 59 | 							}
 60 | 						}).catch(() => {
 61 | 							this.$message.error('请求失败')
 62 | 						})
 63 | 					}
 64 | 				})
 65 | 			}
 66 | 		}
 67 | 	}
 68 | </script>
 69 | 
 70 | <style lang="less" scoped>
 71 | 	.login_container {
 72 | 		height: 100%;
 73 | 		background-color: #2b4b6b;
 74 | 	}
 75 | 
 76 | 	.login_box {
 77 | 		width: 450px;
 78 | 		height: 300px;
 79 | 		background-color: #fff;
 80 | 		border-radius: 3px;
 81 | 		position: absolute;
 82 | 		left: 50%;
 83 | 		top: 50%;
 84 | 		transform: translate(-50%, -50%);
 85 | 
 86 | 		.avatar_box {
 87 | 			height: 130px;
 88 | 			width: 130px;
 89 | 			border: 1px solid #eee;
 90 | 			border-radius: 50%;
 91 | 			padding: 10px;
 92 | 			box-shadow: 0 0 10px #ddd;
 93 | 			position: absolute;
 94 | 			left: 50%;
 95 | 			transform: translate(-50%, -50%);
 96 | 			background-color: #fff;
 97 | 
 98 | 			img {
 99 | 				width: 100%;
100 | 				height: 100%;
101 | 				border-radius: 50%;
102 | 				background-color: #eee;
103 | 			}
104 | 		}
105 | 	}
106 | 
107 | 	.login_form {
108 | 		position: absolute;
109 | 		bottom: 0;
110 | 		width: 100%;
111 | 		padding: 0 20px;
112 | 		box-sizing: border-box;
113 | 	}
114 | 
115 | 	.btns {
116 | 		display: flex;
117 | 		justify-content: flex-end;
118 | 	}
119 | 
120 | </style>


--------------------------------------------------------------------------------
/src/components/Welcome.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<h3>Welcome</h3>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 	export default {
 9 | 		name: "Welcome"
10 | 	}
11 | </script>
12 | 
13 | <style lang="less" scoped>
14 | 
15 | </style>


--------------------------------------------------------------------------------
/src/components/goods/Add.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<!--面包屑导航区-->
  4 | 		<el-breadcrumb separator-class="el-icon-arrow-right">
  5 | 			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6 | 			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
  7 | 			<el-breadcrumb-item>添加商品</el-breadcrumb-item>
  8 | 		</el-breadcrumb>
  9 | 
 10 | 		<el-card>
 11 | 			<!--提示信息-->
 12 | 			<el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert>
 13 | 			<!--步骤条-->
 14 | 			<el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
 15 | 				<el-step title="基本信息"></el-step>
 16 | 				<el-step title="商品参数"></el-step>
 17 | 				<el-step title="商品属性"></el-step>
 18 | 				<el-step title="商品图片"></el-step>
 19 | 				<el-step title="商品内容"></el-step>
 20 | 				<el-step title="完成"></el-step>
 21 | 			</el-steps>
 22 | 			<!--tab标签栏-->
 23 | 			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" label-position="top">
 24 | 				<el-tabs v-model="activeIndex" tab-position="left" :before-leave="beforeTabLeave">
 25 | 					<el-tab-pane label="基本信息" name="0">
 26 | 						<el-form-item label="商品名称" prop="goods_name">
 27 | 							<el-input v-model="addForm.goods_name"></el-input>
 28 | 						</el-form-item>
 29 | 						<el-form-item label="商品价格" prop="goods_price">
 30 | 							<el-input v-model="addForm.goods_price" type="number"></el-input>
 31 | 						</el-form-item>
 32 | 						<el-form-item label="商品重量" prop="goods_weight">
 33 | 							<el-input v-model="addForm.goods_weight" type="number"></el-input>
 34 | 						</el-form-item>
 35 | 						<el-form-item label="商品数量" prop="goods_number">
 36 | 							<el-input v-model="addForm.goods_number" type="number"></el-input>
 37 | 						</el-form-item>
 38 | 						<el-form-item label="商品分类" prop="goods_cat">
 39 | 							<el-cascader v-model="addForm.goods_cat" :options="cateList" :props="cascaderProps" @change="handleChange" style="width: 300px"></el-cascader>
 40 | 						</el-form-item>
 41 | 					</el-tab-pane>
 42 | 					<el-tab-pane label="商品参数" name="1">
 43 | 						<el-form-item :label="item.attr_name" v-for="(item,index) in manyTableData" :key="item.attr_id">
 44 | 							<el-checkbox-group v-model="checkedManyTableData[index].attr_vals">
 45 | 								<el-checkbox :label="cb" v-for="(cb,index) in item.attr_vals" :key="index" border></el-checkbox>
 46 | 							</el-checkbox-group>
 47 | 						</el-form-item>
 48 | 					</el-tab-pane>
 49 | 					<el-tab-pane label="商品属性" name="2">
 50 | 						<el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id">
 51 | 							<el-input v-model="item.attr_vals"></el-input>
 52 | 						</el-form-item>
 53 | 					</el-tab-pane>
 54 | 					<el-tab-pane label="商品图片" name="3">
 55 | 						<el-upload action="http://127.0.0.1:8888/api/private/v1/upload" :on-preview="handlePreview"
 56 | 						           :on-remove="handleRemove" list-type="picture" :headers="headerObj" :on-success="handleSuccess">
 57 | 							<el-button type="primary">点击上传</el-button>
 58 | 						</el-upload>
 59 | 					</el-tab-pane>
 60 | 					<el-tab-pane label="商品内容" name="4">
 61 | 						<quill-editor v-model="addForm.goods_introduce"></quill-editor>
 62 | 						<el-button type="primary" class="btnAdd" @click="add">添加商品</el-button>
 63 | 					</el-tab-pane>
 64 | 				</el-tabs>
 65 | 			</el-form>
 66 | 		</el-card>
 67 | 
 68 | 		<!--图片预览-->
 69 | 		<el-dialog title="图片预览" width="50%" :visible.sync="previewDialogVisible">
 70 | 			<!--内容主体-->
 71 | 			<img :src="previewPath" alt="" class="previewImg">
 72 | 		</el-dialog>
 73 | 	</div>
 74 | </template>
 75 | 
 76 | <script>
 77 | 	import _ from 'lodash'
 78 | 
 79 | 	export default {
 80 | 		name: "Add",
 81 | 		data() {
 82 | 			return {
 83 | 				cateList: [],
 84 | 				//指定级联选择器的配置对象
 85 | 				cascaderProps: {
 86 | 					expandTrigger: 'hover',
 87 | 					value: 'cat_id',
 88 | 					label: 'cat_name',
 89 | 					children: 'children'
 90 | 				},
 91 | 				activeIndex: '0',
 92 | 				addForm: {
 93 | 					goods_name: '',
 94 | 					goods_price: 0,
 95 | 					goods_weight: 0,
 96 | 					goods_number: 0,
 97 | 					goods_cat: [],
 98 | 					pics: [],
 99 | 					goods_introduce: '',
100 | 					attrs: []
101 | 				},
102 | 				addFormRules: {
103 | 					goods_name: [
104 | 						{required: true, message: '请输入商品名称', trigger: 'blur'}
105 | 					],
106 | 					goods_price: [
107 | 						{required: true, message: '请输入商品价格', trigger: 'blur'}
108 | 					],
109 | 					goods_weight: [
110 | 						{required: true, message: '请输入商品重量', trigger: 'blur'}
111 | 					],
112 | 					goods_number: [
113 | 						{required: true, message: '请输入商品数量', trigger: 'blur'}
114 | 					],
115 | 					goods_cat: [
116 | 						{required: true, message: '请选择商品分类', trigger: 'blur'}
117 | 					]
118 | 				},
119 | 				//供选择的商品参数列表
120 | 				manyTableData: [],
121 | 				//真正双向绑定的选中的商品参数列表
122 | 				checkedManyTableData: [],
123 | 				//商品属性列表
124 | 				onlyTableData: [],
125 | 				//图片上传请求头
126 | 				headerObj: {
127 | 					Authorization: window.sessionStorage.getItem('token')
128 | 				},
129 | 				//预览图片url
130 | 				previewPath: '',
131 | 				//图片预览对话框显示状态
132 | 				previewDialogVisible: false
133 | 			}
134 | 		},
135 | 		created() {
136 | 			this.getCateList()
137 | 		},
138 | 		methods: {
139 | 			//获取商品分类数据
140 | 			getCateList() {
141 | 				axios.get('categories').then(response => {
142 | 					const res = response.data
143 | 					if (res.meta.status === 200) {
144 | 						this.cateList = res.data
145 | 					} else {
146 | 						this.$message.error(res.meta.msg)
147 | 					}
148 | 				}).catch(() => {
149 | 					this.$message.error('请求失败')
150 | 				})
151 | 			},
152 | 			handleChange() {
153 | 				if (this.addForm.goods_cat.length !== 3) {
154 | 					this.addForm.goods_cat = []
155 | 					return
156 | 				}
157 | 				//应该在选择商品分类时获取数据，如果在切换标签时获取，无法保存修改后的数据
158 | 				//获取商品参数数据
159 | 				axios.get(`categories/${this.cateId}/attributes`, {params: {sel: 'many'}}).then(response => {
160 | 					const res = response.data
161 | 					if (res.meta.status === 200) {
162 | 						res.data.forEach(item => {
163 | 							item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []
164 | 						})
165 | 						this.manyTableData = res.data
166 | 						//深拷贝一份manyTableData
167 | 						this.checkedManyTableData = _.cloneDeep(res.data)
168 | 					} else {
169 | 						this.$message.error(res.meta.msg)
170 | 					}
171 | 				}).catch(() => {
172 | 					this.$message.error('请求失败')
173 | 				})
174 | 				//获取商品属性数据
175 | 				axios.get(`categories/${this.cateId}/attributes`, {params: {sel: 'only'}}).then(response => {
176 | 					const res = response.data
177 | 					if (res.meta.status === 200) {
178 | 						this.onlyTableData = res.data
179 | 					} else {
180 | 						this.$message.error(res.meta.msg)
181 | 					}
182 | 				}).catch(() => {
183 | 					this.$message.error('请求失败')
184 | 				})
185 | 			},
186 | 			//阻止tab标签切换
187 | 			beforeTabLeave(activeName, oldActiveName) {
188 | 				if (oldActiveName === '0' && this.addForm.goods_cat.length !== 3) {
189 | 					this.$message.error('请选择商品分类')
190 | 					return false
191 | 				}
192 | 			},
193 | 			//图片预览
194 | 			handlePreview(file) {
195 | 				this.previewPath = file.response.data.url
196 | 				this.previewDialogVisible = true
197 | 			},
198 | 			//移除图片
199 | 			handleRemove(file) {
200 | 				const filePath = file.response.data.tmp_path
201 | 				const i = this.addForm.pics.findIndex(x => x.pic === filePath)
202 | 				this.addForm.pics.splice(i, 1)
203 | 			},
204 | 			//图片上传成功hook
205 | 			handleSuccess(response) {
206 | 				if (response.meta.status === 200) {
207 | 					this.$message.success(response.meta.msg)
208 | 					this.addForm.pics.push({pic: response.data.tmp_path})
209 | 				} else {
210 | 					this.$message.error(response.meta.msg)
211 | 				}
212 | 			},
213 | 			//添加商品
214 | 			add() {
215 | 				this.$refs.addFormRef.validate(valid => {
216 | 					if (valid) {
217 | 						//深拷贝一份form表单数据
218 | 						const form = _.cloneDeep(this.addForm)
219 | 						form.goods_cat = form.goods_cat.join(',')
220 | 						//处理商品参数
221 | 						this.checkedManyTableData.forEach(item => {
222 | 							const newInfo = {
223 | 								attr_id: item.attr_id,
224 | 								attr_value: item.attr_vals.join(',')
225 | 							}
226 | 							form.attrs.push(newInfo)
227 | 						})
228 | 						//处理商品属性
229 | 						this.onlyTableData.forEach(item => {
230 | 							const newInfo = {
231 | 								attr_id: item.attr_id,
232 | 								attr_value: item.attr_vals
233 | 							}
234 | 							form.attrs.push(newInfo)
235 | 						})
236 | 
237 | 						axios.post('goods', form).then(response => {
238 | 							const res = response.data
239 | 							if (res.meta.status === 201) {
240 | 								this.$message.success(res.meta.msg)
241 | 								this.$router.push('/goods')
242 | 							} else {
243 | 								this.$message.error(res.meta.msg)
244 | 							}
245 | 						}).catch(() => {
246 | 							this.$message.error('操作失败')
247 | 						})
248 | 					} else {
249 | 						return this.$message.error('请填写必要的表单项')
250 | 					}
251 | 				})
252 | 			}
253 | 		},
254 | 		computed: {
255 | 			cateId() {
256 | 				if (this.addForm.goods_cat.length === 3) {
257 | 					return this.addForm.goods_cat[2]
258 | 				}
259 | 				return null
260 | 			}
261 | 		}
262 | 	}
263 | </script>
264 | 
265 | <style lang="less" scoped>
266 | 	.el-steps .el-step {
267 | 		flex-basis: 16.6667% !important
268 | 	}
269 | 
270 | 	.el-checkbox {
271 | 		margin: 0 10px 0 0 !important;
272 | 	}
273 | 
274 | 	.previewImg {
275 | 		width: 100%;
276 | 	}
277 | 
278 | 	.btnAdd {
279 | 		margin-top: 15px;
280 | 	}
281 | </style>


--------------------------------------------------------------------------------
/src/components/goods/Cate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<!--面包屑导航区-->
  4 | 		<el-breadcrumb separator-class="el-icon-arrow-right">
  5 | 			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6 | 			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
  7 | 			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
  8 | 		</el-breadcrumb>
  9 | 
 10 | 		<!--卡片视图区域-->
 11 | 		<el-card>
 12 | 			<!--添加分类按钮-->
 13 | 			<el-row>
 14 | 				<el-col>
 15 | 					<el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
 16 | 				</el-col>
 17 | 			</el-row>
 18 | 
 19 | 			<!-- vue-table-with-tree-grid依赖 树形列表 -->
 20 | 			<!--<tree-table class="treeTable" :data="cateList" :columns="columns" :selection-type="false" :expand-type="false"
 21 | 			            :show-index="true" :border="true" :stripe="false">
 22 | 				&lt;!&ndash;是否有效&ndash;&gt;
 23 | 				<template slot="isok" slot-scope="scope">
 24 | 					<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen"></i>
 25 | 					<i class="el-icon-error" v-else style="color: red"></i>
 26 | 				</template>
 27 | 				&lt;!&ndash;排序&ndash;&gt;
 28 | 				<template slot="order" slot-scope="scope">
 29 | 					<el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
 30 | 					<el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
 31 | 					<el-tag size="mini" type="warning" v-else>三级</el-tag>
 32 | 				</template>
 33 | 				&lt;!&ndash;操作&ndash;&gt;
 34 | 				<template slot="opt" slot-scope="scope">
 35 | 					<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
 36 | 					<el-popconfirm title="确定删除吗？" icon="el-icon-delete" iconColor="red" @onConfirm="removeCateById(scope.row.cat_id)">
 37 | 						<el-button size="mini" type="danger" icon="el-icon-delete" slot="reference">删除</el-button>
 38 | 					</el-popconfirm>
 39 | 				</template>
 40 | 			</tree-table>-->
 41 | 
 42 | 			<!-- Element 树形列表 -->
 43 | 			<el-table :data="cateList" row-key="cat_id" :tree-props="{children: 'children'}" :border="true" :stripe="true">
 44 | 				<el-table-column label="序号" type="index" width="50"></el-table-column>
 45 | 				<el-table-column label="分类名称" prop="cat_name"></el-table-column>
 46 | 				<el-table-column label="是否有效">
 47 | 					<template v-slot="scope">
 48 | 						<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen"></i>
 49 | 						<i class="el-icon-error" v-else style="color: red"></i>
 50 | 					</template>
 51 | 				</el-table-column>
 52 | 				<el-table-column label="排序">
 53 | 					<template v-slot="scope">
 54 | 						<el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
 55 | 						<el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
 56 | 						<el-tag size="mini" type="warning" v-else>三级</el-tag>
 57 | 					</template>
 58 | 				</el-table-column>
 59 | 				<el-table-column label="操作">
 60 | 					<template v-slot="scope">
 61 | 						<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
 62 | 						<el-popconfirm title="确定删除吗？" icon="el-icon-delete" iconColor="red" @onConfirm="removeCateById(scope.row.cat_id)">
 63 | 							<el-button size="mini" type="danger" icon="el-icon-delete" slot="reference">删除</el-button>
 64 | 						</el-popconfirm>
 65 | 					</template>
 66 | 				</el-table-column>
 67 | 			</el-table>
 68 | 
 69 | 			<!--分页-->
 70 | 			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
 71 | 			               :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" :total="total"
 72 | 			               layout="total, sizes, prev, pager, next, jumper" background>
 73 | 			</el-pagination>
 74 | 		</el-card>
 75 | 
 76 | 		<!--添加分类的对话框-->
 77 | 		<el-dialog title="添加分类" width="50%" :visible.sync="addCateDialogVisible" :close-on-click-modal="false" @close="addCateDialogClosed">
 78 | 			<!--内容主体-->
 79 | 			<el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="80px">
 80 | 				<el-form-item label="分类名称" prop="cat_name">
 81 | 					<el-input v-model="addCateForm.cat_name"></el-input>
 82 | 				</el-form-item>
 83 | 				<el-form-item label="父级分类">
 84 | 					<!-- options指定数据源 -->
 85 | 					<!-- props指定配置对象 -->
 86 | 					<el-cascader v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" @change="parentCateChange" :clearable="true"></el-cascader>
 87 | 				</el-form-item>
 88 | 			</el-form>
 89 | 			<!--底部-->
 90 | 			<span slot="footer">
 91 | 				<el-button @click="addCateDialogVisible=false">取 消</el-button>
 92 | 				<el-button type="primary" @click="addCate">确 定</el-button>
 93 | 			</span>
 94 | 		</el-dialog>
 95 | 
 96 | 		<!--编辑分类的对话框-->
 97 | 		<el-dialog title="编辑分类" width="50%" :visible.sync="editCateDialogVisible" :close-on-click-modal="false" @close="editCateDialogClosed">
 98 | 			<!--内容主体-->
 99 | 			<el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateFormRef" label-width="80px">
100 | 				<el-form-item label="分类名称" prop="cat_name">
101 | 					<el-input v-model="editCateForm.cat_name"></el-input>
102 | 				</el-form-item>
103 | 			</el-form>
104 | 			<!--底部-->
105 | 			<span slot="footer">
106 | 				<el-button @click="editCateDialogVisible=false">取 消</el-button>
107 | 				<el-button type="primary" @click="editCate">确 定</el-button>
108 | 			</span>
109 | 		</el-dialog>
110 | 	</div>
111 | </template>
112 | 
113 | <script>
114 | 	export default {
115 | 		name: "Cate",
116 | 		data() {
117 | 			return {
118 | 				//添加分类对话框显示状态
119 | 				addCateDialogVisible: false,
120 | 				//添加分类的表单数据对象
121 | 				addCateForm: {
122 | 					cat_name: '',
123 | 					//父级分类id
124 | 					cat_pid: 0,
125 | 					//分类的等级，默认添加一级分类
126 | 					cat_level: 0
127 | 				},
128 | 				addCateFormRules: {
129 | 					cat_name: [
130 | 						{required: true, message: '请输入分类名称', trigger: 'blur'}
131 | 					]
132 | 				},
133 | 				//父级分类的列表
134 | 				parentCateList: [],
135 | 				//指定级联选择器的配置对象
136 | 				cascaderProps: {
137 | 					expandTrigger: 'hover',
138 | 					//设置为可选中一级分类
139 | 					checkStrictly: true,
140 | 					value: 'cat_id',
141 | 					label: 'cat_name',
142 | 					children: 'children'
143 | 				},
144 | 				//选中的父级分类的id数组
145 | 				selectedKeys: [],
146 | 				//编辑分类的对话框显示状态
147 | 				editCateDialogVisible: false,
148 | 				//编辑分类的表单数据对象
149 | 				editCateForm: {
150 | 					cat_id: 0,
151 | 					cat_name: ''
152 | 				},
153 | 				editCateFormRules: {
154 | 					cat_name: [
155 | 						{required: true, message: '请输入分类名称', trigger: 'blur'}
156 | 					]
157 | 				},
158 | 				//获取分类列表的参数对象
159 | 				queryInfo: {
160 | 					type: 3,
161 | 					pagenum: 1,//当前的页数
162 | 					pagesize: 5//当前每页显示多少条数据
163 | 				},
164 | 				//商品分类的数据列表
165 | 				cateList: [],
166 | 				//总数据条数
167 | 				total: 0,
168 | 				columns: [
169 | 					{
170 | 						label: '分类名称',
171 | 						prop: 'cat_name'
172 | 					},
173 | 					{
174 | 						label: '是否有效',
175 | 						//将当前列定义为模板列
176 | 						type: 'template',
177 | 						//模板名称
178 | 						template: 'isok'
179 | 					},
180 | 					{
181 | 						label: '排序',
182 | 						//将当前列定义为模板列
183 | 						type: 'template',
184 | 						//模板名称
185 | 						template: 'order'
186 | 					},
187 | 					{
188 | 						label: '操作',
189 | 						//将当前列定义为模板列
190 | 						type: 'template',
191 | 						//模板名称
192 | 						template: 'opt'
193 | 					}
194 | 				]
195 | 			}
196 | 		},
197 | 		created() {
198 | 			this.getCateList()
199 | 		},
200 | 		methods: {
201 | 			//获取商品分类数据
202 | 			getCateList() {
203 | 				axios.get('categories', {params: this.queryInfo}).then(response => {
204 | 					const res = response.data
205 | 					if (res.meta.status === 200) {
206 | 						this.cateList = res.data.result
207 | 						this.total = res.data.total
208 | 					} else {
209 | 						this.$message.error(res.meta.msg)
210 | 					}
211 | 				}).catch(() => {
212 | 					this.$message.error('请求失败')
213 | 				})
214 | 			},
215 | 			//监听pagesize改变事件
216 | 			handleSizeChange(newSize) {
217 | 				this.queryInfo.pagesize = newSize
218 | 				this.getCateList()
219 | 			},
220 | 			//监听pagenum改变事件
221 | 			handleCurrentChange(newPage) {
222 | 				this.queryInfo.pagenum = newPage
223 | 				this.getCateList()
224 | 			},
225 | 			//显示添加分类对话框
226 | 			showAddCateDialog() {
227 | 				this.getParentCateList()
228 | 				this.addCateDialogVisible = true
229 | 			},
230 | 			//获取父级分类的数据列表
231 | 			getParentCateList() {
232 | 				axios.get('categories', {params: {type: 2}}).then(response => {
233 | 					const res = response.data
234 | 					if (res.meta.status === 200) {
235 | 						this.parentCateList = res.data
236 | 					} else {
237 | 						this.$message.error(res.meta.msg)
238 | 					}
239 | 				}).catch(() => {
240 | 					this.$message.error('请求失败')
241 | 				})
242 | 			},
243 | 			//选择项发生变化
244 | 			parentCateChange() {
245 | 				//如果 selectedKeys 数组中的 length 大于0 则选中了父级分类，否则为没有选中任何父级分类
246 | 				if (this.selectedKeys.length > 0) {
247 | 					//父级分类的id
248 | 					this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
249 | 					//当前添加的分类等级
250 | 					this.addCateForm.cat_level = this.selectedKeys.length
251 | 				} else {
252 | 					//父级分类的id
253 | 					this.addCateForm.cat_pid = 0
254 | 					//当前添加的分类等级
255 | 					this.addCateForm.cat_level = 0
256 | 				}
257 | 			},
258 | 			//监听添加分类对话框关闭事件
259 | 			addCateDialogClosed() {
260 | 				this.$refs.addCateFormRef.resetFields()
261 | 				this.selectedKeys = []
262 | 				this.addCateForm.cat_pid = 0
263 | 				this.addCateForm.cat_level = 0
264 | 			},
265 | 			//确定添加分类
266 | 			addCate() {
267 | 				this.$refs.addCateFormRef.validate(valid => {
268 | 					if (valid) {
269 | 						axios.post('categories', this.addCateForm).then(response => {
270 | 							const res = response.data
271 | 							if (res.meta.status === 201) {
272 | 								this.$message.success(res.meta.msg)
273 | 								this.getCateList()
274 | 								this.addCateDialogVisible = false
275 | 							} else {
276 | 								this.$message.error(res.meta.msg)
277 | 							}
278 | 						}).catch(() => {
279 | 							this.$message.error('操作失败')
280 | 						})
281 | 					}
282 | 				})
283 | 			},
284 | 			showEditDialog(cateInfo) {
285 | 				this.editCateForm.cat_id = cateInfo.cat_id
286 | 				this.editCateForm.cat_name = cateInfo.cat_name
287 | 				this.editCateDialogVisible = true
288 | 			},
289 | 			//监听修改分类对话框关闭事件
290 | 			editCateDialogClosed() {
291 | 				this.$refs.editCateFormRef.resetFields()
292 | 				this.editCateForm.cat_id = 0
293 | 				this.editCateForm.cat_name = ''
294 | 			},
295 | 			//确定修改分类
296 | 			editCate() {
297 | 				this.$refs.editCateFormRef.validate(valid => {
298 | 					if (valid) {
299 | 						axios.put(`categories/${this.editCateForm.cat_id}`, {cat_name: this.editCateForm.cat_name}).then(response => {
300 | 							const res = response.data
301 | 							if (res.meta.status === 200) {
302 | 								this.$message.success(res.meta.msg)
303 | 								this.getCateList()
304 | 								this.editCateDialogVisible = false
305 | 							} else {
306 | 								this.$message.error(res.meta.msg)
307 | 							}
308 | 						}).catch(() => {
309 | 							this.$message.error('操作失败')
310 | 						})
311 | 					}
312 | 				})
313 | 			},
314 | 			removeCateById(id) {
315 | 				axios.delete(`categories/${id}`).then(response => {
316 | 					const res = response.data
317 | 					if (res.meta.status === 200) {
318 | 						this.$message.success(res.meta.msg)
319 | 						this.getCateList()
320 | 					} else {
321 | 						this.$message.error(res.meta.msg)
322 | 					}
323 | 				}).catch(() => {
324 | 					this.$message.error('操作失败')
325 | 				})
326 | 			}
327 | 		}
328 | 	}
329 | </script>
330 | 
331 | <style scoped>
332 | 	.treeTable {
333 | 		margin-top: 15px;
334 | 		margin-bottom: 15px;
335 | 	}
336 | 
337 | 	.el-cascader {
338 | 		width: 100%;
339 | 	}
340 | 	.el-button{
341 | 		margin-right: 10px;
342 | 	}
343 | </style>


--------------------------------------------------------------------------------
/src/components/goods/Edit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<!--面包屑导航区-->
  4 | 		<el-breadcrumb separator-class="el-icon-arrow-right">
  5 | 			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6 | 			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
  7 | 			<el-breadcrumb-item>编辑商品</el-breadcrumb-item>
  8 | 		</el-breadcrumb>
  9 | 
 10 | 		<el-card>
 11 | 			<!--提示信息-->
 12 | 			<el-alert title="编辑商品信息" type="info" center show-icon :closable="false"></el-alert>
 13 | 			<!--步骤条-->
 14 | 			<el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
 15 | 				<el-step title="基本信息"></el-step>
 16 | 				<el-step title="商品参数"></el-step>
 17 | 				<el-step title="商品属性"></el-step>
 18 | 				<el-step title="商品图片"></el-step>
 19 | 				<el-step title="商品内容"></el-step>
 20 | 				<el-step title="完成"></el-step>
 21 | 			</el-steps>
 22 | 			<!--tab标签栏-->
 23 | 			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px" label-position="top">
 24 | 				<el-tabs v-model="activeIndex" tab-position="left">
 25 | 					<el-tab-pane label="基本信息" name="0">
 26 | 						<el-form-item label="商品名称" prop="goods_name">
 27 | 							<el-input v-model="editForm.goods_name"></el-input>
 28 | 						</el-form-item>
 29 | 						<el-form-item label="商品价格" prop="goods_price">
 30 | 							<el-input v-model="editForm.goods_price" type="number"></el-input>
 31 | 						</el-form-item>
 32 | 						<el-form-item label="商品重量" prop="goods_weight">
 33 | 							<el-input v-model="editForm.goods_weight" type="number"></el-input>
 34 | 						</el-form-item>
 35 | 						<el-form-item label="商品数量" prop="goods_number">
 36 | 							<el-input v-model="editForm.goods_number" type="number"></el-input>
 37 | 						</el-form-item>
 38 | 						<el-form-item label="商品分类">
 39 | 							<el-cascader v-model="editForm.goods_cat" :options="cateList" :props="cascaderProps" style="width: 300px" disabled></el-cascader>
 40 | 						</el-form-item>
 41 | 					</el-tab-pane>
 42 | 					<el-tab-pane label="商品参数" name="1">
 43 | 						<el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id">
 44 | 							<el-checkbox-group v-model="item.attr_value">
 45 | 								<el-checkbox :label="cb" v-for="(cb,index) in item.attr_vals" :key="index" border></el-checkbox>
 46 | 							</el-checkbox-group>
 47 | 						</el-form-item>
 48 | 					</el-tab-pane>
 49 | 					<el-tab-pane label="商品属性" name="2">
 50 | 						<el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id">
 51 | 							<el-input v-model="item.attr_vals"></el-input>
 52 | 						</el-form-item>
 53 | 					</el-tab-pane>
 54 | 					<el-tab-pane label="商品图片" name="3">
 55 | 						<el-upload action="http://127.0.0.1:8888/api/private/v1/upload" :on-preview="handlePreview" :file-list="imgList"
 56 | 						           :on-remove="handleRemove" list-type="picture" :headers="headerObj" :on-success="handleSuccess">
 57 | 							<el-button type="primary">点击上传</el-button>
 58 | 						</el-upload>
 59 | 					</el-tab-pane>
 60 | 					<el-tab-pane label="商品内容" name="4">
 61 | 						<quill-editor v-model="editForm.goods_introduce"></quill-editor>
 62 | 						<el-button type="primary" class="btnEdit" @click="postEdit">编辑商品</el-button>
 63 | 					</el-tab-pane>
 64 | 				</el-tabs>
 65 | 			</el-form>
 66 | 		</el-card>
 67 | 
 68 | 		<!--图片预览-->
 69 | 		<el-dialog title="图片预览" width="50%" :visible.sync="previewDialogVisible">
 70 | 			<!--内容主体-->
 71 | 			<img :src="previewPath" alt="" class="previewImg">
 72 | 		</el-dialog>
 73 | 	</div>
 74 | </template>
 75 | 
 76 | <script>
 77 | 	export default {
 78 | 		name: "Edit",
 79 | 		data() {
 80 | 			return {
 81 | 				cateList: [],
 82 | 				//指定级联选择器的配置对象
 83 | 				cascaderProps: {
 84 | 					expandTrigger: 'hover',
 85 | 					value: 'cat_id',
 86 | 					label: 'cat_name',
 87 | 					children: 'children'
 88 | 				},
 89 | 				activeIndex: '0',
 90 | 				editForm: {
 91 | 					goods_name: '',
 92 | 					goods_price: 0,
 93 | 					goods_weight: 0,
 94 | 					goods_number: 0,
 95 | 					goods_cat: [],
 96 | 					pics: [],
 97 | 					goods_introduce: '',
 98 | 					attrs: []
 99 | 				},
100 | 				editFormRules: {
101 | 					goods_name: [
102 | 						{required: true, message: '请输入商品名称', trigger: 'blur'}
103 | 					],
104 | 					goods_price: [
105 | 						{required: true, message: '请输入商品价格', trigger: 'blur'}
106 | 					],
107 | 					goods_weight: [
108 | 						{required: true, message: '请输入商品重量', trigger: 'blur'}
109 | 					],
110 | 					goods_number: [
111 | 						{required: true, message: '请输入商品数量', trigger: 'blur'}
112 | 					]
113 | 				},
114 | 				//商品参数列表
115 | 				manyTableData: [],
116 | 				//商品属性列表
117 | 				onlyTableData: [],
118 | 				//已上传图片列表
119 | 				imgList: [],
120 | 				//待上传图片列表
121 | 				tmpImgList: [],
122 | 				//图片上传请求头
123 | 				headerObj: {
124 | 					Authorization: window.sessionStorage.getItem('token')
125 | 				},
126 | 				//预览图片url
127 | 				previewPath: '',
128 | 				//图片预览对话框显示状态
129 | 				previewDialogVisible: false
130 | 			}
131 | 		},
132 | 		created() {
133 | 			this.getCateList()
134 | 			this.getGoodsInfo()
135 | 		},
136 | 		methods: {
137 | 			//获取商品信息
138 | 			getGoodsInfo() {
139 | 				axios.get(`goods/${this.$route.params.id}`).then(response => {
140 | 					const res = response.data
141 | 					if (res.meta.status === 200) {
142 | 						this.editForm = res.data
143 | 						// split 得到的字符数组不能绑定到级联选择器，用map转数字数组  ['1','3','6'] => [1,3,6]
144 | 						this.editForm.goods_cat = this.editForm.goods_cat.split(',').map(Number)
145 | 						this.getAttrData()
146 | 						this.getImgList()
147 | 					} else {
148 | 						this.$message.error(res.meta.msg)
149 | 					}
150 | 				}).catch(() => {
151 | 					this.$message.error("请求失败")
152 | 				})
153 | 			},
154 | 			//获取商品分类数据
155 | 			getCateList() {
156 | 				axios.get('categories').then(response => {
157 | 					const res = response.data
158 | 					if (res.meta.status === 200) {
159 | 						this.cateList = res.data
160 | 					} else {
161 | 						this.$message.error(res.meta.msg)
162 | 					}
163 | 				}).catch(() => {
164 | 					this.$message.error('请求失败')
165 | 				})
166 | 			},
167 | 			getAttrData() {
168 | 				//处理商品参数数据
169 | 				this.editForm.attrs.forEach(item => {
170 | 					if (item.attr_sel === 'many') {
171 | 						//全部参数
172 | 						item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []
173 | 						//已选参数
174 | 						item.attr_value = item.attr_value ? item.attr_value.split(',') : []
175 | 						this.manyTableData.push(item)
176 | 					} else if (item.attr_sel === 'only') {
177 | 						this.onlyTableData.push(item)
178 | 					}
179 | 				})
180 | 			},
181 | 			getImgList() {
182 | 				this.editForm.pics.forEach(item => {
183 | 					this.imgList.push({
184 | 						name: item.pics_id,
185 | 						url: item.pics_big_url,
186 | 						pic: item.pics_big
187 | 					})
188 | 				})
189 | 			},
190 | 			//图片预览
191 | 			handlePreview(file) {
192 | 				this.previewPath = file.url
193 | 				this.previewDialogVisible = true
194 | 			},
195 | 			//移除图片
196 | 			handleRemove(file) {
197 | 				if (file.response) {
198 | 					const filePath = file.response.data.tmp_path
199 | 					const i = this.tmpImgList.findIndex(x => x.pic === filePath)
200 | 					this.tmpImgList.splice(i, 1)
201 | 				} else {
202 | 					const filePath = file.pic
203 | 					const i = this.imgList.findIndex(x => x.pic === filePath)
204 | 					this.imgList.splice(i, 1)
205 | 				}
206 | 			},
207 | 			//图片上传成功hook
208 | 			handleSuccess(response) {
209 | 				if (response.meta.status === 200) {
210 | 					this.$message.success(response.meta.msg)
211 | 					this.tmpImgList.push({pic: response.data.tmp_path})
212 | 				} else {
213 | 					this.$message.error(response.meta.msg)
214 | 				}
215 | 			},
216 | 			//提交编辑商品
217 | 			postEdit() {
218 | 				this.$refs.editFormRef.validate(valid => {
219 | 					if (valid) {
220 | 						/*let pics = []
221 | 						this.imgList.forEach(item => {
222 | 							pics.push({pic: item.pic})
223 | 						})
224 | 						pics.push(...this.tmpImgList)*/
225 | 
226 | 						const form = {
227 | 							goods_name: this.editForm.goods_name,
228 | 							goods_price: this.editForm.goods_price,
229 | 							goods_number: this.editForm.goods_number,
230 | 							goods_weight: this.editForm.goods_weight,
231 | 							goods_introduce: this.editForm.goods_introduce,
232 | 							// pics: pics,
233 | 							attrs: [],
234 | 							goods_cat: ''
235 | 						}
236 | 						form.goods_cat = this.editForm.goods_cat.join(',')
237 | 						//处理商品参数
238 | 						this.manyTableData.forEach(item => {
239 | 							const newInfo = {
240 | 								attr_id: item.attr_id,
241 | 								attr_value: item.attr_value.join(',')
242 | 							}
243 | 							form.attrs.push(newInfo)
244 | 						})
245 | 						//处理商品属性
246 | 						this.onlyTableData.forEach(item => {
247 | 							const newInfo = {
248 | 								attr_id: item.attr_id,
249 | 								attr_value: item.attr_vals
250 | 							}
251 | 							form.attrs.push(newInfo)
252 | 						})
253 | 
254 | 						axios.put(`goods/${this.editForm.goods_id}`, form).then(response => {
255 | 							const res = response.data
256 | 							if (res.meta.status === 200) {
257 | 								this.$message.success(res.meta.msg)
258 | 								this.$router.push('/goods')
259 | 							} else {
260 | 								this.$message.error(res.meta.msg)
261 | 							}
262 | 						}).catch(() => {
263 | 							this.$message.error('操作失败')
264 | 						})
265 | 					} else {
266 | 						return this.$message.error('请填写必要的表单项')
267 | 					}
268 | 				})
269 | 			}
270 | 		}
271 | 	}
272 | </script>
273 | 
274 | <style lang="less" scoped>
275 | 	.el-steps .el-step {
276 | 		flex-basis: 16.6667% !important
277 | 	}
278 | 
279 | 	.el-checkbox {
280 | 		margin: 0 10px 0 0 !important;
281 | 	}
282 | 
283 | 	.previewImg {
284 | 		width: 100%;
285 | 	}
286 | 
287 | 	.btnEdit {
288 | 		margin-top: 15px;
289 | 	}
290 | </style>


--------------------------------------------------------------------------------
/src/components/goods/List.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<!--面包屑导航区-->
  4 | 		<el-breadcrumb separator-class="el-icon-arrow-right">
  5 | 			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6 | 			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
  7 | 			<el-breadcrumb-item>商品列表</el-breadcrumb-item>
  8 | 		</el-breadcrumb>
  9 | 
 10 | 		<el-card>
 11 | 			<!--搜索与添加-->
 12 | 			<el-row :gutter="10">
 13 | 				<el-col :span="6">
 14 | 					<el-input placeholder="请输入内容" v-model="queryInfo.query" :clearable="true" @clear="getGoodsList">
 15 | 						<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
 16 | 					</el-input>
 17 | 				</el-col>
 18 | 				<el-col :span="6">
 19 | 					<el-button type="primary" @click="goAddPage">添加商品</el-button>
 20 | 				</el-col>
 21 | 			</el-row>
 22 | 
 23 | 			<!--table表格-->
 24 | 			<el-table :data="goodsList" border stripe>
 25 | 				<el-table-column label="序号" type="index" width="50"></el-table-column>
 26 | 				<el-table-column label="商品名称" prop="goods_name"></el-table-column>
 27 | 				<el-table-column label="商品价格(元)" prop="goods_price" width="130"></el-table-column>
 28 | 				<el-table-column label="商品重量" prop="goods_weight" width="130"></el-table-column>
 29 | 				<el-table-column label="创建时间" prop="add_time" width="200">
 30 | 					<template v-slot="scope">{{ scope.row.add_time | dateFormat}}</template>
 31 | 				</el-table-column>
 32 | 				<el-table-column label="操作" width="200">
 33 | 					<template v-slot="scope">
 34 | 						<el-button type="primary" icon="el-icon-edit" size="mini" @click="goEditPage(scope.row.goods_id)">编辑</el-button>
 35 | 						<el-popconfirm title="确定删除吗？" icon="el-icon-delete" iconColor="red" @onConfirm="removeById(scope.row.goods_id)">
 36 | 							<el-button size="mini" type="danger" icon="el-icon-delete" slot="reference">删除</el-button>
 37 | 						</el-popconfirm>
 38 | 					</template>
 39 | 				</el-table-column>
 40 | 			</el-table>
 41 | 
 42 | 			<!--分页-->
 43 | 			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
 44 | 			               :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" :total="total"
 45 | 			               layout="total, sizes, prev, pager, next, jumper" background>
 46 | 			</el-pagination>
 47 | 		</el-card>
 48 | 	</div>
 49 | </template>
 50 | 
 51 | <script>
 52 | 	export default {
 53 | 		name: "List",
 54 | 		data() {
 55 | 			return {
 56 | 				queryInfo: {
 57 | 					query: '',
 58 | 					pagenum: 1,
 59 | 					pagesize: 10
 60 | 				},
 61 | 				goodsList: [],
 62 | 				total: 0,
 63 | 
 64 | 			}
 65 | 		},
 66 | 		created() {
 67 | 			this.getGoodsList()
 68 | 		},
 69 | 		methods: {
 70 | 			getGoodsList() {
 71 | 				axios.get('goods', {params: this.queryInfo}).then(response => {
 72 | 					const res = response.data
 73 | 					if (res.meta.status === 200) {
 74 | 						this.goodsList = res.data.goods
 75 | 						this.total = res.data.total
 76 | 					} else {
 77 | 						this.$message.error(res.meta.msg)
 78 | 					}
 79 | 				}).catch(() => {
 80 | 					this.$message.error("获取失败")
 81 | 				})
 82 | 			},
 83 | 			//监听pagesize改变的事件
 84 | 			handleSizeChange(newSize) {
 85 | 				this.queryInfo.pagesize = newSize
 86 | 				this.getGoodsList()
 87 | 			},
 88 | 			//监听页码值改变的事件
 89 | 			handleCurrentChange(newPage) {
 90 | 				this.queryInfo.pagenum = newPage
 91 | 				this.getGoodsList()
 92 | 			},
 93 | 			removeById(id){
 94 | 				axios.delete(`goods/${id}`).then(response => {
 95 | 					const res = response.data
 96 | 					if (res.meta.status === 200) {
 97 | 						this.$message.success(res.meta.msg)
 98 | 						this.getGoodsList()
 99 | 					} else {
100 | 						this.$message.error(res.meta.msg)
101 | 					}
102 | 				}).catch(() => {
103 | 					this.$message.error("操作失败")
104 | 				})
105 | 			},
106 | 			goAddPage(){
107 | 				this.$router.push('/goods/add')
108 | 			},
109 | 			goEditPage(id){
110 | 				this.$router.push(`/goods/edit/${id}`)
111 | 			}
112 | 		}
113 | 	}
114 | </script>
115 | 
116 | <style lang="less" scoped>
117 | 	.el-button {
118 | 		margin-right: 10px;
119 | 	}
120 | </style>


--------------------------------------------------------------------------------
/src/components/goods/Params.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<!--面包屑导航区-->
  4 | 		<el-breadcrumb separator-class="el-icon-arrow-right">
  5 | 			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6 | 			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
  7 | 			<el-breadcrumb-item>分类参数</el-breadcrumb-item>
  8 | 		</el-breadcrumb>
  9 | 
 10 | 		<el-card>
 11 | 			<!--警告提示-->
 12 | 			<el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false" show-icon></el-alert>
 13 | 			<!--选择商品分类区域-->
 14 | 			<el-row class="cat_opt">
 15 | 				<el-col>
 16 | 					<span>选择商品分类：</span>
 17 | 					<el-cascader v-model="selectedKeys" :options="cateList" :props="cascaderProps" @change="getParamsData" style="width: 300px"></el-cascader>
 18 | 				</el-col>
 19 | 			</el-row>
 20 | 			<!-- tab标签页 -->
 21 | 			<el-tabs v-model="activeName" @tab-click="getParamsData">
 22 | 				<el-tab-pane label="动态参数" name="many">
 23 | 					<el-button type="primary" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加参数</el-button>
 24 | 					<el-table :data="manyTableData" border stripe>
 25 | 						<el-table-column type="expand">
 26 | 							<template v-slot="scope">
 27 | 								<!--循环渲染tag标签-->
 28 | 								<el-tag v-for="(item,index) in scope.row.attr_vals" :key="index" closable @close="handleTagClose(scope.row,index)">{{ item }}</el-tag>
 29 | 								<!--添加tag标签-->
 30 | 								<el-input class="input-new-tag" v-if="scope.row.inputTagVisible" v-model="scope.row.inputTagValue" ref="saveTagInput"
 31 | 								          size="small" @keyup.enter.native="handleInputTagConfirm(scope.row)" @blur="handleInputTagConfirm(scope.row)"></el-input>
 32 | 								<el-button v-else class="button-new-tag" size="small" @click="showTagInput(scope.row)">+ New Tag</el-button>
 33 | 							</template>
 34 | 						</el-table-column>
 35 | 						<el-table-column label="序号" type="index" width="50"></el-table-column>
 36 | 						<el-table-column label="参数名称" prop="attr_name"></el-table-column>
 37 | 						<el-table-column label="操作">
 38 | 							<template v-slot="scope">
 39 | 								<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
 40 | 								<el-popconfirm title="确定删除吗？" icon="el-icon-delete" iconColor="red" @onConfirm="removeParamsById(scope.row.attr_id)">
 41 | 									<el-button size="mini" type="danger" icon="el-icon-delete" slot="reference">删除</el-button>
 42 | 								</el-popconfirm>
 43 | 							</template>
 44 | 						</el-table-column>
 45 | 					</el-table>
 46 | 				</el-tab-pane>
 47 | 				<el-tab-pane label="静态属性" name="only">
 48 | 					<el-button type="primary" :disabled="isBtnDisabled" @click="addDialogVisible=true">添加属性</el-button>
 49 | 					<el-table :data="onlyTableData" border stripe>
 50 | 						<el-table-column type="expand">
 51 | 							<template v-slot="scope">
 52 | 								<!--循环渲染tag标签-->
 53 | 								<el-tag v-for="(item,index) in scope.row.attr_vals" :key="index" closable @close="handleTagClose(scope.row,index)">{{ item }}</el-tag>
 54 | 								<!--添加tag标签-->
 55 | 								<el-input class="input-new-tag" v-if="scope.row.inputTagVisible" v-model="scope.row.inputTagValue" ref="saveTagInput"
 56 | 								          size="small" @keyup.enter.native="handleInputTagConfirm(scope.row)" @blur="handleInputTagConfirm(scope.row)"></el-input>
 57 | 								<el-button v-else class="button-new-tag" size="small" @click="showTagInput(scope.row)">+ New Tag</el-button>
 58 | 							</template>
 59 | 						</el-table-column>
 60 | 						<el-table-column label="序号" type="index" width="50"></el-table-column>
 61 | 						<el-table-column label="属性名称" prop="attr_name"></el-table-column>
 62 | 						<el-table-column label="操作">
 63 | 							<template v-slot="scope">
 64 | 								<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
 65 | 								<el-popconfirm title="确定删除吗？" icon="el-icon-delete" iconColor="red" @onConfirm="removeParamsById(scope.row.attr_id)">
 66 | 									<el-button size="mini" type="danger" icon="el-icon-delete" slot="reference">删除</el-button>
 67 | 								</el-popconfirm>
 68 | 							</template>
 69 | 						</el-table-column>
 70 | 					</el-table>
 71 | 				</el-tab-pane>
 72 | 			</el-tabs>
 73 | 		</el-card>
 74 | 
 75 | 		<!--添加参数的对话框-->
 76 | 		<el-dialog :title="'添加'+titleText" width="50%" :visible.sync="addDialogVisible" :close-on-click-modal="false" @close="addDialogClosed">
 77 | 			<!--内容主体-->
 78 | 			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
 79 | 				<el-form-item :label="titleText" prop="attr_name">
 80 | 					<el-input v-model="addForm.attr_name"></el-input>
 81 | 				</el-form-item>
 82 | 			</el-form>
 83 | 			<!--底部-->
 84 | 			<span slot="footer">
 85 | 				<el-button @click="addDialogVisible=false">取 消</el-button>
 86 | 				<el-button type="primary" @click="addParams">确 定</el-button>
 87 | 			</span>
 88 | 		</el-dialog>
 89 | 
 90 | 		<!--修改参数的对话框-->
 91 | 		<el-dialog :title="'修改'+titleText" width="50%" :visible.sync="editDialogVisible" :close-on-click-modal="false" @close="editDialogClosed">
 92 | 			<!--内容主体-->
 93 | 			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="80px">
 94 | 				<el-form-item :label="titleText" prop="attr_name">
 95 | 					<el-input v-model="editForm.attr_name"></el-input>
 96 | 				</el-form-item>
 97 | 			</el-form>
 98 | 			<!--底部-->
 99 | 			<span slot="footer">
100 | 				<el-button @click="editDialogVisible=false">取 消</el-button>
101 | 				<el-button type="primary" @click="editParams">确 定</el-button>
102 | 			</span>
103 | 		</el-dialog>
104 | 	</div>
105 | </template>
106 | 
107 | <script>
108 | 	export default {
109 | 		name: "Params",
110 | 		data() {
111 | 			return {
112 | 				//商品分类列表
113 | 				cateList: [],
114 | 				//指定级联选择器的配置对象
115 | 				cascaderProps: {
116 | 					expandTrigger: 'hover',
117 | 					value: 'cat_id',
118 | 					label: 'cat_name',
119 | 					children: 'children'
120 | 				},
121 | 				//级联选择框选中的数组
122 | 				selectedKeys: [],
123 | 				//被激活的tab名称
124 | 				activeName: 'many',
125 | 				//动态参数数据列表
126 | 				manyTableData: [],
127 | 				//静态属性数据列表
128 | 				onlyTableData: [],
129 | 				//添加属性对话框显示状态
130 | 				addDialogVisible: false,
131 | 				addForm: {
132 | 					attr_name: ''
133 | 				},
134 | 				addFormRules: {
135 | 					attr_name: [
136 | 						{required: true, message: '请输入参数名称', trigger: 'blur'}
137 | 					]
138 | 				},
139 | 				editDialogVisible: false,
140 | 				editForm: {},
141 | 				editFormRules: {
142 | 					attr_name: [
143 | 						{required: true, message: '请输入参数名称', trigger: 'blur'}
144 | 					]
145 | 				},
146 | 			}
147 | 		},
148 | 		created() {
149 | 			this.getCateList()
150 | 		},
151 | 		methods: {
152 | 			//获取商品分类数据
153 | 			getCateList() {
154 | 				axios.get('categories').then(response => {
155 | 					const res = response.data
156 | 					if (res.meta.status === 200) {
157 | 						this.cateList = res.data
158 | 					} else {
159 | 						this.$message.error(res.meta.msg)
160 | 					}
161 | 				}).catch(() => {
162 | 					this.$message.error('请求失败')
163 | 				})
164 | 			},
165 | 			//获取参数的列表数据
166 | 			getParamsData() {
167 | 				//必须选中三级分类
168 | 				if (this.selectedKeys.length === 3) {
169 | 					//根据所选分类的id，和当前所处的面板，获取对应的参数
170 | 					axios.get(`categories/${this.cateId}/attributes`, {params: {sel: this.activeName}}).then(response => {
171 | 						const res = response.data
172 | 						res.data.forEach(item => {
173 | 							item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []
174 | 							//添加tag的显示状态
175 | 							item.inputTagVisible = false
176 | 							//添加tag的值
177 | 							item.inputTagValue = ''
178 | 						})
179 | 						if (res.meta.status === 200) {
180 | 							if (this.activeName === 'many') {
181 | 								this.manyTableData = res.data
182 | 							} else if (this.activeName === 'only') {
183 | 								this.onlyTableData = res.data
184 | 							}
185 | 						} else {
186 | 							this.$message.error(res.meta.msg)
187 | 						}
188 | 					}).catch(() => {
189 | 						this.$message.error('请求失败')
190 | 					})
191 | 				} else {
192 | 					this.selectedKeys = []
193 | 					this.manyTableData = []
194 | 					this.onlyTableData = []
195 | 				}
196 | 			},
197 | 			addDialogClosed() {
198 | 				this.$refs.addFormRef.resetFields()
199 | 			},
200 | 			//确定添加参数
201 | 			addParams() {
202 | 				this.$refs.addFormRef.validate(valid => {
203 | 					if (valid) {
204 | 						axios.post(`categories/${this.cateId}/attributes`, {
205 | 							attr_name: this.addForm.attr_name,
206 | 							attr_sel: this.activeName
207 | 						}).then(response => {
208 | 							const res = response.data
209 | 							if (res.meta.status === 201) {
210 | 								this.$message.success(res.meta.msg)
211 | 								this.getParamsData()
212 | 								this.addDialogVisible = false
213 | 							} else {
214 | 								this.$message.error(res.meta.msg)
215 | 							}
216 | 						}).catch(() => {
217 | 							this.$message.error('操作失败')
218 | 						})
219 | 					}
220 | 				})
221 | 			},
222 | 			showEditDialog(paramsInfo) {
223 | 				//paramsInfo中没有对象，直接深拷贝一份，也没必要从服务端重新获取了
224 | 				//如果直接赋值，则为引用，表格上的数据也会随对话框中数据的修改而实时改变
225 | 				this.editForm = {...paramsInfo}
226 | 				this.editDialogVisible = true
227 | 			},
228 | 			editDialogClosed() {
229 | 				this.$refs.editFormRef.resetFields()
230 | 			},
231 | 			editParams() {
232 | 				this.$refs.editFormRef.validate(valid => {
233 | 					if (valid) {
234 | 						axios.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`, {
235 | 							attr_name: this.editForm.attr_name,
236 | 							attr_sel: this.activeName
237 | 						}).then(response => {
238 | 							const res = response.data
239 | 							if (res.meta.status === 200) {
240 | 								this.$message.success(res.meta.msg)
241 | 								this.getParamsData()
242 | 								this.editDialogVisible = false
243 | 							} else {
244 | 								this.$message.error(res.meta.msg)
245 | 							}
246 | 						}).catch(() => {
247 | 							this.$message.error('操作失败')
248 | 						})
249 | 					}
250 | 				})
251 | 			},
252 | 			removeParamsById(id) {
253 | 				axios.delete(`categories/${this.cateId}/attributes/${id}`).then(response => {
254 | 					const res = response.data
255 | 					if (res.meta.status === 200) {
256 | 						this.$message.success(res.meta.msg)
257 | 						this.getParamsData()
258 | 					} else {
259 | 						this.$message.error(res.meta.msg)
260 | 					}
261 | 				}).catch(() => {
262 | 					this.$message.error('操作失败')
263 | 				})
264 | 			},
265 | 			//确定添加tag
266 | 			handleInputTagConfirm(row) {
267 | 				if (row.inputTagValue.trim().length !== 0) {
268 | 					//将新添加的tag push进数组
269 | 					row.attr_vals.push(row.inputTagValue.trim())
270 | 					//向服务端put新数据
271 | 					this.saveAttrVals(row)
272 | 				}
273 | 				row.inputTagValue = ''
274 | 				row.inputTagVisible = false
275 | 			},
276 | 			//将 attr_vals 保存到服务端
277 | 			saveAttrVals(row) {
278 | 				axios.put(`categories/${this.cateId}/attributes/${row.attr_id}`, {
279 | 					attr_name: row.attr_name,
280 | 					attr_sel: row.attr_sel,
281 | 					attr_vals: row.attr_vals.join(',')
282 | 				}).then(response => {
283 | 					const res = response.data
284 | 					if (res.meta.status === 200) {
285 | 						this.$message.success(res.meta.msg)
286 | 					} else {
287 | 						this.$message.error(res.meta.msg)
288 | 					}
289 | 				}).catch(() => {
290 | 					this.$message.error('操作失败')
291 | 				})
292 | 			},
293 | 			//显示tag输入框
294 | 			showTagInput(row) {
295 | 				row.inputTagVisible = true
296 | 				//让输入框自动获得焦点
297 | 				//$nextTick方法的作用，当页面上元素被重新渲染之后，才执行回调函数
298 | 				//当设置row.inputTagVisible = true，需要将tag渲染成input输入框，在渲染完成之前，获取不到this.$refs.saveTagInput.$refs.input
299 | 				this.$nextTick(_ => {
300 | 					this.$refs.saveTagInput.$refs.input.focus();
301 | 				});
302 | 			},
303 | 			//删除tag
304 | 			handleTagClose(row, index) {
305 | 				row.attr_vals.splice(index, 1)
306 | 				//向服务端put新数据
307 | 				this.saveAttrVals(row)
308 | 			}
309 | 		},
310 | 		computed: {
311 | 			isBtnDisabled() {
312 | 				return this.selectedKeys.length !== 3;
313 | 			},
314 | 			//当前选中的三级分类的id
315 | 			cateId() {
316 | 				if (this.selectedKeys.length === 3) {
317 | 					return this.selectedKeys[2]
318 | 				}
319 | 				return null
320 | 			},
321 | 			//动态计算标题的文本
322 | 			titleText() {
323 | 				if (this.activeName === 'many') {
324 | 					return '动态参数'
325 | 				} else {
326 | 					return '静态属性'
327 | 				}
328 | 			}
329 | 		}
330 | 	}
331 | </script>
332 | 
333 | <style lang="less" scoped>
334 | 	.cat_opt {
335 | 		margin: 15px 0;
336 | 	}
337 | 
338 | 	.el-button {
339 | 		margin-right: 10px;
340 | 	}
341 | 
342 | 	.el-tag {
343 | 		margin: 10px;
344 | 	}
345 | 
346 | 	.input-new-tag {
347 | 		width: 120px;
348 | 	}
349 | 
350 | 	.button-new-tag {
351 | 		width: 120px;
352 | 	}
353 | </style>


--------------------------------------------------------------------------------
/src/components/order/Order.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<!--面包屑导航区-->
  4 | 		<el-breadcrumb separator-class="el-icon-arrow-right">
  5 | 			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6 | 			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
  7 | 			<el-breadcrumb-item>订单列表</el-breadcrumb-item>
  8 | 		</el-breadcrumb>
  9 | 
 10 | 		<el-card>
 11 | 			<el-row>
 12 | 				<el-col :span="6">
 13 | 					<el-input placeholder="请输入内容" v-model="queryInfo.query" :clearable="true" @clear="getOrderList">
 14 | 						<el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
 15 | 					</el-input>
 16 | 				</el-col>
 17 | 			</el-row>
 18 | 
 19 | 			<!--table表格-->
 20 | 			<el-table :data="orderList" border stripe>
 21 | 				<el-table-column label="序号" type="index" width="50"></el-table-column>
 22 | 				<el-table-column label="订单编号" prop="order_number"></el-table-column>
 23 | 				<el-table-column label="订单价格" prop="order_price"></el-table-column>
 24 | 				<el-table-column label="是否付款">
 25 | 					<template v-slot="scope">
 26 | 						<el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
 27 | 						<el-tag type="danger" v-else>未付款</el-tag>
 28 | 					</template>
 29 | 				</el-table-column>
 30 | 				<el-table-column label="是否发货" prop="is_send"></el-table-column>
 31 | 				<el-table-column label="下单时间">
 32 | 					<template v-slot="scope">{{ scope.row.create_time | dateFormat}}</template>
 33 | 				</el-table-column>
 34 | 				<el-table-column label="操作" width="200">
 35 | 					<template v-slot="scope">
 36 | 						<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog">编辑</el-button>
 37 | 						<el-button size="mini" type="success" icon="el-icon-location" @click="showProgressDialog(scope.row)">物流</el-button>
 38 | 					</template>
 39 | 				</el-table-column>
 40 | 			</el-table>
 41 | 
 42 | 			<!--分页-->
 43 | 			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
 44 | 			               :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" :total="total"
 45 | 			               layout="total, sizes, prev, pager, next, jumper" background>
 46 | 			</el-pagination>
 47 | 		</el-card>
 48 | 
 49 | 		<!--修改地址对话框-->
 50 | 		<el-dialog title="修改地址" width="50%" :visible.sync="editDialogVisible" :close-on-click-modal="false" @close="editDialogClosed">
 51 | 			<!--内容主体-->
 52 | 			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="90px">
 53 | 				<el-form-item label="省市区/县" prop="address1">
 54 | 					<el-cascader :options="citydata" v-model="editForm.address1"></el-cascader>
 55 | 				</el-form-item>
 56 | 				<el-form-item label="详细地址" prop="address2">
 57 | 					<el-input v-model="editForm.address2"></el-input>
 58 | 				</el-form-item>
 59 | 			</el-form>
 60 | 			<!--底部-->
 61 | 			<span slot="footer">
 62 | 				<el-button @click="editDialogVisible=false">取 消</el-button>
 63 | 				<el-button type="primary" @click="editDialogVisible=false">确 定</el-button>
 64 | 			</span>
 65 | 		</el-dialog>
 66 | 
 67 | 		<!--物流进度对话框-->
 68 | 		<el-dialog title="物流进度" width="50%" :visible.sync="progressDialogVisible">
 69 | 			<!--内容主体-->
 70 | 			<el-timeline>
 71 | 				<el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.time">
 72 | 					{{activity.context}}
 73 | 				</el-timeline-item>
 74 | 			</el-timeline>
 75 | 		</el-dialog>
 76 | 	</div>
 77 | </template>
 78 | 
 79 | <script>
 80 | 	import citydata from "./citydata";
 81 | 
 82 | 	export default {
 83 | 		name: "Order",
 84 | 		data() {
 85 | 			return {
 86 | 				queryInfo: {
 87 | 					query: '',
 88 | 					pagenum: 2,
 89 | 					pagesize: 10
 90 | 				},
 91 | 				orderList: [],
 92 | 				total: 0,
 93 | 				editDialogVisible: false,
 94 | 				progressDialogVisible: false,
 95 | 				editForm: {
 96 | 					address1: [],
 97 | 					address2: ''
 98 | 				},
 99 | 				editFormRules: {
100 | 					address1: [
101 | 						{required: true, message: '请选择省市区/县', trigger: 'blur'},
102 | 					],
103 | 					address2: [
104 | 						{required: true, message: '请输入详细地址', trigger: 'blur'},
105 | 					]
106 | 				},
107 | 				citydata,
108 | 				progressInfo: []
109 | 			}
110 | 		},
111 | 		created() {
112 | 			this.getOrderList()
113 | 		},
114 | 		methods: {
115 | 			getOrderList() {
116 | 				axios.get('orders', {params: this.queryInfo}).then(response => {
117 | 					const res = response.data
118 | 					if (res.meta.status === 200) {
119 | 						this.orderList = res.data.goods
120 | 						this.total = res.data.total
121 | 					} else {
122 | 						this.$message.error(res.meta.msg)
123 | 					}
124 | 				}).catch(() => {
125 | 					this.$message.error('请求失败')
126 | 				})
127 | 			},
128 | 			//监听pagesize改变的事件
129 | 			handleSizeChange(newSize) {
130 | 				this.queryInfo.pagesize = newSize
131 | 				this.getOrderList()
132 | 			},
133 | 			//监听页码值改变的事件
134 | 			handleCurrentChange(newPage) {
135 | 				this.queryInfo.pagenum = newPage
136 | 				this.getOrderList()
137 | 			},
138 | 			showEditDialog() {
139 | 				this.editDialogVisible = true
140 | 			},
141 | 			editDialogClosed() {
142 | 				this.$refs.editFormRef.resetFields()
143 | 			},
144 | 			showProgressDialog() {
145 | 				axios.get('kuaidi/1106975712662').then(response => {
146 | 					const res = response.data
147 | 					if (res.meta.status === 200) {
148 | 						this.progressInfo = res.data
149 | 						this.progressDialogVisible = true
150 | 					} else {
151 | 						this.$message.error(res.meta.msg)
152 | 					}
153 | 				}).catch(() => {
154 | 					this.$message.error('请求失败')
155 | 				})
156 | 			}
157 | 		}
158 | 	}
159 | </script>
160 | 
161 | <style lang="less" scoped>
162 | 	.el-cascader {
163 | 		width: 100%;
164 | 	}
165 | </style>


--------------------------------------------------------------------------------
/src/components/power/Rights.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<!--面包屑导航区-->
 4 | 		<el-breadcrumb separator-class="el-icon-arrow-right">
 5 | 			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
 6 | 			<el-breadcrumb-item>权限管理</el-breadcrumb-item>
 7 | 			<el-breadcrumb-item>权限列表</el-breadcrumb-item>
 8 | 		</el-breadcrumb>
 9 | 
10 | 		<!--卡片视图区域-->
11 | 		<el-card>
12 | 			<!--权限列表-->
13 | 			<el-table :data="rightsList" :border="true" :stripe="true">
14 | 				<el-table-column label="序号" type="index" width="50"></el-table-column>
15 | 				<el-table-column label="权限名称" prop="authName"></el-table-column>
16 | 				<el-table-column label="路径" prop="path"></el-table-column>
17 | 				<el-table-column label="权限等级" prop="level">
18 | 					<template v-slot="scope">
19 | 						<el-tag v-if="scope.row.level==='0'">一级</el-tag>
20 | 						<el-tag type="success" v-if="scope.row.level==='1'">二级</el-tag>
21 | 						<el-tag type="warning" v-if="scope.row.level==='2'">三级</el-tag>
22 | 					</template>
23 | 				</el-table-column>
24 | 			</el-table>
25 | 		</el-card>
26 | 	</div>
27 | </template>
28 | 
29 | <script>
30 | 	export default {
31 | 		name: "Rights",
32 | 		data() {
33 | 			return {
34 | 				//权限列表
35 | 				rightsList: []
36 | 			}
37 | 		},
38 | 		created() {
39 | 			this.getRightsList()
40 | 		},
41 | 		methods: {
42 | 			//获取权限列表
43 | 			getRightsList() {
44 | 				axios.get('rights/list').then(response => {
45 | 					const res = response.data
46 | 					if (res.meta.status === 200) {
47 | 						this.rightsList = res.data
48 | 					} else {
49 | 						this.$message.error(res.meta.msg)
50 | 					}
51 | 				}).catch(() => {
52 | 					this.$message.error('请求失败')
53 | 				})
54 | 			}
55 | 		}
56 | 	}
57 | </script>
58 | 
59 | <style lang="less" scoped>
60 | 
61 | </style>


--------------------------------------------------------------------------------
/src/components/power/Roles.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<!--面包屑导航区-->
  4 | 		<el-breadcrumb separator-class="el-icon-arrow-right">
  5 | 			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6 | 			<el-breadcrumb-item>权限管理</el-breadcrumb-item>
  7 | 			<el-breadcrumb-item>角色列表</el-breadcrumb-item>
  8 | 		</el-breadcrumb>
  9 | 
 10 | 		<!--卡片视图区域-->
 11 | 		<el-card>
 12 | 			<!--添加角色按钮-->
 13 | 			<el-row>
 14 | 				<el-col>
 15 | 					<el-button type="primary" @click="addRoleDialogVisible=true">添加角色</el-button>
 16 | 				</el-col>
 17 | 			</el-row>
 18 | 
 19 | 			<!--角色列表-->
 20 | 			<el-table :data="roleList" :border="true" :stripe="true">
 21 | 				<el-table-column type="expand" width="50">
 22 | 					<template v-slot="scope">
 23 | 						<el-row :class="['bdbottom',index1===0?'bdtop':'','vcenter']" v-for="(item1,index1) in scope.row.children" :key="item1.id">
 24 | 							<!-- 一级权限 -->
 25 | 							<el-col :span="5">
 26 | 								<el-tag :closable="true" @close="removeRightById(scope.row,item1.id)">{{ item1.authName }}</el-tag>
 27 | 								<i class="el-icon-caret-right"></i>
 28 | 							</el-col>
 29 | 							<!-- 二级和三级权限 -->
 30 | 							<el-col :span="19">
 31 | 								<el-row :class="[index2!==0?'bdtop':'','vcenter']" v-for="(item2,index2) in item1.children" :key="item2.id">
 32 | 									<el-col :span="6">
 33 | 										<el-tag type="success" :closable="true" @close="removeRightById(scope.row,item2.id)">{{ item2.authName }}</el-tag>
 34 | 										<i class="el-icon-caret-right"></i>
 35 | 									</el-col>
 36 | 									<el-col :span="18">
 37 | 										<el-tag type="warning" v-for="(item3) in item2.children" :key="item3.id" :closable="true" @close="removeRightById(scope.row,item3.id)">
 38 | 											{{ item3.authName }}
 39 | 										</el-tag>
 40 | 									</el-col>
 41 | 								</el-row>
 42 | 							</el-col>
 43 | 						</el-row>
 44 | 					</template>
 45 | 				</el-table-column>
 46 | 				<el-table-column label="序号" type="index" width="50"></el-table-column>
 47 | 				<el-table-column label="角色名称" prop="roleName"></el-table-column>
 48 | 				<el-table-column label="角色描述" prop="roleDesc"></el-table-column>
 49 | 				<el-table-column label="操作" width="300">
 50 | 					<template v-slot="scope">
 51 | 						<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">编辑</el-button>
 52 | 						<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeRoleById(scope.row.id)">删除</el-button>
 53 | 						<el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)">分配权限</el-button>
 54 | 					</template>
 55 | 				</el-table-column>
 56 | 			</el-table>
 57 | 		</el-card>
 58 | 
 59 | 		<!--添加角色的对话框-->
 60 | 		<el-dialog title="添加角色" width="50%" :visible.sync="addRoleDialogVisible" :close-on-click-modal="false" @close="addRoleDialogClosed">
 61 | 			<!--内容主体-->
 62 | 			<el-form :model="addRoleForm" :rules="addRoleFormRules" ref="addRoleFormRef" label-width="80px">
 63 | 				<el-form-item label="角色名称" prop="roleName">
 64 | 					<el-input v-model="addRoleForm.roleName"></el-input>
 65 | 				</el-form-item>
 66 | 				<el-form-item label="角色描述" prop="roleDesc">
 67 | 					<el-input v-model="addRoleForm.roleDesc"></el-input>
 68 | 				</el-form-item>
 69 | 			</el-form>
 70 | 			<!--底部-->
 71 | 			<span slot="footer">
 72 | 				<el-button @click="addRoleDialogVisible=false">取 消</el-button>
 73 | 				<el-button type="primary" @click="addRole">确 定</el-button>
 74 | 			</span>
 75 | 		</el-dialog>
 76 | 		
 77 | 		<!--修改角色的对话框-->
 78 | 		<el-dialog title="修改角色" width="50%" :visible.sync="editRoleDialogVisible" :close-on-click-modal="false" @close="editRoleDialogClosed">
 79 | 			<!--内容主体-->
 80 | 			<el-form :model="editRoleForm" :rules="editRoleFormRules" ref="editRoleFormRef" label-width="80px">
 81 | 				<el-form-item label="角色名称" prop="roleName">
 82 | 					<el-input v-model="editRoleForm.roleName"></el-input>
 83 | 				</el-form-item>
 84 | 				<el-form-item label="角色描述" prop="roleDesc">
 85 | 					<el-input v-model="editRoleForm.roleDesc"></el-input>
 86 | 				</el-form-item>
 87 | 			</el-form>
 88 | 			<!--底部-->
 89 | 			<span slot="footer">
 90 | 				<el-button @click="editRoleDialogVisible=false">取 消</el-button>
 91 | 				<el-button type="primary" @click="editRole">确 定</el-button>
 92 | 			</span>
 93 | 		</el-dialog>
 94 | 
 95 | 		<!--分配权限的对话框-->
 96 | 		<el-dialog title="分配权限" width="30%" :visible.sync="setRightDialogVisible" :close-on-click-modal="false" @close="setRightsDialogClosed">
 97 | 			<!--内容主体-->
 98 | 			<el-tree :data="rightsList" :props="treeProps" ref="treeRef" :show-checkbox="true" :default-expand-all="true"
 99 | 			         node-key="id" :default-checked-keys="defaultKeys"></el-tree>
100 | 			<!--底部-->
101 | 			<span slot="footer">
102 | 				<el-button @click="setRightDialogVisible=false">取 消</el-button>
103 | 				<el-button type="primary" @click="allotRights">确 定</el-button>
104 | 			</span>
105 | 		</el-dialog>
106 | 	</div>
107 | </template>
108 | 
109 | <script>
110 | 	export default {
111 | 		name: "Roles",
112 | 		data() {
113 | 			return {
114 | 				//角色列表
115 | 				roleList: [],
116 | 				//分配权限对话框的显示与隐藏
117 | 				setRightDialogVisible: false,
118 | 				//所有权限的树形数据
119 | 				rightsList: [],
120 | 				//树形控件的属性绑定对象
121 | 				treeProps: {
122 | 					label: 'authName',
123 | 					children: 'children'
124 | 				},
125 | 				//默认选中的节点id值数组
126 | 				defaultKeys: [],
127 | 				//当前即将分配权限的角色id
128 | 				roleId: '',
129 | 				//添加角色对话框的显示状态
130 | 				addRoleDialogVisible: false,
131 | 				//修改角色对话框的显示状态
132 | 				editRoleDialogVisible: false,
133 | 				//添加角色的表单数据
134 | 				addRoleForm: {
135 | 					roleName: '',
136 | 					roleDesc: '',
137 | 				},
138 | 				//添加角色表单的验证规则对象
139 | 				addRoleFormRules: {
140 | 					roleName: [
141 | 						{required: true, message: '请输入角色名称', trigger: 'blur'},
142 | 					],
143 | 					roleDesc: [
144 | 						{required: true, message: '请输入角色描述', trigger: 'blur'},
145 | 					]
146 | 				},
147 | 				//修改角色的表单数据
148 | 				editRoleForm: {
149 | 					roleName: '',
150 | 					roleDesc: '',
151 | 				},
152 | 				//修改角色表单的验证规则对象
153 | 				editRoleFormRules: {
154 | 					roleName: [
155 | 						{required: true, message: '请输入角色名称', trigger: 'blur'},
156 | 					],
157 | 					roleDesc: [
158 | 						{required: true, message: '请输入角色描述', trigger: 'blur'},
159 | 					]
160 | 				},
161 | 			}
162 | 		},
163 | 		created() {
164 | 			this.getRolesList()
165 | 		},
166 | 		methods: {
167 | 			getRolesList() {
168 | 				axios.get('roles').then(response => {
169 | 					const res = response.data
170 | 					if (res.meta.status === 200) {
171 | 						this.roleList = res.data
172 | 					} else {
173 | 						this.$message.error(res.meta.msg)
174 | 					}
175 | 				}).catch(() => {
176 | 					this.$message.error('请求失败')
177 | 				})
178 | 			},
179 | 			//根据id删除角色对应的权限
180 | 			removeRightById(role, rightId) {
181 | 				this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
182 | 					confirmButtonText: '确定',
183 | 					cancelButtonText: '取消',
184 | 					type: 'warning'
185 | 				}).then(() => {
186 | 					axios.delete(`roles/${role.id}/rights/${rightId}`).then(response => {
187 | 						const res = response.data
188 | 						if (res.meta.status === 200) {
189 | 							role.children = res.data
190 | 							this.$message.success(res.meta.msg)
191 | 						} else {
192 | 							this.$message.error(res.meta.msg)
193 | 						}
194 | 					}).catch(() => {
195 | 						this.$message.error('操作失败')
196 | 					})
197 | 				}).catch(() => {
198 | 					this.$message.info('已取消删除')
199 | 				});
200 | 			},
201 | 			//显示分配权限对话框
202 | 			showSetRightDialog(role) {
203 | 				this.roleId = role.id
204 | 				axios.get('rights/tree').then(response => {
205 | 					const res = response.data
206 | 					if (res.meta.status === 200) {
207 | 						this.rightsList = res.data
208 | 						this.getLeafKeys(role, this.defaultKeys)
209 | 						this.setRightDialogVisible = true
210 | 					} else {
211 | 						this.$message.error(res.meta.msg)
212 | 					}
213 | 				}).catch(() => {
214 | 					this.$message.error('请求失败')
215 | 				})
216 | 			},
217 | 			//通过递归方式 获取角色下所有三级权限的id
218 | 			getLeafKeys(node, arr) {
219 | 				//如果当前node节点不含children属性 则为三级节点
220 | 				if (!node.children) {
221 | 					return arr.push(node.id)
222 | 				}
223 | 				node.children.forEach(item => this.getLeafKeys(item, arr))
224 | 			},
225 | 			//分配权限对话框关闭事件
226 | 			setRightsDialogClosed() {
227 | 				this.defaultKeys = []
228 | 			},
229 | 			//为角色分配权限
230 | 			allotRights() {
231 | 				const keys = [
232 | 					...this.$refs.treeRef.getCheckedKeys(),
233 | 					...this.$refs.treeRef.getHalfCheckedKeys()
234 | 				]
235 | 				const idStr = keys.join(',')
236 | 				axios.post(`roles/${this.roleId}/rights`, {rids: idStr}).then(response => {
237 | 					const res = response.data
238 | 					if (res.meta.status === 200) {
239 | 						this.getRolesList()
240 | 						this.setRightDialogVisible = false
241 | 						this.$message.success(res.meta.msg)
242 | 					} else {
243 | 						this.$message.error(res.meta.msg)
244 | 					}
245 | 				}).catch(() => {
246 | 					this.$message.error('操作失败')
247 | 				})
248 | 			},
249 | 			//添加角色对话框的关闭事件
250 | 			addRoleDialogClosed() {
251 | 				this.$refs.addRoleFormRef.resetFields()
252 | 			},
253 | 			//确认添加角色
254 | 			addRole(){
255 | 				this.$refs.addRoleFormRef.validate(valid => {
256 | 					if (valid) {
257 | 						axios.post('roles', this.addRoleForm).then(response => {
258 | 							const res = response.data
259 | 							if (res.meta.status === 201) {
260 | 								//隐藏对话框
261 | 								this.addRoleDialogVisible = false
262 | 								this.getRolesList()
263 | 								this.$message.success(res.meta.msg)
264 | 							} else {
265 | 								this.$message.error(res.meta.msg)
266 | 							}
267 | 						}).catch(() => {
268 | 							this.$message.error("操作失败")
269 | 						})
270 | 					}
271 | 				})
272 | 			},
273 | 			showEditDialog(id){
274 | 				axios.get(`roles/${id}`).then(response => {
275 | 					const res = response.data
276 | 					if (res.meta.status === 200) {
277 | 						this.editRoleForm = res.data
278 | 					} else {
279 | 						return this.$message.error(res.meta.msg)
280 | 					}
281 | 				}).catch(() => {
282 | 					return this.$message.error("请求失败")
283 | 				})
284 | 				this.editRoleDialogVisible = true
285 | 			},
286 | 			//修改角色对话框的关闭事件
287 | 			editRoleDialogClosed() {
288 | 				this.$refs.editRoleFormRef.resetFields()
289 | 			},
290 | 			//确认修改角色
291 | 			editRole(){
292 | 				this.$refs.editRoleFormRef.validate(valid => {
293 | 					if (valid) {
294 | 						axios.put(`roles/${this.editRoleForm.roleId}`, this.editRoleForm).then(response => {
295 | 							const res = response.data
296 | 							if (res.meta.status === 200) {
297 | 								//隐藏对话框
298 | 								this.editRoleDialogVisible = false
299 | 								this.getRolesList()
300 | 								this.$message.success(res.meta.msg)
301 | 							} else {
302 | 								this.$message.error(res.meta.msg)
303 | 							}
304 | 						}).catch(() => {
305 | 							this.$message.error("操作失败")
306 | 						})
307 | 					}
308 | 				})
309 | 			},
310 | 			//根据id删除对应的角色
311 | 			removeRoleById(id) {
312 | 				this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
313 | 					confirmButtonText: '确定',
314 | 					cancelButtonText: '取消',
315 | 					type: 'warning'
316 | 				}).then(() => {
317 | 					axios.delete(`roles/${id}`).then(response => {
318 | 						const res = response.data
319 | 						if (res.meta.status === 200) {
320 | 							this.$message.success(res.meta.msg)
321 | 							this.getRolesList()
322 | 						} else {
323 | 							this.$message.error(res.meta.msg)
324 | 						}
325 | 					}).catch(() => {
326 | 						this.$message.error('操作失败')
327 | 					})
328 | 				}).catch(() => {
329 | 					this.$message.info('已取消删除')
330 | 				});
331 | 			},
332 | 		}
333 | 	}
334 | </script>
335 | 
336 | <style lang="less" scoped>
337 | 	.el-tag {
338 | 		margin: 10px;
339 | 	}
340 | 
341 | 	.bdtop {
342 | 		border-top: 1px solid #eeeeee;
343 | 	}
344 | 
345 | 	.bdbottom {
346 | 		border-bottom: 1px solid #eeeeee;
347 | 	}
348 | 
349 | 	.vcenter {
350 | 		display: flex;
351 | 		align-items: center;
352 | 	}
353 | </style>


--------------------------------------------------------------------------------
/src/components/report/Report.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div>
 3 | 		<!--面包屑导航区-->
 4 | 		<el-breadcrumb separator-class="el-icon-arrow-right">
 5 | 			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
 6 | 			<el-breadcrumb-item>数据统计</el-breadcrumb-item>
 7 | 			<el-breadcrumb-item>数据报表</el-breadcrumb-item>
 8 | 		</el-breadcrumb>
 9 | 
10 | 		<el-card>
11 | 			<div id="main" style="width: 100%;height:700px;"></div>
12 | 		</el-card>
13 | 	</div>
14 | </template>
15 | 
16 | <script>
17 | 	import echarts from 'echarts'
18 | 	import _ from 'lodash'
19 | 
20 | 	export default {
21 | 		name: "Report",
22 | 		data() {
23 | 			return {
24 | 				//需要合并的数据
25 | 				options: {
26 | 					title: {
27 | 						text: '用户来源'
28 | 					},
29 | 					tooltip: {
30 | 						trigger: 'axis',
31 | 						axisPointer: {
32 | 							type: 'cross',
33 | 							label: {
34 | 								backgroundColor: '#E9EEF3'
35 | 							}
36 | 						}
37 | 					},
38 | 					grid: {
39 | 						left: '3%',
40 | 						right: '4%',
41 | 						bottom: '3%',
42 | 						containLabel: true
43 | 					},
44 | 					xAxis: [
45 | 						{
46 | 							boundaryGap: false
47 | 						}
48 | 					],
49 | 					yAxis: [
50 | 						{
51 | 							type: 'value'
52 | 						}
53 | 					]
54 | 				}
55 | 			}
56 | 		},
57 | 		//DOM初始化完毕
58 | 		async mounted() {
59 | 			// 基于准备好的dom，初始化echarts实例
60 | 			var myChart = echarts.init(document.getElementById('main'));
61 | 
62 | 			const {data: res} = await axios.get('reports/type/1')
63 | 			if (res.meta.status !== 200) {
64 | 				this.$message.error('请求失败')
65 | 			}
66 | 
67 | 			// 指定图表的配置项和数据
68 | 			const result = _.merge(res.data, this.options)
69 | 
70 | 			// 使用刚指定的配置项和数据显示图表。
71 | 			myChart.setOption(result);
72 | 		}
73 | 	}
74 | </script>
75 | 
76 | <style lang="less" scoped>
77 | 
78 | </style>


--------------------------------------------------------------------------------
/src/components/user/Users.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<!--面包屑导航区-->
  4 | 		<el-breadcrumb separator-class="el-icon-arrow-right">
  5 | 			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6 | 			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
  7 | 			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
  8 | 		</el-breadcrumb>
  9 | 
 10 | 		<!--卡片视图区域-->
 11 | 		<el-card>
 12 | 			<!--搜索与添加-->
 13 | 			<el-row :gutter="10">
 14 | 				<el-col :span="6">
 15 | 					<el-input placeholder="请输入内容" v-model="queryInfo.query" :clearable="true" @clear="getUserList">
 16 | 						<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
 17 | 					</el-input>
 18 | 				</el-col>
 19 | 				<el-col :span="6">
 20 | 					<el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
 21 | 				</el-col>
 22 | 			</el-row>
 23 | 
 24 | 			<!--用户列表-->
 25 | 			<el-table :data="userList" :border="true" :stripe="true">
 26 | 				<el-table-column label="序号" type="index" width="50"></el-table-column>
 27 | 				<el-table-column label="姓名" prop="username"></el-table-column>
 28 | 				<el-table-column label="邮箱" prop="email"></el-table-column>
 29 | 				<el-table-column label="电话" prop="mobile"></el-table-column>
 30 | 				<el-table-column label="角色" prop="role_name"></el-table-column>
 31 | 				<el-table-column label="状态">
 32 | 					<template v-slot="scope">
 33 | 						<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
 34 | 					</template>
 35 | 				</el-table-column>
 36 | 				<el-table-column label="操作" width="200">
 37 | 					<template v-slot="scope">
 38 | 						<!--修改按钮-->
 39 | 						<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
 40 | 						<!--删除按钮-->
 41 | 						<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
 42 | 						<!--分配角色按钮-->
 43 | 						<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
 44 | 							<el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetRoleDialog(scope.row)"></el-button>
 45 | 						</el-tooltip>
 46 | 					</template>
 47 | 				</el-table-column>
 48 | 			</el-table>
 49 | 
 50 | 			<!--分页-->
 51 | 			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
 52 | 			               :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" :total="total"
 53 | 			               layout="total, sizes, prev, pager, next, jumper" background>
 54 | 			</el-pagination>
 55 | 		</el-card>
 56 | 
 57 | 
 58 | 		<!--添加用户的对话框-->
 59 | 		<el-dialog title="添加用户" width="50%" :visible.sync="addDialogVisible" :close-on-click-modal="false" @close="addDialogClosed">
 60 | 			<!--内容主体-->
 61 | 			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
 62 | 				<el-form-item label="用户名" prop="username">
 63 | 					<el-input v-model="addForm.username"></el-input>
 64 | 				</el-form-item>
 65 | 				<el-form-item label="密码" prop="password">
 66 | 					<el-input v-model="addForm.password"></el-input>
 67 | 				</el-form-item>
 68 | 				<el-form-item label="邮箱" prop="email">
 69 | 					<el-input v-model="addForm.email"></el-input>
 70 | 				</el-form-item>
 71 | 				<el-form-item label="手机号" prop="mobile">
 72 | 					<el-input v-model="addForm.mobile"></el-input>
 73 | 				</el-form-item>
 74 | 			</el-form>
 75 | 			<!--底部-->
 76 | 			<span slot="footer">
 77 | 				<el-button @click="addDialogVisible=false">取 消</el-button>
 78 | 				<el-button type="primary" @click="addUser">确 定</el-button>
 79 | 			</span>
 80 | 		</el-dialog>
 81 | 
 82 | 		<!--修改用户的对话框-->
 83 | 		<el-dialog title="修改用户" width="50%" :visible.sync="editDialogVisible" :close-on-click-modal="false" @close="editDialogClosed">
 84 | 			<!--内容主体-->
 85 | 			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
 86 | 				<el-form-item label="用户名" prop="username">
 87 | 					<el-input v-model="editForm.username" :disabled="true"></el-input>
 88 | 				</el-form-item>
 89 | 				<el-form-item label="邮箱" prop="email">
 90 | 					<el-input v-model="editForm.email"></el-input>
 91 | 				</el-form-item>
 92 | 				<el-form-item label="手机号" prop="mobile">
 93 | 					<el-input v-model="editForm.mobile"></el-input>
 94 | 				</el-form-item>
 95 | 			</el-form>
 96 | 			<!--底部-->
 97 | 			<span slot="footer">
 98 | 				<el-button @click="editDialogVisible=false">取 消</el-button>
 99 | 				<el-button type="primary" @click="editUser">确 定</el-button>
100 | 			</span>
101 | 		</el-dialog>
102 | 
103 | 		<!--分配角色的对话框-->
104 | 		<el-dialog title="分配角色" width="50%" :visible.sync="setRoleDialogVisible" :close-on-click-modal="false" @close="setRoleDialogClosed">
105 | 			<!--内容主体-->
106 | 			<div>
107 | 				<p>当前的用户：{{ userInfo.username }}</p>
108 | 				<p>当前的角色：{{ userInfo.role_name }}</p>
109 | 				<p>分配新角色：
110 | 					<el-select v-model="selectRoleId" placeholder="请选择">
111 | 						<el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
112 | 					</el-select>
113 | 				</p>
114 | 			</div>
115 | 			<!--底部-->
116 | 			<span slot="footer">
117 | 				<el-button @click="setRoleDialogVisible=false">取 消</el-button>
118 | 				<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
119 | 			</span>
120 | 		</el-dialog>
121 | 	</div>
122 | </template>
123 | 
124 | <script>
125 | 	export default {
126 | 		name: "Users",
127 | 		data() {
128 | 			let checkEmail = (rule, value, callback) => {
129 | 				const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
130 | 				if (regEmail.test(value)) {
131 | 					return callback()
132 | 				}
133 | 				callback(new Error('请输入合法的邮箱'))
134 | 			}
135 | 			let checkMobile = (rule, value, callback) => {
136 | 				const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
137 | 				if (regMobile.test(value)) {
138 | 					return callback()
139 | 				}
140 | 				callback(new Error('请输入合法的手机号'))
141 | 			}
142 | 			return {
143 | 				//获取用户列表的参数对象
144 | 				queryInfo: {
145 | 					query: '',
146 | 					pagenum: 1,//当前的页数
147 | 					pagesize: 5//当前每页显示多少条数据
148 | 				},
149 | 				userList: [],
150 | 				total: 0,
151 | 				//添加用户对话框显示状态
152 | 				addDialogVisible: false,
153 | 				//修改用户对话框显示状态
154 | 				editDialogVisible: false,
155 | 				//分配角色对话框的显示状态
156 | 				setRoleDialogVisible: false,
157 | 				//添加用户的表单数据
158 | 				addForm: {
159 | 					username: '',
160 | 					password: '',
161 | 					email: '',
162 | 					mobile: ''
163 | 				},
164 | 				//添加用户表单的验证规则对象
165 | 				addFormRules: {
166 | 					username: [
167 | 						{required: true, message: '请输入用户名', trigger: 'blur'},
168 | 						{min: 3, max: 10, message: '用户名长度在3~10个字符', trigger: 'blur'}
169 | 					],
170 | 					password: [
171 | 						{required: true, message: '请输入密码', trigger: 'blur'},
172 | 						{min: 6, max: 15, message: '密码长度在6~15个字符', trigger: 'blur'}
173 | 					],
174 | 					email: [
175 | 						{required: true, message: '请输入邮箱', trigger: 'blur'},
176 | 						{validator: checkEmail, trigger: 'blur'}
177 | 					],
178 | 					mobile: [
179 | 						{required: true, message: '请输入手机号', trigger: 'blur'},
180 | 						{validator: checkMobile, trigger: 'blur'}
181 | 					]
182 | 				},
183 | 				//修改用户的表单数据
184 | 				editForm: {},
185 | 				//修改用户表单的验证规则对象
186 | 				editFormRules: {
187 | 					email: [
188 | 						{required: true, message: '请输入邮箱', trigger: 'blur'},
189 | 						{validator: checkEmail, trigger: 'blur'}
190 | 					],
191 | 					mobile: [
192 | 						{required: true, message: '请输入手机号', trigger: 'blur'},
193 | 						{validator: checkMobile, trigger: 'blur'}
194 | 					]
195 | 				},
196 | 				//需要被分配角色的用户信息
197 | 				userInfo: {},
198 | 				//所有角色的数据列表
199 | 				rolesList: [],
200 | 				//已选中的角色id
201 | 				selectRoleId: ''
202 | 			}
203 | 		},
204 | 		created() {
205 | 			this.getUserList()
206 | 		},
207 | 		methods: {
208 | 			getUserList() {
209 | 				axios.get('users', {params: this.queryInfo}).then(response => {
210 | 					const res = response.data
211 | 					if (res.meta.status === 200) {
212 | 						this.userList = res.data.users
213 | 						this.total = res.data.total
214 | 					} else {
215 | 						this.$message.error(res.meta.msg)
216 | 					}
217 | 				}).catch(() => {
218 | 					this.$message.error("获取失败")
219 | 				})
220 | 			},
221 | 			//监听pagesize改变的事件
222 | 			handleSizeChange(newSize) {
223 | 				this.queryInfo.pagesize = newSize
224 | 				this.getUserList()
225 | 			},
226 | 			//监听页码值改变的事件
227 | 			handleCurrentChange(newPage) {
228 | 				this.queryInfo.pagenum = newPage
229 | 				this.getUserList()
230 | 			},
231 | 			//监听switch开关状态的改变
232 | 			userStateChanged(userInfo) {
233 | 				axios.put(`users/${userInfo.id}/state/${userInfo.mg_state}`).then(response => {
234 | 					const res = response.data
235 | 					if (res.meta.status === 200) {
236 | 						this.$message.success(res.meta.msg)
237 | 					} else {
238 | 						userInfo.mg_state = !userInfo.mg_state
239 | 						this.$message.error(res.meta.msg)
240 | 					}
241 | 				}).catch(() => {
242 | 					this.$message.error("操作失败")
243 | 				})
244 | 			},
245 | 			//监听添加用户对话框的关闭事件
246 | 			addDialogClosed() {
247 | 				this.$refs.addFormRef.resetFields()
248 | 			},
249 | 			//确定添加用户
250 | 			addUser() {
251 | 				this.$refs.addFormRef.validate(valid => {
252 | 					if (valid) {
253 | 						axios.post('users', this.addForm).then(response => {
254 | 							const res = response.data
255 | 							if (res.meta.status === 201) {
256 | 								//隐藏对话框
257 | 								this.addDialogVisible = false
258 | 								this.getUserList()
259 | 								this.$message.success(res.meta.msg)
260 | 							} else {
261 | 								this.$message.error(res.meta.msg)
262 | 							}
263 | 						}).catch(() => {
264 | 							this.$message.error("操作失败")
265 | 						})
266 | 					}
267 | 				})
268 | 			},
269 | 			//展示修改用户的对话框
270 | 			showEditDialog(id) {
271 | 				axios.get(`users/${id}`).then(response => {
272 | 					const res = response.data
273 | 					if (res.meta.status === 200) {
274 | 						this.editForm = res.data
275 | 					} else {
276 | 						return this.$message.error(res.meta.msg)
277 | 					}
278 | 				}).catch(() => {
279 | 					return this.$message.error("请求失败")
280 | 				})
281 | 				this.editDialogVisible = true
282 | 			},
283 | 			//监听修改用户对话框的关闭事件
284 | 			editDialogClosed() {
285 | 				this.$refs.editFormRef.resetFields()
286 | 			},
287 | 			//确定修改用户
288 | 			editUser() {
289 | 				this.$refs.editFormRef.validate(valid => {
290 | 					if (valid) {
291 | 						axios.put(`users/${this.editForm.id}`, {email: this.editForm.email, mobile: this.editForm.mobile}).then(response => {
292 | 							const res = response.data
293 | 							if (res.meta.status === 200) {
294 | 								//隐藏对话框
295 | 								this.editDialogVisible = false
296 | 								this.getUserList()
297 | 								this.$message.success(res.meta.msg)
298 | 							} else {
299 | 								this.$message.error(res.meta.msg)
300 | 							}
301 | 						}).catch(() => {
302 | 							this.$message.error("操作失败")
303 | 						})
304 | 					}
305 | 				})
306 | 			},
307 | 			//根据id删除对应的用户
308 | 			removeUserById(id) {
309 | 				this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
310 | 					confirmButtonText: '确定',
311 | 					cancelButtonText: '取消',
312 | 					type: 'warning'
313 | 				}).then(() => {
314 | 					axios.delete(`users/${id}`).then(response => {
315 | 						const res = response.data
316 | 						if (res.meta.status === 200) {
317 | 							this.$message.success(res.meta.msg)
318 | 							this.getUserList()
319 | 						} else {
320 | 							this.$message.error(res.meta.msg)
321 | 						}
322 | 					}).catch(() => {
323 | 						this.$message.error('操作失败')
324 | 					})
325 | 				}).catch(() => {
326 | 					this.$message.info('已取消删除')
327 | 				});
328 | 			},
329 | 			//显示分配角色对话框
330 | 			showSetRoleDialog(userInfo) {
331 | 				this.userInfo = userInfo
332 | 				axios.get('roles').then(response => {
333 | 					const res = response.data
334 | 					if (res.meta.status === 200) {
335 | 						this.rolesList = res.data
336 | 					} else {
337 | 						this.$message.error(res.meta.msg)
338 | 					}
339 | 				}).catch(() => {
340 | 					this.$message.error('请求失败')
341 | 				})
342 | 				this.setRoleDialogVisible = true
343 | 			},
344 | 			//分配角色对话框关闭事件
345 | 			setRoleDialogClosed() {
346 | 				this.selectRoleId = ''
347 | 				this.userInfo = {}
348 | 			},
349 | 			//确定分配角色
350 | 			saveRoleInfo() {
351 | 				if (!this.selectRoleId) {
352 | 					return this.$message.error('请选择要分配的角色')
353 | 				}
354 | 				axios.put(`users/${this.userInfo.id}/role`, {rid: this.selectRoleId}).then(response => {
355 | 					const res = response.data
356 | 					if (res.meta.status === 200) {
357 | 						this.getUserList()
358 | 						this.setRoleDialogVisible = false
359 | 						this.$message.success(res.meta.msg)
360 | 					} else {
361 | 						this.$message.error(res.meta.msg)
362 | 					}
363 | 				}).catch(() => {
364 | 					this.$message.error('操作失败')
365 | 				})
366 | 			}
367 | 		}
368 | 	}
369 | </script>
370 | 
371 | <style lang="less" scoped>
372 | 
373 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import './plugins/axios'
 5 | import './plugins/element.js'
 6 | import moment from "moment";
 7 | import './assets/css/global.css'
 8 | //富文本编辑器
 9 | import VueQuillEditor from 'vue-quill-editor'
10 | import 'quill/dist/quill.core.css' // import styles
11 | import 'quill/dist/quill.snow.css' // for snow theme
12 | import 'quill/dist/quill.bubble.css' // for bubble theme
13 | 
14 | //进度条
15 | import NProgress from 'nprogress'
16 | import 'nprogress/nprogress.css'
17 | 
18 | axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
19 | axios.interceptors.request.use(config => {
20 | 	NProgress.start()
21 | 	config.headers.Authorization = window.sessionStorage.getItem('token')
22 | 	return config
23 | })
24 | axios.interceptors.response.use(config => {
25 | 	NProgress.done()
26 | 	return config
27 | })
28 | 
29 | 
30 | Vue.filter('dateFormat', function (value, format = 'YYYY-MM-DD HH:mm:ss') {
31 | 	return moment(value).format(format)
32 | })
33 | 
34 | 
35 | Vue.use(VueQuillEditor)
36 | 
37 | 
38 | Vue.config.productionTip = false
39 | 
40 | new Vue({
41 | 	router,
42 | 	render: h => h(App)
43 | }).$mount('#app')
44 | 


--------------------------------------------------------------------------------
/src/plugins/axios.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import Vue from 'vue';
 4 | import axios from "axios";
 5 | 
 6 | // Full config:  https://github.com/axios/axios#request-config
 7 | // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
 8 | // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 9 | // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
10 | 
11 | let config = {
12 |   // baseURL: process.env.baseURL || process.env.apiUrl || ""
13 |   // timeout: 60 * 1000, // Timeout
14 |   // withCredentials: true, // Check cross-site Access-Control
15 | };
16 | 
17 | const _axios = axios.create(config);
18 | 
19 | _axios.interceptors.request.use(
20 |   function(config) {
21 |     // Do something before request is sent
22 |     return config;
23 |   },
24 |   function(error) {
25 |     // Do something with request error
26 |     return Promise.reject(error);
27 |   }
28 | );
29 | 
30 | // Add a response interceptor
31 | _axios.interceptors.response.use(
32 |   function(response) {
33 |     // Do something with response data
34 |     return response;
35 |   },
36 |   function(error) {
37 |     // Do something with response error
38 |     return Promise.reject(error);
39 |   }
40 | );
41 | 
42 | Plugin.install = function(Vue, options) {
43 |   Vue.axios = _axios;
44 |   window.axios = _axios;
45 |   Object.defineProperties(Vue.prototype, {
46 |     axios: {
47 |       get() {
48 |         return _axios;
49 |       }
50 |     },
51 |     $axios: {
52 |       get() {
53 |         return _axios;
54 |       }
55 |     },
56 |   });
57 | };
58 | 
59 | Vue.use(Plugin)
60 | 
61 | export default Plugin;
62 | 


--------------------------------------------------------------------------------
/src/plugins/element.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Element from 'element-ui'
3 | import 'element-ui/lib/theme-chalk/index.css'
4 | 
5 | Vue.use(Element)


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import VueRouter from 'vue-router'
  3 | import Login from "../components/Login";
  4 | import Home from "../components/Home";
  5 | import Welcome from "../components/Welcome";
  6 | import Users from "../components/user/Users";
  7 | import Rights from "../components/power/Rights";
  8 | import Roles from "../components/power/Roles";
  9 | import Cate from "../components/goods/Cate";
 10 | import Params from "../components/goods/Params";
 11 | import GoodsList from "../components/goods/List";
 12 | import GoodsAdd from "../components/goods/Add";
 13 | import GoodsEdit from "../components/goods/Edit";
 14 | import Order from "../components/order/Order";
 15 | import Report from "../components/report/Report";
 16 | 
 17 | Vue.use(VueRouter)
 18 | 
 19 | const routes = [
 20 | 	{
 21 | 		path: '/',
 22 | 		redirect: '/login'
 23 | 	},
 24 | 	{
 25 | 		path: '/login',
 26 | 		component: Login
 27 | 	},
 28 | 	{
 29 | 		path: '/home',
 30 | 		component: Home,
 31 | 		redirect: '/welcome',
 32 | 		children: [
 33 | 			{
 34 | 				path: '/welcome',
 35 | 				component: Welcome
 36 | 			},
 37 | 			{
 38 | 				path: '/users',
 39 | 				component: Users
 40 | 			},
 41 | 			{
 42 | 				path: '/rights',
 43 | 				component: Rights
 44 | 			},
 45 | 			{
 46 | 				path: '/roles',
 47 | 				component: Roles
 48 | 			},
 49 | 			{
 50 | 				path: '/categories',
 51 | 				component: Cate
 52 | 			},
 53 | 			{
 54 | 				path: '/params',
 55 | 				component: Params
 56 | 			},
 57 | 			{
 58 | 				path: '/goods',
 59 | 				component: GoodsList
 60 | 			},
 61 | 			{
 62 | 				path: '/goods/add',
 63 | 				component: GoodsAdd
 64 | 			},
 65 | 			{
 66 | 				path: '/goods/edit/:id',
 67 | 				component: GoodsEdit
 68 | 			},
 69 | 			{
 70 | 				path: '/orders',
 71 | 				component: Order
 72 | 			},
 73 | 			{
 74 | 				path: '/reports',
 75 | 				component: Report
 76 | 			}
 77 | 		]
 78 | 	}
 79 | 	// {
 80 | 	//   path: '/about',
 81 | 	//   name: 'About',
 82 | 	//   // route level code-splitting
 83 | 	//   // this generates a separate chunk (about.[hash].js) for this route
 84 | 	//   // which is lazy-loaded when the route is visited.
 85 | 	//   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
 86 | 	// }
 87 | ]
 88 | 
 89 | const router = new VueRouter({
 90 | 	mode: 'history',
 91 | 	base: process.env.BASE_URL,
 92 | 	routes
 93 | })
 94 | 
 95 | const originalPush = VueRouter.prototype.push;
 96 | VueRouter.prototype.push = function(location) {
 97 | 	return originalPush.call(this, location).catch(err => err)
 98 | }
 99 | 
100 | //挂载路由导航守卫
101 | router.beforeEach((to, from, next) => {
102 | 	// to将要访问的路径
103 | 	// from代表从哪个路径跳转而来
104 | 	// next是一个函数，表示放行
105 | 	// next()放行  next('/login')强制跳转
106 | 	if (to.path === '/login') return next()
107 | 	//获取token
108 | 	const tokenStr = window.sessionStorage.getItem('token')
109 | 	if (!tokenStr) return next("/login")
110 | 	next()
111 | })
112 | 
113 | 
114 | export default router
115 | 


--------------------------------------------------------------------------------