<template>
|
<div class="shangjiZhipaiForm-wrap">
|
<el-dialog
|
title="违章车辆上级指派记录"
|
:visible.sync="dialogVisible"
|
width="80%">
|
<div class="daibanForm-main">
|
<el-table
|
:data="pageData.rows"
|
style="width: 100%"
|
max-height="550">
|
<el-table-column
|
align="center"
|
prop="carNo"
|
label="车牌号"
|
width="150">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="address"
|
label="位置"
|
width="220">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="userName"
|
label="执行人"
|
width="160">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="money"
|
label="金额（元）"
|
width="80">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="status"
|
label="状态"
|
:filter-multiple="false"
|
:filters="statesOptions"
|
column-key="tag"
|
:filter-method="filterTag"
|
:formatter="statesFormat"
|
width="120">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="violationTypeName"
|
label="违章类型"
|
width="120">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="payStatus"
|
:formatter="payStatusFormat"
|
label="缴费状态"
|
width="120">
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="createTime"
|
label="时间"
|
width="180">
|
</el-table-column>
|
</el-table>
|
<div class="shangji-footer-box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageData.currentPage"
|
:page-sizes="[10, 20, 30, 40, 50, 100, 200]"
|
:page-size="pageData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="pageData.total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "shangjiZhipaiForm",
|
data() {
|
return {
|
pageConfig: {
|
pageDataUrl: this.$systemconfig.basePath + '/ticket/findPage',
|
},
|
pageData: this.$byutil.defaultPageData(),
|
type:{
|
type:1
|
},
|
statesOptions: [
|
{ value: 0, text: "未处理" },
|
{ value: 1, text: "已处理" },
|
{ value: 2, text: "未完成" },
|
{ value: 3, text: "撤销" },
|
],
|
dialogVisible:false,
|
}
|
},
|
methods: {
|
payStatusFormat(row) { //缴费状态
|
if(row.type == 0) {
|
return '待缴费'
|
}else if(row.type == 1) {
|
return '已缴费'
|
}else if(row.type == 2) {
|
return '支付失败'
|
}
|
},
|
statesFormat(row) { //状态
|
if(row.status == 0) {
|
return '未处理'
|
}else if(row.status == 1) {
|
return '已处理'
|
}else if(row.status == 2) {
|
return '未完成'
|
}else if(row.status == 3) {
|
return '撤销'
|
}
|
},
|
filterTag(value,row) {
|
console.log('value-------',value)
|
console.log('row.status',row.status)
|
return row.status === value
|
},
|
initData() {
|
this.dialogVisible = true
|
this.$byutil.initTableMaxHeight(this);
|
this.loadData();
|
},
|
//加载数据
|
loadData() {
|
let newObj = Object.assign({},this.pageData,this.type)
|
this.$byutil.loadPageData(this, this.pageConfig.pageDataUrl,newObj);
|
},
|
handleSizeChange(val) {
|
this.pageData.pageSize = val;
|
this.loadData();
|
},
|
handleCurrentChange(val) {
|
this.pageData.page = val;
|
this.loadData();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.shangjiZhipaiForm-wrap{
|
.el-dialog__title{
|
color: #fff;
|
}
|
.el-dialog, .el-pager li{
|
background:rgba(0,0,0,0.9);
|
}
|
.el-form-item__label{
|
color: #00fff6;
|
}
|
.el-table th{
|
background:rgba(4,40,70,0.7);
|
}
|
.el-table tr{
|
background:transparent;
|
}
|
.el-table__footer-wrapper, .el-table__header-wrapper:nth-child(even){
|
background:rgba(4,40,70,0.7);
|
}
|
.el-table__row:nth-child(even){
|
background:rgba(4,40,70,0.7);
|
}
|
.el-table, .el-table__expanded-cell{
|
background:transparent;
|
}
|
.el-table td, .el-table th.is-leaf{
|
border:none;
|
}
|
.el-table__body,.el-table__header{
|
width: 100% !important;
|
}
|
.el-table::before,.el-table__fixed-right::before, .el-table__fixed::before{
|
background-color: transparent;
|
}
|
.el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{
|
background-color: #374f65;
|
}
|
.el-table--enable-row-hover .el-table__body tr:hover>td{
|
background-color: #374f65;
|
}
|
.el-table thead{
|
color: #fff;
|
}
|
.el-table{
|
color:#00fff6;
|
}
|
.el-dialog__header{
|
display: flex;
|
justify-content: center;
|
}
|
}
|
.shangji-footer-box{
|
.el-pagination__total{
|
color:#fff;
|
}
|
.el-pager li{
|
color:#fff;
|
}
|
.el-pagination__jump{
|
color:#fff;
|
}
|
.el-input__inner,.btn-prev,.btn-next,.el-pagination button:disabled{
|
background-color: transparent;
|
}
|
.el-pager li.active{
|
color: #409EFF;
|
}
|
.el-input__inner{
|
color:#fff;
|
border:1px solid #409EFF;
|
}
|
.el-pagination .btn-next, .el-pagination .btn-prev{
|
color:#fff;
|
}
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
.shangji-footer-box{
|
display: flex;
|
flex-direction: row-reverse;
|
margin-top: 0.1042rem /* 20/192 */;
|
}
|
</style>
|
