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.
572 lines
17 KiB
572 lines
17 KiB
<template>
|
|
<div>
|
|
<c-dialog :title="'建议详情'"
|
|
:visible="diaVisible"
|
|
:width="dialogWidth"
|
|
:confirm="'回复'"
|
|
:showConfirm="showConfirm"
|
|
@ok="save"
|
|
@cancel="diaCancel">
|
|
<div class="div_total">
|
|
<el-tag type="info"
|
|
class="eltag"
|
|
size="medium"
|
|
style="width:100%;margin-top:10px">建议详情</el-tag>
|
|
<div>
|
|
<!-- 第一行 -->
|
|
<el-row type="flex"
|
|
:gutter="gutterPro">
|
|
<el-col :span="spanThree">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="spanTitle">
|
|
<div class="form-title">{{'客  户  名'}}</div>
|
|
</el-col>
|
|
<el-col :span="spanCon">
|
|
<div class="form-content">{{adviceData.customerName}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="spanThree">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="spanTitle">
|
|
<div class="form-title">{{'组  织  名'}}</div>
|
|
</el-col>
|
|
<el-col :span="spanCon">
|
|
<div class="form-content">{{adviceData.agencyName}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="spanThree">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="spanTitle">
|
|
<div class="form-title">{{'网  格  名'}}</div>
|
|
</el-col>
|
|
<el-col :span="spanCon">
|
|
<div class="form-content">{{adviceData.gridName}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第二行 -->
|
|
<el-row type="flex"
|
|
:gutter="gutterPro">
|
|
<el-col :span="spanThree">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="spanTitle">
|
|
<div class="form-title">{{'注册手机'}}</div>
|
|
</el-col>
|
|
<el-col :span="spanCon">
|
|
<div class="form-content">{{adviceData.regPhone}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="spanThree">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="spanTitle">
|
|
<div class="form-title">{{'问题分类'}}</div>
|
|
</el-col>
|
|
<el-col :span="spanCon">
|
|
<div class="form-content">{{adviceData.adviceType}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="spanThree">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="spanTitle">
|
|
<div class="form-title">{{'提出时间'}}</div>
|
|
</el-col>
|
|
<el-col :span="spanCon">
|
|
<div class="form-content">{{adviceData.adviceTime}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第三行 -->
|
|
<el-row type="flex"
|
|
:gutter="gutterPro">
|
|
<el-col :span="spanThree">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="spanTitle">
|
|
<div class="form-title">{{'提  出  者'}}</div>
|
|
</el-col>
|
|
<el-col :span="spanCon">
|
|
<div class="form-content">{{adviceData.userName}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="spanThree">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="spanTitle">
|
|
<div class="form-title">{{'联系方式'}}</div>
|
|
</el-col>
|
|
<el-col :span="spanCon">
|
|
<div class="form-content">{{adviceData.phone}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<!-- 第四行 -->
|
|
<el-row type="flex"
|
|
:gutter="gutterPro">
|
|
<el-col :span="spanOne">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="span2Title">
|
|
<div class="form-title margin2">{{'建议内容'}}</div>
|
|
</el-col>
|
|
<el-col :span="span2Con">
|
|
<div class="form-content bg-gray">{{adviceData.adviceContent}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<!-- 第五行 -->
|
|
<el-row type="flex"
|
|
:gutter="gutterPro">
|
|
<el-col :span="spanOne">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="span2Title">
|
|
<div class="form-title margin2">{{'建议图片'}}</div>
|
|
</el-col>
|
|
<el-col :span="span2Con">
|
|
<el-image v-for="(item,index) in adviceData.imgList"
|
|
style="width:70px;height:70px;margin-right:15px"
|
|
:key="index"
|
|
:src="item"
|
|
:preview-src-list="adviceData.imgList">
|
|
</el-image>
|
|
<!-- <img v-for="(item,index) in adviceData.imgList"
|
|
:key="index"
|
|
:src="item"
|
|
style="width:70px;height:70px;margin-right:15px"
|
|
class="function-icon"> -->
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</div>
|
|
|
|
<el-tag type="info"
|
|
class="eltag"
|
|
size="medium"
|
|
style="width:100%;margin-top:10px">回复详情</el-tag>
|
|
<div>
|
|
<div v-if="!showConfirm">
|
|
<el-row type="flex"
|
|
:gutter="gutterPro">
|
|
<el-col :span="spanThree">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="spanTitle">
|
|
<div class="form-title">{{'回    复    者'}}</div>
|
|
</el-col>
|
|
<el-col :span="spanCon">
|
|
<div class="form-content">{{adviceData.replyUserName}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="spanThree">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="spanTitle">
|
|
<div class="form-title">{{'回  复  时  间'}}</div>
|
|
</el-col>
|
|
<el-col :span="spanCon">
|
|
<div class="form-content">{{adviceData.replyTime}}</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row :gutter="gutterPro">
|
|
<el-col :span="spanOne">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="span2Title">
|
|
<div class="form-title margin2">{{'回  复  内  容'}}</div>
|
|
</el-col>
|
|
<el-col :span="span2Con">
|
|
<div class="form-content">{{adviceData.replyContent}}</div>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row :gutter="gutterPro">
|
|
<el-col :span="spanOne">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="span2Title">
|
|
<div class="form-title margin2">{{'政府回复文本'}}</div>
|
|
</el-col>
|
|
<el-col :span="span2Con">
|
|
<div class="form-content">{{adviceData.govContent}}</div>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row :gutter="gutterPro">
|
|
<el-col :span="spanOne">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="span2Title">
|
|
<div class="form-title margin2">{{'政府回复取证'}}</div>
|
|
</el-col>
|
|
<el-col :span="span2Con">
|
|
<el-image v-for="(item,index) in adviceData.govImgList"
|
|
style="width:70px;height:70px;margin-right:15px"
|
|
:key="index"
|
|
:src="item"
|
|
:preview-src-list="adviceData.govImgList">
|
|
</el-image>
|
|
<!-- <img v-for="(item,index) in adviceData.govImgList"
|
|
:key="index"
|
|
:src="item"
|
|
style="width:70px;height:70px;margin-right:15px"
|
|
class="function-icon"> -->
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
<div v-if="showConfirm">
|
|
|
|
<el-row :gutter="gutterPro">
|
|
<el-col :span="spanOne">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="span2Title">
|
|
<div class="form-title margin2">{{'回  复  内  容'}}</div>
|
|
</el-col>
|
|
<el-col :span="span2Con">
|
|
|
|
<el-input type="textarea"
|
|
:rows="4"
|
|
resize="none"
|
|
maxlength="500"
|
|
show-word-limit
|
|
style="width:600px"
|
|
placeholder='请输入回复内容'
|
|
v-model="adviceData.replyContent"></el-input>
|
|
<div class="input_tip">建议只可回复一次，请谨慎回复</div>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row :gutter="gutterPro">
|
|
<el-col :span="spanOne">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="span2Title">
|
|
<div class="form-title margin2">{{'政府回复文本'}}</div>
|
|
</el-col>
|
|
<el-col :span="span2Con">
|
|
|
|
<el-input type="textarea"
|
|
:rows="4"
|
|
resize="none"
|
|
maxlength="500"
|
|
style="width:600px"
|
|
show-word-limit
|
|
placeholder='请输入政府回复文本'
|
|
v-model="adviceData.govContent"></el-input>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row :gutter="gutterPro">
|
|
<el-col :span="spanOne">
|
|
<el-row :gutter="gutterCon">
|
|
<el-col :span="span2Title">
|
|
<div class="form-title margin2">{{'政府回复取证'}}</div>
|
|
</el-col>
|
|
<el-col :span="span2Con">
|
|
|
|
<el-upload :headers="$getElUploadHeaders()" class="avatar-uploader"
|
|
ref="uploadPic"
|
|
:action="uploadUlr"
|
|
:data="{customerId:adviceData.customerId}"
|
|
list-type="picture-card"
|
|
:on-exceed="exceedPic"
|
|
:on-remove="removePic"
|
|
:file-list="replayImgList"
|
|
:on-success="handleSuccess"
|
|
:limit="3">
|
|
<span class="font-14">选择图片</span>
|
|
<div slot="tip"
|
|
class="upload_tip">最多上传3张图片，图片支持jpg、jpeg、bmp、git或png格式</div>
|
|
</el-upload>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</c-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* eslint-disable */
|
|
import CForm from '@c/CForm'
|
|
import CDialog from '@c/CDialog'
|
|
import { mapGetters } from 'vuex'
|
|
import { Loading } from 'element-ui' // 引入Loading服务
|
|
import { requestPost } from "@/js/dai/request";
|
|
|
|
let loading // 加载动画
|
|
export default {
|
|
data () {
|
|
return {
|
|
gutterPro: 10,//每个属性的列间隔
|
|
gutterCon: 5,//标题和内容的列间隔
|
|
spanThree: 8,//每行三列的列宽
|
|
spanOne: 24,
|
|
spanTitle: 9,//标题列宽
|
|
spanCon: 15,//内容列宽
|
|
|
|
span2Title: 3,
|
|
span2Con: 20,
|
|
|
|
srcList: [],
|
|
|
|
diaVisible: false,
|
|
adviceId: '',//建议id，父组件传来
|
|
adviceData: {
|
|
customerId: "",//客户id
|
|
customerName: '',//客户名
|
|
agencyName: '',//组织名
|
|
gridName: '',//网格名
|
|
userName: '',//提出人名字
|
|
regPhone: '',//注册时的联系电话
|
|
adviceType: '',//问题分类，后台拼接
|
|
phone: '',//填写的联系电话
|
|
adviceTime: '',//建议时间
|
|
adviceContent: '',//建议内容
|
|
imgList: [],//建议图片列表
|
|
replyContent: '',//回复内容 无为空字符串
|
|
replyTime: '',//回复时间 无为空字符串
|
|
replyUserName: '',//回复人
|
|
govContent: '',//政府回复文本
|
|
govImgList: [],//政府回复取证
|
|
},
|
|
showConfirm: true,
|
|
replayImgList: [],
|
|
|
|
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
|
|
// upload_url: '', // 上传URL
|
|
upload_name: '', // 图片或视频名称
|
|
|
|
}
|
|
},
|
|
components: {
|
|
CForm, CDialog
|
|
},
|
|
mounted () {
|
|
},
|
|
computed: {
|
|
dialogWidth () {
|
|
return this.resolution === 'small' ? 70 : 60
|
|
},
|
|
tableHeight () {
|
|
return this.clientHeight - 60 - 80 - 80 - 50 - 400
|
|
},
|
|
...mapGetters(['clientHeight', 'resolution'])
|
|
},
|
|
methods: {
|
|
// eslint-disable-next-line
|
|
async initData (row) {
|
|
this.diaVisible = true
|
|
this.adviceId = row.id
|
|
await this.getData()
|
|
|
|
},
|
|
|
|
async getData () {
|
|
this.startLoading()
|
|
//const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/useradvice/advicedetail"
|
|
const url = "/epmetuser/useradvice/advicedetail"
|
|
|
|
const params = {
|
|
adviceId: this.adviceId
|
|
}
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
if (code === 0) {
|
|
// this.endLoading()
|
|
if (data) {
|
|
this.adviceData = data
|
|
if (this.adviceData.replyContent === '' || this.adviceData.replyContent === null) {
|
|
this.showConfirm = true
|
|
} else {
|
|
this.showConfirm = false
|
|
}
|
|
}
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
this.endLoading()
|
|
},
|
|
|
|
removePic (file, fileList) {
|
|
|
|
this.adviceData.govImgList.splice(this.adviceData.govImgList.findIndex(item => item === file.url), 1)
|
|
this.replayImgList.splice(this.replayImgList.findIndex(item => item.uid === file.uid), 1)
|
|
|
|
|
|
},
|
|
exceedPic () {
|
|
this.$message.warning("最多上传3张预览图片")
|
|
|
|
},
|
|
handleSuccess (response, file, fileList) {
|
|
|
|
this.replayImgList.push(file)
|
|
this.adviceData.govImgList.push(response.data.url)
|
|
|
|
},
|
|
|
|
save () {
|
|
if (this.adviceData.replyContent === "" || this.adviceData.replyContent === null) {
|
|
this.$message.warning("请填写回复内容")
|
|
return
|
|
}
|
|
|
|
|
|
this.startLoading()
|
|
// let url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/useradvice/replyadvice'
|
|
let url = '/epmetuser/useradvice/replyadvice'
|
|
// 表单对象
|
|
|
|
let _data = {
|
|
adviceId: this.adviceData.adviceId,
|
|
replyContent: this.adviceData.replyContent,
|
|
govContent: this.adviceData.govContent,
|
|
govImgList: this.adviceData.govImgList
|
|
}
|
|
|
|
|
|
window.app.ajax.post(url, _data,
|
|
(data, rspMsg) => {
|
|
this.endLoading()
|
|
this.$message.success('回复成功')
|
|
this.diaCancel()
|
|
this.$emit('refresh')
|
|
},
|
|
(rspMsg, data) => {
|
|
this.endLoading()
|
|
this.$message.error(rspMsg)
|
|
})
|
|
|
|
},
|
|
diaCancel () {
|
|
this.replayImgList = []
|
|
this.diaVisible = false
|
|
},
|
|
// 开启加载动画
|
|
startLoading () {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: '正在加载……', // 加载中需要显示的文字
|
|
background: 'rgba(0,0,0,.7)' // 背景颜色
|
|
})
|
|
},
|
|
// 结束加载动画
|
|
endLoading () {
|
|
// clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scope>
|
|
.div_total {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.el-row {
|
|
margin-bottom: 5px;
|
|
margin-top: 5px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
/* &:last-child {
|
|
margin-bottom: 0;
|
|
} */
|
|
}
|
|
.el-col {
|
|
border-radius: 4px;
|
|
height: 100%;
|
|
}
|
|
.margin2 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.bg-gray {
|
|
background: #ececec;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.form-title {
|
|
margin-left: 10px;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
|
|
line-height: 30px;
|
|
}
|
|
.form-content {
|
|
padding: 0 5px;
|
|
text-align: left;
|
|
border-radius: 4px;
|
|
line-height: 30px;
|
|
}
|
|
.input_tip {
|
|
color: #e60000;
|
|
margin: 10px 0 0 0;
|
|
}
|
|
.upload_tip {
|
|
color: #7a7a7a;
|
|
margin: 10px 0 0 0;
|
|
}
|
|
</style>
|
|
|