springboot-vue项目前台2
api_account.js
import * as API from './'
export default {
//登录
login: params => {
return API.POST('login/', params)
},
//登出
logout: params => {
return API.GET('/api/v1/users/logout', params)
},
//修改个人信息
changeProfile: params => {
return API.PATCH('/api/v1/users/profile', params)
},
//查询获取user列表(通过page分页)
findList: params => {
return API.GET('account/all', params)
},
add: params => {
return API.POST('account/add', params)
},
findPermissionList:params => {
return API.POST('account/permissions', params)
},
}
api_device.js
import * as API from './'
export default {
//查询获取列表(通过page分页)
findList: params => {
return API.POST('deviceType/all', params)
},
//添加
add: params => {
return API.POST(`deviceType/add`, params)
},
/* //查询获取一条信息
findById: id => {
return API.GET(`/api/v1/books/${id}`)
},
//更新
update: (id, params) => {
return API.PUT(`/api/v1/books/${id}`, params)
},
//单个删除
remove: id => {
return API.DELETE(`/api/v1/books/${id}`)
},
//批量删除，传ids数组
removeBatch: (ids) => {
return API.DELETE(`/api/v1/books/batch/${ids}`)
},*/
//添加车型
addCM: params => {
return API.POST(`carmodel/add`, params)
},
delCM:id => {
return API.GET(`carmodel/delete/${id}`)
},
delDT:id => {
return API.GET(`deviceType/delete/${id}`)
},
}
api_file.js
import * as API from './'
import Vue from 'vue' export default { /* //查询获取列表(通过page分页)
findList: params => {
return API.GET('/api/v1/books', params)
}, //查询获取一条信息
findById: id => {
return API.GET(`/api/v1/books/${id}`)
}, add: params => {
return API.POST(`/api/v1/books`, params)
},
update: (id, params) => {
return API.PUT(`/api/v1/books/${id}`, params)
}, //单个删除
remove: id => {
return API.DELETE(`/api/v1/books/${id}`)
}, //批量删除，传ids数组
removeBatch: (ids) => {
return API.DELETE(`/api/v1/books/batch/${ids}`)
},*/ //新增方法
findTboxList: params => {
return API.POST('package/all', params)
},
addtboxForm: (params,config) => {
return API.POSTFORM(`package/add`, params,config)
},
modify:(params) => {
return API.POST(`package/modify`, params)
}
}
index.js
import axios from 'axios'
import {bus} from '../bus.js'
// Object.defineProperty(Vue.prototype, '$axios', { value: axios }); axios.defaults.withCredentials = true;
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//配置请求头 //添加一个请求拦截器
axios.interceptors.request.use(function (config) {
console.dir(config);
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
}); // 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
// alert("响应拦截器")
if (response.data && response.data.errcode) {
if (parseInt(response.data.errcode) === 40001) {
//未登录
bus.$emit('goto', '/login')
}
}
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
}); //基地址
let base = 'http://127.0.0.1:8086/'; //接口代理地址参见：config/index.js中的proxyTable配置 //通用方法
export const POST = (url, params) => {
return axios.post(`${base}${url}`, params).then(res => res.data).catch(function (error) {
alert("请求出现异常");
console.log(error);
// window.location.reload();
});
} export const GET = (url, params) => {
return axios.get(`${base}${url}`, {params: params}).then(res => res.data).catch(function (error) {
alert("请求出现异常");
console.log(error);
// window.location.reload();
});
} export const PUT = (url, params) => {
return axios.put(`${base}${url}`, params).then(res => res.data)
} export const DELETE = (url, params) => {
return axios.delete(`${base}${url}`, {params: params}).then(res => res.data)
} export const PATCH = (url, params) => {
return axios.patch(`${base}${url}`, params).then(res => res.data)
} export const POSTFORM = (url, params,config) => {
return axios.post(`${base}${url}`, params,config).then(res => res.data).catch(function (error) {
alert("请求出现异常");
console.log(error);
// window.location.reload();
});
}
util.js
/**
* Created by jerry on 2017/4/14.
*/
var SIGN_REGEXP = /([yMdhsm])(\1*)/g
var DEFAULT_PATTERN = 'yyyy-MM-dd'
function padding (s, len) {
let l = len - (s + '').length
for (var i = 0; i < l; i++) { s = '0' + s }
return s
}; export default {
getQueryStringByName: function (name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
var r = window.location.search.substr(1).match(reg)
var context = ''
if (r != null) { context = r[2] }
reg = null
r = null
return context === null || context === '' || context === 'undefined' ? '' : context
},
formatDate: { format: function (date, pattern) {
pattern = pattern || DEFAULT_PATTERN
return pattern.replace(SIGN_REGEXP, function ($0) {
switch ($0.charAt(0)) {
case 'y': return padding(date.getFullYear(), $0.length)
case 'M': return padding(date.getMonth() + 1, $0.length)
case 'd': return padding(date.getDate(), $0.length)
case 'w': return date.getDay() + 1
case 'h': return padding(date.getHours(), $0.length)
case 'm': return padding(date.getMinutes(), $0.length)
case 's': return padding(date.getSeconds(), $0.length)
}
})
},
parse: function (dateString, pattern) {
var matchs1 = pattern.match(SIGN_REGEXP)
var matchs2 = dateString.match(/(\d)+/g)
if (matchs1.length === matchs2.length) {
var _date = new Date(1970, 0, 1)
for (var i = 0; i < matchs1.length; i++) {
var _int = parseInt(matchs2[i])
var sign = matchs1[i]
switch (sign.charAt(0)) {
case 'y': _date.setFullYear(_int); break
case 'M': _date.setMonth(_int - 1); break
case 'd': _date.setDate(_int); break
case 'h': _date.setHours(_int); break
case 'm': _date.setMinutes(_int); break
case 's': _date.setSeconds(_int); break
}
}
return _date
}
return null
} } }
list.vue
<template>
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
</el-breadcrumb>
</el-col> <el-col :span="24" class="warp-main">
<h2>仄仄仄仄仄仄！</h2>
</el-col>
</el-row>
</template>
<script>
export default{
data(){
return {
msg: 'hello vue'
}
}
}
</script>
device.vue
<template>
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator="/">
<!-- <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item> -->
<el-breadcrumb-item>设备类型列表</el-breadcrumb-item>
</el-breadcrumb>
</el-col> <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中"> <el-button size="medium " @click="adddevice" type="primary" round> 新增设备类型 </el-button>
<!--列表-->
<el-table :data="alldevicetype" highlight-current-row @selection-change="selsChange" style="width: 100%;">
<el-table-column type="index" width="40"></el-table-column>
<el-table-column prop="dtid" width="40" v-if="false"></el-table-column>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="[设备描述]">
<span>{{ props.row.description }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="dtname" label="设备类型" width="300" sortable></el-table-column>
<el-table-column label="车型 车型操作" width="300" prop="carModels">
<!-- 数据的遍历 scope.row就代表数据的每一个对象-->
<template scope="scope" >
<p v-for="(item, index) in scope.row.carModels" :key="index" :label="item" style="font-size:16px;">
<span style="width:150px;display:block;float:left;">{{item.cname}}</span>
<el-button @click.native="delCarModel(item)" size="mini" type="danger" plain round>删除车型</el-button>
</p>
</template>
</el-table-column>
<el-table-column label="设备操作" width="400">
<template slot-scope="scope">
<el-button @click.native="addCarModel(scope.row)" size="mini" type="primary" plain round>新增车型</el-button>
<el-button @click.native="delDeviceType(scope.row)" size="mini" type="danger" round>删除设备类型</el-button>
</template>
</el-table-column>
</el-table> <!--新增设备类型界面-->
<el-dialog title="新增设备类型" :visible.sync="dtvisible" :close-on-click-modal="false">
<el-form :model="devicetype" label-width="80px" :rules="rules" ref="devicetypeForm">
<el-form-item label="设备名称" prop="name">
<el-input v-model="devicetype.name" auto-complete="off" placeholder="请输入设备名称"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="devicetype.description" auto-complete="off" placeholder="请输入设备描述"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="dtvisible = false">取消</el-button>
<el-button type="submit" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog> <!--新增车型界面-->
<el-dialog title="新增车型" :visible.sync="cmvisible" :close-on-click-modal="false">
<el-form :model="carModel" label-width="80px" :rules="carModelrules" ref="carModelForm">
<el-form-item label="车型名称" prop="name">
<el-input v-model="carModel.name" auto-complete="off" placeholder="请输入车型名称"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="cmvisible = false">取消</el-button>
<el-button type="submit" @click.native="addSubmit1" :loading="addLoading">提交</el-button>
</div>
</el-dialog>
</el-col>
</el-row>
</template>
<script>
let id = 1000;
import util from '../../common/util'
import API from '../../api/api_device'
import { mapState, mapActions } from 'vuex' export default {
data() {
return{
loading: false,
// devicetypes: [],
//新增设备类型
devicetype: {
name: '',
description: '',
},
dtvisible:false,
rules: {
name: [
{required: true, message: '输入设备名称', trigger: 'blur'}
],
description:[
{required: true, message: '输入设备描述', trigger: 'blur'}
],
},
sels: [], //列表勾选的列
addLoading: false, //转圈圈 //新增车型
cmvisible:false,
carModel:{
name:"",
devicetypeId:"",
},
carModelrules: {
name: [
{required: true, message: '输入车型名称', trigger: 'blur'}
],
},
}
}, methods: {
adddevice: function () {
this.dtvisible = true;
this.devicetype = {
name: '',
description: '',
};
},
//新增
addSubmit: function () {
let that = this;
this.$refs.devicetypeForm.validate((valid) => {
if (valid) {
let para = Object.assign({}, that.devicetype);//复制对象,有filelist数组对象
// console.log("para:",para);
API.add(para).then(function (result) {
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: result.mess, duration: 3000});
that.$refs['devicetypeForm'].resetFields();
that.dtvisible = false;
that.search();
} else {
that.$message.error({showClose: true, message: result.mess, duration: 3000});
that.$refs['devicetypeForm'].resetFields();
that.dtvisible = false;
that.search();
}
}).catch(function (error) {
that.loading = false;
that.search();
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}
});
},
search(){
this.loading = true;
let that = this;
API.findList().then(function (result) {
// console.log("result",result)
that.loading = false;
if (result && result.devicetypes) {
// that.devicetypes = result.devicetypes;
console.log("result.devicetypes:::",result.devicetypes);
that.dispatch_devicetypes(result.devicetypes);
// that.$store.commit('dispatch_devicetypes');
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
// that.search();
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
},
...mapActions([
'dispatch_devicetypes'
]),
addCarModel(row){
// console.log("addCarModelrow:",row);
this.cmvisible = true;
this.carModel = {
name: '',
devicetypeId: row.dtid,
};
},
selsChange: function (sels) {
this.sels = sels;
},
delCarModel(row){
// console.log("delCarModelrow:",row);
let that = this;
API.delCM(row.cmid).then(function (result) {
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: result.mess, duration: 3000});
that.search();
} else {
that.$message.error({showClose: true, message: result.mess, duration: 3000});
that.search();
}
}).catch(function (error) {
that.loading = false;
that.search();
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});;
},
addSubmit1: function () {
let that = this;
this.$refs.carModelForm.validate((valid) => {
if (valid) {
let para = Object.assign({}, that.carModel);//carModel是addCarModel方法里面的，也是表单里面的，跟表单绑定的。
// console.log("para:",para);
API.addCM(para).then(function (result) {
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: result.mess, duration: 3000});
that.$refs['carModelForm'].resetFields();
that.cmvisible = false;
that.search();
} else {
that.$message.error({showClose: true, message: result.mess, duration: 3000});
that.$refs['carModelForm'].resetFields();
that.cmvisible = false;
that.search();
}
}).catch(function (error) {
that.loading = false;
that.search();
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});;
}
});
},
delDeviceType: function(row){
// console.log("delDeviceType:",row);
let that = this;
API.delDT(row.dtid).then(function (result) {
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: result.mess, duration: 3000});
that.search();
} else {
that.$message.error({showClose: true, message: result.mess, duration: 3000});
that.search();
}
}).catch(function (error) {
that.loading = false;
that.search();
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
},
},
computed: {
alldevicetype:{
get:function(){
return this.$store.getters.getDevicetypes;
},
set:function(){
}
},
}, mounted() {
this.search();
}
};
</script> <style>
.demo-table-expand label {
font-weight: bold;
}
.el-table .warning-row {
background: oldlace;
} .el-table .success-row {
background: #f0f9eb;
}
</style>
avnlist.vue
<template>
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
<el-breadcrumb-item>升级包管理</el-breadcrumb-item>
<el-breadcrumb-item>tbox升级包列表</el-breadcrumb-item>
</el-breadcrumb>
</el-col> <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.name" placeholder="tbox文件名" @keyup.enter.native="handleSearch"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="handleSearch">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="showAddDialog">新增</el-button>
</el-form-item>
</el-form>
</el-col> <!--列表-->
<el-table :data="books" highlight-current-row @selection-change="selsChange"
style="width: 100%;">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="60"></el-table-column>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="[升级包简介]">
<span>{{ props.row.description }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="name" label="文件名" sortable></el-table-column>
<el-table-column prop="author" label="上传者" width="100" sortable></el-table-column>
<el-table-column prop="publishAt" label="上传日期" width="150" sortable></el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button size="small" @click="showEditDialog(scope.$index,scope.row)">编辑</el-button>
<el-button type="danger" @click="delbook(scope.$index,scope.row)" size="small">删除</el-button>
</template>
</el-table-column>
</el-table> <!--工具条-->
<el-col :span="24" class="toolbar">
<el-button type="danger" @click="batchDeletebook" :disabled="this.sels.length===0">批量删除</el-button>
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total"
style="float:right;">
</el-pagination>
</el-col> <el-dialog title="编辑" :visible.sync ="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
<el-form-item label="书名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="editForm.author" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="出版日期">
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.publishAt"></el-date-picker>
</el-form-item>
<el-form-item label="简介" prop="description">
<el-input type="textarea" v-model="editForm.description" :rows="8"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit">提交</el-button>
</div>
</el-dialog> <!--新增界面-->
<el-dialog title="新增" :visible.sync ="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="书名" prop="name">
<el-input v-model="addForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="addForm.author" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="出版日期">
<el-date-picker type="date" placeholder="选择日期" v-model="addForm.publishAt"></el-date-picker>
</el-form-item>
<el-form-item label="简介" prop="description">
<el-input type="textarea" v-model="addForm.description" :rows="8"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog> </el-col>
</el-row>
</template>
<script>
import util from '../../common/util'
import API from '../../api/api_file'; export default{
data(){
return {
filters: {
name: ''
},
books: [],
total: 0,
page: 1,
limit: 10,
loading: false,
sels: [], //列表选中列 //编辑相关数据
editFormVisible: false,//编辑界面是否显示
editFormRules: {
name: [
{required: true, message: '请输入书名', trigger: 'blur'}
],
author: [
{required: true, message: '请输入作者', trigger: 'blur'}
],
description: [
{required: true, message: '请输入简介', trigger: 'blur'}
]
},
editForm: {
id: 0,
name: '',
author: '',
publishAt: '',
description: ''
}, //新增相关数据
addFormVisible: false,//新增界面是否显示
addLoading: false,
addFormRules: {
name: [
{required: true, message: '请输入书名', trigger: 'blur'}
],
author: [
{required: true, message: '请输入作者', trigger: 'blur'}
],
description: [
{required: true, message: '请输入简介', trigger: 'blur'}
]
},
addForm: {
name: '',
author: '',
publishAt: '',
description: ''
}
}
},
methods: {
handleCurrentChange(val) {
this.page = val;
this.search();
},
handleSearch(){
this.total = 0;
this.page = 1;
this.search();
},
search(){
let that = this;
let params = {
page: that.page,
limit: 10,
name: that.filters.name
}; that.loading = true;
API.findList(params).then(function (result) {
that.loading = false;
if (result && result.books) {
that.total = result.total;
that.books = result.books;
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
},
selsChange: function (sels) {
this.sels = sels;
},
//删除
delbook: function (index, row) {
let that = this;
this.$confirm('确认删除该记录吗?', '提示', {type: 'warning'}).then(() => {
that.loading = true;
API.remove(row.id).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '删除成功', duration: 1500});
that.search();
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}).catch(() => {
});
},
//显示编辑界面
showEditDialog: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
//编辑
editSubmit: function () {
let that = this;
this.$refs.editForm.validate((valid) => {
if (valid) {
this.loading = true;
let para = Object.assign({}, this.editForm);
para.publishAt = (!para.publishAt || para.publishAt == '') ? '' : util.formatDate.format(new Date(para.publishAt), 'yyyy-MM-dd');
API.update(para.id, para).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '修改成功', duration: 2000});
that.$refs['editForm'].resetFields();
that.editFormVisible = false;
that.search();
} else {
that.$message.error({showClose: true, message: '修改失败', duration: 2000});
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}
});
},
showAddDialog: function () {
this.addFormVisible = true;
this.addForm = {
name: '',
author: '',
publishAt: '',
description: ''
};
},
//新增
addSubmit: function () {
let that = this;
this.$refs.addForm.validate((valid) => {
if (valid) {
that.loading = true;
let para = Object.assign({}, this.addForm);
para.publishAt = (!para.publishAt || para.publishAt === '') ? '' : util.formatDate.format(new Date(para.publishAt), 'yyyy-MM-dd');
API.add(para).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '新增成功', duration: 2000});
that.$refs['addForm'].resetFields();
that.addFormVisible = false;
that.search();
} else {
that.$message.error({showClose: true, message: '修改失败', duration: 2000});
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
}); }
});
},
//批量删除
batchDeletebook: function () {
let ids = this.sels.map(item => item.id).toString();
let that = this;
this.$confirm('确认删除选中记录吗？', '提示', {
type: 'warning'
}).then(() => {
that.loading = true;
API.removeBatch(ids).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '删除成功', duration: 1500});
that.search();
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}).catch(() => { });
}
},
mounted() {
this.handleSearch()
}
}
</script> <style>
.demo-table-expand label {
font-weight: bold;
}
</style>
ipclist.vue
<template>
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
<el-breadcrumb-item>升级包管理</el-breadcrumb-item>
<el-breadcrumb-item>tbox升级包列表</el-breadcrumb-item>
</el-breadcrumb>
</el-col> <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.name" placeholder="tbox文件名" @keyup.enter.native="handleSearch"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="handleSearch">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="showAddDialog">新增</el-button>
</el-form-item>
</el-form>
</el-col> <!--列表-->
<el-table :data="books" highlight-current-row @selection-change="selsChange"
style="width: 100%;">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="60"></el-table-column>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="[升级包简介]">
<span>{{ props.row.description }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="name" label="文件名" sortable></el-table-column>
<el-table-column prop="author" label="上传者" width="100" sortable></el-table-column>
<el-table-column prop="publishAt" label="上传日期" width="150" sortable></el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button size="small" @click="showEditDialog(scope.$index,scope.row)">编辑</el-button>
<el-button type="danger" @click="delbook(scope.$index,scope.row)" size="small">删除</el-button>
</template>
</el-table-column>
</el-table> <!--工具条-->
<el-col :span="24" class="toolbar">
<el-button type="danger" @click="batchDeletebook" :disabled="this.sels.length===0">批量删除</el-button>
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total"
style="float:right;">
</el-pagination>
</el-col> <el-dialog title="编辑" :visible.sync ="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
<el-form-item label="书名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="editForm.author" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="出版日期">
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.publishAt"></el-date-picker>
</el-form-item>
<el-form-item label="简介" prop="description">
<el-input type="textarea" v-model="editForm.description" :rows="8"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit">提交</el-button>
</div>
</el-dialog> <!--新增界面-->
<el-dialog title="新增" :visible.sync ="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
<el-form-item label="书名" prop="name">
<el-input v-model="addForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="addForm.author" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="出版日期">
<el-date-picker type="date" placeholder="选择日期" v-model="addForm.publishAt"></el-date-picker>
</el-form-item>
<el-form-item label="简介" prop="description">
<el-input type="textarea" v-model="addForm.description" :rows="8"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog> </el-col>
</el-row>
</template>
<script>
import util from '../../common/util'
import API from '../../api/api_file'; export default{
data(){
return {
filters: {
name: ''
},
books: [],
total: 0,
page: 1,
limit: 10,
loading: false,
sels: [], //列表选中列 //编辑相关数据
editFormVisible: false,//编辑界面是否显示
editFormRules: {
name: [
{required: true, message: '请输入书名', trigger: 'blur'}
],
author: [
{required: true, message: '请输入作者', trigger: 'blur'}
],
description: [
{required: true, message: '请输入简介', trigger: 'blur'}
]
},
editForm: {
id: 0,
name: '',
author: '',
publishAt: '',
description: ''
}, //新增相关数据
addFormVisible: false,//新增界面是否显示
addLoading: false,
addFormRules: {
name: [
{required: true, message: '请输入书名', trigger: 'blur'}
],
author: [
{required: true, message: '请输入作者', trigger: 'blur'}
],
description: [
{required: true, message: '请输入简介', trigger: 'blur'}
]
},
addForm: {
name: '',
author: '',
publishAt: '',
description: ''
}
}
},
methods: {
handleCurrentChange(val) {
this.page = val;
this.search();
},
handleSearch(){
this.total = 0;
this.page = 1;
this.search();
},
search(){
let that = this;
let params = {
page: that.page,
limit: 10,
name: that.filters.name
}; that.loading = true;
API.findList(params).then(function (result) {
that.loading = false;
if (result && result.books) {
that.total = result.total;
that.books = result.books;
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
},
selsChange: function (sels) {
this.sels = sels;
},
//删除
delbook: function (index, row) {
let that = this;
this.$confirm('确认删除该记录吗?', '提示', {type: 'warning'}).then(() => {
that.loading = true;
API.remove(row.id).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '删除成功', duration: 1500});
that.search();
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}).catch(() => {
});
},
//显示编辑界面
showEditDialog: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},
//编辑
editSubmit: function () {
let that = this;
this.$refs.editForm.validate((valid) => {
if (valid) {
this.loading = true;
let para = Object.assign({}, this.editForm);
para.publishAt = (!para.publishAt || para.publishAt == '') ? '' : util.formatDate.format(new Date(para.publishAt), 'yyyy-MM-dd');
API.update(para.id, para).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '修改成功', duration: 2000});
that.$refs['editForm'].resetFields();
that.editFormVisible = false;
that.search();
} else {
that.$message.error({showClose: true, message: '修改失败', duration: 2000});
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}
});
},
showAddDialog: function () {
this.addFormVisible = true;
this.addForm = {
name: '',
author: '',
publishAt: '',
description: ''
};
},
//新增
addSubmit: function () {
let that = this;
this.$refs.addForm.validate((valid) => {
if (valid) {
that.loading = true;
let para = Object.assign({}, this.addForm);
para.publishAt = (!para.publishAt || para.publishAt === '') ? '' : util.formatDate.format(new Date(para.publishAt), 'yyyy-MM-dd');
API.add(para).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '新增成功', duration: 2000});
that.$refs['addForm'].resetFields();
that.addFormVisible = false;
that.search();
} else {
that.$message.error({showClose: true, message: '修改失败', duration: 2000});
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
}); }
});
},
//批量删除
batchDeletebook: function () {
let ids = this.sels.map(item => item.id).toString();
let that = this;
this.$confirm('确认删除选中记录吗？', '提示', {
type: 'warning'
}).then(() => {
that.loading = true;
API.removeBatch(ids).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '删除成功', duration: 1500});
that.search();
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}).catch(() => { });
}
},
mounted() {
this.handleSearch()
}
}
</script> <style>
.demo-table-expand label {
font-weight: bold;
}
</style>
packagelist.vue
<template>
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator="/">
<!-- <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item> -->
<el-breadcrumb-item>升级包管理</el-breadcrumb-item>
<a href="http://localhost:8086/package/download">下载</a>
<!-- <el-breadcrumb-item>tbox升级包列表</el-breadcrumb-item> -->
</el-breadcrumb>
</el-col> <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<!-- <el-form-item>
<el-input v-model="filters.name" placeholder="tbox文件名" @keyup.enter.native="handleSearch"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="handleSearch">查询</el-button>
</el-form-item> -->
<!-- <el-form-item>
<template>
<el-select v-model="selectvalue" placeholder="所有设备类型" v-on:change="selectchange()">
<el-option
v-for="item in devicetypes" :key="item.dtid" :label="item.dtname" :value="item.dtid">
</el-option>
</el-select>
</template>
</el-form-item> -->
<el-form-item>
<el-button type="primary" @click="showAddDialog">上传升级包</el-button>
</el-form-item>
</el-form>
</el-col> <!--列表-->
<el-table :data="packages" highlight-current-row @selection-change="selsChange" style="width: 100%;">
<!-- <el-table-column type="selection" width="55"></el-table-column> -->
<el-table-column type="index" width="40"></el-table-column>
<el-table-column prop="pid" width="40" v-if="false"></el-table-column>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="[升级包changelog]">
<span>{{ props.row.description }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<!-- <el-table-column type="expand">
<template slot-scope="props1">
<el-form label-position="right" inline class="demo-table-expand">
<el-form-item label="[文件]">
<span>{{ props1.row.files }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column> -->
<el-table-column prop="deviceType" label="设备类型" width="100" sortable></el-table-column>
<el-table-column prop="carModel" label="车型" width="80" sortable></el-table-column>
<el-table-column prop="packageVersion" label="版本号" width="140" sortable></el-table-column>
<el-table-column prop="state" label="状态" width="110" sortable><!-- :formatter="fmtstate" -->
<template scope="scope">
<span v-if="scope.row.state=== 1" style="color: red">正在使用</span>
<span v-else >停用</span>
</template>
</el-table-column>
<el-table-column prop="updateTime" label="上传时间" width="200" sortable></el-table-column>
<el-table-column label="文件" width="480" prop="files">
<!-- 数据的遍历 scope.row就代表数据的每一个对象-->
<template scope="scope" >
<span v-for="(item, index) in scope.row.files" :key="index" :label="item">{{item.orignName}} (md5:{{item.md5}})<br></span>
</template>
</el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button v-if="scope.row.state=== 0" @click.native="editDialog(scope.row,1)" type="primary" size="small">启用</el-button>
<el-button v-if="scope.row.state=== 1" @click.native="editDialog(scope.row,0)" type="warning" size="small">停用</el-button>
<!-- <el-button type="warning" size="small" @click="showEditDialog(scope.$index,scope.row)">修改</el-button> -->
<el-button type="danger" @click.native="editDialog(scope.row,2)" size="small">删除</el-button>
<!-- <el-button type="danger" @click="delbook(scope.$index,scope.row)" size="small">删除</el-button> -->
</template>
</el-table-column>
</el-table> <!--工具条-->
<!-- <el-col :span="24" class="toolbar toolbartop">
<el-button type="danger" @click="batchDeletebook" :disabled="this.sels.length===0">批量删除</el-button>
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total"
style="float:right;">
</el-pagination>
</el-col> --> <!-- <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
<el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
<el-form-item label="文件名" prop="name">
<el-input v-model="editForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="上传者" prop="author">
<el-input v-model="editForm.author" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="上传日期">
<el-date-picker type="date" placeholder="选择日期" v-model="editForm.publishAt"></el-date-picker>
</el-form-item>
<el-form-item label="升级包说明" prop="description">
<el-input type="textarea" v-model="editForm.description" :rows="8"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit">提交</el-button>
</div>
</el-dialog> --> <!--新增界面-->
<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm" method="POST" id="uploadForm-tbox"><!-- id="uploadForm-tbox" enctype="multipart/form-data" -->
<!-- <el-form-item label="类型" prop="fileType" v-show="false">
<el-input v-model="addForm.fileType" auto-complete="off" value="tbox" ></el-input>
</el-form-item> -->
<el-form-item label="版本号" prop="fileVersion">
<el-input v-model="addForm.fileVersion" auto-complete="off" placeholder="请输入版本号"></el-input>
</el-form-item>
<el-form-item label="设备类型/车型" prop="selectedOptions" width="200px">
<!-- <el-input v-model="addForm.fileName" auto-complete="off"></el-input> -->
<el-cascader
expand-trigger="hover" :options="newDeviceType" v-model="addForm.selectedOptions" @change="handleChange">
</el-cascader>
</el-form-item>
<!--<el-form-item label="出版日期">
<el-date-picker type="date" placeholder="选择日期" v-model="addForm.publishAt"></el-date-picker>
</el-form-item>-->
<el-form-item label="是否启用" prop="state">
<el-radio v-model="addForm.state" label="1">是</el-radio>
<el-radio v-model="addForm.state" label="0">否</el-radio>
</el-form-item>
<el-form-item label="简介" prop="description">
<el-input type="textarea" v-model="addForm.description" :rows="8" placeholder="请输入版本修改日志"></el-input>
</el-form-item>
<el-form-item label="选择文件" >
<!-- <input type="file" @change="getFile($event)" multiple/> -->
<el-upload
class="upload"
action=""
ref="fileupload"
:on-preview="handlePreview"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemove"
:auto-upload = 'false'
:on-success = 'handleSuccess'
:on-change="fileChange"
name="tboxfile"
prop="file" multiple>
<el-button size="small" type="primary">点击上传</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
</el-upload>
<!-- <p :class="" v-if="names.length != 0">已选文件：</p> -->
<!-- <span v-for="val in names">
{{val}}
</span>
<el-button type="button" @click.native="removeFile" v-if="files.length != 0">移除</el-button> -->
</el-form-item>
<!-- <el-form-item label="files" prop="files">
<el-input v-model="addForm.fileList" auto-complete="off"></el-input>
</el-form-item> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="addFormVisible = false">取消</el-button>
<el-button type="submit" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog> <!-- 提示对话框 -->
<el-dialog
title="提示"
:visible.sync="notedialogVisible"
width="30%"
:before-close="handleClose">
<span>{{notemessage}}</span>
<span slot="footer" class="dialog-footer">
<el-button @click.native="cancelldialog">取 消</el-button>
<el-button type="primary" @click.native="notedialog">确 定</el-button>
</span>
</el-dialog>
</el-col>
</el-row>
</template>
<script>
import util from '../../common/util'
import API from '../../api/api_file';
import APIdevice from '../../api/api_device';
import axios from 'axios'
import { mapState, mapActions } from 'vuex' export default{
data(){
return {
filters: {
name: ''
},
/*file:"",
files: {},
names:{},
fileList:[],*/
// packages: [],
total: 0,
page: 1,
limit: 10,
loading: false,
sels: [], //列表选中列
radio: '',
//编辑相关数据
/*editFormVisible: false,//编辑界面是否显示
editFormRules: {
name: [
{required: true, message: '请输入文件名', trigger: 'blur'}
],
version: [
{required: true, message: '请输入版本号', trigger: 'blur'}
],
description: [
{required: true, message: '请输入简介', trigger: 'blur'}
]
},
editForm: {
id: 0,
name: '',
version: '',
publishAt: '',
description: ''
},*/
//编辑相关数据
//新增相关数据
addFormVisible: false,//新增界面是否显示
addLoading: false,
addFormRules: {
fileName: [
{required: true, message: '输入文件名', trigger: 'blur'}
],
fileVersion: [
{required: true, message: '输入版本号', trigger: 'blur'}
],
description: [
{required: true, message: '请输入升级包描述', trigger: 'blur'}
],
state: [
{required: true, message: '请输入状态', trigger: 'blur'}
],
file: [
{required: true, message: '请选择升级包', trigger: 'blur'}
],
selectedOptions:[
{required: true, message: '请选择设备类型/车型', trigger: 'blur'}
]
},
addForm: {
fileName: '',
fileVersion: '',
publishAt: '',
description: '',
fileList: [],
selectedOptions:[]
},
//新增相关数据
//启用相关数据
notedialogVisible:false,
notemessage:"",
arow:{},
filed:"",
//启用相关数据
//设备相关
// devicetypes: [],
// newDeviceType:[],
//设备相关
//下拉相关
allpackages:[],
selectvalue:"",
selectedOptions:[],
//下拉相关
}
},
methods: {
selectchange(command) {
// console.log(this.selectvalue);
},
handleChange(value){
console.log("value:",value);
console.log("this.selectedOptions:",this.selectedOptions);
},
/*fmtstate(row, column){
const arr = row[column.property];
if(arr == 1){
return "正在使用";
}else{
return "已停用";
}
},*/
handleCurrentChange(val) {
this.page = val;
this.search();
},
handleSearch(){
this.total = 0;
this.page = 1;
this.search();
},
...mapActions([
'dispatch_packages','dispatch_devicetypes'
]),
search(){
let that = this;
let params = {
page: that.page,
limit: 10,
name: that.filters.name
};
that.loading = true;
API.findTboxList(params).then(function (result) {
that.loading = false;
if (result && result.packages) {
that.dispatch_packages(result.packages);
// that.total = result.total;
// that.packages = result.packages;
// that.allpackages = result.packages;
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
}); APIdevice.findList().then(function (result) {
// console.log("devicetypesresult",result)
that.loading = false;
if (result && result.devicetypes) {
// console.log("result.devicetypes:",result.devicetypes);
// that.newDeviceType = result.devicetypes;
that.dispatch_devicetypes(result.devicetypes);
// console.log("newDeviceType:",newDeviceType);
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
that.search();
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
},
selsChange: function (sels) {
this.sels = sels;
},
//删除
delbook: function (index, row) {
let that = this;
this.$confirm('确认删除该记录吗?', '提示', {type: 'warning'}).then(() => {
that.loading = true;
API.remove(row.id).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '删除成功', duration: 1500});
that.search();
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}).catch(() => {
});
},
//显示编辑界面
/*showEditDialog: function (index, row) {
this.editFormVisible = true;
this.editForm = Object.assign({}, row);
},*/
//启用相关数据
editDialog: function (row,index) {
console.log("index, row",index, row);
this.filed = index;
let type = "";
if(index == 1){
type="启用：";
}else if(index == 0){
type="停用：";
}else if(index == 2){
type="删除：";
}
this.notemessage = "确定"+type+row.deviceType+"--"+row.carModel+"--"+row.packageVersion+"的升级包吗？";
this.notedialogVisible = true;
this.arow = Object.assign({}, row);
},
handleClose(done) {
/*this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});*/
this.notedialogVisible = false;
this.arow={};
this.filed="";
},
cancelldialog(){
this.notedialogVisible = false;
this.arow={};
this.filed="";
},
notedialog(){
let params = {
"pid": this.arow.pid,
"deviceType": this.arow.deviceType,
"carModel": this.arow.carModel,
"state": this.filed
};
let that = this;
API.modify(params).then(function (result) {
that.loading = true;
if (result && parseInt(result.errcode) === 0) {
// alert(456);
that.$message.success({showClose: true, message: '修改成功', duration: 2000});
/*that.$refs['editForm'].resetFields();
that.editFormVisible = false;*/
that.search();
} else {
that.$message.error({showClose: true, message: result.mess, duration: 2000});
that.search();
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
that.search();
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
that.search();
});
this.notedialogVisible = false;
this.arow={};
this.filed="";
},
//启用相关数据
//编辑
/*editSubmit: function () {
let that = this;
this.$refs.editForm.validate((valid) => {
if (valid) {
this.loading = true;
let para = Object.assign({}, this.editForm);
para.publishAt = (!para.publishAt || para.publishAt == '') ? '' : util.formatDate.format(new Date(para.publishAt), 'yyyy-MM-dd');
API.update(para.id, para).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '修改成功', duration: 2000});
that.$refs['editForm'].resetFields();
that.editFormVisible = false;
that.search();
} else {
that.$message.error({showClose: true, message: '修改失败', duration: 2000});
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}
});
},*/
showAddDialog: function () {
this.addFormVisible = true;
this.addForm = {
fileName: '',
fileVersion: '',
publishAt: '',
description: '',
fileList:[],
selectedOptions:[]
};
// alert("that.$refs['fileupload'].fileList:",this.$refs['addForm'].$refs['fileupload'].fileList);
// this.$refs['addForm'].$refs['fileupload'].fileList=[];
/*this.files = {};*/
},
//文件相关
beforeAvatarUpload(file, fileList) {
console.log("4444444444444");
/*console.log("beforeAvatarUpload")
console.log("beforeAvatarUploadfile:",file)
console.log("beforeAvatarUploadfileList:",fileList)
let Xls = file.name.split('.');
if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
return file
}else {
// this.$message.error('上传文件只能是 xls/xlsx 格式!')
return file
// return false
}*/
},
handleRemove(file, fileList) {
/*console.log("handleRemove:","file:",file,":fileList:",fileList);
for(var i=0;i<fileList.length;i++){
if(file.name == fileList[i].name){
fileList.splice(i--,1);
// break;
}
}*/
for(var i=0;i<this.addForm.fileList.length;i++){
if(file.name == this.addForm.fileList[i].name){
this.addForm.fileList.splice(i--,1);
// break;
}
}
console.log("handleRemove:","file:",file,":fileList:",fileList);
},
handlePreview(file) {
console.log("22222222222");
},
handleSuccess(res,file,fileList){
console.log("333333333333");
/*console.log("handleSuccess:",fileList)
if(res.code===20000){
this.$message({
message: '上传成功！',
type: 'success'
});
}else {
this.$message({
message: res.msg,
type: 'error'
});
}*/ },
fileChange(file, fileList){
//因为原生的选择文件标签获取的是FileList {0: File(8192), 1: File(18432), length: 2}一个object对象，
//后台需要的是File对象数组，原生的方法也要遍历这个object拼接成一个File数组
//el-upload的File对象的file.raw才是一个File对象，所以这里只截取el-upload里面的File对象，拼接成数组，后台@RequestParam("fileList[]") MultipartFile[] files接收
this.addForm.fileList.push(file.raw);//上传文件变化时将文件对象push进files数组
fileList = [];
/*this.fileList.push(file.raw);*/
},
/*getFile: function (event) {
this.files = event.target.files;
console.log('this.files：',this.files)
},
removeFile: function () {
},*/
//文件相关
//新增
addSubmit: function () {
let that = this;
this.$refs.addForm.validate((valid) => {
if (valid) {
that.loading = true;
// console.log("addForm",that.addForm)
let para = Object.assign({}, that.addForm);//复制对象,有filelist数组对象
// console.log("para",para)
para.publishAt = /*(!para.publishAt || para.publishAt === '') ? '' : */util.formatDate.format(new Date(), 'yyyy-MM-dd');
/*var form = document.getElementById("uploadForm-tbox");也可以直接提交表单
var formData = new FormData(form);*/
// console.log("para:",para);
let formData = new FormData();
for( var attr in para){ //排除文件列表属性
// console.log("attr1",attr)
if(attr != "fileList") {
// console.log("attr2",attr)
formData.append(attr, para[attr]);
}
}
for (var i = para.fileList.length - 1; i >= 0; i--) {
formData.append("fileList", para.fileList[i]); //文件列表只能这么添加，不能添加一个数组
}
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
API.addtboxForm(formData,config).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
alert(1);
console.log(result);
that.$message.success({showClose: true, message: result.mess, duration: 3000});
that.$refs['addForm'].resetFields();
that.addFormVisible = false;
that.$refs['fileupload'].fileList=[];
that.search();
// window.location.reload();
} else {
alert(2);
alert(result.errcode);
that.$message.error({showClose: true, message: result.mess, duration: 3000});
that.$refs['addForm'].resetFields();
that.addFormVisible = false;
that.$refs['fileupload'].fileList=[];
that.search();
// window.location.reload();
}
}, function (err) {
alert(3);
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 3000});
that.$refs['addForm'].resetFields();
that.$refs['fileupload'].fileList=[];
window.location.reload();
}).catch(function (error) {
alert(4);
that.loading = false;
// console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 3000});
that.$refs['addForm'].resetFields();
that.$refs['fileupload'].fileList=[];
window.location.reload();
});
/*let formData = new FormData();
for (var i = that.files.length - 1; i >= 0; i--) {
formData.append("fileList[]", that.files[i]);
}
*/ }
});
},
//批量删除
batchDeletebook: function () {
let ids = this.sels.map(item => item.id).toString();
let that = this;
this.$confirm('确认删除选中记录吗？', '提示', {
type: 'warning'
}).then(() => {
that.loading = true;
API.removeBatch(ids).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: '删除成功', duration: 1500});
that.search();
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
// console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}).catch(() => { });
},
/*changeDeviceType: function(obj){
console.log("obj",obj);
for(let i in obj) {
let ob = {};
ob.label = obj[i].dtname;
ob.value = obj[i].dtname;
ob.children = [];
for(let j in obj[i].carModels){
let oc = {};
oc.label = obj[i].carModels[j].cname;
oc.value = obj[i].carModels[j].cname;
ob.children.push(oc);
}
this.newDeviceType.push(ob);
}
console.log("changeDeviceType2",this.newDeviceType);
},*/
/*searchDeviceType:function(){
let that = this;
APIdevice.findList().then(function (result) {
console.log("devicetypesresult",result)
that.loading = false;
if (result && result.devicetypes) {
console.log("result.devicetypes:",result.devicetypes);
// that.newDeviceType = result.devicetypes;
that.changeDeviceType(result.devicetypes);
console.log("newDeviceType:",newDeviceType);
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
that.search();
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
},*/
},
mounted() {
this.handleSearch();
/*console.log("this.newDeviceType.length1",this.$store.getters.getDevicetypes);
if(this.$store.getters.getDevicetypes.length == 0){
this.searchDeviceType();
console.log("this.newDeviceType.length2",this.newDeviceType.length);
}else{
this.newDeviceType = this.$store.getters.getDevicetypes;
}*/
},
computed: {
newDeviceType:{
get:function(){
return this.$store.getters.getNewDeviceType;
},
set:function(){ }
},
packages:{
get:function(){
return this.$store.getters.getPackages;
},
set:function(){ }
},
},
}
</script> <style>
.demo-table-expand label {
font-weight: bold;
}
.el-table .warning-row {
background: oldlace;
} .el-table .success-row {
background: #f0f9eb;
}
.el-table--scrollable-x .el-table__body-wrapper{
overflow-x:hidden !important;
}
</style>
changepwd.vue
<template>
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator="/">
<!-- <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item> -->
<el-breadcrumb-item>设置</el-breadcrumb-item>
<el-breadcrumb-item>修改密码</el-breadcrumb-item>
</el-breadcrumb>
</el-col> <el-col :span="24" class="warp-main">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="原密码">
<el-input v-model="form.oldPwd"></el-input>
</el-form-item>
<el-form-item label="新密码">
<el-input v-model="form.newPwd"></el-input>
</el-form-item>
<el-form-item label="确认新密码">
<el-input v-model="form.confirmPwd"></el-input>
</el-form-item>
<el-form-item>
<el-button type="default" @click="handleChangepwd">提交</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</template>
<script>
export default{
data(){
return {
form: {
oldPwd: '',
newPwd: '',
confirmPwd: ''
}
}
},
methods: {
handleChangepwd() {
this.$message({message: "此功能只是让你看看，不会开发！", duration: 2000});
}
}
}
</script>
list.vue
<template>
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator="/">
<!-- <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item> -->
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
</el-col> <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<!-- <el-form-item>
<el-input v-model="filters.name" placeholder="用户名/姓名/昵称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
</el-form-item> -->
<el-form-item>
<el-button type="primary" @click="addAccount">添加账号</el-button>
</el-form-item>
</el-form>
</el-col> <!--列表-->
<el-table :data="accounts" highlight-current-row v-loading="loading" style="width: 100%;">
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="username" label="账号名" width="120" sortable>
</el-table-column>
<!-- <el-table-column prop="nickname" label="角色" width="120" :formatter="formatSex" sortable>
</el-table-column> -->
<el-table-column prop="permissions" label="权限" width="300" sortable>
<!-- 数据的遍历 scope.row就代表数据的每一个对象-->
<template scope="scope" >
<p v-for="(item, index) in scope.row.permissions" :key="index" :label="item" style="font-size:16px;">
<span style="width:150px;display:block;float:left;">{{item.description}}</span>
<!-- <el-button @click.native="delCarModel(item)" size="mini" type="danger" plain round>删除车型</el-button> -->
</p>
</template>
</el-table-column>
<!-- <el-table-column prop="email" label="邮箱" min-width="160" sortable>
</el-table-column>
<el-table-column prop="addr" label="地址" sortable>
</el-table-column> -->
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<el-button v-if="scope.row.state=== 1" @click.native="editDialog(scope.row)" type="warning" size="small">停用</el-button>
<el-button v-if="" @click.native="editPermission(scope.row)" type="primary" size="small">修改权限</el-button>
<!-- <el-button type="danger" @click.native="editDialog(scope.row,2)" size="small">删除</el-button> -->
<!-- <el-button type="danger" @click="delbook(scope.$index,scope.row)" size="small">删除</el-button> -->
</template>
</el-table-column>
</el-table> <!--新增账号界面-->
<el-dialog title="新增账号" :visible.sync="accountvisible" :close-on-click-modal="false">
<el-form :model="account" label-width="80px" :rules="accountrules" ref="accountForm">
<el-form-item label="账号名" prop="username">
<el-input v-model="account.username" auto-complete="off" placeholder="请输入账号名"></el-input>
</el-form-item>
<el-form-item label="账号密码" prop="password">
<el-input v-model="account.password" type="password" auto-complete="off" placeholder="请输入6-10位字母、数字、下划线密码"></el-input>
</el-form-item>
<el-form-item label="重复密码" prop="password1">
<el-input v-model="account.password1" type="password" auto-complete="off" placeholder="请输入重复密码"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="accountvisible = false">取消</el-button>
<el-button type="submit" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog> <!--修改权限界面-->
<el-dialog title="修改权限" :visible.sync="permissionvisible" :close-on-click-modal="false">
<el-form :model="account" label-width="80px" :rules="accountrules" ref="accountForm">
<template>
<el-transfer v-model="account_permission" :data="permissions"></el-transfer>
</template>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="permissionvisible = false">取消</el-button>
<el-button type="submit" @click.native="addSubmit" :loading="addLoading">提交</el-button>
</div>
</el-dialog> </el-col>
</el-row>
</template> <script>
import API from '../../api/api_account';
import md5 from 'js-md5';
import { mapState, mapActions } from 'vuex'; export default {
data() {
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.account.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
filters: {
name: ''
},
loading: false,
// accounts: [],
total: 0,
page: 1,
limit: 10,
loading: false,
accountvisible:false,
addLoading: false, //转圈圈
account: {
username: '',
password: '',
password1:''
},
accountrules: {
username: [
{required: true, message: '请输入账号名', trigger: 'blur'},
{pattern: /^(\w){3,10}$/,message: '只能输入3-10个字母、数字、下划线'}
],
password:[
{required: true, message: '请输入账号密码', trigger: 'blur'},
{pattern: /^(\w){6,10}$/,message: '只能输入6-10个字母、数字、下划线'}
],
password1:[
{validator: validatePass2, trigger: 'blur'}
],
},
permissionvisible:false,
// value1: [1, 4], }
},
methods: {
editPermission(row){
console.log("row:", row);
this.permissionvisible = true;
},
addAccount(){
this.accountvisible = true;
this.account = {
username:'',
password:'',
password1: '',
};
},
//新增
addSubmit: function () {
let that = this;
this.$refs.accountForm.validate((valid) => {
if (valid) {
let para = Object.assign({}, that.account);//复制对象,有filelist数组对象
console.log("para:",para);
para.password = md5(para.password);
console.log("para:",para);
API.add(para).then(function (result) {
if (result && parseInt(result.errcode) === 0) {
that.$message.success({showClose: true, message: result.mess, duration: 3000});
that.$refs['accountForm'].resetFields();
that.accountvisible = false;
that.search();
} else {
that.$message.error({showClose: true, message: result.mess, duration: 3000});
that.$refs['accountForm'].resetFields();
that.accountvisible = false;
that.search();
}
}).catch(function (error) {
that.loading = false;
that.search();
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}
});
}, //性别显示转换
formatSex: function (row, column) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
handleCurrentChange(val) {
this.page = val;
this.search();
},
handleSearch(){
this.total = 0;
this.page = 1;
this.search();
},
//获取用户列表
search: function () {
let that = this;
let params = {
page: that.page,
limit: 10,
name: that.filters.name
}; that.loading = true;
API.findList(params).then(function (result) {
that.loading = false;
if (result && result.accounts) {
// that.total = result.total;
// that.accounts = result.accounts;
// console.log("result.accounts:",result.accounts);
that.dispatch_accounts(result.accounts);
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
}); API.findPermissionList().then(function (result) {
that.loading = false;
if (result && result.permissions) {
// that.total = result.total;
// that.accounts = result.accounts;
// console.log("result.permissions:",result.permissions);
that.dispatch_permission(result.permissions);
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
}); },
...mapActions([
'dispatch_accounts','dispatch_permission'
]),
},
computed: {
accounts:{
get:function(){
return this.$store.getters.getAccounts;
},
set:function(){
}
},
permissions:{
get:function(){
return this.$store.getters.getNewpermissions;
},
set:function(){
}
},
account_permission:{
get:function(){
return this.accounts.permissions;
},
set:function(){
}
},
},
mounted() {
this.handleSearch()
}
}
</script> <style scoped> </style>
profile.vue
<template>
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum" :loading="loading">
<el-breadcrumb separator="/">
<!-- <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item> -->
<el-breadcrumb-item>设置</el-breadcrumb-item>
<el-breadcrumb-item>个人信息</el-breadcrumb-item>
</el-breadcrumb>
</el-col> <el-col :span="24" class="warp-main">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="账号">
<el-input v-model="form.useranme" disabled></el-input>
</el-form-item>
<el-form-item prop="nickname" label="昵称">
<el-input v-model="form.nickname"></el-input>
</el-form-item>
<el-form-item prop="name" label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop="email" label="邮箱">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSaveProfile">修改并保存</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</template> <script>
import API from '../../api/api_account';
import {bus} from '../../bus.js' export default {
data() {
return {
loading: false,
form: {
useranme: '',
nickname: '',
name: '',
email: ''
},
rules: {
nickname: [
{required: true, message: '请输入昵称', trigger: 'blur'}
],
email: [
{required: true, message: '请输入邮箱', trigger: 'blur'},
{type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
]
},
}
},
methods: {
handleSaveProfile() {
let that = this;
that.$refs.form.validate((valid) => {
if (valid) {
that.loading = true;
let args = {
nickname: that.form.nickname,
name: that.form.name,
email: that.form.email
};
API.changeProfile(args).then(function (result) {
that.loading = false;
if (result && parseInt(result.errcode) === 0) {
//修改成功
let user = JSON.parse(window.localStorage.getItem('access-user'));
user.nickname = that.form.nickname;
user.name = that.form.name;
user.email = that.form.email;
localStorage.setItem('access-user', JSON.stringify(user));
bus.$emit('setNickName', that.form.nickname);
that.$message.success({showClose: true, message: '修改成功', duration: 2000});
} else {
that.$message.error({showClose: true, message: result.errmsg, duration: 2000});
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}
});
}
},
mounted() {
let user = localStorage.getItem('access-user');
if (user) {
user = JSON.parse(user);
this.form.useranme = user.username;
this.form.nickname = user.nickname || '';
this.form.email = user.email || '';
this.form.name = user.name || '';
}
}
}
</script>
Home.vue
<template>
<el-row class="container">
<!--头部-->
<el-col :span="24" class="topbar-wrap">
<div class="topbar-logo topbar-btn">
<a href="/"><img src="../assets/logo.png" style="padding-left:8px;"></a>
</div>
<div class="topbar-logos" v-show="!collapsed">
<a href="/"><img src="../assets/logotxt.png" width="120px"></a>
</div>
<div class="topbar-title">
<span style="font-size: 18px;color: #fff;">远程升级平台后台管理系统</span>
</div>
<div class="topbar-account topbar-btn">
<el-dropdown trigger="click">
<span class="el-dropdown-link userinfo-inner"><i class="iconfont icon-user"></i> {{nickname}} <i
class="iconfont icon-down"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<div @click="jumpTo('/user/profile')"><span style="color: #555;font-size: 14px;">个人信息</span></div>
</el-dropdown-item>
<el-dropdown-item>
<div @click="jumpTo('/user/changepwd')"><span style="color: #555;font-size: 14px;">修改密码</span></div>
</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-col> <!--中间-->
<el-col :span="24" class="main">
<!--左侧导航-->
<aside :class="{showSidebar:!collapsed}">
<!--展开大折叠开关-->
<div class="menu-toggle" @click.prevent="collapse">
<i class="iconfont icon-menufold" v-show="!collapsed"></i>
<i class="iconfont icon-menuunfold" v-show="collapsed"></i>
</div>
<!--导航菜单-->
<el-menu :default-active="defaultActiveIndex" router :collapse="collapsed" @select="handleSelect">
<template v-for="(item,index) in $router.options.routes" v-if="item.menuShow">
<el-submenu v-if="!item.leaf" :index="index+''">
<!--主菜单-->
<template slot="title"><i :class="item.iconCls"></i><span slot="title">{{item.name}}</span></template>
<!--子菜单-->
<el-menu-item v-for="term in item.children" :key="term.path" :index="term.path" v-if="term.menuShow"
:class="$route.path==term.path?'is-active':''">
<!--"$route.path==term.path?'is-active':''" 菜单栏高亮-->
<i :class="term.iconCls"></i><span slot="title">{{term.name}}</span>
</el-menu-item>
</el-submenu>
<el-menu-item v-else-if="item.leaf&&item.children&&item.children.length" :index="item.children[0].path"
:class="$route.path==item.children[0].path?'is-active':''">
<i :class="item.iconCls"></i><span slot="title">{{item.children[0].name}}</span>
</el-menu-item>
</template>
</el-menu>
</aside> <!--右侧内容区-->
<section class="content-container">
<div class="grid-content bg-purple-light">
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</el-col> <!--<el-col :span="14" class="footbar-wrap">
<footer class="footer">
<hc-footer></hc-footer>
</footer>
</el-col>--> </div>
</section>
</el-col> <!-- <el-col :span="24" style="margin-down:0px;">
<HcFooter></HcFooter>
</el-col> -->
</el-row>
</template> <script>
import {bus} from '../bus.js'
import API from '../api/api_account';
import HcFooter from '@/components/Footer' export default {
name: 'home',
components: {HcFooter},
created(){//修改账号时触发事件
bus.$on('setNickName', (text) => {
this.nickname = text;
})
bus.$on('goto', (url) => {
if (url === "/login") {
localStorage.removeItem('access-user');
}
this.$router.push(url);
})
},
data () {
return {
defaultActiveIndex: "0",
nickname: '',
collapsed: false,
}
},
methods: {
handleSelect(index){
this.defaultActiveIndex = index;
},
//折叠导航栏
collapse: function () {
this.collapsed = !this.collapsed;
},
jumpTo(url){
this.defaultActiveIndex = url;
this.$router.push(url); //用go刷新
},
logout(){
let that = this;
this.$confirm('确认退出吗?', '提示', {
confirmButtonClass: 'el-button--warning'
}).then(() => {
//确认
that.loading = true;
API.logout().then(function (result) {
that.loading = false;
localStorage.removeItem('access-user');
that.$router.go('/login'); //用go刷新
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}).catch(() => {});
}
},
mounted() {
let user = localStorage.getItem('access-user');
if (user) {
user = JSON.parse(user);
this.nickname = user.nickname || '';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.container {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%; .topbar-wrap {
height: 50px;
line-height: 50px;
background: #373d41;
padding: 0px; .topbar-btn {
color: #fff;
}
/*.topbar-btn:hover {*/
/*background-color: #4A5064;*/
/*}*/
.topbar-logo {
float: left;
width: 59px;
line-height: 26px;
}
.topbar-logos {
float: left;
width: 120px;
line-height: 26px;
}
.topbar-logo img, .topbar-logos img {
height: 40px;
margin-top: 5px;
margin-left: 2px;
}
.topbar-title {
float: left;
text-align: left;
width: 200px;
padding-left: 10px;
border-left: 1px solid #000;
}
.topbar-account {
float: right;
padding-right: 12px;
}
.userinfo-inner {
cursor: pointer;
color: #fff;
padding-left: 10px;
}
}
.main {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 50px;
bottom: 0px;
overflow: hidden;
} aside {
min-width: 50px;
background: #333744;
&::-webkit-scrollbar {
display: none;
} &.showSidebar {
overflow-x: hidden;
overflow-y: auto;
} .el-menu {
height: 100%; /*写给不支持calc()的浏览器*/
height: -moz-calc(100% - 80px);
height: -webkit-calc(100% - 80px);
height: calc(100% - 80px);
border-radius: 0px;
background-color: #333744;
border-right: 0px;
} .el-submenu .el-menu-item {
min-width: 60px;
}
.el-menu {
width: 180px;
}
.el-menu--collapse {
width: 60px;
} .el-menu .el-menu-item, .el-submenu .el-submenu__title {
height: 46px;
line-height: 46px;
} .el-menu-item:hover, .el-submenu .el-menu-item:hover, .el-submenu__title:hover {
background-color: #7ed2df;
}
} .menu-toggle {
background: #4A5064;
text-align: center;
color: white;
height: 26px;
line-height: 30px;
} .content-container {
background: #fff;
flex: 1;
overflow-y: auto;
padding: 10px;
padding-bottom: 1px; .content-wrapper {
background-color: #fff;
box-sizing: border-box;
} .footbar-wrap{
bottom: 0px;
padding-bottom: 0px;
}
}
}
</style>
Index.vue
<template>
<el-row class="warp">
<el-col :span="24" class="warp-breadcrum">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
</el-breadcrumb>
</el-col> <el-col :span="24" class="warp-main">
<section class="chart-container">
<el-row>
<el-col :span="8">
<el-card :body-style="{ padding: '0px' }">
<img src="../assets/images/forest.png" class="image">
<div style="padding: 14px;">
<span>行行出状元，处处有金杯</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card :body-style="{ padding: '0px' }">
<img src="../assets/images/sunrise.png" class="image">
<div style="padding: 14px;">
<span>华晨金杯750</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card :body-style="{ padding: '0px' }">
<img src="../assets/images/sunshine.png" class="image">
<div style="padding: 14px;">
<span>斯威汽车</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
</div>
</div>
</el-card>
</el-col>
<el-col :span="12">
<div id="chartColumn" style="width:100%; height:400px;"></div>
</el-col>
<el-col :span="12">
<div id="chartBar" style="width:100%; height:400px;"></div>
</el-col>
<el-col :span="12">
<div id="chartLine" style="width:100%; height:400px;"></div>
</el-col>
<el-col :span="12">
<div id="chartPie" style="width:100%; height:400px;"></div>
</el-col>
<el-col :span="24">
<a href="http://echarts.baidu.com/examples.html" target="_blank" style="float: right;">more>></a>
</el-col>
</el-row>
</section> </el-col>
</el-row>
</template>
<style>
.time {
font-size: 13px;
color: #999;
} .bottom {
margin-top: 13px;
line-height: 12px;
} .image {
width: 100%;
display: block;
} .clearfix:before,
.clearfix:after {
display: table;
content: "";
} .clearfix:after {
clear: both
} .chart-container {
width: 100%;
}
.chart-container .el-col {
padding: 30px 20px;
}
</style> <script>
import echarts from 'echarts' export default {
data() {
return {
currentDate: new Date(),
chartColumn: null,
chartBar: null,
chartLine: null,
chartPie: null
};
},
mounted: function () {
var _this = this;
//基于准备好的dom，初始化echarts实例
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
this.chartBar = echarts.init(document.getElementById('chartBar'));
this.chartLine = echarts.init(document.getElementById('chartLine'));
this.chartPie = echarts.init(document.getElementById('chartPie')); this.chartColumn.setOption({
title: { text: '销量柱状图' },
tooltip: {},
xAxis: {
data: ["鑫源小海狮", "鑫源s402", "鑫源x7", "鑫源摩托", "鑫源头盔", "鑫源农机"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [50000, 20009, 36000, 10000, 10000, 20000]
}]
}); this.chartBar.setOption({
title: {
text: '条状图',
subtext: '数据来自网络'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2011年', '2012年']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['鑫源小海狮', '鑫源s402', '鑫源x7', '鑫源摩托', '鑫源头盔', '鑫源总数(万)']
},
series: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012年',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
}); this.chartLine.setOption({
title: {
text: '线状图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['鑫源小海狮', '鑫源s402', '鑫源x7']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '鑫源小海狮',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '鑫源s402',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '鑫源x7',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}); this.chartPie.setOption({
title: {
text: '饼状图',
subtext: '数据来自网络',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['鑫源小海狮', '鑫源s402', '鑫源x7', '鑫源摩托', '鑫源头盔']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '鑫源小海狮' },
{ value: 310, name: '鑫源s402' },
{ value: 234, name: '鑫源x7' },
{ value: 135, name: '鑫源摩托' },
{ value: 1548, name: '鑫源头盔' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
}
}
</script>
Login.vue
<template>
<el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"
class="demo-ruleForm login-container">
<h3 class="title">管理员登录</h3>
<el-form-item prop="username">
<el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<!--<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>-->
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :loading="loading">登录</el-button>
</el-form-item>
</el-form>
</template> <script>
import API from '../api/api_account'; export default {
data() {
return {
loading: false,
account: {
username: 'admin',
pwd: '123456'
},
rules: {
username: [
{required: true, message: '请输入账号', trigger: 'blur'},
//{ validator: validaePass }
],
pwd: [
{required: true, message: '请输入密码', trigger: 'blur'},
//{ validator: validaePass2 }
]
},
checked: true
};
},
methods: {
handleLogin() {
let that = this;
this.$refs.AccountFrom.validate((valid) => {
if (valid) {
this.loading = true;
let loginParams = {username: this.account.username, pwd: this.account.pwd};
API.login(loginParams).then(function (result) {
that.loading = false;
if (result && result.id) {
localStorage.setItem('access-user', JSON.stringify(result));
// that.$store.commit('SET_ROUTERS', user.permissions)
// that.$router.addRoutes(that.$store.getters.addRouters);
// that.$router.options.routes = that.$store.getters.routers;
that.$router.push({path: '/'});
} else {
that.$message.error({showClose: true, message: result.errmsg || '登录失败', duration: 2000});
}
}, function (err) {
that.loading = false;
that.$message.error({showClose: true, message: err.toString(), duration: 2000});
}).catch(function (error) {
that.loading = false;
console.log(error);
that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
});
}
});
}
}
}
</script>
<style>
body {
background: #DFE9FB;
}
</style>
<style lang="scss" scoped>
.login-container {
/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin: 160px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6; background: -ms-linear-gradient(top, #ace, #00C1DE); /* IE 10 */
background: -moz-linear-gradient(top, #ace, #00C1DE); /*火狐*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ace), to(#00C1DE)); /*谷歌*/
background: -webkit-linear-gradient(top, #ace, #00C1DE); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top,#ace, #00C1DE); /*Opera 11.10+*/ .title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
.remember {
margin: 0px 0px 35px 0px;
}
}
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import index from '@/components/Index' import packageList from '@/components/filelist/packageList'
import avnList from '@/components/filelist/avnlist'
import ipcList from '@/components/filelist/ipclist' import bookCategoryList from '@/components/bookcategory/list'
import UserList from '@/components/user/list'
import UserChangePwd from '@/components/user/changepwd'
import UserProbook from '@/components/user/profile' import Device from '@/components/device/device' import store from '@/store/' // 懒加载方式，当路由被访问的时候才加载对应组件
//箭头函数是省略了function函数名和return,resolve是形参，require是函数体并且是return。
const Login = resolve => require(['@/components/Login'], resolve) Vue.use(Router) let router = new Router({
// mode: 'history',
routes: [ //根据这个遍历得到左边菜单
{
path: '/login',
name: '登录',
component: Login
},
/*{
path: '/',
name: 'home',
component: Home,
redirect: '/index', //加载右边
leaf: true, // 只有一个节点
menuShow: true,
iconCls: 'iconfont icon-home', // 图标样式class
children: [
{
path: '/index',
component: index,
name: '鑫源简介',
menuShow: true
} ]
},*/
/*{
path: '/',
component: Home,
name: '升级包管理',
menuShow: true,
iconCls: 'iconfont icon-books',
children: [
{
path: '/filelist/tboxlist',
component: tboxList,
name: 'tbox升级包列表',
menuShow: true //true则Home.vue会加载这个条目，否则不加载
},
{
path: '/filelist/avnlist',
component: avnList,
name: 'AVN升级包列表',
menuShow: true
},
{
path: '/filelist/ipclist',
component: ipcList,
name: 'IPC升级包列表',
menuShow: true
}
]
},*/
{
path: '/',
component: Home,
name: '升级包管理',
menuShow: true,
leaf: true, // 只有一个节点
redirect: '/filelist/packagelist', //加载右边
iconCls: 'iconfont icon-users', // 图标样式class
children: [
{
path: '/filelist/packagelist',
component: packageList,
name: '升级包管理',
menuShow: true
}
]
},
{
path: '/',
component: Home,
name: '设备类型管理',
menuShow: true,
leaf: true, // 只有一个节点
iconCls: 'iconfont icon-users', // 图标样式class
children: [
{
path: '/device/list',
component: Device,
name: '设备类型列表',
menuShow: true
}
]
},
{
path: '/',
component: Home,
name: '用户管理',
menuShow: true,
leaf: true, // 只有一个节点
iconCls: 'iconfont icon-users', // 图标样式class
children: [
{
path: '/user/list',
component: UserList,
name: '用户列表',
menuShow: true
}
]
},
{
path: '/',
component: Home,
name: '设置',
menuShow: true,
iconCls: 'iconfont icon-setting1',
children: [
{
path: '/user/probook',
component: UserProbook,
name: '个人信息',
menuShow: true
},
{
path: '/user/changepwd',
component: UserChangePwd,
name: '修改密码',
menuShow: true
}
]
},
]
}) router.beforeEach((to, from, next) => {//每次路由都会走
/*console.log('to:' + to.path)
console.log('from:' + from.path)
console.log('next:' + next.path)*/
/*if(to.path.startsWith('/filelist/packagelist')){
store：Store {_committing: false, _actions: {…}, _actionSubscribers:
Array(0), _mutations: {…}, _wrappedGetters: {…}, …}
if(store.getters.getDevicetypes.length = 0)
console.log("store.getters.getDevicetypes;",store.getters.getDevicetypes);
}*/
if (to.path.startsWith('/login')) {
window.localStorage.removeItem('access-user')
next()
} else {
let user = JSON.parse(window.localStorage.getItem('access-user'))
if (!user) {
next({path: '/login'})
} else {
next()
} }
}) export default router
actions.js
// 页面调用action，action调用mutation来设置数据state
import * as types from './mutations_types'; export default {
dispatch_devicetypes:({
commit
}, obj) => {
commit(types.ALL_DEVICETYPES, obj);
},
dispatch_packages:({
commit
}, obj) => {
commit(types.ALL_PACKAGES, obj);
},
dispatch_accounts:({
commit
}, obj) => {
commit(types.ALL_ACCOUNTS, obj);
},
dispatch_permission:({
commit
}, obj) => {
commit(types.ALL_PERMISSION, obj);
}, /*update_cur_shop_status: ({
commit
}, obj) => {
commit(types.UPDATE_CUR_SHOP_STATUS, obj);
},
create_db: ({
commit
}, {
shop
}) => {
commit(types.CREATE_DB, shop);
commit(types.UPDATE_LOCAL);
},
add_db: ({
commit
}) => {
commit(types.ADD_DB);
commit(types.UPDATE_LOCAL);
},*/
};
getters.js
/*getter是state的get方法，没有get页面就获取不到数据 获取页面:
import {mapGetters,mapActions} from 'vuex'
<h1>{{count}}</h1>
computed:mapGetters([
'count'
]), store.js: var state = {
count:6
},
var getters={
count(state){
return state.count
}
} 改变数据页面：
<button @click="increment">增加</button>
methods:mapActions([
//该 increment 来自 store.js 中导出的 actions 和 mutations 中的 increment
'increment',
]) 先发给action:
const actions ={
// ({commit,state}) 这种写法是 es6 中的对象解构
increment({commit,state}){
//提交一个名为 increment 的变化，名字可自定义，可以认为是类型名，与下方 mutations 中的 increment 对应
//commit 提交变化，修改数据的唯一方式就是显式的提交 mutations
commit('increment')
}
}
再发给mutations:
const mutations ={
//与上方 commit 中的 ‘increment' 相对应
increment(state){
state.count ++;
}
}
*/
//页面调用数据的getter方法来获取数据states
export default {
getInfos(state) {
state.cartInfos.total_price = 0;
state.cartInfos.total_nums = 0;
var list = state.cartList;
for (var i = 0; i < list.length; i++) {
var price = parseInt(list[i].price),
num = parseInt(list[i].num); state.cartInfos.total_price += price * num;
state.cartInfos.total_nums += num;
}
return state.cartInfos;
},
getCartList(state) {
return state.cartList;
},
getDevicetypes(state) {
return state.devicetypes;
},
getNewDeviceType(state) {
return state.newDeviceType;
},
getPackages(state) {
return state.packages;
},
getAccounts:state=> state.accounts, getPermissions:state => state.permissions, getNewpermissions:state => state.newpermissions, /*getAccounts:state =>state.accounts, getPermissions:state => state.permissions,*/
};
index.js
import Vue from 'vue'
import state from './state';
import mutations from './mutations';
import getters from './getters';
import actions from './actions';
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state,
mutations,
getters,
actions
})
mutations.js
import * as types from './mutations_types'
export default {
[types.ALL_DEVICETYPES](state, obj) {
state.devicetypes = obj;
let newDeviceType = [];
for(let i in obj) {
let ob = {};
ob.label = obj[i].dtname;
ob.value = obj[i].dtname;
ob.children = [];
for(let j in obj[i].carModels){
let oc = {};
oc.label = obj[i].carModels[j].cname;
oc.value = obj[i].carModels[j].cname;
ob.children.push(oc);
}
newDeviceType.push(ob);
}
state.newDeviceType = newDeviceType;
},
[types.ALL_PACKAGES](state, obj) {
state.packages = obj;
},
[types.ALL_ACCOUNTS](state, obj) {
console.log("ALL_ACCOUNTS : ",obj);
state.accounts = obj;
},
[types.ALL_PERMISSION](state, obj) {
state.permissions = obj;
console.log("state.permissions:",state.permissions);
let newpermissions = [];
for(let i in obj) {
let ob = {};
ob.key = obj[i].pid;
ob.label = obj[i].pdescription;
newpermissions.push(ob);
}
state.newpermissions = newpermissions;
console.log("state.newpermissions:",state.newpermissions);
},
/*[types.CLEAR_LOCAL](state) {
state.cartList.forEach(function(item) {
item.num = 0;
});
state.cartList = [];
localStorage.removeItem('vuex_cart');
},
[types.UPDATE_LOCAL](state) {
localStorage.setItem('vuex_cart', JSON.stringify(state.cartList));
},
[types.UPDATE_CUR_SHOP_STATUS](state, {
index = -1
}) {
state.curIndex = index;
},
[types.DELETE_DB](state) {
if (state.curIndex >= 0) {
state.cartList[state.curIndex].num = 0;
state.cartList.splice(state.curIndex, 1);
}
},
[types.CREATE_DB](state, shop) {
// console.log('mu create');
state.cartList.push(shop);
},
[types.ADD_DB](state) {
// console.log('mu add id:' + state.curIndex);
state.cartList[state.curIndex].num = parseInt(state.cartList[state.curIndex].num);
state.cartList[state.curIndex].num++;
},
[types.REDUCE_DB](state) {
// console.log('mu reduce');
state.cartList[state.curIndex].num = parseInt(state.cartList[state.curIndex].num);
state.cartList[state.curIndex].num--;
// console.log(state.cartList[state.curIndex].num);
if (state.cartList[state.curIndex].num == 0) {
state.cartList.splice(state.curIndex, 1);
}
},
[types.CHECK_DB](state, {
id
}) {
// console.log('mu check id :' + id);
// console.log(state.cartList);
state.curIndex = -1;
var list = state.cartList;
if (list.length) {
for (var i = 0; i < list.length; i++) {
if (list[i].id == id) {
state.curIndex = i;
break;
}
}
}
}*/
};
mutations_types.js
/*//添加菜品到购物车
export const CREATE_DB = 'CREATE_DB'; //给购物车的菜品++
export const ADD_DB = 'ADD_DB'; //给购物车的菜品--
export const REDUCE_DB = 'REDUCE_DB'; //删除购物车的索引
export const DELETE_DB = 'DELETE_DB'; //更新当前菜品在购物车的状态
export const UPDATE_CUR_SHOP_STATUS = 'UPDATE_CUR_SHOP_STATUS'; //检测购物车内是否存在某菜品
export const CHECK_DB = 'CHECK_DB'; //更新本地数据
export const UPDATE_LOCAL = 'UPDATE_LOCAL'; //清空本地数据
export const CLEAR_LOCAL = 'CLEAR_LOCAL';*/ export const ALL_DEVICETYPES = 'ALL_DEVICETYPES';
export const ALL_PACKAGES = 'ALL_PACKAGES';
export const ALL_ACCOUNTS = 'ALL_ACCOUNTS';
export const ALL_PERMISSION = 'ALL_PERMISSION';
state.js
export default {
devicetypes:[], //设备类型
newDeviceType:[],
packages: [],//升级包
accounts: [],//账号
permissions:[],//权限
newpermissions:[],
/*//购物车列表
cartList: localStorage.getItem('vuex_cart') ? JSON.parse(localStorage.getItem('vuex_cart')) : [],
//当前购物车信息
cartInfos: {
total_price: 0,
total_nums: 0
},
//当前菜品是否在购物车的状态。在则是对应的索引，不在则是-1
curIndex: -1*/
};
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'app'
}
</script> <style>
body{
padding:0px;
margin:0px auto;
}
a{
text-decoration:none;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
}
</style>
bus.js
/**
* Created by jerry on 2017/4/14.
*/
import Vue from 'vue' export let bus = new Vue()
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/iconfont.css'
import '@/assets/styles/main.scss'
import curvejs from 'curvejs' //画线的 Object.defineProperty(Vue.prototype, '$curvejs', { value: curvejs });
Vue.config.productionTip = false
Vue.use(ElementUI) /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {App}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>远程升级服务</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
package.json
{
"name": "litadmin",
"version": "1.2.1",
"description": "A Vue.js project for admin",
"author": "jerry9022@qq.com",
"private": true,
"scripts": {
"server": "node server/bin/www",
"dev": "node build/dev-server.js",
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.16.2",
"echarts": "^3.7.1",
"element-ui": "^2.0.7",
"js-md5": "^0.7.3",
"lodash": "^4.17.4",
"vue": "^2.5.9",
"vue-router": "^2.8.1",
"vue-template-compiler": "^2.5.9",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.26.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.4",
"eventsource-polyfill": "^0.9.6",
"express": "^4.15.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.10.0",
"friendly-errors-webpack-plugin": "^1.1.3",
"function-bind": "^1.1.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.3",
"node-sass": "^4.5.3",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.2",
"ora": "^1.3.0",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"semver": "^5.4.1",
"style-loader": "^0.16.1",
"url-loader": "^0.5.9",
"vue-loader": "^11.1.4",
"vue-style-loader": "^2.0.0",
"webpack": "^2.7.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^2.6.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/iconfont.css'
import '@/assets/styles/main.scss'
import curvejs from 'curvejs' //画线的
import store from '@/store/' Object.defineProperty(Vue.prototype, '$curvejs', { value: curvejs });
Vue.config.productionTip = false
Vue.use(ElementUI) /* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //会自动注册给子组件，在子组件中通过 this.$store 访问
template: '<App/>',
components: {App}
})
springboot-vue项目前台2的更多相关文章
- .gitignore 标准模板 -适用于SpringBoot+Vue项目 -Idea+VSCode开发
.gitignore 标准模板 -适用于SpringBoot+Vue项目 node_modules/ target/ !.mvn/wrapper/maven-wrapper.jar ### STS # ...
- 【占坑】IDEA从github 导入并运行 SpringBoot + VUE项目
最近工程实践的项目内容是开发一个类似于博客和bbs论坛的系统,在github上找了一个类似的项目可以照着写一写.所以这里先占着坑,等把后端的数据库连接学完了再来填坑. github项目链接:githu ...
- linux下部署springboot vue项目
使用的工具是 XFTP5 XSHELL5 docker pull gmaslowski/jdk 拉取jdk docker images 查询下载的镜像ID (如:390b58b1be42) docke ...
- SpringBoot+Vue项目上手
博客 https://gitee.com/RoadsideParty/White-Jotter-Vue?_from=gitee_search UI框架 https://at-ui.github.io/ ...
- Springboot项目与vue项目整合打包
我的环境 * JDK 1.8 * maven 3.6.0 * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定 ...
- springboot部署多个vue项目
在springboot下部署多个vue项目,只需要将vue打包成静态文件后,将其放在resources的静态文件夹下即可. 如下图:static目录下有三个vue的静态文件夹,分别为运营后台(admi ...
- SpringBoot+Vue前后端分离项目，maven package自动打包整合
起因:看过Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,我早想这样玩玩了. 1. 建立个maven父项目 next 这个作为父工程,next Finish ...
- SpringBoot + Vue + nginx项目部署(零基础带你部署)
一.环境.工具 jdk1.8 maven spring-boot idea VSVode vue 百度网盘(vue+springboot+nginx源码): 链接:https://pan.baidu. ...
- docker 运行jenkins及vue项目与springboot项目(三.jenkins的使用及自动打包vue项目)
docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...
- docker 运行jenkins及vue项目与springboot项目(一.安装docker)
docker 运行jenkins及vue项目与springboot项目: 一.安装docker 二.docker运行jenkins为自动打包运行做准备 三.jenkins的使用及自动打包vue项目 四 ...
随机推荐
- request:getParameter和getAttribute区别
getParameter 是用来接受用post个get方法传递过来的参数的.getAttribute 必须先setAttribute.(1)request.getParameter() 取得是通过容器 ...
- MacOS 自带文件编码格式转换工具
[命令功能]iconv 是Linux操作系统用于将文本编码格式从一种转外另外一种的工具命令.[使用方法] iconv [OPTION...] [-f ENCODING] [-t ENCODING] [ ...
- 我的第六个java程序 spring-bean
配置文件 Beans.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&quo ...
- win7下怎么卸载jdk
在安装了java jdk之后,会有两个程序,如果不仔细卸载的话,就少卸载一个而不能完全卸载,下面看看在win7下怎么卸载jdk. win7下怎么卸载jdk步骤: 第一步:点击“开始”,再点击“ ...
- 第一百九十五节，jQuery EasyUI，Resizable(调整大小)组件
jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...
- linux oracle sqlplus中文乱码解决
在oracle用户的~/.bash_profile中添加 NLS_LANG="SIMPLIFIED CHINESE"_CHINA.ZHS16GBKexport NLS_LANG 然 ...
- git的优秀教程
1.csdn地址:http://blog.csdn.net/qq_15037231/article/details/73864293 2.廖雪峰的git教程 地址:https://www.liaox ...
- 利用.Net中Process类调用netstat命令来判断计算端口的使用情况
利用.Net中Process类调用netstat命令来判断计算端口的使用情况: Process p = new Process();p.StartInfo = new ProcessStartInfo ...
- JSP -> f:loadBundle用法
jsp中出现<f:loadBundle basename="messages_zh_CN" var="msgs" /> 还有src目录下有messa ...
- libnids介
转自:http://blog.chinaunix.net/uid-22832715-id-2111578.html Libnids开发包介绍 Libnids是一个用于网络入侵检测开发的专业编程 ...