<template>
|
<view class="flex flex-col eventTickets">
|
<web-view ref="sWebViewRef" :src="`${viewUrl}`" />
|
<!-- <view class="searchTop">
|
<up-search placeholder="请输入关键字搜索" :animation="true" v-model="listParams.keyword" :show-action="false"></up-search>
|
<div>111</div>
|
</view>
|
<view>
|
<up-tabs :list="tabList" @click="handleClick"></up-tabs>
|
<view class="eventBox">
|
<view class="eventItem" v-for="(item,index) in dataList" :key="index">
|
<img :src="item.photo_url" alt="" @click="detailHandle(item)" />
|
<div class="itemTitle">{{item.event_name}}</div>
|
<div class="itemContent">
|
<div class="itemStatus">
|
<span v-if="item.status === 0" style="background-color: #ff7411;"></span>
|
<span v-else-if="item.status === 2" style="background-color: #ff472f;"></span>
|
<span v-else-if="item.status === 3" style="background-color: #ffc300;"></span>
|
<span v-else-if="item.status === 4" style="background-color: #06d957;"></span>
|
<p>{{formatDate(item.create_time) }}</p>
|
</div>
|
<div>全屏</div>
|
</div>
|
</view>
|
</view>
|
</view> -->
|
</view>
|
|
</template>
|
|
<script setup>
|
import { useUserStore } from '@/store/index.js'
|
import {getList,getstatusCount} from '/src/api/work/index.js'
|
import dayjs from 'dayjs';
|
const userStore = useUserStore()
|
const userInfo = userStore.userInfo
|
const sWebViewRef = ref(null);
|
const viewUrl = `http://192.168.1.157:5173/drone-app-web-view/#/webViewWrapper/work?params=${JSON.stringify(userStore?.userInfo)}`;
|
const dataList = ref([])
|
const keyword = ref('')
|
const currentTab=ref('myTickets')
|
const tabList = ref([{
|
name: '我的工单',
|
key: 'myTickets',
|
badge: {
|
value: 1
|
}
|
},
|
{
|
name: '全部状态',
|
key: 'all',
|
badge: {
|
value: 2
|
},
|
status: null
|
},
|
{
|
name: '待审核',
|
key: 'pending',
|
badge: {
|
value: 3
|
},
|
status: '2'
|
},
|
{
|
name: '待处理',
|
key: 'processing',
|
badge: {
|
value: 4
|
},
|
status: '0'
|
},
|
{
|
name: '处理中',
|
key: 'inProgress',
|
badge: {
|
value: 5
|
},
|
status: '3'
|
},
|
{
|
name: '已完成',
|
key: 'completed',
|
badge: {
|
value: 6
|
},
|
status: '4'
|
}
|
])
|
const formatDate = (dateString) => {
|
return dayjs(dateString).format('MM/DD HH:mm');
|
};
|
const listParams = ref({
|
status: null,
|
current: 1,
|
size: 9999,
|
source: 1,
|
department:'',
|
keyword:''
|
|
})
|
const getDataList = () => {
|
const params = {
|
current: 1,
|
size: 9999,
|
source: 1,
|
status:listParams.value.status,
|
event_name:listParams.value.keyword,
|
user_id:currentTab.value=== 'myTickets' ?userInfo.user_id : undefined
|
}
|
getList(params).then(res => {
|
|
const response = res.data.data.records
|
dataList.value = response
|
})
|
}
|
const getstatusCountData=()=>{
|
getstatusCount().then(res=>{
|
const response = res.data.data
|
const { statusCount, totalCount, userCount } = response
|
tabList.value.forEach(tab=>{
|
|
if(tab.key === 'all'){
|
tab.badge.value = totalCount || 0
|
|
}else if(tab.key === 'myTickets'){
|
tab.badge.value = userCount || 0
|
}else{
|
tab.badge.value=statusCount[String(tab.status)] || 0
|
}
|
})
|
|
})
|
}
|
|
const handleClick = (item) => {
|
currentTab.value = item.key
|
listParams.value.status = item.status
|
getDataList()
|
}
|
const detailHandle = (val) => {
|
uni.navigateTo({
|
url: `/subPackages/workDetail/index?eventNum=${val.event_num}`,
|
})
|
}
|
onShow(() => {
|
getDataList()
|
getstatusCountData()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.eventTickets {
|
padding: 0 10px;
|
|
.searchTop {
|
display: flex;
|
align-items: center;
|
margin-top: 10px;
|
}
|
|
:deep(.u-badge) {
|
background-color: #1d6fe9 !important;
|
}
|
|
.eventBox {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
padding: 10px 0;
|
background-color: #ebeff2;
|
|
.eventItem {
|
width: calc(50% - 5px);
|
background-color: #fff;
|
border-radius: 5px;
|
overflow: hidden;
|
|
img {
|
width: 100%;
|
height: 100px;
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
|
.itemTitle {
|
padding: 0 5px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.itemContent {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 5px;
|
|
.itemStatus {
|
display: flex;
|
align-items: center;
|
|
span {
|
display: inline-block;
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
margin-right: 5px;
|
}
|
}
|
|
}
|
}
|
}
|
}
|
</style>
|
