refinery-admin/src/views/order/components/billOfLading.vue

<template>
  <el-drawer
    direction="ltr"
    size="40%"
    :visible="controlWindows.bill"
    @opened="openDrawer"
    :before-close="closeWindow"
    :show-close = false
  >
    <div class="create" v-if="controlWindows.bill">
      <el-form label-width="100px">
        <div class="billTop">
          <div class="billTop-top">
            <div class="billTop-top-left">
              <el-form-item label="订单信息">
              </el-form-item>
              <el-form-item label="提货单数量:">
                <span>{{billData.orderInfo.deliveryAccount}}</span>
              </el-form-item>
            </div>
            <el-form-item label="订单状态">
              <el-tag effect='dark' :type="orderTagType(billData.orderInfo.orderStatus).orderType">{{orderTagType(billData.orderInfo.orderStatus).orderLabel}}</el-tag>
            </el-form-item>
          </div>
          <div>
            <div class="billTop-top-left">
              <el-form-item label="预订数量:">
                <span>{{billData.orderInfo.preQuantity}}</span>
              </el-form-item>
              <el-form-item label="订单金额:">
                <span>{{billData.orderInfo.preAmount}}</span>
              </el-form-item>
            </div>
            <div class="billTop-top-left">
              <el-form-item label="已提数量:">
                <span>{{billData.orderInfo.alreadyQuantity}}</span>
              </el-form-item>
              <el-form-item label="已提金额:">
                <span>{{billData.orderInfo.alreadyAmount}}</span>
              </el-form-item>
            </div>
            <div class="billTop-top-left">
              <el-form-item label="剩余数量:">
                <span>{{billData.orderInfo.surplusQuantity}}</span>
              </el-form-item>
              <el-form-item label="剩余金额:">
                <span>{{billData.orderInfo.surplusAmount}}</span>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="billBottom">
          <div class="billBottom-title">
            <span>提货单列表</span>
            <el-button type="primary" @click="billAdd()">创建提货单</el-button>
          </div>
          <div class="" style="height: 58vh;overflow: auto;">
            <div class="billBottom-body" v-for="(item,index) in billData.list" :key="index">
              <div class="billBottom-body-top">
                <el-form-item label="提货单">
                  <span>{{item.id}}</span>
                </el-form-item>
                <el-tag :type="orderTagType(item.deliveryStatus).type">{{orderTagType(item.deliveryStatus).label}}</el-tag>
              </div>
              <div class="billBottom-body-middle">
                <div class="billBottom-body-middle-info">
                  <el-form-item label="预约提货量">
                    <span>{{ item.preDeliveryQuantity }}</span>
                  </el-form-item>
                  <el-form-item label="提货人">
                    <span>{{item.driverName}}</span>
                  </el-form-item>
                  <el-form-item label="车牌号">
                    <span>{{ item.plateNumber }}</span>
                  </el-form-item>
                </div>
                <div class="billBottom-body-middle-info">
                  <el-form-item label="实际提货量">
                    <span>{{ item.accDeliveryQuantity }}</span>
                  </el-form-item>
                  <el-form-item label="身份证">
                    <span>{{ item.identityCard }}</span>
                  </el-form-item>
                </div>
              </div>
              <div v-show="item.deliveryStatus=='SUBMITED'" style="text-align: right;color: #409EFF;" @click="billAdd(item,index)">我来修改/锁定</div>
              <div class="billBottom-body-bottom">
                <div>
                  <el-form-item label="创建时间">
                    <span>{{ item.createTime }}</span>
                  </el-form-item>
                  <el-form-item label="更新时间">
                    <span>{{ item.updateTime }}</span>
                  </el-form-item>
                </div>
                <div>
                  <el-button v-show="billData.orderInfo.orderStatus=='DELIVERING'&&billData.orderInfo.payStatus!=='REFUNDED'" type="danger" @click="billDelete(item,index)">删除提货单</el-button>
                    <el-button :disabled="item.deliveryStatus!=='PLATENUM_LOCKED'&&item.deliveryStatus!=='PLATENUM_SUCCESS'" @click="billSubmit(item,index)" :type="orderTagType(item.deliveryStatus).type1">{{orderTagType(item.deliveryStatus).info}}</el-button>
                </div>
              </div>
            </div>            
          </div>
        </div>
      </el-form>
    </div>
    <div class="buttons">
      <el-button @click="controlWindows.bill = false">取消 </el-button>
      <el-button v-show="billData.orderInfo&&billData.orderInfo.orderStatus&&billData.orderInfo.orderStatus=='DELIVERING'"  @click="submit">订单确认</el-button>
    </div>
    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="提货单信息" width="400px" :visible.sync="dialogBillAdd">
      <el-form v-if="dialogBillAdd" :model="billAddData" ref="form" :rules="rules">
        <el-form-item label="预约提货量" prop="preDeliveryQuantity">
          <el-input v-model="billAddData.preDeliveryQuantity"></el-input>元/吨
        </el-form-item>
        <el-form-item label="提货人" prop="driverName">
          <el-input v-model="billAddData.driverName"></el-input>
        </el-form-item>
        <el-form-item label="提货人身份证号" prop="identityCard">
          <el-input v-model="billAddData.identityCard"></el-input>
        </el-form-item>
        <el-form-item label="提货车牌号码" prop="plateNumber">
          <el-input v-model="billAddData.plateNumber"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="dialogBillAdd = false">取 消</el-button>
        <el-button v-show="!billTitle" type="primary" @click="billAddSave()">确定</el-button>
        <el-button v-show="billTitle" type="primary" @click="billAddSave(1)">修改</el-button>
        <el-button v-show="billTitle" type="primary" @click="billAddSave(2)">修改并锁定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      destroy-on-close
      title="提示"
      :close-on-click-modal="false" :append-to-body="true" 
      :visible.sync="dialogDelivery"
      width="30%">
      <el-form v-if="dialogDelivery">
        <el-form-item label="实际提货量" prop="plateNumber">
          <el-input v-model="deliveryQuantity"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDelivery = false">取 消</el-button>
        <el-button type="primary" @click="billdelivery()">确 定</el-button>
      </span>
    </el-dialog>
  </el-drawer>
</template>

<script>
import serve from "api/product.js";
import order from "api/order.js";
import refineryInfoServe from "api/refineryInfo.js";

import autocomplete from "components/autocomplete/index.vue";
export default {
  components: {
    autocomplete,
  },
  filters:{
    orderTagType(val){
      switch(val){
        case 'SUBMITED': return '订单提交'
        case 'ORDER_LOCKED': return '订单锁定'
        case 'ORDER_SUCCESS': return '下单成功'
        case 'DELIVERING': return '提货中'
        case 'COMPLETE': return '提货单完成'
        case 'CANCELED': return '订单取消'
      }
      return {label:val?val:'暂无数据',type:'info'}
    },
  },
  props: {
    controlWindows: Object,
    billData:Array
    // refineryTypeEnum: Array,
  },
  data() {
    return {
      billTitle:'',
      quantity:'',
      deliveryQuantity:'',
      dialogDelivery:false,
      customList:[],
      form: {
        actAmount:0
      },
      billAddData:{},
      dialogBillAdd:false,
      productNameList:[],
      refineryList: [],
      productRowData:{},
      configAutocomplete: {
        serveTarget: refineryInfoServe.findByEntity,
        autocompleteKey: "refineryName",
        labelKey: "refineryName",
        valueKey: "id",
        placeholder: "炼厂名称",
        querykey: "refineryId",
        echoId: "",
        echoName: "",
      },
      rules: {
        preDeliveryQuantity: [
          { required: true, message: "请输入预约提货量", trigger: "blur" },
        ],
        driverName: [
          { required: true, message: "请输入提货人", trigger: "blur" },
        ],
        identityCard: [
          { required: true, message: "请输入提货人身份证号", trigger: "blur" },
        ],
        plateNumber: [
          { required: true, message: "请输入提货车牌号", trigger: "blur" },
        ],
      },
    };
  },
  created(){
  },
  methods: {
    billdelivery(){
        this.billAddData.deliveryStatus = 'COMPLETE'
        this.billAddData.accDeliveryQuantity = this.deliveryQuantity
        order.update(this.billAddData).then(res=>{
          if(res.code == 20000){
            this.billListMeth()
            // this.$set(this.billData.list,this.billData.index,this.billAddData)
            this.$message.success(res.msg)
            this.dialogDelivery = false
          }
        })
    },
    billSubmit(e,index){
      if(e.deliveryStatus=='PLATENUM_SUCCESS'){
        this.billAddData = JSON.parse(JSON.stringify(e))
        this.billData.index = index
        this.dialogDelivery = true
      }else if(e.deliveryStatus=='PLATENUM_LOCKED'){
        this.billAddData = JSON.parse(JSON.stringify(e))
        this.billAddData.deliveryStatus = 'PLATENUM_SUCCESS'
        this.$confirm('是否确认?', '提示', { type: 'info' }).then(() => {
          console.log(this.billData.list,index,this.billAddData,'aaaaaaaaaaa')
          order.update(this.billAddData).then(res=>{
            if(res.code == 20000){
              this.billListMeth()
              // this.$set(this.billData.list,index,this.billAddData)
              this.$message.success(res.msg)
              this.dialogBillAdd = false
            }
          })
        })
      }
    },
    orderTagType(val){
      switch(val){
        case 'SUBMITED': return {orderLabel:'订单提交',label:'等待信息',info:'等待信息锁定',type:'warning',type1:'info',orderType:'info'}
        case 'PLATENUM_LOCKED': return {orderLabel:'下单中',label:'信息锁定',info:'提货信息确认',type:'info',type1:'success',orderType:'warning'}
        case 'PLATENUM_SUCCESS': return {orderLabel:'下单成功',label:'提货中',info:'提货量确认',type:'',type1:'warning',orderType:''}
        case 'ORDER_LOCKED': return {orderLabel:'下单中',label:'信息锁定',info:'提货信息确认',type:'info',type1:'success',orderType:'warning'}
        case 'ORDER_SUCCESS': return {orderLabel:'下单成功',label:'提货中',info:'提货量确认',type:'',type1:'warning',orderType:''}
        case 'DELIVERING': return {orderLabel:'提货中',label:'提货中', type: ''}
        case 'COMPLETE': return {orderLabel:'订单完成',label:'提货完成',info:'提货完成',type:'success',type1:'info',orderType:'success'}
        case 'CANCELED': return {orderLabel:'订单取消',label:'订单取消',info:'订单取消',type:'info',type1:'dark',orderType:'info'}
      }
      return {label:val?val:'暂无数据',info:val?val:'暂无数据',type:'info'}
    },
    //创建修改提货单弹窗
    billAdd(e,index){
      this.billTitle = e?true:false
      this.billAddData = e?JSON.parse(JSON.stringify(e)):{}
      this.billData.index = index
      this.dialogBillAdd = true
    },
    //创建修改提货单
    billAddSave(e){
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if(!e){
            this.billAddData.orderId=this.controlWindows.addInfo.id
            this.billAddData.productMeasurement=this.controlWindows.addInfo.productMeasurement
             order.billSave(this.billAddData).then(res=>{
              if(res.code == 20000){
                this.billAddData.deliveryStatus = 'SUBMITED'
                this.billData.list.push(this.billAddData)
                this.billListMeth()
                this.$message.success(res.msg)
                this.dialogBillAdd = false
              }
            })
          }else{
            delete this.billAddData.productMeasurement
            this.billAddData.deliveryStatus = e==2?'PLATENUM_LOCKED':''
            order.update(this.billAddData).then(res=>{
              if(res.code == 20000){
                this.billListMeth()
                this.$message.success(res.msg)
                this.dialogBillAdd = false
              }
            })
          }
        }
      })
    },
    //更新提货单数据
    billListMeth(){
      setTimeout(()=>{
        order.findDeliveryByOrderId(this.controlWindows.addInfo.id).then((res) => {
          this.billData.list = res.data
            this.$forceUpdate() 
        });
      },200)
    },
    //删除提货单
    billDelete(e,index){
      this.$confirm('确定删除提货单?', '提示', { type: 'error' }).then(() => {
        order.deleteBill({id:e.id}).then(res=>{
          if(res.code == 20000){
            this.$message.success(res.msg)
            this.dialogBillAdd = false;
            this.billListMeth()
          }
        })
        this.$set(this.billData.list,index,'')
      })
    },
    openDrawer() {
      let { id } = this.controlWindows.addInfo;
      if (id) {
        //回显
        this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo));
        this.configAutocomplete.echoId = id;
        this.configAutocomplete.echoName = this.form.refineryName;
        console.log("this.form", this.form.floorPrice);
      }
    },
    submit() {
      this.quantity = 0
      this.billData.list.forEach(element => {
        if(element.accDeliveryQuantity){
          this.quantity += element.accDeliveryQuantity
        }else{
          this.$message.error('提货单异常')
          throw new Error()
        }
      });
      this.$confirm('确定下单?', '提示', { type: 'success' }).then(() => {
        let data={
          id:this.controlWindows.addInfo.id,
          actQuantity:this.quantity,
        }
        order.orderComplete(data).then((res) => {
            if (res.code === 20000) {
              this.$message.success(res.msg);
              this.closeWindow();
            }
          });
      })  
    },
    judgeInterface(form) {
      // let { id } = this.controlWindows.addInfo;
      // if (id) return serve.update(form);
      // else 
      return serve.orderSave(form);
    },
    closeWindow() {
      this.$emit("closeWindow");
      this.form = {};
      this.$refs.form.clearValidate();
      this.controlWindows.create = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  padding: 40px;
  .el-input,
  .el-select,
  .el-textarea,
  .el-autocomplete {
    width: 300px;
  }
}
.buttons {
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  padding-right: 40px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: right;
  border-top: 1px solid #f2f3f5;
  .el-button {
    text-align: right;
    font-size: 14px;
    border-radius: 5px;
  }
}
.billTop{
  background: #f0f0f0;
  padding: 15px 35px;
  border-radius: 5px;
}
.billTop-top,.billBottom-title,.billBottom-body-top,.billBottom-body-bottom{
    display: flex;
    justify-content: space-between;
  }
  .billTop-top-left{
    display: flex;
      ::v-deep .el-form-item{
        margin-bottom:0
    }
  }
  .billBottom{
    .billBottom-title{
      align-items: center;
      margin: 20px 0;
    }
  }
  .billBottom-body-middle {
    ::v-deep .el-form-item{
        margin-bottom:0
    }
    .billBottom-body-middle-info{
    display: flex;
  }
  }
  .billBottom-body{
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0,21,41,.50);
    margin: 25px 0px;
  }
  .billBottom-body-bottom{
    ::v-deep .el-form-item{
        margin-bottom:0
    }
    align-items: center;
    margin-top: 20px;
  }
::v-deep .el-drawer__header{
  display: none;
}
::v-deep .billBottom .el-form-item__label{
  line-height: 20px;
  color: #999;
}
::v-deep  .billBottom .el-form-item__content{
  line-height: 20px;
}
</style>