FE-V2-PC/src/views/hazardManagement/gasBottleManage/warehousingRecord/infoPage.vue

<template>
  <div class="infoPage">
    <div class="title-box">
      <p>入库记录详情</p>
      <p @click="backPage">返回</p>
    </div>
    <div class="text-max-max-box scrollbar-box">
      <div class="text-max-big-box">
        <p class="text-title-p">气瓶信息</p>
        <div class="text-big-box">
          <div class="text-box-one">
            <!--<div>-->
              <!--<p>气瓶编号：</p>-->
              <!--<p>{{propsData.data1}}</p>-->
            <!--</div>-->
            <div>
              <p>气体名称：</p>
              <p>{{propsData.gasName}}</p>
            </div>
            <div>
              <p>气体级别：</p>
              <p>{{forData(1,propsData.level)}}</p>
            </div>
            <div>
              <p>气体规格：</p>
              <p>{{forData(2,propsData.size)}}</p>
            </div>
          </div>
          <div class="text-box-two">
            <div>
              <p>电子标签：</p>
              <p>{{propsData.beaconTag}}</p>
            </div>
            <div>
              <p>气体组分：</p>
              <p>{{propsData.gasComposition}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="text-max-big-box">
        <p class="text-title-p">入库人信息</p>
        <div class="text-big-box">
          <div class="text-box-one">
            <div>
              <p>入库人：</p>
              <p>{{propsData.operator}}</p>
            </div>
            <div>
              <p>联系方式：</p>
              <p>{{propsData.phone}}</p>
            </div>
            <div>
              <p>学院：</p>
              <p>{{propsData.collegeName}}</p>
            </div>
            <div>
              <p>实验室地点：</p>
              <p style="width:420px;">{{propsData.subjectName}}{{propsData.roomNum?'('+propsData.roomNum+')':''}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="text-max-big-box">
        <p class="text-title-p">入库信息</p>
        <div class="text-big-box">
          <div class="text-box-one">
            <div>
              <p>入库时间：</p>
              <p>{{ parseTime(propsData.createTime,'{y}-{m}-{d} {h}:{i}') }}</p>
            </div>
            <div>
              <p>检验有效期：</p>
              <p>{{propsData.validPeriod}}</p>
            </div>
            <div>
              <p>入库气压值：</p>
              <p>{{propsData.gasPressure}}Mpa</p>
            </div>
          </div>
          <div class="text-box-three">
            <div>
              <p>备注：</p>
              <p>{{propsData.remark}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'infoPage',
    props:{
      propsData:{},
    },
    data () {
      return {
        //气瓶级别
        gasBottleLevel:[],
        gasBottleSpecification:[],
      }
    },
    created(){

    },
    mounted(){
      this.getDicts("gasBottleLevel").then((response) => {
        this.$set(this,'gasBottleLevel',response.data);
      });
      this.getDicts("gasBottleSpecification").then((response) => {
        this.$set(this,'gasBottleSpecification',response.data);
      });
    },
    methods:{
      // 返回按钮
      backPage(){
        this.$parent.tableButton(2);
      },
      forData(type,id){
        let self = this;
        let num = 0;
        if(type == 1){
          for(let i=0;i<self.gasBottleLevel.length;i++){
            if(id == self.gasBottleLevel[i].dictValue){
              num++
              return self.gasBottleLevel[i].dictLabel
            }
          }
        }else if (type){
          for(let i=0;i<self.gasBottleSpecification.length;i++){
            if(id == self.gasBottleSpecification[i].dictValue){
              num++
              return self.gasBottleSpecification[i].dictLabel
            }
          }
        }
        if(num == 0){
          return '其他'
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .infoPage{
    flex:1;
    display: flex;
    flex-direction: column;
    font-weight: 500;
    overflow: hidden;
    .title-box{
      display: flex;
      border-bottom:1px solid #dedede;
      p:nth-child(1){
        flex:1;
        color:#0045AF;
        font-size:18px;
        padding-left:20px;
        line-height: 80px;
      }
      p:nth-child(2){
        width:80px;
        height:30px;
        line-height:28px;
        border:1px solid #0045AF;
        color:#0045AF;
        border-radius:6px;
        font-size:16px;
        margin:25px 20px;
        text-align: center;
        cursor: pointer;
      }
    }
    .text-max-max-box{
      padding-bottom:20px;
      .text-max-big-box{
        margin:0 20px;
        .text-title-p{
          line-height:80px;
          font-size:16px;
        }
        .text-big-box{
          border:1px solid #dedede;
          height:130px;
          padding:15px;
          .text-box-one{
            display: flex;
            div{
              display: flex;
              p{
                line-height:50px;
              }
              p:nth-child(1){
                width:120px;
                text-align: right;
                color:#999999;
              }
              p:nth-child(2){
                width:200px;
              }
            }
          }
          .text-box-two{
            display: flex;
            div{
              display: flex;
              p{
                line-height:50px;
              }
              p:nth-child(1){
                width:120px;
                text-align: right;
                color:#999999;
              }
              p:nth-child(2){
                width:520px;
              }
            }
          }
          .text-box-three{
            display: flex;
            div{
              display: flex;
              p{
                line-height:50px;
              }
              p:nth-child(1){
                width:120px;
                text-align: right;
                color:#999999;
              }
              p:nth-child(2){
                width:1300px;
              }
            }
          }
        }
      }
    }
  }
</style>