change: indnet计价step3表单tab关联样式调整.

src/pages/indent-manage/indent/components/calcPrice/index.vue

@@ -99,7 +99,6 @@
                 >
                   <template #header>
                     <div
-                      class=""
                       @click.capture="
                         ($e) => captureSwitchChange($e, formItem, v - 1)
                       "
@@ -137,10 +136,7 @@
                       $&nbsp;{{ formItem.midway_price_0.toFixed(2) }}
                     </div>
                   </div>
-                  <div
-                    v-if="v === 2"
-                    class=""
-                  >
+                  <div v-if="v === 2">
                     <div>空+派</div>
                     <div class="price">
                       $&nbsp;{{ formItem.midway_price_1.toFixed(2) }}
@@ -163,10 +159,7 @@
                       $&nbsp;{{ formItem.midway_price_2.toFixed(2) }}
                     </div>
                   </div>
-                  <div
-                    v-if="v === 4"
-                    class=""
-                  >
+                  <div v-if="v === 4">
                     <div>DTD</div>
                     <div
                       v-if="formItem.freight_cost_3"
@@ -183,10 +176,7 @@
                       {{ $t('btn_edit') }}
                     </div>
                   </div>
-                  <div
-                    v-if="v === 5"
-                    class=""
-                  >
+                  <div v-if="v === 5">
                     <div>LCL散货</div>
 
                     <div
@@ -211,11 +201,27 @@
         </div>
 
         <div class="step step-3">
-          <el-tabs type="card">
-            <el-tab-pane
+          <div
+            class="mb-4 border border-x-0 border-t-0 border-solid border-gray-200"
+          >
+            <el-check-tag
+              v-for="(form, index) in step3FormList"
+              :checked="index === currentTab"
+              :key="index"
+              class="border border-solid border-gray-200 bg-white"
+              style="border-radius: 2px"
+              @click="currentTab = index"
+            >
+              {{ form.tabLabel }}
+            </el-check-tag>
+          </div>
+          <div
+            data-desc="这层div没用的,只是移除原本的el-tab之后用来减少代码改动量,不然里面的内容全部要减少一个缩进单位了"
+          >
+            <div
+              v-show="index === currentTab"
               v-for="(form, index) in step3FormList"
               :key="index"
-              :label="`${form.tabLabel}`"
             >
               <common-title
                 :title="$t(prefix + 'label_cost_list')"
@@ -450,8 +456,8 @@
                 </el-button>
                 <!-- <el-button @click="generate">test</el-button> -->
               </div>
-            </el-tab-pane>
-          </el-tabs>
+            </div>
+          </div>
         </div>
       </div>
       <setDTD
@@ -493,8 +499,7 @@ import {
   ElOption,
   ElSwitch,
   ElCard,
-  ElTabs,
-  ElTabPane,
+  ElCheckTag,
   ElTooltip,
 } from 'element-plus'
 import cloneDeep from 'lodash.clonedeep'
@@ -537,7 +542,7 @@ const setting = ref({} as any) // 运费设置数据
 const formList = ref([] as any[])
 // 用在step3界面上显示的表单
 const step3FormList = ref([] as any[])
-
+const currentTab = ref(0) // 当前显示的step3表单的tab索引
 // 提交的表单, 用来存真正提交的数据.
 const formData = ref({
   cal_city: {
@@ -1039,8 +1044,9 @@ let initForm = (switchStatus = [] as any[], useOldFormData = true) => {
 
 const onCityChange = (str: string) => {
   // 没保存计价之前, 切换城市会改变pdf_city. 保存之后, 再怎么切换也用保存的数据做默认数据, 除非手动更改pdf_city
-  exportForm.value.pdf_city = productInfo.value.save_cal.pdf_city || str ||cityList.value[0]
-} 
+  exportForm.value.pdf_city =
+    productInfo.value.save_cal.pdf_city || str || cityList.value[0]
+}
 
 let reGenerateFormAfterCityChange = () => {
   const temp: any[] = formList.value.map((i, index) => {

src/pages/indent-manage/indent/components/calcPrice/styles/index.scss

@@ -51,6 +51,7 @@
   }
   .step-3 {
     border-right: none;
+    padding-right: 0;
     :deep(.el-form) {
       width: 100%;
       position: relative;