elizebeth/src/xt_pages/stock/inventoryDetails.vue

<template>
    <div>
        <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom:10px;">
            <div>
                <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>
                <el-button size="small" type="primary" @click="exportList">导出</el-button>
            </div> -->
        </div>
        <el-table :data="tableData" border :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)' }" @selection-change="changePrice" >
            <el-table-column type="selection" width="55" align="center"> </el-table-column>
            <el-table-column prop="date" label="耗材名称" align="center">
                <template slot-scope="scope">
                  {{scope.row.good_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="200" align="center">
               <template slot-scope="scope">
                 {{getTime(scope.row.product_date)}}
               </template>
            </el-table-column>
           
            <el-table-column prop="name" label="盘点前数量" width="100" align="center">
              <template slot-scope="scope">
                 <span>{{scope.row.stock_count?scope.row.stock_count:0}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="盘点后数量" width="100" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.last_stock_count?scope.row.last_stock_count: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.count > scope.row.last_stock_count">盘盈</span>
                   <span v-if="scope.row.count < scope.row.last_stock_count">盘亏</span>
                </template>
            </el-table-column>
           
            <el-table-column prop="name" label="盘点原因" width="230" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.inventory_type ==0">默认</span>
                <span v-if="scope.row.inventory_type ==1">到期退货</span>
                <span v-if="scope.row.inventory_type ==2">异常退货</span>
                <span v-if="scope.row.inventory_type ==3">退货</span>
                <span v-if="scope.row.inventory_type ==4">人为损坏</span>
                <span v-if="scope.row.inventory_type ==5">不计入报损分析</span>
               </template>
            </el-table-column>
          
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 40, 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/stock"
export default {
    name: "inventory",
    data() {
        return{
            searchKey:'',
            value1:'',
            value2:'',
            tableData: [],
            dialogVisible:false,
            form: {
                name: '',
            },
            total: 0,
            limit:10,
            page:1,
            ids:"",
            damageList:[],
         }
    },
    methods:{
        search(){
         this.getlist()
        },
        print(){
           if(this.ids == ""){
             this.$message.error("请勾选打印数据")
             return false
           }
          this.$router.push({path:'/stock/inventoryDetailPrint?ids='+this.ids})
        },
        handleSizeChange(val){
          this.limit = val
          this.getlist()
        },
        handleCurrentChange(val){
          this.page = val
          this.getlist()
        },
        getlist(){
         var params = {
            keyword:this.searchKey,
            limit:this.limit,
            page:this.page,
          }
          this.tableData = []
          getInventoryDetailList(params).then(response=>{
             if(response.data.state == 1){
               var list =  response.data.data.list
               console.log("盘点列表23223232323",list)
             
               this.tableData = list
               this.total = response.data.data.total
             }
          })
        },
      changePrice(val){  
       
        var arr = []
        for(let i=0;i<val.length;i++){
            arr.push(val[i].id)
        }
        var str = arr.join(",")
        
        console.log("str",str)
        this.ids = str  
     },
      exportList(){
       
         import('@/vendor/Export2Excel').then(excel => {
         const tHeader = ['耗材名称', '规格', '单位','零售价','当前库存','盘点数','亏损金额']
         const filterVal = ['good_name', 'specification_name', 'warehousing_unit','packing_price','total','count','']
         const data = this.formatJson(filterVal, this.tableData)
      
         excel.export_json_to_excel({
           header: tHeader,
           data,
           filename: '耗材盘点明细'
         })
          this.downloadLoading = false
        })
       },
       formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },

      getTime(val) {
         if(val < 0){
            return ""
          }
         if(val == ""){
            return ""
          }else {
            return uParseTime(val, '{y}-{m}-{d}')
         }
       },
    },
    created(){
      this.getlist()
    },
};
</script>