fix: 帅气的工艺编辑页面

src/components/martixCraft/Edit/index.vue

@@ -12,7 +12,12 @@ import FtDialog from 'components/common/FTDialog/index.vue'
 import TrayGraph from 'components/spray/trayGraph/index.vue'
 import { FtMessage } from 'libs/message'
 import { cloneDeep } from 'lodash'
+import { Navigation, Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/vue'
 import { nextTick, onMounted, ref } from 'vue'
+import 'swiper/css'
+import 'swiper/css/pagination'
+import 'swiper/css/navigation'
 
 const props = defineProps({
   id: {
@@ -136,6 +141,24 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
     }
     form.value.times.splice(activeTab.value, 1)
   }
+  swiperInstance?.slideTo(activeTab.value)
+  // 异步任务调用
+  setTimeout(() => {
+    swiperInstance?.update()
+  }, 100)
+}
+
+const onSlideChange = (swiper: any) => {
+  activeTab.value = swiper.activeIndex
+}
+
+let swiperInstance: any = null
+const onSwiperInitialized = (swiper: any) => {
+  swiperInstance = swiper
+}
+
+const tabChangeHandle = () => {
+  swiperInstance?.slideTo(activeTab.value)
 }
 </script>
 
@@ -164,8 +187,17 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
           </el-form-item>
         </el-col>
       </el-row>
-      <el-tabs v-model="activeTab" editable type="card" @edit="handleTabsEdit">
-        <el-tab-pane v-for="(item, index) in form.times" :key="index" :label="`第${index + 1}次`" :name="index">
+      <el-tabs v-model="activeTab" editable type="card" @edit="handleTabsEdit" @tab-change="tabChangeHandle">
+        <el-tab-pane v-for="(item, index) in form.times" :key="index" :label="`第${index + 1}次`" :name="index" />
+      </el-tabs>
+      <Swiper
+        :modules="[Pagination, Navigation]"
+        :pagination="{ clickable: true }"
+        :navigation="true"
+        @swiper="onSwiperInitialized"
+        @slide-change="onSlideChange"
+      >
+        <SwiperSlide v-for="(item, index) in form.times" :key="index">
           <div class="tab-content">
             <TrayGraph ref="sprayRefs" :key="index" :container="`spray-${index + 1}`" select />
             <div class="content-form">
@@ -298,13 +330,28 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
               </el-form-item>
             </div>
           </div>
-        </el-tab-pane>
-      </el-tabs>
+        </SwiperSlide>
+      </Swiper>
     </el-form>
   </FtDialog>
 </template>
 
 <style scoped lang="scss">
+.tab-content-box {
+  width: 100%;
+  display: flex;
+  flex-direction: row; // 子元素水平排列（默认值）
+  align-items: flex-start; // 子元素顶部对齐
+  overflow-x: auto;
+  .tab-content-item {
+    width: 100%;
+  }
+}
+
+  :deep(.swiper-pagination-bullet) {
+    width: 20px;
+    height: 20px;
+  }
 .el-select {
   width: 70%;
   margin: 0 30px;
@@ -355,4 +402,22 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
   margin-top: 5px;
   font-size: 25px;
 }
+
+:deep(.el-tabs) {
+  .el-tabs__header {
+    .el-tabs__nav-wrap {
+      .el-tabs__nav-scroll {
+        .el-tabs__nav {
+          .el-tabs__item {
+            padding: 0 40px;
+          }
+          .el-tabs__item.is-active {
+            background: #2b6dea;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/views/log/index.vue

@@ -116,7 +116,7 @@ const viewParams = (row: any) => {
             <el-tag v-if="scope.row.status === 2" type="warning">
               手动暂停
             </el-tag>
-            <el-tag v-if="scope.row.status === 3" type="warning">
+            <el-tag v-if="scope.row.status === 3" type="danger">
               手动停止
             </el-tag>
           </template>
@@ -208,4 +208,7 @@ const viewParams = (row: any) => {
 .table-box {
   height: calc(100% - 100px - 120px);
 }
+:deep(.el-tag) {
+
+}
 </style>