SMAirports/src/views/newBagDetails/components/baggageMessage.vue

<template>
  <div class="baggageMessage">
    <template v-if="messageList.length">
      <el-row :gutter="24" type="flex">
        <el-col v-for="(message, index) in messageList" :key="index" :span="6">
          <div class="card">
            <div class="message-date">{{ message.flightDate }}</div>
            <div class="message-content">
              {{ message.sourceData.replaceAll(/[\r\n]{2,}/g, '\n').replaceAll('\\', '') }}
            </div>
          </div>
        </el-col>
      </el-row>
    </template>
    <template v-else>
      <el-empty :image-size="1" description="暂无数据" />
    </template>
  </div>
</template>

<script>
import pf from '@/layout/mixin/publicFunc'
export default {
  name: 'BaggageMessage',
  mixins: [pf],
  props: {
    query: {
      type: Object,
      default: () => { }
    },
    tagObj: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      messageList: [],
    }
  },
  mounted () {
    this.queryDetails()
  },
  methods: {
    async queryDetails () {
      try {
        const { code, returnData } = await this.getQueryList(SERVICE_ID.bagDetailId, this.query)
        if (code == 0 && returnData && returnData.length) {
          this.messageList = [...returnData]
        }
      } catch (error) {
        console.log(error)
        this.$message.error('失败')
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.baggageMessage {
  height: 100%;
  .card {
    width: 100%;
    min-height: 440px;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.29);
    margin-bottom: 24px;
    > .message-date {
      width: 180px;
      height: 26px;
      line-height: 14px;
      font-size: 14px;
      font-family: Helvetica;
      color: #afb4bf;
      border-bottom: 1px solid #afb4bf;
      margin-bottom: 18px;
    }
    > .message-content {
      white-space: pre-line;
      line-height: 24px;
      font-size: 14px;
      color: #303133;
      word-break: break-all;
    }
  }
}
</style>