From e3a1570e53cbaedf675884e88970ed7ceb88f0dd Mon Sep 17 00:00:00 2001
From: lijie <lijie1024512@163.com>
Date: Fri, 18 Oct 2024 11:21:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8F=98=E9=87=8F,=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E5=87=BD=E6=95=B0=E6=A0=91=E8=BF=94=E5=9B=9E=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E5=88=97=E8=A1=A8,=E6=BB=91=E5=85=A5=E6=BB=91?=
 =?UTF-8?q?=E5=87=BA=E5=87=BD=E6=95=B0=E6=A0=91=E5=B1=95=E7=A4=BA=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/App.vue              |  1 +
 package-lock.json                |  4 +-
 src/components/FieldVariable.vue | 25 ++++++++++--
 src/components/FormulaList.vue   | 69 ++++++++++++++++++++++++++++----
 src/index.vue                    |  7 +++-
 5 files changed, 93 insertions(+), 13 deletions(-)

diff --git a/example/src/App.vue b/example/src/App.vue
index fb28929..3d8cfad 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -27,6 +27,7 @@
 <script>
   import formulaObj from './formula'
   import { calculate, formulaWatcher, FormulaEditor } from 'vue-formula-editor'
+  // import { calculate, formulaWatcher, FormulaEditor } from '../../src/index'
 
   export default {
     name: 'HomeView',
diff --git a/package-lock.json b/package-lock.json
index 1658d46..140ace4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-formula-editor",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-formula-editor",
-      "version": "0.1.0",
+      "version": "0.2.2",
       "license": "MIT",
       "dependencies": {
         "@formulajs/formulajs": "^4.4.5",
diff --git a/src/components/FieldVariable.vue b/src/components/FieldVariable.vue
index e0820dc..dc8bb49 100644
--- a/src/components/FieldVariable.vue
+++ b/src/components/FieldVariable.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="field-variable">
+    <div class="field-search">
+      <el-input
+        placeholder="搜索变量"
+        prefix-icon="el-icon-search"
+        v-model="searchVariable"
+        clearable
+         />
+    </div>
     <div
       class="field-item"
       @click="$emit('fieldSelect', item)"
-      v-for="item in fieldList"
+      v-for="item in filterFieldList"
       :key="item.enCode">
       <span>{{ item.fullName }}</span>
       <span :field-type="item.value" class="text-tag">
@@ -14,6 +22,7 @@
 </template>
 
 <script>
+
   export default {
     name: 'FieldVariable',
     props: {
@@ -31,13 +40,23 @@
       }
       return {
         type,
+        // 搜索值
+        searchVariable:'',
+        // 过滤后的变量
+        filterFieldList: [],
       }
     },
     computed: {},
-    watch: {},
+    watch: {
+      searchVariable(val,old) {
+        this.filterFieldList = this.fieldList.filter(({fullName}) => fullName.includes(val))
+      },
+    },
     methods: {},
     async created() {},
-    mounted() {},
+    mounted() {
+      this.filterFieldList = this.fieldList
+    },
   }
 </script>
 <style lang="less" scoped>
diff --git a/src/components/FormulaList.vue b/src/components/FormulaList.vue
index cc1152a..c45be8f 100644
--- a/src/components/FormulaList.vue
+++ b/src/components/FormulaList.vue
@@ -1,18 +1,31 @@
 <template>
   <div class="formula-list">
-    <Tree
-      :data="nodes"
+    <el-input
+    placeholder='搜索函数'
+    prefix-icon="el-icon-search"
+    v-model="searchTreeVariable" 
+    clearable
+    ></el-input>
+    <div class="treeContainer" @mouseleave="leaveTree" >
+      <Tree
+      :data="filterData"
       :default-expanded-keys="['frequentlyUse']"
       :props="props"
+      :current-node-key="currentKeyNode.enCode"
       node-key="enCode"
-      @node-click="nodeClick">
-      <span class="info-container" slot-scope="{ data }">
+      @node-click="nodeClick"
+      highlight-current
+            
+      >
+      <span class="info-container" @mouseenter="enterInfo(data)"  slot-scope="{ data }">
         <span>{{ data.name }}</span>
         <span v-if="data.tip" class="tip">
           {{ data.tip }}
         </span>
       </span>
     </Tree>
+    </div>
+
   </div>
 </template>
 
@@ -37,14 +50,55 @@
       },
     },
     data() {
-      return {}
+      return {
+        searchTreeVariable:"",
+        // 选中的节点
+        currentKeyNode:{},
+      }
+    },
+    computed: {
+      filterData() {
+        if(!this.searchTreeVariable){
+          return this.nodes
+        }
+        return this.filterTreeData(this.nodes)
+      },
     },
     watch: {},
     methods: {
       nodeClick(o) {
-        if (o.formula) return
+        const currentKeyNode = this.currentKeyNode
+        // 目录情况
+        if (o.formula){
+          if(currentKeyNode && currentKeyNode.enCode ){
+            this.currentKeyNode={}
+          }
+          return
+        }
+        this.currentKeyNode = o
         this.$emit('formulaClick', o)
       },
+      filterTreeData(nodes) {
+        // 找到nodes树中包含searchTreeVariable的节点但只有一层的结果
+        return nodes.reduce((pre,cur)=>{
+          if(cur.name.toLowerCase().includes(this.searchTreeVariable)){
+            pre.push({...cur})
+          }
+          if(cur.formula){
+            pre.push(...this.filterTreeData(cur.formula))
+          }
+          return pre
+        },[])
+      },
+      enterInfo(data) {
+        if(data.formula) return 
+        this.$emit('enterInfo', data)
+      },
+      leaveTree(){
+        if(this.currentKeyNode && this.currentKeyNode.enCode){
+          this.$emit('enterInfo', this.currentKeyNode)
+        }
+      }
     },
     created() {},
     mounted() {},
@@ -57,12 +111,13 @@
     height: 100%;
     border-right: 1px solid #d7d9dc;
     .info-container {
+      width: 100%;
       display: flex;
       flex-direction: column;
     }
     ::v-deep .el-tree-node__content {
       height: 100%;
-      margin-top: 6px;
+      // margin-top: 6px;
       padding: 6px 0;
       user-select: none;
     }
diff --git a/src/index.vue b/src/index.vue
index 6f25ba8..4b0a05d 100644
--- a/src/index.vue
+++ b/src/index.vue
@@ -13,7 +13,9 @@
       <FormulaList
         :nodes="nodes"
         class="formula-list"
-        @formulaClick="onFormulaClick" />
+        @formulaClick="onFormulaClick"
+        @enterInfo="onEnterInfo"
+        />
       <div v-if="currentFormula" class="formula-info">
         <div class="info-text">{{ currentFormula.tip }}</div>
         <div class="info-text">用法：{{ currentFormula.usage }}</div>
@@ -131,6 +133,9 @@
           'field'
         )
       },
+      onEnterInfo(fumulaInfo){
+        this.currentFormula = fumulaInfo
+      }
     },
     created() {},
     mounted() {},
-- 
Gitee