You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

742 lines
25 KiB

<template>
<div class="container">
<div style="padding: 0px 20px">
<div ref="lxHeader">
<LxHeader icon="md-apps" text="雨管养护管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content"></div>
<slot>
<div>
<Input class="vm10" style="width: 200px; margin-right: 10px" v-model="searchFields.keyword"
placeholder="关键字搜索" />
<el-select class="vm10" v-model="searchFields.road_id" filterable remote reserve-keyword clearable
@focus="remoteRoad" placeholder="请输入关键词查找道路" :remote-method="remoteMethod" :loading="roadloading">
<el-option v-for="item in roadsList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select class="vm10" filterable v-model="searchFields.area_id" placeholder="请选择所属片区">
<el-option v-for="item in selects.areasList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select class="vm10" filterable v-model="searchFields.maintain_id" placeholder="请选择所属养护单位">
<el-option v-for="item in selects.maintaingroupList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select class="vm10" filterable v-model="searchFields.status" placeholder="请选择状态">
<el-option v-for="item in selects.statusList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select class="vm10" filterable v-model="searchFields.type" placeholder="请选择类型">
<el-option v-for="item in selects.typeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select class="vm10" filterable v-model="searchFields.end_type" placeholder="请选择结办类型">
<el-option v-for="item in selects.endTypeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-select class="vm10" filterable v-model="searchFields.title_id" placeholder="请选择养护内容">
<el-option v-for="item in allmaintaninList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
<el-date-picker class="vm10" v-model="datesearch" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
</el-date-picker>
<Button type="primary" @click="load(false)" style="margin-left: 10px">查询</Button>
<Button type="primary" @click="edit()" style="margin-left: 10px">新增</Button>
<Button type="primary" @click="review()" style="margin-left: 10px">批量复核</Button>
<Button type="primary" @click="exportExcel()" style="margin-left: 10px">导出</Button>
<!-- <Button type="primary" @click="showMap()" style="margin-left: 10px">当月点位</Button> -->
</div>
</slot>
</LxHeader>
</div>
<div ref="lxTable">
<el-table :data="tableData" class="v-table" @row-click="clickShowInfo" @selection-change="handleSelectionChange"
:height="tableHeight" style="width: 100%">
<el-table-column type="selection" fixed width="55"></el-table-column>
<el-table-column type="index" width="50" fixed label="序号" align="center"> </el-table-column>
<el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columns"
:label="column.title" :width="column.width" :fixed="column.fixed">
<template slot-scope="scope">
<div v-if="column.type=='opt'">
<Button ghost size="small" @click.native.stop="showInfo(scope.row,'showform')" type="primary"
style="margin-left: 10px;">查看</Button> <Button v-if="scope.row['status']==0" ghost size="small"
@click.native.stop="showInfo(scope.row,'auditform')" type="primary"
style="margin-left: 10px;">审核</Button>
<Button v-if="scope.row['status']==1&&scope.row['end_type']!=1" ghost size="small"
@click.native.stop="showInfo(scope.row,'endform')" type="primary"
style="margin-left: 10px;">办结</Button>
<el-popover placement="bottom-start" width="200" trigger="hover"
v-if="scope.row['status']!=2&&scope.row['status']!=3&&scope.row['end_type']!=2">
<Button v-if="scope.row['status']==0" ghost size="small" @click.native.stop="edit(scope.row)"
type="primary" style="margin-left: 10px;">编辑</Button>
<Button ghost size="small"
v-if="scope.row['status']==0||scope.row['status']==1&&scope.row['end_type']!=1"
@click.native.stop="del(scope.row)" type="error" style="margin-left: 10px;">删除</Button>
<Button slot="reference" ghost size="small" type="primary" style="margin-left: 10px;">更多</Button>
</el-popover>
</div>
<div v-else-if="column.type=='end_type'">
<el-tag v-if="scope.row[column.field]==1" type="warning">有</el-tag>
<el-tag v-else>无</el-tag>
</div>
<div v-else-if="column.type=='old_type'">
<div v-for="item in selects.typeList">
<el-tag v-if="scope.row[column.field]==item.id">{{item.name}}</el-tag>
</div>
</div>
<div v-else-if="column.type=='status'">
<el-tag v-if="scope.row[column.field]==0">待审核</el-tag>
<el-tag type="success" v-if="scope.row[column.field]==1">已审核</el-tag>
<el-tag type="warning" v-if="scope.row[column.field]==2">已办结</el-tag>
<el-tag type="info" v-if="scope.row[column.field]==3">已退回</el-tag>
<el-tag type="danger" v-if="scope.row[column.field]==4">缺陷办结</el-tag>
</div>
<div v-else-if="column.type=='audit_status' && scope.row['status']==2">
<el-tag v-if="scope.row[column.field]==0">待复核</el-tag>
<el-tag type="success" v-if="scope.row[column.field]==1">已复核</el-tag>
<!-- <el-tag type="warning" v-if="scope.row[column.field]==2">未通过</el-tag> -->
</div>
<div v-else-if="column.type=='audit_status' && scope.row['status']!=2">
</div>
<div v-else-if="column.type=='format'">
{{scope.row[column.field]?scope.row[column.field].name:""}}
</div>
<div v-else-if="column.type=='admin'">
{{getUserName(scope.row)}}
</div>
<div v-else-if="column.type=='maintain'">
{{getMaintinName(scope.row)}}
</div>
<!-- <div v-else-if="column.type=='end_type'">
<el-tag v-if="scope.row[column.field]==0">无</el-tag>
<el-tag type="danger" v-if="scope.row[column.field]==1" >违法转办</el-tag>
</div> -->
<div v-else>{{scope.row[column.field]}}
</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination @current-change="handleCurrentChange" :current-page="paginations.page"
:page-size="paginations.page_size" background layout="prev, pager, next" :total="paginations.total">
</el-pagination>
</div>
</div>
<el-dialog title="雨管养护类型选择" :visible.sync="rainTypeVisible" width="60%">
<div class="dialogConcent">
<el-radio v-model="rainType" :label="1">雨水管道疏挖</el-radio>
<el-radio v-model="rainType" :label="2">雨水管道疏通</el-radio>
<el-radio v-model="rainType" :label="3">汛期助排</el-radio>
<el-radio v-model="rainType" :label="4">污泥外运</el-radio>
<el-radio v-model="rainType" :label="5">出水口排查</el-radio>
<el-radio v-model="rainType" :label="6">专项处理</el-radio>
<el-radio v-model="rainType" :label="7">维修</el-radio>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="resetrainType()">取 消</el-button>
<el-button type="primary" v-preventReClick @click="submitRainType()">确认</el-button>
</div>
</el-dialog>
<el-dialog class="common-dialog" title="批量复核" :visible.sync="reviewFormVisible" width="40%">
<div class="dialogConcent">
<el-scrollbar style="flex: 1">
<el-form :model="reviewForm" ref="reviewForm" label-position="right" :label-width="formLabelWidth">
<el-row>
<el-col :span="24">
<el-form-item label="复核状态" prop="audit_status">
<el-select class="width100" v-model="reviewForm.audit_status" placeholder="请选择复核状态">
<el-option v-for="item in reviewStatusList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="audit_reamrk">
<el-input type="textarea" v-model="reviewForm.audit_reamrk" placeholder="请填写备注" autocomplete="off">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="reviewFormVisible=false">取 消</el-button>
<el-button type="primary" v-preventReClick @click="submitReviewForm('reviewForm')">确认</el-button>
</div>
</el-dialog>
<!-- 新增编辑 -->
<editCirculation ref="editCirculation" @auditSuccess="load"></editCirculation>
<editMire ref="editMire" @auditSuccess="load"></editMire>
<!-- 查看 审核 办结 -->
<showCirculationInfo ref="showCirculationInfo" @auditSuccess="load"></showCirculationInfo>
<showDischargeInfo ref="showDischargeInfo" @auditSuccess="load"></showDischargeInfo>
<showMireInfo ref="showMireInfo" @auditSuccess="load"></showMireInfo>
</div>
</div>
</template>
<script>
import {
listmain,
get,
del,
update,
review
} from '../../../api/rain/maintain.js'
import {
getToken
} from '@/utils/auth'
import {
listarea
} from '../../../api/basic/area.js'
import {
listroad
} from '../../../api/basic/road.js'
import {
listmaintain
} from '../../../api/basic/unit.js'
import {
getparameteritem
} from '../../../api/system/dictionary.js'
import LxHeader from "@/components/LxHeader/index.vue";
import showCirculationInfo from '@/views/rain/maintain/components/showCirculationInfo'
import showDischargeInfo from '@/views/rain/maintain/components/showDischargeInfo'
import showMireInfo from '@/views/rain/maintain/components/showMireInfo'
import editCirculation from '@/views/rain/maintain/components/editCirculation'
import editMire from '@/views/rain/maintain/components/editMire'
import AvueMap from 'avue-plugin-map'
import {
getCurrentMonthFirst,
getCurrentMonthLast
} from "@/utils/index"
export default {
components: {
LxHeader,
AvueMap,
showCirculationInfo,
showDischargeInfo,
showMireInfo,
editCirculation,
editMire,
},
data() {
return {
tableHeight: 0,
formLabelWidth: "120px",
mapArr: [],
tableData: [],
paginations: {
page: 1,
page_size: 15,
total: 0
},
tableHeight: 0,
rainTypeVisible: false,
rainType: 1,
datesearch: "",
baseurl: "",
searchFields: {
is_export: 0,
is_auth: 1
},
roadsList: [],
roadName: "",
roaddisabled: false,
roadloading: false,
selects: {
areasList: [{
id: "",
name: "所有"
}],
typeList: [{
id: "",
name: "所有"
}, {
id: 1,
name: "雨水管道疏挖"
}, {
id: 2,
name: "雨水管道疏通"
}, {
id: 3,
name: "汛期助排"
}, {
id: 4,
name: "污泥外运"
}, {
id: 5,
name: "出水口排查"
}, {
id: 6,
name: "专项处理"
}, {
id: 7,
name: "维修"
}],
statusList: [{
id: "",
name: "所有"
}, {
id: 0,
name: "未审核"
}, {
id: 1,
name: "已审核"
}, {
id: 2,
name: "已办结"
}, {
id: 3,
name: "已退回"
}],
endTypeList: [{
id: 0,
name: "所有"
}, {
id: 1,
name: "养护转办"
}, {
id: 2,
name: "违法转办"
}],
maintaingroupList: [{
id: "",
name: "所有"
}],
},
maintaninList: [],
allmaintaninList: [{
id: "",
value: "所有"
}],
reviewFormVisible: false,
reviewList: [],
reviewForm: {
ids: [],
audit_status: 0,
audit_reamrk: ""
},
reviewStatusList: [{
id: 0,
value: "待复核"
}, {
id: 1,
value: "已复核"
}],
columns: [{
field: "address",
title: "地址/排放点",
type: "string",
align: "left",
fixed: "left",
width: 300
},
{
field: "status",
title: "状态",
type: "status",
align: "center",
fixed: "left",
width: 100
},
{
field: "created_at",
title: "上报时间",
type: "string",
align: "center",
fixed: "left",
width: 180
},
{
field: "audit_status",
title: "复核状态",
type: "audit_status",
align: "center",
fixed: "left",
width: 120
},
// {
// field: "end_type",
// title: "结办类型",
// type: "end_type",
// align: "center",
// width:160
// },
{
field: "userName",
title: "上报人",
type: "admin",
align: "center",
width: 100
},
{
field: "area_info",
title: "所属片区",
type: "format",
align: "center",
width: 120
},
{
field: "maintain",
title: "所属养护单位",
type: "maintain",
align: "center",
width: 120
},
{
field: "old_type",
title: "类型",
type: "old_type",
align: "left",
width: 140
},
{
field: "end_type",
title: "违法转办",
type: "end_type",
align: "center",
width: 100
},
{
field: "操作",
title: "操作",
width: 200,
type: "opt",
fixed: "right"
}
],
}
},
created() {
this.initLoad();
this.load();
},
watch: {
rainType() {
this.roadsList = []
},
datesearch(newVal, oldVal) {
if (newVal) {
this.searchFields.start_date = newVal[0]
this.searchFields.end_date = newVal[1]
} else {
this.searchFields.start_date = ""
this.searchFields.end_date = ""
}
},
'searchFields.type': function(val) {
if (val == 1 || val == 2 || val == 3 || val == 5 || val == 6 || val == 7) {
getparameteritem('maintainContent_' + val).then(res => {
for (var m of res.detail) {
this.allmaintaninList.push(m)
}
})
} else {
this.allmaintaninList = [{
id: "",
value: "所有"
}]
}
},
},
methods: {
initLoad() {
var that = this;
var clientHeight = document.documentElement.clientHeight
var lxHeader_height = 96.5; //查询 头部
var paginationHeight = 37; //分页的高度
var topHeight = 50; //页面 头部
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
that.tableHeight = tableHeight;
that.baseurl = location.host; //process.env.VUE_APP_BASE_API
// this.uploadOther.token = getToken();
listarea({
page: 1,
page_size: 99
}).then(res => {
for (var m of res.data) {
that.selects.areasList.push({
id: m.id,
name: m.name
})
}
})
listmaintain({
page: 1,
page_size: 999,
}).then(response => {
for (var m of response.data) {
this.selects.maintaingroupList.push(m)
}
}).catch(error => {
console.log(error)
reject(error)
});
},
handleCurrentChange(page) {
this.paginations.page = page;
this.load();
},
load(is_export) {
listmain({
page: this.paginations.page,
page_size: this.paginations.page_size,
...this.searchFields
}).then(response => {
let tokens = getToken();
if (is_export) {
var url = "/api/admin/rain-maintains/index?token=" + tokens
for (var m in this.searchFields) {
url += "&" + m + "=" + this.searchFields[m]
}
url = this.baseurl + url
console.log(url)
window.open("http://" + url, '_blank')
this.searchFields.is_export = 0
return;
}
this.tableData = response.data;
this.paginations.total = response.total;
}).catch(error => {
console.log(error)
reject(error)
});
},
exportExcel() {
var that = this
that.searchFields.is_export = 1
that.load(true)
},
handleSelectionChange(val) {
console.log(val)
this.reviewList = val
},
review() {
let data = this.reviewList
let idsArr = [];
if (data.length > 0) {
for (var m of data) {
idsArr.push(m.id)
}
this.reviewForm.ids = idsArr
this.reviewFormVisible = true
} else {
this.$message({
message: '请选择需要复核的信息',
type: 'warning'
});
}
},
submitReviewForm() {
var that = this
console.log(that.reviewForm);
review({
ids: that.reviewForm.ids,
audit_status: that.reviewForm.audit_status,
audit_reamrk: that.reviewForm.audit_reamrk
}).then(response => {
this.$Message.success('操作成功');
that.load();
that.reviewFormVisible = false;
}).catch(error => {
console.log(error)
reject(error)
});
},
remoteRoad() {
this.roadsList = []
},
remoteMethod(query) {
if (query != '') {
this.roadloading = true
listroad({
name: query
}).then(res => {
this.roadloading = false
this.roadsList = res.data
})
} else {
this.roadsList = []
}
},
resetrainType() {
this.rainType = 1
this.rainTypeVisible = false
},
submitRainType() {
var that = this
this.rainTypeVisible = false
if (that.rainType == 1 || that.rainType == 2 || that.rainType == 3 || that.rainType == 5 || that.rainType ==
6 || that.rainType == 7) {
console.log("a", that.rainType)
this.$refs.editCirculation.infoId = ""
this.$refs.editCirculation.rainType = that.rainType
this.$refs.editCirculation.getInfo()
this.$refs.editCirculation.isShow = true
} else if (that.rainType == 4) {
this.$refs.editMire.infoId = ""
this.$refs.editMire.getInfo()
this.$refs.editMire.isShow = true
}
that.rainType = 1
},
edit(obj) {
var that = this;
if (obj) {
if (obj.old_type == 1 || obj.old_type == 2 || obj.old_type == 3 || obj.old_type == 5 || obj.old_type == 6 ||
obj.old_type ==
7) {
this.$refs.editCirculation.rainType = obj.old_type
this.$refs.editCirculation.infoId = obj.id
this.$refs.editCirculation.getInfo(obj.id)
this.$refs.editCirculation.isShow = true
} else if (obj.old_type == 4) {
this.$refs.editMire.infoId = obj.id
this.$refs.editMire.getInfo(obj.id)
this.$refs.editMire.isShow = true
}
} else {
this.rainTypeVisible = true
}
},
clickShowInfo(row) {
this.showInfo(row, 'showform')
},
// 查看 审核 办结
showInfo(obj, formtype) {
if (obj.old_type == 1 || obj.old_type == 2 || obj.old_type == 6 || obj.old_type == 7 || obj.old_type == 5) {
this.$refs.showCirculationInfo.isShow = true
this.$refs.showCirculationInfo.infoId = obj.id
this.$refs.showCirculationInfo.formType = formtype
this.$refs.showCirculationInfo.getInfo(obj.id)
} else if (obj.old_type == 3) {
this.$refs.showDischargeInfo.isShow = true
this.$refs.showDischargeInfo.infoId = obj.id
this.$refs.showDischargeInfo.formType = formtype
this.$refs.showDischargeInfo.getInfo(obj.id)
} else if (obj.old_type == 4) {
this.$refs.showMireInfo.isShow = true
this.$refs.showMireInfo.infoId = obj.id
this.$refs.showMireInfo.formType = formtype
this.$refs.showMireInfo.getInfo(obj.id)
}
},
del(obj) {
var that = this;
if (obj) {
this.$Modal.confirm({
title: '确认要删除数据?',
onOk: () => {
del(obj.id).then(response => {
this.$Message.success('操作成功');
that.load();
}).catch(error => {
console.log(error)
reject(error)
})
},
onCancel: () => {
//this.$Message.info('Clicked cancel');
}
});
}
},
getUserName(row) {
if (row.admin) {
return row.admin.name;
} else if (row.user) {
return row.user.name;
} else {
return "未知";
}
},
getMaintinName(row) {
if (row.user) {
if (row.user.maintain) {
return row.user.maintain.name;
} else {
return "";
}
} else {
return "";
}
},
}
}
</script>
<style lang="scss">
.dialogConcent {
overflow-y: auto;
}
.width100 {
width: 100%;
}
.files_check .el-upload.el-upload--picture-card {
display: none;
}
.vm10 {
margin-right: 10px;
margin-bottom: 10px;
height: 32px;
vertical-align: bottom;
}
.vm10 input {
height: 32px;
vertical-align: middle;
}
.vm10 .el-select__caret.el-input__icon.el-icon-arrow-up {
line-height: 30px;
}
.vm10 .el-input__icon.el-range__icon.el-icon-date,
.vm10 .el-range-separator {
line-height: 25px;
}
.selerchcontent button {
vertical-align: top;
}
</style>