活动列表暂存待接口

src/util/tags.ts

@@ -14,7 +14,7 @@ export const organization = [
 export const activity = [
   { name: '支部党员大会', type: 'primary' },
   { name: '支部委员会', type: 'info' },
-  { name: '楼组党建会议', type: 'success' },
+  { name: '楼宇党建相关会议', type: 'success' },
   { name: '党课', type: 'warning' },
   { name: '主题党日活动', type: 'error' },
 ]

src/view/components/activity-drawer.vue

@@ -89,7 +89,7 @@ const list = ref([
   { title: '支部党员大会', count: 35, people: 890, ratio: 50, onMap: false },
   { title: '支部委员会', count: 35, people: 890, ratio: 50, onMap: false },
   {
-    title: '楼组党建相关会议',
+    title: '楼宇党建相关会议',
     count: 35,
     people: 890,
     ratio: 50,

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

@@ -100,24 +100,55 @@
 
 <script lang="ts" setup>
 import store from '@/store'
-import { computed, ref, h } from 'vue'
+import { computed, ref, h, onMounted, watch } from 'vue'
 import NewActivityDrawer from './new-activity-drawer.vue'
 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 useDebounce from '@/hooks/useDebounce'
 
 const message = useMessage()
 
+const activityList = ref([])
+
+const fetchList = useDebounce(async (query?: string) => {
+  activityList.value =
+    (await useFetchActivity({ q: query }))?.map((item: any) => item.extra) || []
+})
+onMounted(() => {
+  fetchList()
+})
 const show = computed(() => store.state.showActivityListModal)
 const close = (val: boolean) => {
   store.commit('SET_ACTIVITY_LIST_MODAL', val)
   store.commit('SET_SHOW_BASIC_INFO', true)
 }
-const model = ref({})
-const typeOptions = [
-  { label: '类型1', value: 'type1' },
-  { label: '类型2', value: 'type2' },
-]
+const model = ref<any>({})
+const typeOptions = computed(() => {
+  return activity.map((item) => ({
+    label: item.name,
+    value: item.name,
+  }))
+})
+watch(
+  () => model.value,
+  (cur) => {
+    const query = []
+    cur.dateRange &&
+      cur.dateRange.length > 0 &&
+      query.push(`paths @ "活动日期" && integer >= ${cur.dateRange[0]}`) &&
+      query.push(`paths @ "活动日期" && integer <= ${cur.dateRange[1]}`)
+    // TODO 出席率区间如何搜索
+    cur.rateStart &&
+      query.push(`paths @ "出席率" && integer >= ${cur.rateStart}`)
+    cur.rateEnd && query.push(`paths @ "出席率" && integer <= ${cur.rateEnd}`)
+    cur.type && query.push(`paths @ "标签类别" && string == "${cur.type}"`)
+    fetchList(query.length > 0 ? query.join(',') : undefined)
+  },
+  { deep: true },
+)
 
 const mockData = {
   name: '某某活动',
@@ -139,25 +170,42 @@ const openNewDrawer = (data: any = null) => {
 const deleteConfirm = ref(false)
 const curRow = ref<any>(null)
 const columns = [
-  { title: '活动名称', key: 'name' },
-  { title: '活动日期', key: 'date' },
+  { title: '活动名称', key: '活动名称' },
   {
-    title: '标签类别',
-    key: 'type',
+    title: '活动日期',
+    key: '活动日期',
     render(row: any) {
       return h(
+        'span',
+        {},
+        {
+          default: () =>
+            row['活动日期'] ? dayjs(row['活动日期']).format('ll') : '',
+        },
+      )
+    },
+  },
+  {
+    title: '标签类别',
+    key: '标签类别',
+    render(row: any) {
+      return row['标签类别']
+        ? h(
             NTag,
             {
               size: 'small',
-          type: activity?.find((e) => e.name === row.type)?.type,
+              type: row['标签类别']
+                ? activity?.find((e) => e.name === row['标签类别'])?.type
+                : 'default',
             },
-        { default: () => row.type },
+            { default: () => row['标签类别'] },
           )
+        : ''
     },
   },
-  { title: '活动地址', key: 'address' },
-  { title: '出席率', key: 'rate' },
-  { title: '参与人数', key: 'count' },
+  { title: '活动地址', key: '活动地址' },
+  { title: '出席率', key: '出席率' },
+  { title: '参与人数', key: '实际参与人数' },
   {
     title: ' ',
     key: 'actions',
@@ -174,7 +222,7 @@ const columns = [
               color: 'transparent',
               tag: 'a',
               textColor: '#3d7fe9',
-              onClick: () => openNewDrawer({ ...mockData, _mode: 'view' }),
+              onClick: () => openNewDrawer({ ...row, _mode: 'view' }),
             },
             { default: () => '查看' },
           ),
@@ -186,7 +234,7 @@ const columns = [
               color: 'transparent',
               tag: 'a',
               textColor: '#3d7fe9',
-              onClick: () => openNewDrawer({ ...mockData, _mode: 'modify' }),
+              onClick: () => openNewDrawer({ ...row, _mode: 'modify' }),
             },
             { default: () => '修改' },
           ),
@@ -210,128 +258,6 @@ const columns = [
     },
   },
 ]
-const activityList = [
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '支部党员大会',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '支部委员会',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '楼组党建会议',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '党课',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '主题党日活动',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '支部党员大会',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '支部委员会',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '楼组党建会议',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '党课',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '主题党日活动',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '支部党员大会',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '支部委员会',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '楼组党建会议',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '党课',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-  {
-    name: '某某党员大会',
-    date: '2020年8月1日',
-    type: '主题党日活动',
-    address: '某某区某某路某某小区某某号',
-    rate: '82%',
-    count: '200人',
-  },
-]
 const pagination = {
   pageSize: 10,
 }

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

@@ -59,20 +59,19 @@
                 />
               </n-form-item-gi>
               <n-form-item-gi
-                :span="12"
+                :span="24"
                 label="党组织名称（下拉或输入关键字选择）"
                 path="orgName"
               >
                 <p v-if="mode === 'view'">
                   {{
-                    typeOptions.find((e) => e.value === basicData.orgName)
-                      ?.label
+                    orgOptions.find((e) => e.value === basicData.orgName)?.label
                   }}
                 </p>
                 <n-select
                   v-else
                   v-model:value="basicData.orgName"
-                  :options="typeOptions"
+                  :options="orgOptions"
                   filterable
                 />
               </n-form-item-gi>
@@ -257,9 +256,11 @@
 
 <script lang="ts" setup>
 import store from '@/store'
-import { computed, PropType, ref, watch } from 'vue'
+import { computed, onMounted, PropType, ref, watch } from 'vue'
 import { NForm } from 'naive-ui'
 import exportIcon from '@images/export.svg'
+import { activity } from '@/util/tags'
+import { useFetchOrg } from '@/hooks/useFetch'
 
 const props = defineProps({
   data: {
@@ -269,13 +270,28 @@ const props = defineProps({
 })
 const mode = ref<string | null>(null)
 
+const orgOptions = ref([])
+onMounted(async () => {
+  orgOptions.value = (
+    await useFetchOrg({
+      a: 'id,count',
+      keys: '党组织名称',
+    })
+  )?.map((item: any) => ({
+    label: item['党组织名称'],
+    value: item['党组织名称'],
+  }))
+})
+
 const show = computed(() => store.state.showNewActivityDrawer)
 const closeDrawer = () => store.commit('SET_NEW_ACTIVITY_DRAWER', false)
 
-const typeOptions = [
-  { label: '类型1', value: 'type1' },
-  { label: '类型2', value: 'type2' },
-]
+const typeOptions = computed(() => {
+  return activity.map((item) => ({
+    label: item.name,
+    value: item.name,
+  }))
+})
 const fileOptions = [
   { label: '电子表格（docx、doc、xlsx、xls、csv、txt）', value: 'file' },
   { label: '描述照片（jpg、jpeg、png、img）', value: 'photo' },
@@ -440,10 +456,10 @@ function handlePreview(file: any) {
   top 0
   .n-drawer-header__main
     width 100%
-  .n-input-wrapper
-    padding-right 0
   .n-input-number
     width 100%
+    .n-input-wrapper
+      padding-right 0
     .n-input__suffix
       background #f3f4f7
       border-left .01rem solid $light-gray