activity-drawer接入数据

src/App.vue

@@ -60,7 +60,8 @@ const themeOverrides: GlobalThemeOverrides = {
     iconSize: '0.14rem',
   },
   InternalSelection: {
-    borderHover: 'dd505E',
+    borderHover: '#dd505E',
+    borderFocus: '#dd505E',
   },
   Checkbox: {
     textColor: '#6E798C',

src/hooks/useFetch.ts

@@ -42,6 +42,13 @@ export async function usePutActivity(params: QueryProps) {
   })
   return res && res.data && res.data.result
 }
+export async function useDeleteActivity(params: QueryProps) {
+  const res = await ajax.delete({
+    url: api.ACTIVITY,
+    params,
+  })
+  return res && res.data && res.data.result
+}
 export async function useFetchArea(params: QueryProps) {
   const res = await ajax.get({
     url: api.AREA,

src/view/components/activity-drawer.vue

@@ -87,9 +87,10 @@
 
 <script lang="ts" setup>
 import store from '@/store'
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { Checkmark, Close } from '@vicons/ionicons5'
 import ActivityListModal from './activity-list-modal.vue'
+import { useFetchActivity } from '@/hooks/useFetch'
 import dayjs from '@/util/dayjs'
 
 const show = computed(() => store.state.showActivityDrawer)
@@ -100,19 +101,40 @@ const closeDrawer = () => {
 
 const dateRange = ref<number[]>([])
 const list = ref([
-  { title: '支部党员大会', count: 35, people: 890, ratio: 50, onMap: false },
-  { title: '支部委员会', count: 35, people: 890, ratio: 50, onMap: false },
-  {
-    title: '楼宇党建相关会议',
-    count: 35,
-    people: 890,
-    ratio: 50,
-    onMap: false,
-  },
-  { title: '党课', count: 35, people: 890, ratio: 50, onMap: false },
-  { title: '主题党日活动', count: 35, people: 890, ratio: 50, onMap: false },
+  { title: '支部党员大会', count: 0, people: 0, ratio: 0, onMap: false },
+  { title: '支部委员会', count: 0, people: 0, ratio: 0, onMap: false },
+  { title: '楼宇党建相关会议', count: 0, people: 0, ratio: 0, onMap: false },
+  { title: '党课', count: 0, people: 0, ratio: 0, onMap: false },
+  { title: '主题党日活动', count: 0, people: 0, ratio: 0, onMap: false },
 ])
 
+onMounted(() => {
+  getList()
+})
+
+async function getList(query?: string) {
+  const result = [...list.value]
+  result.forEach(async (item) => {
+    const data = await useFetchActivity({
+      keys: '实际参与人数,出席率',
+      q: query
+        ? `paths @ "标签类别" && string == "${item.title}",${query}`
+        : `paths @ "标签类别" && string == "${item.title}"`,
+    })
+    const activityAmount = data.length || 0
+    let personAmount = 0
+    let rateAmount = 0
+    data.forEach((e: any) => {
+      personAmount += e['实际参与人数'] || 0
+      rateAmount += e['出席率'] || 0
+    })
+    item.count = activityAmount
+    item.people = personAmount
+    item.ratio = activityAmount ? rateAmount / activityAmount : 0
+  })
+  list.value = [...result]
+}
+
 const showModal = () => {
   store.commit('SET_SHOW_BASIC_INFO', false)
   store.commit('SET_ACTIVITY_LIST_MODAL', true)
@@ -121,15 +143,20 @@ const showModal = () => {
 watch(
   () => dateRange.value,
   ([start, end]) => {
-    console.log('起始-截止日期：', start, end)
-    // TODO 发请求获取数据
+    const query: string[] = []
+    start &&
+      query.push(
+        `paths @ "活动日期" && number >= ${+(start + '').slice(0, 10)}`,
+      )
+    end &&
+      query.push(`paths @ "活动日期" && number <= ${+(end + '').slice(0, 10)}`)
+    getList(query.join(','))
   },
   { deep: true },
 )
 const disableDateStart = (ts: number) => {
   const cur = dayjs(ts)
-  // TODO 日期起始具体是哪年？
-  const start = dayjs('1949-01-04')
+  const start = dayjs('1900-01-01')
   let end = dayjs()
   if (dateRange.value[1]) {
     end = dayjs(dateRange.value[1])
@@ -138,8 +165,7 @@ const disableDateStart = (ts: number) => {
 }
 const disableDateEnd = (ts: number) => {
   const cur = dayjs(ts)
-  // TODO 日期起始具体是哪年？
-  let start = dayjs('1949-01-04')
+  let start = dayjs('1900-01-01')
   const end = dayjs()
   if (dateRange.value[0]) {
     start = dayjs(dateRange.value[0])

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

@@ -115,7 +115,7 @@ import { Add } from '@vicons/ionicons5'
 import dayjs from '@/util/dayjs'
 import { NButton, NTag, useMessage } from 'naive-ui'
 import { activity } from '@/util/tags'
-import { useFetchActivity } from '@/hooks/useFetch'
+import { useFetchActivity, useDeleteActivity } from '@/hooks/useFetch'
 import useDebounce from '@/hooks/useDebounce'
 
 const message = useMessage()
@@ -295,16 +295,18 @@ const pagination = {
   pageSize: 10,
 }
 
-const sureToDelete = () => {
+const sureToDelete = async () => {
+  await useDeleteActivity({
+    id: [curRow.value.id],
+  })
   deleteConfirm.value = false
-  console.log(curRow.value)
+  fetchList()
   message.success('删除成功')
 }
 
 const disableDateStart = (ts: number) => {
   const cur = dayjs(ts)
-  // TODO 日期起始具体是哪年？
-  const start = dayjs('1949-01-04')
+  const start = dayjs('1900-01-01')
   let end = dayjs()
   if (model.value.dateEnd) {
     end = dayjs(model.value.dateEnd)
@@ -313,8 +315,7 @@ const disableDateStart = (ts: number) => {
 }
 const disableDateEnd = (ts: number) => {
   const cur = dayjs(ts)
-  // TODO 日期起始具体是哪年？
-  let start = dayjs('1949-01-04')
+  let start = dayjs('1900-01-01')
   const end = dayjs()
   if (model.value.dateStart) {
     start = dayjs(model.value.dateStart)

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

@@ -141,7 +141,7 @@
                   v-model:value="memberData.excludeCount"
                   size="small"
                   :show-button="false"
-                  :validator="checkMemberExcludeCount"
+                  :validator="checkMemberCount"
                 >
                   <template #suffix>人</template>
                 </n-input-number>
@@ -461,8 +461,8 @@ const rules: FormRules = {
     },
     {
       type: 'number',
-      validator: (_, val) => checkMemberExcludeCount(val),
-      message: '不能大于实际参与人数',
+      validator: (_, val) => checkMemberCount(val),
+      message: '不能大于党员总数',
       trigger: ['blur', 'input'],
     },
   ],
@@ -478,48 +478,57 @@ const rules: FormRules = {
   },
 }
 
-const submit = async () => {
-  let noMistake = true
-  basicRef.value?.validate((errors: any) => errors && (noMistake = false))
-  memberRef.value?.validate((errors: any) => errors && (noMistake = false))
-  detailRef.value?.validate((errors: any) => errors && (noMistake = false))
-  if (!noMistake) return
-  console.log(basicData.value, memberData.value, detailData.value)
-
-  const { name, type, orgName, date, address } = basicData.value
-  const { count, excludeCount } = memberData.value
-  const { attachment } = detailData.value
-  const data = {
-    活动名称: name,
-    标签类别: type,
-    党组织名称: orgName,
-    活动日期: +(date + '').slice(0, 10), // 截掉10位后的10，不然这接口会认为不是时间戳
-    活动地址: address,
-    实际参与人数: count,
-    不计入参与活动党员人数: excludeCount,
-    活动内容描述: attachment,
-    出席率: Math.round(((count - excludeCount) / totalPerson.value) * 100),
-  }
-  if (mode.value === 'modify') {
-    await usePutActivity({
-      separate: [
-        {
-          id: props.data.id,
-          extra: data,
-        },
-      ],
-    })
-    closeDrawer()
-    props.cb && props.cb()
-    message.success('活动修改成功')
-  } else {
-    await usePostActivity({
-      extra: data,
+const submit = () => {
+  basicRef.value?.validate((errors: any) => {
+    if (errors) return
+    memberRef.value?.validate((errors: any) => {
+      if (errors) return
+      detailRef.value?.validate(async (errors: any) => {
+        if (errors) return
+        const { name, type, orgName, date, address } = basicData.value
+        const { count, excludeCount } = memberData.value
+        const { attachment } = detailData.value
+        const data = {
+          活动名称: name,
+          标签类别: type,
+          党组织名称: orgName,
+          活动日期: +(date + '').slice(0, 10), // 截掉10位后的10，不然这接口会认为不是时间戳
+          活动地址: address,
+          实际参与人数: count,
+          不计入参与活动党员人数: excludeCount,
+          活动内容描述: attachment,
+          出席率:
+            totalPerson.value === excludeCount
+              ? 0
+              : getPercent(
+                  Math.round(
+                    (count / (totalPerson.value - excludeCount)) * 100,
+                  ),
+                ),
+        }
+        if (mode.value === 'modify') {
+          await usePutActivity({
+            separate: [
+              {
+                id: props.data.id,
+                extra: data,
+              },
+            ],
+          })
+          closeDrawer()
+          props.cb && props.cb()
+          message.success('活动修改成功')
+        } else {
+          await usePostActivity({
+            extra: data,
+          })
+          closeDrawer()
+          props.cb && props.cb()
+          message.success('活动新增成功')
+        }
+      })
     })
-    closeDrawer()
-    props.cb && props.cb()
-    message.success('活动新增成功')
-  }
+  })
 }
 
 // const previewFileList = ref([
@@ -535,6 +544,11 @@ function handlePreview(file: any) {
   showPhoto.value = true
 }
 
+function getPercent(val: number) {
+  if (val > 100) return 100
+  return val
+}
+
 async function onChange(options: any, type: string) {
   console.log('change', options, type)
   if (!options || !options.fileList || options.fileList.length === 0) return
@@ -579,9 +593,6 @@ watch(
 function checkMemberCount(val: number) {
   return val >= 0 && val <= totalPerson.value
 }
-function checkMemberExcludeCount(val: number) {
-  return val >= 0 && val <= memberData.value.count
-}
 const handleExport = async () => {
   const { name, type, orgName, date, address } = basicData.value
   const { count, excludeCount } = memberData.value
@@ -597,7 +608,12 @@ const handleExport = async () => {
     {
       实际参与人数: count,
       不计入参与活动党员人数: excludeCount,
-      出席率: Math.round(((count - excludeCount) / totalPerson.value) * 100),
+      出席率:
+        totalPerson.value === excludeCount
+          ? '0%'
+          : getPercent(
+              Math.round((count / (totalPerson.value - excludeCount)) * 100),
+            ) + '%',
     },
     {
       活动内容描述: attachment,