Vue_New/src/xt_pages/supply/components/addPurchaseOrder.vue

<template>
<div class="main-contain">
<div class="position">
    <bread-crumb :crumbs="crumbs"></bread-crumb>
</div>
<div class="app-container ">
    <div style="justify-content: space-between;margin: 0px 0 12px 0;display: flex;align-items: center;">
    <div>
        <span style="color:red">*</span><span>供应商:</span>
        <el-select v-model="supplier_name" style="width:140px;margin-right:10px;" placeholder="请选择"
        @change="changeTypeName">
        <el-option
            v-for="item in supplyList"
            :key="item.id"
            :label="item.supplier_name"
            :value="item.id">
        </el-option>
        </el-select>
        <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>
        <span>交货日期:</span>
        <el-date-picker
            size="small"
            v-model="end_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="endTimeChange"
        ></el-date-picker>
        <span>单据编码:</span>

    </div>
    <div>
        <el-button size="small" type="primary" @click="savePurchaseOrder" v-show="showTwo">保存</el-button>
        <el-button size="small" type="primary" @click="updatePurchaseOrder" v-show="showOne">修改</el-button>
    </div>
    </div>

   <el-form :rules="tableRules" :model="recordInfo" ref="tableForm">
    <el-table
    :row-style="{ color: '#303133' }"
    :header-cell-style="{
        backgroundColor: 'rgb(245, 247, 250)',
        color: '#606266'
    }"
    :data="recordInfo.tableList"
    :class="signAndWeighBoxPatients"
    border
    style="width: 100%"
    max-height="450"
    >
    <el-table-column align="center" width="200px">
        <template slot="header" slot-scope="scope">
            <span>商品<span style="color: red">*</span></span>
        </template>
        <template slot-scope="scope">
           <el-form-item required prop="name">
            <el-select v-model="scope.row.name" style="width:160px;" filterable placeholder="请选择" @change="changeName"   @input="changeGoodName(scope.$index)">
                <el-option
                    v-for="(item,index) in tabList"
                    :key="index"
                    :label="item.supply_name"
                    :value="item">
                </el-option>
             </el-select>
           </el-form-item>
        </template>
    </el-table-column>
    <el-table-column  align="center" width="150px">
        <template slot="header" slot-scope="scope">
            <span>商品类别</span>
        </template>
        <template slot-scope="scope">
            <el-input v-model="scope.row.supply_type" style="width:120px" :disabled="true"></el-input>
        </template>
    </el-table-column>
    <el-table-column label="规格&单位" align="center" width="200px">
        <template slot-scope="scope">
            <el-input v-model="scope.row.supply_specification_name" style="width:150px" :disabled="true"></el-input>
        </template>
        </el-table-column>
    <el-table-column label="可用库存" align="center" width="130px">
        <template slot-scope="scope">
            <el-input v-model="scope.row.supply_total" style="width:100px" :disabled="true"></el-input>
        </template>
    </el-table-column>
    <el-table-column label="数量" align="center" width="120px">
        <template slot="header" slot-scope="scope">
            <span>数量<span style="color: red">*</span></span>
        </template>
        <template slot-scope="scope">
          <el-form-item :rules="tableRules.supply_count" required prop="supply_count">
          <el-input v-model="scope.row.supply_count" style="width:80px"></el-input>
          </el-form-item>
        </template>
    </el-table-column>

    <el-table-column label="购货单价" align="center" width="120px">
        <template slot-scope="scope">
        <el-input v-model="scope.row.supply_price" style="width:80px"></el-input>
        </template>
    </el-table-column>

    <el-table-column label="购货金额" align="center" width="120px">
        <template slot-scope="scope">
          {{calculate(scope.row.supply_count * scope.row.supply_price)}}
        </template>
    </el-table-column>

    <el-table-column label="生产厂商" align="center" width="200px">
        <template slot-scope="scope">
        <el-input v-model="scope.row.supply_manufacturer" style="width:160px" :disabled="true"></el-input>
        </template>
    </el-table-column>


    <el-table-column label="批准文号" align="center" width="200px">
        <template slot-scope="scope">
        <el-input v-model="scope.row.supply_license_number" style="width:160px"></el-input>
        </template>
    </el-table-column>

    <el-table-column label="备注" align="center" width="200px">
        <template slot-scope="scope">
        <el-input v-model="scope.row.supply_remake" style="width:160px"></el-input>
        </template>
    </el-table-column>

    <el-table-column label="操作" align="center" width="150px" fixed="right" >
        <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" content="新增" placement="top" >
            <el-button
                size="mini"
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="handleEdit(scope.$index, scope.row)">
            </el-button>
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)">
            </el-button>
        </el-tooltip>

        </template>
    </el-table-column>
  </el-table>
</el-form>
   <div style="margin-top:10px">
        <span>优惠率:<el-input style="width:100px" v-model="rate_of_concession"></el-input>%</span>

        <span>优惠金额:<el-input style="width:100px" v-model="discount_amount"></el-input></span>

    </div>
</div>
</div>
</template>

<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";

import {getInitOrder,savePurchaseOrder} from "@/api/supply"
export default {
name: "addPurchaseOrder",
created() {
this.org_id =  this.$store.getters.xt_user.org_id

var start_time =  window.sessionStorage.getItem('start_time')
var end_time =  window.sessionStorage.getItem('end_time')

if(start_time !=null){
    this.start_time = start_time
}
if(end_time!=null){
    this.end_time = end_time
}
window.sessionStorage.removeItem('start_time')
window.sessionStorage.removeItem('end_time')
},
components: {
BreadCrumb
},
data() {
return {
    crumbs: [
       { path: false, name: "购货订单" },
       { path: "/spply/query", name: "新增购货订单" }
    ],
    showTwo:true,
    showOne:false,
    recordInfo: {
      tableList:[],
    },
    keywords: "",
    total: 0,
    multipleSelection: [],
    signAndWeighBoxPatients: "sign-and-weigh-box-patients",
    start_time: "",
    end_time: "",
    page: 1,
    limit: 10,
    goodType: [],
    goodInfo: [],
    org_id:0,
    types:[],
    tyep_name:"",
    form:{
    manufacturer_id:"",
    },
    tabList:[],
    manufactuerList:[],
    currentIndex: 0,
    goodTypeList:[],
    drugTypeList:[],
    supplier_name:"",
    supplyList:[],
    rate_of_concession:"",
    discount_amount:"",
    start_time:new Date(),
    end_time:new Date(),
    tableRules: {
     name: [{ required: true, message: '商品不能为空', trigger: 'blur' }],
     supply_count: [{ required: true, message: '数量不能为空', trigger: 'blur' }],
 },
};
},
methods:{

getInitOrder(){
    getInitOrder().then(response=>{
    if(response.data.state == 1){
        var drugList = response.data.data.drugList
        this.manufactuerList = response.data.data.manufactuerList
        this.goodTypeList = response.data.data.goodTypeList
        this.drugTypeList = response.data.data.drugTypeList
        this.supplyList = response.data.data.supplyList
       for(let i=0;i<drugList.length;i++){
          for(let z=0;z<drugList[i].drug_warehouse_info.length;z++){
            drugList[i].drug_warehouse_info[z].stock_max_number = drugList[i].drug_warehouse_info[z].stock_max_number * drugList[i].min_number
          }
        for(let j=0;j<this.manufactuerList.length;j++){
            if(drugList[i].manufacturer == this.manufactuerList[j].id){
                drugList[i].manufacturer = this.manufactuerList[j].manufacturer_name
            }
        }
        for(let y=0;y<this.drugTypeList.length;y++){
            if(drugList[i].drug_type == this.drugTypeList[y].value){
            drugList[i].drug_type = this.drugTypeList[y].name
            }
        }
        drugList[i].supply_name =  drugList[i].drug_name + " " + drugList[i].dose +drugList[i].dose_unit+"*"+drugList[i].min_number+ drugList[i].min_unit+"/"+drugList[i].max_unit + " " + drugList[i].manufacturer
        drugList[i].supply_type = drugList[i].drug_type
        drugList[i].supply_specification_name = drugList[i].dose +drugList[i].dose_unit+"*"+drugList[i].min_number+ drugList[i].min_unit+"/"+drugList[i].max_unit
        drugList[i].supply_total = this.getWarehoseInfo(drugList[i].drug_warehouse_info,drugList[i].max_unit,drugList[i].min_unit,drugList[i].min_number)
        drugList[i].supply_count = ""
        drugList[i].supply_total_price = ""
        drugList[i].supply_manufacturer=  drugList[i].manufacturer
        drugList[i].supply_license_number= drugList[i].number
        drugList[i].supply_remake = ""
        drugList[i].type = 1
        drugList[i].supply_price = ""
        drugList[i].name = drugList[i].drug_name

        this.tabList.push(drugList[i])
        }

        var goodList =  response.data.data.goodList
        for(let i=0;i<goodList.length;i++){
        for(let j=0;j<this.manufactuerList.length;j++){
            if(goodList[i].manufacturer == this.manufactuerList[j].id){
                goodList[i].manufacturer = this.manufactuerList[j].manufacturer_name
            }
        }
        for(let y=0;y<this.goodTypeList.length;y++){
            if(goodList[i].good_type_id == this.goodTypeList[y].id){
                goodList[i].good_type_id = this.goodTypeList[y].type_name
            }
        }
        goodList[i].supply_name = goodList[i].good_name + " " + goodList[i].specification_name + " " +goodList[i].manufacturer
        goodList[i].supply_type = goodList[i].good_type_id
        goodList[i].supply_specification_name =goodList[i].specification_name
        goodList[i].supply_price = ""
        goodList[i].supply_total = this.getTotalStockCount(goodList[i].good_warehouse_info)
        goodList[i].supply_count = ""
        goodList[i].supply_total_price = ""
        goodList[i].supply_manufacturer = goodList[i].manufacturer
        goodList[i].supply_license_number = ""
        goodList[i].supply_remake = ""
        goodList[i].type = 2
        goodList[i].name = goodList[i].good_name

        this.tabList.push(goodList[i])
        }
    }
    })
},
changeGoodName(val){
  this.currentIndex = val
},
changeName(val){

   for(let i=0;i<this.recordInfo.tableList.length;i++){
    if(this.currentIndex == i){
        this.recordInfo.tableList[i].id = val.id
        this.recordInfo.tableList[i].type = val.type
        this.recordInfo.tableList[i].name = val.name
        this.recordInfo.tableList[i].supply_name = val.supply_name
        this.recordInfo.tableList[i].supply_type = val.supply_type
        this.recordInfo.tableList[i].supply_specification_name = val.supply_specification_name
        this.recordInfo.tableList[i].supply_total = val.supply_total
        if(val.supply_count == NaN){
           this.recordInfo.tableList[i].supply_count = ""
        }else{
          this.recordInfo.tableList[i].supply_count = val.supply_count?val.supply_count:""
        }

        this.recordInfo.tableList[i].supply_price = val.supply_price?val.supply_price:""
        this.recordInfo.tableList[i].supply_total_price = val.supply_total_price?val.supply_total_price:""
        this.recordInfo.tableList[i].supply_manufacturer = val.supply_manufacturer
        this.recordInfo.tableList[i].supply_license_number = val.supply_license_number
        this.recordInfo.tableList[i].supply_remake = val.supply_remake
     }
    }

},
handleEdit(){
    const tempObj = {}
    tempObj["id"] = ""
    tempObj["name"] = ""
    tempObj['supply_name'] = ""
    tempObj['supply_type'] = ""
    tempObj['supply_specification_name'] = ''
    tempObj['supply_total'] = ""
    tempObj['supply_count'] = ""
    tempObj['supply_price'] = ""
    tempObj['supply_total_price'] = ""
    tempObj['supply_manufacturer'] = ''
    tempObj['supply_license_number'] = ''
    tempObj['supply_remake'] = ''
    tempObj['type'] = 0
    this.recordInfo.tableList.push(tempObj)
},
handleDelete: function(index, row) {
  if (this.recordInfo.tableList.length <= 1) {
        this.$message.error('只有一条记录的时候无法删除')
        return
   } else {
        this.recordInfo.tableList.splice(index, 1)
   }
},


savePurchaseOrder(){
   // console.log("tablelsit323232",this.recordInfo.tableList)
   console.log("hhh232323",this.$refs)
    this.$refs["tableForm"].validate((valid)=>{
      if(valid){
        var params = {
        supplier_name:this.supplier_name,
        start_time:this.start_time,
        end_time:this.end_time,
        rate_of_concession:this.rate_of_concession,
        discount_amount:this.discount_amount,
        }
        console.log("partam2332232332",params)
        console.log("tablelsit323232",this.recordInfo.tableList)
        for(let i=0;i<this.recordInfo.tableList.length;i++){
            this.recordInfo.tableList[i].supply_count = parseInt(this.recordInfo.tableList[i].supply_count)
            for(let j=0;j<this.manufactuerList.length;j++){
                if(this.recordInfo.tableList[i].supply_manufacturer == this.manufactuerList[j].manufacturer_name){
                this.recordInfo.tableList[i].manufacturer_id = this.manufactuerList[j].id
                }

            }
        }
        return
        savePurchaseOrder(this.recordInfo.tableList,this.supplier_name,this.start_time,this.end_time,this.rate_of_concession,this.discount_amount).then(response=>{
            if(response.data.state == 1){
                var order =  response.data.data.order
                this.$message.success("保存成功!")
                this.showTwo = false
                this.showOne = true
            }
        })
      }

   })

},

changeTypeName(){

},
startTimeChange(){

},
endTimeChange(){

},
search(){

},

getWarehoseInfo(arr,max_unit,min_unit,min_number){
    var total = 0
    var max_str=  ""
    var min_str = ""
    if (arr.length > 0) {
      for(let i=0;i<arr.length;i++){
        total += parseInt(arr[i].stock_max_number)
      }
    }
    if (total < min_number){
        min_str = total + min_unit
    }
    if (total == 0) {
        min_str = ""
        max_str = ""
    }
   if (total >=min_number) {
    if(parseInt(total/min_number)!=0){
        max_str = parseInt(total/min_number) + max_unit
    }
    if(total%min_number!=0){
       min_str = total%min_number + min_unit
    }
  }
 return max_str + min_str
 },
getTotalStockCount(arr){
  var total_count = 0
  for(let i=0;i<arr.length;i++){
    total_count += arr[i].stock_count
  }
  return total_count
},
calculate: function(val) {
    if (isNaN(val)) {
        return "";
    }
    if (val == 0) {
        return "";
    }
    return Math.round(parseFloat(val) * 100) / 100;
  },
 updatePurchaseOrder(){

 }
},
created(){
    const tempObj = {}
    tempObj["id"] = ""
    tempObj["name"] = ""
    tempObj['supply_name'] = ""
    tempObj['supply_type'] = ""
    tempObj['supply_specification_name'] = ''
    tempObj['supply_total'] = ""
    tempObj['supply_count'] = ""
    tempObj['supply_price'] = ""
    tempObj['supply_total_price'] = ""
    tempObj['supply_manufacturer'] = ''
    tempObj['supply_license_number'] = ''
    tempObj['supply_remake'] = ''
    tempObj['type'] = 0
    this.recordInfo.tableList.push(tempObj)
    this.getInitOrder()
}
};
</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;
}
.el-table__fixed-right{
  width:150px;
  bottom: 20px;
  height: 200px;
}
</style>