目录结构

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
import Welcome from './components/Welcome.vue'
import Users from './components/user/Users.vue'
import Right from './components/power/Right.vue'
import Roles from './components/power/Roles.vue'
import Cate from './components/goods/Cate.vue'
import Params from './components/goods/Params.vue'
import List from './components/goods/List.vue'
import Add from './components/goods/Add.vue'
import Order from './components/order/Order.vue'
Vue.use(Router)const router = new Router({routes: [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',component: Home,redirect: '/welcome',children: [{path: '/welcome',component: Welcome}, {path: '/users',component: Users},{path: '/rights',component: Right},{path: '/roles',component: Roles},{path: '/categories',component: Cate}, {path: '/params',component: Params}, {path: '/goods',component: List},{path: '/goods/add',component: Add},{path: '/orders',component: Order}]}]
});
//挂载路由导航守卫
router.beforeEach((to, from, next) => {if (to.path === '/login') return next();//获取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next();
})export default router

login.vue

<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/logo.png"></div><!-- 表单区域--><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><!-- 登录区域--><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div>
</div></template><script>
export default{data(){return{//这是登录表单的数据loginForm:{username:'geyao',password:'12345678'},// 表单验证loginFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入用户密码', trigger: 'blur' },{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }]}}},methods:{resetLoginForm(){// console.log(this)this.$refs.loginFormRef.resetFields();},login(){this.$refs.loginFormRef.validate(async valid =>{if(!valid) return;const {data:res}=await this.$http.post('login',this.loginForm);if(res.meta.status!==200) return this.$message.error('登录失败');this.$message.success('登录成功');// 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; //   1.1 项目中出现了登录之外的其他API接口,必须在登陆之后才能访问//   1.2 token 只应在当前网站打开期间生效,所以将token保存在window.sessionStorage.setItem('token', res.data.token)// 2、通过编程式导航跳转到后台主页, 路由地址为:/homethis.$router.push('/home')});}}
}
</script><style lang="less" scoped>
.login_container {background-color: #2b4b6b;height: 100%;
}
.login_box {width: 450px;height: 360px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);background-color: #fff;
}.avatar_box {width: 130px;height: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}.login_form {position: absolute;bottom: 60px;width: 100%;padding: 0 20px;box-sizing: border-box;
}.btns {display: flex;justify-content: center;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入字体图标
import './assets/fonts/iconfont.css'
Vue.config.productionTip = false
//导入全局样式
import './assets/css/global.css'
import TreeTable from "vue-table-with-tree-grid"
import axios from 'axios'Vue.prototype.$http=axios
axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/"
// 请求在到达服务器之前,先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {// console.log(config)// 为请求头对象,添加token验证的Authorization字段config.headers.Authorization = window.sessionStorage.getItem('token')// 在最后必须 return configreturn config
})
Vue.config.productionTip=false;
Vue.component('tree-table',TreeTable)Vue.filter('dataFormat', function (originVal) {const dt = new Date(originVal)const y = dt.getFullYear()const m = (dt.getMonth() + 1 + '').padStart(2, '0')const d = (dt.getDate() + '').padStart(2, '0')const hh = (dt.getHours() + '').padStart(2, '0')const mm = (dt.getMinutes() + '').padStart(2, '0')const ss = (dt.getSeconds() + '').padStart(2, '0')// yyyy-mm-dd hh:mm:ssreturn `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
new Vue({router,render: h => h(App)
}).$mount('#app')

global.css

/* 全局样式 */
html,
body,
#app {height: 100%;margin: 0;padding: 0;}.el-breadcrumb {margin-bottom: 15px;font-size: 12px;
}.el-card {box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}.el-table {margin-top: 15px;font-size: 12px;
}.el-pagination {margin-top: 15px;
}

element.js

import Vue from 'vue'//弹框提示
import {Message,Button,Form,FormItem,Input,Container,Header,Aside,Main,Menu,Submenu,MenuItemGroup,MenuItem,Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,Tooltip,Pagination,Dialog,MessageBox,Tag,Tree
} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Tag)
Vue.use(Tree)
Vue.prototype.$confirm=MessageBox
Vue.prototype.$message = Message

Home.vue

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
import Welcome from './components/Welcome.vue'
import Users from './components/user/Users.vue'
Vue.use(Router)const router = new Router({routes: [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',component: Home,redirect: '/welcome',children: [{path: '/welcome',component: Welcome}, {path: '/users',component: Users}]}]
});
//挂载路由导航守卫
router.beforeEach((to, from, next) => {if (to.path === '/login') return next();//获取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next();
})export default router

.prettierrc

{"semi":false,"singleQuote":true
}

eslintrc.js

module.exports = {root: true,env: {node: true},extends: ['plugin:vue/essential','@vue/standard'],parserOptions: {parser: 'babel-eslint'},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','space-before-function-paren':0}
}

welcome.vue

<template><div><h3>欢迎</h3></div>
</template>

Users.vue

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item><el-breadcrumb-item>用户列表</el-breadcrumb-item></el-breadcrumb><el-card><el-row :gutter="20"><el-col :span="7"><el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList"><el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button></el-input></el-col><el-col :span="4"><el-button type="primary" @click="addDialogVisible=true">添加用户</el-button></el-col></el-row><el-table border stripe :data="userlist"><el-table-column type="index" label="#"></el-table-column><el-table-column prop="username" label="姓名"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="mobile" label="电话"></el-table-column><el-table-column prop="role_name" label="角色"></el-table-column><el-table-column label="状态"><template slot-scope="scope"><el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作" width="180px"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"size="mini"circle@click="showEditDialog(scope.row.id)"></el-button><el-button type="danger" icon="el-icon-delete" size="mini" circle@click="removeUserById(scope.row.id)"></el-button><el-tooltipclass="item"effect="dark"content="角色分配":enterable="false"placement="top"><el-button type="warning" icon="el-icon-setting" size="mini" circle@click="showSetRole(scope.row)"></el-button></el-tooltip></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pagenum":page-sizes="[2, 5, 10, 15]":page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-card><!-- 添加用户的对话框 --><el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"><!-- 内容主体 --><el-form :model="addForm" ref="addFormRef" :rules="addFormRules" label-width="70px"><el-form-item label="用户名" prop="username"><el-input v-model="addForm.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="addForm.password"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="addForm.email"></el-input></el-form-item><el-form-item label="手机" prop="mobile"><el-input v-model="addForm.mobile"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="addUser">确 定</el-button></span></el-dialog><!-- 修改用户的对话框 --><el-dialogtitle="修改用户信息":visible.sync="editDialogVisible"width="50%"@close="editDialogClosed"><el-form :model="editForm" ref="editUserFormRef" :rules="editFormRules" label-width="70px"><el-form-item label="用户名"><el-input v-model="editForm.username" disabled></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="editForm.email"></el-input></el-form-item><el-form-item label="手机" prop="mobile"><el-input v-model="editForm.mobile"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="editUserInfo">确 定</el-button></span></el-dialog><!-- 分配角色对话框 --><el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" ><div><p>当前用户:{{userInfo.username}}</p><p>当前角色:{{userInfo.role_name}}</p></div><p>分配角色:<el-selectv-model="selectRoleId"filterableallow-createdefault-first-optionplaceholder="请选择文章标签"><el-optionv-for="item in rolelist":key="item.id":label="item.roleName":value="item.id"></el-option></el-select></p><span slot="footer" class="dialog-footer"><el-button @click="setRoleDialogVisible = false">取 消</el-button><el-button type="primary" @click="saveRoleInfo">确 定</el-button></span></el-dialog></div>
</template><style scoped="less" scoped>
</style><script>
export default {data() {// 自定义邮箱规则var checkEmail = (rule, value, callback) => {const regEmail = /^\w+@\w+(\.\w+)+$/if (regEmail.test(value)) {// 合法邮箱return callback()}callback(new Error('请输入合法邮箱'))}// 自定义手机号规则var checkMobile = (rule, value, callback) => {const regMobile = /^1[34578]\d{9}$/if (regMobile.test(value)) {return callback()}// 返回一个错误提示callback(new Error('请输入合法的手机号码'))}return {queryInfo: {query: '',pagenum: 1,pagesize: 2,},userlist: [],total: 0,addDialogVisible: false,addForm: {username: '',password: '',email: '',mobile: '',},addFormRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{min: 2,max: 10,message: '用户名的长度在2~10个字',trigger: 'blur',},],password: [{ required: true, message: '请输入用户密码', trigger: 'blur' },{min: 6,max: 18,message: '用户密码的长度在6~18个字',trigger: 'blur',},],email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' },],mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' },],},editFormRules: {email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' },],mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' },],},editDialogVisible: false,editForm: {},setRoleDialogVisible:false,userInfo:{},rolelist:[],selectRoleId:''}},created() {this.getUserList()},methods: {async getUserList() {const { data: res } = await this.$http.get('users', {params: this.queryInfo,})if (res.meta.status !== 200) {return this.$message.error('获取用户列表失败!')}this.userlist = res.data.usersthis.total = res.data.totalconsole.log(res)},// 监听修改用户对话框的关闭事件editDialogClosed() {this.$refs.editUserFormRef.resetFields()},// 监听 pagesize改变的事件handleSizeChange(newSize) {// console.log(newSize)this.queryInfo.pagesize = newSizethis.getUserList()},// 监听 页码值 改变事件handleCurrentChange(newSize) {// console.log(newSize)this.queryInfo.pagenum = newSizethis.getUserList()},async userStateChanged(userInfo) {// console.log(userInfo)const { data: res } = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)if (res.meta.status !== 200) {userInfo.mg_state = !userInfo.mg_statereturn this.$message.error('更新用户状态失败')}this.$message.success('更新用户状态成功!')},// 监听 添加用户对话框的关闭事件addDialogClosed() {this.$refs.addFormRef.resetFields()},editUserInfo() {this.$refs.editUserFormRef.validate(async (valid) => {if (!valid) returnconst { data: res } = await this.$http.put('users/' + this.editForm.id,{email: this.editForm.email,mobile: this.editForm.mobile,})if (res.meta.status !== 200) {this.$message.error('更新用户信息失败!')}// 隐藏添加用户对话框this.editDialogVisible = falsethis.$message.success('更新用户信息成功!')this.getUserList()})},// 编辑用户信息async showEditDialog(id) {const { data: res } = await this.$http.get('users/' + id)if (res.meta.status !== 200) {return this.$message.error('查询用户信息失败!')}this.editForm = res.datathis.editDialogVisible = true},// 添加用户addUser() {// 提交请求前,表单预验证this.$refs.addFormRef.validate(async (valid) => {// console.log(valid)// 表单预校验失败if (!valid) returnconst { data: res } = await this.$http.post('users', this.addForm)if (res.meta.status !== 201) {this.$message.error('添加用户失败!')}this.$message.success('添加用户成功!')// 隐藏添加用户对话框this.addDialogVisible = falsethis.getUserList()})}, // 删除用户async removeUserById (id) {const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).catch(err => err)// 点击确定 返回值为:confirm// 点击取消 返回值为: cancelif (confirmResult !== 'confirm') {return this.$message.info('已取消删除')}const { data: res } = await this.$http.delete('users/' + id)if (res.meta.status !== 200) return this.$message.error('删除用户失败!')this.$message.success('删除用户成功!')this.getUserList()},async showSetRole (userInfo) {this.userInfo = userInfo// 展示对话框之前,获取所有角色列表const { data: res } = await this.$http.get('roles')if (res.meta.status !== 200) {return this.$message.error('获取角色列表失败!')}this.rolelist = res.datathis.setRoleDialogVisible = true} , // 分配角色async saveRoleInfo () {if (!this.selectRoleId) {return this.$message.error('请选择要分配的角色')}const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectRoleId })if (res.meta.status !== 200) {return this.$message.error('更新用户角色失败!')}this.$message.success('更新角色成功!')this.getUserList()this.setRoleDialogVisible = false},},
}
</script>

Right.vue

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>权限管理</el-breadcrumb-item><el-breadcrumb-item>权限列表</el-breadcrumb-item></el-breadcrumb><el-card><el-table :data="rightsList"><el-table-column type="index" label="#"></el-table-column><el-table-column label="权限名称" prop="authName"></el-table-column><el-table-column label="路径" prop="path"></el-table-column><el-table-column label="权限等级" prop="level"><template slot-scope="scope"><el-tag v-if="scope.row.level === '0'">一级</el-tag><el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag><el-tag type="danger" v-else>三级</el-tag></template></el-table-column></el-table></el-card></div>
</template><style lang="less" scoped>
</style><script>
export default {data(){return{//权限列表rightsList:[]}},created(){this.getRightList()},methods:{//获取权限列表async getRightList(){const {data:res}= await this.$http.get('rights/list')if(res.meta.status!==200){return this.$message.console.error("获取权限列表失败");}this.rightsList=res.data}}
}
</script>

Roles.vue

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>权限管理</el-breadcrumb-item><el-breadcrumb-item>角色列表</el-breadcrumb-item></el-breadcrumb><el-card><el-row><el-col><el-button type="primary">添加角色</el-button></el-col></el-row><el-table :data="roleslist" border stripe><el-table-column type="expand"><template slot-scope="scope"><el-row:class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']"  v-for="(item1, i1) in scope.row.children":key="item1.id"><!-- 一级权限 --><el-col :span="5"><el-tag closable @close="removeRightById(scope.row, item1.id)">{{ item1.authName}}</el-tag><i class="el-icon-caret-right"></i></el-col><el-col :span="19"><el-row :class="[i2 === 0 ? '' : 'bdtop','vcenter']"v-for="(item2, i2) in item1.children":key="item2.id"><el-col :span="6 "><el-tagtype="success"closable@close="removeRightById(scope.row, item2.id)">{{ item2.authName }}</el-tag><i class="el-icon-caret-right"></i></el-col><el-col :span="18"><el-tagtype="warning"v-for="(item3) in item2.children":key="item3.id"closable@close="removeRightById(scope.row,item3.id)">{{ item3.authName}}</el-tag></el-col></el-row></el-col></el-row><!--<pre>{{scope.row}}</pre>--></template></el-table-column><!-- 索引列 --><el-table-column type="index" label="#"></el-table-column><el-table-column label="角色名称" prop="roleName"></el-table-column><el-table-column label="角色描述" prop="roleDesc"></el-table-column><el-table-column label="操作" width="300px"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="mini" >编辑</el-button><el-button type="danger" icon="el-icon-delete" size="mini" >删除</el-button><el-buttontype="warning"icon="el-icon-setting"size="mini"@click="showSetRightDialog(scope.row)">分配权限</el-button></template></el-table-column></el-table></el-card><!-- 分配权限 --><el-dialogtitle="分配权限":visible.sync="setRightDialogVisible"width="50%"@close="setRightDialogClosede"><el-tree:data="rightslist":props="treeProps"ref="treeRef"show-checkboxnode-key="id"default-expand-all:default-checked-keys="defKeys"></el-tree><span slot="footer" class="dialog-footer"><el-button @click="setRightDialogVisible = false">取 消</el-button><el-button type="primary" @click="allotRights">确 定</el-button></span></el-dialog></div>
</template><script>
export default {data(){return{//所有角色列表数据roleslist:[],setRightDialogVisible:false,rightslist:[],treeProps:{label:'authName',children:'children'},defKeys:[],roleId:''}},created(){this.getRolesList()},methods:{async getRolesList (role,rightId) {const { data: res } = await this.$http.get('roles')if (res.meta.status !== 200) {return this.$message.error('获取角色列表失败!')}this.roleslist = res.dataconsole.log(this.roleslist)},async removeRightById () {// 弹框提示 删除const confirmResult = await this.$confirm('此操作将永久删除该权限, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).catch(err => err)// 点击确定 返回值为:confirm// 点击取消 返回值为: cancelif (confirmResult !== 'confirm') {return this.$message.info('已取消权限删除')}const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)if (res.meta.status !== 200) {return this.$message.error('删除权限失败!')}this.roleslist = res.data//   不建议使用//this.getRolesList()role.children=res.data},async showSetRightDialog(role){this.roleId=role.id// 获取角色的所有权限const { data: res } = await this.$http.get('rights/tree')if (res.meta.status !== 200) {return this.$message.error('获取权限数据失败!')}//   获取权限树this.rightslist = res.data//   console.log(res)//   递归获取三级节点的id//this.getLeafkeys(role, this.defKeys)this.getLeafkeys(role,this.defKeys)this.setRightDialogVisible = trueconsole.log(this.rightslist)},// 通过递归 获取角色下三级权限的 id, 并保存到defKeys数组getLeafkeys (node, arr) {// 没有children属性,则是三级节点if (!node.children) {return arr.push(node.id)}node.children.forEach(item => this.getLeafkeys(item, arr))},// 权限对话框关闭事件setRightDialogClosed () {this.rightslist = []},// 添加角色对话框的关闭addRoleDialogClosed () {this.$refs.addRoleFormRef.resetFields()},setRightDialogClosede(){this.defKeys=[];},// 分配权限async allotRights (roleId) {// 获得当前选中和半选中的Idconst keys = [...this.$refs.treeRef.getCheckedKeys(),...this.$refs.treeRef.getHalfCheckedKeys()]// join() 方法用于把数组中的所有元素放入一个字符串const idStr = keys.join(',')const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr })if (res.meta.status !== 200) { return this.$message.error('分配权限失败!') }this.$message.success('分配权限成功!')this.getRolesList()this.setRightDialogVisible = false}}
}
</script><style lang="less" scoped>
.el-tag {margin: 7px;
}.bdtop {border-top: 1px solid #eee;
}
.bdbottom {border-bottom: 1px solid #eee;
}
.vcenter {display: flex;align-items: center;
}
</style>

Cate.vue

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>参数列表</el-breadcrumb-item></el-breadcrumb><el-card><!-- 警告区域 --><el-alert title="注意:只允许为第三级分类设置相关参数!" type="warning" show-icon :closable="false"></el-alert></el-card></div></template><script>
export default {}
</script><style lang="less" scoped></style>

Params.vue

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>参数列表</el-breadcrumb-item></el-breadcrumb><el-card><!-- 警告区域 --><el-alert title="注意:只允许为第三级分类设置相关参数!" type="warning" show-icon :closable="false"></el-alert><!-- 选择商品分类区域 --><el-row class="cat_opt"><el-col><span>选择商品分类:</span><!-- 商品分类的级联选择框 --><el-cascaderv-model="selectedCateKeys":options="cateList":props="cateProps"@change="handleChange"></el-cascader></el-col></el-row><el-tabs v-model="activeName" @tab-click="handleTabsClick"><el-tab-pane label="动态参数" name="many"><el-buttontype="primary"size="mini":disabled="isBtnDisabled "@click="addDialogVisible=true">添加参数</el-button><el-table :data="manyTableData" border stripe><el-table-column type="expand"><template slot-scope="scope"><el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable@close="handleClose(i,scope.row)">{{item}}</el-tag><!-- 输入Tag文本框 --><el-inputclass="input-new-tag"v-if="scope.row.inputVisible"v-model="scope.row.inputValue"ref="saveTagInput"size="small"@keyup.enter.native="handleInputConfirm(scope.row)"@blur="handleInputConfirm(scope.row)"></el-input><el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button></template></el-table-column><el-table-column type="index"></el-table-column><el-table-column label="参数名称" prop="attr_name"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"@click="showEditDialog(scope.row.attr_id)"size="mini">编辑</el-button><el-buttontype="danger"icon="el-icon-search"size="mini"@click="removeParams(scope.row.attr_id)">删除</el-button></template></el-table-column></el-table></el-tab-pane><el-tab-pane label="静态属性" name="only"><el-buttontype="primary"size="mini":disabled="isBtnDisabled"@click="addDialogVisible=true">添加属性</el-button><el-table :data="onlyTableData" border stripe><el-table-column type="expand"><template slot-scope="scope"><el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable@close="handleClose(i,scope.row)">{{item}}</el-tag><!-- 输入Tag文本框 --><el-inputclass="input-new-tag"v-if="scope.row.inputVisible"v-model="scope.row.inputValue"ref="saveTagInput"size="small"@keyup.enter.native="handleInputConfirm(scope.row)"@blur="handleInputConfirm(scope.row)"></el-input><el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button></template></el-table-column><el-table-column type="index"></el-table-column><el-table-column label="属性名称" prop="attr_name"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"size="mini"@click="showEditDialog(scope.row.attr_id)">编辑</el-button><el-buttontype="danger"icon="el-icon-search"size="mini"@click="removeParams(scope.row.attr_id)">删除</el-button></template></el-table-column></el-table></el-tab-pane></el-tabs></el-card><el-dialog:title=" '添加' + getTitleText":visible.sync="addDialogVisible"width="50%"@close="addDialogClosed"><el-form :model="addFrom" :rules="addFromRules" ref="addFromRef" label-width="100px"><el-form-item :label="getTitleText" prop="attr_name"><el-input v-model="addFrom.attr_name"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="addParams">确 定</el-button></span></el-dialog><el-dialog:title=" '修改' + getTitleText":visible.sync="editDialogVisible"width="50%"@close="editDialogClosed"><el-form :model="editFrom" :rules="editFromRules" ref="editFromRef" label-width="100px"><el-form-item :label="getTitleText" prop="attr_name"><el-input v-model="editFrom.attr_name"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogClosed = false">取 消</el-button><el-button type="primary" @click="editParams">确 定</el-button></span></el-dialog></div>
</template><script>
export default {data() {return {cateList: [],cateProps: {value: 'cat_id',label: 'cat_name',children: 'children'},inputVisible: false,inputValue: '',selectedCateKeys: [],activeName: 'many',manyTableData: [],onlyTableData: [],addDialogVisible: false,editDialogVisible: false,//   修改表单数据对象editFrom: {attr_name: '',},//   修改表单验证规则editFromRules: {attr_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' },],},addFrom: {attr_name: '',},//   添加表单的验证规则addFromRules: {attr_name: [{ required: true, message: '请输入参数名称', trigger: 'blur' },],},}},created() {this.getCateList()},computed: {//   按钮需要被禁用返回true, 否则返回falseisBtnDisabled() {if (this.selectedCateKeys.length !== 3) {return true}return false},cateId() {if (this.selectedCateKeys.length === 3) {return this.selectedCateKeys[2]}return null},getTitleText() {if (this.activeName === 'many') {return '动态参数'}return '静态属性'},},methods: {//   获取所有的商品分类列表async getCateList() {const { data: res } = await this.$http.get('categories')if (res.meta.status !== 200) {return this.$message.error('获取商品数据列表失败!')}this.cateList = res.dataconsole.log(this.cateList)}, // 级联选择框 选中变化 触发async handleChange() {this.getParamsData()},handleInputConfirm() {console.log(ok)},// 删除对应的参数可选项handleClose (i, row) {row.attr_vals.splice(i, 1)this.saveAttrVals(row)},async getParamsData() {if (this.selectedCateKeys.length !== 3) {this.selectedCateKeys = []this.manyTableData=[]this.onlyTableData=[]return}console.log(this.selectedCateKeys)const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,{params: { sel: this.activeName },})if (res.meta.status !== 200) {return this.$message.error('获取参数列表失败!')}res.data.forEach((item) => {//   通过三元表达式判断attr_vals是否为空item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []// 控制文本框的显示与隐藏item.inputVisible = false// 文本框的输入值item.inputValue = ''})console.log(res.data)if (this.activeName === 'many') {this.manyTableData = res.data} else {this.onlyTableData = res.data}},handleTabsClick() {// console.log(this.activeName)this.getParamsData()},addDialogClosed() {this.$refs.addFromRef.resetFields()}, // 添加参数addParams() {this.$refs.addFromRef.validate(async (valid) => {if (!valid) returnconst { data: res } = await this.$http.post(`categories/${this.cateId}/attributes`,{attr_name: this.addFrom.attr_name,attr_sel: this.activeName,})if (res.meta.status !== 201) {return this.$message.error('添加参数失败!')}this.$message.success('添加参数成功!')this.addDialogVisible = falsethis.getParamsData()})},editDialogClosed() {this.$refs.editFromRef.resetFields()},showInput(row) {row.inputVisible = true// $nextTick方法的作用:当页面元素被重新渲染之后,才会至指定回调函数中的代码this.$nextTick(_ => {this.$refs.saveTagInput.$refs.input.focus()})},editParams() {this.$refs.editFromRef.validate(async (valid) => {if (!valid) returnconst { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${this.editFrom.attr_id}`,{attr_name: this.editFrom.attr_name,attr_sel: this.activeName,})if (res.meta.status !== 200) {return this.$message.error('修改参数失败!')}this.$message.success('修改参数成功!')this.getParamsData()this.editDialogVisible = false})},async showEditDialog(attr_id) {const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`,{params: { attr_sel: this.activeName },})if (res.meta.status !== 200) {return this.$message.error('获取分类失败!')}this.editFrom = res.datathis.editDialogVisible = true}, // 根据Id删除对应的参数项async removeParams(attr_id) {const confirmResult = await this.$confirm('此操作将永久删除该参数, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).catch((err) => err)if (confirmResult !== 'confirm') {return this.$message.info('已取消删除!')}const { data: res } = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`)if (res.meta.status !== 200) {return this.$message.error('删除参数失败!')}this.$message.success('删除参数成功!')this.getParamsData()},// 文本框失去焦点,或者按下Enter触发handleInputConfirm (row) {// 输入的内容为空时,清空if (row.inputValue.trim().length === 0) {row.inputValue = ''row.inputVisible = falsereturn}row.attr_vals.push(row.inputValue.trim())row.inputValue = ''row.inputVisible = false// 提交数据库,保存修改this.saveAttrVals(row)},// 将对attr_vals(Tag) 的操作 保存到数据库async saveAttrVals (row) {const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`,{attr_name: row.attr_name,attr_sel: row.attr_sel,attr_vals: row.attr_vals.join(' ')})if (res.meta.status !== 200) {return this.$message.error('修改参数项失败!')}this.$message.success('修改参数项成功!')},},
}
</script><style lang="less" scoped>
.cat_opt {margin: 15px 0px;
}
.el-cascader {width: 25%;
}
.el-tag {margin: 8px;
}
.input-new-tag {width: 90px;
}
</style>

List.vue

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>商品列表</el-breadcrumb-item></el-breadcrumb><!-- 卡片视图 --><el-card><el-row :gutter="20"><el-col :span="6"><el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList"><el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button></el-input></el-col><el-col :span="4"><el-button type="primary" @click="goAddPage">添加商品</el-button></el-col></el-row><!-- 表格数据 --><el-table :data="goodsList" border stripe><el-table-column type="index"></el-table-column><el-table-column label="商品名称" prop="goods_name"></el-table-column><el-table-column label="商品价格(元)" prop="goods_price" width="100px"></el-table-column><el-table-column label="商品重量" prop="goods_weight" width="70px"></el-table-column><el-table-column label="商品数量" prop="goods_number" width="70px"></el-table-column><el-table-column label="创建时间" prop="add_time" width="140px"><template slot-scope="scope">{{scope.row.add_time | dataFormat }}</template></el-table-column><el-table-column label="操作" width="130px"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="mini"></el-button><el-buttontype="danger"icon="el-icon-delete"size="mini"@click="removeById(scope.row.goods_id)"></el-button></template></el-table-column></el-table><!-- 分页区域 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pagenum":page-sizes="[5, 10, 15, 20]":page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"background></el-pagination></el-card></div>
</template><script>
export default {data () {return {queryInfo: {query: '',pagenum: 1,pagesize: 10},// 商品列表goodsList: [],// 商品总数total: 0}},created () {this.getGoodsList()},methods: {// 根据分页获取对应的商品列表async getGoodsList () {const { data: res } = await this.$http.get('goods', {params: this.queryInfo})if (res.meta.status !== 200) {return this.$message.error('获取商品列表失败!')}this.goodsList = res.data.goods//   console.log(this.goodsList)this.total = res.data.total},handleSizeChange (newSize) {this.queryInfo.pagesize = newSizethis.getGoodsList()},handleCurrentChange (newSize) {this.queryInfo.pagenum = newSizethis.getGoodsList()},// 通过Id删除商品async removeById (id) {const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).catch(err => err)if (confirmResult !== 'confirm') {return this.$message.info('已取消删除!')}const { data: res } = await this.$http.delete('goods/' + id)if (res.meta.status !== 200) {return this.$message.error('删除商品失败!')}this.$message.success('删除商品成功!')this.getGoodsList()},goAddPage () {this.$router.push('/goods/add')}}
}
</script><style lang="less" scoped>
</style>

Add.vue

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>添加商品</el-breadcrumb-item></el-breadcrumb><el-card><!-- 提示 --><el-alert title="添加商品信息" type="info" center show-icon :closable="false"></el-alert><!-- 步骤条 --><el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center><el-step title="基本信息"></el-step><el-step title="商品参数"></el-step><el-step title="商品属性"></el-step><el-step title="商品图片"></el-step><el-step title="商品内容"></el-step><el-step title="完成"></el-step></el-steps><el-form:model="addForm":rules="addFormRules"ref="addFormRef"label-width="100px"label-position="top"><el-tabsv-model="activeIndex":tab-position="'left'":before-leave="beforeTabLeave"@tab-click="tabClicked"><el-tab-pane label="基本信息" name="0"><el-form-item label="商品名称" prop="goods_name"><el-input v-model="addForm.goods_name"></el-input></el-form-item><el-form-item label="商品价格" prop="goods_price"><el-input v-model="addForm.goods_price" type="number"></el-input></el-form-item><el-form-item label="商品重量" prop="goods_weight"><el-input v-model="addForm.goods_weight" type="number"></el-input></el-form-item><el-form-item label="商品数量" prop="goods_number"><el-input v-model="addForm.goods_number" type="number"></el-input></el-form-item><el-form-item label="商品分类" prop="goods_cat"><el-cascaderexpand-trigger="hover"v-model="addForm.goods_cat":options="cateList":props="cateProps"@change="handleChange"></el-cascader></el-form-item></el-tab-pane><el-tab-pane label="商品参数" name="1"><!-- 渲染表单的Item项 --><el-form-itemv-for="item in manyTableData":key="item.attr_id":label="item.attr_name"><!-- 复选框组 --><el-checkbox-group v-model="item.attr_vals"><el-checkbox :label="cb" v-for="(cb, i) in item.attr_vals" :key="i" border></el-checkbox></el-checkbox-group></el-form-item></el-tab-pane><el-tab-pane label="商品属性" name="2"><el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id"><el-input v-model="item.attr_vals"></el-input></el-form-item></el-tab-pane><el-tab-pane label="商品图片" name="3"><!-- action: 图片上传的API接口地址 --><el-upload:action="uploadURL":on-preview="handlePreview":on-remove="handleRemove":headers="headerObj"list-type="picture":on-success="handleSuccess"><el-button size="small" type="primary">点击上传</el-button></el-upload></el-tab-pane><el-tab-pane label="商品内容" name="4"><!-- 富文本编辑器 --><quill-editor v-model="addForm.goods_introduce"></quill-editor><!-- 添加商品 --><el-button type="primary" class="btnAdd" @click="addGoods">添加商品</el-button></el-tab-pane></el-tabs></el-form></el-card><el-dialog title="图片预览" :visible.sync="previewDialogVisible" width="50%"><img :src="picPreviewPath" alt="" class="previewImg"></el-dialog></div>
</template><style lang="less" scoped>
.el-checkbox {margin: 0 8px 0 0 !important;
}
.previewImg{width: 100%;
}
.btnAdd{margin-top: 15px
}
</style><script>
import _ from 'lodash'
export default {data() {return {activeIndex: '0',addForm: {goods_name: '',goods_price: 0,goods_weight: 0,goods_number: 0,// 商品所属分类数组goods_cat: [],picPreviewPath:'',previewDialogVisible:false,// 图片的数组pics: [],// 商品详情描述goods_introduce: '',attrs: [],},cateList: [],// 图片上传地址uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',// 图片上传组件的请求对象headerObj: {Authorization: window.sessionStorage.getItem('token')},picPreviewPath: '',// 图片预览对话框previewDialogVisible: false,manyTableData: [],onlyTableData:[],cateProps: {// expandTrigger: 'hover',label: 'cat_name',value: 'cat_id',children: 'children',},addFormRules: {goods_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' },],goods_price: [{ required: true, message: '请输入商品价格', trigger: 'blur' },],goods_weight: [{ required: true, message: '请输入商品重量', trigger: 'blur' },],goods_number: [{ required: true, message: '请输入商品数量', trigger: 'blur' },],goods_cat: [{ required: true, message: '请选择商品分类', trigger: 'blur' },],},}},created() {this.getCateList()},computed: {getCateId() {if (this.addForm.goods_cat.length === 3) {return this.addForm.goods_cat[2]}return null},},methods: {// 获取商品分类数据列表async getCateList() {const { data: res } = await this.$http.get('categories')if (res.meta.status !== 200) {return this.$message.error('获取商品列表失败!')}this.cateList = res.dataconsole.log(this.cateList)}, // 级联选择器选中项变化时出发handleChange() {if (this.addForm.goods_cat.length !== 3) {this.addForm.goods_cat = []}},beforeTabLeave(activeName, odlActiveName) {// 未选中商品分类阻止Tab标签跳转if (odlActiveName === '0' && this.addForm.goods_cat.length !== 3) {this.$message.error('请先选择商品分类')return false}}, // Tab标签被选中时触发// Tab标签被选中时触发async tabClicked () {console.log(this.activeIndex)// 访问动态参数面板if (this.activeIndex === '1') {const { data: res } = await this.$http.get(`categories/${this.getCateId}/attributes`,{params: { sel: 'many' }})if (res.meta.status !== 200) {return this.$message.error('获取动态参数列表失败!')}res.data.forEach(item => {item.attr_vals =item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')})console.log(res.data)this.manyTableData = res.data} else if (this.activeIndex === '2') {const { data: res } = await this.$http.get(`categories/${this.getCateId}/attributes`,{params: { sel: 'only' }})if (res.meta.status !== 200) {return this.$message.error('获取动态参数列表失败!')}this.onlyTableData = res.data}},// 处理图片预览handlePreview (file) {this.picPreviewPath = file.response.data.urlthis.previewDialogVisible = true},// 处理移除图片的操作handleRemove (file) {// 1.获取将要删除图片的临时路径const filePath = file.response.data.tmp_path// 2.从pics数组中,找到图片对应的索引值const i = this.addForm.pics.findIndex(x => x.pic === filePath)// 3.调用splice方法,移除图片信息this.addForm.splice(i, 1)}, // 监听图片上传成功事件handleSuccess (response) {// 1.拼接得到一个图片信息对象 临时路径const picInfo = { pic: response.data.tmp_path }// 2.将图片信息对象,push到pics数组中this.addForm.pics.push(picInfo)console.log(this.addForm)},// 添加商品addGoods () {this.$refs.addFormRef.validate(async valid => {if (!valid) return this.$message.error('请填写必要的表单项!')// 发送请求前:需对提交的表单进行处理goods_cat attrs// this.addForm.goods_cat = this.addForm.goods_cat.join(',')// 以上写法不对:级联选择器绑定的对象goods_cat要求是数组对象// 解决办法: 包:lodash 方法(深拷贝):cloneDeep(boj)// 将this.addForm进行深拷贝const form = _.cloneDeep(this.addForm)form.goods_cat = form.goods_cat.join(',')// 处理动态参数this.manyTableData.forEach(item => {const newInfo = {attr_id: item.attr_id,attr_value: item.attr_vals.join(' ')}this.addForm.attrs.push(newInfo)})// 处理静态属性this.onlyTableData.forEach(item => {const newInfo = {attr_id: item.attr_id,attr_value: item.attr_vals}this.addForm.attrs.push(newInfo)})form.attrs = this.addForm.attrs// 发起请求添加商品// 商品名称必须是唯一的const { data: res } = await this.$http.post('goods', form)if (res.meta.status !== 201) return this.$message.error('添加商品失败!')this.$message.success('添加商品成功!')this.$router.push('/goods')})}},
}
</script>

Order.vue

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>订单管理</el-breadcrumb-item><el-breadcrumb-item>订单列表</el-breadcrumb-item></el-breadcrumb><!-- 卡片视图 --><el-card><el-row><el-col :span="6"><el-input placeholder="请输入内容"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col></el-row><!-- 订单列表 --><el-table :data="orderList" border stripe><el-table-column type="index" label="#"></el-table-column><el-table-column label="订单编号" prop="order_number"></el-table-column><el-table-column label="订单价格" prop="order_price"></el-table-column><el-table-column label="是否付款"><template slot-scope="scope"><el-tag type="danger" size="mini" v-if="scope.row.pay_status">未付款</el-tag><el-tag type="success" size="mini" v-else>已付款</el-tag></template></el-table-column><el-table-column label="是否发货" prop="is_send"></el-table-column><el-table-column label="下单时间" prop="create_time"></el-table-column><el-table-column label="操作"><template slot><el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog"></el-button><el-buttontype="success"size="mini"icon="el-icon-location"@click="showProgressDialog"></el-button></template></el-table-column></el-table><!-- 分页区域 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pagenum":page-sizes="[5, 10, 15, 20]":page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-card><!-- 编辑对话框 --><el-dialogtitle="修改地址":visible.sync="addressDialogVisible"width="50%"@close="addressDialogClosed"><el-form:model="addressForm":rules="addressFormRules"ref="addressFormRef"label-width="100px"><el-form-item label="省市区/县" prop="address1"><el-cascaderv-model="addressForm.address1":options="cityData":props="{ expandTrigger: 'hover' }"></el-cascader></el-form-item><el-form-item label="详细地址" prop="address2"><el-input v-model="addressForm.address2"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addressDialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog><!-- 展示物流进度对话框 --><el-dialog title="查看物流进度" :visible.sync="progressDialogVisible" width="50%"><!-- 时间线 --><el-timeline><el-timeline-itemv-for="(activity, index) in progressInfo":key="index":timestamp="activity.time">{{activity.context}}</el-timeline-item></el-timeline></el-dialog></div>
</template><script>
import cityData from './citydata.js'export default {data () {return {// 订单列表查询参数queryInfo: {query: '',pagenum: 1,pagesize: 10},total: 0,// 订单列表orderList: [],// 修改地址对话框addressDialogVisible: false,addressForm: {address1: [],address2: ''},addressFormRules: {address1: [{ required: true, message: '请选择省市区县', trigger: 'blur' }],address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]},cityData,// 物流进度对话框progressDialogVisible: false,// 物流进度progressInfo: []}},created () {this.getOrderList()},methods: {async getOrderList () {const { data: res } = await this.$http.get('orders', {params: this.queryInfo})if (res.meta.status !== 200) {return this.$message.error('获取订单列表失败!')}this.total = res.data.totalthis.orderList = res.data.goods},// 分页handleSizeChange (newSize) {this.queryInfo.pagesize = newSizethis.getOrderList()},handleCurrentChange (newSize) {this.queryInfo.pagenum = newSizethis.getOrderList()},showEditDialog () {this.addressDialogVisible = true},addressDialogClosed () {this.$refs.addressFormRef.resetFields()},async showProgressDialog () {// 供测试的物流单号:1106975712662const { data: res } = await this.$http.get('/kuaidi/1106975712662')if (res.meta.status !== 200) {return this.$message.error('获取物流进度失败!')}this.progressInfo = res.datathis.progressDialogVisible = true}}
}
</script><style lang="less" scoped>
.el-cascader {width: 100%;
}
</style>

Report.vue

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>数据统计</el-breadcrumb-item><el-breadcrumb-item>数据报表</el-breadcrumb-item></el-breadcrumb><!-- 卡片视图 --><el-card><!-- 2.为Echarts准备一个Dom --><div id="main" style="width: 750px;height:400px;"></div></el-card></div>
</template><style lang="less" scoped></style><script>
// 1.导入echarts
import echarts from 'echarts'
import _ from 'lodash'
export default {data(){return{}},created(){},// 此时,页面上的元素,已经被渲染完毕了async mounted () {// 3.基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'))const { data: res } = await this.$http.get('reports/type/1')if (res.meta.status !== 200) return this.$message('获取折线图数据失败!')// 4.准备数据项和配置项// 指定图表的配置项和数据// var option = {//   title: {//     text: 'ECharts 入门示例'//   },//   tooltip: {},//   legend: {//     data: ['销量']//   },//   xAxis: {//     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']//   },//   yAxis: {},//   series: [{//     name: '销量',//     type: 'bar',//     data: [5, 20, 36, 10, 10, 20]//   }]// }// 数据合并const result = _.merge(res.data, this.options)// 5.展示数据myChart.setOption(result)},
}
</script>

运行结果

前端学习(2035)vue之电商管理系统电商系统之形成折线图相关推荐

  1. Vue学习笔记: Vue + Element-ui搭建后台管理系统模板

    Vue学习笔记: Vue + Element-ui搭建后台管理系统模板 技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等 页面预览: ...

  2. 计算机毕业设计基于springboot+vue+elementUI的网吧管理系统(源码+系统+mysql数据库+Lw文档)

    项目介绍 随着我国的经济发展,人们的生活水平也有了一定程度的提高,对网络的要求也越来越高,很多家庭都有了自己的电脑,但是很多时候大家在家里玩电脑的时候找不到那种玩耍的气氛和氛围,这个时候大家就都选择了 ...

  3. 前端学习(1886)vue之电商管理系统电商系统之首页路由的重定向主页侧边栏路由链接的改造

    目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

  4. 前端学习(1885)vue之电商管理系统电商系统之首页路由的重定向

    目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

  5. 前端学习(1884)vue之电商管理系统电商系统之实现侧边栏的折叠和展开

    目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

  6. 前端学习(1883)vue之电商管理系统电商系统之每次只能打开一个菜单项并解决边框问题

    目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

  7. 前端学习(1882)vue之电商管理系统电商系统之设置字体颜色并添加标签

    目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

  8. 前端学习(1881)vue之电商管理系统电商系统之双层for循环渲染数据

    目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

  9. 前端学习(1880)vue之电商管理系统电商系统之获取左侧菜单数据

    目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...

最新文章

  1. 如何高效读论文?剑桥CS教授亲授“三遍论”:论文最多读三遍,有的放矢,步步深入...
  2. orcal 数据库密码修改(表密码,sys密码,system密码)
  3. 为什么创业者专注做一个产品最好?
  4. 全球及中国球形活性炭行业十四五发展潜力及投资价值分析报告2022-2027年
  5. AJAX请求和跨域请求详解(原生JS、Jquery)
  6. PHP各种数据类型转换
  7. 二叉树的建立与遍历完整代码_腾讯面试官这样问我二叉树,我刚好都会
  8. Java内部类实例测试及总结
  9. 收藏一些 JQuery 导航插件
  10. JQ实现全选、全不选、反选、偶数选中、奇数选中
  11. 数据库第四次作业:数据备份与还原
  12. Docker容器设置自动启动的方法
  13. 计算机组装流程是什么,组装电脑的步骤
  14. hosts文件位置在哪里_hosts文件怎么修复
  15. Python学习笔记——函数式方程
  16. android软件无法联网,关于android软件wifi联网无法使用的问题
  17. 垃圾回收的主要区域是堆,那方法区会回收吗?
  18. Mq的幂等性问题分析和基本处理
  19. 西安电子科大版《计算机操作系统》第四版共读——第十一章 多媒体操作系统
  20. 开启xmp1还是2_“吃鸡”新版本倒计时1天,2个经典模式升级回归,老玩家泪目了!...

热门文章

  1. (转)在Eclipse中用TODO标签管理任务(Task)
  2. (转)mysql基础命令
  3. Android系统服务-WindowManager
  4. 编译vo-aacenc遇到的问题
  5. html让a标签左右一样宽,button和a标签设置相同的css样式,但是宽度不同
  6. 计算机系统集成难点,企业MES实施中存在的难点及建议
  7. 电大计算机网络网考,电大计算机网络(本)学习周期01任务A_0009答案
  8. Wordpress基础:精简头部wp_head
  9. slf4j的简单用法以及与log4j的区别
  10. Linux进程状态解析之R、S、D、T、Z