elink-star
/
esua-epdc-admin
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

项目处理添加处理图片

master
wanggongfeng 4 years ago
parent
2ade54765a
commit
15d38e7a81
1 changed files with 169 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 172
      src/views/modules/events/item-deal-detail-view.vue

172
src/views/modules/events/item-deal-detail-view.vue
View File

@ -150,6 +150,27 @@
show-word-limit
placeholder="请您选择居民诉求的处理情况及答复意见，向居民公开展示"></el-input>
</el-form-item>
<el-form-item label="居民意见图片:" v-loading="loading" prop="outHandleImagesPC">
<el-upload
:action="uploadUrl"
:disabled="isAble"
:class="{hide:hideUploadOut}"
list-type="picture-card"
:file-list="postDataForm.outHandleImagesPC"
:limit=3
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
:on-error="handelError"
:before-upload="beforeAvatarUpload"
style="width:480px">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<div><font color="gray">1~3张图</font></div>
</el-form-item>
<el-form-item label="项目处理意见:"
prop="handleAdvice">
<el-input v-model="postDataForm.handleAdvice"
@ -158,6 +179,24 @@
show-word-limit
placeholder="请您填写项目的实际办理情况(自己处理、吹哨报道、内部协调)，便于相关部门了解项目的实际情况"></el-input>
</el-form-item>
<el-form-item label="处理意见图片:" v-loading="loadingIn" prop="handleImagesPC">
<el-upload
:action="uploadUrl"
:disabled="isAble"
:class="{hide:hideUploadIn}"
list-type="picture-card"
:file-list="postDataForm.handleImagesPC"
:limit=3
:on-preview="handlePictureCardPreviewIn"
:on-remove="handleRemoveIn"
:on-success="handleAvatarSuccessIn"
:on-error="handelErrorIn"
:before-upload="beforeAvatarUploadIn"
style="width:480px">
<i class="el-icon-plus"></i>
</el-upload>
<div><font color="gray">1~3张图</font></div>
</el-form-item>
<el-form-item label="满意度评价:"
prop="evaluateDeptDTOS"
v-if="evaluateDeptDTOSVisible">
@ -244,6 +283,8 @@ import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
import debounce from 'lodash/debounce'
import Cookies from 'js-cookie'
import 'quill/dist/quill.snow.css'
export default {
name: 'itemDealDetailView',
data () {
@ -282,12 +323,23 @@ export default {
outHandleAdvice: '',
handleCategory: '',
deptResultDTOS: [],
evaluateDeptDTOS: []
evaluateDeptDTOS: [],
handleImagesPC: [],
outHandleImagesPC: [],
handleImages: [],
outHandleImages: []
},
deptResultDTOSVisible: false,
evaluateDeptDTOSVisible: false,
timeLineList: [],
options: []
options: [],
loading: false,
loadingIn: false,
uploadUrl: '',
hideUploadOut: false,
hideUploadIn: false,
dialogImageUrl: '',
dialogVisible: false
}
},
mounted () {
@ -399,7 +451,103 @@ export default {
}
}
},
created: function () {
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/uploadImg?token=${Cookies.get('token')}`
this.uploadFileUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/uploadAllFile?token=${Cookies.get('token')}`
},
methods: {
beforeAvatarUpload (file) {
if (this.postDataForm.outHandleImagesPC.length === 3) {
this.$message.error('最多上传3张图片!')
return false
}
this.loading = true
this.isAble = true
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
// 判断是否符合格式要求
if (!isJPG && !isPNG) {
this.$message.error('上传文件必须是jpg、png格式!')
this.loading = false
this.isAble = false
return false
}
},
handleAvatarSuccess (res, file) {
this.loading = false
this.isAble = false
if (res === null || res.data === null || res.data.imgUrl === null) {
this.$message.error('文件上传失败！')
return false
}
this.postDataForm.outHandleImagesPC.push({ url: res.data.imgUrl, thumbnail: res.data.thumbnail, fileType: 1, recordType: 1, fileName: res.data.fileName })
this.hideUploadOut = this.postDataForm.outHandleImagesPC.length >= 3
},
handelError () {
this.loading = false
this.loadingIn = false
this.isAble = false
this.$message.error('上传文件失败!')
},
handleRemove (file, fileList) {
for (var i = 0; i < this.postDataForm.outHandleImagesPC.length; i++) {
let item = this.postDataForm.outHandleImagesPC[i]
if (item.url === file.url) {
this.postDataForm.outHandleImagesPC.splice(i, 1)
}
}
this.hideUploadOut = this.postDataForm.outHandleImagesPC.length >= 3
},
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
beforeAvatarUploadIn (file) {
if (this.postDataForm.handleImagesPC.length === 3) {
this.$message.error('最多上传3张图片!')
return false
}
this.loadingIn = true
this.isAble = true
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
// 判断是否符合格式要求
if (!isJPG && !isPNG) {
this.$message.error('上传文件必须是jpg、png格式!')
this.loadingIn = false
this.isAble = false
return false
}
},
handleAvatarSuccessIn (res, file) {
this.loadingIn = false
this.isAble = false
if (res === null || res.data === null || res.data.imgUrl === null) {
this.$message.error('文件上传失败！')
return false
}
this.postDataForm.handleImagesPC.push({ url: res.data.imgUrl, thumbnail: res.data.thumbnail, fileType: 1, recordType: 1, fileName: res.data.fileName })
this.hideUploadIn = this.postDataForm.handleImagesPC.length >= 3
},
handelErrorIn () {
this.loading = false
this.loadingIn = false
this.isAble = false
this.$message.error('上传文件失败!')
},
handleRemoveIn (file, fileList) {
for (var i = 0; i < this.postDataForm.handleImagesPC.length; i++) {
let item = this.postDataForm.handleImagesPC[i]
if (item.url === file.url) {
this.postDataForm.handleImagesPC.splice(i, 1)
}
}
this.hideUploadIn = this.postDataForm.handleImagesPC.length >= 3
},
handlePictureCardPreviewIn (file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
backToItemDeal () {
this.$parent.selectComponent = 'ItemDeal'
},
@ -533,7 +681,7 @@ export default {
})
}).catch(() => { })
}).catch(() => {
})
},
pageSizeChangeHandleNew (val) {
@ -600,6 +748,18 @@ export default {
this.postDataForm.evaluateDeptDTOS = []
}
this.isAble = true
// 将对象遍历成数组
for (let oimg = 0; oimg < this.postDataForm.outHandleImagesPC.length; oimg++) {
this.postDataForm.outHandleImages[oimg] = this.postDataForm.outHandleImagesPC[oimg].url
}
for (let himg = 0; himg < this.postDataForm.handleImagesPC.length; himg++) {
this.postDataForm.handleImages[himg] = this.postDataForm.handleImagesPC[himg].url
}
console.log(this.postDataForm)
return false
this.$http['post'](
'/events/item/itemHandleSubmit', this.postDataForm).then(({ data: res }) => {
if (res.code !== 0) {
@ -623,6 +783,12 @@ export default {
}
</script>
<style>
.hide .el-upload--picture-card {
display: none;
}
</style>
<style lang="scss">
.project-handle {
.el-timeline {

Write Preview
Loading…
Cancel
Save