<template>
|
<div class="daibanForm-wrap">
|
<el-dialog
|
title="我的待办"
|
:visible.sync="dialogVisible"
|
width="80%"
|
:before-close="handleClose">
|
<div class="daibanForm-main">
|
<el-table
|
:data="pageData.rows"
|
style="width: 100%"
|
max-height="550">
|
<el-table-column
|
align="center"
|
fixed
|
type="index"
|
label="序号"
|
width="80">
|
</el-table-column>
|
<el-table-column
|
align="left"
|
prop="carNo"
|
label="车牌号"
|
min-width="120">
|
</el-table-column>
|
<el-table-column
|
:show-overflow-tooltip="true"
|
align="left"
|
prop="address"
|
label="位置"
|
min-width="200">
|
</el-table-column>
|
<el-table-column
|
align="left"
|
prop="userName"
|
label="执行人"
|
min-width="120">
|
</el-table-column>
|
<el-table-column
|
align="right"
|
prop="money"
|
label="金额（元）"
|
min-width="80">
|
</el-table-column>
|
<el-table-column
|
align="left"
|
prop="status"
|
label="状态"
|
:filter-multiple="false"
|
:filters="statesOptions"
|
column-key="tag"
|
:filter-method="filterTag"
|
:formatter="statesFormat"
|
min-width="120">
|
</el-table-column>
|
<el-table-column
|
align="left"
|
prop="violationTypeName"
|
label="违章类型"
|
min-width="120">
|
</el-table-column>
|
<el-table-column
|
align="left"
|
prop="payStatus"
|
:formatter="payStatusFormat"
|
label="缴费状态"
|
min-width="120">
|
</el-table-column>
|
<el-table-column
|
align="left"
|
prop="createTime"
|
label="时间"
|
min-width="180">
|
</el-table-column>
|
<el-table-column
|
align="right"
|
fixed="right"
|
label="操作"
|
min-width="120">
|
<template slot-scope="scope">
|
<el-button
|
v-if="scope.row.status != 3 && scope.row.status != 1"
|
@click.native.prevent="deleteRow(scope.row)"
|
type="primary"
|
size="mini">
|
撤销
|
</el-button>
|
<!--<el-button
|
@click.native.prevent="deleteRow(scope.$index, tableData)"
|
type="danger"
|
size="mini">
|
删除
|
</el-button>-->
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="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: "daibanForm",
|
data() {
|
return {
|
pageConfig: {
|
pageDataUrl: this.$systemconfig.basePath + '/ticket/findPage',
|
deleteDataUrl: this.$systemconfig.basePath + '/ticket/delete',
|
},
|
pageData: this.$byutil.defaultPageData(),
|
dialogVisible:false,
|
tableData: [],
|
statesOptions: [
|
{ value: 0, text: "未处理" },
|
{ value: 1, text: "已处理" },
|
{ value: 2, text: "未完成" },
|
{ value: 3, text: "撤销" },
|
],
|
}
|
},
|
mounted() {
|
this.$byutil.initTableMaxHeight(this);
|
},
|
methods: {
|
handleClose() { //关闭弹框
|
this.dialogVisible = false
|
},
|
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
|
},
|
/*statusFormat(row, column) { //状态
|
if(row.status == 0) {
|
return '未处理'
|
}else if(row.status == 1) {
|
return '已处理'
|
}else if(row.status == 2) {
|
return '未完成'
|
}else if(row.status == 3) {
|
return '撤销'
|
}
|
},*/
|
deleteRow(row) { //撤销
|
this.$confirm('是否继续此操作？','提示',{
|
confirmButtonText:'确定',
|
cancelButtonText:'取消',
|
type:'warning'
|
}).then(() => {
|
console.log('row-------',row.id)
|
this.$byutil.postData(this,this.pageConfig.deleteDataUrl,{id:row.id},res => {
|
this.$message.success(res.msg)
|
this.loadData();
|
})
|
}).catch(() => {
|
this.$message({
|
type:'info',
|
message:"已取消"
|
})
|
})
|
|
},
|
//加载数据
|
loadData() {
|
this.$byutil.loadPageData(this, this.pageConfig.pageDataUrl,this.pageData);
|
},
|
initData() {
|
this.dialogVisible = true
|
this.loadData();
|
},
|
handleSizeChange(val) {
|
this.pageData.pageSize = val;
|
this.loadData();
|
},
|
handleCurrentChange(val) {
|
this.pageData.page = val;
|
this.loadData();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.daibanForm-wrap{
|
.el-dialog__title{
|
color: #fff;
|
}
|
.el-dialog__wrapper{
|
background:rgba(0,0,0,0.6);
|
}
|
.el-dialog, .el-pager li{
|
background:rgba(0,0,0,0.5);
|
}
|
.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 thead{
|
color: #fff;
|
}
|
.el-table{
|
color:#00fff6;
|
}
|
.el-dialog__header{
|
display: flex;
|
justify-content: center;
|
}
|
}
|
.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>
|
.footer-box{
|
margin-top: 20px;
|
display: flex;
|
flex-direction: row-reverse;
|
}
|
</style>
|
