<template>
|
<view class="box">
|
<scroll-view scroll-x class="box_head">
|
<view class="box_head_search">
|
<view class="box_head_search_ipt">
|
<image src="@/static/n/ic_search@2x.png" mode="widthFix"></image>
|
<input
|
v-model="search.title"
|
@blur="querylist"
|
type="text"
|
placeholder="搜索任务名称"
|
/>
|
</view>
|
<view class="box_head_search_sha" @click="showFilter = true">
|
<image src="@/static/n/ic_shaixuan@2x.png" mode="widthFix"></image>
|
<text>筛选</text>
|
</view>
|
</view>
|
<view class="box_head_list">
|
<view
|
@click="statusClick(0)"
|
:class="{ active: search.queryType === 0 }"
|
class="box_head_item"
|
>待处理 {{ headData.noticeWaitNum }}</view
|
>
|
<view
|
@click="statusClick(1)"
|
:class="{ active: search.queryType === 1 }"
|
class="box_head_item"
|
>已处理</view
|
>
|
<view
|
@click="statusClick(2)"
|
:class="{ active: search.queryType === 2 }"
|
class="box_head_item"
|
>我发起的</view
|
>
|
<view
|
@click="statusClick(3)"
|
:class="{ active: search.queryType === 3 }"
|
class="box_head_item"
|
>抄送我的 {{ headData.noticeCopyNum }}</view
|
>
|
</view>
|
</scroll-view>
|
<view class="box_list">
|
<view class="chaosong" v-if="search.queryType === 3">
|
<view class="left">
|
<image
|
@click="readySearch(0)"
|
v-if="search.noRead && search.noRead == 1"
|
src="@/static/meeting/icon/ic_choose_sel@2x.png"
|
class="checked"
|
/>
|
<image
|
@click="readySearch(1)"
|
v-else
|
src="@/static/meeting/icon/ic_choose@2x.png"
|
class="checked"
|
/>
|
<text>仅看未读</text>
|
</view>
|
<view class="right">全部标记已读</view>
|
</view>
|
<view
|
class="box_list_item"
|
v-for="(item, index) in dataList"
|
:key="index"
|
>
|
<view class="box_list_item_head">
|
<view class="df_ac">
|
<text v-if="item.readed == 0" class="readed"></text>
|
<text class="tt">{{ item.title }}</text>
|
</view>
|
<view class="info loading">{{ item.info }}</view>
|
</view>
|
<view class="box_list_item_nr">
|
<view v-if="item.param1.name" class="box_list_item_nr_item">
|
<text></text>
|
<text>{{ item.param1.name }}</text>
|
</view>
|
<view v-if="item.param1.area" class="box_list_item_nr_item">
|
<text></text>
|
<text>{{ item.param1.area }}</text>
|
</view>
|
<view v-if="item.param1.cate" class="box_list_item_nr_item">
|
<text></text>
|
<text>{{ item.param1.cate }}</text>
|
</view>
|
<view v-if="item.param1.sTime" class="box_list_item_nr_item">
|
<text></text>
|
<text>{{ item.param1.sTime }}</text>
|
</view>
|
<view v-if="item.param1.eTime" class="box_list_item_nr_item">
|
<text></text>
|
<text>{{ item.param1.eTime }}</text>
|
</view>
|
<view v-if="item.param1.usrNum" class="box_list_item_nr_item">
|
<text></text>
|
<text>{{ item.param1.usrNum }}</text>
|
</view>
|
<view v-if="item.param1.reason" class="box_list_item_nr_item">
|
<text></text>
|
<text>{{ item.param1.reason }}</text>
|
</view>
|
<view v-if="item.param1.carNos" class="box_list_item_nr_item">
|
<text></text>
|
<text>{{ item.param1.carNos }}</text>
|
</view>
|
<view v-if="item.param1.mdd" class="box_list_item_nr_item">
|
<text></text>
|
<text>{{ item.param1.mdd }}</text>
|
</view>
|
<view class="box_list_item_nr_x"></view>
|
<view class="box_list_item_nr_text">
|
<text class="time">{{ item.createDate }}提交</text>
|
<text v-if="item.status == '0'" class="btn" @click="handleAppr(item)">去处理</text>
|
</view>
|
</view>
|
</view>
|
<view v-if="dataList.length === 0" style="text-align: center;">
|
<image src="@/static/empty.png" style="width: 320rpx;margin: 120px auto 0" mode="widthFix" />
|
<view class="placeholder9 fs24">暂无数据</view>
|
</view>
|
</view>
|
<!-- 筛选 -->
|
<u-popup
|
:show="showFilter"
|
mode="bottom"
|
:round="10"
|
:closeable="true"
|
@close="showFilter = false"
|
>
|
<view class="search">
|
<view class="search_head">任务筛选</view>
|
<view class="search_list">
|
<view class="search_list_item">
|
<view class="search_list_item_label">创建日期</view>
|
<view class="search_list_item_val">
|
<view
|
class="search_list_item_val_row"
|
@click="tiemShow = true"
|
:style="{ color: modelParam.startDate ? '#000' : '' }"
|
>{{
|
modelParam.startDate ? modelParam.startDate : "开始日期"
|
}}</view
|
>
|
<view class="search_list_item_val_z">-</view>
|
<view
|
class="search_list_item_val_row"
|
@click="tiemShow1 = true"
|
:style="{ color: modelParam.endDate ? '#000' : '' }"
|
>{{
|
modelParam.endDate ? modelParam.endDate : "结束日期"
|
}}</view
|
>
|
</view>
|
</view>
|
<view class="search_list_item">
|
<view class="search_list_item_label">订单来源</view>
|
<view class="search_list_item_cates">
|
<view
|
:class="
|
item.id === modelParam.type
|
? 'search_list_item_cates_row active'
|
: 'search_list_item_cates_row'
|
"
|
v-for="(item, index) in cateList"
|
:key="index"
|
@click="clickItem(index)"
|
>
|
{{ item.name }}
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="search_footer">
|
<view class="search_footer_item" @click="showFilter = false"
|
>取消</view
|
>
|
<view class="search_footer_item t" @click="modalSub">提交</view>
|
</view>
|
</view>
|
</u-popup>
|
<u-datetime-picker
|
:show="tiemShow"
|
v-model="modelParam.startDate"
|
mode="date"
|
@confirm="confirmLeft"
|
@cancel="tiemShow = false"
|
></u-datetime-picker>
|
<u-datetime-picker
|
:show="tiemShow1"
|
v-model="modelParam.endDate"
|
mode="date"
|
@confirm="confirmRight"
|
@cancel="tiemShow1 = false"
|
></u-datetime-picker>
|
</view>
|
</template>
|
|
<script>
|
import { stagingHead, stagingTaskPage } from '@/api'
|
import dayjs from 'dayjs'
|
export default {
|
data() {
|
return {
|
showFilter: false,
|
search: {
|
queryType: 0
|
},
|
modelParam: {
|
startDate: dayjs().format('YYYY-MM-DD'),
|
endDate: dayjs().format('YYYY-MM-DD'),
|
},
|
tiemShow: false,
|
tiemShow1: false,
|
|
pagination: {
|
capacity: 20,
|
page: 0
|
},
|
headData: {},
|
dataList: [],
|
cateList: [
|
{ name: '访客申请', id: 0 },
|
{ name: '访客报备', id: 1 },
|
{ name: '用车申请', id: 2 },
|
{ name: '隐患随手拍', id: 3 },
|
{ name: '物流车申请', id: 4 },
|
]
|
}
|
},
|
onLoad() {
|
this.getHeadList()
|
this.pagination.page = 0
|
this.getList()
|
},
|
onReachBottom() {
|
// this.pagination.page = 0
|
// this.dataList = []
|
this.getList()
|
},
|
onShow() {
|
this.pagination.page = 0
|
this.dataList = []
|
this.getHeadList()
|
this.getList()
|
},
|
methods: {
|
statusClick(val) {
|
this.pagination.page = 0
|
this.dataList = []
|
this.$set(this.search, 'queryType', val)
|
this.getList()
|
},
|
readySearch(val) {
|
this.pagination.page = 0
|
this.dataList = []
|
this.$set(this.search, 'noRead', val)
|
this.getList()
|
},
|
modalSub() {
|
this.search = { ...this.search, ...this.modelParam }
|
this.pagination.page = 0
|
this.dataList = []
|
this.getList()
|
this.showFilter = false
|
},
|
querylist() {
|
this.pagination.page = 0
|
this.dataList = []
|
this.getList()
|
},
|
getList() {
|
const { pagination, search } = this
|
pagination.page++
|
stagingTaskPage({
|
...pagination,
|
model: {
|
...search
|
}
|
}).then(res => {
|
this.dataList = [...this.dataList, ...res.data.records]
|
this.dataList.forEach(i => {
|
if(i.param1){
|
i.param1 = JSON.parse(i.param1)
|
}
|
})
|
console.log('dataList', this.dataList)
|
})
|
},
|
getHeadList() {
|
stagingHead({
|
isDetail: '1'
|
}).then(res => {
|
this.headData = res.data
|
})
|
},
|
handleAppr(item) {
|
const { objType, objId } = item
|
if (objType === 2) {
|
uni.navigateTo({
|
url: `/pages/staff/vehicle/sendACarDetail?id=${objId}&appr=1`
|
})
|
} else if (objType === 1) {
|
uni.navigateTo({
|
url: `/pages/staff/task/visitorReport?id=${objId}&objType=${objType}`
|
})
|
} else if (objType === 3) {
|
uni.navigateTo({
|
url: `/pages/staff/task/vDangetAppr?id=${objId}&objType=${objType}`
|
})
|
} else {
|
uni.navigateTo({
|
url: `/pages/staff/task/visitorApprove?id=${objId}&objType=${objType}`
|
})
|
}
|
},
|
clickItem(index) {
|
this.$set(this.modelParam, 'type', this.cateList[index].id)
|
},
|
confirmLeft(e) {
|
console.log(uni.$u.timeFormat(e.value, 'yyyy-mm-dd'))
|
setTimeout(() => {
|
this.modelParam.startDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
})
|
this.tiemShow = false
|
},
|
confirmRight(e) {
|
// this.modelParam.endDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
setTimeout(() => {
|
this.modelParam.endDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
})
|
this.tiemShow1 = false
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #f7f7f7 !important;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.box_head {
|
width: 100%;
|
height: 190rpx;
|
padding: 12rpx 30rpx;
|
box-sizing: border-box;
|
background: #ffffff;
|
position: sticky;
|
top: 0;
|
left: 0;
|
.box_head_search {
|
width: 100%;
|
height: 76rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 24rpx;
|
.box_head_search_ipt {
|
flex: 1;
|
height: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
background: #f7f7f7;
|
border-radius: 50rpx;
|
margin-right: 30rpx;
|
image {
|
flex-shrink: 0;
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 16rpx;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #b2b2b2;
|
}
|
}
|
.box_head_search_sha {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 8rpx;
|
}
|
text {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
.box_head_list {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.active {
|
border: 1rpx solid #4c99a8 !important;
|
color: #4c99a8 !important;
|
}
|
.box_head_item {
|
text-align: center;
|
flex: 1;
|
height: 60rpx;
|
line-height: 60rpx;
|
box-sizing: border-box;
|
border-radius: 30rpx;
|
border: 1rpx solid #999999;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
margin-right: 10rpx;
|
&:nth-last-child(1) {
|
margin-right: 0;
|
}
|
}
|
}
|
}
|
.box_list {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.chaosong {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
color: #666666;
|
font-size: 24rpx;
|
margin-bottom: 20rpx;
|
.left {
|
display: flex;
|
align-items: center;
|
.checked {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 10rpx;
|
}
|
}
|
}
|
.box_list_item {
|
width: 100%;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.box_list_item_head {
|
width: 100%;
|
height: 100rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
|
border-radius: 8rpx 8rpx 0rpx 0rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.readed {
|
width: 12rpx;
|
height: 12rpx;
|
border-radius: 50%;
|
background-color: #e0312a;
|
}
|
.loading {
|
color: #4c99a8;
|
}
|
.success {
|
color: #03c68f;
|
}
|
.error {
|
color: #e0312a;
|
}
|
.tt {
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #222222;
|
}
|
.info {
|
font-size: 26rpx;
|
font-weight: 400;
|
}
|
}
|
.box_list_item_nr {
|
padding: 30rpx;
|
width: 100%;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
.box_list_item_nr_x {
|
width: 100%;
|
height: 1rpx;
|
background-color: #e5e5e5;
|
}
|
.box_list_item_nr_text {
|
.time {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
.btn {
|
padding: 0 32rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
background: $uni-color-primary;
|
color: #fff;
|
font-size: 26rpx;
|
font-weight: 300;
|
text-align: center;
|
border-radius: 30rpx;
|
}
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
margin-top: 20rpx;
|
}
|
.box_list_item_nr_item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
text {
|
&:nth-child(1) {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #666666;
|
}
|
&:nth-child(2) {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
}
|
}
|
.search {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.search_head {
|
width: 100%;
|
text-align: center;
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #222222;
|
}
|
.search_list {
|
width: 100%;
|
margin-top: 34rpx;
|
.search_list_item {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 48rpx;
|
.search_list_item_label {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
margin-bottom: 24rpx;
|
}
|
.search_list_item_cates {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.active {
|
background: #4c99a8 !important;
|
color: #ffffff !important;
|
}
|
.search_list_item_cates_row {
|
padding: 0 26rpx;
|
height: 64rpx;
|
line-height: 64rpx;
|
background: #f7f7f7;
|
border-radius: 36rpx;
|
margin-right: 20rpx;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0;
|
}
|
}
|
}
|
.search_list_item_val {
|
width: 100%;
|
height: 64rpx;
|
background: #f7f7f7;
|
border-radius: 36rpx;
|
border: 1rpx solid #e5e5e5;
|
display: flex;
|
align-items: center;
|
.search_list_item_val_row {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
.search_list_item_val_z {
|
flex-shrink: 0;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #999999;
|
margin: 0 30rpx;
|
}
|
}
|
}
|
}
|
.search_footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.t {
|
background: #4c99a8 !important;
|
color: #ffffff !important;
|
}
|
.search_footer_item {
|
flex: 1;
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 32rpx;
|
font-weight: 400;
|
color: #4c99a8;
|
margin-right: 18rpx;
|
border: 1rpx solid #4c99a8;
|
border-radius: 44rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
