activity-list-modal

src/App.vue

@@ -30,6 +30,27 @@ const themeOverrides: GlobalThemeOverrides = {
   Checkbox: {
     textColor: '#6E798C',
   },
+  Card: {
+    borderRadius: '.06rem',
+  },
+  Tag: {
+    borderRadius: '.04rem',
+    colorPrimary: '#FCF4F5',
+    borderPrimary: '#FCF4F5',
+    textColorPrimary: '#DD505E',
+    colorInfo: '#ECEFFA',
+    borderInfo: '#ECEFFA',
+    textColorInfo: '#3D7FE9',
+    colorSuccess: '#E9F7F0',
+    borderSuccess: '#E9F7F0',
+    textColorSuccess: '#2BB480',
+    colorWarning: '#FFF4E6',
+    borderWarning: '#FFF4E6',
+    textColorWarning: '#E59B00',
+    colorError: '#F5F0F9',
+    borderError: '#F5F0F9',
+    textColorError: '#AC60CA',
+  },
 }
 </script>
 

src/main.ts

@@ -23,6 +23,12 @@ import {
   NSwitch,
   NInputNumber,
   NCarousel,
+  NModal,
+  NForm,
+  NFormItem,
+  NSelect,
+  NDataTable,
+  NTag,
 } from 'naive-ui'
 
 const naive = create({
@@ -44,6 +50,12 @@ const naive = create({
     NSwitch,
     NInputNumber,
     NCarousel,
+    NModal,
+    NForm,
+    NFormItem,
+    NSelect,
+    NDataTable,
+    NTag,
   ],
 })
 

src/store/mutations.ts

@@ -4,6 +4,9 @@ export default {
   SET_LOADING(state: GlobalStateProps, val: boolean) {
     state.showLoading = val
   },
+  SET_SHOW_BASIC_INFO(state: GlobalStateProps, val: boolean) {
+    state.showBasicInfo = val
+  },
   SET_FILTER_DRAWER(state: GlobalStateProps, val: boolean) {
     state.showFilterDrawer = val
   },
@@ -13,4 +16,7 @@ export default {
   SET_BUILDING_DRAWER(state: GlobalStateProps, val: boolean) {
     state.showBuildingDrawer = val
   },
+  SET_ACTIVITY_LIST_MODAL(state: GlobalStateProps, val: boolean) {
+    state.showActivityListModal = val
+  },
 }

src/store/state.ts

 export default {
   showLoading: false,
+  showBasicInfo: true,
   showFilterDrawer: false,
   showActivityDrawer: false,
   showBuildingDrawer: false,
+  showActivityListModal: false,
 }

src/util/tags.ts

+export const member = [
+  { name: '荣获区级奖项党员', type: 'primary' },
+  { name: '荣获市级及以上奖项党员', type: 'info' },
+  { name: '光荣在当党50年', type: 'success' },
+  { name: '党心暖我新', type: 'warning' },
+]
+
+export const organization = [
+  { name: '荣获区级奖项党组织', type: 'primary' },
+  { name: '荣获市级及以上奖项党组织', type: 'info' },
+  { name: '光荣在当党50年', type: 'success' },
+  { name: '党心暖我新', type: 'warning' },
+]
+export const activity = [
+  { name: '支部党员大会', type: 'primary' },
+  { name: '支部委员会', type: 'info' },
+  { name: '楼组党建会议', type: 'success' },
+  { name: '党课', type: 'warning' },
+  { name: '主题党日活动', type: 'error' },
+]

src/view/components/activity-drawer.vue

@@ -10,7 +10,12 @@
       <div class="content">
         <div class="head">
           <p>活动日期</p>
-          <n-button color="#dd505e" text-color="#fff" size="tiny">
+          <n-button
+            color="#dd505e"
+            text-color="#fff"
+            size="tiny"
+            @click="showModal"
+          >
             活动录入
           </n-button>
         </div>
@@ -66,14 +71,20 @@
       </div>
     </n-drawer-content>
   </n-drawer>
+  <ActivityListModal />
 </template>
 
 <script lang="ts" setup>
 import store from '@/store'
 import { computed, ref } from 'vue'
 import { Checkmark, Close } from '@vicons/ionicons5'
+import ActivityListModal from './activity-list-modal.vue'
+
 const show = computed(() => store.state.showActivityDrawer)
-const closeDrawer = () => store.commit('SET_ACTIVITY_DRAWER', false)
+const closeDrawer = () => {
+  store.commit('SET_ACTIVITY_DRAWER', false)
+  store.commit('SET_SHOW_BASIC_INFO', true)
+}
 const list = ref([
   { title: '支部党员大会', count: 35, people: 890, ratio: 50, onMap: false },
   { title: '支部委员会', count: 35, people: 890, ratio: 50, onMap: false },
@@ -87,6 +98,11 @@ const list = ref([
   { title: '党课', count: 35, people: 890, ratio: 50, onMap: false },
   { title: '主题党日活动', count: 35, people: 890, ratio: 50, onMap: false },
 ])
+
+const showModal = () => {
+  store.commit('SET_SHOW_BASIC_INFO', false)
+  store.commit('SET_ACTIVITY_LIST_MODAL', true)
+}
 </script>
 
 <style lang="stylus" scoped>

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

+<template>
+  <n-modal
+    :show="show"
+    :on-update:show="close"
+    :mask-closable="false"
+    style="width: 98vw; transform: translateY(4%)"
+    preset="card"
+    title="党建活动录入"
+  >
+    <div class="content">
+      <div id="activity-filter">
+        <n-form
+          ref="formRef"
+          :model="model"
+          label-placement="left"
+          label-width="1rem"
+          size="small"
+          inline
+        >
+          <n-form-item label="活动日期区间" path="dateRange">
+            <n-date-picker
+              v-model:value="model.dateRange"
+              start-placeholder="请选择日期"
+              end-placeholder="请选择日期"
+              size="small"
+              separator="至"
+              type="daterange"
+            />
+          </n-form-item>
+          <n-form-item label="出席率区间" path="rateStart">
+            <n-input-number
+              v-model:value="model.rateStart"
+              :show-button="false"
+              size="small"
+              :min="0"
+              :max="model.rateEnd || 100"
+            >
+              <template #suffix>%</template>
+            </n-input-number>
+          </n-form-item>
+          <span class="dot">- </span>
+          <n-form-item path="rateEnd">
+            <n-input-number
+              v-model:value="model.rateEnd"
+              size="small"
+              :show-button="false"
+              :min="model.rateStart || 0"
+              :max="100"
+            >
+              <template #suffix>%</template>
+            </n-input-number>
+          </n-form-item>
+          <n-form-item label="标签类别" path="type">
+            <n-select
+              v-model:value="model.type"
+              size="small"
+              :options="typeOptions"
+            />
+          </n-form-item>
+          <n-form-item>
+            <n-button color="#dd505e" text-color="#fff" @click="openNewDrawer">
+              <n-icon size=".1rem">
+                <Add />
+              </n-icon>
+              新增活动
+            </n-button>
+          </n-form-item>
+        </n-form>
+      </div>
+      <div class="list">
+        <n-data-table
+          class="activity-table"
+          :columns="columns"
+          :data="activityList"
+          :pagination="pagination"
+          size="small"
+        />
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import store from '@/store'
+import { computed, ref, h } from 'vue'
+import { Add } from '@vicons/ionicons5'
+import { NButton, NTag } from 'naive-ui'
+import { activity } from '@/util/tags'
+
+const show = computed(() => store.state.showActivityListModal)
+const close = (val: boolean) => store.commit('SET_ACTIVITY_LIST_MODAL', val)
+const model = ref({})
+const typeOptions = [
+  { label: '类型1', value: 'type1' },
+  { label: '类型2', value: 'type2' },
+]
+const openNewDrawer = () => {
+  // showNewActivityDrawer.value = true
+  console.log(model.value)
+}
+const columns = [
+  { title: '活动名称', key: 'name' },
+  { title: '活动日期', key: 'date' },
+  {
+    title: '标签类别',
+    key: 'type',
+    render(row: any) {
+      return h(
+        NTag,
+        {
+          size: 'small',
+          type: activity?.find((e) => e.name === row.type)?.type,
+        },
+        { default: () => row.type },
+      )
+    },
+  },
+  { title: '活动地址', key: 'address' },
+  { title: '出席率', key: 'rate' },
+  { title: '参与人数', key: 'count' },
+  {
+    title: ' ',
+    key: 'actions',
+    render(row: any) {
+      return h(
+        'div',
+        { style: { display: 'flex', justifyContent: 'flex-end' } },
+        [
+          h(
+            NButton,
+            {
+              size: 'tiny',
+              type: 'primary',
+              color: 'transparent',
+              tag: 'a',
+              textColor: '#3d7fe9',
+              onClick: () => console.log(row),
+            },
+            { default: () => '查看' },
+          ),
+          h(
+            NButton,
+            {
+              size: 'tiny',
+              type: 'primary',
+              color: 'transparent',
+              tag: 'a',
+              textColor: '#3d7fe9',
+              onClick: () => console.log(row),
+            },
+            { default: () => '修改' },
+          ),
+          h(
+            NButton,
+            {
+              size: 'tiny',
+              type: 'primary',
+              color: 'transparent',
+              tag: 'a',
+              textColor: '#dd505E',
+              onClick: () => console.log(row),
+            },
+            { default: () => '删除' },
+          ),
+        ],
+      )
+    },
+  },
+]
+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,
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.content
+  height 100%
+  background #ededed
+  border-radius .06rem
+  #activity-filter
+    background #fafafa
+    padding .2rem .05rem 0
+    .dot
+      margin-right .15rem
+      font-size .14rem
+      color $gray
+  .list
+    padding .08rem
+    .activity-table
+      font-size .08rem
+</style>
+<style lang="stylus">
+@import '../../components/MyComponent/main.styl'
+.n-modal.n-card
+  .n-card-header
+    background $white-bg
+    box-shadow  0 0.02rem .05rem rgba(0,0,0,0.1)
+    font-family $font-ping-medium
+    border-radius inherit
+    z-index 2
+  .n-card__content
+    padding 0
+#activity-filter
+  .n-select
+    width 1rem
+  .n-input-number
+    width 1rem
+    .n-input-wrapper
+      padding-right 0
+      .n-input__suffix
+        background #f3f4f7
+        border-left .01rem solid $light-gray
+        padding 0 .05rem
+  .n-form-item-label
+    font-size .1rem
+    color $font
+  .n-date-picker
+    width 2rem
+    .n-input
+      background #fff
+.activity-table
+  .n-scrollbar-container
+    border-radius .06rem
+</style>

src/view/components/basic-info.vue

 <template>
-  <div class="container">
-    <n-collapse
-      id="basic-info"
-      arrow-placement="right"
-      default-expanded-names="1"
-      accordion
-    >
-      <n-collapse-item name="1">
-        <div class="info-wrapper">
-          <div class="sum">
-            <div v-for="item in sumList" :key="item.name">
-              <p>
-                <m-count class="count" :value="item.value" />
-                <span>{{ item.unit }}</span>
-              </p>
-              <p>{{ item.name }}</p>
-            </div>
-          </div>
-          <div class="box">
-            <p class="title">关系在街道党员分类</p>
-            <div class="content">
-              <div class="pie">
-                <m-pie :option="pieOption" :dataset="data1" />
+  <m-animate enter="fadeInRight" leave="fadeOutLeft" :duration="200">
+    <div v-if="show" class="container">
+      <n-collapse
+        id="basic-info"
+        arrow-placement="right"
+        default-expanded-names="1"
+        accordion
+      >
+        <n-collapse-item name="1">
+          <div class="info-wrapper">
+            <div class="sum">
+              <div v-for="item in sumList" :key="item.name">
+                <p>
+                  <m-count class="count" :value="item.value" />
+                  <span>{{ item.unit }}</span>
+                </p>
+                <p>{{ item.name }}</p>
               </div>
-              <div>
-                <div v-for="(item, i) in data1.source" :key="item.name">
-                  <p>
-                    <i class="dot" :style="`background:${color1[i]}`" />
-                    {{ item.name }}
-                  </p>
-                  <p>
-                    <span><m-count :value="item.ratio" /> %</span>
-                    <span><m-count :value="item.value" /> 位</span>
-                  </p>
+            </div>
+            <div class="box">
+              <p class="title">关系在街道党员分类</p>
+              <div class="content">
+                <div class="pie">
+                  <m-pie :option="pieOption" :dataset="data1" />
+                </div>
+                <div>
+                  <div v-for="(item, i) in data1.source" :key="item.name">
+                    <p>
+                      <i class="dot" :style="`background:${color1[i]}`" />
+                      {{ item.name }}
+                    </p>
+                    <p>
+                      <span><m-count :value="item.ratio" /> %</span>
+                      <span><m-count :value="item.value" /> 位</span>
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="box">
-            <p class="title">党组织分类</p>
-            <div class="content">
-              <div class="pie">
-                <m-pie
-                  :option="{ ...pieOption, color: color2 }"
-                  :dataset="data2"
-                />
-              </div>
-              <div>
-                <div v-for="(item, i) in data2.source" :key="item.name">
-                  <p>
-                    <i class="dot" :style="`background:${color2[i]}`" />
-                    {{ item.name }}
-                  </p>
-                  <p>
-                    <span><m-count :value="item.ratio" /> %</span>
-                    <span><m-count :value="item.value" /> 个</span>
-                  </p>
+            <div class="box">
+              <p class="title">党组织分类</p>
+              <div class="content">
+                <div class="pie">
+                  <m-pie
+                    :option="{ ...pieOption, color: color2 }"
+                    :dataset="data2"
+                  />
+                </div>
+                <div>
+                  <div v-for="(item, i) in data2.source" :key="item.name">
+                    <p>
+                      <i class="dot" :style="`background:${color2[i]}`" />
+                      {{ item.name }}
+                    </p>
+                    <p>
+                      <span><m-count :value="item.ratio" /> %</span>
+                      <span><m-count :value="item.value" /> 个</span>
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="box">
-            <p class="title">关系在街道党员年龄分布</p>
-            <div class="content">
-              <m-line :option="lineOption" :dataset="data3" />
+            <div class="box">
+              <p class="title">关系在街道党员年龄分布</p>
+              <div class="content">
+                <m-line :option="lineOption" :dataset="data3" />
+              </div>
             </div>
           </div>
+        </n-collapse-item>
+      </n-collapse>
+      <m-animate enter="fadeInUp" leave="fadeOutDown" :duration="100">
+        <div v-if="visible" class="tag-box">
+          <span
+            v-for="tag in tagList"
+            :key="tag.name"
+            :class="{ on: tag.key === curTagKey }"
+            @click="clickTag(tag.key)"
+            >{{ tag.name }}</span
+          >
         </div>
-      </n-collapse-item>
-    </n-collapse>
-    <m-animate enter="fadeInUp" leave="fadeOutDown" :duration="100">
-      <div v-if="visible" class="tag-box">
-        <span
-          v-for="tag in tagList"
-          :key="tag.name"
-          :class="{ on: tag.key === curTagKey }"
-          @click="clickTag(tag.key)"
-          >{{ tag.name }}</span
-        >
-      </div>
-    </m-animate>
-  </div>
+      </m-animate>
+    </div>
+  </m-animate>
 </template>
 
 <script lang="ts" setup>
 import { ChartTypes } from '@/components/MyComponent'
 import { ref, PropType, computed } from 'vue'
+import store from '@/store'
 
+const show = computed(() => store.state.showBasicInfo)
 const props = defineProps({
   visible: {
     type: Boolean as PropType<boolean>,

src/view/components/info-modal.vue

@@ -2,8 +2,10 @@
   <div class="info">
     <p class="title">某某党组织</p>
     <n-space>
-      <span class="tag red">荣获区级奖项党组织</span>
-      <span class="tag blue">荣获市级及以上奖项党组织</span>
+      <n-tag class="tag" type="primary" size="small">荣获区级奖项党组织</n-tag>
+      <n-tag class="tag" type="info" size="small">
+        荣获市级及以上奖项党组织
+      </n-tag>
     </n-space>
     <p>上海市浦东新区梅花路1099号</p>
     <div class="box flex">
@@ -33,7 +35,9 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { organization } from '@/util/tags'
+</script>
 
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
@@ -49,19 +53,7 @@
     font-size .13rem
     font-family $font-ping-medium
   .tag
-    display inline-block
-    box-sizing border-box
-    padding .02rem .06rem
-    font-size .08rem
     margin .05rem 0
-    border-radius .03rem
-    font-family $font-ping-medium
-    &.red
-      background $light-red
-      color $red
-    &.blue
-      background $light-blue
-      color $blue
   .box
     background $white-bg
     border-radius .03rem

src/view/main.vue

 <template>
   <NavBar @focus="showTag = false" @blur="showTag = true" />
   <BasicInfo :visible="showTag" />
-  <div class="reset">
+  <div v-if="showReset" class="reset">
     <n-icon class="icon" size=".14rem">
       <svg-icon :data="reset" original />
     </n-icon>
   </div>
-  <!-- <InforModal class="fix1" /> -->
-  <ActivityDetail class="fix1" />
+  <InforModal class="fix1" />
+  <!-- <ActivityDetail class="fix1" /> -->
   <ListModal class="fix2" pagination />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import NavBar from './components/nav-bar.vue'
 import BasicInfo from './components/basic-info.vue'
 import InforModal from './components/info-modal.vue'
 import ListModal from './components/list-modal.vue'
 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)
 </script>
 
 <style lang="stylus">