修改输入框字段限制

src/components/tree/device.vue

@@ -1,59 +1,34 @@
 <!-- 设备管理使用折叠面板渲染多个tree -->
 <template>
-    <div
-        :style="{ width: menuCollapse ? '40px' : props.width }"
-        style="display: flex; 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"
-        />
+    <div :style="{ width: menuCollapse ? '40px' : props.width }"
+        style="display: flex; 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" />
         <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
             <div style="display: flex; align-items: center" class="mb10">
                 <!-- <el-form-item> -->
-                <el-input v-model="filterText" autocomplete="off" placeholder="请输入内容" clearable>
+                <el-input maxlength="32" show-word-limit v-model="filterText" autocomplete="off" placeholder="请输入内容"
+                    clearable>
                     <template #prefix>
                         <Icon name="el-icon-Search" style="font-size: 16px" />
                     </template>
                 </el-input>
                 <!-- </el-form-item> -->
-                <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"
-                />
+                <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" />
             </div>
             <el-collapse :accordion="true" v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
                 <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
                     <el-tree
                         :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
-                        ref="treeRef1"
-                        :props="defaultProps"
-                        highlight-current
-                        :filter-node-method="filterNode"
-                        node-key="id"
-                        default-expand-all
-                        v-bind="$attrs"
-                        :data="zlDeviceData"
-                        style="overflow: auto"
-                    >
+                        ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
+                        node-key="id" default-expand-all v-bind="$attrs" :data="zlDeviceData" style="overflow: auto">
                         <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>
@@ -62,24 +37,13 @@
                 <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
                     <el-tree
                         :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
-                        ref="treeRef2"
-                        :props="defaultProps"
-                        highlight-current
-                        default-expand-all
-                        :filter-node-method="filterNode"
-                        node-key="id"
-                        :data="bxsDeviceData"
-                        v-bind="$attrs"
-                        style="overflow: auto"
-                    >
+                        ref="treeRef2" :props="defaultProps" highlight-current default-expand-all
+                        :filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
+                        style="overflow: auto">
                         <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>

src/components/tree/govern/pointTreeWx.vue

@@ -4,7 +4,7 @@
 
             <div class="cn-tree">
                 <div style="display: flex; align-items: center" class="mb10">
-                    <el-input v-model="filterText" placeholder="请输入内容" clearable>
+                    <el-input maxlength="32" show-word-limit v-model="filterText" placeholder="请输入内容" clearable>
                         <template #prefix>
                             <Icon name="el-icon-Search" style="font-size: 16px" />
                         </template>
@@ -95,7 +95,7 @@ const defaultProps = {
 }
 
 
-const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart','Policy'])
+const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
 const config = useConfig()
 const tree = ref()
 const treRef = ref()
@@ -145,11 +145,13 @@ const clickNode = (e: anyObj) => {
 if (props.template) {
     getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
         emit('Policy', res.data)
-      getTreeList()
+        getTreeList()
     }).catch(err => {
-      getTreeList()    })
+        getTreeList()
+    })
 } else {
-  getTreeList()}
+    getTreeList()
+}
 
 </script>
 <style lang="scss" scoped>

src/components/tree/index.vue

@@ -1,49 +1,25 @@
 <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'
-        />
+    <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' />
         <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 maxlength="32" show-word-limit v-model='filterText' placeholder='请输入内容' clearable>
                     <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'
-                />
+                <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' />
             </div>
-            <el-tree
-                style='flex: 1; overflow: auto;'
-                ref='treeRef'
-                :props='defaultProps'
-                highlight-current
-               @check-change="checkTreeNodeChange"
-                :filter-node-method='filterNode'
-                node-key='id'
-                v-bind='$attrs'
-            >
+            <el-tree style='flex: 1; overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current
+                @check-change="checkTreeNodeChange" :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>
@@ -90,9 +66,9 @@ const filterNode = (value: string, data: any) => {
     if (!value) return true
     return data.name.includes(value)
 }
-const checkTreeNodeChange=()=>{
-   console.log( treeRef.value?.getCheckedNodes(),"ikkkkkiisiiisis");
-   emit('checkTreeNodeChange',treeRef.value?.getCheckedNodes())
+const checkTreeNodeChange = () => {
+    console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
+    emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
 }
 const treeRef = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef })

src/components/tree/point.vue

@@ -1,58 +1,32 @@
 <!-- 设备监控使用折叠面板渲染多个tree -->
 <template>
-    <div
-        :style="{ width: menuCollapse ? '40px' : props.width }"
-        style="display: flex; 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"
-            v-if="route.path != '/admin/govern/reportCore/statistics/index'"
-        />
+    <div :style="{ width: menuCollapse ? '40px' : props.width }"
+        style="display: flex; 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"
+            v-if="route.path != '/admin/govern/reportCore/statistics/index'" />
         <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 maxlength="32" show-word-limit v-model="filterText" placeholder="请输入内容" clearable>
                     <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"
+                <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 && route.path != '/admin/govern/reportCore/statistics/index'"
-                />
+                    v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'" />
             </div>
             <el-collapse :accordion="true" v-model="activeName" style="flex: 1; height: 100%" @change="changeDevice">
                 <el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
                     <el-tree
                         :style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
-                        ref="treeRef1"
-                        :props="defaultProps"
-                        highlight-current
-                        :filter-node-method="filterNode"
-                        node-key="id"
-                        default-expand-all
-                        v-bind="$attrs"
-                        :data="zlDeviceData"
-                        style="overflow: auto"
-                    >
+                        ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
+                        node-key="id" default-expand-all v-bind="$attrs" :data="zlDeviceData" style="overflow: auto">
                         <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>
@@ -61,24 +35,13 @@
                 <el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
                     <el-tree
                         :style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
-                        ref="treeRef2"
-                        :props="defaultProps"
-                        highlight-current
-                        default-expand-all
-                        :filter-node-method="filterNode"
-                        node-key="id"
-                        :data="bxsDeviceData"
-                        v-bind="$attrs"
-                        style="overflow: auto"
-                    >
+                        ref="treeRef2" :props="defaultProps" highlight-current default-expand-all
+                        :filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
+                        style="overflow: auto">
                         <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>