Vue_New/src/xt_pages/stock/drugs/inventoryDetails.vue

<template>
    <div>
        <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom:10px;">
            <div>
              <el-select size="small" v-model="storehouse_id" filterable placeholder="请选择仓库" style="width:200px" @change="changehouseList">
                <el-option
                  v-for="(option, index) in houseList"
                  :key="index"
                  :label="option.storehouse_name"
                  :value="option.id">
                </el-option>
              </el-select>   
                <el-input
                size="small"
                style="width: 200px;margin-left:10px;"
                class="filter-item"
                v-model.trim="searchKey"
               placeholder="请输入药品名称"
                />
                <el-button
                size="small"
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="search"
                >搜索</el-button
                >
            </div>
            <div>
               <el-button size="small" type="primary" @click="print">盘点模版打印</el-button>
            </div>
            <!-- <div>
                <el-button size="small" type="primary" @click="print">打印</el-button>
                <el-button size="small" type="primary">导出</el-button>
            </div> -->
        </div>
        <el-table :data="tableData" border :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)' }" style="width:100%">
            <el-table-column prop="date" label="药品名称" align="center">
               <template slot-scope="scope">
                 {{scope.row.drug_name}}
               </template>
            </el-table-column>
            <el-table-column  prop="name" label="规格" width="200"  align="center">
              <template slot-scope="scope">
                 {{scope.row.specification_name}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="单位" width="100"  align="center">
                <template slot-scope="scope">
                  {{scope.row.warehousing_unit}}
               </template>
            </el-table-column>
          
            <el-table-column prop="name" label="进价" width="100"  align="center">
                <template slot-scope="scope">
                   {{scope.row.last_price}}
                </template> 
            </el-table-column>
           
            <el-table-column prop="name" label="生产厂商" width="200"  align="center">
                <template slot-scope="scope">
                  {{scope.row.manufacturer}}
                </template> 
            </el-table-column>
           
           
            <el-table-column prop="name" label="有效日期" width="200"  align="center">
                <template slot-scope="scope">
                   {{getTime(scope.row.expiry_date)}}
                </template>  
            </el-table-column>

           <el-table-column prop="name" label="仓库名称" width="200"  align="center">
                <template slot-scope="scope">
                   {{getHouseName(scope.row.storehouse_id)}}
                </template>  
            </el-table-column>
           
           <el-table-column prop="name" label="盘点前数量" width="100"  align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.stock_max_number>0">{{scope.row.stock_max_number}}{{scope.row.warehousing_unit}} </span>  
                  <span v-if="scope.row.stock_min_number>0">{{scope.row.stock_min_number}}{{scope.row.min_unit}}</span>
                  <span v-if="scope.row.stock_max_number == 0 && scope.row.stock_min_number == 0">0</span>
                </template> 
            </el-table-column>

            <el-table-column prop="name" label="盘点后数量" width="100"  align="center">
                <template slot-scope="scope">
                   <span v-if="scope.row.last_stock_max_number > 0">{{scope.row.last_stock_max_number}}{{scope.row.warehousing_unit}}</span>  
                   <span v-if="scope.row.last_stock_min_number>0">{{scope.row.last_stock_min_number}}{{scope.row.min_unit}}</span>
                   <span v-if="scope.row.last_stock_max_number == 0 && scope.row.last_stock_min_number == 0">0</span>
                </template> 
            </el-table-column>
            <el-table-column prop="name" label="盘点类型" width="120"  align="center">
               <template slot-scope="scope">
                 <span v-if="scope.row.inventory_type == 10">盘盈</span>
                 <span v-if="scope.row.inventory_type == 11">盘亏</span>
               </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            background
            style="margin-top:20px;text-align: right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
      
    </div>
</template>

<script>
import { uParseTime } from '@/utils/tools'
import { getInventoryDetailList } from "@/api/drug/drug"
export default {
    name: "inventory",
    data() {
        return{
            searchKey:'',
            value1:'',
            value2:'',
            tableData: [],
            dialogVisible:false,
            form: {
                name: '',
            },
            total: 0,
            limit:10,
            page:1,
            storehouse_id:0,
        }
    },
    methods:{
        search(){
          this.getlist()
        },
        print(){
            this.$router.push({path:'/stock/drugs/inventoryPrint'}) 
        },
        handleSizeChange(val){
         this.limit = val
         this.getlist()
        },
        handleCurrentChange(val){
          this.page = val
          this.getlist()
        },
        getlist(){
            var params = {
              limit:this.limit,
              page:this.page,
              keyword:this.searchKey,
              storehouse_id:this.storehouse_id,
            }
        
          getInventoryDetailList(params).then(response=>{
             if(response.data.state == 1){
              this.total =  response.data.data.total
              this.tableData = response.data.data.list
           
              this.doctorList = response.data.data.doctorList
              var obj = {id:0,storehouse_name:"全部"}
              this.houseList= []
              this.houseList.push(obj)
              for(let i=0;i<response.data.data.houseList.length;i++){
                this.houseList.push(response.data.data.houseList[i])
              }

             }
          })   
        },
         getTime(val) {
         
         if(val == undefined){
           return  ""
         }
         if(val < 0){
            return ""
          }
         if(val == ""){
            return ""
          }else {
            return uParseTime(val, '{y}-{m}-{d}')
         }
        },
       changehouseList(){
         this.houseList = []
         this.getlist()
       },
       getHouseName(id){
         var storehouse_name = ""
         for(let i=0;i<this.houseList.length;i++){
           if(id == this.houseList[i].id){
              storehouse_name = this.houseList[i].storehouse_name
           }
         }
         if(storehouse_name == "全部"){
           return ""
         }else{
           return storehouse_name
         }
       }
    },
    created(){
      this.getlist()
    },
    mounted() {
     
    },
};
</script>