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.
301 lines
9.7 KiB
301 lines
9.7 KiB
5 years ago
|
<template>
|
||
|
|
<el-card shadow="never" class="aui-card--fill">
|
||
|
|
<el-form v-if="pove" :model="dataForm" :rules="dataRule" ref="dataForm" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'" :disabled="pageDisabled">
|
||
|
|
<el-form-item label="留言人" label-width="100px">
|
||
|
|
<el-input
|
||
|
|
:rows="3"
|
||
|
|
v-model="dataForm.boradName"
|
||
|
|
style="width:50%">
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="留言时间" label-width="100px">
|
||
|
|
<el-input
|
||
|
|
:rows="3"
|
||
|
|
v-model="dataForm.createTime"
|
||
|
|
style="width:50%">
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="留言人所属网格" label-width="100px">
|
||
|
|
<div>{{dataForm.dept}}</div>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="留言内容" prop="content" label-width="100px">
|
||
|
|
<el-input
|
||
|
|
type="textarea"
|
||
|
|
:rows="3"
|
||
|
|
placeholder="请输入会议内容，2000字以内"
|
||
|
|
v-model="dataForm.content"
|
||
|
|
maxlength="2000"
|
||
|
|
style="width:50%">
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="留言图片" v-loading="loading" prop="images" label-width="100px">
|
||
|
|
<el-upload
|
||
|
|
ref="upload"
|
||
|
|
:action="uploadUrl"
|
||
|
|
:class="{hide:hideUpload}"
|
||
|
|
list-type="picture-card"
|
||
|
|
:file-list="dataForm.images"
|
||
|
|
: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>
|
||
|
|
<el-form v-if="replyState" :model="dataForm" :rules="dataRule" ref="dataForm" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'" :disabled="pageDisabled">
|
||
|
|
<el-form-item label="回复内容" prop="content" label-width="100px">
|
||
|
|
<el-input
|
||
|
|
type="textarea"
|
||
|
|
:rows="3"
|
||
|
|
placeholder="请输入会议内容，2000字以内"
|
||
|
|
v-model="dataForm.replyContent"
|
||
|
|
maxlength="2000"
|
||
|
|
style="width:50%">
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="回复图片" v-loading="loading" prop="images" label-width="100px">
|
||
|
|
<el-upload
|
||
|
|
ref="upload"
|
||
|
|
:action="uploadUrl"
|
||
|
|
:class="{hide:hideUpload}"
|
||
|
|
list-type="picture-card"
|
||
|
|
:file-list="dataForm.replyimages"
|
||
|
|
: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 v-if="isAble" label="回复人" label-width="100px">
|
||
|
|
<div>{{dataForm.replyName}}</div>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item v-if="isAble" label="回复时间" label-width="100px">
|
||
|
|
<div>{{dataForm.replyTime}}</div>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<el-form>
|
||
|
|
<el-form-item style="margin-left:35px;">
|
||
|
|
<el-button type="primary" @click="backToUserRelationList">{{"返回"}}</el-button>
|
||
|
|
<el-button v-if="!pageDisabled" type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import debounce from 'lodash/debounce'
|
||
|
|
import Cookies from 'js-cookie'
|
||
|
|
export default {
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
visible: false,
|
||
|
|
pove: false,
|
||
|
|
dataForm: {
|
||
|
|
id: '',
|
||
|
|
userId: '',
|
||
|
|
boradName: '',
|
||
|
|
dept: '',
|
||
|
|
deptId: '',
|
||
|
|
content: '',
|
||
|
|
images: [],
|
||
|
|
replyimages: [],
|
||
|
|
createTime: '',
|
||
|
|
replyContent: '',
|
||
|
|
replyName: '',
|
||
|
|
replyTime: ''
|
||
|
|
},
|
||
|
|
isAble: false,
|
||
|
|
replyState: true,
|
||
|
|
meetTypeArr: [],
|
||
|
|
dailyTypeArr: [],
|
||
|
|
hideUpload: false,
|
||
|
|
pageDisabled: false,
|
||
|
|
// imgUrlArr: [],
|
||
|
|
mapSelectVisible: false,
|
||
|
|
uploadUrl: '',
|
||
|
|
loading: false,
|
||
|
|
dialogImageUrl: '',
|
||
|
|
dialogVisible: false,
|
||
|
|
options: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created: function () {
|
||
|
|
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/uploadImg?token=${Cookies.get('token')}`
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
dataRule () {
|
||
|
|
return {
|
||
|
|
boradId: [
|
||
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
|
|
],
|
||
|
|
userId: [
|
||
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
|
|
],
|
||
|
|
userName: [
|
||
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
|
|
],
|
||
|
|
replyContent: [
|
||
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
|
|
],
|
||
|
|
delFlag: [
|
||
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
|
|
],
|
||
|
|
revision: [
|
||
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
|
|
],
|
||
|
|
createdBy: [
|
||
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
|
|
],
|
||
|
|
createdTime: [
|
||
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
|
|
],
|
||
|
|
updatedBy: [
|
||
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
|
|
],
|
||
|
|
updatedTime: [
|
||
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
debugger
|
||
|
|
this.pageDisabled = this.$route.query.disabled
|
||
|
|
this.hideUpload = this.$route.query.disabled
|
||
|
|
if (this.$route.query.id !== '' && this.$route.query.id != null) {
|
||
|
|
this.dataForm.id = this.$route.query.id
|
||
|
|
this.getInfo()
|
||
|
|
} else {
|
||
|
|
// 随手记下拉框赋值
|
||
|
|
this.getInfo()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init () {
|
||
|
|
this.visible = true
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs['dataForm'].resetFields()
|
||
|
|
if (this.dataForm.id) {
|
||
|
|
this.getInfo()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取信息
|
||
|
|
getInfo () {
|
||
|
|
this.$http.get(`/news/messageboradreply/${this.dataForm.id}`).then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
this.dataForm = {
|
||
|
|
...this.dataForm,
|
||
|
|
...res.data
|
||
|
|
}
|
||
|
|
}).catch(() => {})
|
||
|
|
},
|
||
|
|
// 表单提交
|
||
|
|
dataFormSubmitHandle: debounce(function () {
|
||
|
|
this.$refs['dataForm'].validate((valid) => {
|
||
|
|
if (!valid) {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
this.$http[!this.dataForm.id ? 'post' : 'put']('/news/messageboradreply/', this.dataForm).then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
this.$message({
|
||
|
|
message: this.$t('prompt.success'),
|
||
|
|
type: 'success',
|
||
|
|
duration: 500,
|
||
|
|
onClose: () => {
|
||
|
|
this.visible = false
|
||
|
|
this.$emit('refreshDataList')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}).catch(() => {})
|
||
|
|
})
|
||
|
|
}, 1000, { 'leading': true, 'trailing': false }),
|
||
|
|
|
||
|
|
handleAvatarSuccess (res, file) {
|
||
|
|
this.loading = false
|
||
|
|
this.isAble = false
|
||
|
|
if (res === null || res.data === null || res.data.imgUrl === null) {
|
||
|
|
this.$message.error('文件上传失败！')
|
||
|
|
this.handleErrorRemove(file)
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
this.dataForm.images.push({ url: res.data.imgUrl, thumbnail: res.data.thumbnail, fileType: 1 })
|
||
|
|
this.hideUpload = this.dataForm.images.length >= 3
|
||
|
|
},
|
||
|
|
handleErrorRemove (file) {
|
||
|
|
// 实现缩略图模板时删除文件
|
||
|
|
let fileList = this.$refs.upload.uploadFiles
|
||
|
|
for (var i = 0; i < fileList.length; i++) {
|
||
|
|
let item = fileList[i]
|
||
|
|
if (item.url === file.url) {
|
||
|
|
fileList.splice(i, 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handelError () {
|
||
|
|
this.loading = false
|
||
|
|
this.isAble = false
|
||
|
|
this.$message.error('上传文件失败!')
|
||
|
|
},
|
||
|
|
handlePictureCardPreview (file) {
|
||
|
|
this.dialogImageUrl = file.url
|
||
|
|
this.dialogVisible = true
|
||
|
|
},
|
||
|
|
handleRemove (file, fileList) {
|
||
|
|
for (var i = 0; i < this.dataForm.images.length; i++) {
|
||
|
|
let item = this.dataForm.images[i]
|
||
|
|
if (item.url === file.url) {
|
||
|
|
this.dataForm.images.splice(i, 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.hideUpload = this.dataForm.images.length >= 9
|
||
|
|
},
|
||
|
|
beforeAvatarUpload (file) {
|
||
|
|
if (this.dataForm.images.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'
|
||
|
|
// const isLt1M = file.size / 1024 / 1024 < 1
|
||
|
|
// 判断是否符合格式要求
|
||
|
|
if (!isJPG && !isPNG) {
|
||
|
|
this.$message.error('上传文件必须是jpg、png格式!')
|
||
|
|
this.loading = false
|
||
|
|
this.isAble = false
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 返回按钮点击事件
|
||
|
|
backToUserRelationList () {
|
||
|
|
this.$emit('MessageBoradReply')
|
||
|
|
this.$parent.selectComponent = 'MessageBoradReply'
|
||
|
|
this.$router.push({ path: '/events-borad-boradReplyRoute' })
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|