目录代码整合
This commit is contained in:
aixianling
@@ -0,0 +1,461 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user