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

src/views/distribution/deliverylist/distributionDeliveryListdis.vue

@@ -99,56 +99,147 @@
         </ul>
       </div>
 
-      <el-row>
-        <div class="avue-crud__header">
-          <!-- 头部左侧按钮模块 -->
-          <div class="avue-crud__left" style="margin-top: 20px">
-            <!--            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添 加 配 送</el-button>-->
-            <!--            <el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain>删 除</el-button>-->
-            <!--                        <el-button type="primary" icon="el-icon-delete" @click="handleDelete" plain>新 增</el-button>-->
-            <el-button type="primary" @click="toDeliveryPlan">新增商配</el-button>
 
-            <el-button type="primary" @click="printBatchOrder">批量打印</el-button>
+      <el-row >
-            <el-button type="danger" icon="el-icon-download" @click="handleExportInfo" plain
+        <el-tabs v-model="activeName" @tab-click="handleClick">
-              >导出
+            <div class="avue-crud__header">
-            </el-button>
+              <!-- 头部左侧按钮模块 -->
-          </div>
+              <div class="avue-crud__left" style="margin-top: 20px">
-          <!-- 头部右侧按钮模块 -->
+                <!--            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添 加 配 送</el-button>-->
-          <div class="avue-crud__right">
+                <!--            <el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain>删 除</el-button>-->
-            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+                <!--                        <el-button type="primary" icon="el-icon-delete" @click="handleDelete" plain>新 增</el-button>-->
-            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+                <el-button type="primary" @click="toDeliveryPlan">新增商配</el-button>
-            <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
+
-          </div>
+                <el-button type="primary" @click="printBatchOrder">批量打印</el-button>
-        </div>
+                <el-button type="danger" icon="el-icon-download" @click="handleExportInfo" plain
-      </el-row>
+                >导出
-      <el-row>
+                </el-button>
-        <!-- 列表模块 -->
+              </div>
-        <tablecmt
+              <!-- 头部右侧按钮模块 -->
-          :columnList="columnList"
+              <div class="avue-crud__right">
-          :tableData="data"
+                <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
-          :loading="loading"
+                <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
-          @inputTxt="inputsc"
+                <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
-          @timeCheck="timesc"
+              </div>
-          @btnCheck="btnsc"
+            </div>
-          @selectCheck="selectsc"
+          <el-tab-pane label="全部列表" name="first">
-          @selection="selectionsc"
+            <tablecmt
-        >
+                    :columnList="columnList"
-          <template #default="slotProps">
+                    :tableData="data"
-            <el-text size="small" @click="printOrder(slotProps.scope.row)">打 印</el-text>
+                    :loading="loading"
-            <el-text size="small" @click="editsolt(slotProps.scope)">查 看</el-text>
+                    @inputTxt="inputsc"
-            <el-text size="small" @click="editmap(slotProps.scope)">地 图</el-text>
+                    @timeCheck="timesc"
-            <el-text
+                    @btnCheck="btnsc"
-              size="small"
+                    @selectCheck="selectsc"
-              v-if="
+                    @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="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)"
+                        @click="handleEdit(slotProps.scope)"
-              >编 辑</el-text
+                >编 辑</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"
             >
-            <!--            <el-button size="small" @click="costadd(slotProps.scope)">费 用 增 项</el-button>-->
+              <template #default="slotProps">
-          </template>
+                <el-text size="small" @click="printOrder(slotProps.scope.row)">打 印</el-text>
-        </tablecmt>
+                <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>