kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

标品迁移

Browse Source
This commit is contained in:
liuye
2023-11-17 09:34:34 +08:00
parent 22023aa887
commit df464eae89
28 changed files with 8925 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

783
project/biaopin/Announce/AppAnnounce/components/Detail.vue Normal file
View File

@@ -0,0 +1,783 @@
<template>
<ai-detail class="AppAnnounceDetail">
<template slot="title">
<ai-title title="群发居民群详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
</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="发送方式">
<span>{{ info.sendChannel === '1' ? '通知员工转发' : '成员一键群发' }}</span>
</ai-info-item>
<ai-info-item label="标签" :value="info.markTag">
</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="结束时间" :value="info.taskEndTime" v-if="info.sendChannel === '1'"></ai-info-item>
<ai-info-item label="群发范围" isLine>
<div class="text">
<span>{{ info.sendScope === '0' ? '全部' : '按条件筛选的' }}</span>
<i>{{ groups.length }}</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>
<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>
<template #content>
<div class="content-item" v-if="currIndex === 0">
<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 class="top-item" v-if="info.sendChannel === '0'">
<div class="top-item__title">
<h3>无法执行成员</h3>
<el-tooltip
placement="top"
content="由于员工不在可见范围、离职、客户群接收已达到上限等原因，无法执行群发任务的成员总数">
<i class="iconfont iconDetails"></i>
</el-tooltip>
</div>
<p>{{ memberInfo.cannotExecuteCount || 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-button size="small" label="2" v-if="info.sendChannel === '0'">无法执行</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">{{ name1 }}</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.groupOwnerName }}</span>
<span style="color: #999">{{ row.mainDepartmentName }}</span>
</div>
</template>
</el-table-column>
</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>{{ groupInfo.planCount || 0 }}</p>
</div>
<div class="top-item">
<div class="top-item__title">
<h3>未送达居民群</h3>
</div>
<p>{{ groupInfo.unExecutedCount || 0 }}</p>
</div>
<div class="top-item">
<div class="top-item__title">
<h3>已送达居民群</h3>
</div>
<p>{{ groupInfo.executedCount || 0 }}</p>
</div>
<div class="top-item" v-if="info.sendChannel === '0'">
<div class="top-item__title">
<h3>无法送达居民群</h3>
</div>
<p>{{ groupInfo.cannotExecuteCount || 0 }}</p>
</div>
</div>
<div class="bottom">
<div class="bottom-search">
<div class="left">
<el-radio-group v-model="search2.sendStatus" size="small" @change="search2.current = 1, getGroupInfo()">
<el-radio-button size="small" label="0">未送达</el-radio-button>
<el-radio-button size="small" label="1">已送达</el-radio-button>
<el-radio-button size="small" label="2" v-if="info.sendChannel === '0'">无法送达</el-radio-button>
</el-radio-group>
<ai-picker
dialogTitle="选择部门"
action="/app/wxcp/wxdepartment/departList"
:instance="instance"
@pick="e => onUserChange(e, 'search2')" :multiple="false" v-model="user2">
<div class="userSelcet">
<span style="color: #606266;" v-if="search2.deptartId">{{ name2 }}</span>
<span v-else>部门</span>
<i class="el-icon-arrow-up" v-if="!search2.deptartId"></i>
<i class="el-icon-circle-close" v-if="search2.deptartId" @click.stop="user1 = [], search2.deptartId = '', search2.current = 1, getGroupInfo()"></i>
</div>
</ai-picker>
</div>
<el-button :type="isDisabled ? '' : 'primary'" :disabled="isDisabled" @click="sendMsg(1)" v-if="info.status === '4'">{{ isDisabled ? min + '分钟后可再次提醒' : '提醒成员发送' }}</el-button>
</div>
<ai-table
:tableData="tableData2"
:col-configs="colConfigs2"
:total="total2"
border
tableSize="small"
:current.sync="search2.current"
:size.sync="search2.size"
@getList="getGroupInfo">
<el-table-column slot="user" label="群主" align="center">
<template slot-scope="{ row }">
<div class="userinfo">
<span>{{ row.groupOwnerName }}</span>
<span style="color: #999">{{ row.mainDepartmentName }}</span>
</div>
</template>
</el-table-column>
</ai-table>
</div>
</div>
</template>
</ai-card>
<ai-dialog
:visible.sync="isShowGroups"
width="890px"
title="群发范围"
customFooter
@onConfirm="isShowGroups = false">
<ai-table
:tableData="info.wxGroups"
:col-configs="colConfigs3"
border
tableSize="small"
:isShowPagination="false"
@getList="() => {}">
</ai-table>
<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,
total2: 0,
user1: [],
user2: [],
name1: '',
name2: '',
radio1: '未执行',
search1: {
current: 1,
size: 10,
deptartId: '',
type: 0,
sendStatus: '0'
},
search2: {
current: 1,
size: 10,
deptartId: '',
type: 1,
sendStatus: '0'
},
memberInfo: {},
groupInfo: {},
tableData1: [],
fileList: [],
tableData2: [],
info: {},
content: '',
currIndex: 0,
colConfigs3: [
{ prop: 'groupOwnerName', label: '群主' },
{ prop: 'groupNames', label: '群名称' }
],
colConfigs1: [
{ slot: 'user', label: '成员' },
{ prop: 'groupCount', label: '预计送达居民群', align: 'center' }
],
colConfigs2: [
{ prop: 'groupName', label: '居民群' },
{ prop: 'memberCount', label: '群人数', align: 'center' },
{ slot: 'user', label: '群主', align: 'center' },
],
groups: [],
timer: null,
min: 60,
isDisabled: false,
rejecterId: ''
}
},
computed: {
...mapState(['user'])
},
created () {
this.getInfo(this.params.id)
this.getMemberInfo()
this.getGroupInfo()
},
destroyed () {
clearInterval(this.timer)
},
methods: {
getMemberInfo () {
this.instance.post(`/app/appmasssendingtask/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) {
search === 'search1' ? this.name1 = e[0].name : this.name2 = e[0].name
this[search].deptartId = e[0].id
} else {
this[search].deptartId = ''
search === 'search1' ? this.name1 = '' : this.name2 = ''
}
this[search].current = 1
if (search === 'search1') {
this.getMemberInfo()
} else {
this.getGroupInfo()
}
},
sendMsg () {
this.instance.post(`/app/appmasssendingtask/remindSend?id=${this.params.id}`).then(res => {
if (res.code === 0) {
this.$message.success('提醒成功')
this.getInfo(this.params.id)
}
})
},
getGroupInfo () {
this.instance.post(`/app/appmasssendingtask/detailStatistics`, null, {
params: {
...this.search2,
taskId: this.params.id
}
}).then(res => {
if (res.code === 0) {
this.tableData2 = res.data.executedList.records.map(v => {
return {
...v,
groupName: v.groupName || '未命名群聊'
}
})
this.total2 = res.data.executedList.total
this.groupInfo = res.data
}
})
},
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.instance.post(`/app/appmasssendingtask/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
}
})
this.info.wxGroups = res.data.wxGroups.map(v => {
this.groups.push(...v.groupIds.split(','))
return {
...v,
groupIds: v.groupIds.split(',')
}
})
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
}
}
}
})
},
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>