订单完善以及退款相关

src/api/bst/order.js

@@ -42,3 +42,13 @@ export function delOrder(id) {
     method: 'delete'
   })
 }
+
+
+// 订单退款
+export function refundOrder(data) {
+  return request({
+    url: '/bst/order/refund',
+    method: 'put',
+    data: data
+  })
+}

src/views/bst/order/components/OrderRefundDialog.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-dialog
+    title="退款"
+    :visible.sync="dialogVisible"
+    width="500px"
+    append-to-body
+    @open="handleOpen"
+  >
+    <el-form :model="form" :rules="rules" ref="form" label-width="6em" v-loading="loading" size="small">
+      <el-form-item label="退款金额" prop="amount">
+        <el-input-number v-model="form.amount" :min="0" :max="canRefundAmount" placeholder="请输入退款金额" :precision="2" style="width: 100%;" />
+      </el-form-item>
+      <el-form-item label="退款次数" prop="number">
+        <el-input-number v-model="form.number" :min="0" :max="canRefundNum" placeholder="请输入退款次数" style="width: 100%;" />
+      </el-form-item>
+      <el-form-item label="退款原因" prop="reason">
+        <el-input v-model="form.reason" type="textarea" placeholder="请输入退款原因" show-word-limit maxlength="200" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确认退款</el-button>
+      <el-button @click="dialogVisible = false">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {getOrder, refundOrder} from '@/api/bst/order'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: ''
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      detail: {},
+      form: {
+        number: 0,
+      },
+      loading: false,
+      submitLoading: false,
+      rules: {
+        amount: [
+          { required: true, message: '请输入退款金额', trigger: 'blur' },
+        ],
+        number: [
+          { required: true, message: '请输入退款次数', trigger: 'blur' },
+        ],
+      }
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+      }
+    },
+    // 可退款金额
+    canRefundAmount() {
+      let payedAmount = this.detail.payedAmount || 0;
+      let payRefunded = this.detail.payRefunded || 0;
+      let payRefunding = this.detail.payRefunding || 0;
+      return payedAmount - payRefunded - payRefunding;
+    },
+    // 可退款次数
+    canRefundNum() {
+      let suitNum = this.detail.suitNum || 0;
+      let refundNum = this.detail.refundNum || 0;
+      return suitNum - refundNum ;
+    }
+  },
+  methods: {
+    getDetail() {
+      this.loading = true;
+      getOrder(this.id).then(response => {
+        this.detail = response.data;
+        this.form.amount = this.canRefundAmount;
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    handleOpen() {
+      this.getDetail();
+      this.reset();
+    },
+    reset() {
+      this.form = {
+        orderId: this.id,
+        amount: 0,
+        number: 0,
+        reason: null,
+      };
+      this.resetForm('form');
+    },
+    handleSubmit() {
+      this.$refs.form.validate().then(() => {
+        this.submitLoading = true;
+        refundOrder(this.form).then((response) => {
+          if (response.code == 200) {
+            this.$message.success('退款成功');
+            this.dialogVisible = false;
+            this.$emit('success');
+          }
+        }).finally(() => {
+          this.submitLoading = false;
+        });
+      });
+    }
+
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/bst/order/components/OrderVerifyDialog.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-dialog 
+    title="还车审核" 
+    :visible.sync="dialogVisible" 
+    width="500px" 
+    append-to-body 
+    @open="handleOpen"
+  > 
+    <el-form :model="form" :rules="rules" ref="form" label-width="5em" v-loading="loading" size="small">
+      <el-form-item label="车损费" prop="deductionFee">
+        <el-input-number 
+          v-model="form.deductionFee" 
+          type="number" 
+          placeholder="请输入车损费" 
+          :min="0" 
+          controls-position="right" 
+          :max="detail.depositFee - detail.totalFee" 
+          style="width: 100%;"
+        />
+      </el-form-item>
+      <el-form-item label="审核意见" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请输入审核意见" show-word-limit maxlength="200" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="success" plain @click="handleSubmit(true)" icon="el-icon-check" :loading="submitLoading">通过</el-button>
+      <el-button type="danger" plain @click="handleSubmit(false)" icon="el-icon-close" :loading="submitLoading">驳回</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import {getOrder, verifyOrder} from '@/api/bst/order'
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: null
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      detail: {},
+      form: {},
+      loading: false,
+      submitLoading: false,
+      rules: {
+      }
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('update:visible', val);
+      }
+    },
+    // 可退款金额
+    canRefundAmount() {
+      let payAmount = this.detail.payAmount || 0;  
+      let payRefunded = this.detail.payRefunded || 0;
+      let payRefunding = this.detail.payRefunding || 0;
+      return payAmount - payRefunded - payRefunding;
+    }
+  },
+  methods: {
+    getDetail() {
+      this.loading = true;
+      getOrder(this.id).then(response => {
+        this.detail = response.data;
+        this.form.amount = this.canRefundAmount;
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    handleOpen() {
+      this.getDetail();
+      this.reset();
+    },
+    reset() {
+      this.form = {
+        id: this.id,
+        pass: null,
+        remark: null,
+      };
+      this.resetForm('form');
+    },
+    handleSubmit(pass) {
+      this.$refs.form.validate().then(() => {
+        this.$confirm(`确定${pass ? '通过' : '驳回'}吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.form.pass = pass;
+          this.submitLoading = true;
+          verifyOrder(this.form).then((response) => {
+            if (response.code == 200) {
+              this.$message.success('操作成功');
+              this.dialogVisible = false;
+              this.$emit('success');
+            }
+          }).finally(() => {
+            this.submitLoading = false;
+          });
+        });
+      });
+    }
+
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/bst/order/index.vue

@@ -55,7 +55,8 @@
           size="mini"
           @click="handleAdd"
           v-has-permi="['bst:order:add']"
-        >新增</el-button>
+        >新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -66,7 +67,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-has-permi="['bst:order:remove']"
-        >删除</el-button>
+        >删除
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -76,13 +78,15 @@
           size="mini"
           @click="handleExport"
           v-has-permi="['bst:order:export']"
-        >导出</el-button>
+        >导出
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
-      <el-table-column type="selection" width="55" align="center" />
+    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange"
+              :default-sort="defaultSort" @sort-change="onSortChange">
+      <el-table-column type="selection" width="55" align="center"/>
       <template v-for="column of showColumns">
         <el-table-column
           :key="column.key"
@@ -97,20 +101,66 @@
         >
           <template slot-scope="d">
             <template v-if="column.key === 'id'">
-              {{d.row[column.key]}}
+              {{ d.row[column.key] }}
             </template>
             <template v-else-if="column.key === 'suitId'">
-              {{d.row.suitId | dv}}<br/>
+              <div class="compact-suit">
+                <div v-if="d.row.suitAmount" style="line-height: 24px">
+                  套餐金额：<b>{{ d.row.suitAmount | fix2 | dv }}</b>元
+                </div>
+                <div v-if="d.row.suitNum" style="line-height: 24px">
+                  爆灯次数：<b>{{ d.row.suitNum | dv }}</b>次
+                </div>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'status'">
               <dict-tag :options="dict.type.order_status" :value="d.row.status" size="mini" style="margin-left: 4px;"/>
+            </template>
+            <template v-else-if="column.key === 'userName'">
+              <div v-if="d.row.userName != null">
+                <i class="el-icon-user"/>
+                <user-link :id="d.row.userId" :text="d.row.userName" size="mini"/>
+              </div>
+              <div v-if="d.row.userPhone != null">
+                <i class="el-icon-phone"/>
+                <user-link :id="d.row.userId" :text="d.row.userPhone" size="mini"/>
+              </div>
+            </template>
+            <template v-else-if="column.key === 'payAmount'">
               <div>
                 <el-row :gutter="8">
-                    <el-col :span="12" v-if="d.row.suitNum" >套餐次数：{{d.row.suitNum | fix2 | dv}} 次</el-col>
-                    <el-col :span="12" v-if="d.row.suitAmount">套餐金额：{{d.row.suitAmount | fix2 | dv}} 元</el-col>
+                  <!-- 实收信息 -->
+                  <el-col :span="24" v-if="d.row.payedAmount">
+                    <div style="color: green; line-height: 24px">
+                      <span style="font-weight: 500">实收：</span>
+                      <span style="font-weight: bold">
+          {{ d.row.payedAmount - d.row.payRefunded - d.row.payRefunding | fix2 | dv }} 元
+        </span>
+                      <span style="margin-left: 12px">
+          次数：<span style="font-weight: bold">{{ d.row.suitNum - d.row.refundNum | dv }}</span> 次
+        </span>
+                    </div>
+                  </el-col>
+                  <!-- 退款信息 -->
+                  <el-col :span="24" v-if="d.row.payRefunded || d.row.payRefunding">
+                    <div style="color: red; line-height: 24px; margin-top: 4px">
+                      <span style="font-weight: 500">退款：</span>
+                      <span style="font-weight: bold">
+                            {{ d.row.payRefunded | fix2 | dv }} 元
+                      </span>
+                      <span style="margin-left: 12px">
+          次数：<span style="font-weight: bold">{{ d.row.refundNum | dv }}</span> 次
+        </span>
+                      <template v-if="d.row.payRefunding">
+                        <span style="margin-left: 8px">(退款中：{{ d.row.payRefunding | fix2 | dv }} 元)</span>
+                      </template>
+                    </div>
+                  </el-col>
                 </el-row>
               </div>
             </template>
             <template v-else>
-              {{d.row[column.key]}}
+              {{ d.row[column.key] }}
             </template>
           </template>
         </el-table-column>
@@ -123,14 +173,17 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-has-permi="['bst:order:edit']"
-          >修改</el-button>
+          >修改
+          </el-button>
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-has-permi="['bst:order:remove']"
-          >删除</el-button>
+            icon="el-icon-wallet"
+            @click="handleRefund(scope.row)"
+            v-has-permi="['bst:order:refund']"
+            v-show="OrderStatus.canRefund().includes(scope.row.status)"
+          >退款
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -142,15 +195,21 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <order-refund-dialog :id="row.id" :visible.sync="showRefundDialog" @success="getList"/>
   </div>
 </template>
 
 <script>
-import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/bst/order";
-import { $showColumns } from '@/utils/mixins';
+import {listOrder, getOrder, delOrder, addOrder, updateOrder} from "@/api/bst/order";
+import {$showColumns} from '@/utils/mixins';
 import FormCol from "@/components/FormCol/index.vue";
+import UserLink from "@/views/system/user/UserLink.vue";
+import CollapsePanel from "@/components/CollapsePanel/index.vue";
+import {OrderStatus} from "@/utils/enums";
+import OrderRefundDialog from "@/views/bst/order/components/OrderRefundDialog.vue";
 
-  // 默认排序字段
+// 默认排序字段
 const defaultSort = {
   prop: "createTime",
   order: "descending"
@@ -158,19 +217,75 @@ const defaultSort = {
 
 export default {
   name: "Order",
+  computed: {
+    OrderStatus() {
+      return OrderStatus
+    }
+  },
   mixins: [$showColumns],
-  dicts:['order_status'],
-  components: {FormCol},
+  dicts: ['order_status'],
+  props: {
+    query: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  components: {CollapsePanel, UserLink, FormCol, OrderRefundDialog},
   data() {
     return {
       span: 24,
       // 字段列表
       columns: [
-        {key: 'orderNo', visible: true, label: '订单号', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'userName', visible: true, label: '用户', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'payAmount', visible: true, label: '支付金额', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'suitId', visible: true, label: '套餐ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        {
+          key: 'orderNo',
+          visible: true,
+          label: '订单号',
+          minWidth: null,
+          sortable: true,
+          overflow: false,
+          align: 'center',
+          width: "170"
+        },
+        {
+          key: 'suitId',
+          visible: true,
+          label: '套餐',
+          minWidth: null,
+          sortable: true,
+          overflow: false,
+          align: 'center',
+          width: null
+        },
+        {
+          key: 'userName',
+          visible: true,
+          label: '用户',
+          minWidth: null,
+          sortable: true,
+          overflow: false,
+          align: 'center',
+          width: '100'
+        },
+        {
+          key: 'payAmount',
+          visible: true,
+          label: '支付金额',
+          minWidth: null,
+          sortable: true,
+          overflow: false,
+          align: 'center',
+          width: null
+        },
+        {
+          key: 'status',
+          visible: true,
+          label: '订单状态',
+          minWidth: null,
+          sortable: true,
+          overflow: false,
+          align: 'center',
+          width: '80'
+        },
       ],
       // 排序方式
       orderSorts: ['ascending', 'descending', null],
@@ -214,38 +329,48 @@ export default {
         cancelRemark: null,
         payExpireTime: null
       },
+      row: {},
+      showRefundDialog: false,
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         orderNo: [
-          { required: true, message: "订单号不能为空", trigger: "blur" }
+          {required: true, message: "订单号不能为空", trigger: "blur"}
         ],
         storeId: [
-          { required: true, message: "店铺ID不能为空", trigger: "blur" }
+          {required: true, message: "店铺ID不能为空", trigger: "blur"}
         ],
         userId: [
-          { required: true, message: "用户ID不能为空", trigger: "blur" }
+          {required: true, message: "用户ID不能为空", trigger: "blur"}
         ],
         payAmount: [
-          { required: true, message: "支付金额不能为空", trigger: "blur" }
+          {required: true, message: "支付金额不能为空", trigger: "blur"}
         ],
         createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
+          {required: true, message: "创建时间不能为空", trigger: "blur"}
         ],
         suitId: [
-          { required: true, message: "套餐ID不能为空", trigger: "blur" }
+          {required: true, message: "套餐ID不能为空", trigger: "blur"}
         ],
         payExpireTime: [
-          { required: true, message: "支付超时时间不能为空", trigger: "blur" }
+          {required: true, message: "支付超时时间不能为空", trigger: "blur"}
         ]
       }
     };
   },
   created() {
+    this.queryParams = {
+      ...this.queryParams,
+      ...this.query
+    }
     this.getList();
   },
   methods: {
+    handleRefund(row) {
+      this.row = row;
+      this.showRefundDialog = true;
+    },
     /** 当排序按钮被点击时触发 **/
     onSortChange(column) {
       if (column.order == null) {
@@ -306,7 +431,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -348,12 +473,13 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除订单列表编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除订单列表编号为"' + ids + '"的数据项？').then(function () {
         return delOrder(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出按钮操作 */
     handleExport() {