|
|
<template>
|
|
|
<div>
|
|
|
<!--污泥外运 4 -->
|
|
|
<dialogShow :title="title" :is-show.sync="isShow" :width="width" @resetform="resetForm('form')">
|
|
|
<template v-slot:content>
|
|
|
<el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="labelwidth">
|
|
|
<el-row>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="所属道路" prop="road_id">
|
|
|
<el-select class="width100" v-model="roadName" filterable remote @change="chooseRoad"
|
|
|
:disabled="roaddisabled" clearable @focus="remoteRoad" reserve-keyword 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-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="外运时间" prop="date">
|
|
|
<el-date-picker class="width100" v-model="form.date" type="datetime" placeholder="选择日期时间"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss">
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="备用排放点" prop="address">
|
|
|
<el-input type="text" v-model="form.address" placeholder="请填写备用排放点" autocomplete="off"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="描述" prop="content">
|
|
|
<el-input type="textarea" v-model="form.content" placeholder="请填写描述" autocomplete="off"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="附件" prop="files_list">
|
|
|
<el-upload multiple action="/api/admin/upload-file" list-type="picture-card" :file-list="filesList"
|
|
|
ref="pictureUpload" :auto-upload="true" :data="uploadOther" :on-error="handleError"
|
|
|
:on-success="function(responsose,file,fileList) {return handlesuccess(responsose,file,fileList,1)}">
|
|
|
<i slot="default" class="el-icon-plus"></i>
|
|
|
<div slot="file" slot-scope="{file}">
|
|
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
|
|
|
<span class="el-upload-list__item-actions">
|
|
|
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file,filesList)">
|
|
|
<i class="el-icon-zoom-in"></i>
|
|
|
</span>
|
|
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
|
<i class="el-icon-delete"></i>
|
|
|
</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</el-upload>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template v-slot:footerbtn>
|
|
|
<el-button type="primary" v-preventReClick @click="submitForm('form')">保存</el-button>
|
|
|
</template>
|
|
|
|
|
|
</dialogShow>
|
|
|
|
|
|
|
|
|
<div>
|
|
|
<el-dialog class="common-dialog showbigimg" :visible.sync="dialogVisible">
|
|
|
<i v-if="noNext" class="el-icon-arrow-left" @click="showNextBigPic"></i>
|
|
|
<div v-for="(item,index) in filesImgList" :key="index">
|
|
|
<img width="100%" :src="item.url" v-if="dialogImageIndex==index">
|
|
|
</div>
|
|
|
<i v-if="noNext" class="el-icon-arrow-right" @click="showNextBigPic('next')"></i>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
get,
|
|
|
storemire,
|
|
|
savemire,
|
|
|
} from '../../../../api/rain/maintain.js'
|
|
|
import {
|
|
|
getparameteritem
|
|
|
} from '../../../../api/system/dictionary.js'
|
|
|
import {
|
|
|
listroad
|
|
|
} from '../../../../api/basic/road.js'
|
|
|
import dialogShow from '@/components/dialogShow'
|
|
|
export default {
|
|
|
components: {
|
|
|
dialogShow
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
formType: "showform", // 审核：auditform 办结 endform 查看 showform
|
|
|
title: "污泥外运",
|
|
|
width: "60%",
|
|
|
labelwidth: "120px",
|
|
|
isShow: false,
|
|
|
infoId: "",
|
|
|
dialogImageUrl: "",
|
|
|
dialogVisible: false,
|
|
|
dialogImageIndex: 0,
|
|
|
filesImgList: [],
|
|
|
noNext: false,
|
|
|
disabled: false,
|
|
|
uploadOther: {
|
|
|
token: ""
|
|
|
},
|
|
|
mapparams: {
|
|
|
zoom: 11,
|
|
|
},
|
|
|
mapform: [],
|
|
|
roadsList: [],
|
|
|
roadName: "",
|
|
|
roaddisabled: false,
|
|
|
roadloading: false,
|
|
|
filesList: [],
|
|
|
// 区分 排水
|
|
|
form: {},
|
|
|
rules: {}
|
|
|
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
infoId(val) {
|
|
|
this.infoId = val
|
|
|
},
|
|
|
// mapform(newVal, oldVal) {
|
|
|
// this.form.longitude = newVal[0];
|
|
|
// this.form.latitude = newVal[1];
|
|
|
// // if(this.rainType!=4){
|
|
|
// this.form.address = newVal[2];
|
|
|
// // }
|
|
|
// },
|
|
|
},
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
initload() {},
|
|
|
getInfo(id) {
|
|
|
var that = this;
|
|
|
// this.resetForm()
|
|
|
// that.mainList = that.maintaninList['maintainContent_' + this.rainType]
|
|
|
if (id) {
|
|
|
that.form = {}
|
|
|
get(id).then(res => {
|
|
|
let result = Object.assign(that.form, res);
|
|
|
that.roadName = ""
|
|
|
that.roaddisabled = true
|
|
|
|
|
|
that.form = result['mire_info'];
|
|
|
that.form['mire_id'] = result['mire_id'];
|
|
|
that.roadName = that.form.road ? that.form.road.name : ""
|
|
|
that.mapform = [that.form.longitude, that.form.latitude, that.form.address]
|
|
|
that.form.old_type = result.old_type
|
|
|
that.form.type = result.old_type
|
|
|
let _files = [];
|
|
|
for (var mod of that.form['mire_files']) {
|
|
|
let m = Object.assign({}, mod);
|
|
|
m.url = mod.files.url;
|
|
|
m.id = mod.files.id;
|
|
|
m.photoType = "before";
|
|
|
_files.push(m);
|
|
|
}
|
|
|
|
|
|
that.filesList = _files;
|
|
|
|
|
|
|
|
|
}).catch(error => {
|
|
|
//reject(error)
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
submitForm(formName) {
|
|
|
var that = this;
|
|
|
var listUrlbefore = []
|
|
|
for (var m of this.filesList) {
|
|
|
m.photoType = "before";
|
|
|
if (m.response)
|
|
|
listUrlbefore.push({
|
|
|
"upload_id": m.response.id
|
|
|
});
|
|
|
else
|
|
|
listUrlbefore.push({
|
|
|
"upload_id": m.id
|
|
|
});
|
|
|
}
|
|
|
this.form.files_list = listUrlbefore;
|
|
|
|
|
|
console.log("that.form", that.form)
|
|
|
// return
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
if (valid) {
|
|
|
if (that.infoId) {
|
|
|
savemire(that.form).then(response => {
|
|
|
this.$Message.success('操作成功');
|
|
|
this.$emit('auditSuccess')
|
|
|
that.isShow = false;
|
|
|
}).catch(error => {
|
|
|
//reject(error)
|
|
|
})
|
|
|
} else {
|
|
|
storemire(that.form).then(response => {
|
|
|
this.$Message.success('操作成功');
|
|
|
this.$emit('auditSuccess')
|
|
|
that.isShow = false;
|
|
|
}).catch(error => {
|
|
|
//reject(error)
|
|
|
})
|
|
|
}
|
|
|
} else {
|
|
|
this.$Message.error('数据校验失败');
|
|
|
console.log('error submit!!');
|
|
|
return false;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
resetForm(formName) {
|
|
|
var that = this;
|
|
|
that.filesList = [];
|
|
|
that.roadName = ""
|
|
|
that.rainType = ""
|
|
|
that.roaddisabled = false
|
|
|
this.form = {
|
|
|
type: 4
|
|
|
}
|
|
|
},
|
|
|
chooseRoad(val) {
|
|
|
this.form.road_id = val
|
|
|
},
|
|
|
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 = []
|
|
|
}
|
|
|
},
|
|
|
handleRemove(file) {
|
|
|
for (var i = 0; i < this.filesList.length; i++) {
|
|
|
if (this.filesList[i].url == file.url) {
|
|
|
this.filesList.splice(i, 1)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
handlesuccess(response, file, fileList, index) {
|
|
|
if (index == 1) {
|
|
|
file.photoType = "before"
|
|
|
this.filesList = fileList;
|
|
|
// this.form.files_list = listUrl;
|
|
|
} else {
|
|
|
|
|
|
file.photoType = "after"
|
|
|
this.dealFilesList = fileList
|
|
|
}
|
|
|
this.$message({
|
|
|
message: '上传成功',
|
|
|
type: 'success'
|
|
|
});
|
|
|
},
|
|
|
|
|
|
handleError(err, file, fileList) {
|
|
|
this.$message.error('上传失败，重新上传');
|
|
|
},
|
|
|
handlePictureCardPreview(file, whichfilelist) {
|
|
|
this.filesImgList = whichfilelist
|
|
|
if (this.filesImgList.length > 1) {
|
|
|
this.noNext = true
|
|
|
} else {
|
|
|
this.noNext = false
|
|
|
}
|
|
|
for (var i = 0; i < this.filesImgList.length; i++) {
|
|
|
if (this.filesImgList[i].url == file.url) {
|
|
|
this.dialogImageIndex = i
|
|
|
}
|
|
|
}
|
|
|
this.dialogVisible = true;
|
|
|
},
|
|
|
showNextBigPic(next) {
|
|
|
let imgLength = this.filesImgList.length
|
|
|
if (next == 'next') {
|
|
|
this.dialogImageIndex++
|
|
|
if (this.dialogImageIndex > imgLength - 1) {
|
|
|
this.dialogImageIndex = 0
|
|
|
}
|
|
|
} else {
|
|
|
this.dialogImageIndex--
|
|
|
if (this.dialogImageIndex < 0) {
|
|
|
this.dialogImageIndex = imgLength - 1
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
.showbigimg {
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
.showbigimg .el-dialog__body {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.showbigimg .el-dialog__body div {
|
|
|
text-align: center;
|
|
|
width: 90%;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.showbigimg .el-icon-arrow-left {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 1%;
|
|
|
transform: translate(0%, -50%);
|
|
|
font-size: 60px;
|
|
|
}
|
|
|
|
|
|
.showbigimg .el-icon-arrow-right {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
right: 1%;
|
|
|
transform: translate(0%, -50%);
|
|
|
font-size: 60px;
|
|
|
}
|
|
|
</style>
|
