【类 型】：refactor

【主	题】：修改面包条 订单管理
【描	述】：
	[原因]：数据库表结构改变  还有 优化面包条订单相关组件
	[过程]：
	[影响]：
【结	束】

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

src/components/QuestTabs.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="p-15">
     <el-collapse v-model="activeNames" accordion>
-      <template v-if="orderListArr.length != 0">
+      <template v-if="list.length != 0">
-        <el-collapse-item class="mainFontColor" v-for="(item, index) in orderListArr" :key="index" :name="item.id">
+        <el-collapse-item class="mainFontColor" v-for="(item, index) in list" :key="index" :name="item.id">
           <template slot="title">
             <div class="clearB w-100">
               <div class="fb l w-30">
@@ -14,7 +14,7 @@
             </div>
           </template>
           <el-descriptions direction=" vertical" :column="3" border>
-            <el-descriptions-item label="状态">{{ orderState(item.back, item.status) }}
+            <el-descriptions-item label="状态">{{ item.shipment_status }}
             </el-descriptions-item>
             <el-descriptions-item label="订单号">{{ item.order_sn }}</el-descriptions-item>
             <el-descriptions-item label="取餐号">{{ item.food_sn }}</el-descriptions-item>
@@ -44,11 +44,11 @@
                 </el-table-column>
               </el-table>
             </el-descriptions-item>
-            <el-descriptions-item :label="item.back == 'normal' ? '客户备注' : '退货缘由'" span="3">
+            <el-descriptions-item :label="item.refund_status == '未申请' ? '客户备注' : '退货缘由'" span="3">
-              {{ item.back == 'requested' ? (item.back_remark || '无') : (item.remark || '无') }}
+              {{ item.refund_status == '未申请' ? (item.refund_remark || '无') : (item.remark || '无') }}
             </el-descriptions-item>
             <el-descriptions-item label="操作" span="3">
-              <el-button-group v-if="item.back == 'requested'">
+              <el-button-group v-if="item.refund_status == '申请中'">
                 <el-button type="danger" icon="iconfont icon-zhengque">
                   <font class="m-l-5">同意退款</font>
                 </el-button>
@@ -56,9 +56,10 @@
                   <font class="m-l-5">拒绝退款</font>
                 </el-button>
               </el-button-group>
-              <el-button-group v-else-if="item.back == 'normal' && item.status == 'pending'">
+              <el-button-group v-else-if="item.refund_status == '未申请' && item.shipment_status == '未接单'">
-                <el-button @click="questAss(item.id, 'status', 'processing')" type="primary" icon="iconfont icon-chengjie">
+                <el-button @click="questAss(item.id, 'status', 'processing')" type="primary"
-                  <font class="m-l-5">确认备货</font>
+                  icon="iconfont icon-chengjie">
+                  <font class="m-l-5">确认接单</font>
                 </el-button>
                 <el-button type="danger" icon="iconfont icon-cuowu">
                   <font class="m-l-5">取消订单</font>
@@ -67,7 +68,7 @@
                   <font class="m-l-5" @click="orderPrint(index)">打印小票</font>
                 </el-button>
               </el-button-group>
-              <el-button-group v-else-if="item.back == 'normal' && item.status == 'processing'">
+              <el-button-group v-else-if="item.refund_status == '未申请' && item.shipment_status == '已接单'">
                 <el-button type="danger" icon="iconfont icon-cuowu">
                   <font class="m-l-5">取消订单</font>
                 </el-button>
@@ -75,6 +76,15 @@
                   <font class="m-l-5" @click="orderPrint(index)">打印小票</font>
                 </el-button>
               </el-button-group>
+              <el-button-group v-else-if="item.refund_status == '未申请' && item.shipment_status == '已发货'">
+                <el-button @click="questAss(item.id, 'status', 'processing')" type="primary"
+                  icon="iconfont icon-chengjie">
+                  <font class="m-l-5">未能送达</font>
+                </el-button>
+                <el-button type="danger" icon="iconfont icon-cuowu">
+                  <font class="m-l-5">安全送达</font>
+                </el-button>
+              </el-button-group>
             </el-descriptions-item>
           </el-descriptions>
         </el-collapse-item>
@@ -98,48 +108,13 @@ export default {
     }
   },
   props: {
-    fil: Number,
+    list: Array
-    shop_id: String
   },
   computed: {
-    /**
-     * @description: 获取订单列表
-     */
-    orderList () {
-      return this.$store.state.orderList
-    },
-    /**
- * @description: 获取订单列表
- */
-    orderListArr () {
-      let list = this.orderList // 初始化list变量为this.orderList数组
-      if (list.length > 0) {
-        if (this.fil === 2) { // 过滤“申请退款”的订单
-          list = list.filter(item => item.shop_id === this.shop_id && item.back === 'requested')
-        } else if (this.fil === 0) { // 过滤“待处理”的订单
-          list = list.filter(item => item.shop_id === this.shop_id && item.back === 'normal' && item.status === 'pending')
-        } else if (this.fil === 1) { // 过滤“备货中”的订单
-          list = list.filter(item => item.shop_id === this.shop_id && item.back === 'normal' && item.status === 'processing')
-        }
-        return list
-      }
-      return []
-    }
   },
   methods: {
     questAss, // 修改订单
     parseTime, // 时间戳格式化
-    orderState (back, status) {
-      if (back === 'requested') {
-        return '申请退款'
-      } else {
-        if (status === 'pending') {
-          return '处理中'
-        } else {
-          return '备货中'
-        }
-      }
-    },
     /**
      * @description: 通过蓝牙打印机并打印小票
      * @param {number} index 订单列表下标索引

src/utils/api/table.js

@@ -21,21 +21,8 @@ export async function apiCrosFrequency (params) {
 /**
  * @description: 向改变订单承接任务api 提交数据  () ，并更新订单列表
  * @param {*} id 订单id
- * @param {*} state "status"修改status字段 "back"修改back字段
+ * @param {*} state 主状态"main_status" 货物状态"shipment_status" 退款状态"refund_status"
- * @param {*} val 修改字段的值 status包括
+ * @param {*} val 修改字段的值
- *                                      canceled:交易取消
- *                                      unpaid:未付款
- *                                      pending:处理中(已付款)
- *                                      processing:备货中
- *                                      shipped:已发货
- *                                      completed:已完成
- *                                      closed:交易关闭
- *                             back包括
- *                                      normal:未申请
- *                                      requested:申请退款
- *                                      refunded:已经退款
- *                                      rejected:拒绝退款
- *                                      actively:商家主动取消订单并退款
  */
 export function questAss (id, state, val) {
   const data = new URLSearchParams()// post对象参数 转成 字符串连接

src/views/layout/components/headbar.vue

@@ -13,7 +13,7 @@
           <img v-if="avatar.indexOf('.jpg') !== -1 || avatar.indexOf('.gif') !== -1 || avatar.indexOf('.png') !== -1"
             :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar">
           <el-avatar v-else size="medium" icon="el-icon-user-solid"></el-avatar>
-          <i class="el-icon-caret-bottom" />
+          <i class="el-icon-caret-bottom"></i>
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <el-dropdown-item divided @click.native="logout">
@@ -27,10 +27,10 @@
       <el-button size="small" icon="iconfont icon-shuaxin" @click="refreshPage" circle></el-button>
     </div>
     <!-- 订单信息按钮 -->
-    <el-badge :hidden="pendingCount + processingCount + requestedCount == 0 ? true : false"
+    <el-badge :hidden="pendingCount + processingCount + shippedCount + requestedCount == 0 ? true : false"
-      :value="pendingCount + processingCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r">
+      :value="pendingCount + processingCount + shippedCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r">
-      <el-button :type="pendingCount + processingCount + requestedCount !== 0 ? 'primary' : ''" @click="drawer = true"
+      <el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0 ? 'primary' : ''"
-        size="small" :icon="orderIcon" circle></el-button>
+        @click="drawer = true" size="small" :icon="orderIcon" circle></el-button>
     </el-badge>
     <el-drawer :visible.sync="drawer" size="40%" :append-to-body="true" :modal-append-to-body="false">
       <template slot="title">
@@ -47,27 +47,35 @@
       <el-tabs type="card">
         <el-tab-pane>
           <template slot="label">
-            <span>已付款</span>
+            <span>未接单</span>
             <el-badge :hidden="pendingCount == 0 ? true : false" :value="pendingCount">
             </el-badge>
           </template>
-          <QuestTabs :fil='0' :shop_id="shop_id" />
+          <QuestTabs :list="pendingList" />
         </el-tab-pane>
         <el-tab-pane>
           <template slot="label">
-            <span>备货中</span>
+            <span>已接单</span>
             <el-badge :hidden="processingCount == 0 ? true : false" :value="processingCount">
             </el-badge>
           </template>
-          <QuestTabs :fil='1' :shop_id="shop_id" />
+          <QuestTabs :list="processingList" />
         </el-tab-pane>
         <el-tab-pane>
           <template slot="label">
-            <span>申请退款</span>
+            <span>已发货</span>
+            <el-badge :hidden="shippedCount == 0 ? true : false" :value="shippedCount">
+            </el-badge>
+          </template>
+          <QuestTabs :list="shippedList" />
+        </el-tab-pane>
+        <el-tab-pane>
+          <template slot="label">
+            <span>退款申请中</span>
             <el-badge :hidden="requestedCount == 0 ? true : false" :value="requestedCount">
             </el-badge>
           </template>
-          <QuestTabs :fil='2' :shop_id="shop_id" />
+          <QuestTabs :list="requestedList" />
         </el-tab-pane>
       </el-tabs>
     </el-drawer>
@@ -91,10 +99,7 @@ export default {
   name: 'Headbar',
   data () {
     return {
-      shop_id: '', // 商铺id 过滤条件
+      shop_id: this.$store.state.user.shop_id, // 商铺id(默认为本店) 过滤条件
-      pendingCount: null, // 处理中 订单总数
-      processingCount: null, // 备货中 订单总数
-      requestedCount: null, // 申请退款 订单总数
       drawer: false,
       getQuestInterval: null, // 用于销毁时间轴
       animationTrumpet: true // 喇叭动画
@@ -128,14 +133,62 @@ export default {
      * @description: 获取订单列表
      */
     orderList () {
-      return this.$store.state.orderList
+      return this.$store.state.orderList.filter(item => item.shop_id === this.shop_id)
+    },
+    /**
+     * @description: 过滤 未接单 并且没有申请退款的 订单
+     */
+    pendingList () {
+      return this.orderList.filter(item => item.main_status === '已付款' && item.shipment_status === '未接单' && item.refund_status !== '申请中')
+    },
+    /**
+     * @description: 未接单 总数
+     */
+    pendingCount () {
+      return this.pendingList.length
+    },
+    /**
+     * @description: 过滤 已接单 并且没有申请退款的 订单
+     */
+    processingList () {
+      return this.orderList.filter(item => item.main_status === '已付款' && item.shipment_status === '已接单' && item.refund_status !== '申请中')
+    },
+    /**
+     * @description: 已接单 总数
+     */
+    processingCount () {
+      return this.processingList.length
+    },
+    /**
+     * @description: 过滤 已发货 并且没有申请退款的 订单
+     */
+    shippedList () {
+      return this.orderList.filter(item => item.main_status === '已付款' && item.shipment_status === '已发货' && item.refund_status !== '申请中')
+    },
+    /**
+     * @description: 已发货 总数
+     */
+    shippedCount () {
+      return this.shippedList.length
+    },
+    /**
+     * @description: 过滤 退款申请中 订单
+     */
+    requestedList () {
+      return this.orderList.filter(item => item.refund_status === '申请中')
+    },
+    /**
+     * @description: 退款申请中 总数
+     */
+    requestedCount () {
+      return this.requestedList.length
     },
     /**
      * @description: 面包条 订单图标动画
      * @return {*} 图标样式
      */
     orderIcon () {
-      if (this.pendingCount + this.processingCount + this.requestedCount === 0) {
+      if (this.pendingCount + this.processingCount + this.shippedCount + this.requestedCount === 0) {
         return 'iconfont icon-meiyoudingdan-01'
       } else {
         if (this.animationTrumpet) {
@@ -156,27 +209,9 @@ export default {
     },
     /**
      * @description: 计算订单数量 订单变化播放声音 显示在图标右上角小红圈内
-     * @param {*} list 要处理的订单列表
      */
-    computeQuestList (list) {
+    computeQuestList () {
-      if (this.getQuestInterval !== null) {
+
-        clearInterval(this.getQuestInterval)
-      }
-      const pending = list.filter(item => item.status === 'pending' && item.back === 'normal')// 过滤处理中 订单
-      const processing = list.filter(item => item.status === 'processing' && item.back === 'normal')// 过滤 备货中订单
-      const requested = list.filter(item => item.back === 'requested')// 过滤退款订单
-      if (this.pendingCount < pending.length && this.pendingCount != null) { // 有新的数据 播放提示声音
-        this.speakText('有新的付款订单')
-      }
-      if (this.requestedCount < requested.length && this.requestedCount != null) { // 有新的数据 播放提示声音
-        this.speakText('有申请退款订单')
-      }
-      this.pendingCount = pending.length// 处理中 订单总数
-      this.processingCount = processing.length// 备货中 订单总数
-      this.requestedCount = requested.length// 申请退款 订单总数
-      this.getQuestInterval = setInterval(() => {
-        this.animationTrumpet = !this.animationTrumpet// 面包条订单图标跳动
-      }, 500)
     },
     /**
      * @description: 刷新当前页面
@@ -195,9 +230,34 @@ export default {
     }
   },
   watch: {
-    orderList (val) {
+    orderList: {
-      this.computeQuestList(val)
+      handler (newVal, oldVal) {
+        // 面包条订单图标跳动
+        if (this.getQuestInterval !== null) {
+          clearInterval(this.getQuestInterval)
+        }
+        if (newVal.length > 0) { // 订单更新时 订单数大于0 面包条订单图标跳动
+          this.getQuestInterval = setInterval(() => {
+            this.animationTrumpet = !this.animationTrumpet // 面包条订单图标跳动
+          }, 500)
+        }
+        // 播报新的订单
+        if (newVal.length > oldVal.length) {
+          this.speakText('有新的订单')
+        }
+      },
+      deep: true
+    },
+    requestedCount: {
+      handler (newVal, oldVal) {
+        // 播报退款订单
+        if (newVal.length > oldVal.length) {
+          this.speakText('有订单申请退款')
+        }
+      }
     }
+  },
+  created () {
   }
 }
 </script>

src/views/layout/components/main/site/index.vue

@@ -22,8 +22,7 @@
       </el-table-column>
       <el-table-column label="菊花码缩率图" width="120" min-width="150">
         <template slot-scope="scope">
-          <el-image :src="scope.row.qr"
+          <el-image :src="scope.row.qr" :preview-src-list="[scope.row.qr]">
-            :preview-src-list="[scope.row.qr]">
           </el-image>
         </template>
       </el-table-column>
@@ -34,7 +33,7 @@
           <el-tag class="iconfont" :class="scope.row.bind_route !== null ? 'icon-feihangluxian' : 'icon-ic_tingyong'"
             :type="scope.row.bind_route !== null ? '' : 'danger'">
             <font class="m-l-5">{{ scope.row.bind_route !== null ? scope.row.bind_route :
-              "未绑定" }}</font>
+        "未绑定" }}</font>
           </el-tag>
         </template>
       </el-table-column>