订单管理分类商城和商圈

src/views/order/pending/index.vue

@@ -1,14 +1,22 @@
 <!--  -->
 <template>
   <div class="pending">
+    <div class="tabbar">
+      <el-radio-group v-model="tabPosition" style="margin: 30px 50px;">
+        <el-radio-button label="shopping">商城</el-radio-button>
+        <el-radio-button label="business">商圈</el-radio-button>
+      </el-radio-group>
+    </div>
     <div class="tab_show">
       <el-tabs v-model="formInline.state" @tab-click="handleClick">
-        <el-tab-pane label="全部" :name="''" />
-        <el-tab-pane label="待付款" name="1" />
-        <el-tab-pane label="待发货" name="2" />
-        <el-tab-pane label="已发货" name="3" />
-        <el-tab-pane label="已完成" name="4" />
-        <el-tab-pane label="已关闭" name="5" />
+        <el-tab-pane :label="stateText[index]" :name="item == ''?'0':item" v-for="(item, index) in stateList" :key="item"></el-tab-pane>
+        <!-- <template v-else-if="tabPosition == 'business'">
+          <el-tab-pane label="全部" :name="''" />
+          <el-tab-pane label="已取消" name="5" />
+          <el-tab-pane label="待核销" name="8" />
+          <el-tab-pane label="待核销已付款" name="9" />
+          <el-tab-pane label="已核销" name="10" />
+        </template> -->
       </el-tabs>
       <!-- 搜索 -->
       <div class="formSearch">
@@ -119,6 +127,11 @@ export default {
     // 这里存放数据
     return {
       activeName: 'first',
+      active: "first",
+      tabPosition: 'shopping',
+      //  存储状态
+      stateText: ["全部", "待付款", "待发货", "已发货", "已完成", "已关闭"],
+      stateList: ['', '1', '2', '3', '4', '5'],
       formInline: {
         searchType: '1',
         search: '', // 搜索字段
@@ -128,7 +141,8 @@ export default {
         page: 1,
         shopName: '',
         pageSize: 10,
-        templateType: 1
+        templateType: 1,
+        orderType: 1
       },
       total: 1,
       tableData: [],
@@ -146,6 +160,21 @@ export default {
     this.getAll(this.formInline)
     this.handleClick({ name: '' })
   },
+  watch: {
+    tabPosition(newVal, oldVal) {
+      if (newVal == "shopping") {
+        this.stateText = ["全部", "待付款", "待发货", "已发货", "已完成", "已关闭"]
+        this.stateList = ['', '1', '2', '3', '4', '5'];
+        this.formInline.orderType = 1
+      } else if (newVal == "business") {
+        this.stateText = ["全部", "已取消", "待核销", "待核销已付款", "已核销"]
+        this.stateList = ['', '5', '8', '9', '10']
+        this.formInline.orderType = 2
+      }
+      this.getAll(this.formInline)
+      this.handleClick({ name: '' })
+    },
+  },
   // 方法集合
   methods: {
     handleSizeChange(val) {
@@ -183,7 +212,10 @@ export default {
     // 初始化查询所有数据
     async getAll(formInline) {
       this.tableLoading = true
-      const res = await orderGetAll(formInline)
+      let obj = JSON.parse(JSON.stringify(formInline))
+      console.log(obj);
+      if(obj.state == '0') obj.state = ''
+      const res = await orderGetAll(obj)
       this.tableData = res.data.list
       this.total = res.data.total
       this.tableLoading = false
@@ -229,7 +261,7 @@ export default {
           type: 'success'
         })
         this.selectOrderIds = []
-      this.$refs.multipleTable.clearSelection()
+        this.$refs.multipleTable.clearSelection()
       } catch (error) {
         this.$message({
           message: '导出失败',