<style>
  .InAndOutDdetails .zcInfo .el-col {
    font-size: 12px;
    margin-top: 20px;
    color: #111111;
}

</style>
<template>
  <div class="page-body InAndOutDdetails">
    <el-row
        class="HeaderDiv"
        style="border-bottom: 1px solid #e2e4eb; padding-bottom: 20px"
      >
        <el-col :span="12">
          <p
            class="c11 f14"
            style="padding-top: 12px"
          
          >
            {{GetDetail.StockOutStateStr}}
          </p>
         
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-row class="zcInfo">
           <el-col :span="12">
              <span>出库单编码:</span>
              <span>{{ GetDetail.StockOutNum }}</span>
            </el-col>
            <el-col :span="12">
              <span>领取人 :</span>
              <span>{{ GetDetail.EmName }}</span>
            </el-col>
            <el-col :span="12">
              <span>仓库名称 :</span>
              <span>{{ GetDetail.WareHouseName }}</span>
            </el-col>
            <el-col :span="12">
              <span>出库时间 :</span>
              <span>{{ GetDetail.UpdateDate }}</span>
            </el-col>
          
            <el-col :span="12">
              <span>操作人/时间 :</span>
              <span>{{ GetDetail.UpdateBy }}{{GetDetail.StockOutDate}}</span>
            </el-col>
             <el-col :span="12" v-if="GetDetail.ApplyForId>0">
              <span>申请单 :</span>
              <span style="text-decoration:underline;color:#2961FE;cursor:pointer;" @click="gourl()">{{ GetDetail.ApplyForId }}</span>
            </el-col>
            
            
          
          </el-row>
        </el-col>
      </el-row>
            <p class="f16 c11" style="margin-top: 25px">出库清单</p>
        <div class="page-content" style="margin-top:10px">
            <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat 
                class="sticky-right-column-table sticky-column-table" separator="cell" hide-bottom
                :data="GetDetail.DetailList" :columns="columns" row-key="Id">
        
                <template v-slot:body-cell-WareHouseName="props">
                    <q-td :props="props">
                        <span v-for="(x,y) in props.row.GoodsCategoryList" :key="y">{{x}} <span v-if="props.row.GoodsCategoryList.length !== y+1"> , </span></span>

                    </q-td>   

                </template>
            
            </q-table>
        
        </div>
    
  </div>
</template>

<script>
    import{
            getStockOutPageList
    } from '../../../api/finance/index'
  export default {
    props: {},
    data() {
      return {
       GetDetail:{},
       loading:false,
       msg:{
            rowsPerPage: 1000,
        },
         columns: [
          
          {
            name: 'SuppliesName',
            label: '耗材名称',
            field: 'SuppliesName',
            align: 'left',
          },
          {
            name: 'SuppliesNum',
            label: '耗材编码',
            field: 'SuppliesNum',
            align: 'left',
          },
          {
            name: 'CategoryName',
            label: '分类名称',
            field: 'CategoryName',
            align: 'left',
          },
       
          {
            name: 'WareHouseName',
            required: true,
            label: '品牌名称',
            align: 'left',
            field: row => row.WareHouseName
          },
        
          {
            name: 'InventoryNum',
            label: '库存',
            field: 'InventoryNum',
            align: 'left'
          },
           {
            name: 'Number',
            label: '出库数量',
            field: 'Number',
            align: 'left'
          },
          
          
         
          
        ],
      }
    },
    created() {},
    mounted() {
      this.getStockOutPageList();
    },
    methods: {
      getStockOutPageList(){
          let msg={
            pageIndex:1,
            pageSize:10,
            StockOutNum:'',
            SuppliesNum:'',
            SuppliesName:'',
            SupplierName:'',
            StartTime:'',
            EndTime:'',
            WarehouseId:'',
            EmployeeId:'',
            Id:0, 
            RB_Group_id:''
          }
          msg.Id = this.$route.query.id;
          msg.RB_Group_id = this.getLocalStorage().Group_Id
          getStockOutPageList(msg).then(res => {
            this.loading = false;
            this.GetDetail = res.data.data.pageData[0]
          }).catch(() => {
            this.loading = false;
          })
      },
      gourl(){
        let ID = this.GetDetail.ApplyForId;
        let tempStr = '/sale/SuppliesStockOutApplyForDetail?Id='+ID;  
         this.$router.push({
            path: tempStr
          });
      }
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
