优化工具箱分类筛选功能

pages/toolbox/index.vue

@@ -4,11 +4,22 @@
   <KlSearch @search="search"></KlSearch>
   <div v-loading="loading" class="ma-auto mt-[20px] w-[1440px] flex justify-center gap-[60px]">
     <div class="left w-[821px]">
-      <img src="~/assets/images/banner2.png" alt="" srcset="" class="h-[284px] w-[100%]" />
+      <!-- <img src="~/assets/images/banner2.png" alt="" srcset="" class="h-[284px] w-[100%]" /> -->
-      <div
+      <el-form ref="formRef" :model="pageReq" label-width="110px" size="large" inline>
-        class="box-border border border-t-[0px] border-t-[0px] border-[#EEEEEE] rounded-[12px] border-solid border-t-none bg-[#FFFFFF] px-[28px] py-[17px]"
+        <el-form-item label-width="110px" label="软件分类：" prop="categoryId" :rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }">
-        style="border-top-left-radius: 0px; border-top-right-radius: 0px"
+          <!-- <el-select v-model="form.categoryId" placeholder="请选择软件分类" class="w-[361px]!" multiple>
-      >
+          <el-option v-for="(item, index) in projectTypeList" :key="index" :label="item.name" :value="item.id" />
+        </el-select> -->
+          <el-cascader v-model="pageReq.categoryId" class="w-[280px]!" :options="projectTypeList" :props="cascaderProps" clearable collapse-tags @change="handleCurrentChange(1)" />
+        </el-form-item>
+        <el-form-item label-width="110px" label="分类：" prop="sourceType" :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }">
+          <el-radio-group v-model="pageReq.sourceType" @change="handleCurrentChange(1)">
+            <el-radio :label="0">原创开发</el-radio>
+            <el-radio :label="1">转载分享</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div class="box-border border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[28px] py-[17px]">
         <div v-for="item in pageRes?.list" :key="item.id" class="mt-[20px] flex border-b-[1px] border-b-[#eee] border-b-solid pb-[20px]">
           <div class="h-[142px] w-[200px] text-center">
             <el-image :src="item.iconUrl" alt="" srcset="" class="max-w-[100%] rd-[4px]" fit="cover" />
@@ -50,9 +61,9 @@
       </div>
     </div>
     <div class="right w-[398px]">
-      <div class="box-border border border-[#EEEEEE] rounded-[10px] border-solid bg-[#FFFFFF] pa-[20px]">
+      <div class="box-border border border-[#EEEEEE] rounded-[10px] border-solid bg-[#FFFFFF] pa-[16px]">
-        <div class="flex items-center text-[16px] text-[#333333] font-normal">
+        <div class="flex items-center text-[14px] text-[#333333] font-normal">
-          <div class="mr-[14px] h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
+          <div class="mr-[14px] h-[16px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
           热门排行
         </div>
         <div v-for="item in recommendList" :key="item.id" class="mt-[20px] text-[14px] text-[#666] font-normal">{{ item.title }}</div>
@@ -99,13 +110,18 @@
   import KlSearch from '~/pages/toolbox/components/search.vue'
   import { getRelationRecommend } from '~/api/drawe-detail/index'
   import type { ProjectDrawPageRespVO } from '~/api/drawe-detail/types'
+  import { parent } from '~/api/upnew/index'
   import emptyImg from '~/assets/images/empty.png'
   import dayjs from 'dayjs'
 
-  const pageReq = reactive<TpageReq>({
+  const cascaderProps = { multiple: false, label: 'name', value: 'id', emitPath: false }
+
+  const pageReq = reactive({
     pageNum: 1,
     pageSize: 10,
     title: '',
+    categoryId: undefined,
+    sourceType: 0,
   })
 
   // const pageRes = ref<TpageRes>({
@@ -177,4 +193,16 @@
   //   })
   // }
   // getRelationRecommendList()
+
+  const projectTypeList = ref<any>([])
+  /** 获取分类下拉框 */
+  const getParent = () => {
+    parent({
+      type: 3,
+      parentId: 0,
+    }).then((res) => {
+      projectTypeList.value = res.data
+    })
+  }
+  getParent()
 </script>