组件服务加tab

src/api/home.js

@@ -18,6 +18,13 @@ export function assemblyList (query) {
   })
 }
 
+export function assemblyType (query) {
+  return request({
+    url: '/api/v1/assemblyType',
+    method: 'get',
+    params: query
+  })
+}
 
 // 获取活动资讯列表数据
 export function informationList (query) {

src/views/componentServices/list.vue

 <template>
   <div class="app-container">
     <div style="margin: 0 auto;padding: 0 84px;'">
+      <el-tabs v-model="tabActive" @tab-change="tabChange">
+        <el-tab-pane
+            v-for="i in assemblyTypes"
+            :key="i.value"
+            :label="i.name"
+            :name="i.value">
+        </el-tab-pane>
+      </el-tabs>
+
       <el-row :gutter="24">
         <el-col v-for="(item,index) in assemblyData" :key="item.id" :span="6">
           <div class="item flex">
@@ -42,6 +51,7 @@
 <script setup name="ComponentServicesList">
 import {ref} from 'vue'
 import {assemblyList} from '@/api/home.js'
+import {assemblyType} from "../../api/home.js";
 
 const baseUrl = import.meta.env.VITE_APP_BASE_API
 const assemblyData = ref([])
@@ -50,14 +60,30 @@ const iframeShow = ref(false)
 const dialogTableVisible = ref(false)
 const dialogTitle = ref('')
 const indexNum = ref(0)
+const assemblyTypes = ref([])
+const tabActive = ref("0")
+
+
+onMounted(() => {
+  getAssemblyType()
+})
 
 function getAassemblyList() {
-  assemblyList().then(res => {
+  assemblyList({type: Number(tabActive.value)}).then(res => {
     assemblyData.value = res.data
   })
 }
 
-getAassemblyList()
+function getAssemblyType() {
+  assemblyType().then(res => {
+    assemblyTypes.value = res.data
+    getAassemblyList()
+  })
+}
+
+function tabChange() {
+  getAassemblyList()
+}
 
 function openPage(data, index) {
   indexNum.value = index
@@ -135,7 +161,31 @@ function handleDialogClose() {
   left: 0;
 }
 
-:deep(.el-dialog__body){
+:deep(.el-dialog__body) {
   padding-top: unset !important;
 }
+
+.el-tabs {
+  --el-border-color-light: #2E77E3;
+  --el-tabs-header-height: 48px;
+
+  :deep(.el-tabs__content) {
+    overflow: visible
+  }
+
+  :deep(.el-tabs__active-bar) {
+    display: none;
+  }
+
+  :deep(.el-tabs__item) {
+    --el-font-size-base: 16px;
+    padding-left: 24px !important;
+    padding-right: 24px !important;
+
+    &.is-active {
+      color: #ffffff;
+      background-color: #2E77E3;
+    }
+  }
+}
 </style>