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="closeWindow()">取消 </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
          this.$forceUpdate()
          this.$emit('closeWindow')
        }
      })
    },
    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
              this.$emit('closeWindow')
            }
          })
        })
      }
    },
    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.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
              }
            })
          }
        }
      })
      this.$emit('billOfLading', this.billAddData.orderId)
    },
    //更新提货单数据
    billListMeth() {
      setTimeout(() => {
        order.findDeliveryByOrderId(this.controlWindows.addInfo.id).then(res => {
          this.billData.list = res.data
          this.$forceUpdate()
        })
        order.findByOrderId(this.controlWindows.addInfo.id).then(res => {
          this.billData.orderInfo = 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()
          }
        })
      })
    },
    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()
        }
      })
      let titleConfirm = ['是否确认订单已完成？', '一旦确认，该订单无法再被提货，且未提货的金额将自行退回。']
      const newDatas = []
      const h = this.$createElement
      for (const i in titleConfirm) {
        newDatas.push(h('p', null, titleConfirm[i]))
      }
      this.$confirm('提示', {
        title: '提示',
        message: h('div', null, newDatas),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        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.controlWindows.bill = 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, 0.5);
  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>