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">
+  <m-animate enter="fadeInRight" leave="fadeOutLeft" :duration="200">
+    <div v-if="show" class="container">
       <n-collapse
         id="basic-info"
         arrow-placement="right"
@@ -81,12 +82,15 @@
         </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">