Merge branch 'main' of http://175.6.124.250:3100/luozhun/policeSecurity
This commit is contained in:
		
						commit
						b4a2ea1c45
					
				|  | @ -6,7 +6,7 @@ | |||
|     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||||
|     <script type="module" src="/src/assets/iconfont/iconfont.js"></script> | ||||
| 
 | ||||
|     <title>Vite + Vue + TS</title> | ||||
|     <title>保安后台</title> | ||||
| </head> | ||||
| <body> | ||||
| <div id="app"></div> | ||||
|  |  | |||
|  | @ -15,14 +15,10 @@ | |||
|       <SystemMenus/> | ||||
|     </a-layout-sider> | ||||
|     <a-layout> | ||||
|       <a-layout-header | ||||
|           class="layout-header" | ||||
|       > | ||||
|       <a-layout-header class="layout-header"> | ||||
|         <layout-header v-model:collapsed="collapsed"/> | ||||
|       </a-layout-header> | ||||
|       <a-layout-content | ||||
|           class="layout-content" | ||||
|       > | ||||
|       <a-layout-content  class="layout-content" > | ||||
|         <router-view v-slot="{ Component, route }"> | ||||
|           <transition appear name="fade-transform" mode="out-in"> | ||||
|             <keep-alive :include="keepAliveNames"> | ||||
|  |  | |||
|  | @ -159,7 +159,7 @@ const transformData =  (val:any,tree:any)=>{ | |||
| } | ||||
| // 可以进行搜索行政区划  2 | ||||
| const filter: ShowSearchType['filter'] = (inputValue, path) => { | ||||
|   return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1); | ||||
|   return path?.some(option => option.label.toLowerCase().indexOf(inputValue?.toLowerCase()) > -1); | ||||
| }; | ||||
| 
 | ||||
| // 搜索完成时回调 | ||||
|  |  | |||
|  | @ -1,114 +1,24 @@ | |||
| <template> | ||||
|   <div class="search" id="search"> | ||||
|     <a-input v-model="valueInput" @input="searchInput" placeholder="请进行搜索"></a-input> | ||||
|     <div v-if="valueInput"> | ||||
|       <ul> | ||||
|         <li v-for="item in searchResults" :key="item.id">{{item}}</li> | ||||
|       </ul> | ||||
|     </div> | ||||
|     <div v-else > | ||||
|       没有找到相关结果 | ||||
|     </div> | ||||
|   </div> | ||||
|       <AdministrativeDivisionsTree v-model:value="value" :show-search="{ filter }" @change="searchAdministrativeDivisionTree"></AdministrativeDivisionsTree> | ||||
| </template> | ||||
| <script setup lang="ts"> | ||||
| import {onMounted, ref,} from "vue"; | ||||
| const valueInput = ref('') | ||||
| const list = ref([]) | ||||
| const dataList = ref([ | ||||
|   { | ||||
|     id:0, | ||||
|     value:'齐家园' | ||||
|   }, | ||||
|   { | ||||
|     id:1, | ||||
|     value:'刘德华' | ||||
|   }, | ||||
|   { | ||||
|     id:2, | ||||
|     value:'张学友' | ||||
|   },{ | ||||
|     id:3, | ||||
|     value:'黎明' | ||||
|   }, | ||||
|   { | ||||
|     id:4, | ||||
|     value:'家具城' | ||||
|   }, | ||||
|   { | ||||
|     id:5, | ||||
|     value:'左岸春天' | ||||
|   }, | ||||
|   { | ||||
|     id:6, | ||||
|     value:'麦德龙商城' | ||||
|   }, | ||||
|   { | ||||
|     id:7, | ||||
|     value:'世纪酒店' | ||||
|   }, | ||||
|   { | ||||
|     id:8, | ||||
|     value:'四方小学' | ||||
|   }, | ||||
|   { | ||||
|     id:9, | ||||
|     value:'海洋半岛' | ||||
|   }, | ||||
|   { | ||||
|     id:10, | ||||
|     value:'育英小学' | ||||
|   }, | ||||
|   { | ||||
|     id:11, | ||||
|     value:'明德小学' | ||||
|   },{ | ||||
|     id:12, | ||||
|     value:'希望小学', | ||||
|   } | ||||
| ]) | ||||
| const searchResults =  ref([]) | ||||
| const searchInput = (e:any)=>{ | ||||
|   valueInput.value = e.target.value | ||||
|   if (!valueInput.value) { | ||||
|     searchResults.value = [] | ||||
|     return; | ||||
|   }else{ | ||||
|     searchResults.value =  list.value.filter(item => | ||||
|         item.toLowerCase().includes(valueInput.value.toLowerCase()) | ||||
|     ); | ||||
|   } | ||||
| } | ||||
| // watch(()=>valueInput.value,(value)=>{ | ||||
| //    if(!value){ | ||||
| //      searchResults.value = [] | ||||
| //    } | ||||
| // }) | ||||
| import AdministrativeDivisionsTree from "@/components/tree/AdministrativeDivisionsTree.vue"; | ||||
| import {ref} from "vue"; | ||||
| import {ShowSearchType} from "ant-design-vue/es/cascader"; | ||||
| 
 | ||||
| onMounted(()=>{ | ||||
|   dataList.value.map((item)=>{ | ||||
|     return list.value.push(item.value) | ||||
|   }) | ||||
| }) | ||||
| const value = ref([ "110000", "110100", "110116", "110116005" ]) | ||||
| 
 | ||||
| const filter: ShowSearchType['filter'] = (inputValue, path) => { | ||||
|   return path?.some(option => option.label.toLowerCase().indexOf(inputValue?.toLowerCase()) > -1); | ||||
| }; | ||||
| 
 | ||||
| const  searchAdministrativeDivisionTree = (e:Array<string>)=>{ | ||||
|   value.value = e as any | ||||
| } | ||||
| </script> | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| <style scoped lang="scss"> | ||||
| .search{ | ||||
|   padding: 0 10px; | ||||
|   overflow: hidden; | ||||
|   border: 1px solid #4e71f2; | ||||
|   margin: 1px 5px; | ||||
|   border-radius: 10px; | ||||
|   width: 30%; | ||||
|   .ceShi{ | ||||
|     height: 300px; | ||||
|     background: #ccc; | ||||
|   } | ||||
| } | ||||
| .nut-input{ | ||||
|   padding: 20rpx 20rpx; | ||||
|   margin: 5px 0; | ||||
| } | ||||
| 
 | ||||
| </style> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue