<template>
|
<div class="mod-config" style="padding: 10px 10px 0px 10px;">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form-item label="车牌号">
|
<el-input v-model="searchForm.carNo" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="事件类型">
|
<el-select v-model="searchForm.type" placeholder="请选择" clearable>
|
<el-option label="现场处罚" :value="0"></el-option>
|
<el-option label="上级任务" :value="1"></el-option>
|
<el-option label="违章拖车" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="缴费状态">
|
<el-select v-model="searchForm.payStatus" placeholder="请选择" clearable>
|
<el-option label="待缴费" :value="0"></el-option>
|
<el-option label="已缴费" :value="1"></el-option>
|
<el-option label="缴费失败" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="违章类型">
|
<el-select v-model="searchForm.violationTypeId" clearable>
|
<el-option v-for="item in table1" :key="item.id" :label="item.name" :value="item.id" ></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="small" @click="getDataList" icon="el-icon-search">查询</el-button>
|
</el-form-item>
|
</el-form>
|
|
<div class="avue-crud">
|
<el-table
|
:height="tableHeight"
|
:data="pageData.rows"
|
border
|
v-loading="pageData.isLoading">
|
<el-table-column
|
type="index"
|
width="50"
|
label="序号"
|
align="center">
|
</el-table-column>
|
<el-table-column
|
prop="carNo"
|
width="100px"
|
header-align="center"
|
align="center"
|
label="车牌号">
|
</el-table-column>
|
<el-table-column
|
prop="type"
|
width="100px"
|
header-align="center"
|
align="center"
|
label="事件类型">
|
<template slot-scope="scope">
|
<p v-if="scope.row.type==0" >现场处罚</p>
|
<p v-if="scope.row.type==1">上级任务</p>
|
<p v-if="scope.row.type==2">违章拖车</p>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="carType"
|
width="90px"
|
header-align="center"
|
align="center"
|
label="车辆类型">
|
</el-table-column>
|
<el-table-column
|
prop="color"
|
width="90px"
|
header-align="center"
|
align="center"
|
label="车辆颜色">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
header-align="center"
|
align="center"
|
label="违法地点">
|
</el-table-column>
|
<el-table-column
|
prop="money"
|
width="100px"
|
header-align="center"
|
align="center"
|
label="应缴金额">
|
</el-table-column>
|
|
<el-table-column
|
prop="payStatus"
|
width="100px"
|
header-align="center"
|
align="center"
|
label="缴费状态">
|
<template slot-scope="scope">
|
<p v-if="scope.row.payStatus==0" style="color: red">待缴费</p>
|
<p v-if="scope.row.payStatus==1">已缴费</p>
|
<p v-if="scope.row.payStatus==2" style="color: blue">缴费失败</p>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="userName"
|
width="100px"
|
header-align="center"
|
align="center"
|
label="处理人">
|
</el-table-column>
|
<el-table-column
|
prop="violationTypeName"
|
header-align="center"
|
align="center"
|
width="100px"
|
label="违章类型">
|
</el-table-column>
|
<el-table-column
|
prop="remark"
|
header-align="center"
|
align="center"
|
label="备注">
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
header-align="center"
|
align="center"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" icon="el-icon-view" @click="addOrUpdateHandle(scope.row.id)">处决书</el-button>
|
<el-button type="text" size="small" icon="el-icon-view" @click="addOrUpdateHandle2(scope.row)">送达回证</el-button>
|
<el-button type="text" size="small" icon="el-icon-view" @click="pictureHandle(scope.row)">图像证据</el-button>
|
<el-button type="text" size="small" icon="el-pay6zhifu" @click="jiaofeiHandle(scope.row.id)">现场缴费</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination background @size-change="onPageSizeChange" @current-change="onCurrentPageChange" :current-page="pageData.currentPage" :page-size="pageData.pageSize" :total="pageData.total" style="float: right"></el-pagination>
|
|
</div>
|
|
<!-- 弹窗, 新增 / 修改 -->
|
<table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
|
<table-form2 v-if="addOrUpdateVisible2" ref="addOrUpdate2" @refreshDataList="getDataList"></table-form2>
|
<!--图像证据-->
|
<pictureForm v-if="pictureFormVisiable" ref="pictureForm"></pictureForm>
|
</div>
|
</template>
|
|
<script>
|
import TableForm from './ticket-form'
|
import TableForm2 from './ticket-form2'
|
import pictureForm from './picture-form'
|
export default {
|
data () {
|
return {
|
tableHeight:650,
|
dataForm: {
|
key: ''
|
},
|
table1:[],
|
pageData: this.$byutil.defaultPageData(),
|
searchForm: {
|
current:this.pageIndex,
|
size:this.pageSize,
|
carNo:'',
|
type:null,
|
violationTypeId:null,
|
payStatus:null,
|
},
|
dataList: [],
|
pageIndex: 1,
|
pageSize: 10,
|
totalPage: 0,
|
dataListLoading: false,
|
addOrUpdateVisible: false,
|
addOrUpdateVisible2: false,
|
pictureFormVisiable:false, //图像证据弹框
|
}
|
},
|
components: {
|
TableForm,
|
TableForm2,
|
pictureForm
|
},
|
created () {
|
this.getDataList()
|
this.findAllViolation()
|
this.tableHeight = window.innerHeight - 255
|
},
|
computed: {
|
|
},
|
methods: {
|
// 获取数据列表
|
getDataList () {
|
this.dataListLoading = true
|
this.searchForm.current=this.pageIndex
|
this.searchForm.size=this.pageSize
|
this.$byutil.loadPageData(this, this.$systemconfig.basePath+'/ffzf/ticket/findPage', this.searchForm);
|
this.dataListLoading = false
|
},
|
findAllViolation(){
|
this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/violationtype/findAll', this.formData, res => {
|
this.table1 = res.data;
|
})
|
},
|
onPageSizeChange(val) {
|
this.pageData.pageSize = val;
|
this.getDataList();
|
},
|
onCurrentPageChange(val) {
|
this.pageData.page = val;
|
this.getDataList();
|
},
|
pictureHandle(data) {
|
console.log(data,'data=====')
|
let imgArry = []
|
if(data.img) {
|
imgArry = data.img.split(',')
|
console.log(imgArry,'imgArry====')
|
}
|
this.pictureFormVisiable = true
|
this.$nextTick(() => {
|
this.$refs.pictureForm.init(imgArry)
|
})
|
|
},
|
// 新增 / 修改
|
addOrUpdateHandle (id) {
|
this.addOrUpdateVisible = true
|
this.$nextTick(() => {
|
this.$refs.addOrUpdate.init(id)
|
})
|
},
|
// 新增 / 修改
|
addOrUpdateHandle2 (row) {
|
if(row.personName != null){
|
this.addOrUpdateVisible2 = true
|
this.$nextTick(() => {
|
this.$refs.addOrUpdate2.init(id)
|
})
|
}else {
|
this.$message.error("处决书还未填写！")
|
}
|
|
},
|
//现场缴费
|
jiaofeiHandle(id){
|
this.$byutil.postData(this, this.$systemconfig.basePath+'/ffzf/ticket/jiaofei', {id:id}, res => {
|
if(res.code===0){
|
this.$message.success(res.msg)
|
}else {
|
this.$message.error(res.msg)
|
}
|
})
|
},
|
}
|
}
|
</script>
|
