SMAirports/src/views/newContainer/index.vue

<template>
  <div class="newContainer">
    <div class="newContainer-top">
      <div class="newContainer-top-title flex">
        <div class="manageTitle">容器基本信息</div>
        <el-button @click="toHistory" size="small" type="primary">历史记录</el-button>
      </div>
      <div class="newContainer-top-table">
        <el-row class="msgs-ds" :gutter="20">
          <el-col :span="3" class="msgs-list" v-for="(item,index) in detailsArr" :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>
      </div>
    </div>
    <div class="newContainer-bootom">
      <div class="newContainer-bootom-title flex">
        <div class="manageTitle">容器行李列表</div>
      </div>
      <div class="newContainer-bootom-table">
        <Table :istableCol="true" :istableDown="true" :tableTag="tabObj" />
      </div>
    </div>
  </div>
</template>

<script>
import pf from '@/layout/mixin/publicFunc'
import Table from '@/views/newQuery/components/table.vue'
import ScrollPane from "@/layout/components/TagsView/ScrollPane.vue"
import { getToken } from '@/utils/auth'
export default {
  name: 'NewContainer',
  mixins: [pf],
  components: {
    ScrollPane,
    Table
  },
  data () {
    return {
      detailsArr: [],
      query: '',
      tabObj: {}
    }
  },
  created () {
    const { query } = this.$route
    this.query = query
  },
  mounted () {
    this.tabObj = this.query
    this.getColumnData()
  },
  methods: {
    // 获取表头数据
    async getColumnData () {
      try {
        const { code, returnData } = await this.getQueryList(
          SERVICE_ID.sysUserAuthId,
          [
            {
              user_id: getToken('userid'),
              auth_id: this.TauthId,
            },
          ]
        )
        if (code == 0) {
          if (returnData && returnData.length) {
            const msgDatas = returnData.filter(item => item.needShow)
            this.getTableInfo(msgDatas)
          }
        } else {
          this.$message.error('获取表头数据失败')
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getTableInfo (arrs) {
      const { code, returnData } = await this.getQueryListAuth(this.TqueryId, this.query, 1, 999, this.TauthId)
      if (code == 0 && returnData && returnData.length) {
        const datas = _.cloneDeep(arrs)
        const datasObj = returnData[0]
        for (const key in datasObj) {
          datas.map(item => {
            if (item.columnName == key) {
              item.value = datasObj[key]
            }
          })
        }
        this.detailsArr = datas
      }
    },
    toHistory () {
      const { container_ID } = this.query
      if (container_ID) {
        this.$router.push({ path: '/newContainerHistory', query: { container_ID } })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.newContainer {
  height: calc(100vh - 80px);
  padding: 24px;
  &-top {
    &-table {
      margin-top: 24px;
      background: #041741;
      line-height: 50px;
      color: #fff;
      padding-left: 35px;
      .msgs-list {
        text-align: center;
      }
    }
  }
  &-bootom {
    margin-top: 24px;
    height: calc(100% - 180px);
    &-table {
      margin-top: 24px;
      height: 100%;
    }
  }
}
</style>