商配备货任务增加配送状态tabs

src/views/distribution/deliverylist/distributionDeliveryListdis.vue

@@ -99,7 +99,9 @@
         </ul>
       </div>
 
+
       <el-row >
+        <el-tabs v-model="activeName" @tab-click="handleClick">
             <div class="avue-crud__header">
               <!-- 头部左侧按钮模块 -->
               <div class="avue-crud__left" style="margin-top: 20px">
@@ -120,9 +122,7 @@
                 <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
               </div>
             </div>
-      </el-row>
-      <el-row>
-        <!-- 列表模块 -->
+          <el-tab-pane label="全部列表" name="first">
             <tablecmt
                     :columnList="columnList"
                     :tableData="data"
@@ -149,6 +149,97 @@
                 <!--            <el-button size="small" @click="costadd(slotProps.scope)">费 用 增 项</el-button>-->
               </template>
             </tablecmt>
+          </el-tab-pane>
+          <el-tab-pane label="待配送" name="second">
+            <tablecmt
+                    :columnList="columnList"
+                    :tableData="data"
+                    :loading="loading"
+                    @inputTxt="inputsc"
+                    @timeCheck="timesc"
+                    @btnCheck="btnsc"
+                    @selectCheck="selectsc"
+                    @selection="selectionsc"
+            >
+              <template #default="slotProps">
+                <el-text size="small" @click="printOrder(slotProps.scope.row)">打 印</el-text>
+                <el-text size="small" @click="editsolt(slotProps.scope)">查 看</el-text>
+                <el-text size="small" @click="editmap(slotProps.scope)">地 图</el-text>
+                <el-text
+                        size="small"
+                        v-if="
+                slotProps.scope.row.deliveryStatusName !== '已完成' ||
+                slotProps.scope.row.deliveryStatus !== '3'
+              "
+                        @click="handleEdit(slotProps.scope)"
+                >编 辑</el-text
+                >
+                <!--            <el-button size="small" @click="costadd(slotProps.scope)">费 用 增 项</el-button>-->
+              </template>
+            </tablecmt>
+          </el-tab-pane>
+          <el-tab-pane label="配送中" name="third">
+            <tablecmt
+                    :columnList="columnList"
+                    :tableData="data"
+                    :loading="loading"
+                    @inputTxt="inputsc"
+                    @timeCheck="timesc"
+                    @btnCheck="btnsc"
+                    @selectCheck="selectsc"
+                    @selection="selectionsc"
+            >
+              <template #default="slotProps">
+                <el-text size="small" @click="printOrder(slotProps.scope.row)">打 印</el-text>
+                <el-text size="small" @click="editsolt(slotProps.scope)">查 看</el-text>
+                <el-text size="small" @click="editmap(slotProps.scope)">地 图</el-text>
+                <el-text
+                        size="small"
+                        v-if="
+                slotProps.scope.row.deliveryStatusName !== '已完成' ||
+                slotProps.scope.row.deliveryStatus !== '3'
+              "
+                        @click="handleEdit(slotProps.scope)"
+                >编 辑</el-text
+                >
+                <!--            <el-button size="small" @click="costadd(slotProps.scope)">费 用 增 项</el-button>-->
+              </template>
+            </tablecmt>
+          </el-tab-pane>
+          <el-tab-pane label="已完成" name="fourth">
+            <tablecmt
+                    :columnList="columnList"
+                    :tableData="data"
+                    :loading="loading"
+                    @inputTxt="inputsc"
+                    @timeCheck="timesc"
+                    @btnCheck="btnsc"
+                    @selectCheck="selectsc"
+                    @selection="selectionsc"
+            >
+              <template #default="slotProps">
+                <el-text size="small" @click="printOrder(slotProps.scope.row)">打 印</el-text>
+                <el-text size="small" @click="editsolt(slotProps.scope)">查 看</el-text>
+                <el-text size="small" @click="editmap(slotProps.scope)">地 图</el-text>
+                <el-text
+                        size="small"
+                        v-if="
+                slotProps.scope.row.deliveryStatusName !== '已完成' ||
+                slotProps.scope.row.deliveryStatus !== '3'
+              "
+                        @click="handleEdit(slotProps.scope)"
+                >编 辑</el-text
+                >
+                <!--            <el-button size="small" @click="costadd(slotProps.scope)">费 用 增 项</el-button>-->
+              </template>
+            </tablecmt>
+          </el-tab-pane>
+        </el-tabs>
+
+
+
+        <!-- 列表模块 -->
+
         <!--        <el-table ref="table" v-loading="loading"-->
         <!--                  @selection-change="selectionChange"-->
         <!--                  :data="data"-->
@@ -375,6 +466,7 @@ export default {
       form: {},
       // 选择行
       selectionList: [],
+      activeName:'first',
       columnList: [
         {
           prop: 'serialNumber',
@@ -736,6 +828,33 @@ export default {
     },
   },
   methods: {
+    //tabs切换
+    handleClick(tab, event) {
+      console.log('tab------------------>', tab.props.name);
+      this.query = {};
+      switch (tab.props.name) {
+
+        case 'first':
+          break;
+        case 'second':
+          //待配送
+          this.query.deliveryStatus = '1';
+          break;
+        case 'third':
+          //配送中
+          this.query.deliveryStatus = '2';
+          break;
+        case 'fourth':
+          //已完成
+          this.query.deliveryStatus = '3';
+          break;
+      }
+      this.onLoad(this.page);
+
+      console.log('tab------------------>', tab);
+      console.log('event--------------->', event);
+    },
+
     /**
      * 导出
      * */
@@ -1243,6 +1362,10 @@ export default {
   :deep(.el-dialog) {
     width: fit-content;
   }
+  :deep(.el-row){
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
 }
 .order-info {
   ul {
@@ -1336,4 +1459,5 @@ export default {
   display: flex;
 align-items: flex-end;
 }
+
 </style>