【类型】：refactor

【主题】：修改面包条订单管理【描述】： [原因]：数据库表结构改变还有优化面包条订单相关组件 [过程]： [影响]：【结束】 # 类型包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style：格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
2024-06-21 19:09:05 +08:00 · 2024-06-21 19:09:05 +08:00 · 266e85ee1e
commit 266e85ee1e
parent 6ec284c9d3
4 changed files with 124 additions and 103 deletions
--- a/src/components/QuestTabs.vue
+++ b/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">
-        <el-collapse-item class="mainFontColor" v-for="(item, index) in orderListArr" :key="index" :name="item.id">
+      <template v-if="list.length != 0">
+        <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">
-              {{ item.back == 'requested' ? (item.back_remark || '无') : (item.remark || '无') }}
+            <el-descriptions-item :label="item.refund_status == '未申请' ? '客户备注' : '退货缘由'" span="3">
+              {{ 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 @click="questAss(item.id, 'status', 'processing')" type="primary" icon="iconfont icon-chengjie">
-                  <font class="m-l-5">确认备货</font>
+              <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>
@ -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,
-    shop_id: String
+    list: Array
  },
  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 订单列表下标索引
--- a/src/utils/api/table.js
+++ b/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 {*} val 修改字段的值 status包括
- *                                      canceled:交易取消
- *                                      unpaid:未付款
- *                                      pending:处理中(已付款)
- *                                      processing:备货中
- *                                      shipped:已发货
- *                                      completed:已完成
- *                                      closed:交易关闭
- *                             back包括
- *                                      normal:未申请
- *                                      requested:申请退款
- *                                      refunded:已经退款
- *                                      rejected:拒绝退款
- *                                      actively:商家主动取消订单并退款
+ * @param {*} state 主状态"main_status" 货物状态"shipment_status" 退款状态"refund_status"
+ * @param {*} val 修改字段的值
 */
 export function questAss (id, state, val) {
  const data = new URLSearchParams()// post对象参数 转成 字符串连接
--- a/src/views/layout/components/headbar.vue
+++ b/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"
-      :value="pendingCount + processingCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r">
-      <el-button :type="pendingCount + processingCount + requestedCount !== 0 ? 'primary' : ''" @click="drawer = true"
-        size="small" :icon="orderIcon" circle></el-button>
+    <el-badge :hidden="pendingCount + processingCount + shippedCount + requestedCount == 0 ? true : false"
+      :value="pendingCount + processingCount + shippedCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r">
+      <el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0 ? 'primary' : ''"
+        @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 过滤条件
-      pendingCount: null, // 处理中 订单总数
-      processingCount: null, // 备货中 订单总数
-      requestedCount: null, // 申请退款 订单总数
+      shop_id: this.$store.state.user.shop_id, // 商铺id(默认为本店) 过滤条件
      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) {
-      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)
+    computeQuestList () {
+
    },
    /**
     * @description: 刷新当前页面
@ -195,9 +230,34 @@ export default {
    }
  },
  watch: {
-    orderList (val) {
-      this.computeQuestList(val)
+    orderList: {
+      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>
--- a/src/views/layout/components/main/site/index.vue
+++ b/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"
-            :preview-src-list="[scope.row.qr]">
+          <el-image :src="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>