10.1 黑马Vue电商后台管理系统之完善订单管理模块--参与修改订单模块

效果如下：

实现如下：

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

1. <template v-slot="scope">
2.              <el-tooltip effect="dark"
3.              content="修改订单" placement="top" :enterable="false">
4.             <el-button type="primary"
5.             icon="el-icon-edit" size="mini"
6.             @click="goEditPage(scope.row.order_id)"></el-button>
7.              </el-tooltip>
8.             <el-tooltip effect="dark"
9.              content="物流信息" placement="top" :enterable="false">
10.             <el-button type="success"
11.             icon="el-icon-location" size="mini"
12.             @click="showProgressBox"></el-button>
13.             </el-tooltip>
14.             <el-tooltip effect="dark"
15.              content="修改地址" placement="top" :enterable="false">
16.               <el-button type="primary" size="mini"
17.              icon="el-icon-edit" circle @click="addressVisible = true"></el-button>
18.             </el-tooltip>
19.           </template>

复制代码

2.接着我们要定义goEditPage函数，这个函数的功能时跳转页面：

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

复制代码

3.记得要在order文件夹下新建一个文件OrderEdit.vue，接下来去router/index.js里面修改路由配置，记得导入这个模块，(截图没截到)：

OrderEdit.vue完好代码如下：

1. <template>
2.   <div>
3.      <!-- 面包屑导航区域 -->
4.     <el-breadcrumb separator-class="el-icon-arrow-right">
5.       <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
6.       <el-breadcrumb-item>订单管理</el-breadcrumb-item>
7.       <el-breadcrumb-item>编辑订单</el-breadcrumb-item>
8.     </el-breadcrumb>
10.     <!-- 表单区域 -->
11.     <el-form :model="orderForm" label-width="80px"
12.     ref="orderFormRef">
13.   <el-form-item label="订单编号">
14.     <el-input v-model="orderForm.order_number" disabled></el-input>
15.   </el-form-item>
16.   <el-form-item label="是否发货">
17.     <p style="font-size:15px">1表示发货,0表示不发货</p>
18.     <el-input v-model="orderForm.is_send"></el-input>
19.   </el-form-item>
20.   <el-form-item label="支付状态">
21.     <p style="font-size:15px">0表示 未支付, 1表示支付宝, 2表示微信, 3表示银行卡</p>
22.     <el-input v-model="orderForm.order_pay"></el-input>
23.   </el-form-item>
24.   <el-form-item label="订单价格">
25.     <el-input v-model="orderForm.order_price"></el-input>
26.   </el-form-item>
27.     </el-form>
28.     <el-button type="primary" @click="edit">修改订单</el-button>
29.   </div>
30. </template>
32. <script>
33. export default {
34.   data () {
35.     return {
36.       // 传送过来的商品id
37.       id: this.$route.params.id,
38.       // 修改订单的表单数据对象
39.       orderForm: {
40.         is_send: '',
41.         order_fapiao_title: '',
42.         order_number: '',
43.         order_pay: '',
44.         order_price: 0,
45.         pay_status: ''
46.       }
47.     }
48.   },
49.   created () {
50.     this.getOrderInfo()
51.   },
52.   methods: {
53.     // 获得订单信息
54.     async getOrderInfo () {
55.       const { data: res } = await this.$http.get('orders/' + this.id)
56.       this.orderForm = res.data
57.       console.log(this.orderForm)
58.     },
59.     // 修改订单
60.     async edit () {
61.       const { data: res } = await this.$http.put('orders/' + this.id, this.orderForm)
62.       console.log(res)
63.       if (res.meta.status !== 201) {
64.         return this.$message.error('修改订单失败!')
65.       }
66.       this.$message.success('修改订单胜利!')
67.       this.$router.push('/orders')
68.     }
69.   }
70. }
71. </script>
73. <style less="lang" scoped>
75. </style>

复制代码