462 lines
14 KiB
Vue
462 lines
14 KiB
Vue
<template>
|
||
<div class="message-detail iconPhoto-content">
|
||
<ai-detail>
|
||
<ai-title slot="title" :title="titleText" isShowBack isShowBottomBorder @onBackClick="$emit('back')"></ai-title>
|
||
<template #rightBtn>
|
||
<p class="resident_top_area" style="text-align: right;" v-if="data.status != '2' && $permissions('app_appleavemessagereply_edit')">
|
||
<el-button type="primary" class="el-icon-edit" v-if="data.status == '0'" @click="maskShow = true" style="width:104px">回复留言</el-button>
|
||
<el-button class="el-icon-switch-button del-btn-list" @click="close()" style="width:104px">关闭留言</el-button>
|
||
</p>
|
||
</template>
|
||
|
||
<template #content>
|
||
<ai-card :title="data.title">
|
||
<template #content>
|
||
<div class="content-main">
|
||
<div class="main-header mar-b16">
|
||
<h6 style="font-weight:600;">{{ data.title }}</h6>
|
||
<div class="time">
|
||
<span class="time-label" style="width: 243px;"
|
||
>留言编号：<span style="color:#333">{{ data.msgCode }}</span></span
|
||
>
|
||
<span class="time-label"
|
||
>留言时间：<span style="color:#333">{{ data.createTime }}</span></span
|
||
>
|
||
<span class="time-label" style="width: 258px;text-align: right"
|
||
>留言人：<span style="color:#333">{{ data.leaveName }} {{ data.leavePhone }}</span></span
|
||
>
|
||
<svg class="status-icon" aria-hidden="true">
|
||
<use xlink:href="#iconno_response" v-if="data.status == '0'"></use>
|
||
<use xlink:href="#iconreplied" v-if="data.status == '1'"></use>
|
||
<use xlink:href="#iconfinished" v-if="data.status == '2'"></use>
|
||
</svg>
|
||
</div>
|
||
<p class="message-text border-t" style="padding: 16px">{{ data.content }}</p>
|
||
<div v-if="data.images.length">
|
||
<div class="content-img" v-viewer>
|
||
<img v-for="(item, index) in data.images" :src="item.accessUrl" alt="" :key="index" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main-list">
|
||
<div class="main-header mar-b16">
|
||
<h6 style="font-weight:600;">沟通记录</h6>
|
||
</div>
|
||
<div v-for="(item, index) in data.appLeaveMessageReplyList" :key="index" :class="item.headPortrait == null ? 'message-for reply' : 'message-for'" v-if="data.appLeaveMessageReplyList.length > 0">
|
||
<div class="message-title">
|
||
<img :src="item.headPortrait" alt="" class="user-img" v-if="item.headPortrait" />
|
||
<span class="iconfont iconProfile_Picture" v-else></span>
|
||
<span class="user-name" v-if="!item.headPortrait">
|
||
<span style="color:#5088FF">{{ item.createUnitName }} <span style="color:#333"> 回复</span></span
|
||
><br />
|
||
<span style="color:#999;font-size:12px">操作员：{{ item.createUserName }}{{ item.createUserPhone }}</span>
|
||
</span>
|
||
<span class="user-name" v-else>{{ item.createUserName }}</span>
|
||
|
||
<span style="color:#999;vertical-align: text-bottom">{{ item.createTime }}</span>
|
||
</div>
|
||
<p class="message-text">{{ item.content }}</p>
|
||
<div v-if="item.images.length">
|
||
<div class="message-img-list" v-viewer>
|
||
<img class="message-img" v-for="(items, index) in item.images" :src="items.accessUrl" :key="index" v-if="items.accessUrl" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="data.appLeaveMessageReplyList.length == 0" style="width:100%;text-align:center;color:#999;font-size:14px">暂无沟通记录</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
</template>
|
||
</ai-detail>
|
||
<ai-dialog :title="maskText" :visible.sync="maskShow" @onConfirm="confirm('ruleForm')" @onCancel="hideMask" :before-close="hideMask" width="720px">
|
||
<el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="auto">
|
||
<el-form-item label="回复内容：" prop="content">
|
||
<el-input type="textarea" v-model.trim="ruleForm.content" :row="4" show-word-limit :maxlength="1000" placeholder="请输入回复内容"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="图片附件：" class="user">
|
||
<span class="upload-more left-84">(最多9张)</span>
|
||
<el-upload class="upload-demo upload-list-small" ref="upload" multiple action list-type="picture-card" :file-list="images" :http-request="uploadFile" :on-remove="handleRemove" :on-change="handleChange" accept="jpeg/jpg/png">
|
||
<div class="upload-img-small">
|
||
<span class="iconfont iconPhoto iconPhoto2"></span>
|
||
<div class="upload-text">上传照片</div>
|
||
</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
</ai-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
// import 'viewerjs/dist/viewer.css'
|
||
import Viewer from 'v-viewer'
|
||
import Vue from 'vue'
|
||
Vue.use(Viewer)
|
||
|
||
export default {
|
||
name: 'messageDetail',
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
permissions: Function,
|
||
detailId: String,
|
||
},
|
||
data() {
|
||
return {
|
||
titleText: '留言详情',
|
||
maskShow: false,
|
||
maskText: '回复留言',
|
||
images: [],
|
||
data: {
|
||
appLeaveMessageReplyList: [],
|
||
},
|
||
rules: {
|
||
content: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
|
||
},
|
||
ruleForm: {
|
||
content: '',
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
},
|
||
created() {},
|
||
mounted() {
|
||
console.log(this.user)
|
||
this.getDetailInfo()
|
||
},
|
||
methods: {
|
||
getDetailInfo() {
|
||
this.data.appLeaveMessageReplyList = []
|
||
this.instance.post(`app/appleavemessage/queryDetailById?id=` + this.detailId).then((res) => {
|
||
this.data = res.data
|
||
this.data.images = JSON.parse(res.data.images)
|
||
if (this.data.appLeaveMessageReplyList.length) {
|
||
this.data.appLeaveMessageReplyList.map((item) => {
|
||
if (item.images) {
|
||
item.images = JSON.parse(item.images || '[]')
|
||
}
|
||
return item
|
||
})
|
||
}
|
||
this.data.appLeaveMessageReplyList.reverse()
|
||
})
|
||
},
|
||
confirm(formName) {
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
this.confirmFn()
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
confirmFn() {
|
||
let images = []
|
||
this.images.map((item) => {
|
||
images.push({ fileId: item.fileId, accessUrl: item.accessUrl })
|
||
})
|
||
let params = {
|
||
content: this.ruleForm.content,
|
||
images: JSON.stringify(images),
|
||
msgCode: this.data.msgCode,
|
||
userType: '1',
|
||
createUnitId: this.user.info.unitId,
|
||
createUnitName: this.user.info.unitName,
|
||
}
|
||
this.instance.post(`app/appleavemessagereply/addOrUpdate`, params).then((res) => {
|
||
console.log(res)
|
||
this.maskShow = false
|
||
this.getDetailInfo()
|
||
})
|
||
},
|
||
hideMask() {
|
||
this.maskShow = false
|
||
this.images = []
|
||
this.$nextTick(() => {
|
||
this.$refs.ruleForm.resetFields()
|
||
})
|
||
},
|
||
close() {
|
||
this.$confirm('关闭留言之后，双方都将无法再进行回复，是否确定关闭本次留言？', {
|
||
type: 'warning',
|
||
})
|
||
.then(() => {
|
||
let params = this.data
|
||
params.status = '2'
|
||
params.images = JSON.stringify(params.images)
|
||
if (params.appLeaveMessageReplyList.length) {
|
||
params.appLeaveMessageReplyList.map((item) => {
|
||
item.images = JSON.stringify(item.images)
|
||
return item
|
||
})
|
||
}
|
||
this.instance.post(`app/appleavemessage/addOrUpdate`, params).then((res) => {
|
||
this.getDetailInfo()
|
||
})
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
// 上传照片
|
||
uploadFile(file) {
|
||
console.log(this.images.length > 9)
|
||
if (this.images.length > 9) {
|
||
this.$message.warning('上传图片不能超过9张')
|
||
this.images.map((item, index) => {
|
||
if (item.uid == file.file.uid) {
|
||
this.images.splice(index, 1)
|
||
}
|
||
return this.images
|
||
})
|
||
}
|
||
const isLt2M = file.file.size / 1024 / 1024 < 2
|
||
if (!isLt2M) {
|
||
this.$message.warning('图片大小不能超过 2MB!')
|
||
return
|
||
}
|
||
let formData = new FormData()
|
||
formData.append('file', file.file)
|
||
let file2 = formData
|
||
this.instance.post(`/admin/file/add`, file2, { withCredentials: false }).then((res) => {
|
||
if (res.code == 0) {
|
||
let imgInfo = res.data[0].split(';')
|
||
let img = {
|
||
fileId: imgInfo[1],
|
||
accessUrl: imgInfo[0],
|
||
}
|
||
this.images.map((item, index) => {
|
||
if (item.uid == file.file.uid) {
|
||
this.images[index].fileId = img.fileId
|
||
this.images[index].accessUrl = img.accessUrl
|
||
this.images[index].url = img.accessUrl
|
||
}
|
||
return this.images
|
||
})
|
||
}
|
||
})
|
||
},
|
||
handleChange(file, fileList) {
|
||
this.images = fileList
|
||
},
|
||
handleRemove(file, fileList) {
|
||
this.images = fileList
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.message-detail {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
position: relative;
|
||
background-color: #f3f6f9;
|
||
.left-84 {
|
||
left: -84px;
|
||
}
|
||
.iconProfile_Picture {
|
||
font-size: 40px;
|
||
}
|
||
|
||
.iconBack_Large {
|
||
width: 16px;
|
||
height: 16px;
|
||
color: #2266ff;
|
||
cursor: pointer;
|
||
}
|
||
.content {
|
||
padding-top: 24px;
|
||
width: 100%;
|
||
height: calc(100% - 80px);
|
||
overflow-y: scroll;
|
||
.content-main {
|
||
width: 760px;
|
||
margin: 0 auto;
|
||
.main-header {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
border: 1px solid #eee;
|
||
h6 {
|
||
font-size: 16px;
|
||
color: #333;
|
||
padding: 0 16px;
|
||
min-height: 54px;
|
||
line-height: 54px;
|
||
box-sizing: border-box;
|
||
}
|
||
.time {
|
||
height: 54px;
|
||
line-height: 54px;
|
||
font-size: 12px;
|
||
padding: 0 16px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.time-label {
|
||
color: #999;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.status-icon {
|
||
position: absolute;
|
||
width: 66px;
|
||
height: 66px;
|
||
top: -5px;
|
||
right: 0;
|
||
}
|
||
}
|
||
.main-list {
|
||
background-color: #fff;
|
||
padding-bottom: 80px;
|
||
.message-for {
|
||
width: 728px;
|
||
margin: 0 auto 24px auto;
|
||
padding: 16px 16px 8px;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
.message-title {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin-bottom: 6px;
|
||
.user-img {
|
||
display: inline-block;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background-color: red;
|
||
}
|
||
.user-name {
|
||
display: inline-block;
|
||
width: 510px;
|
||
color: #333;
|
||
vertical-align: text-bottom;
|
||
padding-left: 8px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.message-text {
|
||
padding-left: 48px;
|
||
color: #666;
|
||
margin-bottom: 16px;
|
||
}
|
||
.message-img-list {
|
||
padding-left: 48px;
|
||
.message-img {
|
||
display: inline-block;
|
||
width: 113px;
|
||
height: 113px;
|
||
margin: 0 16px 16px 0;
|
||
}
|
||
}
|
||
}
|
||
.reply {
|
||
background-color: #f5f6f7;
|
||
.message-title {
|
||
.user-name {
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-img {
|
||
padding: 0 16px;
|
||
img {
|
||
width: 84px;
|
||
height: 84px;
|
||
margin: 0 16px 16px 0;
|
||
}
|
||
}
|
||
|
||
.operation-foot {
|
||
overflow: hidden;
|
||
// position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 64px;
|
||
line-height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #f3f6f9;
|
||
box-shadow: inset 0px 1px 0px 0px #eeeeee;
|
||
button {
|
||
width: 92px;
|
||
height: 32px;
|
||
padding: 0 !important;
|
||
}
|
||
.delete-btn {
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
.mask {
|
||
overflow: hidden;
|
||
.el-form-item__content {
|
||
float: left;
|
||
width: calc(100% - 100px) p {
|
||
font-size: 14px;
|
||
color: #222222;
|
||
}
|
||
}
|
||
.el-form-item__label {
|
||
display: inline-block;
|
||
width: 130px;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
float: left;
|
||
}
|
||
.operation {
|
||
overflow: hidden;
|
||
// position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 64px;
|
||
line-height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #f3f6f9;
|
||
box-shadow: inset 0px 1px 0px 0px #eeeeee;
|
||
}
|
||
}
|
||
.status {
|
||
span {
|
||
display: inline-block;
|
||
width: 24px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.status0 {
|
||
background-color: #eff6ff;
|
||
color: #2266ff;
|
||
}
|
||
.status1 {
|
||
background-color: #e8ecff;
|
||
color: #2244ff;
|
||
}
|
||
.status2 {
|
||
background-color: #fff3e8;
|
||
color: #ff8822;
|
||
}
|
||
.status3 {
|
||
background-color: #eaf5e8;
|
||
color: #2ea222;
|
||
}
|
||
.icon {
|
||
display: inline-block;
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-top: 16px;
|
||
}
|
||
}
|
||
</style>
|