fix: 帅气而又炫酷的喷涂参数设置页面

src/components/martixCraft/Edit/index.vue

@@ -348,10 +348,10 @@ const tabChangeHandle = () => {
   }
 }
 
-  :deep(.swiper-pagination-bullet) {
-    width: 20px;
-    height: 20px;
-  }
+:deep(.swiper-pagination-bullet) {
+  width: 20px;
+  height: 20px;
+}
 .el-select {
   width: 70%;
   margin: 0 30px;

src/components/spray/sprayParams/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({
   formData: {
@@ -159,6 +164,11 @@ const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' |
     }
     form.value.times.splice(activeTab.value, 1)
   }
+  swiperInstance?.slideTo(activeTab.value)
+  // 异步任务调用
+  setTimeout(() => {
+    swiperInstance?.update()
+  }, 100)
 }
 
 const matrixCraftChange = async (id: number) => {
@@ -172,6 +182,19 @@ const matrixCraftChange = async (id: number) => {
     loading.value = false
   })
 }
+
+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>
 
 <template>
@@ -186,7 +209,7 @@ const matrixCraftChange = async (id: number) => {
   >
     <el-form ref="formRef" :disabled label-width="120" :model="form">
       <el-row>
-        <el-col v-if="!disabled" :span="12">
+        <el-col :span="12">
           <el-form-item label="选择工艺" prop="name">
             <el-select v-model="form.id" placeholder="选择工艺" @change="matrixCraftChange">
               <el-option v-for="craft in matrixCraftList" :key="craft.id" :label="craft.name" :value="craft.id" />
@@ -201,8 +224,17 @@ const matrixCraftChange = async (id: number) => {
           </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="!disabled" 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" :edit-select="!disabled" :container="`spray-params-${index + 1}`" select />
             <div class="content-form">
@@ -335,8 +367,8 @@ const matrixCraftChange = async (id: number) => {
               </el-form-item>
             </div>
           </div>
-        </el-tab-pane>
-      </el-tabs>
+        </SwiperSlide>
+      </Swiper>
     </el-form>
     <template v-if="disabled" #footer>
       <ft-button @click="cancel">
@@ -408,4 +440,25 @@ const matrixCraftChange = async (id: number) => {
   margin-top: 5px;
   font-size: 25px;
 }
+:deep(.swiper-pagination-bullet) {
+  width: 20px;
+  height: 20px;
+}
+: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>