博客

效果如下：

实现如下：

1.我仍然保留了添加地址这一个对话框，但只是绑定在另一个按钮上面，而点击左侧第一个按钮就会跳转到“修改订单”模块

 <template v-slot="scope">
             <el-tooltip effect="dark"
             content="修改订单" placement="top" :enterable="false">
            <el-button type="primary"
            icon="el-icon-edit" size="mini"
            @click="goEditPage(scope.row.order_id)"></el-button>
             </el-tooltip>
            <el-tooltip effect="dark"
             content="物流信息" placement="top" :enterable="false">
            <el-button type="success"
            icon="el-icon-location" size="mini"
            @click="showProgressBox"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark"
             content="修改地址" placement="top" :enterable="false">
              <el-button type="primary" size="mini"
             icon="el-icon-edit" circle @click="addressVisible = true"></el-button>
            </el-tooltip>
          </template>

2.接着我们要定义

goEditPage

函数，这个函数的功能时跳转页面：

 // 前往编辑订单页面
    goEditPage (id) {
      this.$router.push('/orders/edit/' + id)
    }

3.记得要在

order

文件夹下新建一个文件

OrderEdit.vue

，接下来去

router/index.js

里面修改路由配置，记得导入这个模块，(截图没截到)：


OrderEdit.vue

完整代码如下：

<template>
  <div>
     <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>编辑订单</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 表单区域 -->
    <el-form :model="orderForm" label-width="80px"
    ref="orderFormRef">
  <el-form-item label="订单编号">
    <el-input v-model="orderForm.order_number" disabled></el-input>
  </el-form-item>
  <el-form-item label="是否发货">
    <p style="font-size:15px">1表示发货,0表示不发货</p>
    <el-input v-model="orderForm.is_send"></el-input>
  </el-form-item>
  <el-form-item label="支付状态">
    <p style="font-size:15px">0表示 未支付, 1表示支付宝, 2表示微信, 3表示银行卡</p>
    <el-input v-model="orderForm.order_pay"></el-input>
  </el-form-item>
  <el-form-item label="订单价格">
    <el-input v-model="orderForm.order_price"></el-input>
  </el-form-item>
    </el-form>
    <el-button type="primary" @click="edit">修改订单</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 传递过来的商品id
      id: this.$route.params.id,
      // 修改订单的表单数据对象
      orderForm: {
        is_send: '',
        order_fapiao_title: '',
        order_number: '',
        order_pay: '',
        order_price: 0,
        pay_status: ''
      }
    }
  },
  created () {
    this.getOrderInfo()
  },
  methods: {
    // 获得订单信息
    async getOrderInfo () {
      const { data: res } = await this.$http.get('orders/' + this.id)
      this.orderForm = res.data
      console.log(this.orderForm)
    },
    // 修改订单
    async edit () {
      const { data: res } = await this.$http.put('orders/' + this.id, this.orderForm)
      console.log(res)
      if (res.meta.status !== 201) {
        return this.$message.error('修改订单失败!')
      }
      this.$message.success('修改订单成功!')
      this.$router.push('/orders')
    }
  }
}
</script>

<style less="lang" scoped>

</style>