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} })