refactor: UI

core/core-frontend/src/views/template-market/component/CategoryTemplateV2.vue

@@ -3,13 +3,11 @@
     <div class="custom-split-line"></div>
     <span v-show="!searchText" class="custom-category">{{ label }}</span>
     <span v-show="searchText" class="custom-search">{{ label }}</span>
-    <span v-if="searchText" class="custom-search-result"
-      >的搜索结果是{{ fullTemplateShowList.length }}个</span
-    >
+    <span v-if="searchText" class="custom-search-result">的搜索结果是{{ searchResult }}个</span>
   </el-col>
   <el-col
     v-for="(templateItem, index) in fullTemplateShowList"
-    v-show="templateItem.showFlag"
+    v-show="showFlagCheck(templateItem)"
     :key="templateItem.id + label"
     style="float: left; padding: 24px 12px 0; text-align: center; flex: 0"
     :style="{ width: templateSpan }"
@@ -28,6 +26,7 @@
 
 <script setup lang="ts">
 import TemplateMarketV2Item from '@/views/template-market/component/TemplateMarketV2Item.vue'
+import { computed } from 'vue'
 const emits = defineEmits(['templateApply', 'templatePreview'])
 
 const templateApply = params => {
@@ -38,6 +37,17 @@ const templatePreview = params => {
   emits('templatePreview', params)
 }
 
+const searchResult = computed(
+  () => props.fullTemplateShowList.filter(item => showFlagCheck(item)).length
+)
+
+const showFlagCheck = template => {
+  if (!template.categoryNames) {
+    console.log('===templateTest' + JSON.stringify(template))
+  }
+  return template.showFlag && template.categoryNames?.includes(props.label)
+}
+
 const props = defineProps({
   searchText: {
     type: String

core/core-frontend/src/views/template-market/index.vue

@@ -102,7 +102,7 @@
           id="template-show-area"
           class="template-right"
         >
-          <el-row style="display: inline" v-show="state.marketActiveTab !== '推荐'">
+          <el-row v-show="state.marketActiveTab !== '推荐'">
             <category-template-v2
               :search-text="state.searchText"
               :label="state.marketActiveTab"
@@ -115,16 +115,17 @@
               @templatePreview="templatePreview"
             ></category-template-v2>
           </el-row>
-          <el-row style="display: inline" v-if="state.marketActiveTab === '推荐'">
+          <el-row v-show="state.marketActiveTab === '推荐'">
             <el-row
-              style="display: inline; margin-bottom: 16px"
+              style="display: inline; width: 100%; margin-bottom: 16px"
               v-for="(categoryItem, index) in categoriesComputed"
               :key="index"
             >
               <category-template-v2
+                v-if="categoryItem.label !== '最近使用'"
                 :search-text="state.searchText"
                 :label="categoryItem.label"
-                :full-template-show-list="fullTemplateShowList(categoryItem.label)"
+                :full-template-show-list="state.currentMarketTemplateShowList"
                 :template-span="state.templateSpan"
                 :base-url="state.baseUrl"
                 :template-cur-width="state.templateCurWidth"
@@ -422,10 +423,10 @@ const apply = () => {
 const handleClick = item => {
   // do handleClick
 }
-const initTemplateShow = (activeTab = state.marketActiveTab) => {
+const initTemplateShow = () => {
   let tempHasResult = false
   state.currentMarketTemplateShowList.forEach(template => {
-    template.showFlag = templateShow(template, activeTab)
+    template.showFlag = templateShow(template)
     if (template.showFlag) {
       tempHasResult = true
     }
@@ -435,36 +436,10 @@ const initTemplateShow = (activeTab = state.marketActiveTab) => {
   }
 }
 
-const fullTemplateShowList = curTab => {
-  state.currentMarketTemplateShowList.forEach(template => {
-    template.showFlag = templateShow(template, curTab)
-  })
-  const result = deepCopy(state.currentMarketTemplateShowList.filter(ele => ele.showFlag))
-  console.log('curTab=' + curTab + '&fullTemplateShowList=' + JSON.stringify(result))
-  return result
-}
-
-const templateShow = (templateItem, activeTab) => {
-  let categoryMarch = false
+const templateShow = templateItem => {
   let searchMarch = false
   let templateTypeMarch = false
   let templateSourceTypeMarch = false
-  if (activeTab === '最近使用') {
-    if (templateItem.recentUseTime) {
-      categoryMarch = true
-    }
-  } else if (activeTab === '推荐') {
-    if (templateItem.suggest === 'Y') {
-      categoryMarch = true
-    }
-  } else {
-    templateItem.categories.forEach(category => {
-      if (category.name === activeTab) {
-        categoryMarch = true
-      }
-    })
-  }
-
   if (!state.searchText || templateItem.title.indexOf(state.searchText) > -1) {
     searchMarch = true
   }
@@ -476,7 +451,7 @@ const templateShow = (templateItem, activeTab) => {
   if (state.templateSourceType === 'all' || templateItem.source === state.templateSourceType) {
     templateSourceTypeMarch = true
   }
-  return categoryMarch && searchMarch && templateTypeMarch && templateSourceTypeMarch
+  return searchMarch && templateTypeMarch && templateSourceTypeMarch
 }
 
 const templatePreview = previewId => {

sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateMarketDTO.java

@@ -4,6 +4,8 @@ import io.dataease.api.template.vo.MarketCategoryVO;
 import io.dataease.api.template.vo.MarketMetasVO;
 import lombok.Data;
 import lombok.NoArgsConstructor;
+
+import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.List;
 
@@ -30,6 +32,8 @@ public class TemplateMarketDTO implements Comparable<TemplateMarketDTO> {
     private String source = "market";
     private List<MarketCategoryVO> categories;
 
+    private List<String> categoryNames;
+
     private String mainCategory;
     private MarketMetasVO metas;
 
@@ -38,7 +42,8 @@ public class TemplateMarketDTO implements Comparable<TemplateMarketDTO> {
         this.id = manageDTO.getId();
         this.title = manageDTO.getName();
         this.mainCategory = manageDTO.getCategoryName();
-        this.categories = Arrays.asList(new MarketCategoryVO(manageDTO.getCategoryName()), new MarketCategoryVO("全部"));
+        this.categories = Arrays.asList(new MarketCategoryVO(manageDTO.getCategoryName()));
+        this.categoryNames = Arrays.asList(manageDTO.getCategoryName());
         this.metas = new MarketMetasVO(manageDTO.getSnapshot());
         this.templateType = "dataV".equalsIgnoreCase("manageDTO.getTemplateType()") ? "SCREEN" : "PANEL";
         this.thumbnail = manageDTO.getSnapshot();
@@ -51,15 +56,20 @@ public class TemplateMarketDTO implements Comparable<TemplateMarketDTO> {
     public TemplateMarketDTO(String id, String title, String themeRepo, String templateUrl, String categoryName, String templateType, Long recentUseTime, String suggest) {
         this.id = id;
         this.title = title;
-        this.categories = Arrays.asList(new MarketCategoryVO(categoryName), new MarketCategoryVO("全部"));
         this.metas = new MarketMetasVO(templateUrl);
         this.thumbnail = themeRepo;
         this.templateType = templateType;
+        this.categories = new ArrayList<>(Arrays.asList(new MarketCategoryVO(categoryName))) ;
+        this.categoryNames = new ArrayList<>(Arrays.asList(categoryName)) ;
         if (recentUseTime != null) {
             this.recentUseTime = recentUseTime;
+            this.categories.add(new MarketCategoryVO("最近使用"));
+            this.categoryNames.add("最近使用");
         }
         if ("Y".equalsIgnoreCase(suggest)) {
             this.suggest = "Y";
+            this.categories.add(new MarketCategoryVO("推荐"));
+            this.categoryNames.add("推荐");
         }
     }