搜索框对接接口

src/ajax/axios.ts

@@ -82,7 +82,7 @@ const ajax = ({
   url,
   params = {},
   contentType = 'application/json;charset=UTF-8',
-  showLoading = true,
+  showLoading = false,
   headers = {},
 }: RequestOptions) => {
   if (!url || typeof url != 'string') {

src/view/components/basic-info.vue

@@ -98,10 +98,6 @@ import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
 import store from '@/store'
 import dayjs from '@/util/dayjs'
 
-onMounted(() => {
-  console.log('mounted')
-})
-
 const show = computed(() => store.state.showBasicInfo)
 const props = defineProps({
   visible: {
@@ -313,7 +309,6 @@ const getData3 = async () => {
   data3.value.source.forEach(
     (item, i) => (item.value = res[i]?.[0].__aggregate__ || 0),
   )
-  console.log(res, data3.value)
 }
 
 onMounted(() => {

src/view/components/nav-bar.vue

@@ -14,7 +14,7 @@
         :loading="isLoading"
         clearable
         :on-clear="removeResult"
-        :on-focus="() => emit('focus')"
+        :on-focus="onFocus"
         :on-blur="() => emit('blur')"
       >
         <template #prefix>
@@ -89,7 +89,12 @@
     </div>
   </div>
 
-  <SearchModal :visible="showResult" :data="resultData" />
+  <SearchModal
+    :visible="showResult"
+    :data="resultData"
+    :search-key="searchKey"
+    @select="handleSelect"
+  />
   <FilterDrawer />
   <BuildingDrawer />
   <ActivityDrawer />
@@ -99,6 +104,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue'
 import store from '@/store'
+import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
 import useDebounce from '@/hooks/useDebounce'
 import SearchModal from './search-modal.vue'
 import FilterDrawer from './filter-drawer.vue'
@@ -159,28 +165,28 @@ const isLoading = ref(false)
 const showResult = ref(false)
 const resultData = ref<any>({})
 
+const onFocus = () => {
+  emit('focus')
+  if (searchKey.value) {
+    showResult.value = true
+  }
+}
 const removeResult = () => {
   isLoading.value = false
   showResult.value = false
   resultData.value = {}
 }
-const handleSearch = useDebounce(function () {
+const handleSearch = useDebounce(async function () {
   isLoading.value = true
-  setTimeout(() => {
+  const orgs = await useFetchOrg({
+    q: `paths @ "党组织名称" && string @ "${searchKey.value}"`,
+  })
+  const members = await useFetchMember({
+    q: `paths @ "姓名" && string @ "${searchKey.value}"`,
+  })
   resultData.value = {
-      organization: [
-        { name: '某某社区党组织', address: '上海市浦东新区327号' },
-        { name: '某某社区党组织', address: '上海市浦东新区327号' },
-        { name: '某某社区党组织', address: '上海市浦东新区327号' },
-        { name: '某某社区党组织', address: '上海市浦东新区327号' },
-        { name: '某某社区党组织', address: '上海市浦东新区327号' },
-        { name: '某某社区党组织', address: '上海市浦东新区327号' },
-      ],
-      member: [
-        { name: '某某社区党组织', address: '上海市浦东新区327号' },
-        { name: '某某社区党组织', address: '上海市浦东新区327号' },
-        { name: '某某社区党组织', address: '上海市浦东新区327号' },
-      ],
+    organization: orgs,
+    member: members,
   }
   isLoading.value = false
   if (!searchKey.value) {
@@ -188,7 +194,6 @@ const handleSearch = useDebounce(function () {
     return
   }
   showResult.value = true
-  }, 1000)
 })
 watch(
   () => searchKey.value,
@@ -201,6 +206,12 @@ watch(
   },
 )
 
+const handleSelect = (data: any) => {
+  // TODO 地图撒点
+  console.log('current search-data: ', data)
+  showResult.value = false
+}
+
 const toPage = (id: string) => {
   if (!id) return
   window.parent._global_datamap_emit &&
@@ -250,7 +261,7 @@ const toPage = (id: string) => {
     // min-width 50%
     justify-content flex-end
     .search-input
-      max-width 2.4rem
+      width 2.4rem
       font-size .1rem
       height .26rem
       line-height @height

src/view/components/search-modal.vue

@@ -19,9 +19,14 @@
                   v-for="(item, i) in organization.slice(0, 5)"
                   :key="i"
                   class="item"
+                  @click="handleSelect(item)"
                 >
-                  <p>{{ item.name }}</p>
-                  <span>{{ item.address }}</span>
+                  <p>
+                    {{ item?.extra['党组织名称'].split(searchKey)[0]
+                    }}<span>{{ searchKey }}</span
+                    >{{ item?.extra['党组织名称'].split(searchKey)[1] }}
+                  </p>
+                  <span>{{ item?.extra['党组织地址'] }}</span>
                   <n-icon class="icon" size=".14rem" color="#dd505E">
                     <ArrowForward />
                   </n-icon>
@@ -47,9 +52,14 @@
                   v-for="(item, i) in member.slice(0, 5)"
                   :key="i"
                   class="item"
+                  @click="handleSelect(item)"
                 >
-                  <p>{{ item.name }}</p>
-                  <span>{{ item.address }}</span>
+                  <p>
+                    {{ item?.extra['姓名'].split(searchKey)[0]
+                    }}<span>{{ searchKey }}</span
+                    >{{ item?.extra['姓名'].split(searchKey)[1] }}
+                  </p>
+                  <span>{{ getAddress(item?.extra) }}</span>
                   <n-icon class="icon" size=".14rem" color="#dd505E">
                     <ArrowForward />
                   </n-icon>
@@ -72,9 +82,18 @@
         </n-tab-pane>
         <n-tab-pane name="organization" tab="党组织">
           <div v-if="organization && organization.length > 0" class="wrapper">
-            <div v-for="(item, i) in organization" :key="i" class="item">
-              <p>{{ item.name }}</p>
-              <span>{{ item.address }}</span>
+            <div
+              v-for="(item, i) in organization"
+              :key="i"
+              class="item"
+              @click="handleSelect(item)"
+            >
+              <p>
+                {{ item?.extra['党组织名称'].split(searchKey)[0]
+                }}<span>{{ searchKey }}</span
+                >{{ item?.extra['党组织名称'].split(searchKey)[1] }}
+              </p>
+              <span>{{ item?.extra['党组织地址'] }}</span>
               <n-icon class="icon" size=".14rem" color="#dd505E">
                 <ArrowForward />
               </n-icon>
@@ -84,9 +103,18 @@
         </n-tab-pane>
         <n-tab-pane name="member" tab="党员">
           <div v-if="member && member.length > 0" class="wrapper">
-            <div v-for="(item, i) in member" :key="i" class="item">
-              <p>{{ item.name }}</p>
-              <span>{{ item.address }}</span>
+            <div
+              v-for="(item, i) in member"
+              :key="i"
+              class="item"
+              @click="handleSelect(item)"
+            >
+              <p>
+                {{ item?.extra['姓名'].split(searchKey)[0]
+                }}<span>{{ searchKey }}</span
+                >{{ item?.extra['姓名'].split(searchKey)[1] }}
+              </p>
+              <span>{{ getAddress(item?.extra) }}</span>
               <n-icon class="icon" size=".14rem" color="#dd505E">
                 <ArrowForward />
               </n-icon>
@@ -100,7 +128,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType, ref } from 'vue'
+import { computed, PropType, ref, watch } from 'vue'
 import { ArrowForward } from '@vicons/ionicons5'
 const props = defineProps({
   data: {
@@ -111,7 +139,13 @@ const props = defineProps({
     type: Boolean as PropType<boolean>,
     default: false,
   },
+  searchKey: {
+    type: String as PropType<string>,
+    default: '',
+  },
 })
+const emit = defineEmits(['select'])
+
 const organization = computed(() => props.data.organization)
 const member = computed(() => props.data.member)
 
@@ -119,6 +153,26 @@ const curTab = ref('all')
 const toTab = (name: string) => {
   curTab.value = name
 }
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) curTab.value = 'all'
+  },
+)
+
+const getAddress = (data: any) => {
+  if (!data) return '暂无'
+  return (
+    (data['所属社区'] || '') +
+      (data['所属居委'] || '') +
+      (data['所属小区'] || '') +
+      (data['所属楼宇'] || '') +
+      (data['所属房间'] || '') || '暂无'
+  )
+}
+const handleSelect = (data: any) => {
+  emit('select', data)
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -131,9 +185,10 @@ const toTab = (name: string) => {
   width 2.4rem
   position fixed
   top .38rem
-  right 2.41rem
+  right 2.2rem
   box-shadow .02rem .02rem .04rem rgba(0,0,0,0.3)
   overflow hidden
+  box-sizing border-box
 .tab1
   .title
     font-family $font-ping-medium
@@ -154,17 +209,23 @@ const toTab = (name: string) => {
     padding .05rem .08rem
     p
       font-family $font-ping-medium
-      $text-overflow()
+      margin-bottom .02rem
+      // $text-overflow()
+      >span
+        color $red
+        display inline
     span
+      display inline-block
+      width 100%
       color $gray
-      $text-overflow()
+      // $text-overflow()
     .icon
       display none
       position absolute
       top 0
       bottom 0
       right 0
-      margin auto .1rem
+      margin auto 0.05rem
     &:hover
       background $light-red
       &>.icon

src/view/main.vue

@@ -60,4 +60,7 @@ const showReset = computed(() => store.state.showBasicInfo)
   border-radius inherit
 .n-base-selection .n-base-selection-label
   background #F9FAFB
+
+.n-empty
+  margin .1rem 0
 </style>