313 lines
8.4 KiB
Vue
313 lines
8.4 KiB
Vue
<template>
|
|
<div class="detail">
|
|
<div class="task">
|
|
<div class="task_title">群发客户群</div>
|
|
<div class="task_content">
|
|
<div class="item">
|
|
<span>任务名称</span>
|
|
<span>{{ data.taskTitle }}</span>
|
|
</div>
|
|
<div class="item">
|
|
<span>创建人</span>
|
|
<span>
|
|
<AiOpenData type="userName" :openid="data.createUserId"></AiOpenData>
|
|
</span>
|
|
</div>
|
|
<div class="item" v-if="data.enableExamine == 1">
|
|
<span>审批人</span>
|
|
<span>
|
|
<span v-for="(item, index) in approver" :key="index" style="color: #333;">
|
|
<AiOpenData type="userName" :openid="item.examineUserId" style="display: inline-block"></AiOpenData><span v-if="approver.length>1">、</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="item">
|
|
<span>所在部门</span>
|
|
<span style="display: flex;">
|
|
<div v-if="data.createUserDept"><AiOpenData type="departmentName" :openid="data.createUserDept" style="display: inline-block;"></AiOpenData></div>
|
|
<!-- <div v-if="data.createUserSecondDept"><AiOpenData type="departmentName" :openId="data.createUserSecondDept" style="display: inline-block"></AiOpenData></div> -->
|
|
</span>
|
|
</div>
|
|
<div class="item">
|
|
<span>群发时间</span>
|
|
<span>{{ data.choiceTime }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="task_results" v-if="data.enableExamine == 1">
|
|
<img v-if="data.status == 1" src="./images/refuse.png" alt="">
|
|
<img v-if="data.status == 2" src="./images/pass.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="info">
|
|
<div class="scope">
|
|
<span>群发范围</span>
|
|
<span v-if="data.sendScope==0">全部{{ data.receiveGroupCount || 0}}个居民群</span>
|
|
<span v-if="data.sendScope==1 || data.sendScope==2">按条件筛选的{{ data.receiveGroupCount || 0}}个居民群</span>
|
|
</div>
|
|
<div class="content">
|
|
<p>群发内容</p>
|
|
<div>
|
|
<!-- 文本 -->
|
|
<div class="textarea" v-show="content.length">{{ content }}</div>
|
|
<!-- 图片 -->
|
|
<div class="pictures" v-show="picList.length">
|
|
<image v-for="(item, index) in picList" :key="index" :src="item.imgPicUrl" @click.stop="previewImages(picList, item.imgPicUrl)"/>
|
|
</div>
|
|
<!-- 视频 -->
|
|
<div class="video" v-show="videoList.length">
|
|
<video v-for="(item, index) in videoList" :key="index" :src="item.imgPicUrl"/>
|
|
</div>
|
|
<!-- 文件 -->
|
|
<div class="file" v-show="fileList.length">
|
|
<div class="file_item" v-for="(item,index) in fileList" :key="index" @click="prevFile(item.sysFile)">
|
|
<img src="./images/files.png" alt="">
|
|
<div>{{ item.sysFile.name }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- 网页 -->
|
|
<div class="webpage" v-show="webpage.length">
|
|
<p>链接地址</p>
|
|
<a v-for="(item, index) in webpage" :key="index" :href="item.linkUrl">
|
|
<div v-if="item.linkTitle">{{item.linkTitle}}</div>
|
|
<div v-else>{{ item.linkUrl }}</div>
|
|
</a>
|
|
</div>
|
|
<!-- 小程序 -->
|
|
<div class="miniapp" v-show="miniapp.length">
|
|
<p>小程序</p>
|
|
<div v-for="(item, index) in miniapp" :key="index">{{item.mpTitle}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn" v-if="data.status==0 && data.haveExaminPower">
|
|
<div class="refuse" @click="refuseBtn">审核拒绝</div>
|
|
<div class="pass" @click="passBtn">审核通过</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState ,mapActions } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
id: "",
|
|
data: {},
|
|
content: '',
|
|
picList: [],
|
|
videoList: [],
|
|
fileList: [],
|
|
webpage: [],
|
|
miniapp: [],
|
|
pictres: [],
|
|
options: '',
|
|
approver: [], //审批人
|
|
}
|
|
},
|
|
onLoad(o) {
|
|
this.id = o.id
|
|
},
|
|
computed: {
|
|
...mapState(['user'])
|
|
},
|
|
methods: {
|
|
getDetail() {
|
|
this.$http.post(`/app/appmasssendingtask/queryDetailById?id=${this.id}`).then(res=> {
|
|
if (res?.data) {
|
|
this.data = res.data
|
|
this.content = res.data.contents.filter(v=> v.msgType == 0)?.[0].content
|
|
this.picList = res.data.contents.filter(v=> v.msgType == 1)
|
|
this.videoList = res.data.contents.filter(v=> v.msgType == 2)
|
|
this.fileList = res.data.contents.filter(v=> v.msgType == 3)
|
|
this.webpage = res.data.contents.filter(v=> v.msgType == 4)
|
|
this.miniapp = res.data.contents.filter(v=> v.msgType == 5)
|
|
if(res.data.status==1) { // 拒绝
|
|
this.approver = res.data.examines.filter(e=> e.examineStatus == 2)
|
|
} else { // 通过
|
|
this.approver = res.data.examines
|
|
}
|
|
}
|
|
})
|
|
},
|
|
previewImages(images, img) {
|
|
uni.previewImage({
|
|
urls: images.map(v => v.imgPicUrl),
|
|
current: img
|
|
})
|
|
},
|
|
...mapActions(['previewFile']),
|
|
prevFile(file) {
|
|
this.$loading()
|
|
this.previewFile({ ...file }).then(()=>{
|
|
this.$hideLoading()
|
|
})
|
|
},
|
|
// 拒绝
|
|
refuseBtn() {
|
|
this.pass = 0
|
|
this.$confirm('确定要审核拒绝该数据？').then(() => {
|
|
this.examine()
|
|
})
|
|
},
|
|
// 通过
|
|
passBtn() {
|
|
this.pass = 1
|
|
this.$confirm('确定审核通过该数据？').then(() => {
|
|
this.examine()
|
|
})
|
|
},
|
|
examine() {
|
|
this.$http.post(`/app/appmasssendingtask/examine`,null,{
|
|
params: {
|
|
pass: this.pass,
|
|
id: this.id,
|
|
options: this.options
|
|
}
|
|
}).then(res => {
|
|
if(res?.code == 0) {
|
|
this.$u.toast('审批成功')
|
|
this.getDetail()
|
|
}
|
|
}).catch(()=> {
|
|
})
|
|
},
|
|
},
|
|
onShow() {
|
|
document.title = "群发审批"
|
|
this.getDetail()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail {
|
|
padding: 32px 32px 140px 32px;
|
|
box-sizing: border-box;
|
|
.task {
|
|
position: relative;
|
|
margin-bottom: 24px;
|
|
background: #FFF;
|
|
border-radius: 8px;
|
|
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
|
|
.task_title {
|
|
padding: 26px 32px;
|
|
box-sizing: border-box;
|
|
border-bottom: 2px solid #DDDDDD;
|
|
}
|
|
.task_content {
|
|
padding: 0 32px 26px 32px;
|
|
box-sizing: border-box;
|
|
.item {
|
|
display: flex;
|
|
padding-top: 26px;
|
|
box-sizing: border-box;
|
|
span:first-child {
|
|
width: 160px;
|
|
color: #999999;
|
|
}
|
|
span:last-child {
|
|
width: calc(100% - 160px);
|
|
}
|
|
}
|
|
}
|
|
.task_results {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: 30px;
|
|
img {
|
|
width: 160px;
|
|
height: 130px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info {
|
|
background: #FFF;
|
|
border-radius: 8px;
|
|
padding: 26px 32px;
|
|
box-sizing: border-box;
|
|
.scope {
|
|
display: flex;
|
|
margin-bottom: 16px;
|
|
span:first-child {
|
|
width: 160px;
|
|
color: #999;
|
|
}
|
|
span:last-child {
|
|
width: calc(100% - 160px);
|
|
}
|
|
}
|
|
.content {
|
|
p {
|
|
color: #999;
|
|
}
|
|
.textarea,
|
|
.pictures,
|
|
.video,
|
|
.file,
|
|
.webpage,
|
|
.miniapp {
|
|
background: #F9F9F9;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
margin-top: 26px;
|
|
}
|
|
.pictures {
|
|
margin-top: 16px;
|
|
image {
|
|
width: 190px;
|
|
height: 190px;
|
|
margin-right: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
image:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.video {
|
|
video {
|
|
height: 300px;
|
|
}
|
|
}
|
|
.file {
|
|
.file_item {
|
|
display: flex;
|
|
align-items: center;
|
|
img {
|
|
width: 96px;
|
|
height: 96px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
position: fixed;
|
|
display: flex;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 112px;
|
|
line-height: 112px;
|
|
font-size: 32px;
|
|
z-index: 9;
|
|
.refuse {
|
|
width: 40%;
|
|
height: 100%;
|
|
background: #FFF;
|
|
color: #FF4466;
|
|
text-align: center;
|
|
}
|
|
.pass {
|
|
width: 60%;
|
|
height: 100%;
|
|
background: #3975C6;
|
|
color: #FFF;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |