|
|
@@ -6,14 +6,18 @@
|
|
|
<el-button size="small" type="primary">历史记录</el-button>
|
|
|
</div>
|
|
|
<div class="newContainer-top-table">
|
|
|
- <scroll-pane ref="scrollPane" class="tags-view-wrapper">
|
|
|
- <div v-for="(item,index) in detailsArr" class="tags-view-item" :key="index">{{ item.luggageNum }}</div>
|
|
|
- </scroll-pane>
|
|
|
+ <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 class="manageTitle">容器行李列表</div>
|
|
|
<div>2</div>
|
|
|
</div>
|
|
|
<div class="newContainer-bootom-table">
|
|
|
@@ -27,6 +31,7 @@
|
|
|
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],
|
|
|
@@ -46,13 +51,53 @@ export default {
|
|
|
this.query = query
|
|
|
},
|
|
|
mounted () {
|
|
|
- this.tabObj = this.query
|
|
|
- this.getTableInfo()
|
|
|
+ const { container_ID, carrierFlights, carrierFlightsDate } = this.query
|
|
|
+ this.tabObj = {
|
|
|
+ container_ID,
|
|
|
+ carrierFlights,
|
|
|
+ carrierFlightsDate
|
|
|
+ }
|
|
|
+ this.getColumnData()
|
|
|
},
|
|
|
methods: {
|
|
|
- async getTableInfo () {
|
|
|
+ // 获取表头数据
|
|
|
+ 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)
|
|
|
- console.log(returnData)
|
|
|
+ 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
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -62,45 +107,21 @@ export default {
|
|
|
.newContainer {
|
|
|
height: calc(100vh - 80px);
|
|
|
padding: 24px;
|
|
|
- .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;
|
|
|
- }
|
|
|
+ &-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% - 150px);
|
|
|
+ height: calc(100% - 180px);
|
|
|
&-table {
|
|
|
margin-top: 24px;
|
|
|
height: 100%;
|
