Vue_New/src/xt_pages/stock/inventoryDetails.vue

<template>
    <div>
        <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom:10px;">
            <div>
                <!-- 耗材类别：
                <el-select v-model="value" size="small" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select> -->
                <!-- 停用状态：
                <el-select v-model="value" size="small" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </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>
                <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="耗材名称"  width="100" align="center">
                <template slot-scope="scope">
                  {{scope.row.good_name}}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="date" label="类别" width="100">
            </el-table-column> -->
            <el-table-column prop="name" label="规格" width="100" 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.total}}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="进价" width="100" align="center">
              <template slot-scope="scope">
                {{scope.row.buy_price}}
             </template>
            </el-table-column>
            <el-table-column prop="name" label="零售价" width="100" align="center">
                <template slot-scope="scope">
                 {{scope.row.packing_price}}
                </template>
            </el-table-column>
            <el-table-column prop="name"  label="零售总价"  width="100" align="center">
                <template slot-scope="scope">
                  {{scope.row.total * scope.row.packing_price}}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="name" label="产地"  width="100">
              {{scope.row.now_g}}
            </el-table-column> -->
            <el-table-column  prop="name" label="生产厂商" width="100" align="center">
              <template slot-scope="scope">
                {{scope.row.manufacturer}}
             </template>
            </el-table-column>
            <el-table-column prop="name" label="实盘点"  width="100" align="center">
                <template slot-scope="scope">
                    {{scope.row.count}}
                </template>
            </el-table-column>
            <el-table-column  prop="name" label="亏损价格" width="100" align="center">
            </el-table-column>
            <el-table-column prop="name" label="生产日期" width="100" align="center">
            </el-table-column>
            <el-table-column  prop="name" label="有效日期" width="100" align="center">
            </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 { 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:"",
         }
    },
    methods:{
        search(){

        },
        print(){
           if(this.ids == ""){
             this.$message.error("请勾选打印数据")
             return false
           }
          this.$router.push({path:'/stock/inventoryDetailPrint?ids='+this.ids})
        },
        handleSizeChange(){},
        handleCurrentChange(){},
        getlist(){
         var params = {
            keyword:this.searchKey,
            limit:this.limit,
            page:this.page,
          }
          getInventoryDetailList(params).then(response=>{
             if(response.data.state == 1){
               var list =  response.data.data.list
               this.tableData = list
               this.total = response.data.data.total
             }
          })
        },
      changePrice(val){  
        console.log("val2323323322323",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]));
      },
    },
    created(){
      this.getlist()
    },
    mounted() {
    },
};
</script>