2022-07-13 09:13:31 +08:00
|
|
|
|
<template>
|
2022-07-15 10:40:02 +08:00
|
|
|
|
<ai-detail class="AppAnnounceDetail">
|
2022-07-13 09:13:31 +08:00
|
|
|
|
<template slot="title">
|
2022-07-15 10:40:02 +08:00
|
|
|
|
<ai-title title="群发详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
2022-07-13 09:13:31 +08:00
|
|
|
|
</ai-title>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template slot="content">
|
2022-07-15 10:40:02 +08:00
|
|
|
|
<ai-card title="基础信息">
|
|
|
|
|
|
<template #right>
|
|
|
|
|
|
<div class="right-tips">
|
|
|
|
|
|
<el-tooltip
|
|
|
|
|
|
placement="top"
|
|
|
|
|
|
content="任务开始后，3天内15分钟更新1次，3天后访问页面时触发更新，1时间最多刷新1次">
|
|
|
|
|
|
<i class="iconfont iconDetails"></i>
|
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
|
<span>数据更新于2022-07-06 09:23</span>
|
2022-07-13 09:13:31 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
2022-07-15 10:40:02 +08:00
|
|
|
|
<template #content>
|
|
|
|
|
|
<ai-wrapper>
|
|
|
|
|
|
<ai-info-item label="任务名称" isLine value="群发的任务名称群发的任务名称群发的任务名称群发的任务名称"></ai-info-item>
|
|
|
|
|
|
<ai-info-item label="任务状态" isLine>
|
|
|
|
|
|
<span>进行中</span>
|
|
|
|
|
|
</ai-info-item>
|
|
|
|
|
|
<ai-info-item label="创建人">
|
|
|
|
|
|
<div class="user">
|
|
|
|
|
|
<img src="https://cdn.cunwuyun.cn/dvcp/announce/user.png" />
|
|
|
|
|
|
<span>陈沐</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</ai-info-item>
|
|
|
|
|
|
<ai-info-item label="审批人">
|
|
|
|
|
|
<div class="user">
|
|
|
|
|
|
<img src="https://cdn.cunwuyun.cn/dvcp/announce/user.png" />
|
|
|
|
|
|
<span>陈沐</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</ai-info-item>
|
|
|
|
|
|
<ai-info-item label="创建时间" value="2021-05-12 18:00"></ai-info-item>
|
|
|
|
|
|
<ai-info-item label="群发时间" value="2021-05-12 18:00"></ai-info-item>
|
|
|
|
|
|
<ai-info-item label="群发范围" isLine>
|
2022-07-15 14:37:02 +08:00
|
|
|
|
<div class="text">
|
2022-07-15 10:40:02 +08:00
|
|
|
|
<span>按条件筛选的</span>
|
|
|
|
|
|
<i>222</i>
|
|
|
|
|
|
<span>个客户群</span>
|
|
|
|
|
|
<em>详情</em>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</ai-info-item>
|
|
|
|
|
|
<ai-info-item label="消息内容" isLine>
|
|
|
|
|
|
<div class="msg">
|
|
|
|
|
|
<p>样眼专系要反决十听社养天车度命部对思工美议不想率化和想由然同油能务养也只也布我情点教包江经面队号都今先把层变水口较到个是族连界...</p>
|
|
|
|
|
|
<div class="msg-bottom">
|
|
|
|
|
|
<div class="left">
|
|
|
|
|
|
<img src="https://cdn.cunwuyun.cn/dvcp/announce/img.png" />
|
|
|
|
|
|
<span>图片附件235325346.jpg 等</span>
|
|
|
|
|
|
<i>3</i>
|
|
|
|
|
|
<span>个附近</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="right">预览消息</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</ai-info-item>
|
|
|
|
|
|
</ai-wrapper>
|
|
|
|
|
|
</template>
|
2022-07-13 09:13:31 +08:00
|
|
|
|
</ai-card>
|
2022-07-15 10:40:02 +08:00
|
|
|
|
<ai-card>
|
|
|
|
|
|
<template #title>
|
|
|
|
|
|
<div class="AppAnnounceDetail-title">
|
|
|
|
|
|
<span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">成员统计</span>
|
|
|
|
|
|
<span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">居民群统计</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
2022-07-13 09:13:31 +08:00
|
|
|
|
<template #content>
|
2022-07-15 10:40:02 +08:00
|
|
|
|
<div class="content-item" v-if="currIndex === 0">
|
|
|
|
|
|
<div class="top">
|
|
|
|
|
|
<div class="top-item">
|
|
|
|
|
|
<div class="top-item__title">
|
|
|
|
|
|
<h3>计划执行成员</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>3,324</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="top-item">
|
|
|
|
|
|
<div class="top-item__title">
|
|
|
|
|
|
<h3>未执行成员</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>3,324</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="top-item">
|
|
|
|
|
|
<div class="top-item__title">
|
|
|
|
|
|
<h3>已执行成员</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>3,324</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="top-item">
|
|
|
|
|
|
<div class="top-item__title">
|
|
|
|
|
|
<h3>无法执行成员</h3>
|
|
|
|
|
|
<el-tooltip
|
|
|
|
|
|
placement="top"
|
|
|
|
|
|
content="由于员工不在可见范围、离职、客户群接收已达到上限等原因，无法执行群发任务的成员总数">
|
|
|
|
|
|
<i class="iconfont iconDetails"></i>
|
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>3,324</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
|
<div class="bottom-search">
|
|
|
|
|
|
<div class="left">
|
|
|
|
|
|
<el-radio-group v-model="radio1" size="small">
|
|
|
|
|
|
<el-radio-button size="small" label="未执行"></el-radio-button>
|
|
|
|
|
|
<el-radio-button size="small" label="已执行"></el-radio-button>
|
|
|
|
|
|
<el-radio-button size="small" label="无法执行"></el-radio-button>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-button type="primary">提醒成员发送</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<ai-table
|
|
|
|
|
|
:tableData="tableData"
|
|
|
|
|
|
:col-configs="colConfigs"
|
|
|
|
|
|
:total="total"
|
|
|
|
|
|
border
|
|
|
|
|
|
tableSize="small"
|
|
|
|
|
|
:current.sync="search.current"
|
|
|
|
|
|
:size.sync="search.size"
|
|
|
|
|
|
@getList="getList">
|
|
|
|
|
|
</ai-table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="content-item" v-if="currIndex === 1">
|
|
|
|
|
|
<div class="top">
|
|
|
|
|
|
<div class="top-item">
|
|
|
|
|
|
<div class="top-item__title">
|
|
|
|
|
|
<h3>计划送达居民群</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>3,324</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="top-item">
|
|
|
|
|
|
<div class="top-item__title">
|
|
|
|
|
|
<h3>未送达居民群</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>3,324</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="top-item">
|
|
|
|
|
|
<div class="top-item__title">
|
|
|
|
|
|
<h3>已送达居民群</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>3,324</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="top-item">
|
|
|
|
|
|
<div class="top-item__title">
|
|
|
|
|
|
<h3>无法送达居民群</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>3,324</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
|
<div class="bottom-search">
|
|
|
|
|
|
<div class="left">
|
|
|
|
|
|
<el-radio-group v-model="radio1" size="small">
|
|
|
|
|
|
<el-radio-button size="small" label="未执行"></el-radio-button>
|
|
|
|
|
|
<el-radio-button size="small" label="已执行"></el-radio-button>
|
|
|
|
|
|
<el-radio-button size="small" label="无法执行"></el-radio-button>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-button type="primary">提醒成员发送</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<ai-table
|
|
|
|
|
|
:tableData="tableData"
|
|
|
|
|
|
:col-configs="colConfigs"
|
|
|
|
|
|
:total="total"
|
|
|
|
|
|
border
|
|
|
|
|
|
tableSize="small"
|
|
|
|
|
|
:current.sync="search.current"
|
|
|
|
|
|
:size.sync="search.size"
|
|
|
|
|
|
@getList="getList">
|
|
|
|
|
|
</ai-table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2022-07-13 09:13:31 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
</ai-card>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template #footer>
|
|
|
|
|
|
<el-button @click="cancel">取消</el-button>
|
|
|
|
|
|
<el-button type="primary" @click="confirm">提交</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</ai-detail>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
|
|
name: 'Detail',
|
|
|
|
|
|
|
|
|
|
|
|
props: {
|
|
|
|
|
|
instance: Function,
|
|
|
|
|
|
dict: Object,
|
|
|
|
|
|
params: Object
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
data () {
|
|
|
|
|
|
return {
|
2022-07-15 10:40:02 +08:00
|
|
|
|
total: 0,
|
|
|
|
|
|
radio1: '未执行',
|
|
|
|
|
|
search: {
|
|
|
|
|
|
current: 1,
|
|
|
|
|
|
size: 10
|
2022-07-13 09:13:31 +08:00
|
|
|
|
},
|
2022-07-15 10:40:02 +08:00
|
|
|
|
tableData: [],
|
|
|
|
|
|
currIndex: 0,
|
|
|
|
|
|
colConfigs: [
|
|
|
|
|
|
{ prop: 'position', label: '任务名称' },
|
|
|
|
|
|
{ prop: 'mobile', label: '群发类型' },
|
|
|
|
|
|
{ prop: 'position', label: '创建人' },
|
|
|
|
|
|
{ prop: 'mobile', label: '群发时间' },
|
|
|
|
|
|
{ prop: 'position', label: '状态' },
|
|
|
|
|
|
{ prop: 'mobile', label: '任务完成率' }
|
|
|
|
|
|
]
|
2022-07-13 09:13:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
created () {
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
getInfo (id) {
|
|
|
|
|
|
this.instance.post(`/app/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
|
|
|
|
|
|
if (res.code === 0) {
|
|
|
|
|
|
this.form = {
|
2022-07-15 10:40:02 +08:00
|
|
|
|
...res.data
|
2022-07-13 09:13:31 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
|
2022-07-15 10:40:02 +08:00
|
|
|
|
getList () {
|
2022-07-13 09:13:31 +08:00
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
cancel (isRefresh) {
|
|
|
|
|
|
this.$emit('change', {
|
|
|
|
|
|
type: 'list',
|
|
|
|
|
|
isRefresh: !!isRefresh
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
2022-07-15 10:40:02 +08:00
|
|
|
|
.AppAnnounceDetail {
|
|
|
|
|
|
.user {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
line-height: 1;
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 16px;
|
|
|
|
|
|
height: 16px;
|
|
|
|
|
|
margin-right: 2px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
top: 2px;
|
|
|
|
|
|
color: #222222;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-07-15 14:37:02 +08:00
|
|
|
|
.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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-07-15 10:40:02 +08:00
|
|
|
|
.msg {
|
|
|
|
|
|
background: #F9F9F9;
|
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
|
border: 1px solid #D0D4DC;
|
|
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
|
line-height: 1.3;
|
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
|
border-bottom: 1px solid #D0D4DC;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.msg-bottom {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
height: 38px;
|
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::v-deep .right-tips {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
i {
|
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
|
color: #8899bb;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
color: #888888;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-07-13 09:13:31 +08:00
|
|
|
|
</style>
|
