完成,等待地图撒点功能

src/hooks/useAliOss.ts

@@ -5,7 +5,6 @@ import { api } from '@/ajax'
 
 export default async function useAliOss(file: any) {
   const auth = (await useFetchAuth())?.token
-  console.log('auth', auth)
   const client = new OSS({
     region: auth.region,
     accessKeyId: auth.access_key_id,
@@ -19,13 +18,9 @@ export default async function useAliOss(file: any) {
   return new Promise((resolve: any) => {
     fr.readAsArrayBuffer(file)
     fr.onload = async (e) => {
-      console.log('e', e)
       const buffer = new OSS.Buffer(e.target && e.target.result)
-      console.log('buffer', buffer)
-      const key = `collector/${api.ATTACHMENT}/huamu_${md5(buffer)}_${filename}`
-      console.log('key', key)
+      const key = `collector/${api.ACTIVITY}/huamu_${md5(buffer)}_${filename}`
       const res = await client.put(key, buffer)
-      console.log('res', res)
       resolve(res.url)
     }
   })

src/hooks/useClickOutside.ts

 import { ref, Ref, onMounted, onUnmounted } from 'vue'
 
-export default function useClickOutside(elementRef: Ref<HTMLElement | null>) {
+export default function useClickOutside(
+  elementRef: Ref<HTMLElement | null>,
+  cb?: (val: boolean) => any,
+) {
   const isClickOutSide = ref(false)
   const handler = (e: MouseEvent) => {
     if (!elementRef || !elementRef.value) return
     isClickOutSide.value = !elementRef.value.contains(e.target as HTMLElement)
+    cb && cb(isClickOutSide.value)
   }
   onMounted(() => {
     document.addEventListener('click', handler)
@@ -12,5 +16,5 @@ export default function useClickOutside(elementRef: Ref<HTMLElement | null>) {
   onUnmounted(() => {
     document.removeEventListener('click', handler)
   })
-  return { isClickOutSide }
+  return isClickOutSide
 }

src/store/mutations.ts

@@ -9,6 +9,9 @@ export default {
   SET_AUTH(state: GlobalStateProps, val: any) {
     state.auth = val
   },
+  SET_SHOW_TAG(state: GlobalStateProps, val: boolean) {
+    state.showTag = val
+  },
   SET_SHOW_BASIC_INFO(state: GlobalStateProps, val: boolean) {
     state.showBasicInfo = val
   },

src/store/state.ts

@@ -7,6 +7,7 @@ export default {
     bucket: '',
     security_token: '',
   },
+  showTag: true,
   showBasicInfo: true,
   showFilterDrawer: false,
   showActivityDrawer: false,

src/view/components/activity-drawer.vue

@@ -97,6 +97,7 @@ const show = computed(() => store.state.showActivityDrawer)
 const closeDrawer = () => {
   store.commit('SET_ACTIVITY_DRAWER', false)
   store.commit('SET_SHOW_BASIC_INFO', true)
+  store.commit('SET_SHOW_TAG', true)
 }
 
 const dateRange = ref<number[]>([])

src/view/components/activity-list-modal.vue

@@ -3,7 +3,7 @@
     :show="show"
     :on-update:show="close"
     :mask-closable="false"
-    style="width: 98vw; transform: translateY(4%)"
+    style="width: 98vw; height: 91vh; transform: translateY(4%)"
     preset="card"
     title="党建活动录入"
   >
@@ -12,7 +12,7 @@
         <n-form
           :model="model"
           label-placement="left"
-          label-width="1rem"
+          label-width="0.9rem"
           size="small"
           inline
         >
@@ -104,7 +104,7 @@
       </n-space>
     </template>
   </n-modal>
-  <NewActivityDrawer :data="activityData" :cb="fetchList" />
+  <NewActivityDrawer :data="activityData" :cb="reFetchList" />
 </template>
 
 <script lang="ts" setup>
@@ -129,6 +129,16 @@ const fetchList = useDebounce(async (query?: string) => {
       ...item.extra,
     })) || []
 })
+const reFetchList = () => {
+  model.value = {
+    dateStart: null,
+    dateEnd: null,
+    rateStart: null,
+    rateEnd: null,
+    type: null,
+  }
+  fetchList()
+}
 onMounted(() => {
   fetchList()
 })
@@ -386,7 +396,7 @@ const checkRateEnd = (val: number) => {
   .n-select
     width 1.4rem
   .n-input-number
-    width 1rem
+    width .8rem
     .n-input-wrapper
       padding-right 0
       .n-input__suffix
@@ -397,7 +407,7 @@ const checkRateEnd = (val: number) => {
     font-size .1rem
     color $font
   .n-date-picker
-    width 1.2rem
+    width 1rem
     .n-input
       background #fff
 .activity-table

src/view/components/basic-info.vue

@@ -89,7 +89,6 @@
       </n-collapse>
       <m-animate enter="fadeInUp" leave="fadeOutDown" :duration="200">
         <div v-if="visible" class="tag-box">
-          <!-- TODO 全局控制 -->
           <span
             v-for="tag in tagList"
             :key="tag.name"
@@ -111,14 +110,8 @@ import { useFetchOrg } from '@/hooks/useFetch'
 import store from '@/store'
 
 const show = computed(() => store.state.showBasicInfo)
-const props = defineProps({
-  visible: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-})
 
-const visible = computed(() => props.visible)
+const visible = computed(() => store.state.showTag)
 const sum = computed(() => store.state.basicInfo.sum)
 const member = computed(() => store.state.basicInfo.member)
 const organization = computed(() => store.state.basicInfo.organization)

src/view/components/building-drawer.vue

@@ -129,6 +129,10 @@ const props = defineProps({
     type: Function as PropType<() => any>,
     default: null,
   },
+  close: {
+    type: Function as PropType<() => any>,
+    default: null,
+  },
 })
 
 const show = computed(() => store.state.showBuildingDrawer)
@@ -143,8 +147,7 @@ const back = () => {
 }
 const closeDrawer = () => {
   back()
-  store.dispatch('getBasicInfo')
-  store.commit('SET_FILTER_DRAWER', false)
+  props.close && props.close()
   // TODO 清除撒点
 }
 

src/view/components/filter-drawer.vue

@@ -9,10 +9,10 @@
     <n-drawer-content title="筛选" closable>
       <div class="content">
         <div class="tabs">
-          <div :class="{ on: curTab === 'tag' }" @click="curTab = 'tag'">
+          <div :class="{ on: curTab === 'tag' }" @click="setTab('tag')">
             标签筛选
           </div>
-          <div :class="{ on: curTab === 'geo' }" @click="curTab = 'geo'">
+          <div :class="{ on: curTab === 'geo' }" @click="setTab('geo')">
             地理筛选
           </div>
         </div>
@@ -161,6 +161,7 @@
     :list="buildingList"
     :path="curPath"
     :reset-info="checkPathThenFetchInfo"
+    :close="close"
   />
 </template>
 
@@ -183,16 +184,27 @@ import { CaretForward, ArrowBack, ArrowForward } from '@vicons/ionicons5'
 import exportIcon from '@images/export.svg'
 import dot from '@images/dot.svg'
 
-const emit = defineEmits(['boundary'])
+const emit = defineEmits(['boundary', 'close'])
 
 const show = computed(() => store.state.showFilterDrawer)
 const close = () => {
   store.dispatch('getBasicInfo')
   store.commit('SET_FILTER_DRAWER', false)
+  store.commit('SET_SHOW_TAG', true)
+  reset()
+  emit('close')
   // TODO 清除撒点
 }
 
 const curTab = ref('tag')
+const setTab = (val: string) => {
+  if (val === 'geo') {
+    store.commit('SET_SHOW_TAG', true)
+  } else {
+    store.commit('SET_SHOW_TAG', false)
+  }
+  curTab.value = val
+}
 
 const fetchTags = async (type: string) => {
   const res = await useFetchTag({
@@ -215,6 +227,19 @@ const getMemberTags = async () => {
   member.value = await fetchTags('党员')
 }
 
+function reset() {
+  organization.value = organization.value.map((item) => ({
+    ...item,
+    checked: false,
+  }))
+  member.value = member.value.map((item) => ({ ...item, checked: false }))
+  curArea.value = null
+  curCommittee.value = null
+  curCommunity.value = null
+  curTab.value = 'tag'
+  curGeo.value = '社区'
+}
+
 const areas = ref([])
 const committees = ref([])
 const communities = ref([])

src/view/components/nav-bar.vue

@@ -15,7 +15,7 @@
         clearable
         :on-clear="removeResult"
         :on-focus="onFocus"
-        :on-blur="() => emit('blur')"
+        :on-blur="onBlur"
       >
         <template #prefix>
           <img class="icon" src="@images/search2.png" />
@@ -94,6 +94,7 @@
     :data="resultData"
     :search-key="searchKey"
     @select="handleSelect"
+    @isClickOutSide="(val) => (showResult = !val || isFocus)"
   />
 </template>
 
@@ -108,7 +109,6 @@ import nav2 from '@images/nav2.svg'
 import nav3 from '@images/nav3.svg'
 import nav5 from '@images/nav5.svg'
 import menus from '@/util/menus'
-
 const curMenu = ref<any>(menus[0])
 
 const showFilterDrawer = computed(() => store.state.showFilterDrawer)
@@ -119,6 +119,7 @@ const onClick = (type: string) => {
   store.commit('SET_FILTER_DRAWER', false)
   store.commit('SET_ACTIVITY_DRAWER', false)
   store.commit('SET_STRUCT_MODAL', false)
+  store.commit('SET_SHOW_TAG', false)
   switch (type) {
     case 'filter':
       store.commit('SET_FILTER_DRAWER', true)
@@ -135,8 +136,6 @@ const onClick = (type: string) => {
   }
 }
 
-const emit = defineEmits(['focus', 'blur'])
-
 const options = [
   {
     label: '选项1',
@@ -157,12 +156,26 @@ const isLoading = ref(false)
 const showResult = ref(false)
 const resultData = ref<any>({})
 
+const isFocus = ref(false)
 const onFocus = () => {
-  emit('focus')
+  store.commit('SET_SHOW_TAG', false)
+  isFocus.value = true
   if (searchKey.value) {
     showResult.value = true
   }
 }
+const onBlur = () => {
+  isFocus.value = false
+  if (!showResult.value) {
+    store.commit('SET_SHOW_TAG', true)
+  }
+}
+watch(
+  () => showResult.value,
+  (val) => {
+    store.commit('SET_SHOW_TAG', !val && !isFocus.value)
+  },
+)
 const removeResult = () => {
   isLoading.value = false
   showResult.value = false

src/view/components/new-activity-drawer.vue

@@ -164,6 +164,7 @@
                 v-if="memberData.fileType === 'file'"
                 :span="24"
                 path="attachment"
+                class="no-label"
               >
                 <n-upload
                   :default-file-list="memberData.attachment || []"
@@ -179,6 +180,8 @@
                 v-if="memberData.fileType === 'photo'"
                 :span="24"
                 path="attachmentPhoto"
+                class="no-label"
+                :style="mode === 'view' ? 'margin-top:-0.6rem' : null"
               >
                 <n-upload
                   style="width: 100%"
@@ -228,6 +231,7 @@
                 v-if="detailData.describeType === 'text' && mode !== 'view'"
                 :span="24"
                 path="attachment"
+                class="no-label"
               >
                 <n-input
                   v-model:value="detailData.attachment"
@@ -238,6 +242,7 @@
                 v-if="detailData.describeType === 'photo'"
                 :span="24"
                 path="attachmentPhoto"
+                class="no-label"
               >
                 <n-upload
                   style="width: 100%"
@@ -505,7 +510,7 @@ const submit = () => {
           活动地址: address,
           实际参与人数: count,
           不计入参与活动党员人数: excludeCount,
-          活动照片: photoList,
+          活动照片: photoList?.map((item: any) => item.url) || [],
           出席率:
             totalPerson.value === excludeCount
               ? 0
@@ -516,17 +521,19 @@ const submit = () => {
                 ),
         }
         if (fileType === 'file') {
-          data['签到表文件'] = attachment
+          data['签到表文件'] = attachment?.map((item: any) => item.url) || []
           data['签到表照片'] = []
         } else if (fileType === 'photo') {
-          data['签到表照片'] = attachmentPhoto
+          data['签到表照片'] =
+            attachmentPhoto?.map((item: any) => item.url) || []
           data['签到表文件'] = []
         }
         if (describeType === 'text') {
           data['活动内容描述'] = detailAttachment
           data['台账记录照片'] = []
         } else if (describeType === 'photo') {
-          data['台账记录照片'] = detailAttachmentPhoto
+          data['台账记录照片'] =
+            detailAttachmentPhoto?.map((item: any) => item.url) || []
           data['活动内容描述'] = ''
         }
         if (mode.value === 'modify') {
@@ -554,15 +561,14 @@ const submit = () => {
   })
 }
 
-const previewFileList = ref([
-  {
-    url: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
-  },
-])
+// const previewFileList = ref([
+//   {
+//     url: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+//   },
+// ])
 const previewImageUrl = ref('')
 const showPhoto = ref(false)
-function handlePreview(file: any) {
-  const { url } = file
+function handlePreview({ url }: any) {
   previewImageUrl.value = url
   showPhoto.value = true
 }
@@ -735,4 +741,6 @@ const handleExport = async () => {
   &.view-mode
     .n-upload__trigger.n-upload__trigger--image-card
       display none !important
+  .no-label
+    margin-top -0.3rem
 </style>

src/view/components/search-modal.vue

 <template>
   <m-animate enter="fadeIn" leave="fadeOut" :duration="100">
-    <div v-if="visible" class="search-modal">
+    <div v-if="visible" ref="searchRef" class="search-modal">
       <n-tabs
         v-model:value="curTab"
         :on-close="() => (curTab = 'all')"
@@ -38,7 +38,7 @@
                   text-color="rgba(0,0,0,0.5)"
                   block
                   size="small"
-                  @click="toTab('organization')"
+                  @click.prevent.stop="toTab('organization')"
                 >
                   查看更多
                 </n-button>
@@ -71,7 +71,7 @@
                   text-color="rgba(0,0,0,0.5)"
                   block
                   size="small"
-                  @click="toTab('member')"
+                  @click.prevent.stop="toTab('member')"
                 >
                   查看更多
                 </n-button>
@@ -130,6 +130,8 @@
 <script lang="ts" setup>
 import { computed, PropType, ref, watch } from 'vue'
 import { ArrowForward } from '@vicons/ionicons5'
+import useClickOutSide from '@/hooks/useClickOutside'
+
 const props = defineProps({
   data: {
     type: Object as PropType<{ organization: any[]; member: any[] }>,
@@ -144,7 +146,10 @@ const props = defineProps({
     default: '',
   },
 })
-const emit = defineEmits(['select'])
+const emit = defineEmits(['select', 'isClickOutSide'])
+
+const searchRef = ref<any>(null)
+useClickOutSide(searchRef, (val) => emit('isClickOutSide', val))
 
 const organization = computed(() => props.data.organization)
 const member = computed(() => props.data.member)

src/view/components/struct-modal.vue

@@ -333,6 +333,7 @@ const show = computed(() => store.state.showStructModal)
 const close = () => {
   store.commit('SET_STRUCT_MODAL', false)
   store.commit('SET_SHOW_BASIC_INFO', true)
+  store.commit('SET_SHOW_TAG', true)
 }
 
 function renderIcon() {

src/view/main.vue

 <template>
-  <!-- <Map ref="map" /> -->
-  <NavBar @focus="showTag = false" @blur="showTag = true" />
-  <BasicInfo :visible="showTag" />
+  <Map ref="map" />
+  <NavBar />
+  <BasicInfo />
   <div v-if="showReset" class="reset" @click="resetMap">
     <n-icon class="icon" size=".14rem">
       <svg-icon :data="reset" original />
     </n-icon>
   </div>
-  <FilterDrawer @boundary="setBoundary" />
+  <FilterDrawer @boundary="setBoundary" @close="resetMap" />
   <ActivityDrawer />
   <StructModal />
 
-  <InforModal class="fix1" />
-  <ListModal class="fix2" pagination />
+  <!-- <InforModal class="fix1" /> -->
+  <!-- <ListModal class="fix2" pagination /> -->
   <!-- <ActivityDetail class="fix1" /> -->
 </template>
 
@@ -30,7 +30,6 @@ import ActivityDetail from './components/activity-detail.vue'
 import reset from '@images/reset.svg'
 import store from '@/store'
 
-const showTag = ref(true)
 const showReset = computed(() => store.state.showBasicInfo)
 const map = ref<any>()
 const resetMap = () => map.value && map.value.resetMap()

vite.config.js

@@ -26,6 +26,16 @@ export default defineConfig({
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ''),
       },
+      '/ali': {
+        target: 'http://mdt-open-public.cn-hangzhou.aliyuncs.com/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/ali/, ''),
+      },
+      '.ali': {
+        target: 'http://mdt-open-public.cn-hangzhou.aliyuncs.com',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\.ali/, ''),
+      },
     },
   },
 })