feat ui 新增了订单管理的详情页和处理逻辑

yudao-ui-admin-vue2/src/api/restaurant/order/index.js

@@ -20,7 +20,7 @@ export function pageOrder(params) {
 // 获得商品
 export function getOrder(id) {
   return request({
-    url: '/restaurant/order/get?id=' + id,
+    url: '/restaurant/order/get?orderId=' + id,
     method: 'get'
   })
 }

yudao-ui-admin-vue2/src/views/restaurant/order/OrderForm.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="app-container">
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
+        <el-form-item label="订单用户" prop="name">
+          <!-- <el-input v-model="formData.name" placeholder="请输入商品分类名称" /> -->
+           {{ formData.name}}
+        </el-form-item>
+        <el-form-item label="手机号" prop="phone	">
+          <!-- <el-input v-model="formData.name" placeholder="请输入商品分类名称" /> -->
+           {{ formData.phone	}}
+        </el-form-item>
+        <el-form-item label="地址" prop="address	">
+          <!-- <el-input v-model="formData.name" placeholder="请输入商品分类名称" /> -->
+           {{ formData.address	}}
+        </el-form-item>
+        <el-form-item label="下单时间" prop="useTime		">
+          <!-- <el-input v-model="formData.name" placeholder="请输入商品分类名称" /> -->
+           {{ formData.useTime}}
+        </el-form-item>
+        <el-form-item label="总金额" prop="priceVisable	  ">
+          <!-- <el-input v-model="formData.name" placeholder="请输入商品分类名称" /> -->
+           {{ formData.priceVisable}}
+        </el-form-item>
+        <el-form-item label="下单明细" prop="goodsList">
+          <!-- {{ formData.goodsList	 }} -->
+            <el-table :data="formData.goodsList" border style="width: 100%">
+              <el-table-column prop="goodsName" label="商品名称" ></el-table-column>
+              <el-table-column prop="priceVisable" label="商品价格" >
+              </el-table-column>
+              <el-table-column prop="num" label="商品数量" ></el-table-column>
+            </el-table>
+        </el-form-item>
+      </el-form>
+              <div slot="footer" class="dialog-footer">
+        <el-button v-show="inspectFalg" type="warning" size="medium" style="font-size: 30px;" @click="refundForm" :disabled="formLoading">退款</el-button>
+        <el-button v-show="inspectFalg" type="success" size="medium" style="font-size: 30px;" @click="submitForm" :disabled="formLoading">完成取餐</el-button>
+        <el-button @click="dialogVisible = false" >取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import * as OrderApi from '@/api/restaurant/order';
+
+      export default {
+    name: "TypeForm",
+    components: {
+                    },
+    data() {
+      return {
+        // 弹出层标题
+        dialogTitle: "",
+        // 是否显示弹出层
+        dialogVisible: false,
+        // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+        formLoading: false,
+        // 表单参数
+        formData: {
+                            goodsTypeName: undefined,
+        },
+        // 表单校验
+        formRules: {
+        },
+        inspectFalg:false
+                        };
+    },
+    methods: {
+      async inspect(id) {
+        this.dialogVisible = true;
+        this.inspectFalg= false
+        this.reset();
+        // 修改时，设置数据
+        if (id) {
+          this.formLoading = true;
+          try {
+            const res = await OrderApi.getOrder(id);
+            this.formData = res.data;
+            this.title = "修改商品分类";
+          } finally {
+            this.formLoading = false;
+          }
+        }
+        this.title = "新增商品分类";
+              },
+      /** 打开弹窗 */
+     async open(id) {
+        this.dialogVisible = true;
+        this.inspectFalg= true
+
+        this.reset();
+        // 修改时，设置数据
+        if (id) {
+          this.formLoading = true;
+          try {
+            const res = await OrderApi.getOrder(id);
+            this.formData = res.data;
+            this.title = "修改商品分类";
+          } finally {
+            this.formLoading = false;
+          }
+        }
+        this.title = "新增商品分类";
+              },
+      async refundForm(){
+        this.$modal.confirm('是否确认退款？').then(async() => {
+          await OrderApi.updateOrder({id:this.formData.id,state:6});
+          this.$modal.msgSuccess("退款成功");
+          this.dialogVisible = false;
+          this.$emit('success');
+        })
+      },
+      /** 提交按钮 */
+      async submitForm() {
+        this.$modal.confirm('是否确认完成？').then(async() => {
+          await OrderApi.updateOrder({id:this.formData.id,state:5});
+          this.$modal.msgSuccess("完成成功");
+          this.dialogVisible = false;
+          this.$emit('success');
+        })
+      },
+                      /** 表单重置 */
+      reset() {
+        this.formData = {
+                            goodsTypeName: undefined,
+        };
+        this.resetForm("formRef");
+      }
+    }
+  };
+</script>

yudao-ui-admin-vue2/src/views/restaurant/order/index.vue

@@ -3,7 +3,16 @@
     <!-- 搜索工作栏 -->
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="订单名称" prop="OrderName">
-        <el-input v-model="queryParams.OrderName" placeholder="请输入订单名称" clearable @keyup.enter.native="handleQuery"/>
+       <el-select clearable v-model="queryParams.status" placeholder="请选择订单状态" multiple>
+        <el-option :value="1" label="待支付" >待支付</el-option>
+        <el-option :value="2" label="支付失败" >支付失败</el-option>
+        <el-option :value="3"  label="支付超时">支付超时</el-option>
+        <el-option :value="4" label="待取餐" >待取餐</el-option>
+        <el-option :value="5" label="已完成" >已完成</el-option>
+        <el-option :value="6"  label="已退款">已退款</el-option>
+      </el-select>
+      <!-- {{ queryParams.status }} -->
+        <!-- <el-input v-model="queryParams.OrderName" placeholder="请输入订单名称" clearable @keyup.enter.native="handleQuery"/> -->
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
@@ -17,14 +26,14 @@
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
                    v-hasPermi="['restaurant:order:create']">新增</el-button>
       </el-col> -->
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
                    v-hasPermi="['restaurant:order:export']">导出</el-button>
-      </el-col>
+      </el-col> -->
               <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-            <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
             <!-- <el-table-column label="订单编号" align="center" prop="id" /> -->
       <el-table-column label="订单名称" align="center" prop="name" />
       <el-table-column label="取餐人手机尾号" align="center" prop="phone" />
@@ -45,11 +54,23 @@
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <!-- <el-table-column label="订单分类Id" align="center" prop="OrderTypeId" /> -->
+      <el-table-column label="订单状态" align="center" prop="state" >
+        <template v-slot="scope">
+          <span v-show="scope.row.state==1">待支付</span>
+          <span v-show="scope.row.state==2">支付失败</span>
+          <span v-show="scope.row.state==3">支付超时</span>
+          <span v-show="scope.row.state==4">待取餐</span>
+          <span v-show="scope.row.state==5">已完成</span>
+          <span v-show="scope.row.state==6">已退款</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
+                    v-show="scope.row.state==4"
                      v-hasPermi="['restaurant:order:update']">修改</el-button>
+          <el-button style="color: #666;" size="mini" type="text" icon="el-icon-search" @click="handleInspect(scope.row.id)"
+                     v-hasPermi="['restaurant:order:update']">查看</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -57,18 +78,18 @@
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                 @pagination="getList"/>
     <!-- 对话框(添加 / 修改) -->
-    <!-- <OrderForm ref="formRef" @success="getList" /> -->
+    <OrderForm ref="formRef" @success="getList" />
     </div>
 </template>
 
 <script>
 import * as OrderApi from '@/api/restaurant/order';
 import * as TypeApi from '@/api/restaurant/type';
-// import OrderForm from './OrderForm.vue';
+import OrderForm from './OrderForm.vue';
 export default {
   name: "Order",
   components: {
-          // OrderForm,
+   OrderForm,
   },
   data() {
     return {
@@ -98,6 +119,7 @@ export default {
         OrderIcon: null,
         createTime: [],
         OrderTypeId: null,
+        // status:[],
       },
       typeArray:[],
             };
@@ -111,6 +133,10 @@ export default {
     async getList() {
       try {
       this.loading = true;
+      // if(this.queryParams.status !=''){
+      //   this.queryParams.status=  this.queryParams.status;
+      // }
+
               const res = await OrderApi.pageOrder(this.queryParams);
               console.log('res',res)
         this.list = res.list;
@@ -126,9 +152,14 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
+      this.queryParams.status=[]
+      console.log('resetQuery',this.queryParams.status)
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    handleInspect(id) {
+      this.$refs["formRef"].inspect(id);
+    },
     /** 添加/修改操作 */
     openForm(id) {
       this.$refs["formRef"].open(id);