一.项目代码
1.App.vue
<template>
<!-- 模板-->
<div id="wrapper">
<div style="width: 100%">
<el-tabs v-model="activeName" id="tabs">
<!-- 标签栏里包含了三个标签面板，分别是研发与维修、车辆销售、车队管理-->
<el-tab-pane label="研发与维修" name="first">
<div class = "title">
<img src ="./assets/images/logo.png" class="img" />
<p class="leftline" ><img src="./assets/images/leftLine.png"></p>
<p class="rightline"><img src="./assets/images/rightLine.png"></p>
</div>
<ul class="menu">
<li v-for="(item,index) in yanfa" @click="goto(item.url,index,item)"
:class="{'active':item.show===true,'list':true}">
<router-link v-bind:to="item.url">{
{item.name}}</router-link>
</li>
</ul>
<router-view></router-view>
</el-tab-pane>
<el-tab-pane label="车辆销售" name="second">
<div class = "title">
<img src ="./assets/images/logo.png" class="img" />
<p class="leftline" ><img src="./assets/images/leftLine.png"></p>
<p class="rightline"><img src="./assets/images/rightLine.png"></p>
</div>
<ul class="menu">
<li class="list active"><router-link to="/Salesdata">销售数据</router-link></li>
<li class="list"><router-link to="/Salesdetails">销售明细</router-link></li>
<li class="list"><router-link to="/Saleslists">销售列表</router-link></li>
</ul>
<router-view></router-view>
</el-tab-pane>
<el-tab-pane label="车队管理" name="third">
<div class = "title">
<img src ="./assets/images/logo.png" class="img" />
<p class="leftline" ><img src="./assets/images/leftLine.png"></p>
<p class="rightline"><img src="./assets/images/rightLine.png"></p>
</div>
<ul class="menu">
<li class="list active"><router-link to="/Vehiclemonitoring">车辆监控</router-link></li>
<li class="list"><router-link to="/Fleetdata">车队数据</router-link></li>
<li class="list"><router-link to="/VehicleProfile">车辆概况</router-link></li>
</ul>
<router-view></router-view>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script> //脚本
import './assets/Style/table.css'
import router from './router'
export default {
data() {
return {
activeName: 'first' ,// 默认选中的标签面板
yanfa: [
{
name: "数据大屏",
url: 'DataScreen',
show: true
},
{
name: "统计分析",
url: 'DataStatistics',
show: false
},
{
name: "单车监控",
url: 'RealTimeMonitoring',
show: false
},
{
name: "车辆管理",
url: 'VehicleManagement',
show: false
},
{
name: "用户管理",
url: 'UserManagement',
show: false
}
]
}
}, //数据定义结束
//定义函数
methods:{
//如果当前项被点击，则把当前项的show设置为true，否则为false
goto (name,i,item) {
item.show = !item.show;
for(var j=0;j<this.yanfa.length;j++){
if(j!==i){
this.yanfa[j].show = false
}
}
}
}
}
</script>
<style> /*样式*/
/* 设置html和body的行高为继承 */
html, body {
line-height: inherit;
}
/* 设置html、body和#wrapper的背景图片、尺寸和定位 */
html, body, #wrapper {
background-image: url('assets/true.png'); /* 背景图片 */
width: 100%; /* 宽度100% */
height: 100%; /* 高度100% */
position: fixed; /* 固定定位 */
background-repeat: no-repeat; /* 背景不重复 */
background-size: cover; /* 背景覆盖整个容器 */
-webkit-background-size: cover; /* 兼容Webkit浏览器 */
-o-background-size: cover; /* 兼容Opera浏览器 */
background-position: center 0; /* 背景图片位置 */
overflow-y: auto; /* 垂直方向允许滚动 */
}
/* 设置.title的样式 */
.title {
width: 100%; /* 宽度100% */
height: 55px; /* 高度55px */
background: url("./assets/images/headerBox.png") no-repeat; /* 背景图片不重复 */
background-size: 100%; /* 背景图片大小 */
text-align: center; /* 文本居中 */
position: relative; /* 相对定位 */
}
/* 设置图片宽度 */
.img {
width: 24%; /* 宽度24% */
}
/* 设置左线条样式 */
.leftline {
position: absolute; /* 绝对定位 */
top: 10px; /* 距顶部10px */
width: 24%; /* 宽度24% */
left: calc(50% - 600px); /* 计算左侧位置 */
}
/* 设置右线条样式 */
.rightline {
position: absolute; /* 绝对定位 */
top: 10px; /* 距顶部10px */
width: 24%; /* 宽度24% */
right: calc(50% - 600px); /* 计算右侧位置 */
z-index: 103; /* 层级 */
}
/* 设置菜单列表样式 */
ul.menu {
padding: 0; /* 内边距0 */
list-style: none; /* 无列表样式 */
width: 1.7%; /* 宽度1.7% */
position: fixed; /* 固定定位 */
height: 2%; /* 高度2% */
top: 16%; /* 距顶部16% */
font-family: 'Century Gothic'; /* 字体 */
box-shadow: 0px 0px 25px #00000070; /* 阴影 */
clear: both; /* 清除浮动 */
display: table; /* 表格布局 */
}
/* 设置菜单列表项样式 */
ul.menu .list {
display: table-cell; /* 表格单元格 */
width: 2em; /* 宽度2em */
height: 7em; /* 高度7em */
text-align: center; /* 文本居中 */
vertical-align: middle; /* 垂直居中 */
float: left; /* 左浮动 */
background: #1c48a5; /* 背景颜色 */
clear: both; /* 清除浮动 */
margin-top: 2px; /* 上边距2px */
border-bottom: 1px solid #1c48a5; /* 底部边框 */
}
/* 设置菜单列表项链接样式 */
ul.menu .list a {
text-decoration: none; /* 无下划线 */
-webkit-writing-mode: vertical-r; /* Webkit垂直书写模式 */
writing-mode: vertical-rl; /* 垂直书写模式 */
font-size: 1em; /* 字体大小 */
height: 7em; /* 高度7em */
color: #fff; /* 文本颜色 */
line-height: 1.2em; /* 行高 */
word-spacing: 1.5em; /* 单词间距 */
letter-spacing: 0.3em; /* 字母间距 */
word-break: break-all; /* 允许单词内断行 */
cursor: pointer; /* 鼠标指针样式 */
}
/* 设置菜单列表项激活状态样式 */
ul.menu .active {
background-color: #0d78cc; /* 背景颜色 */
color: #09fbd2; /* 文本颜色 */
}
/* 设置图标样式 */
.icon {
width: 1%; /* 宽度1% */
height: 8%; /* 高度8% */
position: fixed; /* 固定定位 */
top: 46%; /* 距顶部*/
}
</style>
2.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 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
import App from './App'
import element from 'element-ui'
import router from './router'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //使用vue-router
Vue.use(element)
import axios from 'axios'
Vue.prototype.axios = axios;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app', //为vue组件提供挂载元素。挂载元素的名字叫做“app”，即首页里的名字叫做app的那个div
router,
components: {
App }, //组件的名字叫做App.vue
template: '<App/>' //App.vue组件中的模版内容会替换挂载元素中的内容
})
3.index.js
import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
import DataScreen from '@/components/DataScreen'
import DataStatistics from '@/components/DataStatistics'
import RealTimeMonitoring from '@/components/RealTimeMonitoring'
import UserManagement from '@/components/UserManagement'
import VehicleManagement from '@/components/VehicleManagement'
import Salesdata from '@/components/Salesdata'
import Salesdetails from '@/components/Salesdetails'
import Saleslists from '@/components/Saleslists'
import Vehiclemonitoring from '@/components/VehicleMonitoring'
import Fleetdata from '@/components/Fleetdata'
import VehicleProfile from '@/components/VehicleProfile'
// export default new Router({
// routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// }
// ]
// })
export default new Router({
routes: [
{
path: '/', name:DataScreen, component:DataScreen},
{
path: '/Datascreen',name:DataScreen, component: DataScreen },
{
path: '/Datastatistics',name:DataStatistics, component: DataStatistics },
{
path: '/Realtimemonitoring',name:RealTimeMonitoring, component: RealTimeMonitoring },
{
path: '/Usermanagement',name:UserManagement, component: UserManagement },
{
path: '/Vehiclemanagement',name:VehicleManagement, component: VehicleManagement },
{
path: '/Salesdata', name:Salesdata, component: Salesdata },
{
path: '/Salesdetails', name:Salesdetails, component: Salesdetails },
{
path: '/Saleslists', name:Saleslists, component: Saleslists },
{
path: '/Vehiclemonitoring', name:Vehiclemonitoring, component: Vehiclemonitoring },
{
path: '/Fleetdata', name:Fleetdata, component: Fleetdata },
{
path: '/VehicleProfile', name:VehicleProfile, component: VehicleProfile }
]
})
4.VehicleManagement.vue
<template>
<div id="app-content">
<div class="containerBox">
<div style="padding: 38px 0 30px 20px;" class="ba">
<div class="searchInputBox">
<div class="inputItem pr">
<p class="searchName">车载终端编号</p><br>
<el-input size="small" v-model="basicInput" class="searchDate.CarVIN"></el-input>
</div>
<div class="inputItem pr"> <!-- 选择框 按钮-->
<p class="searchName">车牌号</p><br>
<el-input size="small" v-model="basicInput" class="searchDate.CarNumber"></el-input>
</div>
<div class="inputItem pr">
<p class="searchName">车辆状态</p><br>
<el-select size="small" placeholder="请选择" v-model="basicInput" class="searchDate.Status">
<el-option value="all" label="全部"></el-option>
<el-option value="true" label="启用"></el-option>
<el-option value="false" label="禁用"></el-option>
</el-select>
</div>
<div class="inputItem buttonItem">
<el-button type="primary" class="basicBtn basicBlueBtn">查询</el-button>
</div>
</div>
</div>
<div class="vehicleInfo">
<el-button size="small" @click="dialogFormVisible=true">新增车辆</el-button>
<el-dialog id="Dialog" title="新增车辆" :visible.sync="dialogFormVisible" :modal="false" width="70%">
<el-form :model="form" class="Form" :rules="rules">
<el-col :span="8"><div class="grid-content">
<el-form-item label="车载终端编号" :label-width="formLabelWidth" prop="CarVIN">
<el-input v-model="form.CarVIN" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="所属车队" :label-width="formLabelWidth" prop="Carline">
<el-select v-model="form.Carline" placeholder="请选择所属车队">
<el-option label="车队1" value="che1"></el-option>
<el-option label="车队2" value="che2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆状态" :label-width="formLabelWidth" prop="Status">
<el-select v-model="form.Status" placeholder="请选择车辆状态">
<el-option label="启用" value="true"></el-option>
<el-option label="禁用" value="false"></el-option>
</el-select>
</el-form-item>
<el-form-item label="车辆型号" :label-width="formLabelWidth" prop="vehicleType">
<el-input v-model="form.vehicleType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="电机品牌" :label-width="formLabelWidth" prop="motorBrand">
<el-input v-model="form.motorBrand" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="电池型号" :label-width="formLabelWidth" prop="batteryType">
<el-input v-model="form.batteryType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="整车控制器序列号" :label-width="formLabelWidth" prop="veConNo">
<el-input v-model="form.veConNo" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="储能系统" :label-width="formLabelWidth" prop="energyStorage">
<el-input v-model="form.energyStorage" autocomplete="off"></el-input>
</el-form-item>
</div></el-col>
<el-col :span="8" ><div class="grid-content">
<el-form-item label="车牌号" :label-width="formLabelWidth" prop="CarNumber">
<el-input v-model="form.CarNumber" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="当前里程数（km）" :label-width="formLabelWidth" prop="CurrKm">
<el-input v-model="form.CurrKm" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="SIM卡ICCID编号" :label-width="formLabelWidth" prop="SIMIccid">
<el-input v-model="form.SIMIccid" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="发动机品牌" :label-width="formLabelWidth" prop="engineBrand">
<el-input v-model="form.engineBrand" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="电机型号" :label-width="formLabelWidth" prop="motorType">
<el-input v-model="form.motorType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="整车控制器品牌" :label-width="formLabelWidth" prop="veConBrand">
<el-input v-model="form.veConBrand" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="整车控制器软件版本" :label-width="formLabelWidth" prop="veConsoftVersion">
<el-input v-model="form.veConsoftVersion" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="车辆序列号" :label-width="formLabelWidth" prop="vehicleNo">
<el-input v-model="form.vehicleNo" autocomplete="off"></el-input>
</el-form-item>
</div></el-col>
<el-col :span="8"><div class="grid-content">
<el-form-item label="所属公司" :label-width="formLabelWidth" prop="Company">
<el-select v-model="form.Company" placeholder="请选择所属公司">
<el-option label="海格车企1" value="hai1"></el-option>
<el-option label="海格车企2" value="hai2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="出厂日期" :label-width="formLabelWidth" prop="OutComData">
<el-date-picker v-model="form.OutComData" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="车辆品牌" :label-width="formLabelWidth" prop="vehicleBrand">
<el-input v-model="form.vehicleBrand" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="发动机型号" :label-width="formLabelWidth" prop="engineType">
<el-input v-model="form.engineType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="电池品牌" :label-width="formLabelWidth" prop="batteryBrand">
<el-input v-model="form.batteryBrand" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="整车控制器型号" :label-width="formLabelWidth" prop="veConType">
<el-input v-model="form.veConType" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="整车控制器硬件版本" :label-width="formLabelWidth" prop="veConHardVersion">
<el-input v-model="form.veConHardVersion" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
<el-input v-model="form.remark" autocomplete="off"></el-input>
</el-form-item>
</div></el-col>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
<div class="ba">
<div class="tabItem">
<div class="tabItemConent" id="tabItemConent">
<el-table id="tableBox" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
:header-cell-style="{background:'#0d2458',border:'none' }"
:row-style="{background:'#193777'}"
:cell-style="{border:'none'}">
<el-table-column prop="index" label="序号" align="center"></el-table-column>
<el-table-column prop="CarVIN" label="车载终端编号" align="center" width="220" ></el-table-column>
<el-table-column prop="CarNumber" label="车牌号" align="center"></el-table-column>
<el-table-column prop="Company" label="运营公司" align="center"></el-table-column>
<el-table-column prop="Carline" label="车队" align="center"></el-table-column>
<el-table-column prop="OutComData" label="出厂日期" align="center"></el-table-column>
<el-table-column prop="RegData" label="注册日期" align="center"></el-table-column>
<el-table-column prop="CurrKm" label="当前里程数" align="center"></el-table-column>
<el-table-column prop="BadCount" label="故障次数" align="center"></el-table-column>
<el-table-column prop="Status" label="状态" align="center"></el-table-column>
<el-table-column prop="caozuo" label="操作" align="center"><template slot-scope="scope"><span size="mini">编辑</span><span aria-setsize="mini" type="danger">删除</span></template></el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="block">
<el-pagination id="pag"
background
layout="prev,pager,next,total,sizes,jumper"
:total="tableData.length"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[5,10,50,100]"
@current-change="handleCurrentChange"
@size-change="handleSizeChange">
</el-pagination>
</div>
<div class="block">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pagename: "车辆管理页面", // 页面标题
searchDate:{ // 搜索条件
CarVIN: '', //车载终端编号
CarNumber: '',
Status: '',
},
tableData: [], // 车辆列表数据
currentPage: "1", // 当前页码
pageSize: "5", // 每页显示的条目数量
dialogFormVisible: false, //弹窗是否显示
form: { //定义车辆详细信息
CarVIN:'',//车载终端编号
CarNumber:'',//车牌号
Company:'',//运营公司
Carline:'',//车队
CurrKm:'',//当前里程数
OutComData:'',//出厂日期
Status:'',//状态
SIMIccid:'' , //SIM卡ICCID编号
vehicleBrand:'' , //车辆品牌
vehicleType:'', //车辆型号
engineBrand:'', //发动机品牌
engineType:'', //发动机型号
motorBrand:'',//电机品牌
motorType:'',// 电机型号
batteryBrand:'',// 电池品牌
batteryType:'',// 电池型号
veConBrand:'',// 整车控制器品牌
veConType:'',// 整车控制器型号
veConNo:'',// 整车控制器序列号
veConsoftVersion:'',// 整车控制器软件版本
veConHardVersion:'',// 整车控制器硬件版本
energyStorage:'',// 储能系统
vehicleNo:'',// 车辆序列号
remark:'',// 备注
},
formLabelWidth: '160px',
rules:{ //定义规则，用于表单验证
CarVIN:[
{ required: true, message: '请输入车载终端编号', trigger: 'blur' },
// { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
CarNumber:[
{ required: true, message: '请输入车牌号', trigger: 'blur' }
],
Company:[
{ required: true, message: '请输入运营公司', trigger: 'blur' }
],
Carline:[
{ required: true, message: '请选择车队', trigger: 'change' }
],
CurrKm:[
{ required: true, message: '请输入当前里程数', trigger: 'blur' }
],
OutComData:[
{ required: true, message: '请选择出厂日期', trigger: 'change' }
],
Status:[
{ required: true, message: '请选择状态', trigger: 'change' }
]
}
}
},
/*
在 Vue 应用中，我们有时需要在页面加载完成后再执行某些操作，比如获取数据、执行动画等等。
Vue 提供了一些生命周期钩子函数来帮助我们实现这些需求。
mounted 钩子函数是在组件挂载完成后调用的钩子函数。
我们可以在 mounted 钩子函数中执行一些 DOM 操作或者请求数据等操作。
*/
//定义钩子函数mounted,使用axios从carlist.json文件中获取车辆信息，存放到tableData中
mounted() {
// 使用axios从carlist.json文件中获取车辆信息，存放到tableData中
this.axios('static/json/carlist.json').then(res => {
this.tableData=res.data.carlist
}).catch(err => {console.log(err)})
},
methods: {
// 当前页发生改变时，执行该函数
handleCurrentChange(currentPage){
this.currentPage=currentPage;
},
// 每页条数发生改变时，执行该函数
handleSizeChange(pageSize){
this.pageSize=pageSize;
}
}
}
</script>
<style scoped>
</style>
5.UserManagement.vue
<template>
<div id="app-content">
<div class="containerBox">
<div style="padding: 38px 0 30px 20px;" class="ba">
<div class="searchInputBox">
<div class="inputItem pr">
<p class="searchName">用户名</p><br>
<el-input size="small" v-model="searchData.UserName" class="basicInput"></el-input>
</div>
<div class="inputItem pr"> <!-- 选择框 按钮-->
<p class="searchName">真实姓名</p><br>
<el-input size="small" v-model="searchData.RealName" class="basicInput"></el-input>
</div>
<div class="inputItem pr">
<p class="searchName">手机号</p><br>
<el-input size="small" v-model="searchData.Telephone" class="basicInput"></el-input>
</div>
<div class="inputItem pr">
<p class="searchName">公司</p><br>
<el-select size="small" placeholder="请选择" v-model="searchData.Company" class="basicInput">
<el-option value="all" label="True"></el-option>
<el-option value="true" label="启用"></el-option>
</el-select>
</div>
<div class="inputItem pr">
<p class="searchName">状态</p><br>
<el-select size="small" placeholder="良好" v-model="searchData.State" class="basicInput">
<el-option value="all" label="True"></el-option>
<el-option value="true" label="启用"></el-option>
</el-select>
</div>
<div class="inputItem pr">
<p class="searchName">部门</p><br>
<el-select size="small" placeholder="请选择" v-model="searchData.Dept" class="basicInput">
<el-option value="all" label="True"></el-option>
<el-option value="true" label="启用"></el-option>
</el-select>
</div>
<div class="inputItem buttonItem">
<el-button type="primary" class="basicBtn basicBlueBtn">查询</el-button>
</div>
</div>
</div>
<div class="vehicleInfo">
<el-button size="small" @click="dialogFormVisible=true">新增用户</el-button>
<el-dialog id="Dialog" title="新增用户" :visible.sync="dialogFormVisible" :modal="false" width="45%">
<el-form :model="form" class="Form" :rules="rules" label-width="20%"> <!--表单 -->>
<el-form-item label="用户名" :label-width="formLabelWidth" prop="Username">
<el-input v-model="form.UserName" placeholder="请输入用户名" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" :label-width="formLabelWidth" prop="Password">
<el-input v-model="form.Password" placeholder="请输入密码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="请确认密码" :label-width="formLabelWidth" prop="Repassword">
<el-input v-model="form.Repassword" placeholder="请确认密码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号码" :label-width="formLabelWidth" prop="Telephone">
<el-input v-model="form.Telephone"placeholder="请输入手机号码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="真实姓名" :label-width="formLabelWidth" prop="RealName">
<el-input v-model="form.RealName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="关联公司" :label-width="formLabelWidth" prop="Company">
<el-select v-model="form.Company" placeholder="请选择关联公司">
<el-option label="车队1" value="che1"></el-option>
<el-option label="车队2" value="che2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="关联部门" :label-width="formLabelWidth" prop="Dept">
<el-select v-model="form.Dept" placeholder="请选择关联部门司">
<el-option label="车队1" value="che1"></el-option>
<el-option label="车队2" value="che2"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
</div>
<div class="ba">
<div class="tabItem">
<div class="tabItemConent" id="tabItemConent">
<el-table id="tableBox" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
:header-cell-style="{background:'#0d2458',border:'none' }"
:row-style="{background:'#193777'}"
:cell-style="{border:'none'}">
<el-table-column prop="index" label="序号" align="center"></el-table-column>
<el-table-column prop="RealName" label="真实姓名" align="center" width="220" ></el-table-column>
<el-table-column prop="UserName" label="用户名" align="center"></el-table-column>
<el-table-column prop="Telephone" label="手机号码" align="center"></el-table-column>
<el-table-column prop="Dept" label="部门" align="center"></el-table-column>
<el-table-column prop="Company" label="运营公司" align="center"></el-table-column>
<el-table-column prop="CarEnterprises" label="车企" align="center"></el-table-column>
<el-table-column prop="Status" label="状态" align="center"></el-table-column>
<el-table-column prop="CreateTime" label="创建时间" align="center"></el-table-column>
<el-table-column prop="caozuo" label="操作" align="center"><template slot-scope="scope"><span size="mini">编辑 </span><span aria-setsize="mini" type="danger">删除</span></template></el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="block">
<el-pagination id="pag"
background
layout="prev,pager,next,total,sizes,jumper"
:total="tableData.length"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[5,10,50,100]"
@current-change="handleCurrentChange"
@size-change="handleSizeChange">
</el-pagination>
</div>
<div class="block">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pagename: "用户管理", // 页面标题
searchData:{ //查询数据
UserName:"", //用户姓名
RealName:"", //真实姓名
Telephone:"", //电话
Company:"", //公司名称
State:"", //状态
Dept:"", //部门
},
tableData: [], // 车辆列表数据
currentPage: "1", // 当前页码
pageSize: "5", // 每页显示的条目数量
dialogFormVisible: false, //弹窗是否显示
form:{
UserName:"",
Password:"",
RePassword:"",
Telephone:"",
RealName:"",
Company:"",
Dept:""
},
rules:{ //定义规则，用于表单验证
UserName:[
{ required: true, message: "请输入用户名", trigger: "blur"},
{ pattern: /^[a-zA-Z0-9]{6,16}$/, message:'用户名格式错误', trigger: "blur"}
],
Password:[
{ required: true, message: "请输入密码",trigger: "blur"},
{ pattern: /[a-zA-Z\d+]{6,16}/, message:'密码格式错误',trigger:'blur'}
],
RePassword:[
{ required: true, message: "请输入确认密码", trigger: "blur"},
],
Telephone:[
{ required: true, message: "请输入电话号码", trigger: "blur"},
{ pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: "电话号码格式错误", trigger: "blur"}
],
RealName:[
{ required: true, message: "请输入真实姓名", trigger: "blur"},
{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,16}$/, message: "真实姓名格式错误", trigger: "blur"}
],
Company:[
{ required: true, message: '请选择关联运营公司', trigger: 'change' },
],
Dept:[
{ required: true, message: '请选择关联部门', trigger: 'change' },
]
}
}
},
/*
在 Vue 应用中，我们有时需要在页面加载完成后再执行某些操作，比如获取数据、执行动画等等。
Vue 提供了一些生命周期钩子函数来帮助我们实现这些需求。
mounted 钩子函数是在组件挂载完成后调用的钩子函数。
我们可以在 mounted 钩子函数中执行一些 DOM 操作或者请求数据等操作。
*/
//定义钩子函数mounted,使用axios从carlist.json文件中获取车辆信息，存放到tableData中
mounted() {
// 使用axios从carlist.json文件中获取车辆信息，存放到tableData中
this.axios('static/json/userlist.json').then(res => {
this.tableData=res.data.userlist
}).catch(err => {console.log(err)})
},
methods: {
// 当前页发生改变时，执行该函数
handleCurrentChange(currentPage){
this.currentPage=currentPage;
},
// 每页条数发生改变时，执行该函数
handleSizeChange(pageSize){
this.pageSize=pageSize;
}
}
}
</script>
<style scoped>
</style>
二.项目运行截图
