elizebeth/src/xt_pages/stock/stockDamaged.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
        <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom:10px;">
            <div>
                <el-input
                size="small"
                style="width: 200px;"
                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
                >
                <el-date-picker
                size="small"
                v-model="start_time"
                type="date"
                style="margin-left:5px;width:140px;"
                placeholder="选择日期">
                </el-date-picker>
                <el-date-picker
                size="small"
                v-model="end_time"
                type="date"
                style="margin-left:5px;width:140px;"
                placeholder="选择日期">
                </el-date-picker>
            </div>
            <div>
                <el-button size="small" type="primary" @click="dialogVisible = true">新增</el-button>
                <el-button size="small" type="primary">核对</el-button>
                <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)' }">
            <el-table-column
            prop="date"
            label="报损编码">
            </el-table-column>
            <el-table-column
            prop="date"
            label="报损日期">
            </el-table-column>
            <el-table-column
            prop="name"
            label="操作人">
            </el-table-column>
            <el-table-column
            prop="name"
            label="审核日期">
            </el-table-column>
            <el-table-column
            prop="name"
            label="核对人">
            </el-table-column>
            <el-table-column
            prop="name"
            label="状态">
            </el-table-column>
            <el-table-column
            label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="5"
            background
            style="margin-top:20px;text-align: right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
    <el-dialog
        title="耗材报损"
        :visible.sync="dialogVisible"
        width="1200px"
        >
        <el-form :model="form" class="modifyDialog" label-width="120px">
            <el-form-item label="耗材ID">
                <el-input v-model="form.good_id"></el-input>
            </el-form-item>
            <el-form-item label="耗材名称">
                  <el-autocomplete
                    class="checkSearch"
                    popper-class="my-autocomplete"
                    v-model="form.good_name"
                    :fetch-suggestions="querySearchAsync"
                    :trigger-on-focus="true"
                    placeholder="请输入耗材名称"
                    @select="handleSelect"
                    @input="changeGoodName(scope.$index)"
                    style="width:160px;"
                  >
                    <i class="el-icon-search el-input__icon" slot="suffix"></i>
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.good_name +"  " +item.specification_name + "  "+item.manufacturer }}</div>
                  </template>
                 </el-autocomplete>
            </el-form-item>
            <el-form-item label="规格">
                <el-input v-model="form.specification_name"></el-input>
            </el-form-item>
            <el-form-item label="单位">
                <el-input v-model="form.warehousing_unit"></el-input>
            </el-form-item>
            <el-form-item label="进货价">
                <el-input v-model="form.buy_price"></el-input>
            </el-form-item>
            <el-form-item label="零售价">
                <el-input v-model="form.packing_price"></el-input>
            </el-form-item>
            <el-form-item label="新零售价">
                <el-input v-model="form.new_price"></el-input>
            </el-form-item>
            <el-form-item label="报损数量">
                <el-input v-model="form.count"></el-input>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="form.total"></el-input>
            </el-form-item>
            <el-form-item label="产地">
                <el-input v-model="form.good_origin_place"></el-input>
            </el-form-item>
            <el-form-item label="批准文号">
                <el-input v-model="form.license_number"></el-input>
            </el-form-item>
            <el-form-item label="生产厂商">
                <el-input v-model="form.manufacturer"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <div style="display:flex;">
                    <el-input v-model="form.remark"></el-input>
                    <el-button style="margin-left:5px;" type="primary" @click="addStock">添加</el-button>
                </div>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)' }">
            <el-table-column prop="date" label="耗材ID" width="100">
               <template  slot-scope="scope">
                 {{scope.row.good_id}}
               </template>
            </el-table-column>
            <el-table-column prop="date" label="耗材名称" width="100">
               <template  slot-scope="scope">
                {{scope.row.good_name}}
               </template>
            </el-table-column>
            <el-table-column  prop="name" label="规格" width="100">
              <template  slot-scope="scope">
                {{scope.row.specification_name}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="单位" width="100">
              <template  slot-scope="scope">
                {{scope.row.warehousing_unit}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="报损数量" width="100">
              <template  slot-scope="scope">
                {{scope.row.count}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="原进货价" width="100">
               <template  slot-scope="scope">
                {{scope.row.buy_price}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="原零售价" width="100">
               <template  slot-scope="scope">
                {{scope.row.packing_price}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="新零售价" width="100">
               <template  slot-scope="scope">
                {{scope.row.new_price}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="生产厂商" width="100">
              <template  slot-scope="scope">
                {{scope.row.manufacturer}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="产地" width="100">
               <template  slot-scope="scope">
                {{scope.row.good_origin_place}}
               </template>
            </el-table-column>
            <el-table-column prop="name" label="批准文号" width="100">
              <template  slot-scope="scope">
                {{scope.row.license_number}}
               </template>
            </el-table-column>
            <el-table-column  prop="name" label="备注" width="100">
              <template  slot-scope="scope">
                {{scope.row.remark}}
               </template>
            </el-table-column>
            <el-table-column fixed="right" width="100" label="操作">
                <template  slot-scope="scope">
                    <el-button type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveReportStock">确 定</el-button>
        </span>
    </el-dialog>
  
  </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";
import { uParseTime } from '@/utils/tools'
import { postSearchGoodWarehouseList,saveReportStock} from "@/api/stock"
export default {
    name: "stockModifyPrice",
    components:{
        BreadCrumb
    },
    data() {
        return{
            crumbs: [
                { path: false, name: "库存管理" },
                { path: false, name: "耗材管理" },
                { path: false, name: "耗材报损" }
            ],
            searchKey:'',
            value1:'',
            value2:'',
            tableData: [],
            dialogVisible:false,
            form: {
                id:"",
                good_name: '',
                packing_price:'',
                new_price:"",
                count:"",
                remark:"",
                warehousing_order:"",
                manufacturer:"",
                dealer:"",
                license_number:"",
                warehousing_unit:"",
                specification_name:"",
                buy_price:"",
                good_id:"",
                packing_unit:"",
                good_origin_place:"",
                report_count:"",
                total:"",
            },
            total: 0,
            currentIndex: 0,
            manufacturerList:[],
            dealerList:[],
            goodList:[],
            start_time:"",
            end_time:"",
        }
    },
    methods:{
        search(){

        },
        print(){
            this.$router.push({path:'/stock/stockModifyPricePrint'})
            
        },
        handleSizeChange(){},
        handleCurrentChange(){},
         changeGoodName(val){
         this.currentIndex = val
        },
      querySearchAsync(keyword, cb) {
        let key = '';
        if (keyword != undefined) {
            key = keyword
        }
        postSearchGoodWarehouseList(key).then(response => {
        if (response.data.state == 1) {
        
            var list = response.data.data.list
            console.log("列表数据",list)
            this.goodList = list
            var manufacturerList = response.data.data.manufacturerList
            this.manufacturerList = manufacturerList
            var dealer =  response.data.data.dealerList
            this.dealerList = dealer
            for(let i=0;i<this.goodList.length;i++){
                for(let j=0;j<this.manufacturerList.length;j++){
                if(this.goodList[i].manufacturer == this.manufacturerList[j].id){
                    this.goodList[i].manufacturer = this.manufacturerList[j].manufacturer_name
                }
                }
            }

            for(let i=0;i<this.goodList.length;i++){
                for(let j=0;j<this.dealerList.length;j++){
                    if(this.goodList[i].dealer == this.dealerList[j].id){
                    this.goodList[i].dealer = this.dealerList[j].dealer_name
                    }
                }
            }
        
            cb(this.goodList)
         } else {
            cb([])
          }
         })
        },
        handleSelect(val){
          console.log("val23232323",val)
          this.form.id = val.id
          this.form.good_id = val.good_id,
          this.form.good_name = val.good_name
          this.form.packing_price = val.packing_price
          this.form.warehousing_order = val.warehousing_order
          this.form.license_number = val.license_number
          this.form.dealer = val.dealer
          this.form.manufacturer = val.manufacturer
          this.form.specification_name = val.specification_name
          this.form.remark = val.remark
          this.form.buy_price = val.buy_price
          this.form.warehousing_unit = val.packing_unit  
          this.form.total = val.total
          this.form.new_price = val.new_price
      },
      addStock(){
        var obj = {
          good_id:this.form.good_id,
          good_name:this.form.good_name,
          specification_name:this.form.specification_name,
          warehousing_unit:this.form.warehousing_unit,
          count:parseInt(this.form.count),
          buy_price:this.form.buy_price.toString(),
          packing_price:this.form.packing_price.toString(),
          manufacturer:this.form.manufacturer,
          good_origin_place:this.form.good_origin_place,
          license_number:this.form.license_number,
          remark:this.form.remark,
          new_price:this.form.new_price.toString(),
          warehousing_order:this.form.warehousing_order,
          dealer:this.form.dealer,
          start_time:this.getTime(new Date()),
        } 
        this.tableData.push(obj)
      },
      saveReportStock(){
          var params = {
            tableData:this.tableData,
          }
          console.log("params",params)
        saveReportStock(params).then(response=>{
           if(response.data.state == 1){
             var msg = response.data.data.msg
             this.$message.success("保存成功")
             this.dialogVisible = false
           }
        })
      },
      getTime(val) {
         if(val < 0){
           return ""
         }
         if(val == ""){
          return ""
         }else {
          return uParseTime(val, '{y}-{m}-{d}')
         }
      },
      getlist(){
       getReportStockList().then(response=>{

       })   
      }
    },
    created(){
      this.getlist()
    },
    mounted() {
    },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.app-container {
  // margin: 20px;
  font-size: 15px;
}
.modifyDialog{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    .el-form-item{
        width: 33%;
    }
}
.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;
}
::-webkit-scrollbar{
    height: 20px !important;
}
</style>