659 lines
18 KiB
Vue
659 lines
18 KiB
Vue
<template>
|
||
<ai-detail class="AppAnnounceDetail" v-loading="isLoading">
|
||
<template slot="title">
|
||
<ai-title title="群发详情" isShowBack isShowBottomBorder @onBackClick="cancel(true)">
|
||
</ai-title>
|
||
</template>
|
||
<template slot="content">
|
||
<ai-card title="基础信息">
|
||
<template #right>
|
||
<div class="right-tips" v-if="info.status === '4'">
|
||
<el-tooltip
|
||
placement="top"
|
||
content="任务开始后，3天内15分钟更新1次，3天后访问页面时触发更新，1小时最多刷新1次">
|
||
<i class="iconfont iconDetails"></i>
|
||
</el-tooltip>
|
||
<span>数据更新于{{ info.dataUpdateTime }}</span>
|
||
</div>
|
||
</template>
|
||
<template #content>
|
||
<ai-wrapper>
|
||
<ai-info-item label="任务名称" isLine :value="info.taskTitle"></ai-info-item>
|
||
<ai-info-item label="任务状态" isLine>
|
||
<span :style="{ color: dict.getColor('mstStatus', info.status) }">{{ dict.getLabel('mstStatus', info.status) }}</span>
|
||
</ai-info-item>
|
||
<ai-info-item label="创建人" isLine>
|
||
<div class="user">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/user.png" />
|
||
<span>{{ info.createUserName }}</span>
|
||
<span>({{ info.createUserDeptName }})</span>
|
||
</div>
|
||
</ai-info-item>
|
||
<ai-info-item label="审批人" isLine v-if="info.enableExamine === '1'">
|
||
<div class="user-wrapper">
|
||
<div class="user" v-for="(item, index) in info.examines" :key="index">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/user.png" />
|
||
<span>{{ item.examineUserName }}</span>
|
||
</div>
|
||
</div>
|
||
</ai-info-item>
|
||
<ai-info-item label="创建时间" :value="info.createTime"></ai-info-item>
|
||
<ai-info-item label="群发时间" :value="info.choiceTime"></ai-info-item>
|
||
<ai-info-item label="群发范围" isLine>
|
||
<div class="text">
|
||
<span>{{ info.sendScope === '0' ? '全部' : '按条件筛选的' }}</span>
|
||
<i>{{ totalLength }}</i>
|
||
<span>个居民</span>
|
||
<em @click="isShowGroups = true">详情</em>
|
||
</div>
|
||
</ai-info-item>
|
||
<ai-info-item label="消息内容" isLine>
|
||
<div class="msg">
|
||
<p>{{ content }}</p>
|
||
<div class="msg-bottom">
|
||
<div class="left" v-if="fileList.length">
|
||
<img :src="mapIcon(fileList[0].msgType)" />
|
||
<span>{{ mapType(fileList[0].msgType) }}{{ fileList[0].mpTitle || fileList[0].name || fileList[0].linkTitle }} 等</span>
|
||
<i>{{ fileList.length }}</i>
|
||
<span>个附件</span>
|
||
</div>
|
||
<div class="left" v-else>
|
||
<span>暂无附件</span>
|
||
</div>
|
||
<div class="right" @click="isShowPhone = true">预览消息</div>
|
||
</div>
|
||
</div>
|
||
</ai-info-item>
|
||
</ai-wrapper>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card title="成员统计">
|
||
<template #content>
|
||
<div class="content-item">
|
||
<div class="top">
|
||
<div class="top-item">
|
||
<div class="top-item__title">
|
||
<h3>预计执行员工</h3>
|
||
</div>
|
||
<p>{{ memberInfo.planCount || 0 }}</p>
|
||
</div>
|
||
<div class="top-item">
|
||
<div class="top-item__title">
|
||
<h3>未执行员工</h3>
|
||
</div>
|
||
<p>{{ memberInfo.unExecutedCount || 0 }}</p>
|
||
</div>
|
||
<div class="top-item">
|
||
<div class="top-item__title">
|
||
<h3>已执行员工</h3>
|
||
</div>
|
||
<p>{{ memberInfo.executedCount || 0 }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="bottom-search">
|
||
<div class="left">
|
||
<el-radio-group v-model="search1.sendStatus" size="small" @change="search1.current = 1, getMemberInfo()">
|
||
<el-radio-button size="small" label="0">未执行</el-radio-button>
|
||
<el-radio-button size="small" label="1">已执行</el-radio-button>
|
||
</el-radio-group>
|
||
<ai-picker
|
||
dialogTitle="选择部门"
|
||
action="/app/wxcp/wxdepartment/departList"
|
||
:instance="instance"
|
||
@pick="e => onUserChange(e, 'search1')" :multiple="false" v-model="user1">
|
||
<div class="userSelcet">
|
||
<span style="color: #606266;" v-if="search1.deptartId"><ai-open-data type="departmentName" :openid="search1.deptartId"></ai-open-data></span>
|
||
<span v-else>部门</span>
|
||
<i class="el-icon-arrow-up" v-if="!search1.deptartId"></i>
|
||
<i class="el-icon-circle-close" v-if="search1.deptartId" @click.stop="user1 = [], search1.deptartId = '', search1.current = 1, getMemberInfo()"></i>
|
||
</div>
|
||
</ai-picker>
|
||
</div>
|
||
<el-button :type="isDisabled ? '' : 'primary'" :disabled="isDisabled" @click="sendMsg(0)" v-if="info.status === '4'">{{ isDisabled ? min + '分钟后可再次提醒' : '提醒成员发送' }}</el-button>
|
||
</div>
|
||
<ai-table
|
||
:tableData="tableData1"
|
||
:col-configs="colConfigs1"
|
||
:total="total1"
|
||
border
|
||
tableSize="small"
|
||
:current.sync="search1.current"
|
||
:size.sync="search1.size"
|
||
@getList="getMemberInfo">
|
||
<el-table-column slot="user" label="员工" align="left">
|
||
<template slot-scope="{ row }">
|
||
<div class="userinfo">
|
||
<span>{{ row.userName }}</span>
|
||
<span style="color: #999">{{ row.userDepartmentName }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
<ai-dialog
|
||
:visible.sync="isShowGroups"
|
||
width="890px"
|
||
customFooter
|
||
title="群发范围"
|
||
@onConfirm="isShowGroups = false">
|
||
<ai-wrapper>
|
||
<ai-info-item label="消息发送" isLine :value="info.taskTitle">
|
||
<div class="text">
|
||
<span>{{ info.sendScope === '0' ? '全部' : '按条件筛选的' }}</span>
|
||
<i>{{ totalLength }}</i>
|
||
<span>个居民</span>
|
||
</div>
|
||
</ai-info-item>
|
||
<ai-info-item label="添加人" isLine :value="userNames"></ai-info-item>
|
||
<ai-info-item label="标签" isLine>{{ info.filterTagsName || '-' }}</ai-info-item>
|
||
</ai-wrapper>
|
||
<div class="dialog-footer" slot="footer">
|
||
<el-button @click="isShowGroups = false">关闭</el-button>
|
||
</div>
|
||
</ai-dialog>
|
||
<div class="detail-phone" v-if="isShowPhone">
|
||
<div class="mask"></div>
|
||
<Phone :avatar="user.info.avatar" @close="isShowPhone = false" :isShowClose="true" :content="content" :fileList="fileList"></Phone>
|
||
</div>
|
||
</template>
|
||
</ai-detail>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
import Phone from './Phone'
|
||
export default {
|
||
name: 'Detail',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
params: Object
|
||
},
|
||
|
||
components: {
|
||
Phone
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
total1: 0,
|
||
isShowGroups: false,
|
||
isShowPhone: false,
|
||
user1: [],
|
||
user2: [],
|
||
radio1: '未执行',
|
||
search1: {
|
||
current: 1,
|
||
size: 10,
|
||
deptartId: '',
|
||
type: 0,
|
||
sendStatus: '0'
|
||
},
|
||
memberInfo: {},
|
||
groupInfo: {},
|
||
tableData1: [],
|
||
fileList: [],
|
||
tableData2: [],
|
||
info: {},
|
||
content: '',
|
||
currIndex: 0,
|
||
colConfigs1: [
|
||
{ slot: 'user', label: '成员' },
|
||
{ prop: 'customerCount', label: '预计发送朋友圈', align: 'center' }
|
||
],
|
||
groups: [],
|
||
timer: null,
|
||
min: 60,
|
||
isDisabled: false,
|
||
rejecterId: '',
|
||
userNames: '',
|
||
isLoading: false
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['user']),
|
||
|
||
totalLength () {
|
||
if (!this.info.executorList) {
|
||
return 0
|
||
}
|
||
|
||
return this.info.executorList.map(v => v.customerCount).reduce((prev, cur) => {
|
||
return prev + cur
|
||
}, 0)
|
||
}
|
||
},
|
||
|
||
created () {
|
||
this.getInfo(this.params.id)
|
||
this.getMemberInfo()
|
||
},
|
||
|
||
destroyed () {
|
||
clearInterval(this.timer)
|
||
},
|
||
|
||
methods: {
|
||
getMemberInfo () {
|
||
this.instance.post(`/app/whchatmomentstask/detailStatistics`, null, {
|
||
params: {
|
||
...this.search1,
|
||
taskId: this.params.id
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.tableData1 = res.data.executedList.records
|
||
this.total1 = res.data.executedList.total
|
||
this.memberInfo = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
onUserChange (e, search) {
|
||
if (e.length) {
|
||
this[search].deptartId = e[0].id
|
||
} else {
|
||
this[search].deptartId = ''
|
||
}
|
||
|
||
this[search].current = 1
|
||
this.getMemberInfo()
|
||
},
|
||
|
||
sendMsg () {
|
||
this.instance.post(`/app/whchatmomentstask/remindSend?id=${this.params.id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.$message.success('提醒成功')
|
||
this.getInfo(this.params.id)
|
||
}
|
||
})
|
||
},
|
||
|
||
countdown () {
|
||
this.timer = setInterval(() => {
|
||
const nowTime = this.$moment(new Date())
|
||
const min = nowTime.diff(this.info.remindTime, 'minute')
|
||
this.min = (60 - min)
|
||
|
||
if (this.min <= 0) {
|
||
this.isDisabled = false
|
||
clearInterval(this.timer)
|
||
} else {
|
||
this.isDisabled = true
|
||
}
|
||
}, 1000)
|
||
},
|
||
|
||
getInfo (id) {
|
||
this.isLoading = true
|
||
this.instance.post(`/app/whchatmomentstask/queryDetailById?id=${id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.info = res.data
|
||
if (res.data.status === '4' && res.data.remindTime) {
|
||
this.countdown()
|
||
}
|
||
|
||
const content = res.data.contents.filter(v => v.msgType === '0')
|
||
|
||
if (content.length) {
|
||
this.content = content[0].content
|
||
}
|
||
|
||
this.fileList = res.data.contents.filter(v => v.msgType !== '0').map(v => {
|
||
return {
|
||
...v,
|
||
...v.sysFile
|
||
}
|
||
})
|
||
|
||
let userNames = ''
|
||
res.data.executorList.forEach(e => {
|
||
userNames = e.executorName + userNames
|
||
})
|
||
|
||
this.userNames = res.data.executorList.map(e => e.executorName).join(',')
|
||
|
||
if (res.data.examines && res.data.examines.length) {
|
||
const user = res.data.examines.filter(v => v.examineStatus === '2')
|
||
|
||
if (user.length) {
|
||
this.rejecterId = user[0].examineUserId
|
||
}
|
||
}
|
||
}
|
||
this.isLoading = false
|
||
})
|
||
},
|
||
|
||
mapType (type) {
|
||
return {
|
||
1: '图片',
|
||
2: '视频',
|
||
3: '文件',
|
||
4: '网站',
|
||
5: '小程序'
|
||
}[type]
|
||
},
|
||
|
||
mapIcon (type) {
|
||
return {
|
||
1: 'https://cdn.cunwuyun.cn/dvcp/announce/img.png',
|
||
2: 'https://cdn.cunwuyun.cn/dvcp/announce/video.png',
|
||
3: 'https://cdn.cunwuyun.cn/dvcp/announce/folder.png',
|
||
4: 'https://cdn.cunwuyun.cn/dvcp/announce/site.png',
|
||
5: 'https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png'
|
||
}[type]
|
||
},
|
||
|
||
cancel (isRefresh) {
|
||
this.$emit('change', {
|
||
type: 'List',
|
||
isRefresh: !!isRefresh
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.AppAnnounceDetail {
|
||
position: relative;
|
||
.user-wrapper {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.detail-phone {
|
||
position: fixed;
|
||
left: 0%;
|
||
top: 0%;
|
||
z-index: 11;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.mask {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
background: rgba($color: #000000, $alpha: 0.6);
|
||
}
|
||
|
||
:deep( .phone-container ){
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
z-index: 11;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
.userSelcet {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 215px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
margin-left: 12px;
|
||
border-radius: 4px;
|
||
border: 1px solid #d0d4dc;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||
|
||
&:hover {
|
||
border-color: #26f;
|
||
}
|
||
|
||
i {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 30px;
|
||
height: 100%;
|
||
line-height: 32px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
color: #d0d4dc;
|
||
transform: rotateZ(180deg);
|
||
}
|
||
|
||
.el-icon-circle-close:hover {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
span {
|
||
flex: 1;
|
||
padding: 0 15px;
|
||
font-size: 12px;
|
||
color: $placeholderColor;
|
||
}
|
||
}
|
||
|
||
.userinfo {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
line-height: 1;
|
||
|
||
span:first-child {
|
||
margin-bottom: 4px;
|
||
}
|
||
}
|
||
.user {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1;
|
||
margin-right: 8px;
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
span {
|
||
position: relative;
|
||
top: 2px;
|
||
color: #222222;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
i {
|
||
color: #2266FF;
|
||
font-style: normal;
|
||
}
|
||
|
||
em {
|
||
margin-left: 8px;
|
||
color: #2266FF;
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
cursor: pointer;
|
||
transition: all ease 0.3s;
|
||
|
||
&:hover {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.msg {
|
||
background: #F9F9F9;
|
||
border-radius: 2px;
|
||
border: 1px solid #D0D4DC;
|
||
|
||
p {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
line-height: 38px;
|
||
padding: 0px 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.msg-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 38px;
|
||
padding: 0 16px;
|
||
border-top: 1px solid #D0D4DC;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span {
|
||
color: #222222;
|
||
font-size: 14px;
|
||
}
|
||
|
||
i {
|
||
color: #2266FF;
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
color: #2266FF;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep( .AppAnnounceDetail-title ){
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
height: 100%;
|
||
line-height: 56px;
|
||
margin-right: 32px;
|
||
color: #888888;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
transition: all ease 0.3s;
|
||
border-bottom: 3px solid transparent;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
&:hover {
|
||
color: #222;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&.active {
|
||
color: #222222;
|
||
border-bottom: 3px solid #2266FF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-item {
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
|
||
.top-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
flex: 1;
|
||
height: 90px;
|
||
margin-right: 16px;
|
||
padding: 0 16px;
|
||
background: #F9F9F9;
|
||
border-radius: 2px;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.top-item__title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
|
||
i {
|
||
margin-left: 4px;
|
||
color: #8899bb;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
h3 {
|
||
color: #222222;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
p {
|
||
color: #2266FF;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-search {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep( .right-tips ){
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
i {
|
||
margin-right: 4px;
|
||
color: #8899bb;
|
||
font-size: 16px;
|
||
}
|
||
|
||
span {
|
||
color: #888888;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|