SMAirports/src/views/newBagDetails/index.vue

<template>
  <div class="newBagDetails">
    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="newBagDetails-info">
      <div class="newBagDetails-info-look">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="flex-wrap">
              <el-tooltip class="item" effect="dark" :content="passengerName" placement="top">
                <span class="newBagDetails-info-look-name">{{ passengerName }}</span>
              </el-tooltip>
              <el-button type="text">查看</el-button>
            </div>
          </el-col>
          <el-col :span="20">
            <scroll-pane ref="scrollPane" class="tags-view-wrapper">
              <div v-for="(item,index) in detailsArr" class="tags-view-item" @click="tagClick(item,index)" :class="activeIndex == index ? 'active' : ''" :key="index">{{ item.luggageNum }}</div>
            </scroll-pane>
          </el-col>
        </el-row>
      </div>
      <div class="newBagDetails-info-details">
        <div class="newBagDetails-info-details-msgs">
          <el-scrollbar style="height: 100%;">
            <el-row class="newBagDetails-info-details-msgs-l1" :gutter="20">
              <el-col :span="3" class="msgs-list" v-for="(item,index) in msgs1" :key="index">{{ item.columnLabel }}：
                <el-tooltip class="item" effect="dark" :content="item.value" placement="top">
                  <span>{{ item.value }}</span>
                </el-tooltip>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div class="newBagDetails-contents">
      <div class="newBagDetails-contents-tabs flex-wrap">
        <div class="newBagDetails-contents-tabs-title">行李跟踪信息</div>
        <div class="newBagDetails-contents-tabs-btns flex-wrap">
          <div v-for="(item,index) in tabMenu" @click="tabClick(item,index)" :key="index" :class="index == tabIndex ? 'is-active' : ''" class="newBagDetails-contents-tabs-btns-bt">{{ item.name }}</div>
        </div>
      </div>
      <div class="newBagDetails-contents-page">
        <component ref="dataChild" :query="query" :queryObj="queryObj" :tableDatas="tableDatas" :tagObj="tagObj" :is="componentName"></component>
      </div>
    </div>
  </div>
</template>

<script>
import ScrollPane from "@/layout/components/TagsView/ScrollPane.vue"
import baggageView from './components/baggageView.vue'
import baggageList from './components/baggageList.vue'
import baggageMessage from './components/baggageMessage.vue'
import pf from '@/layout/mixin/publicFunc'
import { getAuthData, formatOrder } from '@/utils/validate'
import { getToken } from '@/utils/auth'
export default {
  name: 'NewBagDetails',
  mixins: [pf],
  components: { ScrollPane, baggageView, baggageList, baggageMessage },
  data () {
    return {
      infoArrs: [],
      passenger_name: '',
      detailsArr: [],
      activeIndex: null,
      msgs1: [],
      tabMenu: [
        {
          key: 'baggageView',
          name: '行李流程图'
        },
        {
          key: 'baggageList',
          name: '行李流程列表信息'
        },
        {
          key: 'baggageMessage',
          name: '行李报文'
        },
      ],
      tabIndex: 0,
      componentName: 'baggageView',
      query: '',
      passengerName: '',
      PNRNO: '',
      tagObj: {},
      tableDatas: [],
      tableDatas5Id: '',
      loading: false,
      queryObj: {}
    }
  },
  created () {
    const { query } = this.$route
    const { auth_id } = this.$route.meta
    const { arrs } = getAuthData(auth_id)
    const table = arrs.filter(item => item.auth_type == 4 || item.auth_type == 5)
    if (table && table.length) {
      this.tableDatas = table
      const tableDatas5 = table.filter(item => item.auth_type == 5)
      if (tableDatas5 && tableDatas5.length) {
        const { auth_id } = tableDatas5[0]
        this.tableDatas5Id = auth_id
        this.getColumnData(auth_id)
      }
    }
    this.query = query
  },
  methods: {
    //获取表头数据
    async getColumnData (auth_id) {
      try {
        const { code, returnData } = await this.getQueryList(SERVICE_ID.sysUserAuthId, [{
          user_id: getToken('userid'),
          auth_id
        }]);
        if (code == 0) {
          if (returnData && returnData.length) {
            const nodeDatas = returnData.filter(item => item.needShow)
            this.msgs1 = formatOrder(nodeDatas)
            this.getLuggageInfo(auth_id)
          }
        } else {
          this.$message.error("获取表头数据失败");
        }
      } catch (error) {
        console.log(error)
      }
    },
    //获取行李信息
    async getLuggageInfo (auth_id) {
      try {
        this.loading = true
        const { code, returnData } = await this.getQueryListAuth(SERVICE_ID.bagTableId, this.query, 1, 20, auth_id)
        if (code == 0 && returnData && returnData.length) {
          const datasObj = [...returnData][0]
          this.passengerName = datasObj['passengerName']
          this.PNRNO = datasObj['PNRNO']
          const { luggageNum, PNRNO } = datasObj
          this.queryObj = {
            luggageNum,
            PNRNO
          }
          for (const key in datasObj) {
            this.infoArrs.map(item => {
              if (item.columnName == key) {
                item.value = datasObj[key]
              }
            })
            this.msgs1.map(item => {
              if (item.columnName == key) {
                item.value = datasObj[key]
              }
            })
          }
          this.getLuggageNums()
          this.loading = false
        } else {
          this.loading = false
        }
      } catch (error) {
        this.loading = false
        console.log(error)
      }
    },
    //获取行李号
    async getLuggageNums () {
      try {
        const { carrierFlights, carrierFlightsDate } = this.query
        const { code, returnData } = await this.getQueryList(SERVICE_ID.bagTableId, {
          PNRNO: this.PNRNO,
          passengerName: this.passengerName,
          carrierFlights,
          carrierFlightsDate
        })
        if (code == 0 && returnData && returnData.length) {
          this.detailsArr = _.uniq([...returnData])
        }
      } catch (error) {
        console.log(error)
      }
    },
    tagClick (item, index) {
      const { luggageNum, carrierFlights, carrierFlightsDate } = item
      this.tagObj = {
        luggageNum,
        carrierFlights,
        carrierFlightsDate
      }
      this.query = this.tagObj
      this.activeIndex = index
      this.getLuggageInfo(this.tableDatas5Id)
    },
    tabClick (item, index) {
      this.tabIndex = index
      this.componentName = item.key
    }
  }
}
</script>

<style lang="scss" scoped>
.newBagDetails {
  height: calc(100vh - 80px);
  padding: 12px;
  &-info {
    height: 200px;
    background: #051436;
    color: #fff;
    font-size: 14px;
    &-look {
      padding: 0 32px;
      height: 64px;
      line-height: 64px;
      background: #041741;
      &-name {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        margin-right: 7px;
        max-width: 101px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
      }
      .tags-view-wrapper {
        width: calc(100%);
        ::v-deep .el-scrollbar__wrap {
          // margin-top: 8.5px;
        }
        .tags-view-item {
          display: inline-block;
          position: relative;
          cursor: pointer;
          height: 32px;
          line-height: 32px;
          // border: 1px solid #767eba;
          // border-radius: 4px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #aaacb2;
          margin-right: 100px;
          &:last-child {
            margin-right: 0;
          }
          &.active {
            color: #fff;
            position: relative;
            &::after {
              position: absolute;
              content: "";
              width: 100%;
              left: 0;
              bottom: 0;
              height: 3px;
              background: #2d67e3;
            }
          }
        }
      }
    }
    &-details {
      position: relative;
      padding: 0 32px;
      height: 136px;
      &-tags {
        height: 32px;
        line-height: 32px;
      }
      &-msgs {
        padding: 12px 0;
        height: 135px;
        ::v-deep .el-scrollbar__wrap {
          overflow-x: hidden;
        }
        ::v-deep .el-scrollbar__bar.is-horizontal {
          height: 0 !important;
        }
        &-l1 {
          .msgs-list {
            margin-bottom: 22px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
  &-contents {
    margin-top: 8px;
    background-color: #fff;
    height: calc(100% - 208px);
    &-tabs {
      line-height: 65px;
      padding: 0 32px;
      border-bottom: 1px solid #dfe3ea;
      &-title {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #303133;
        margin-right: 92px;
      }
      &-btns {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #afb4bf;
        &-bt {
          margin-right: 55px;
          cursor: pointer;
          position: relative;
          &:last-child {
            margin-right: 0;
          }
          &.is-active {
            color: #303133;
            &::after {
              position: absolute;
              content: "";
              width: 100%;
              left: 0;
              bottom: 0;
              height: 3px;
              background: #2d67e3;
            }
          }
        }
      }
    }
    &-page {
      height: calc(100% - 66px);
    }
  }
}
</style>