k_online_ui/src/views/Tracking/src/TrackingView.vue

<script setup lang="ts">
import FilterTags from '@/components/FliterTags'
import emitter from '@/utils/bus'
import TransportMode from '@/components/TransportMode'
import TrackingTable from './components/TrackingTable'
import DateRange from '@/components/DateRange'
import MoreFilters from '@/components/MoreFilters'
import { ref, reactive, onMounted } from 'vue'
import { useCalculatingHeight } from '@/hooks/calculatingHeight'
import { useHeaderSearch } from '@/stores/modules/headerSearch'

const headerSearch = useHeaderSearch()

const filterRef: Ref<HTMLElement | null> = ref(null)

const containerHeight = useCalculatingHeight(document.documentElement, 246, [filterRef])

const TrackingSearch = ref()
let searchTableQeuryTracking: any = {}
const filterData = reactive({
  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 (tag.includes('Transport')) {
    delete searchTableQeuryTracking.transport_mode
  } 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/consignee_city']
  } else if (tag.includes('Destination')) {
    delete searchTableQeuryTracking.final_desination
  } 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']
  } else {
    delete searchTableQeuryTracking._reportRef
    delete searchTableQeuryTracking._reportRefe_date
    delete searchTableQeuryTracking._reportRefb_date
    delete searchTableQeuryTracking._reportStationType
    delete searchTableQeuryTracking._reportDataType
    delete searchTableQeuryTracking._reportStationType
  }
  TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  Gettrackingdata()
}
// 筛选框查询
const FiltersSeach = (val: any, value: any) => {
  searchTableQeuryTracking[val] = value
  TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  Gettrackingdata()
}
//TransportSearch
const TransportSearch = (val: any) => {
  filterData.transportData = []
  if (val.data) {
    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) {
    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
  }
  renderTagsData()
}
//defaultDate
const defaultDate = (val: any, value: any, data: any) => {
  filterData.daterangeData = []
  if (Object.keys(val).length) {
    for (const key in val) {
      let str = `${key}:${val[key]}`
      filterData.daterangeData.push(str)
    }
  }
  if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
    if (
      sessionStorage.getItem('clickParams') === null ||
      sessionStorage.getItem('clickParams') === '{}'
    ) {
      if (Object.keys(value).length == 0) {
        delete searchTableQeuryTracking.etd_start
        delete searchTableQeuryTracking.etd_end
      }
      for (const key in value) {
        searchTableQeuryTracking.etd_start = value[key].data[0]
        searchTableQeuryTracking.etd_end = value[key].data[1]
      }
    }
  } else {
    searchTableQeuryTracking = data
  }
  TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
  Gettrackingdata()
  renderTagsData()
}
//DateRangeSearch
const DateRangeSearch = (val: any, value: any) => {
  filterData.daterangeData = []
  if (Object.keys(val).length) {
    for (const key in val) {
      let str = `${key}:${val[key]}`
      filterData.daterangeData.push(str)
    }
  }
  if (Object.keys(value).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
  }
  for (const key in value) {
    if (key == 'ETD') {
      searchTableQeuryTracking.etd_start = value[key].data[0]
      searchTableQeuryTracking.etd_end = value[key].data[1]
    } else if (key == 'ETA') {
      searchTableQeuryTracking.eta_start = value[key].data[0]
      searchTableQeuryTracking.eta_end = value[key].data[1]
    } else {
      searchTableQeuryTracking.created_time_start = value[key].data[0]
      searchTableQeuryTracking.created_time_end = value[key].data[1]
    }
  }
  TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
  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.final_desination
    delete searchTableQeuryTracking.place_of_receipt_exp
    delete searchTableQeuryTracking.place_of_delivery_exp
    delete searchTableQeuryTracking.port_of_discharge
    delete searchTableQeuryTracking['shipper_city/consignee_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.final_desination = value[key]
    } else if (key == 'Place of Receipt') {
      searchTableQeuryTracking.place_of_receipt_exp = value[key]
    } else if (key == 'Origin') {
      searchTableQeuryTracking['shipper_city/consignee_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]
    }
  }
  TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
  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/consignee_city'] = value[key]
      } else if (key == 'Destination') {
        searchTableQeuryTracking.final_desination = 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]
      }
    }
    if (sessionStorage.getItem('searchTableQeuryTracking') != null) {
      searchTableQeuryTracking = data
    }
  }
  renderTagsData()
}
const clearfilters = () => {
  tagsData.value = []
  filterData.transportData = []
  filterData.daterangeData = []
  filterData.morefiltersData = []
  filterData.dashboardData = []
  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 = {}
  TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  Gettrackingdata()
}
const renderTagsData = () => {
  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)
    })
  }
  if (filterData.dashboardData.length) {
    filterData.dashboardData.forEach((item) => {
      tagsData.value.push(item)
    })
  }
}
// 清除 Transport Tags
const clearTransportTags = () => {
  filterData.transportData = []
}
// 清除 Daterange Tags
const clearDaterangeTags = () => {
  filterData.daterangeData = []
}
// 清除 MoreFilters Tags
const clearMoreFiltersTags = () => {
  filterData.morefiltersData = []
}

// 从 store 中获取数据并绑定到输入框
const headerSearchdData = computed(() => headerSearch.searchValue)
// 监听 sharedData 的变化并更新 inputValue
headerSearchdData.value && (TrackingSearch.value = headerSearchdData.value)
headerSearch.clearSearchData()
// 当 sharedData 发生变化时，更新 inputValue
watch(
  () => headerSearchdData.value,
  (newData) => {
    if (newData) {
      // 更新表格数据
      TrackingTable_ref.value.getSharedTableData()
      // 更新筛选条件
      TrackingSearch.value = headerSearchdData.value
      headerSearch.clearSearchData()
    }
  }
)

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 Gettrackingdata = () => {
  const trackingData = JSON.parse(localStorage.getItem('TrackingData'))
  if (trackingData) {
    TransportListItem.value = trackingData.TransportList
    TagsList.value = trackingData.tagsList
    TrackingSearch.value = trackingData.searchData
  } else {
    $api
      .getTrackingTableData({
        cp: TrackingTable_ref.value.pageInfo.pageNo,
        ps: TrackingTable_ref.value.pageInfo.pageSize,
        rc: -1,
        other_filed: '',
        ...searchTableQeuryTracking
      })
      .then((res: any) => {
        if (res.code === 200) {
          TransportListItem.value = res.data.TransportList
          TagsList.value = res.data.tagsList
        }
      })
  }
}
onMounted(() => {
  if (
    sessionStorage.getItem('clickParams') != null &&
    sessionStorage.getItem('clickParams') != '{}'
  ) {
    if (sessionStorage.getItem('searchTableQeuryTracking') != null) {
      sessionStorage.removeItem('searchTableQeuryTracking')
    }
    const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
    const reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
    for (const key in reportlist) {
      searchTableQeuryTracking[key] = reportlist[key]
    }
    if (reportlist._city_name == '') {
      let str = `${data.title}:${data.name}`
      filterData.dashboardData.push(str)
    } else {
      if (reportlist._reportStationType == 'shippr_uncode' && data.title.includes('Origin')) {
        let str = `Origin: ${data.data}`
        filterData.morefiltersData.push(str)
      } else if (
        reportlist._reportStationType == 'consignee_uncode' &&
        data.title.includes('Destination')
      ) {
        let str = `Destination: ${data.data}`
        filterData.morefiltersData.push(str)
      } else {
        let str = `${data.title}:${data.name}`
        filterData.dashboardData.push(str)
      }
    }
    sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  } else {
    if (sessionStorage.getItem('searchTableQeuryTracking') != null) {
      const testTracking =
        JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
      if (testTracking._reportRef) {
        const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
        const reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
        for (const key in reportlist) {
          searchTableQeuryTracking[key] = [key]
        }
        if (reportlist._city_name == '') {
          let str = `${data.title}:${data.name}`
          filterData.dashboardData.push(str)
        } else {
          if (reportlist._reportStationType == 'shippr_uncode' && data.title.includes('Origin')) {
            let str = `Origin: ${data.data}`
            filterData.morefiltersData.push(str)
          } else if (
            reportlist._reportStationType == 'consignee_uncode' &&
            data.title.includes('Destination')
          ) {
            let str = `Destination: ${data.data}`
            filterData.morefiltersData.push(str)
          } else {
            let str = `${data.title}:${data.name}`
            filterData.dashboardData.push(str)
          }
        }
      }
    }
  }
  renderTagsData()
})
const changeTag = (val: any) => {
  searchTableQeuryTracking.filterTag = val
  TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
  filterTag.value = val
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  Gettrackingdata()
}
// 点击search按钮
const SearchInput = () => {
  searchTableQeuryTracking._textSearch = TrackingSearch.value
  TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  Gettrackingdata()
}
</script>

<template>
  <div class="Title">Tracking</div>
  <div class="display" ref="filterRef">
    <FilterTags :TagsListItem="TagsList" @changeTag="changeTag"></FilterTags>
    <div class="heaer_top">
      <div class="search">
        <el-input
          placeholder="Search booking No./HBL No./PO No./Carrier Booking No."
          v-model="TrackingSearch"
        >
          <template #prefix>
            <span class="iconfont_icon">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_search_b"></use>
              </svg>
            </span>
          </template>
        </el-input>
      </div>
      <TransportMode
        :isShipment="true"
        :TransportListItem="TransportListItem"
        @TransportSearch="TransportSearch"
        @defaultTransport="defaultTransport"
        @clearTransportTags="clearTransportTags"
      ></TransportMode>
      <DateRange
        :isShipment="true"
        @DateRangeSearch="DateRangeSearch"
        @clearDaterangeTags="clearDaterangeTags"
        @defaultDate="defaultDate"
      ></DateRange>
      <MoreFilters
        :isShipment="true"
        :searchTableQeury="searchTableQeuryTracking"
        @MoreFiltersSearch="MoreFiltersSearch"
        @clearMoreFiltersTags="clearMoreFiltersTags"
        @defaultMorefilters="defaultMorefilters"
      ></MoreFilters>
      <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
        >Search</el-button
      >
    </div>
    <!-- 筛选项 -->
    <div class="filtersTag" v-if="tagsData.length">
      <el-tag
        :key="tag"
        class="tag"
        v-for="tag in tagsData"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
        color="#EFEFF0"
      >
        {{ tag }}
      </el-tag>
      <div class="text_button" @click="clearfilters">Clear Filters</div>
    </div>
  </div>
  <TrackingTable
    :height="containerHeight"
    :tagsData="tagsData"
    ref="TrackingTable_ref"
  ></TrackingTable>
</template>

<style lang="scss" scoped>
.Title {
  display: flex;
  height: 68px;
  border: 1px solid var(--color-border);
  border-width: 1px 0 1px 0;
  font-size: var(--font-size-6);
  font-weight: 700;
  padding: 0 24px;
  align-items: center;
}
.display {
  border: 1px solid var(--color-border);
  border-width: 0 0 1px 0;
  padding: 0 24px;
}
.heaer_top {
  margin-top: 6.57px;
  margin-bottom: 8px;
  display: flex;
}
.search {
  width: 400px;
  height: 32px;
}
.filtersTag {
  margin-bottom: 8.7px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tag {
  border-color: #efeff0;
  border-radius: var(--border-radius-22);
  margin: 0 8px 8px 0;
  color: var(--color-neutral-1);
  font-weight: 600;
  font-size: var(--font-size-2);
}
@media only screen and (min-width: 1280px) {
  .search {
    width: 480px;
  }
}
@media only screen and (min-width: 1440px) {
  .search {
    width: 740px;
  }
}
</style>