FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/chemicalInventory/infoPage.vue

<template>
  <div class="chemicalInventory-info-page">
    <div class="title-box">
      <p>盘点详情</p>
      <p class="reset-button-one" @click="outButton">返回</p>
    </div>
    <div class="info-text-box">
      <div class="info-text-min-box">
        <div>
          <p>标题：</p>
          <p>{{infoData.takeTitle}}</p>
        </div>
        <div>
          <p>盘点人：</p>
          <p>{{infoData.createBy}}</p>
        </div>
        <div>
          <p>盘点时间：</p>
          <p>{{infoData.createTimeStr}}</p>
        </div>
      </div>
      <div class="info-text-min-box">
        <div>
          <p>所属部门：</p>
          <p>{{infoData.takeDpetName}}</p>
        </div>
        <div>
          <p>楼栋：</p>
          <p>{{infoData.takeBuildName}}</p>
        </div>
        <div>
          <p>实验室：</p>
          <p>{{infoData.subName}}</p>
        </div>
      </div>
      <div class="info-text-min-box">
        <div>
          <p>盘点类型：</p>
          <p>{{infoData.takeType==1?'按照实验室盘点':'按照化学品柜盘点'}}</p>
        </div>
      </div>
    </div>
    <div class="table-data-list-box">
      <el-table border :data="tableData" ref="multipleTable">
        <el-table-column label="序号"  width="50" align="center"  type="index"/>
        <el-table-column label="化学品" prop="chemicalName" show-overflow-tooltip/>
        <el-table-column label="CAS号" prop="casNum" width="130" show-overflow-tooltip/>
        <el-table-column label="学院" prop="chemicalDpetName" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :class="scope.row.dpetFlag == 0?'abnormalColor':''">{{scope.row.chemicalDpetName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="楼栋" prop="chemicalBuildName" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :class="scope.row.buildFlag == 0?'abnormalColor':''">{{scope.row.chemicalBuildName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实验室" prop="chemicalSubName" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :class="scope.row.subFlag == 0?'abnormalColor':''">{{scope.row.chemicalSubName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="盘点结果" prop="takeResult" width="230"
                         show-overflow-tooltip v-if="infoData.takeType == 1"/>
        <el-table-column label="化学品柜" prop="chemicalCabinetName" width="140"
                         show-overflow-tooltip v-if="infoData.takeType == 2">
          <template slot-scope="scope">
            <span :class="scope.row.cabinetFlag == 0?'abnormalColor':''">{{scope.row.chemicalCabinetName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="盘点结果" prop="takeResult" width="160" s
                         how-overflow-tooltip v-if="infoData.takeType == 2"/>
        <el-table-column label="备注" prop="remark" width="120" show-overflow-tooltip/>
        <el-table-column label="结果" prop="chemicalType" width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :class="scope.row.chemicalType == 0?'abnormalColor':''">{{scope.row.chemicalType == 1?'正常':'异常'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]" v-show="total>0" :total="total"
                  layout="total, prev, pager, next, sizes, jumper"
                  :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>
  </div>
</template>

<script>
  import { hxpTakeStockInfo,hxpTakeStockDetailList } from '@/api/chemicalInventory/index'
  export default {
    name: 'infoPage',
    props:{
      infoDataProps:{},
    },
    data(){
      return{
        infoData:{},
        tableData:[],
        total:10,
        pageNum:1,
        pageSize:20,
        queryParams:{
          pageNum:1,
          pageSize:20,
          takeStockId:'',
        },
      }
    },
    created(){

    },
    mounted(){
      this.initialization();
    },
    methods:{
      // 初始化
      initialization(){
        hxpTakeStockInfo(this.infoDataProps.id).then( response => {
          this.$set(this,'infoData',response.data);
        });
        this.getList();
      },
      outButton(){
        this.$parent.controlsButton(1)
      },
      getList(){
        this.queryParams.takeStockId=this.infoDataProps.id
        hxpTakeStockDetailList(this.queryParams).then( response => {
          this.$set(this,'tableData',response.rows);
          this.total = response.total;
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .chemicalInventory-info-page{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    .title-box{
      display: flex;
      p:nth-child(1){
        flex:1;
        line-height:80px;
        padding-left:20px;
        color:#0045AF;
        font-size:16px;
      }
      p:nth-child(2){
        margin:20px;
        width:90px;
      }
      border-bottom:1px solid #E0E0E0;
    }
    .info-text-box{
      padding:36px 80px 0;
      .info-text-min-box{
        display: flex;
        div{
          flex:1;
          font-size:16px;
          display: flex;
          margin-bottom:36px;
          p{
            line-height:20px;
          }
          p:nth-child(1){
            width:80px;
            text-align: right;
            margin-right:10px;
          }
          p:nth-child(2){
            flex:1;
          }
        }
      }
    }
    .table-data-list-box{
      flex:1;
      display: flex!important;
      flex-direction: column;
      overflow: hidden;
      margin:0 80px;
      .abnormalColor{
        color:#FF7300
      }
    }
  }
</style>