|
|
@@ -10,552 +10,107 @@ import { useCalculatingHeight } from '@/hooks/calculatingHeight'
|
|
|
import { useHeaderSearch } from '@/stores/modules/headerSearch'
|
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
|
import dayjs from 'dayjs'
|
|
|
-import {
|
|
|
- FiltersType,
|
|
|
- updateFilter,
|
|
|
- deleteFilter,
|
|
|
- getFilterIndex,
|
|
|
- getFitler,
|
|
|
- getTags
|
|
|
-} from '@/utils/filters'
|
|
|
+import { useFiltersStore } from '@/stores/modules/filtersList'
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
const formatDate = userStore.dateFormat
|
|
|
const valueFormatDate = 'MM/DD/YYYY'
|
|
|
|
|
|
-const filtersList = ref<FiltersType[]>([])
|
|
|
-
|
|
|
-const initPage = () => {
|
|
|
- if (sessionStorage.getItem('trackingFilters') != null) {
|
|
|
- filtersList.value = getTags(
|
|
|
- JSON.parse(sessionStorage.getItem('trackingFilters') as string)
|
|
|
- ) as unknown as FiltersType[]
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const headerSearch = useHeaderSearch()
|
|
|
const filterRef: Ref<HTMLElement | null> = ref(null)
|
|
|
-
|
|
|
const containerHeight = useCalculatingHeight(document.documentElement, 246, [filterRef])
|
|
|
|
|
|
-const TrackingSearch = ref()
|
|
|
-const tableLoadingTableData = ref(false)
|
|
|
-let searchTableQeuryTracking: any = {}
|
|
|
-const filterData = reactive({
|
|
|
- filtersTagData: [] as Array<string>,
|
|
|
- transportData: [] as Array<string>,
|
|
|
- daterangeData: [] as Array<string>,
|
|
|
- morefiltersData: [] as Array<string>,
|
|
|
- dashboardData: [] as Array<string>
|
|
|
-})
|
|
|
-const tagsData: any = ref([])
|
|
|
-const handleClose = (tag: any) => {
|
|
|
- emitter.emit('clearTag', tag)
|
|
|
- tagsData.value.splice(tagsData.value.indexOf(tag), 1)
|
|
|
- if (
|
|
|
- sessionStorage.getItem('reportList') != null ||
|
|
|
- sessionStorage.getItem('reportList') != '{}'
|
|
|
- ) {
|
|
|
- const reportList = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
|
|
|
- let data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
|
|
|
- if (tag.includes('Transport')) {
|
|
|
- delete reportList.transport_mode
|
|
|
- } else if (tag.includes('Day') || tag.includes('CO2e')) {
|
|
|
- delete reportList._reportRef
|
|
|
- delete reportList._reportType
|
|
|
- delete reportList._reportRefe_date
|
|
|
- delete reportList._reportRefb_date
|
|
|
- delete reportList._reportStationType
|
|
|
- delete reportList._reportDataType
|
|
|
- delete reportList._reportStationType
|
|
|
- filterData.dashboardData = []
|
|
|
- data = {}
|
|
|
- } else if (tag.includes('ETD')) {
|
|
|
- filterData.daterangeData.forEach((item: any, index: any) => {
|
|
|
- if (item.includes('ETD')) {
|
|
|
- filterData.daterangeData.splice(index, 1)
|
|
|
- }
|
|
|
- })
|
|
|
- delete reportList.etd_start
|
|
|
- delete reportList.etd_end
|
|
|
- } else if (tag.includes('ETA')) {
|
|
|
- filterData.daterangeData.forEach((item: any, index: any) => {
|
|
|
- if (item.includes('ETA')) {
|
|
|
- filterData.daterangeData.splice(index, 1)
|
|
|
- }
|
|
|
- })
|
|
|
- delete reportList.eta_start
|
|
|
- delete reportList.eta_end
|
|
|
- } else if (tag.includes('Origin')) {
|
|
|
- delete reportList.shipper_city
|
|
|
- delete reportList._city_name
|
|
|
- filterData.dashboardData = []
|
|
|
- } else if (tag.includes('Destination')) {
|
|
|
- delete reportList.consignee_city
|
|
|
- }
|
|
|
- sessionStorage.setItem('reportList', JSON.stringify(reportList))
|
|
|
- sessionStorage.setItem('tagsList', JSON.stringify(data))
|
|
|
- }
|
|
|
- if (tag.includes('Transport')) {
|
|
|
- delete searchTableQeuryTracking.transport_mode
|
|
|
- } else if (tag.includes('Day') || tag.includes('CO2e')) {
|
|
|
- delete searchTableQeuryTracking._reportRef
|
|
|
- delete searchTableQeuryTracking._reportType
|
|
|
- delete searchTableQeuryTracking._reportRefe_date
|
|
|
- delete searchTableQeuryTracking._reportRefb_date
|
|
|
- delete searchTableQeuryTracking._reportStationType
|
|
|
- delete searchTableQeuryTracking._reportDataType
|
|
|
- delete searchTableQeuryTracking._reportStationType
|
|
|
- filterData.dashboardData = []
|
|
|
- } else if (tag.includes('ETD')) {
|
|
|
- filterData.daterangeData.forEach((item: any, index: any) => {
|
|
|
- if (item.includes('ETD')) {
|
|
|
- filterData.daterangeData.splice(index, 1)
|
|
|
- }
|
|
|
- })
|
|
|
- delete searchTableQeuryTracking.etd_start
|
|
|
- delete searchTableQeuryTracking.etd_end
|
|
|
- } else if (tag.includes('ETA')) {
|
|
|
- filterData.daterangeData.forEach((item: any, index: any) => {
|
|
|
- if (item.includes('ETA')) {
|
|
|
- filterData.daterangeData.splice(index, 1)
|
|
|
- }
|
|
|
- })
|
|
|
- delete searchTableQeuryTracking.eta_start
|
|
|
- delete searchTableQeuryTracking.eta_end
|
|
|
- } else if (tag.includes('Creation')) {
|
|
|
- delete searchTableQeuryTracking.created_time_start
|
|
|
- delete searchTableQeuryTracking.created_time_end
|
|
|
- } else if (tag.includes('Shippername')) {
|
|
|
- delete searchTableQeuryTracking.shipper
|
|
|
- } else if (tag.includes('Consigneename')) {
|
|
|
- delete searchTableQeuryTracking.consignee
|
|
|
- } else if (tag.includes('Service')) {
|
|
|
- delete searchTableQeuryTracking.service
|
|
|
- } else if (tag.includes('Incoterms')) {
|
|
|
- delete searchTableQeuryTracking.incoterms
|
|
|
- } else if (tag.includes('Notify Party')) {
|
|
|
- delete searchTableQeuryTracking.notify_party
|
|
|
- } else if (tag.includes('Bill to')) {
|
|
|
- delete searchTableQeuryTracking.billto
|
|
|
- } else if (tag.includes('Origin Agent')) {
|
|
|
- delete searchTableQeuryTracking.origin
|
|
|
- } else if (tag.includes('Destination Agent')) {
|
|
|
- delete searchTableQeuryTracking.agent
|
|
|
- } else if (tag.includes('Destination Operator')) {
|
|
|
- delete searchTableQeuryTracking.dest_op
|
|
|
- } else if (tag.includes('Sales')) {
|
|
|
- delete searchTableQeuryTracking.sales_rep
|
|
|
- } else if (tag.includes('Origin')) {
|
|
|
- delete searchTableQeuryTracking.shipper_city
|
|
|
- delete searchTableQeuryTracking._city_name
|
|
|
- filterData.dashboardData = []
|
|
|
- } else if (tag.includes('Destination')) {
|
|
|
- delete searchTableQeuryTracking.consignee_city
|
|
|
- } else if (tag.includes('Place of Receipt')) {
|
|
|
- delete searchTableQeuryTracking.place_of_receipt_exp
|
|
|
- } else if (tag.includes('Port of Loading')) {
|
|
|
- delete searchTableQeuryTracking.port_of_loading
|
|
|
- } else if (tag.includes('Place of delivery')) {
|
|
|
- delete searchTableQeuryTracking.place_of_delivery_exp
|
|
|
- } else if (tag.includes('Place of Discharge')) {
|
|
|
- delete searchTableQeuryTracking.port_of_discharge
|
|
|
- } else if (tag.includes('Vessel')) {
|
|
|
- delete searchTableQeuryTracking['f_vessel/vessel']
|
|
|
- } else if (tag.includes('Voyage')) {
|
|
|
- delete searchTableQeuryTracking['f_voyage/voyage']
|
|
|
- }
|
|
|
-
|
|
|
- sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
|
|
|
- getTrackingData()
|
|
|
-}
|
|
|
-// 筛选框查询
|
|
|
-const FiltersSeach = (val: any, value: any) => {
|
|
|
- searchTableQeuryTracking[val] = value
|
|
|
+const filtersStore = useFiltersStore()
|
|
|
+const filtersList = computed(() => filtersStore.filtersList)
|
|
|
|
|
|
- sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
|
|
|
- getTrackingData()
|
|
|
-}
|
|
|
-//TransportSearch
|
|
|
-const TransportSearch = (val: any) => {
|
|
|
- filterData.transportData = []
|
|
|
- if (val.data.length != 0) {
|
|
|
- let str = `${val.title}:${val.data}`
|
|
|
- filterData.transportData.push(str)
|
|
|
- }
|
|
|
- FiltersSeach('transport_mode', val.data)
|
|
|
- renderTagsData()
|
|
|
-}
|
|
|
-// defaultTransport
|
|
|
-const defaultTransport = (val: any, value: any) => {
|
|
|
- filterData.transportData = []
|
|
|
- if (val.data.length != 0) {
|
|
|
- let str = `${val.title}:${val.data}`
|
|
|
- filterData.transportData.push(str)
|
|
|
- }
|
|
|
- if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
|
|
|
- if (
|
|
|
- sessionStorage.getItem('clickParams') === null ||
|
|
|
- sessionStorage.getItem('clickParams') === '{}'
|
|
|
- ) {
|
|
|
- searchTableQeuryTracking.transport_mode = val.data
|
|
|
- }
|
|
|
- } else {
|
|
|
- searchTableQeuryTracking = value
|
|
|
- }
|
|
|
-}
|
|
|
-const setFilterData = (dateRangeData: any) => {
|
|
|
- filterData.daterangeData = []
|
|
|
- for (const key in dateRangeData) {
|
|
|
- const startEnd = dateRangeData[key].data[0] + ' To ' + dateRangeData[key].data[1]
|
|
|
- let str = `${key}:${startEnd}`
|
|
|
- filterData.daterangeData.push(str)
|
|
|
- }
|
|
|
-}
|
|
|
-//defaultDate
|
|
|
-const defaultDate = (dateRangeData: any, data: any) => {
|
|
|
- setFilterData(dateRangeData)
|
|
|
+const headerSearch = useHeaderSearch()
|
|
|
|
|
|
- if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
|
|
|
- if (
|
|
|
- sessionStorage.getItem('clickParams') === null ||
|
|
|
- sessionStorage.getItem('clickParams') === '{}'
|
|
|
- ) {
|
|
|
- if (Object.keys(dateRangeData).length == 0) {
|
|
|
- delete searchTableQeuryTracking.etd_start
|
|
|
- delete searchTableQeuryTracking.etd_end
|
|
|
+const filterTagsList = computed(() => {
|
|
|
+ return filtersList.value.map((filter) => {
|
|
|
+ if (filter.keyType === 'dateRange') {
|
|
|
+ return {
|
|
|
+ title: filter.title,
|
|
|
+ value: filter.title + ': ' + filter.value[0] + ' To ' + filter.value[1]
|
|
|
}
|
|
|
- for (const key in dateRangeData) {
|
|
|
- searchTableQeuryTracking.etd_start = dateRangeData[key].data[0]
|
|
|
-
|
|
|
- searchTableQeuryTracking.etd_end = dateRangeData[key].data[1]
|
|
|
+ } else if (filter.keyType === 'array') {
|
|
|
+ return {
|
|
|
+ title: filter.title,
|
|
|
+ value: filter.title + ': ' + filter.value.join(', ')
|
|
|
}
|
|
|
- }
|
|
|
- } else {
|
|
|
- searchTableQeuryTracking = data
|
|
|
- if (searchTableQeuryTracking._textSearch) {
|
|
|
- TrackingSearch.value = searchTableQeuryTracking._textSearch
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const rawData = localStorage.getItem('searchData')
|
|
|
- const trackingData = rawData ? JSON.parse(rawData) : null
|
|
|
- if (trackingData) {
|
|
|
- // 根据顶部搜索框的搜索结果赋值
|
|
|
- initDataByHeaderSearch()
|
|
|
- } else if (!trackingData && !sessionStorage.getItem('clickParams')) {
|
|
|
- getTrackingData()
|
|
|
- }
|
|
|
-
|
|
|
- renderTagsData()
|
|
|
-}
|
|
|
-//DateRangeSearch
|
|
|
-const DateRangeSearch = (dateRangeData: any) => {
|
|
|
- setFilterData(dateRangeData)
|
|
|
- if (Object.keys(dateRangeData).length == 0) {
|
|
|
- delete searchTableQeuryTracking.etd_start
|
|
|
- delete searchTableQeuryTracking.etd_end
|
|
|
- delete searchTableQeuryTracking.eta_start
|
|
|
- delete searchTableQeuryTracking.eta_end
|
|
|
- delete searchTableQeuryTracking.created_time_start
|
|
|
- delete searchTableQeuryTracking.created_time_end
|
|
|
- }
|
|
|
- const fieldList = [
|
|
|
- {
|
|
|
- title: 'ETD',
|
|
|
- keys: ['etd_start', 'etd_end']
|
|
|
- },
|
|
|
- { title: 'ETA', keys: ['eta_start', 'eta_end'] },
|
|
|
- { title: 'Creation Time', keys: ['created_time_start', 'created_time_end'] }
|
|
|
- ]
|
|
|
- fieldList.forEach((item) => {
|
|
|
- if (!dateRangeData.hasOwnProperty(item.title)) {
|
|
|
- // 删除不存在的字段
|
|
|
- searchTableQeuryTracking[item.keys[0]] = undefined
|
|
|
- searchTableQeuryTracking[item.keys[1]] = undefined
|
|
|
- }
|
|
|
- })
|
|
|
- for (const key in dateRangeData) {
|
|
|
- if (key == 'ETD') {
|
|
|
- searchTableQeuryTracking.etd_start = dateRangeData[key].data[0]
|
|
|
- searchTableQeuryTracking.etd_end = dateRangeData[key].data[1]
|
|
|
- } else if (key == 'ETA') {
|
|
|
- searchTableQeuryTracking.eta_start = dateRangeData[key].data[0]
|
|
|
- searchTableQeuryTracking.eta_end = dateRangeData[key].data[1]
|
|
|
} else {
|
|
|
- searchTableQeuryTracking.created_time_start = dateRangeData[key].data[0]
|
|
|
- searchTableQeuryTracking.created_time_end = dateRangeData[key].data[1]
|
|
|
- }
|
|
|
- }
|
|
|
- sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
|
|
|
- getTrackingData()
|
|
|
- renderTagsData()
|
|
|
-}
|
|
|
-//MoreFiltersSearch
|
|
|
-const MoreFiltersSearch = (val: any, value: any) => {
|
|
|
- filterData.morefiltersData = []
|
|
|
- if (Object.keys(value).length == 0) {
|
|
|
- delete searchTableQeuryTracking.shipper
|
|
|
- delete searchTableQeuryTracking.consignee
|
|
|
- delete searchTableQeuryTracking.service
|
|
|
- delete searchTableQeuryTracking.incoterms
|
|
|
- delete searchTableQeuryTracking.notify_party
|
|
|
- delete searchTableQeuryTracking.billto
|
|
|
- delete searchTableQeuryTracking.origin
|
|
|
- delete searchTableQeuryTracking.agent
|
|
|
- delete searchTableQeuryTracking.sales_rep
|
|
|
- delete searchTableQeuryTracking.dest_op
|
|
|
- delete searchTableQeuryTracking.consignee_city
|
|
|
- delete searchTableQeuryTracking.place_of_receipt_exp
|
|
|
- delete searchTableQeuryTracking.place_of_delivery_exp
|
|
|
- delete searchTableQeuryTracking.port_of_discharge
|
|
|
- delete searchTableQeuryTracking.shipper_city
|
|
|
- delete searchTableQeuryTracking['port_of_loading/fport_of_loading_un']
|
|
|
- delete searchTableQeuryTracking['f_vessel/vessel']
|
|
|
- delete searchTableQeuryTracking['f_voyage/voyage']
|
|
|
- }
|
|
|
- for (const key in val) {
|
|
|
- let str = `${key}:${val[key]}`
|
|
|
- filterData.morefiltersData.push(str)
|
|
|
- if (key == 'Shippername') {
|
|
|
- searchTableQeuryTracking.shipper = value[key]
|
|
|
- } else if (key == 'Consigneename') {
|
|
|
- searchTableQeuryTracking.consignee = value[key]
|
|
|
- } else if (key == 'Service') {
|
|
|
- searchTableQeuryTracking.service = value[key]
|
|
|
- } else if (key == 'Incoterms') {
|
|
|
- searchTableQeuryTracking.incoterms = value[key]
|
|
|
- } else if (key == 'Notify Party') {
|
|
|
- searchTableQeuryTracking.notify_party = value[key]
|
|
|
- } else if (key == 'Bill to') {
|
|
|
- searchTableQeuryTracking.billto = value[key]
|
|
|
- } else if (key == 'Origin Agent') {
|
|
|
- searchTableQeuryTracking.origin = value[key]
|
|
|
- } else if (key == 'Destination Agent') {
|
|
|
- searchTableQeuryTracking.agent = value[key]
|
|
|
- } else if (key == 'Destination Operator') {
|
|
|
- searchTableQeuryTracking.dest_op = value[key]
|
|
|
- } else if (key == 'Sales') {
|
|
|
- searchTableQeuryTracking.sales_rep = value[key]
|
|
|
- } else if (key == 'Destination') {
|
|
|
- searchTableQeuryTracking.consignee_city = value[key]
|
|
|
- } else if (key == 'Place of Receipt') {
|
|
|
- searchTableQeuryTracking.place_of_receipt_exp = value[key]
|
|
|
- } else if (key == 'Origin') {
|
|
|
- searchTableQeuryTracking.shipper_city = value[key]
|
|
|
- } else if (key == 'Port of Loading') {
|
|
|
- searchTableQeuryTracking['port_of_loading/fport_of_loading_un'] = value[key]
|
|
|
- } else if (key == 'Place of delivery') {
|
|
|
- searchTableQeuryTracking.place_of_delivery_exp = value[key]
|
|
|
- } else if (key == 'Port of Discharge') {
|
|
|
- searchTableQeuryTracking.port_of_discharge = value[key]
|
|
|
- } else if (key == 'Vessel') {
|
|
|
- searchTableQeuryTracking['f_vessel/vessel'] = value[key]
|
|
|
- } else if (key == 'Voyage') {
|
|
|
- searchTableQeuryTracking['f_voyage/voyage'] = value[key]
|
|
|
- }
|
|
|
- }
|
|
|
- sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
|
|
|
- getTrackingData()
|
|
|
- renderTagsData()
|
|
|
-}
|
|
|
-const defaultMorefilters = (val: any, value: any, data: any) => {
|
|
|
- filterData.morefiltersData = []
|
|
|
- for (const key in val) {
|
|
|
- let str = `${key}:${val[key]}`
|
|
|
- filterData.morefiltersData.push(str)
|
|
|
- for (const key in val) {
|
|
|
- if (key == 'Shippername') {
|
|
|
- searchTableQeuryTracking.shipper = value[key]
|
|
|
- } else if (key == 'Consigneename') {
|
|
|
- searchTableQeuryTracking.consignee = value[key]
|
|
|
- } else if (key == 'Service') {
|
|
|
- searchTableQeuryTracking.service = value[key]
|
|
|
- } else if (key == 'Incoterms') {
|
|
|
- searchTableQeuryTracking.incoterms = value[key]
|
|
|
- } else if (key == 'Notify Party') {
|
|
|
- searchTableQeuryTracking.notify_party = value[key]
|
|
|
- } else if (key == 'Bill to') {
|
|
|
- searchTableQeuryTracking.billto = value[key]
|
|
|
- } else if (key == 'Destination Operator') {
|
|
|
- searchTableQeuryTracking.dest_op = value[key]
|
|
|
- } else if (key == 'Origin Agent') {
|
|
|
- searchTableQeuryTracking.origin = value[key]
|
|
|
- } else if (key == 'Destination Agent') {
|
|
|
- searchTableQeuryTracking.agent = value[key]
|
|
|
- } else if (key == 'Sales') {
|
|
|
- searchTableQeuryTracking.sales_rep = value[key]
|
|
|
- } else if (key == 'Origin') {
|
|
|
- searchTableQeuryTracking.shipper_city = value[key]
|
|
|
- } else if (key == 'Destination') {
|
|
|
- searchTableQeuryTracking.consignee_city = value[key]
|
|
|
- } else if (key == 'Place of Receipt') {
|
|
|
- searchTableQeuryTracking.place_of_receipt_exp = value[key]
|
|
|
- } else if (key == 'Port of Loading') {
|
|
|
- searchTableQeuryTracking.port_of_loading = value[key]
|
|
|
- } else if (key == 'Place of delivery') {
|
|
|
- searchTableQeuryTracking.place_of_delivery_exp = value[key]
|
|
|
- } else if (key == 'Place of Discharge') {
|
|
|
- searchTableQeuryTracking.port_of_discharge = value[key]
|
|
|
- } else if (key == 'Vessel') {
|
|
|
- searchTableQeuryTracking['f_vessel/vessel'] = value[key]
|
|
|
- } else if (key == 'Voyage') {
|
|
|
- searchTableQeuryTracking['f_voyage/voyage'] = value[key]
|
|
|
+ return {
|
|
|
+ title: filter.title,
|
|
|
+ value: filter.title + ': ' + filter.value
|
|
|
}
|
|
|
}
|
|
|
- if (sessionStorage.getItem('searchTableQeuryTracking') != null) {
|
|
|
- searchTableQeuryTracking = data
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-const clearfilters = () => {
|
|
|
- TrackingSearch.value = ''
|
|
|
- filterData.filtersTagData = []
|
|
|
- tagsData.value = []
|
|
|
- let str = 'Shipment status: All'
|
|
|
- filterData.filtersTagData.push(str)
|
|
|
- filterData.transportData = []
|
|
|
- filterData.daterangeData = []
|
|
|
- filterData.morefiltersData = []
|
|
|
- filterData.dashboardData = []
|
|
|
- emitter.emit('clearTag', 'Shipment status')
|
|
|
- emitter.emit('clearTag', 'Transport Mode')
|
|
|
- emitter.emit('clearTag', 'ETD')
|
|
|
- emitter.emit('clearTag', 'ETA')
|
|
|
- emitter.emit('clearTag', 'Creation Time')
|
|
|
- emitter.emit('clearTag', 'Shippername')
|
|
|
- emitter.emit('clearTag', 'Consigneename')
|
|
|
- emitter.emit('clearTag', 'Service')
|
|
|
- emitter.emit('clearTag', 'Incoterms')
|
|
|
- emitter.emit('clearTag', 'Notify Party')
|
|
|
- emitter.emit('clearTag', 'Bill to')
|
|
|
- emitter.emit('clearTag', 'Origin Agent')
|
|
|
- emitter.emit('clearTag', 'Destination Agent')
|
|
|
- emitter.emit('clearTag', 'Destination Operator')
|
|
|
- emitter.emit('clearTag', 'Sales')
|
|
|
- emitter.emit('clearTag', 'Origin')
|
|
|
- emitter.emit('clearTag', 'Destination')
|
|
|
- emitter.emit('clearTag', 'Place of Receipt')
|
|
|
- emitter.emit('clearTag', 'Port of Loading')
|
|
|
- emitter.emit('clearTag', 'Place of delivery')
|
|
|
- emitter.emit('clearTag', 'Port of Discharge')
|
|
|
- emitter.emit('clearTag', 'Vessel')
|
|
|
- emitter.emit('clearTag', 'Voyage')
|
|
|
- searchTableQeuryTracking = {}
|
|
|
- searchTableQeuryTracking.filterTag = ['All']
|
|
|
- sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
|
|
|
- if (
|
|
|
- sessionStorage.getItem('reportList') != null ||
|
|
|
- sessionStorage.getItem('reportList') != '{}'
|
|
|
- ) {
|
|
|
- // sessionStorage.removeItem('reportList')
|
|
|
- sessionStorage.removeItem('tagsList')
|
|
|
- }
|
|
|
- getTrackingData()
|
|
|
- renderTagsData()
|
|
|
-}
|
|
|
-const renderTagsData = () => {
|
|
|
- const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
|
|
|
- if (Object.keys(data).length != 0) {
|
|
|
- let str = `${data.title}:${data.name}`
|
|
|
- !filterData.dashboardData.includes(str) && filterData.dashboardData.push(str)
|
|
|
- }
|
|
|
- tagsData.value = []
|
|
|
- if (filterData.transportData.length) {
|
|
|
- tagsData.value.push(filterData.transportData[0])
|
|
|
- }
|
|
|
- if (filterData.daterangeData.length) {
|
|
|
- filterData.daterangeData.forEach((item) => {
|
|
|
- tagsData.value.push(item)
|
|
|
- })
|
|
|
- }
|
|
|
- if (filterData.morefiltersData.length) {
|
|
|
- filterData.morefiltersData.forEach((item) => {
|
|
|
- tagsData.value.push(item)
|
|
|
+ })
|
|
|
+})
|
|
|
+const initPage = () => {
|
|
|
+ if (!filtersList.value || (filtersList.value && filtersList.value.length == 0)) {
|
|
|
+ filtersStore.updateFilter({
|
|
|
+ title: 'Transport Mode',
|
|
|
+ value: ['All'],
|
|
|
+ keyType: 'array',
|
|
|
+ key: 'transport_mode'
|
|
|
})
|
|
|
- }
|
|
|
- if (filterData.dashboardData.length) {
|
|
|
- filterData.dashboardData.forEach((item) => {
|
|
|
- tagsData.value.push(item)
|
|
|
+ filtersStore.updateFilter({
|
|
|
+ title: 'ETD',
|
|
|
+ value: [
|
|
|
+ dayjs().subtract(2, 'month').startOf('month').format(formatDate),
|
|
|
+ dayjs().add(1, 'month').format(formatDate)
|
|
|
+ ],
|
|
|
+ keyType: 'dateRange',
|
|
|
+ key: ['etd_start', 'etd_end']
|
|
|
})
|
|
|
- }
|
|
|
- if (filterData.filtersTagData.length) {
|
|
|
- filterData.filtersTagData.forEach((item) => {
|
|
|
- tagsData.value.push(item)
|
|
|
+ filtersStore.updateFilter({
|
|
|
+ title: 'Shipment Status',
|
|
|
+ value: ['All'],
|
|
|
+ keyType: 'array',
|
|
|
+ key: 'filterTag'
|
|
|
})
|
|
|
+ } else {
|
|
|
}
|
|
|
}
|
|
|
-// 清除 Transport Tags
|
|
|
-const clearTransportTags = () => {
|
|
|
- filterData.transportData = []
|
|
|
-}
|
|
|
-// 清除 Daterange Tags
|
|
|
-const clearDaterangeTags = () => {
|
|
|
- filterData.daterangeData = []
|
|
|
-}
|
|
|
-// 清除 MoreFilters Tags
|
|
|
-const clearMoreFiltersTags = () => {
|
|
|
- filterData.morefiltersData = []
|
|
|
-}
|
|
|
|
|
|
-const initDataByHeaderSearch = () => {
|
|
|
- const data = JSON.parse(localStorage.getItem('searchData'))
|
|
|
- if (data) {
|
|
|
- // 更新搜索框的值
|
|
|
- TrackingSearch.value = data.searchValue
|
|
|
- // 更新表格数据
|
|
|
- TrackingTable_ref.value.getSharedTableData()
|
|
|
- // 更新tagsList和TransportList
|
|
|
- TransportListItem.value = data.trackingData.TransportList
|
|
|
- TagsList.value = data.trackingData.tagsList
|
|
|
- let obj = {
|
|
|
- IncotermsList: data.trackingData.IncotermsList,
|
|
|
- ServiceList: data.trackingData.ServiceList
|
|
|
- }
|
|
|
- sessionStorage.setItem('incotermsList', JSON.stringify(obj))
|
|
|
- headerSearch.clearSearchData()
|
|
|
- tagsData.value = []
|
|
|
- filterData.transportData = []
|
|
|
- filterData.daterangeData = []
|
|
|
- filterData.morefiltersData = []
|
|
|
- filterData.dashboardData = []
|
|
|
- filterData.filtersTagData = []
|
|
|
- let str = 'Shipment status: All'
|
|
|
- filterData.filtersTagData.push(str)
|
|
|
- searchTableQeuryTracking = {}
|
|
|
- sessionStorage.removeItem('searchTableQeuryTracking')
|
|
|
- searchTableQeuryTracking._textSearch = TrackingSearch.value
|
|
|
- searchTableQeuryTracking.filterTag = ['All']
|
|
|
+initPage()
|
|
|
+
|
|
|
+const TrackingSearch = ref()
|
|
|
+const tableLoadingTableData = ref(false)
|
|
|
|
|
|
- sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
|
|
|
- setTimeout(() => {
|
|
|
- emitter.emit('clearTag', 'Shipment status')
|
|
|
- emitter.emit('clearTag', 'Transport Mode')
|
|
|
- emitter.emit('clearTag', 'ETD')
|
|
|
- emitter.emit('clearTag', 'ETA')
|
|
|
- emitter.emit('clearTag', 'Creation Time')
|
|
|
- emitter.emit('clearTag', 'Shippername')
|
|
|
- emitter.emit('clearTag', 'Consigneename')
|
|
|
- emitter.emit('clearTag', 'Service')
|
|
|
- emitter.emit('clearTag', 'Incoterms')
|
|
|
- emitter.emit('clearTag', 'Notify Party')
|
|
|
- emitter.emit('clearTag', 'Bill to')
|
|
|
- emitter.emit('clearTag', 'Origin Agent')
|
|
|
- emitter.emit('clearTag', 'Destination Agent')
|
|
|
- emitter.emit('clearTag', 'Destination Operator')
|
|
|
- emitter.emit('clearTag', 'Sales')
|
|
|
- emitter.emit('clearTag', 'Origin')
|
|
|
- emitter.emit('clearTag', 'Destination')
|
|
|
- emitter.emit('clearTag', 'Place of Receipt')
|
|
|
- emitter.emit('clearTag', 'Port of Loading')
|
|
|
- emitter.emit('clearTag', 'Place of delivery')
|
|
|
- emitter.emit('clearTag', 'Port of Discharge')
|
|
|
- emitter.emit('clearTag', 'Vessel')
|
|
|
- emitter.emit('clearTag', 'Voyage')
|
|
|
- }, 2000)
|
|
|
- renderTagsData()
|
|
|
+const tabList = ref([
|
|
|
+ {
|
|
|
+ name: 'All',
|
|
|
+ number: 0,
|
|
|
+ checked: true,
|
|
|
+ type: 'all'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Created',
|
|
|
+ number: 0,
|
|
|
+ checked: false,
|
|
|
+ type: 'created'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Confirmed',
|
|
|
+ number: 0,
|
|
|
+ checked: false,
|
|
|
+ type: 'confirmed'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Cancelled',
|
|
|
+ number: 0,
|
|
|
+ checked: false,
|
|
|
+ type: 'cancelled'
|
|
|
}
|
|
|
+])
|
|
|
+
|
|
|
+// 筛选框查询
|
|
|
+const FiltersSeach = (val: any, value: any) => {
|
|
|
+ getTrackingData()
|
|
|
}
|
|
|
+//TransportSearch
|
|
|
+const TransportSearch = (val: any) => {}
|
|
|
+
|
|
|
+//defaultDate
|
|
|
|
|
|
// 从 store 中获取数据并绑定到输入框
|
|
|
const headerSearchdData = computed(() => headerSearch.searchValue)
|
|
|
@@ -564,37 +119,19 @@ watch(
|
|
|
() => headerSearchdData.value,
|
|
|
(newData) => {
|
|
|
if (newData) {
|
|
|
- initDataByHeaderSearch()
|
|
|
+ // 从顶部获取的值
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
|
|
|
const TrackingTable_ref = ref()
|
|
|
-const TransportListItem = ref()
|
|
|
-interface ListItem {
|
|
|
- name: string
|
|
|
- number: number
|
|
|
- type: string
|
|
|
- checked: boolean
|
|
|
-}
|
|
|
-const TagsList = ref<ListItem[]>([])
|
|
|
-const filterTag = ref(['All'])
|
|
|
+const transportListItem = ref()
|
|
|
+
|
|
|
const isShowAlertIcon = ref(false)
|
|
|
+const incotermsList = ref([])
|
|
|
+const serviceList = ref([])
|
|
|
const getTrackingData = () => {
|
|
|
- const dateRangeKeys = [
|
|
|
- 'etd_start',
|
|
|
- 'etd_end',
|
|
|
- 'eta_start',
|
|
|
- 'eta_end',
|
|
|
- 'created_time_start',
|
|
|
- 'created_time_end'
|
|
|
- ]
|
|
|
- const curRangeData = {}
|
|
|
- for (const key of dateRangeKeys) {
|
|
|
- if (searchTableQeuryTracking[key]) {
|
|
|
- curRangeData[key] = dayjs(searchTableQeuryTracking[key], formatDate).format(valueFormatDate)
|
|
|
- }
|
|
|
- }
|
|
|
+ const queryData = filtersStore.getQueryData
|
|
|
|
|
|
tableLoadingTableData.value = true
|
|
|
TrackingTable_ref.value.getLoadingData(tableLoadingTableData.value)
|
|
|
@@ -604,33 +141,26 @@ const getTrackingData = () => {
|
|
|
ps: TrackingTable_ref.value.pageInfo.pageSize,
|
|
|
rc: -1,
|
|
|
other_filed: '',
|
|
|
- ...searchTableQeuryTracking,
|
|
|
- ...curRangeData
|
|
|
+ ...queryData
|
|
|
})
|
|
|
.then((res: any) => {
|
|
|
if (res.code === 200) {
|
|
|
- TransportListItem.value = res.data.TransportList
|
|
|
- TagsList.value = res.data.tagsList
|
|
|
- let obj = {
|
|
|
- IncotermsList: res.data.IncotermsList,
|
|
|
- ServiceList: res.data.ServiceList
|
|
|
- }
|
|
|
- let taglist: any = []
|
|
|
- if (Object.keys(filterData.filtersTagData).length == 0) {
|
|
|
- TagsList.value.forEach((item: any) => {
|
|
|
- if (item.checked == true) {
|
|
|
- taglist.push(item.name)
|
|
|
- }
|
|
|
- })
|
|
|
- let str = 'Shipment status: ' + taglist.toString()
|
|
|
- filterData.filtersTagData.push(str)
|
|
|
- filterData.filtersTagData.forEach((item) => {
|
|
|
- tagsData.value.push(item)
|
|
|
- })
|
|
|
- }
|
|
|
- sessionStorage.setItem('incotermsList', JSON.stringify(obj))
|
|
|
+ transportListItem.value = res.data.TransportList
|
|
|
+ tabList.value = res.data.tagsList
|
|
|
+ const checkedTabNames = tabList.value
|
|
|
+ .filter((item) => item.checked)
|
|
|
+ .map((item) => item.name)
|
|
|
+ filtersStore.updateFilter({
|
|
|
+ title: 'Shipment Status',
|
|
|
+ value: checkedTabNames,
|
|
|
+ keyType: 'array',
|
|
|
+ key: 'filterTag'
|
|
|
+ })
|
|
|
+ incotermsList.value = res.data.IncotermsList
|
|
|
+ serviceList.value = res.data.ServiceList
|
|
|
+
|
|
|
sessionStorage.setItem('TrackingData', JSON.stringify(res.data))
|
|
|
- TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
|
|
|
+ TrackingTable_ref.value.searchTableData()
|
|
|
// 查询没结果的话显示icon
|
|
|
if (TrackingSearch.value != '' && TrackingSearch.value != undefined) {
|
|
|
if (res.data.searchData.length == 0) {
|
|
|
@@ -641,96 +171,56 @@ const getTrackingData = () => {
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
- .finally(() => {
|
|
|
- sessionStorage.removeItem('clickParams')
|
|
|
- })
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
- if (
|
|
|
- sessionStorage.getItem('clickParams') != null &&
|
|
|
- sessionStorage.getItem('clickParams') != '{}'
|
|
|
- ) {
|
|
|
- const reportList = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
|
|
|
- for (const key in reportList) {
|
|
|
- let str = ''
|
|
|
- switch (key) {
|
|
|
- case 'etd_start':
|
|
|
- const startDate = dayjs(reportList['etd_start'], valueFormatDate).format(formatDate)
|
|
|
- searchTableQeuryTracking['etd_start'] = startDate
|
|
|
- const endDate = dayjs(reportList['etd_end'], valueFormatDate).format(formatDate)
|
|
|
- searchTableQeuryTracking['etd_end'] = endDate
|
|
|
- const startEnd = startDate + ' To ' + endDate
|
|
|
- str = `ETD:${startEnd}`
|
|
|
- // filterData.daterangeData.push(str)
|
|
|
- break
|
|
|
-
|
|
|
- case 'etd_end':
|
|
|
- break
|
|
|
- case 'eta_start':
|
|
|
- const etaStart = dayjs(reportList['eta_start'], valueFormatDate).format(formatDate)
|
|
|
- searchTableQeuryTracking['eta_start'] = etaStart
|
|
|
- const etaEnd = dayjs(reportList['eta_end'], valueFormatDate).format(formatDate)
|
|
|
- searchTableQeuryTracking['eta_end'] = etaEnd
|
|
|
- str = `ETA:${etaStart} To ${etaEnd}`
|
|
|
- // filterData.daterangeData.push(str)
|
|
|
- break
|
|
|
-
|
|
|
- case 'eta_end':
|
|
|
- break
|
|
|
- case 'created_time_start':
|
|
|
- const createdTimeStart = dayjs(reportList['created_time_start'], valueFormatDate).format(
|
|
|
- formatDate
|
|
|
- )
|
|
|
- searchTableQeuryTracking['created_time_start'] = createdTimeStart
|
|
|
- const createdTimeEnd = dayjs(reportList['created_time_end'], valueFormatDate).format(
|
|
|
- formatDate
|
|
|
- )
|
|
|
- searchTableQeuryTracking['created_time_end'] = createdTimeEnd
|
|
|
- str = `Creation Time:${createdTimeStart} To ${createdTimeEnd}`
|
|
|
- // filterData.daterangeData.push(str)
|
|
|
- break
|
|
|
- case 'created_time_end':
|
|
|
- break
|
|
|
- default:
|
|
|
- searchTableQeuryTracking[key] = reportList[key]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // sessionStorage.removeItem('reportList')
|
|
|
- sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
|
|
|
- getTrackingData()
|
|
|
- }
|
|
|
- renderTagsData()
|
|
|
+ getTrackingData()
|
|
|
})
|
|
|
-const changeTag = (val: any, boolean: any) => {
|
|
|
- filterData.filtersTagData = []
|
|
|
- searchTableQeuryTracking.filterTag = val
|
|
|
- let str = 'Shipment status: ' + val
|
|
|
- filterData.filtersTagData.push(str)
|
|
|
- filterTag.value = val
|
|
|
|
|
|
- sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
|
|
|
- if (boolean) {
|
|
|
- getTrackingData()
|
|
|
- }
|
|
|
- renderTagsData()
|
|
|
+const tabChange = (changeTabList: any) => {
|
|
|
+ tabList.value = changeTabList
|
|
|
+ const checkedTabNames = tabList.value.filter((item) => item.checked).map((item) => item.name)
|
|
|
+ filtersStore.updateFilter({
|
|
|
+ title: 'Shipment Status',
|
|
|
+ value: checkedTabNames,
|
|
|
+ keyType: 'array',
|
|
|
+ key: 'filterTag'
|
|
|
+ })
|
|
|
+
|
|
|
+ getTrackingData()
|
|
|
}
|
|
|
// 点击search按钮
|
|
|
const SearchInput = () => {
|
|
|
- searchTableQeuryTracking._textSearch = TrackingSearch.value
|
|
|
-
|
|
|
- sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
|
|
|
- getTrackingData()
|
|
|
+ TrackingTable_ref.value.searchTableData()
|
|
|
}
|
|
|
|
|
|
import TrackingGuide from './components/TrackingGuide.vue'
|
|
|
import { useGuideStore } from '@/stores/modules/guide'
|
|
|
+import { onBeforeRouteLeave } from 'vue-router'
|
|
|
|
|
|
const guideStore = useGuideStore()
|
|
|
const trackingGuideRef = ref()
|
|
|
const handleGuide = () => {
|
|
|
trackingGuideRef.value.startGuide() // 开始引导
|
|
|
}
|
|
|
+
|
|
|
+const clearfilters = () => {}
|
|
|
+
|
|
|
+const handleClose = (tagTitle: any) => {
|
|
|
+ filtersStore.deleteFilterByTitle(tagTitle)
|
|
|
+ getTrackingData()
|
|
|
+}
|
|
|
+
|
|
|
+const clearDaterangeTags = () => {}
|
|
|
+
|
|
|
+const clearMoreFiltersTags = () => {}
|
|
|
+
|
|
|
+onBeforeRouteLeave((route: any) => {
|
|
|
+ // guideStore.clearGuide()
|
|
|
+ const whiteList = ['Booking Detail', 'Tracking Detail']
|
|
|
+ if (!whiteList.includes(route?.name)) {
|
|
|
+ filtersStore.clearFilters()
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -742,7 +232,7 @@ const handleGuide = () => {
|
|
|
<div class="display" ref="filterRef">
|
|
|
<div class="filter-box">
|
|
|
<div class="filters-container" id="filters-container-guide">
|
|
|
- <FilterTags :TagsListItem="TagsList" @changeTag="changeTag"></FilterTags>
|
|
|
+ <FilterTags :tagsList="tabList" @changeTag="tabChange"></FilterTags>
|
|
|
<div class="heaer_top">
|
|
|
<div class="search">
|
|
|
<el-input
|
|
|
@@ -778,63 +268,52 @@ const handleGuide = () => {
|
|
|
</div>
|
|
|
|
|
|
<TransportMode
|
|
|
- :isShipment="true"
|
|
|
- :TransportListItem="TransportListItem"
|
|
|
+ :transportListItem="transportListItem"
|
|
|
@TransportSearch="TransportSearch"
|
|
|
- @defaultTransport="defaultTransport"
|
|
|
- @clearTransportTags="clearTransportTags"
|
|
|
></TransportMode>
|
|
|
<DateRange
|
|
|
- :isShipment="true"
|
|
|
- @DateRangeSearch="DateRangeSearch"
|
|
|
+ @DateRangeSearch="getTrackingData()"
|
|
|
@clearDaterangeTags="clearDaterangeTags"
|
|
|
- @defaultDate="defaultDate"
|
|
|
></DateRange>
|
|
|
</div>
|
|
|
</div>
|
|
|
<MoreFilters
|
|
|
- :isShipment="true"
|
|
|
- :searchTableQeury="searchTableQeuryTracking"
|
|
|
- @MoreFiltersSearch="MoreFiltersSearch"
|
|
|
+ :incotermsList="incotermsList"
|
|
|
+ :serviceList="serviceList"
|
|
|
@clearMoreFiltersTags="clearMoreFiltersTags"
|
|
|
- @defaultMorefilters="defaultMorefilters"
|
|
|
:isShowMoreFiltersGuidePhoto="guideStore.tracking.isShowMoreFiltersGuidePhoto"
|
|
|
- :pageMode="'tracking'"
|
|
|
></MoreFilters>
|
|
|
<el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
|
|
|
>Search</el-button
|
|
|
>
|
|
|
</div>
|
|
|
<!-- 筛选项 -->
|
|
|
- <div class="filtersTag" v-if="tagsData.length" id="filter-tag-guide">
|
|
|
+ <div class="filtersTag" v-if="filterTagsList.length" id="filter-tag-guide">
|
|
|
<el-tag
|
|
|
- :key="tag"
|
|
|
+ :key="tag.title"
|
|
|
class="tag"
|
|
|
- v-for="tag in tagsData"
|
|
|
- :closable="!tag.includes('Shipment')"
|
|
|
+ v-for="tag in filterTagsList"
|
|
|
+ :closable="!tag.title.includes('Shipment')"
|
|
|
:disable-transitions="false"
|
|
|
- @close="handleClose(tag)"
|
|
|
+ @close="handleClose(tag.title)"
|
|
|
color="#EFEFF0"
|
|
|
>
|
|
|
<el-tooltip
|
|
|
class="box-item"
|
|
|
effect="dark"
|
|
|
- :content="tag"
|
|
|
+ :content="tag.value"
|
|
|
placement="top"
|
|
|
- v-if="tag.length > 39"
|
|
|
+ :popper-style="{ maxWidth: '500px', whiteSpace: 'normal', wordWrap: 'break-word' }"
|
|
|
+ v-if="tag.value.length > 39"
|
|
|
>
|
|
|
- {{ tag.length > 39 ? tag.substr(0, 39) + '...' : tag }}
|
|
|
+ {{ tag.value.length > 39 ? tag.value.slice(0, 39) + '...' : tag.value }}
|
|
|
</el-tooltip>
|
|
|
- <div v-else>{{ tag }}</div>
|
|
|
+ <div v-else>{{ tag.value }}</div>
|
|
|
</el-tag>
|
|
|
<div class="text_button" @click="clearfilters">Clear Filters</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <TrackingTable
|
|
|
- :height="containerHeight"
|
|
|
- :tagsData="tagsData"
|
|
|
- ref="TrackingTable_ref"
|
|
|
- ></TrackingTable>
|
|
|
+ <TrackingTable :height="containerHeight" ref="TrackingTable_ref"></TrackingTable>
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss" scoped>
|
Jack Zhou