<template>
|
<div class="eventTickets">
|
<div class="searchTop">
|
<van-search
|
placeholder="请输入关键字搜索"
|
:animation="true"
|
v-model="listParams.keyword"
|
:show-action="false"
|
@search="onSearch"
|
></van-search>
|
<div class="Hamburger" @click="selectag"><img src="/src/appDataSource/appwork/hbb.svg" alt="" /></div>
|
</div>
|
<div v-if="!showhanbao">
|
<van-tabs v-model:active="currentTab" @change="handleChange">
|
<van-tab
|
v-for="tab in tabList"
|
:key="tab.key"
|
:name="tab.key"
|
:title="tab.name"
|
:badge="tab.badge.value"
|
></van-tab>
|
</van-tabs>
|
<div class="eventBox">
|
<div 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 class="fullBtn"><img src="/src/appDataSource/appwork/fullscreen.svg" alt="" /></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="selectContainer" v-else>
|
<div class="leftTab">
|
<div
|
class="tabitem"
|
v-for="(item, index) in leftTabList"
|
:key="index"
|
@click="handleTabClick(item)"
|
:class="{ 'active': activeTab === item }"
|
>
|
{{ item }}
|
</div>
|
</div>
|
<div class="rightContent">
|
<div
|
v-for="(item, index) in rightDataList[activeTab]"
|
:key="index"
|
class="contentItem"
|
@click="filteringAlgorithms(item)"
|
>
|
<div class="imagediv"><img :src="`${baseUrl}/后台-算法仓库/${item.name}.png`" /></div>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { getList, getstatusCount, getDictionaryByCode, getChildList } from '/src/api/work/index.js'
|
import dayjs from 'dayjs'
|
import { useRoute } from 'vue-router'
|
import { useStore } from 'vuex'
|
const baseUrl = import.meta.env.VITE_APP_PICTURE_URL
|
const store = useStore()
|
const route = useRoute()
|
const userInfo = computed(() => store?.state?.user?.userInfo)
|
let AlgorithmData = ref([])
|
const dataList = 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: '',
|
parentId: '1905161774696075265',
|
})
|
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.value.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 handleChange = key => {
|
// 找到当前选中的标签
|
const currentTabItem = tabList.value.find(tab => tab.key === key)
|
if (currentTabItem) {
|
currentTab.value = key
|
listParams.value.status = currentTabItem.status
|
getDataList()
|
}
|
}
|
const detailHandle = val => {
|
uni.navigateTo({
|
url: `/subPackages/workDetail/index?eventNum=${val.event_num}`,
|
})
|
}
|
const onSearch = () => {
|
getDataList()
|
}
|
|
const showhanbao = ref(false)
|
const selectag = () => {
|
showhanbao.value = !showhanbao.value
|
}
|
// 筛选
|
const activeTab = ref('全部')
|
const leftTabList = ref(['全部'])
|
const rightDataList = ref({
|
'全部': [],
|
})
|
const handleTabClick = tab => {
|
activeTab.value = tab
|
}
|
// 算法
|
const requestDictionary = () => {
|
getChildList(listParams.value.current, listParams.value.size, listParams.value.parentId).then(res => {
|
AlgorithmData.value = res.data.data
|
const processedData = { '全部': [] }
|
const leftTabs = ['全部']
|
|
AlgorithmData.value.forEach(category => {
|
const categoryName = category.dictValue
|
leftTabs.push(categoryName)
|
|
processedData[categoryName] = []
|
if (category.children && category.children.length) {
|
const secondLevelData = category.children.map(item => ({
|
name: item.dictValue,
|
}))
|
|
processedData[categoryName] = secondLevelData
|
processedData['全部'] = [...processedData['全部'], ...secondLevelData]
|
}
|
})
|
|
rightDataList.value = processedData
|
leftTabList.value = leftTabs
|
})
|
}
|
const filteringAlgorithms = val => {
|
currentTab.value = 'all'
|
listParams.value.keyword = val.name
|
showhanbao.value = !showhanbao.value
|
getDataList()
|
}
|
onMounted(() => {
|
getDataList()
|
getstatusCountData()
|
requestDictionary()
|
})
|
</script>
|
<style scoped lang="scss">
|
.eventTickets {
|
padding: 0 10px;
|
|
.searchTop {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 10px;
|
width: 100%;
|
|
.Hamburger {
|
width: 20%;
|
width: 20px;
|
height: 20px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
:deep(.van-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;
|
}
|
}
|
.fullBtn {
|
img {
|
width: 14px;
|
height: 14px;
|
}
|
}
|
}
|
}
|
}
|
.selectContainer {
|
display: flex;
|
justify-content: space-between;
|
.active {
|
color: #1d6fe9;
|
}
|
.tabitem {
|
margin-bottom: 30px;
|
}
|
.leftTab {
|
white-space: nowrap;
|
margin-right: 20px;
|
}
|
.rightContent {
|
width: 100%;
|
display: grid;
|
grid-template-columns: repeat(3, 1fr); // 3 columns
|
gap: 10px; // spacing between items
|
height: 90px;
|
.contentItem {
|
.imagediv {
|
width: 58px;
|
height: 58px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
