Vue_New/src/xt_pages/stock/stockFlow.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container ">
      <div class="cell clearfix">
       耗材名称:{{this.$route.query.good_name}} &nbsp;
       <!-- 库存:  {{getInCount(this.$route.query.id)- getOutCount(this.$route.query.id) - getAutoCount(this.$route.query.id) + getCancelCount(this.$route.query.id)}}{{this.$route.query.packing_unit }} &nbsp; -->
       库存: {{getStockCount(this.$route.query.id)}}{{this.$route.query.packing_unit }}
       规格:{{this.$route.query.specification_name}} &nbsp;
       厂家:{{this.$route.query.manufacturer}} 
      </div>
      <div class="cell clearfix">
        <span>日期查询:</span>
        <el-date-picker
            size="small"
            v-model="start_time"
            prefix-icon="el-icon-date"
            :editable="false"
            style="width: 196px;"
            type="date"
            placeholder="选择日期时间"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="startTimeChange"
           ></el-date-picker>-
            <el-date-picker
              size="small"
              v-model="end_time"
              prefix-icon="el-icon-date"
              :editable="false"
              style="width: 196px;margin-right:10px;"
              type="date"
              placeholder="选择日期时间"
              align="right"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              @change="endTimeChange"
          ></el-date-picker>

        <span>出入库方式:</span>
         <el-select v-model="stock_type" style="width:160px;margin-right:10px;" placeholder="请选择" @change="changeDrug">
            <el-option
              v-for="(item,index) in stockType"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
        </el-select>
      </div>
      
       <el-table
        :data="tableList"
        border
        style="width: 100%">
        <el-table-column prop="date" label="序号" width="180"  align="center">
           <template  slot-scope="scope">
              {{scope.$index + 1}}
           </template>
        </el-table-column>
        <el-table-column prop="drug_type" label="出入库方式" width="180" align="center">
           <template slot-scope="scope">
             <span v-if="scope.row.consumable_type == 1">手动入库</span>
             <span v-if="scope.row.consumable_type == 2">手动出库</span>
             <span v-if="scope.row.consumable_type == 3">自动出库</span>
             <span v-if="scope.row.consumable_type == 4">手动退库</span>
           </template>
        </el-table-column>
        <el-table-column prop="drug_name" label="出/入库单据编码" align="center">
           <template slot-scope="scope">
            <span v-if="scope.row.consumable_type == 1">{{scope.row.warehousing_order}}</span>
            <span v-if="scope.row.consumable_type == 2">{{scope.row.warehouse_out_order_number}}</span>  
            <span v-if="scope.row.consumable_type == 3">{{scope.row.warehouse_out_order_number}}</span>  
            <span v-if="scope.row.consumable_type == 4">{{scope.row.cancel_order_number}}</span>  
           </template>
        </el-table-column>
        <el-table-column prop="drug_name" label="操作日期" align="center">
           <template slot-scope="scope">
             {{getTime(scope.row.ctime)}}
           </template>
        </el-table-column>
         <el-table-column prop="drug_name" label="数量"  align="center">
           <template slot-scope="scope">
             <span>{{scope.row.count}}{{packing_unit}}</span>
           </template>
        </el-table-column>
     
       <el-table-column label="是否退库" align="center">
         <template slot-scope="scope">
           <span v-if="scope.row.is_edit == 2">是</span>
           <span v-if="scope.row.is_edit ==1">否</span>   
         </template>
       </el-table-column>

       <el-table-column label="批次" align="center">
         <template slot-scope="scope">
           <span>{{scope.row.number}}</span>
         </template>
       </el-table-column>

    
        <el-table-column prop="drug_name" label="进/出货单价"  align="center">
           <template slot-scope="scope">
             <span>{{scope.row.price}}</span>
           </template>
        </el-table-column>
         <el-table-column prop="drug_name" label="有效期" align="center">
           <template slot-scope="scope" >
             <span>{{getTime(scope.row.expire_date,"{y}-{h}-{d}")}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="drug_name" label="批准文号" align="center">
           <template slot-scope="scope" >
             <span>{{scope.row.license_number}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="drug_name" label="生产商" align="center">
           <template slot-scope="scope">
             <span > {{getManufacturer(scope.row.manufacturer)}}</span>
           </template>
        </el-table-column>
       </el-table>
       
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100,500,1000]"
        :page-size="10"
        background
        align="right"
        style="margin-top:20px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { uParseTime } from '@/utils/tools'
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import {getStockDrugCount,getStockFlow} from "@/api/stock"
  export default {
    name: 'stockIn',
    created() {
      var nowDate = new Date();
      var nowYear = nowDate.getFullYear();
      var nowMonth = nowDate.getMonth() + 1;
      var nowDay = nowDate.getDate();
      this.end_time =
        nowYear +
        "-" +
        (nowMonth < 10 ? "0" + nowMonth : nowMonth) +
        "-" +
        (nowDay < 10 ? "0" + nowDay : nowDay);
      nowDate.setMonth(nowDate.getMonth() - 1);
      nowYear = nowDate.getFullYear();
      nowMonth = nowDate.getMonth() + 1;
      nowDay = nowDate.getDate();
      this.start_time =
        nowYear +
        "-" +
        (nowMonth < 10 ? "0" + nowMonth : nowMonth) +
        "-" +
        (nowDay < 10 ? "0" + nowDay : nowDay);
      // this.getlist()
      // this.getStockOutList()
      this.getStockDrugCount()
    
      this.getStockFlow()
      this.packing_unit = this.$route.query.packing_unit
    },
    components: {
      BreadCrumb
    },
    data() {
      return {
        crumbs: [
          { path: false, name: '库存管理' },
          { path: '/stock/drugs/stock/query', name: '药品库存查询' },
          { path:'/drugstock/in/drugstockflow',name:'库存流水'}
        ],
        keywords: '',
        total: 0,
        multipleSelection: [],
        signAndWeighBoxPatients: 'sign-and-weigh-box-patients',
        start_time: '',
        end_time: '',
        page: 1,
        limit: 10,
        goodType: [],
        goodInfo: [],
        tempArr: [],
        sameRowArr: [],
        WarehouseInfo: {
          loading: false,
          warehouseInfoDate: []
        },
        tableData:[],
        drug_category:0,
        stock_type:0,
        drugCategory:[
          {id:0,name:"全部"}
        ],
        drugTypeList:[],
        tableList:[],
        manufacturerList:[],
        stockType:[
          {id:0,name:"全部"},
          {id:1,name:"手动入库"},
          {id:2,name:"手动出库"},
          {id:3,name:"自动出库"},
          {id:4,name:"手动退库"},
        ],
        countList:[],
        outCountList:[],
        autoCountList:[],
        keywords:"",
        obj:{},
        packing_unit:"",
        cancelCountList:[]
      }
    },
    methods:{
     handleSizeChange(val) {
        this.limit = val
        this.getStockFlow()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getStockFlow()
      },
        
    startTimeChange: function(val) {
      this.tableList = []
      var time = this.getTimestamp(val) - this.getTimestamp(this.end_time);
      
      if (time > 0) {
        this.$message.error("开始时间不能大于结束时间");
        this.start_time = "";
      } else {
         
         this.getStockFlow()
     
      }
    },
    endTimeChange: function(val) {
      this.tableList = []
      var time = this.getTimestamp(val) - this.getTimestamp(this.start_time);
      if (time < 0) {
        this.$message.error("结束时间不能小于开始时间");
        this.end_time = "";
      } else {
        this.getStockFlow()
      }
     },
     getManufacturer(id){
       var name = ""
       for(let i=0;i<this.manufacturerList.length;i++){
         if(id == this.manufacturerList[i].id){
            name = this.manufacturerList[i].manufacturer_name
         }
       }
       return name
     },
    getTime(val) {
      if(val < 0){
          return ""
      }
      if(val == ""){
        return ""
      }else {
        return uParseTime(val, '{y}-{m}-{d}')
      }
     },
     //入库详情
    //  getlist(){
    //     var params= {
    //       limit:this.limit,
    //       page:this.page,
    //       id:this.$route.query.id,
    //       start_time:this.start_time,
    //       end_time:this.end_time,
    //       is_sys:this.stockType 
    //     } 
    //   getStockInList(params).then(response=>{
    //      if(response.data.state == 1){
    //        var list = response.data.data.list
    //        for(let i=0;i<list.length;i++){
    //          list[i].stock_way = 4
    //          this.tableList.push(list[i])
    //        }
    //        var total = response.data.data.total
    //        this.total = total
    //       //  console.log("入库数据",this.tableList)
    //        var manufacturerList = response.data.data.manufacturerList
    //        this.manufacturerList = manufacturerList
    //      }
    //   })
    //  },
    // getStockOutList(){
    //    var params= {
    //       limit:this.limit,
    //       page:this.page,
    //       id:this.$route.query.id,
    //       start_time:this.start_time,
    //       end_time:this.end_time, 
    //       is_sys:this.stock_type 
    //     } 
    //   getStockOutList(params).then(response=>{
    //     if(response.data.state == 1){
    //       var outList = response.data.data.outList
    //       console.log("outList990-0000990",outList)
    //        for(let i=0;i<outList.length;i++){
    //          if(outList[i].is_sys == 0){
    //             outList[i].stock_way = 3
    //          }
    //          if(outList[i].is_sys == 1){
    //             outList[i].stock_way = 2
    //          }
    //          this.tableList.push(outList[i])
    //        }
    //       console.log("hhhhhhhhhh",this.tableList)
    //       var total = response.data.data.total
    //       this.total = total
    //     }  
    //   })
    // },
    getStockDrugCount(){
        var params ={
          keywords: this.keywords,
          start_time:this.start_time,
          end_time:this.end_time,
        }
      getStockDrugCount(params).then(response=>{
         if(response.data.state == 1){
           var count = response.data.data.count
          //  console.log("详情入库统计",count)
           this.countList = count
           var outlist = response.data.data.outList
          //  console.log("详情出库数量",outlist)
          
           this.outCountList = outlist
           var autoCount = response.data.data.autoCount
          //  console.log("详情自动出库",autoCount)
           this.autoCountList = autoCount
           var totalCount = response.data.data.totalCount
          //  console.log("totalcount",totalCount)
           this.cancelCountList = totalCount
         }
      })
    },
    getInCount(id){
      var count= ""
      for(let i=0;i<this.countList.length;i++){
          if(id == this.countList[i].good_id){
              count = this.countList[i].count
          }
        }
        return count
        },
      getOutCount(id){
        console.log("id222",id)
        var count = ""
        for(let i=0;i<this.outCountList.length;i++){
          if(id == this.outCountList[i].good_id){
            count = this.outCountList[i].count
          }
        }
        return count
      },
      getAutoCount(id){
        var count= ""
        for(let i=0;i<this.autoCountList.length;i++){
          if(id == this.autoCountList[i].good_id){
            count = this.autoCountList[i].count
          }
        }
        return count
      },
      getCancelCount(id){
        var count = 0
        for(let i=0;i<this.cancelCountList.length;i++){
          if(id == this.cancelCountList[i].good_id){
              count = this.cancelCountList[i].count
          }
        }
        return count
      },
     getTimestamp(time) {
      // 把时间日期转成时间戳
      return new Date(time).getTime() / 1000;
     },
     changeDrug(val){
       this.tableList= []
       this.stock_type = val
       this.getStockFlow()
     },
     getStockCount(id){
      var stock_count = 0
      for(let i=0;i<this.countList.length;i++){
        if(id == this.countList[i].good_id){
          stock_count = this.countList[i].stock_count
        }
      }
      return stock_count
     },

     getStockFlow(){
        var params= {
          limit:this.limit,
          page:this.page,
          good_id:this.$route.query.id,
          start_time:this.start_time,
          end_time:this.end_time,
          is_sys:this.stock_type 
        } 
        
       getStockFlow(params).then(response=>{
          if(response.data.state == 1){
            var list =  response.data.data.list
            console.log("list2323",list)
            var total = response.data.data.total
            console.log("total",total)
            this.tableList = list
            this.total = total
           var manufacturerList = response.data.data.manufacturerList
           this.manufacturerList = manufacturerList
          }
       })
     }
    }
  }
</script>
<style rel="stylesheet/css" lang="scss" scoped>
  .information {
    border: 1px #dcdfe6 solid;
    padding: 30px 20px 30px 20px;

  .border {
    border-bottom: 1px #dcdfe6 solid;
    margin: 0px 0 20px 0;
  }

  }

  .title {
    background: #409eff;
    height: 44px;
    line-height: 44px;
    padding: 0 0 0 10px;
    color: #fff;
    margin: 0 0 10px 0;
  }

  .edit_separater {
    border-top: 1px solid rgb(233, 233, 233);
    margin-top: 15px;
    margin-bottom: 15px;
  }
</style>

<style>
  .sign-and-weigh-box .sign-and-weigh-box-patients .cell {
    font-size: 12px;
  }

  .sign-and-weigh-box .sign-and-weigh-box-patients .current-row > td {
    background: #6fb5fa;
  }

  .count {
    color: #bd2c00;
  }

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #d0d3da;
  }

  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #d0d3da;
  }
</style>