修改设置日期函数

src/components/tree/index.vue

@@ -1,49 +1,27 @@
 <template>
     <div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
-        <Icon
-            v-show="menuCollapse"
-            @click="onMenuCollapse"
-            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
-            :class="menuCollapse ? 'unfold' : ''"
-            size="18"
-            class="fold ml10 mt20 menu-collapse"
-            style="cursor: pointer"
-        />
+        <Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+            :class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse"
+            style="cursor: pointer" />
         <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
             <div style="display: flex; align-items: center" class="mb10">
-                <el-input v-model="filterText" placeholder="请输入内容" clearable>
+                <el-input v-model="filterText" placeholder="请输入内容" clearable maxlength="10" show-word-limit @input="change">
                     <template #prefix>
                         <Icon name="el-icon-Search" style="font-size: 16px" />
                     </template>
                 </el-input>
-                <Icon
-                    @click="onMenuCollapse"
-                    :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
-                    :class="menuCollapse ? 'unfold' : ''"
-                    size="18"
-                    class="fold ml10 menu-collapse"
-                    style="cursor: pointer"
-                    v-if="props.canExpand"
-                />
-                <el-button icon="el-icon-Plus"  v-if="props.addTree" type="primary" class="ml10" @click="onAddTree">新增</el-button>
+                <Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                    :class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
+                    style="cursor: pointer" v-if="props.canExpand" />
+                <el-button icon="el-icon-Plus" v-if="props.addTree" type="primary" class="ml10"
+                    @click="onAddTree">新增</el-button>
             </div>
-            <el-tree
-                style="flex: 1; overflow: auto"
-                ref="treeRef"
-                :props="defaultProps"
-                highlight-current
-                :filter-node-method="filterNode"
-                node-key="id"
-                v-bind="$attrs"
-            >
+            <el-tree style="flex: 1; overflow: auto" ref="treeRef" :props="defaultProps" highlight-current
+                :filter-node-method="filterNode" node-key="id" v-bind="$attrs">
                 <template #default="{ node, data }">
                     <span class="custom-tree-node">
-                        <Icon
-                            :name="data.icon"
-                            style="font-size: 16px"
-                            :style="{ color: data.color }"
-                            v-if="data.icon"
-                        />
+                        <Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
+                            v-if="data.icon" />
                         <span style="margin-left: 4px">{{ node.label }}</span>
                     </span>
                 </template>
@@ -56,7 +34,7 @@
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
 import { ref, watch } from 'vue'
-
+import { ElMessage } from 'element-plus'
 defineOptions({
     name: 'govern/tree'
 })
@@ -79,9 +57,33 @@ const defaultProps = {
     label: 'name',
     value: 'id'
 }
-watch(filterText, val => {
-    treeRef.value!.filter(val)
-})
+const specialCharsPattern = /[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g;
+const change=(val) => {
+
+
+    if (specialCharsPattern.test(val)) {
+        ElMessage.warning('禁止输入特殊字符!')
+        filterText.value = val.replace(/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g, "")
+        console.log("🚀 ~ change ~ filterText.value:", filterText.value)
+        
+        treeRef.value!.filter(filterText.value)
+    }else{
+        treeRef.value!.filter(filterText.value)
+    }
+}
+// watch(filterText, val => {
+
+//     console.log("🚀 ~ val:", specialCharsPattern.test(val))
+//     if (specialCharsPattern.test(val)) {
+//         ElMessage.warning('禁止输入特殊字符!')
+//         filterText.value = val.replace(/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g, "")
+//         console.log("🚀 ~   filterText.value:",   filterText.value)
+//         treeRef.value!.filter(filterText.value)
+//     }else{
+//         treeRef.value!.filter(filterText.value)
+//     }
+
+// })
 const onMenuCollapse = () => {
     menuCollapse.value = !menuCollapse.value
     proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
@@ -90,10 +92,11 @@ const filterNode = (value: string, data: any, node: any) => {
     if (!value) return true
     // return data.name.includes(value)
     if (data.name) {
-        
+
         return chooseNode(value, data, node)
     }
 }
+
 // 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
 const chooseNode = (value: string, data: any, node: any) => {