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

<template>
  <el-drawer
    title="确认下单"
    direction="ltr"
    size="60%"
    :visible.sync="controlWindows.confirmSubmit"
    :before-close="closeWindow"
    @opened="openDrawer"
  >
    <el-divider></el-divider>
    <div class="confirm-submit">
      <h4 class="title">当前订单信息</h4>
      <el-divider></el-divider>
      <ul>
        <li>
          <p>购方客户信息</p>
          <p>{{ controlWindows.addInfo.customerName }}</p>
        </li>
        <li>
          <p>炼厂</p>
          <p>{{ controlWindows.addInfo.refineryName }}</p>
        </li>
        <li>
          <p>产品</p>
          <p>{{ controlWindows.addInfo.productName }}</p>
        </li>
        <li>
          <p>创建时间</p>
          <p>{{ controlWindows.addInfo.createTime }}</p>
        </li>
      </ul>
      <el-descriptions style="width: 50%; margin: 0 auto" direction="vertical" :column="3" border>
        <el-descriptions-item label="价格">{{ controlWindows.addInfo.salePrice }}元</el-descriptions-item>
        <el-descriptions-item label="订单提货量">
          {{ controlWindows.addInfo.preQuantity | toNumberFixed }}
          {{ controlWindows.addInfo.productMeasurement }}
        </el-descriptions-item>
        <el-descriptions-item label="订单金额">
          {{ controlWindows.addInfo.preAmount | toNumberFixed }}
          元
        </el-descriptions-item>
      </el-descriptions>
      <template v-if="undergoChanges">
        <h4 class="title">订单变更信息</h4>
        <el-divider></el-divider>
        <p class="tip">因炼厂单价发生变化，请重新选择策略</p>
        <el-table :data="tableData" border style="width: 70%">
          <el-table-column prop="date" label="" width="70px">
            <template slot-scope="{ $index, row }">
              <el-checkbox v-model="row.isChecked" @change="val => selectPolicy($index, val)"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="策略类型"> </el-table-column>
          <el-table-column label="价格">
            <template slot-scope="{ row }"> {{ row.salePrice }}元 </template>
          </el-table-column>
          <el-table-column label="订单提货量">
            <template slot-scope="{ row }"> {{ row.preQuantity | toNumberFixed }}{{ controlWindows.addInfo.productMeasurement }} </template>
          </el-table-column>
          <el-table-column label="订单金额">
            <template slot-scope="{ row }"> {{ row.preAmount | toNumberFixed }}元 </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="footer-buttons">
      <el-button @click="closeWindow">关闭 </el-button>
      <el-button @click="submit">审核 </el-button>
    </div>
  </el-drawer>
</template>

<script>
import serve from '@/api/order.js'
export default {
  props: {
    controlWindows: Object
  },
  data() {
    return {
      newSalePrice: '',
      undergoChanges: false,
      tableData: [
        {
          isChecked: false,
          type: '原策略',
          salePrice: 100,
          preQuantity: 100,
          preAmount: 10000
        },
        {
          isChecked: false,
          type: '以提货量为准',
          salePrice: 100,
          preQuantity: 100,
          preAmount: 10000
        },
        {
          isChecked: false,
          type: '以订单金额为准',
          salePrice: 100,
          preQuantity: 100,
          preAmount: 10000
        }
      ]
    }
  },
  filters: {
    toNumberFixed(val) {
      if (val) {
        return Number(val).toFixed(2)
      } else {
        return '--'
      }
    }
  },
  methods: {
    openDrawer() {
      let { productId, salePrice } = this.controlWindows.addInfo
      if (productId) {
        serve.getRefineryProduct(productId).then(res => {
          let { salePrice2company } = res.data
          if (salePrice2company != salePrice) {
            console.log('价格发生变化了捏')
            // 新的价格
            this.newSalePrice = salePrice2company
            this.policyPopulation()
          } else console.log('芜湖 没变')
        })
      }
    },
    selectPolicy(index, val) {
      if (val) {
        this.tableData.map(item => (item.isChecked = false))
        this.tableData[index].isChecked = true
      }
    },
    policyPopulation() {
      let { salePrice, preQuantity, preAmount } = this.controlWindows.addInfo
      console.log(salePrice, preQuantity, preAmount)
      if ((salePrice, preQuantity, preAmount)) {
        // 原策略
        Object.assign(this.tableData[0], { salePrice, preQuantity, preAmount })
        // 以提货量为准
        Object.assign(this.tableData[1], { salePrice: this.newSalePrice, preQuantity, preAmount: +this.newSalePrice * +preQuantity })
        // 以订单金额为准
        Object.assign(this.tableData[2], { salePrice: this.newSalePrice, preQuantity: +preAmount / +this.newSalePrice, preAmount })
        this.undergoChanges = true
      }
    },
    submit() {
      if (this.undergoChanges) {
        let targetPolicy = this.tableData.filter(item => item.isChecked)
        if (!targetPolicy.length) {
          this.$message.warning('炼厂单价发生变化，请选择变更策略')
          return
        }
        serve.orderSuccess({ id: this.controlWindows.addInfo.id, ...targetPolicy[0] }).then(res => {
          if (res.code == 20000) {
            this.closeWindow()
          }
        })
        return
      }
      serve.orderSuccess({ id: this.controlWindows.addInfo.id }).then(res => {
        if (res.code == 20000) {
          this.closeWindow()
        }
      })
    },
    closeWindow() {
      console.log(1)
      this.$emit('closeWindow')
      this.undergoChanges = false
      this.controlWindows.addInfo = {}
      this.controlWindows.confirmSubmit = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-drawer__header {
    margin-bottom: 0;
  }
}
.confirm-submit {
  padding: 0 30px;
  .title {
  }
  > ul {
    display: flex;
    margin: 0 auto 30px;
    width: 80%;

    li {
      flex: 1;
      // text-align: center;
      p {
        &:nth-of-type(1) {
          color: #999;
        }
        &:nth-of-type(2) {
          margin-top: 15px;
          font-size: 14px;
        }
      }
    }
  }
  .tip {
    // margin-top: 11px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #3cb371;
    text-align: center;
  }
  .el-table {
    margin: 0 auto;
  }
}
.footer-buttons {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-right: 40px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: right;
  border-top: 1px solid #dcdfe6;
  .el-button {
    text-align: right;
    font-size: 14px;
    border-radius: 5px;
  }
}
</style>