Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
aixianling
@@ -157,57 +157,7 @@
|
||||
</ai-card>
|
||||
</el-form>
|
||||
<div class="right">
|
||||
<img class="phone" src="https://cdn.cunwuyun.cn/dvcp/announce/phone.png" />
|
||||
<img class="phone-wrapper" src="https://cdn.cunwuyun.cn/dvcp/announce/phone-wrapper.png" />
|
||||
<div class="right-content">
|
||||
<div class="msg-list">
|
||||
<div class="msg-item" v-if="form.content">
|
||||
<div class="msg-item__left">
|
||||
<img v-if="user.info.avatar" :src="user.info.avatar" />
|
||||
</div>
|
||||
<div class="msg-item__right">
|
||||
<div class="msg-wrapper msg-text">
|
||||
<p>{{ form.content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg-item" v-for="item in fileList" :key="item.id">
|
||||
<div class="msg-item__left">
|
||||
<img v-if="user.info.avatar" :src="user.info.avatar" />
|
||||
</div>
|
||||
<div class="msg-item__right" :class="[['1', '2'].indexOf(item.msgType) !== -1 ? 'left-border' : '']">
|
||||
<div class="msg-wrapper msg-img" v-if="item.msgType === '1'">
|
||||
<img :src="item.imgPicUrl" />
|
||||
</div>
|
||||
<div class="msg-wrapper msg-video" v-if="item.msgType === '2'">
|
||||
<video controls :src="item.url"></video>
|
||||
</div>
|
||||
<div class="msg-wrapper msg-file" v-if="item.msgType === '3'">
|
||||
<div class="msg-left">
|
||||
<h2>{{ item.name }}</h2>
|
||||
<p>{{ item.fileSizeStr }}</p>
|
||||
</div>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/folder.png" />
|
||||
</div>
|
||||
<div class="msg-wrapper msg-link" v-if="item.msgType === '4'">
|
||||
<h2>{{ item.linkTitle }}</h2>
|
||||
<div class="msg-right">
|
||||
<p>{{ item.linkDesc }}</p>
|
||||
<img :src="item.linkPicUrl" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg-wrapper msg-miniapp" v-if="item.msgType === '5'">
|
||||
<h2>{{ item.mpTitle }}</h2>
|
||||
<img :src="item.url" />
|
||||
<div class="msg-bottom">
|
||||
<i>小程序</i>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Phone :avatar="user.info.avatar" @close="isShowPhone = false" :isShowClose="false" :content="form.content" :fileList="fileList"></Phone>
|
||||
</div>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowAddLink"
|
||||
@@ -311,6 +261,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Phone from './Phone'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'Add',
|
||||
@@ -321,6 +272,10 @@
|
||||
params: Object
|
||||
},
|
||||
|
||||
components: {
|
||||
Phone
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
info: {},
|
||||
@@ -365,16 +320,6 @@
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
fileList (v) {
|
||||
if (v.length) {
|
||||
setTimeout(() => {
|
||||
document.querySelector('.right-content').scrollTo(0, 999999)
|
||||
}, 800)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
@@ -777,9 +722,6 @@
|
||||
.right {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 338px;
|
||||
height: 675px;
|
||||
padding: 80px 15px 100px 32px;
|
||||
|
||||
.phone {
|
||||
position: absolute;
|
||||
|
||||
@@ -29,11 +29,13 @@
|
||||
</div>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="审批人">
|
||||
<div class="user" v-for="(item, index) in info.examines" :key="index">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/user.png" />
|
||||
<span>
|
||||
<ai-open-data type="userName" :openid="item.wxOpenUserId"></ai-open-data>
|
||||
</span>
|
||||
<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>
|
||||
<ai-open-data type="userName" :openid="item.examineUserId"></ai-open-data>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="创建时间" :value="info.createTime"></ai-info-item>
|
||||
@@ -41,9 +43,9 @@
|
||||
<ai-info-item label="群发范围" isLine>
|
||||
<div class="text">
|
||||
<span>按条件筛选的</span>
|
||||
<i>{{ info.wxGroups.length }}</i>
|
||||
<i>{{ groups.length }}</i>
|
||||
<span>个客户群</span>
|
||||
<em>详情</em>
|
||||
<em @click="isShowGroups = true">详情</em>
|
||||
</div>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="消息内容" isLine>
|
||||
@@ -51,12 +53,12 @@
|
||||
<p>{{ content }}</p>
|
||||
<div class="msg-bottom" v-if="fileList.length">
|
||||
<div class="left">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/img.png" />
|
||||
<span>图片附件235325346.jpg 等</span>
|
||||
<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="right">预览消息</div>
|
||||
<div class="right" @click="isShowPhone = true">预览消息</div>
|
||||
</div>
|
||||
</div>
|
||||
</ai-info-item>
|
||||
@@ -77,19 +79,19 @@
|
||||
<div class="top-item__title">
|
||||
<h3>计划执行成员</h3>
|
||||
</div>
|
||||
<p>3,324</p>
|
||||
<p>{{ memberInfo.planCount || 0 }}</p>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item__title">
|
||||
<h3>未执行成员</h3>
|
||||
</div>
|
||||
<p>3,324</p>
|
||||
<p>{{ memberInfo.cannotExecuteCount || 0 }}</p>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item__title">
|
||||
<h3>已执行成员</h3>
|
||||
</div>
|
||||
<p>3,324</p>
|
||||
<p>{{ memberInfo.executedCount || 0 }}</p>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item__title">
|
||||
@@ -100,29 +102,48 @@
|
||||
<i class="iconfont iconDetails"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<p>3,324</p>
|
||||
<p>{{ memberInfo.unExecutedCount || 0 }}</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 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">无法执行</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="userSelcet" placeholder="请选择创建人">
|
||||
<span v-if="search1.deptartId"><ai-open-data type="departmentName" :openid="search1.deptartId"></ai-open-data></span>
|
||||
<span v-else>请选择</span>
|
||||
<ai-user-get :instance="instance" @change="e => onUserChange(e, 'search1')" isChooseUnit :isMultiple="false" v-model="user1">
|
||||
<div class="select-btn">选择</div>
|
||||
</ai-user-get>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary">提醒成员发送</el-button>
|
||||
<el-button type="primary" @click="sendMsg(0)">提醒成员发送</el-button>
|
||||
</div>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
:tableData="tableData1"
|
||||
:col-configs="colConfigs1"
|
||||
:total="total1"
|
||||
border
|
||||
tableSize="small"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList">
|
||||
: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>
|
||||
<ai-open-data type="userName" :openid="row.groupOwnerId"></ai-open-data>
|
||||
</span>
|
||||
<span style="color: #999">
|
||||
<ai-open-data type="departmentName" :openid="row.mainDepartment"></ai-open-data>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,57 +153,96 @@
|
||||
<div class="top-item__title">
|
||||
<h3>计划送达居民群</h3>
|
||||
</div>
|
||||
<p>3,324</p>
|
||||
<p>{{ groupInfo.planCount || 0 }}</p>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item__title">
|
||||
<h3>未送达居民群</h3>
|
||||
</div>
|
||||
<p>3,324</p>
|
||||
<p>{{ groupInfo.planCount || 0 }}</p>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item__title">
|
||||
<h3>已送达居民群</h3>
|
||||
</div>
|
||||
<p>3,324</p>
|
||||
<p>{{ groupInfo.planCount || 0 }}</p>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="top-item__title">
|
||||
<h3>无法送达居民群</h3>
|
||||
</div>
|
||||
<p>3,324</p>
|
||||
<p>{{ groupInfo.planCount || 0 }}</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 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">无法执行</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="userSelcet" placeholder="请选择创建人">
|
||||
<span v-if="search2.deptartId"><ai-open-data type="departmentName" :openid="search2.deptartId"></ai-open-data></span>
|
||||
<span v-else>请选择</span>
|
||||
<ai-user-get :instance="instance" @change="e => onUserChange(e, 'search2')" isChooseUnit :isMultiple="false" v-model="user2">
|
||||
<div class="select-btn">选择</div>
|
||||
</ai-user-get>
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary">提醒成员发送</el-button>
|
||||
<el-button type="primary" @click="sendMsg(1)">提醒成员发送</el-button>
|
||||
</div>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
:tableData="tableData2"
|
||||
:col-configs="colConfigs2"
|
||||
:total="total2"
|
||||
border
|
||||
tableSize="small"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList">
|
||||
: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>
|
||||
<ai-open-data type="userName" :openid="row.groupOwnerId"></ai-open-data>
|
||||
</span>
|
||||
<span style="color: #999">
|
||||
<ai-open-data type="departmentName" :openid="row.mainDepartment"></ai-open-data>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowGroups"
|
||||
width="890px"
|
||||
title="群发范围"
|
||||
@onConfirm="isShowGroups = false">
|
||||
<ai-table
|
||||
:tableData="info.wxGroups"
|
||||
:col-configs="colConfigs3"
|
||||
border
|
||||
tableSize="small"
|
||||
:isShowPagination="false"
|
||||
@getList="() => {}">
|
||||
</ai-table>
|
||||
</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',
|
||||
|
||||
@@ -192,35 +252,122 @@
|
||||
params: Object
|
||||
},
|
||||
|
||||
components: {
|
||||
Phone
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
total: 0,
|
||||
total1: 0,
|
||||
isShowGroups: false,
|
||||
isShowPhone: false,
|
||||
total2: 0,
|
||||
user1: [],
|
||||
user2: [],
|
||||
radio1: '未执行',
|
||||
search: {
|
||||
search1: {
|
||||
current: 1,
|
||||
size: 10
|
||||
size: 10,
|
||||
deptartId: '',
|
||||
type: 0,
|
||||
sendStatus: '0'
|
||||
},
|
||||
search2: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
deptartId: '',
|
||||
type: 1,
|
||||
sendStatus: '0'
|
||||
},
|
||||
memberInfo: {},
|
||||
groupInfo: {},
|
||||
tableData1: [],
|
||||
fileList: [],
|
||||
tableData: [],
|
||||
tableData2: [],
|
||||
info: {},
|
||||
content: '',
|
||||
currIndex: 0,
|
||||
colConfigs: [
|
||||
{ prop: 'position', label: '任务名称' },
|
||||
{ prop: 'mobile', label: '群发类型' },
|
||||
{ prop: 'position', label: '创建人' },
|
||||
{ prop: 'mobile', label: '群发时间' },
|
||||
{ prop: 'position', label: '状态' },
|
||||
{ prop: 'mobile', label: '任务完成率' }
|
||||
]
|
||||
colConfigs3: [
|
||||
{ prop: 'groupOwnerId', label: '群主', openType: 'userName' },
|
||||
{ prop: 'groupNames', label: '群名称' }
|
||||
],
|
||||
colConfigs1: [
|
||||
{ slot: 'user', label: '成员', openType: 'userName' },
|
||||
{ prop: 'groupCount', label: '预计送达居民群', align: 'center' }
|
||||
],
|
||||
colConfigs2: [
|
||||
{ prop: 'groupName', label: '居民群' },
|
||||
{ prop: 'memberCount', label: '群人数', align: 'center' },
|
||||
{ slot: 'user', label: '群主', align: 'center' },
|
||||
],
|
||||
groups: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
created () {
|
||||
this.getInfo(this.params.id)
|
||||
this.getMemberInfo()
|
||||
this.getGroupInfo()
|
||||
},
|
||||
|
||||
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) {
|
||||
this[search].deptartId = e[0].id
|
||||
} else {
|
||||
this[search].deptartId = ''
|
||||
}
|
||||
|
||||
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('提醒成功')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
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
|
||||
this.total2 = res.data.executedList.total
|
||||
this.groupInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getInfo (id) {
|
||||
this.instance.post(`/app/appmasssendingtask/queryDetailById?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
@@ -238,11 +385,42 @@
|
||||
...v.sysFile
|
||||
}
|
||||
})
|
||||
|
||||
this.info.wxGroups = res.data.wxGroups.map(v => {
|
||||
this.groups.push(...v.groupIds.split(','))
|
||||
|
||||
return {
|
||||
...v,
|
||||
groupIds: v.groupIds.split(',')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getList () {},
|
||||
getList () {
|
||||
|
||||
},
|
||||
|
||||
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', {
|
||||
@@ -256,10 +434,85 @@
|
||||
|
||||
<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);
|
||||
}
|
||||
|
||||
::v-deep .phone-container {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 11;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
.userSelcet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin-left: 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d0d4dc;
|
||||
overflow: hidden;
|
||||
|
||||
.select-btn {
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border-left: 1px solid #d0d4dc;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
color: #2266FF;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
width: 200px;
|
||||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
background: #F5F5F5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -306,7 +559,6 @@
|
||||
p {
|
||||
line-height: 1.3;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #D0D4DC;
|
||||
}
|
||||
|
||||
.msg-bottom {
|
||||
@@ -315,6 +567,7 @@
|
||||
justify-content: space-between;
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
border-top: 1px solid #D0D4DC;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
@@ -433,6 +686,11 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">创建宣发</el-button>
|
||||
<ai-select
|
||||
v-model="search.status"
|
||||
@change="search.current = 1, getList"
|
||||
@change="search.current = 1, getList()"
|
||||
placeholder="任务状态"
|
||||
:selectList="dict.getDict('mstStatus')">
|
||||
</ai-select>
|
||||
@@ -21,16 +21,25 @@
|
||||
v-model="search.startTime"
|
||||
type="date"
|
||||
size="small"
|
||||
value-format="yyyy-MM-DD"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="search.current = 1, getList()"
|
||||
placeholder="选择群发开始日期">
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
v-model="search.endTime"
|
||||
type="date"
|
||||
size="small"
|
||||
value-format="yyyy-MM-DD"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="search.current = 1, getList()"
|
||||
placeholder="选择群发结束日期">
|
||||
</el-date-picker>
|
||||
<div class="userSelcet" placeholder="请选择创建人">
|
||||
<span v-if="search.createUserId"><ai-open-data type="userName" :openid="search.createUserId"></ai-open-data></span>
|
||||
<span v-else>请选择</span>
|
||||
<ai-user-get isStrictly :instance="instance" @change="onUserChange" :isMultiple="false" v-model="user">
|
||||
<div class="select-btn">选择</div>
|
||||
</ai-user-get>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="right">
|
||||
<el-input
|
||||
@@ -53,6 +62,18 @@
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
@getList="getList">
|
||||
<el-table-column slot="user" width="140px" label="创建人" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="userinfo">
|
||||
<span>
|
||||
<ai-open-data type="userName" :openid="row.createUserId"></ai-open-data>
|
||||
</span>
|
||||
<span style="color: #999">
|
||||
<ai-open-data type="departmentName" :openid="row.createUserSecondDept"></ai-open-data>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div class="table-options">
|
||||
@@ -68,108 +89,157 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
export default {
|
||||
name: 'List',
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
status: '',
|
||||
createUserId: '',
|
||||
taskTitle: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
user: [],
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
colConfigs: [
|
||||
{ prop: 'taskTitle', label: '任务名称' },
|
||||
{ prop: 'sendType', label: '群发类型', formart: v => v === '0' ? '立即发送' : '定时发送', align: 'center' },
|
||||
{ slot: 'user', label: '创建人', openType: 'userName', align: 'center' },
|
||||
{ prop: 'createTime', label: '群发时间', align: 'center' },
|
||||
{ prop: 'status', label: '状态', formart: v => this.dict.getLabel('mstStatus', v), align: 'center' },
|
||||
{ prop: 'completionRate', label: '任务完成率', align: 'center' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
status: '',
|
||||
taskTitle: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
tableData: [],
|
||||
loading: false,
|
||||
total: 0,
|
||||
colConfigs: [
|
||||
{ prop: 'taskTitle', label: '任务名称' },
|
||||
{ prop: 'sendType', label: '群发类型', formart: v => v === '0' ? '立即发送' : '定时发送', align: 'center' },
|
||||
{ prop: 'createUserId', label: '创建人', openType: 'userName', align: 'center' },
|
||||
{ prop: 'createTime', label: '群发时间', align: 'center' },
|
||||
{ prop: 'status', label: '状态', formart: v => this.dict.getLabel('mstStatus', v), align: 'center' },
|
||||
{ prop: 'completionRate', label: '任务完成率', align: 'center' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
created () {
|
||||
this.dict.load('mstStatus', 'mstSendType').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.instance.post(`/app/appmasssendingtask/list`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.loading = false
|
||||
this.$store.dispatch('initOpenData')
|
||||
})
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
created () {
|
||||
this.dict.load('mstStatus', 'mstSendType').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appmasssendingtask/delete?ids=${id}`).then(res => {
|
||||
methods: {
|
||||
onUserChange (e) {
|
||||
if (e.length) {
|
||||
this.search.createUserId = e[0].wxOpenUserId
|
||||
} else {
|
||||
this.search.createUserId = ''
|
||||
}
|
||||
|
||||
this.search.current = 1
|
||||
this.getList()
|
||||
},
|
||||
|
||||
getList() {
|
||||
this.loading = true
|
||||
this.instance.post(`/app/appmasssendingtask/list`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.loading = false
|
||||
this.$store.dispatch('initOpenData')
|
||||
})
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
remove(id) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appmasssendingtask/delete?ids=${id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
toAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
toAdd(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Add',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toDetail (id) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
toDetail (id) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppAnnounce {
|
||||
height: 100%;
|
||||
.userinfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
|
||||
span:first-child {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.userSelcet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d0d4dc;
|
||||
overflow: hidden;
|
||||
|
||||
.select-btn {
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border-left: 1px solid #d0d4dc;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
color: #2266FF;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
width: 200px;
|
||||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
background: #F5F5F5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
310
project/sass/apps/Announce/AppAnnounce/components/Phone.vue
Normal file
310
project/sass/apps/Announce/AppAnnounce/components/Phone.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div class="phone-container">
|
||||
<img class="close" @click="$emit('close')" v-if="isShowClose" src="https://cdn.cunwuyun.cn/dvcp/announce/close.png" />
|
||||
<img class="phone" src="https://cdn.cunwuyun.cn/dvcp/announce/phone.png" />
|
||||
<img class="phone-wrapper" src="https://cdn.cunwuyun.cn/dvcp/announce/phone-wrapper.png" />
|
||||
<div class="right-content">
|
||||
<div class="msg-list">
|
||||
<div class="msg-item" v-if="content">
|
||||
<div class="msg-item__left">
|
||||
<img v-if="avatar" :src="avatar" />
|
||||
</div>
|
||||
<div class="msg-item__right">
|
||||
<div class="msg-wrapper msg-text">
|
||||
<p>{{ content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg-item" v-for="item in fileList" :key="item.id">
|
||||
<div class="msg-item__left">
|
||||
<img v-if="avatar" :src="avatar" />
|
||||
</div>
|
||||
<div class="msg-item__right" :class="[['1', '2'].indexOf(item.msgType) !== -1 ? 'left-border' : '']">
|
||||
<div class="msg-wrapper msg-img" v-if="item.msgType === '1'">
|
||||
<img :src="item.imgPicUrl" />
|
||||
</div>
|
||||
<div class="msg-wrapper msg-video" v-if="item.msgType === '2'">
|
||||
<video controls :src="item.url"></video>
|
||||
</div>
|
||||
<div class="msg-wrapper msg-file" v-if="item.msgType === '3'">
|
||||
<div class="msg-left">
|
||||
<h2>{{ item.name }}</h2>
|
||||
<p>{{ item.fileSizeStr }}</p>
|
||||
</div>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/folder.png" />
|
||||
</div>
|
||||
<div class="msg-wrapper msg-link" v-if="item.msgType === '4'">
|
||||
<h2>{{ item.linkTitle }}</h2>
|
||||
<div class="msg-right">
|
||||
<p>{{ item.linkDesc }}</p>
|
||||
<img :src="item.linkPicUrl" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg-wrapper msg-miniapp" v-if="item.msgType === '5'">
|
||||
<h2>{{ item.mpTitle }}</h2>
|
||||
<img :src="item.url" />
|
||||
<div class="msg-bottom">
|
||||
<i>小程序</i>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['fileList', 'avatar', 'content', 'isShowClose'],
|
||||
|
||||
watch: {
|
||||
fileList (v) {
|
||||
if (v.length) {
|
||||
setTimeout(() => {
|
||||
document.querySelector('.right-content').scrollTo(0, 999999)
|
||||
}, 800)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.phone-container {
|
||||
width: 338px;
|
||||
height: 675px;
|
||||
padding: 80px 15px 100px 32px;
|
||||
|
||||
.phone {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 4px;
|
||||
z-index: 1;
|
||||
width: 314px;
|
||||
height: 647px;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 111;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
transition: all ease 0.5s;
|
||||
transform: translate(100%, -50%);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
width: 338px;
|
||||
height: 675px;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.msg-item {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.msg-item__left {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin-right: 16px;
|
||||
background: #2891FF;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-item__right {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 6px solid #fff;
|
||||
border-left: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-top: 6px solid transparent;
|
||||
content: " ";
|
||||
transform: translate(-100%, 0%);
|
||||
}
|
||||
|
||||
&.left-border::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msg-img img {
|
||||
max-width: 206px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.msg-video video {
|
||||
max-width: 206px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.msg-text {
|
||||
max-width: 206px;
|
||||
width: max-content;
|
||||
line-height: 1.3;
|
||||
padding: 12px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
word-break: break-all;
|
||||
font-size: 14px;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.msg-miniapp {
|
||||
width: 206px;
|
||||
padding: 0 12px;
|
||||
text-align: justify;
|
||||
font-size: 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
color: #222222;
|
||||
|
||||
h2 {
|
||||
line-height: 1.2;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.msg-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
padding: 4px 0;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msg-file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 206px;
|
||||
padding: 12px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
|
||||
.msg-left {
|
||||
flex: 1;
|
||||
margin-right: 18px;
|
||||
|
||||
h2 {
|
||||
display: -webkit-box;
|
||||
flex: 1;
|
||||
line-height: 16px;
|
||||
margin-bottom: 4px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #888888;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-link {
|
||||
width: 206px;
|
||||
height: 102px;
|
||||
padding: 12px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 4px;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.msg-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
display: -webkit-box;
|
||||
flex: 1;
|
||||
line-height: 16px;
|
||||
margin-right: 10px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -36,15 +36,17 @@
|
||||
<p class="item-title">{{item.taskTitle}}</p>
|
||||
<span class="item-time" v-if="item.createTime">{{item.createTime.substring(10, 16)}}</span>
|
||||
</div>
|
||||
<div class="item-info item-created">创建人：
|
||||
<div class="item-info item-created">
|
||||
<span class="label">创建人：</span>
|
||||
<ai-open-data type="userName" :openid="item.createUserId" class="name"></ai-open-data>
|
||||
</div>
|
||||
<div class="item-info">创建部门：
|
||||
<ai-open-data type="departmentName" :openid="item.createUserDept"></ai-open-data>
|
||||
<div class="item-info item-dept">
|
||||
<span class="label">创建部门：</span>
|
||||
<ai-open-data type="departmentName" :openid="item.createUserDept" class="name"></ai-open-data>
|
||||
</div>
|
||||
<div class="flex-between">
|
||||
<!-- <div class="item-info">群发类型：<span>{{$dict.getLabel('mstSendType', item.sendType) || ''}}</span></div> -->
|
||||
<span class="item-btn">详情</span>
|
||||
<div class="item-info">群发类型：<span>{{$dict.getLabel('mstSendType', item.sendType) || ''}}</span></div>
|
||||
<span class="item-btn">详情{{item.sendType}}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
@@ -210,7 +212,7 @@
|
||||
this.getCalendarList(year, month)
|
||||
this.getEffect()
|
||||
this.getDepart()
|
||||
this.dict.load(['mstSendType'])
|
||||
this.dict.load('mstSendType')
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['initOpenData', 'transCanvas']),
|
||||
@@ -531,12 +533,30 @@
|
||||
color: #888;
|
||||
line-height: 22px;
|
||||
span{
|
||||
display: inline-block;
|
||||
color: #222;
|
||||
word-break: break-all;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
.item-created{
|
||||
width: 152px;
|
||||
margin-bottom: 4px;
|
||||
.label{
|
||||
width: 56px;
|
||||
}
|
||||
.name{
|
||||
width: calc(100% - 56px);
|
||||
}
|
||||
}
|
||||
.item-dept{
|
||||
width: calc(100% - 152px);
|
||||
.label{
|
||||
width: 70px;
|
||||
}
|
||||
.name{
|
||||
width: calc(100% - 70px);
|
||||
}
|
||||
}
|
||||
.item-btn{
|
||||
color: #26f;
|
||||
|
||||
Reference in New Issue
Block a user