From 4dabd9b262b73f91c402409c26b79c76ef7f4717 Mon Sep 17 00:00:00 2001
From: v_xugzhou <941071842@qq.com>
Date: Tue, 31 Dec 2024 14:23:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=85=B1=E4=BA=AB=E5=88=B0=E5=95=86?=
 =?UTF-8?q?=E5=BA=97=E4=BE=A7=E6=A0=8F=E5=9C=BA=E6=99=AF=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E6=A1=86=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=20--story=3D121000017=20#=20Reviewed,=20transaction=20id:=2028?=
 =?UTF-8?q?175?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PeriodicList/ModifyPeriodicDialog.vue     |   8 +-
 .../SharedTemplate/SharedCategorySelect.vue   | 145 ++++++++++++++++++
 .../SharedTemplate/SharedTplSlider.vue        |  69 +--------
 3 files changed, 156 insertions(+), 66 deletions(-)
 create mode 100644 frontend/desktop/src/pages/template/TemplateList/SharedTemplate/SharedCategorySelect.vue

diff --git a/frontend/desktop/src/pages/task/PeriodicList/ModifyPeriodicDialog.vue b/frontend/desktop/src/pages/task/PeriodicList/ModifyPeriodicDialog.vue
index 1afa57db5..fbdbe7efd 100644
--- a/frontend/desktop/src/pages/task/PeriodicList/ModifyPeriodicDialog.vue
+++ b/frontend/desktop/src/pages/task/PeriodicList/ModifyPeriodicDialog.vue
@@ -477,7 +477,9 @@
                         pipeline_template__name__icontains: this.flowName || undefined,
                         common: this.isCommon
                     }
-                    const templateListData = await this.loadTemplateList(params)
+                    const templateListData = this.isCommon
+                        ? await this.loadCommonTemplateList(params)
+                        : await this.loadTemplateList(params)
                     if (add) {
                         this.templateList.push(...templateListData.results)
                     } else { // 搜索
@@ -540,9 +542,7 @@
                 try {
                     this.templateDataLoading = true
                     const params = { templateId: id, common: this.isCommon }
-                    const templateData = this.isCommon
-                        ? await this.loadCommonTemplateList(params)
-                        : await this.loadTemplateData(params)
+                    const templateData = await this.loadTemplateData(params)
                     // 获取流程模板的通知配置
                     const { notify_receivers, notify_type } = templateData
                     this.notifyType = [notify_type.success.slice(0), notify_type.fail.slice(0)]
diff --git a/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/SharedCategorySelect.vue b/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/SharedCategorySelect.vue
new file mode 100644
index 000000000..a2e13b0d9
--- /dev/null
+++ b/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/SharedCategorySelect.vue
@@ -0,0 +1,145 @@
+<template>
+    <bk-select
+        ref="categorySelect"
+        :disabled="formData.type === 'update'"
+        v-model="formData.category"
+        :loading="loading"
+        :show-empty="!categoryList.length"
+        searchable
+        :remote-method="onCategorySearch"
+        @toggle="handleSelectToggle">
+        <div
+            slot="trigger"
+            class="bk-select-name category-select"
+            :data-placeholder="categorySelectPath ? '' : $t('请选择场景分类')">
+            {{ categorySelectPath }}
+            <i class="bk-select-angle bk-icon icon-angle-down"></i>
+        </div>
+        <template v-if="searchVal">
+            <bk-option
+                v-for="option in searchList"
+                :key="option.id"
+                :id="option.id"
+                :name="option.name">
+            </bk-option>
+            <p v-if="!searchList.length" class="search-empty-info">{{ $t('搜索结果为空') }}</p>
+        </template>
+        <bk-big-tree
+            v-else
+            ref="categoryTree"
+            :data="categoryList"
+            selectable
+            :show-link-line="false"
+            :show-icon="false"
+            :options="{ idKey: 'code_path' }"
+            :default-expanded-nodes="defaultExpandedNodes"
+            :default-selected-node="formData.category"
+            :before-select="(node) => !node.children.length"
+            @select-change="onCategorySelect">
+        </bk-big-tree>
+    </bk-select>
+</template>
+<script>
+    export default {
+        props: {
+            categoryList: {
+                type: Array,
+                default: () => ([])
+            },
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            formData: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        data () {
+            return {
+                searchVal: '',
+                searchList: []
+            }
+        },
+        computed: {
+            categorySelectPath () {
+                return this.findPathByCodePath(this.categoryList, this.formData.category)
+            },
+            defaultExpandedNodes () {
+                return this.categoryList.map(item => item.code_path)
+            },
+            categoryFlattenList () {
+                return this.handleFlattenList(this.categoryList)
+            }
+        },
+        methods: {
+            onCategorySearch (val) {
+                this.searchVal = val
+                this.searchList = val
+                    ? this.categoryFlattenList.filter(item => item.name.toLowerCase().indexOf(val.toLowerCase()) > -1)
+                    : []
+            },
+            onCategorySelect (node) {
+                this.formData.category = node.id
+                this.$refs.categorySelect.close()
+            },
+            handleFlattenList (data, parentPath = '') {
+                let result = []
+
+                data.forEach(item => {
+                    const currentPath = parentPath ? `${parentPath}-${item.name}` : item.name
+
+                    if (item.children && item.children.length > 0) {
+                        result = result.concat(this.handleFlattenList(item.children, currentPath))
+                    } else {
+                        result.push({ id: item.code_path, name: currentPath })
+                    }
+                })
+
+                return result
+            },
+            findPathByCodePath (categoryList, targetCodePath) {
+                const traverse = (node, path) => {
+                    const currentPath = [...path, node.name]
+                    if (node.code_path === targetCodePath) {
+                        return currentPath
+                    }
+
+                    for (const child of node.children || []) {
+                        const result = traverse(child, currentPath)
+                        if (result) {
+                            return result
+                        }
+                    }
+
+                    return null
+                }
+
+                for (const rootNode of categoryList) {
+                    const result = traverse(rootNode, [])
+                    if (result) {
+                        return result.join('-')
+                    }
+                }
+
+                return null
+            },
+            handleSelectToggle () {
+                this.searchVal = ''
+                this.searchList = []
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    
+    .category-select::before {
+        position: absolute;
+        content: attr(data-placeholder);
+        color: #c4c6cc;
+    }
+    .search-empty-info {
+        margin: 15px 0;
+        text-align: center;
+    }
+</style>
diff --git a/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/SharedTplSlider.vue b/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/SharedTplSlider.vue
index b3603c134..4b6ecd058 100644
--- a/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/SharedTplSlider.vue
+++ b/frontend/desktop/src/pages/template/TemplateList/SharedTemplate/SharedTplSlider.vue
@@ -69,31 +69,11 @@
                     </p>
                 </bk-form-item>
                 <bk-form-item :label="$t('场景分类')" property="category" :required="true" :rules="rules.required">
-                    <bk-select
-                        :disabled="formData.type === 'update'"
-                        v-model="formData.category"
+                    <SharedCategorySelect
                         :loading="marketLoading"
-                        :show-empty="!categoryList.length">
-                        <div
-                            slot="trigger"
-                            class="bk-select-name category-select"
-                            :data-placeholder="categorySelectPath ? '' : $t('请选择场景分类')">
-                            {{ categorySelectPath }}
-                            <i class="bk-select-angle bk-icon icon-angle-down"></i>
-                        </div>
-                        <bk-big-tree
-                            ref="categoryTree"
-                            :data="categoryList"
-                            :selectable="true"
-                            :show-link-line="false"
-                            :show-icon="false"
-                            :options="{
-                                idKey: 'code_path'
-                            }"
-                            :before-select="(node) => !node.children.length"
-                            @select-change="onCategorySelect">
-                        </bk-big-tree>
-                    </bk-select>
+                        :category-list="categoryList"
+                        :form-data="formData">
+                    </SharedCategorySelect>
                 </bk-form-item>
                 <bk-form-item :label="$t('标签')" :desc="$t('场景使用者通过标签可以快速找到同一类场景')">
                     <SharedTagSelect
@@ -133,10 +113,12 @@
     import tools from '@/utils/tools.js'
     import { mapActions, mapState } from 'vuex'
     import SharedTagSelect from './SharedTagSelect.vue'
+    import SharedCategorySelect from './SharedCategorySelect.vue'
     import MarkdownEditor from './markdownEditor/editor.vue'
     export default {
         components: {
             SharedTagSelect,
+            SharedCategorySelect,
             MarkdownEditor
         },
         props: {
@@ -204,10 +186,7 @@
             ...mapState({
                 'infoBasicConfig': state => state.infoBasicConfig,
                 'username': state => state.username
-            }),
-            categorySelectPath () {
-                return this.findPathByCodePath(this.categoryList, this.formData.category)
-            }
+            })
         },
         watch: {
             isShow (val) {
@@ -298,35 +277,6 @@
                     usage_content: { content }
                 })
             },
-            onCategorySelect (node) {
-                this.formData.category = node.id
-            },
-            findPathByCodePath (categoryList, targetCodePath) {
-                const traverse = (node, path) => {
-                    const currentPath = [...path, node.name]
-                    if (node.code_path === targetCodePath) {
-                        return currentPath
-                    }
-
-                    for (const child of node.children || []) {
-                        const result = traverse(child, currentPath)
-                        if (result) {
-                            return result
-                        }
-                    }
-
-                    return null
-                }
-
-                for (const rootNode of categoryList) {
-                    const result = traverse(rootNode, [])
-                    if (result) {
-                        return result.join('/')
-                    }
-                }
-
-                return null
-            },
             onSave () {
                 this.$refs.formRef.validate().then(async result => {
                     try {
@@ -472,11 +422,6 @@
                     }
                 }
             }
-            .category-select::before {
-                position: absolute;
-                content: attr(data-placeholder);
-                color: #c4c6cc;
-            }
             .editor-container {
                 flex: 1;
                 .bk-form-content {