| | |
| | | <template> |
| | | <view class="flex flex-col eventTickets"> |
| | | <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> |
| | | |
| | | <view class="eventTickets"> |
| | | <WebViewPlus |
| | | ref="sWebViewRef" |
| | | :src="`${viewUrl}`" |
| | | @webMessage="onPostMessage" |
| | | /> |
| | | </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 |
| | | import { getWebViewUrl } from "@/utils/index.js"; |
| | | import WebViewPlus from "@/components/WebViewPlus.vue"; |
| | | import { onShow, onHide } from "@dcloudio/uni-app"; |
| | | |
| | | 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 sWebViewRef = ref(null); |
| | | const updateKey = ref(0); |
| | | const viewUrl = computed(() => { |
| | | // #ifdef MP-WEIXIN |
| | | return getWebViewUrl("/work", { |
| | | updateKey: updateKey.value, |
| | | showAddBtn: 1, |
| | | }); |
| | | // #endif |
| | | |
| | | }) |
| | | 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 |
| | | // #ifndef MP-WEIXIN |
| | | return getWebViewUrl("/work", { |
| | | updateKey: updateKey.value, |
| | | showAddBtn: 0, |
| | | }); |
| | | // #endif |
| | | }); |
| | | |
| | | }else if(tab.key === 'myTickets'){ |
| | | tab.badge.value = userCount || 0 |
| | | }else{ |
| | | tab.badge.value=statusCount[String(tab.status)] || 0 |
| | | } |
| | | }) |
| | | |
| | | }) |
| | | } |
| | | function onPostMessage(data) { |
| | | // #ifdef MP-WEIXIN |
| | | if (data.type === "addWork") { |
| | | } |
| | | // #endif |
| | | |
| | | 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() |
| | | }) |
| | | // #ifndef MP-WEIXIN |
| | | if (data.type === "jumpMapNav") { |
| | | uni.navigateTo({ |
| | | url: `/subPackages/workDetail/mapWork/index?currentItem=${data.eventNum}`, |
| | | }); |
| | | } else if (data.type === "workid") { |
| | | uni.navigateTo({ |
| | | url: `/subPackages/workDetail/index?eventNum=${data.eventNum}&totalNum=${data.totalNum}&keyword=${data.keyword}&aiType=${data.aiType}&status=${data.status}¤t=${data.current}`, |
| | | }); |
| | | } else if (data.type === "bigImage") { |
| | | uni.navigateTo({ |
| | | url: `/subPackages/workDetail/photoMagnify/index?eventNum=${data.eventNum}`, |
| | | }); |
| | | } |
| | | // #endif |
| | | } |
| | | onShow(() => { |
| | | const joinParams = uni.getStorageSync("joinParams"); |
| | | if (joinParams) { |
| | | updateKey.value = updateKey.value + 1; |
| | | uni.removeStorageSync("joinParams"); |
| | | } |
| | | |
| | | // #ifndef MP-WEIXIN |
| | | uni.setTabBarItem({ |
| | | index: 2, // Tab 的索引(从0开始) |
| | | // text: '新建工单', |
| | | visible: true, |
| | | pagePath: "subPackages/workDetail/addWork/index", |
| | | }); |
| | | uni.setTabBarItem({ |
| | | index: 3, // Tab |
| | | visible: false, |
| | | }); |
| | | // #endif |
| | | |
| | | }); |
| | | |
| | | onHide(() => { |
| | | }); |
| | | </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> |
| | | .eventTickets { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | </style> |