314 lines
8.1 KiB
Vue
314 lines
8.1 KiB
Vue
<template>
|
||
<div class="groupSendResident">
|
||
<AiTopFixed>
|
||
<div class="search">
|
||
<div class="searchBox">
|
||
<u-search placeholder="请输入任务名称" v-model="taskTitle" @search="searchBtn" @clear="taskTitle='',current=1, list=[],getList()" :show-action="false"></u-search>
|
||
</div>
|
||
<div class="filterBtn" @click="filterShow = true"><img src="./images/shaixuan.png" alt="">筛选</div>
|
||
</div>
|
||
</AiTopFixed>
|
||
<div class="resident_list" v-if="list.length">
|
||
<div class="card" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
|
||
<div class="card_title">
|
||
<div class="card_left">{{ item.taskTitle }}</div>
|
||
<div class="card_right"><span :class="item.status==0? 'status0': item.status==1? 'status1': item.status==2? 'status2':
|
||
item.status == 3? 'status3':item.status==4? 'status4': 'status5'"></span>{{ $dict.getLabel('mstStatus', item.status) }}</div>
|
||
</div>
|
||
<div>创建时间：<span>{{ item.createTime }}</span></div>
|
||
<div>共需<span class="num">{{ item.groupOwnerCount }}</span>名成员完成群发，目前已完成<span class="num">{{ item.completionRate || 0 }}%</span></div>
|
||
<div>创建部门：<span>{{ item.createUserDept }}</span></div>
|
||
</div>
|
||
</div>
|
||
<AiEmpty description="暂无数据" v-if="!list.length"/>
|
||
<u-popup v-model="filterShow" mode="bottom" border-radius="14">
|
||
<div class="popup">
|
||
<div class="tips"></div>
|
||
<div class="title">
|
||
<div
|
||
class="cancel"
|
||
@click.stop="(filterShow = false), (timeSelect = 0)"
|
||
>
|
||
取消
|
||
</div>
|
||
<p>筛选条件</p>
|
||
<div class="confirm" @click.stop="selectConfirm">确定</div>
|
||
</div>
|
||
<scroll-view class="select-content" scroll-y="true">
|
||
<div class="type-list">
|
||
<div class="type-title">创建人</div>
|
||
<AiPagePicker class="select" type="sysUser" :selected.sync="createUserId">选择人员</AiPagePicker>
|
||
</div>
|
||
<div class="type-list">
|
||
<div class="type-title">群发时间</div>
|
||
<div class="item">
|
||
<div>开始时间</div>
|
||
<div style="display: flex;">
|
||
<u-input v-model="startTime" disabled placeholder="请选择开始时间" @click="showStart = true" />
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div>结束时间</div>
|
||
<div style="display: flex;">
|
||
<u-input v-model="endTime" disabled placeholder="请选择开始时间" @click="showEnd = true" />
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
<u-picker mode="time" v-model="showStart" @confirm="confirmStart"></u-picker>
|
||
<u-picker mode="time" v-model="showEnd" @confirm="confirmEnd"></u-picker>
|
||
<div class="popBtn">
|
||
<div @click="reset">重置</div>
|
||
<div @click="selectConfirm">确认</div>
|
||
</div>
|
||
</div>
|
||
</u-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
current: 1,
|
||
name: '',
|
||
list: [],
|
||
filterShow: false,
|
||
startTime: '',
|
||
endTime: '',
|
||
start: "",
|
||
end: "",
|
||
showStart: false,
|
||
showEnd: false,
|
||
taskTitle: '',
|
||
createUserId: [],
|
||
}
|
||
},
|
||
methods: {
|
||
toDetail(item) {
|
||
uni.navigateTo({url: `./groupSendDetail?id=${item.id}&time=${item.createTime}`})
|
||
},
|
||
searchBtn() {
|
||
this.current = 1
|
||
this.list = [],
|
||
this.getList()
|
||
},
|
||
getList() {
|
||
this.$http.post(`/app/appmasssendingtask/list`, null, {
|
||
params: {
|
||
current: this.current,
|
||
taskTitle: this.taskTitle,
|
||
createUserId: this.createUserId,
|
||
startTime: this.start,
|
||
endTime: this.end,
|
||
}
|
||
}).then(res=> {
|
||
if(res?.data) {
|
||
this.list = this.current == 1? res.data.records : [...res.data.records, ...this.list]
|
||
}
|
||
console.log(res);
|
||
})
|
||
},
|
||
|
||
filterBtn() {},
|
||
reset() {
|
||
this.startTime = '',
|
||
this.endTime = ''
|
||
},
|
||
selectConfirm() {
|
||
this.start = this.startTime,
|
||
this.end = this.endTime
|
||
this.filterShow = false
|
||
this.getList()
|
||
},
|
||
confirmStart(val) {
|
||
this.startTime = val.year + '-' + val.month + '-' + val.day
|
||
},
|
||
confirmEnd(val) {
|
||
this.endTime = val.year + '-' + val.month + '-' + val.day
|
||
},
|
||
},
|
||
onShow() {
|
||
document.title = '群发居民群'
|
||
this.$dict.load('mstStatus').then(() => {
|
||
this.getList()
|
||
})
|
||
|
||
},
|
||
onReachBottom() {
|
||
this.current ++
|
||
this.getList()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.groupSendResident {
|
||
.search {
|
||
display: flex;
|
||
height: 80px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.searchBox {
|
||
width: 562px;
|
||
}
|
||
.filterBtn {
|
||
img {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
}
|
||
.resident_list {
|
||
padding: 24px 32px 20px 32px;
|
||
box-sizing: border-box;
|
||
.card {
|
||
background: #FFF;
|
||
border-radius: 16px;
|
||
padding: 30px;
|
||
margin-bottom: 24px;
|
||
& > div {
|
||
padding: 10px 0;
|
||
}
|
||
.num {
|
||
color: #3AA0FF;
|
||
}
|
||
.card_title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.card_left {
|
||
font-size: 32px;
|
||
color: #000000;
|
||
font-weight: 600;
|
||
}
|
||
.card_right {
|
||
span {
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
// background: #3399FF;
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.status0 {
|
||
background: #3399FF;
|
||
}
|
||
.status1 {
|
||
background: #FFA938;
|
||
}
|
||
.status2 {
|
||
background: #3399FF;
|
||
}
|
||
.status3 {
|
||
background: #1CCEB0;
|
||
}
|
||
.status4 {
|
||
background: #FF6758;
|
||
}
|
||
.status5 {
|
||
background: #FF6758;
|
||
}
|
||
.status6 {
|
||
background: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.popup {
|
||
box-sizing: border-box;
|
||
// height: 800px;
|
||
.tips {
|
||
width: 80px;
|
||
height: 6px;
|
||
background: #dddddd;
|
||
border-radius: 4px;
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
margin: 32px auto 8px auto;
|
||
}
|
||
.title {
|
||
height: 48px;
|
||
line-height: 48px;
|
||
font-size: 34px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #222;
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
padding-bottom: 32px;
|
||
.cancel {
|
||
display: inline-block;
|
||
width: 200px;
|
||
color: #aaa;
|
||
}
|
||
.confirm {
|
||
display: inline-block;
|
||
width: 200px;
|
||
text-align: right;
|
||
color: #333;
|
||
}
|
||
p {
|
||
display: inline-block;
|
||
width: calc(100% - 400px);
|
||
text-align: center;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
.select-content {
|
||
height: calc(100% - 100px);
|
||
overflow-y: scroll;
|
||
}
|
||
.type-list {
|
||
padding: 0 32px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 32px;
|
||
.type-title {
|
||
line-height: 108px;
|
||
font-size: 32px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
& > div:last-child {
|
||
::v-deep .uni-input-input,
|
||
::v-deep .uni-input-placeholder {
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
.active {
|
||
background: #1365dd;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.popBtn {
|
||
display: flex;
|
||
height: 98px;
|
||
line-height: 98px;
|
||
div {
|
||
width: 50%;
|
||
border: 2px solid #3399ff;
|
||
text-align: center;
|
||
}
|
||
div:first-child {
|
||
color: #3399ff;
|
||
}
|
||
div:last-child {
|
||
color: #fff;
|
||
background: #3399ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
</style> |