Skip to content

H
huamu
Commit 32ae49ba authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

struct-modal

parent 53ca8352
Hide whitespace changes
Inline Side-by-side
Showing with 648 additions and 8 deletions
src/App.vue
View file @ 32ae49ba
...@@ -97,6 +97,20 @@ const themeOverrides: GlobalThemeOverrides = { ...@@ -97,6 +97,20 @@ const themeOverrides: GlobalThemeOverrides = {
labelTextColor: '#6E798C', labelTextColor: '#6E798C',
labelFontSizeTopSmall: '.09rem', labelFontSizeTopSmall: '.09rem',
}, },
Menu: {
borderRadius: '.06rem',
fontSize: '.13rem',
itemIconColor: '#b9bdc5',
itemTextColor: 'rgba(0,0,0,0.5)',
arrowColor: 'rgba(0,0,0,0.5)',
itemTextColorHover: '#dd505E',
itemIconColorHover: '#dd505E',
arrowColorHover: '#dd505E',
itemColorActive: '#fcf4f5',
},
DataTable: {
fontSizeSmall: '.01rem',
},
} }
</script> </script>
......
src/assets/images/party.svg 0 → 100644
View file @ 32ae49ba
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.00648 0.00306995C13.6509 1.74489 16.4692 7.31164 14.0552 11.8226L8.16329 5.90351L10.4125 3.64662L9.00578 2.2468C8.22975 3.00694 6.99611 3.16894 6.164 2.83387L1.68569 7.31441L4.22217 9.84129L5.91271 8.15693L11.8026 14.0664C8.91994 15.6497 4.92483 15.1505 1.97644 12.0878L0.547588 13.5112C0.975413 14.1038 1.33401 14.641 1.77983 15.0917C1.74038 15.1387 1.61854 15.2391 1.61577 15.2419C1.541 15.2294 1.45239 15.2004 1.37347 15.2004C0.613354 15.2004 0 15.8615 0 16.6216C0.000692273 17.3811 0.620277 18 1.3797 18C2.13982 18 2.78986 17.3755 2.78986 16.6154C2.78986 16.5268 2.76979 16.4458 2.75525 16.3627L2.97401 16.1467C6.36407 18.4334 10.0795 18.7179 14.0767 16.326L15.7278 17.9827L17.9873 15.7535L16.3259 14.0747C21.0943 6.88934 14.7364 -0.168619 9.00717 0.00306995H9.00648Z" fill="currentColor"/>
</svg>
src/main.ts
View file @ 32ae49ba
...@@ -32,7 +32,13 @@ import { ...@@ -32,7 +32,13 @@ import {
NGrid, NGrid,
NFormItemGi, NFormItemGi,
NUpload, NUpload,
NLayout,
NLayoutSider,
NLayoutHeader,
NLayoutContent,
NMenu,
} from 'naive-ui' } from 'naive-ui'
import { normalizeHue } from 'naive-ui/lib/color-picker/src/utils'
const naive = create({ const naive = create({
components: [ components: [
...@@ -62,6 +68,11 @@ const naive = create({ ...@@ -62,6 +68,11 @@ const naive = create({
NGrid, NGrid,
NFormItemGi, NFormItemGi,
NUpload, NUpload,
NLayout,
NLayoutSider,
NMenu,
NLayoutHeader,
NLayoutContent,
], ],
}) })
......
src/store/mutations.ts
View file @ 32ae49ba
...@@ -22,4 +22,7 @@ export default { ...@@ -22,4 +22,7 @@ export default {
SET_ACTIVITY_LIST_MODAL(state: GlobalStateProps, val: boolean) { SET_ACTIVITY_LIST_MODAL(state: GlobalStateProps, val: boolean) {
state.showActivityListModal = val state.showActivityListModal = val
}, },
SET_STRUCT_MODAL(state: GlobalStateProps, val: boolean) {
state.showStructModal = val
},
} }
src/store/state.ts
View file @ 32ae49ba
...@@ -6,4 +6,5 @@ export default { ...@@ -6,4 +6,5 @@ export default {
showNewActivityDrawer: false, showNewActivityDrawer: false,
showBuildingDrawer: false, showBuildingDrawer: false,
showActivityListModal: false, showActivityListModal: false,
showStructModal: false,
} }
src/view/components/activity-detail.vue
View file @ 32ae49ba
...@@ -37,9 +37,9 @@ ...@@ -37,9 +37,9 @@
</div> </div>
</div> </div>
</div> </div>
<n-button class="export-btn" color="#dd505e" text-color="#fff" size="small"> <n-button class="export-btn" type="primary" size="small">
<template #icon> <template #icon>
<n-icon size=".12rem" color="#fff"> <n-icon size=".12rem">
<svg-icon :data="exportIcon" original /> <svg-icon :data="exportIcon" original />
</n-icon> </n-icon>
</template> </template>
......
src/view/components/nav-bar.vue
View file @ 32ae49ba
...@@ -38,7 +38,12 @@ ...@@ -38,7 +38,12 @@
> >
<svg-icon :data="nav2" original /> <svg-icon :data="nav2" original />
</n-icon> </n-icon>
<n-icon class="btn" size=".12rem"> <n-icon
class="btn"
:class="{ on: showStructModal }"
size=".12rem"
@click="onClick('struct')"
>
<svg-icon :data="nav3" original /> <svg-icon :data="nav3" original />
</n-icon> </n-icon>
<n-dropdown :options="options" show-arrow> <n-dropdown :options="options" show-arrow>
...@@ -69,6 +74,7 @@ ...@@ -69,6 +74,7 @@
<FilterDrawer /> <FilterDrawer />
<BuildingDrawer /> <BuildingDrawer />
<ActivityDrawer /> <ActivityDrawer />
<StructModal />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -79,6 +85,7 @@ import SearchModal from './search-modal.vue' ...@@ -79,6 +85,7 @@ import SearchModal from './search-modal.vue'
import FilterDrawer from './filter-drawer.vue' import FilterDrawer from './filter-drawer.vue'
import ActivityDrawer from './activity-drawer.vue' import ActivityDrawer from './activity-drawer.vue'
import BuildingDrawer from './building-drawer.vue' import BuildingDrawer from './building-drawer.vue'
import StructModal from './struct-modal.vue'
import { CaretDown } from '@vicons/ionicons5' import { CaretDown } from '@vicons/ionicons5'
import nav1 from '@images/nav1.svg' import nav1 from '@images/nav1.svg'
import nav2 from '@images/nav2.svg' import nav2 from '@images/nav2.svg'
...@@ -89,9 +96,11 @@ import nav5 from '@images/nav5.svg' ...@@ -89,9 +96,11 @@ import nav5 from '@images/nav5.svg'
const showFilterDrawer = computed(() => store.state.showFilterDrawer) const showFilterDrawer = computed(() => store.state.showFilterDrawer)
const showBuildingDrawer = computed(() => store.state.showBuildingDrawer) const showBuildingDrawer = computed(() => store.state.showBuildingDrawer)
const showActivityDrawer = computed(() => store.state.showActivityDrawer) const showActivityDrawer = computed(() => store.state.showActivityDrawer)
const showStructModal = computed(() => store.state.showStructModal)
const onClick = (type: string) => { const onClick = (type: string) => {
store.commit('SET_FILTER_DRAWER', false) store.commit('SET_FILTER_DRAWER', false)
store.commit('SET_ACTIVITY_DRAWER', false) store.commit('SET_ACTIVITY_DRAWER', false)
store.commit('SET_STRUCT_MODAL', false)
switch (type) { switch (type) {
case 'filter': case 'filter':
store.commit('SET_FILTER_DRAWER', true) store.commit('SET_FILTER_DRAWER', true)
...@@ -99,6 +108,10 @@ const onClick = (type: string) => { ...@@ -99,6 +108,10 @@ const onClick = (type: string) => {
case 'activity': case 'activity':
store.commit('SET_ACTIVITY_DRAWER', true) store.commit('SET_ACTIVITY_DRAWER', true)
break break
case 'struct':
store.commit('SET_STRUCT_MODAL', true)
store.commit('SET_SHOW_BASIC_INFO', false)
break
default: default:
break break
} }
......
src/view/components/new-activity-drawer.vue
View file @ 32ae49ba
...@@ -17,9 +17,11 @@ ...@@ -17,9 +17,11 @@
编辑 编辑
</n-button> </n-button>
<n-button type="primary" size="small" @click="submit"> <n-button type="primary" size="small" @click="submit">
<n-icon size=".1rem"> <template #icon>
<svg-icon :data="exportIcon" original /> <n-icon size=".12rem">
</n-icon> <svg-icon :data="exportIcon" original />
</n-icon>
</template>
导出 导出
</n-button> </n-button>
</template> </template>
......
src/view/components/party-icon.vue 0 → 100644
View file @ 32ae49ba
<template>
<n-icon size=".14rem" style="margin-bottom: 0.03rem">
<svg-icon :data="party" original />
</n-icon>
</template>
<script lang="ts" setup>
import party from '@images/party.svg'
</script>
src/view/components/struct-modal.vue 0 → 100644
View file @ 32ae49ba
<template>
<n-modal
:show="show"
:mask-closable="false"
style="width: 98vw; transform: translateY(4%)"
>
<div id="struct-modal">
<n-layout class="layout" has-sider>
<n-layout-sider width="23%" class="side-menu">
<h2
:class="{ on: curKey === 'default' }"
@click.prevent="
() => {
setCurKey('default', {
label: '中共浦东新区花木街道工作委员会',
})
handleExpand([])
}
"
>
中共浦东新区花木街道工作委员会
</h2>
<div class="menu">
<n-menu
:options="menus"
:expanded-keys="expandedKeys"
:on-update:expanded-keys="handleExpand"
:value="curKey"
:on-update:value="setCurKey"
/>
</div>
</n-layout-sider>
<n-layout has-sider>
<n-layout-sider
width="23%"
:collapsed="!showSubordinates"
:collapsed-width="0"
collapsed-mode="width"
class="sub"
>
<p
v-for="item in subList"
:key="item.key"
:class="{ on: subKey === item.key }"
@click.prevent="setSub(item)"
>
{{ item.label }}
</p>
</n-layout-sider>
<n-layout class="wrapper">
<n-layout-header class="head">
<n-space>
<p>{{ curMenu.label }}</p>
<n-tag type="primary" size="small">标签</n-tag>
<n-tag type="info" size="small">标签</n-tag>
<n-tag type="success" size="small">标签</n-tag>
</n-space>
<n-icon class="close-btn" size=".2rem" @click.prevent="close">
<CloseOutline />
</n-icon>
</n-layout-header>
<n-layout-content class="content">
<div v-if="curKey === 'default'" class="card">
<div class="row">
<span>党工委书记</span>
<p>内容</p>
</div>
<div class="row">
<span>党工委副书记</span>
<p>内容</p>
</div>
<div class="row">
<span>党组织地址</span>
<p>内容</p>
</div>
<div class="row">
<span>党组织内党员数量</span>
<p>内容</p>
</div>
</div>
<div v-else-if="curKey === '1'" class="card">
<div class="row">
<span>书记</span>
<p>内容</p>
</div>
<div class="row">
<span>党组织地址</span>
<p>内容</p>
</div>
</div>
<div
v-else-if="
curKey === '2' ||
curKey === '3' ||
(curKey.split('-').length === 3 && curMenu._hasSub)
"
class="card"
>
<div class="flex">
<div class="col">
<div class="row">
<span>党总支书记</span>
<p>内容</p>
</div>
<div class="row">
<span>党组织地址</span>
<p>内容</p>
</div>
<div class="row">
<span>党组织内党员数量</span>
<p>内容</p>
</div>
</div>
<div class="col">
<div class="row">
<span>党总支委员</span>
<p>内容</p>
</div>
<div class="row">
<span>党组织联系方式</span>
<p>内容</p>
</div>
</div>
</div>
</div>
<template
v-else-if="
((curKey.startsWith('2') || curKey.startsWith('3')) &&
curKey.split('-').length === 2) ||
(curKey.split('-').length === 3 && !curMenu._hasSub)
"
>
<div class="card">
<div class="flex">
<div class="col">
<div class="row">
<span>党总支书记</span>
<p>内容</p>
</div>
<div class="row">
<span>党组织地址</span>
<p>内容</p>
</div>
<div class="row">
<span>党组织内党员数量</span>
<p>内容</p>
</div>
</div>
<div class="col">
<div class="row">
<span>党总支委员</span>
<p>内容</p>
</div>
<div class="row">
<span>党组织联系方式</span>
<p>内容</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="title">
<p>党员详表</p>
<n-button type="primary" size="tiny" @click="exportList">
<template #icon>
<n-icon size=".12rem">
<svg-icon :data="exportIcon" original />
</n-icon>
</template>
导出
</n-button>
</div>
<n-data-table
class="activity-table"
:columns="columns"
:data="tableList"
:pagination="pagination"
size="small"
/>
</div>
</template>
</n-layout-content>
</n-layout>
</n-layout>
</n-layout>
</div>
</n-modal>
</template>
<script lang="ts" setup>
import store from '@/store'
import { computed, h, ref } from 'vue'
import PartyIcon from './party-icon.vue'
import exportIcon from '@images/export.svg'
import { CloseOutline } from '@vicons/ionicons5'
const show = computed(() => store.state.showStructModal)
const close = () => {
store.commit('SET_STRUCT_MODAL', false)
store.commit('SET_SHOW_BASIC_INFO', true)
}
function renderIcon() {
return () => h(PartyIcon)
}
const menus = [
{ label: '行政党组', key: '1', icon: renderIcon() },
{
label: '机关事业单位党总支',
key: '2',
icon: renderIcon(),
children: [
{
label: '机关第一党支部',
key: '2-1',
},
{
label: '机关第二党支部',
key: '2-2',
},
{
label: '机关第三党支部',
key: '2-3',
},
{
label: '机关第四党支部',
key: '2-4',
},
{
label: '社区事务受理中心党总支',
key: '2-5',
},
{
label: '社区党建服务中心党支部',
key: '2-6',
},
{
label: '社区文化活动中心党支部',
key: '2-7',
},
{
label: '城市网格化综合管理中心党支部',
key: '2-8',
},
{
label: '社区综治中心党支部',
key: '2-9',
},
{
label: '保安协管大队党支部',
key: '2-10',
},
{
label: '城市管理执法支队花木中队党支部',
key: '2-11',
},
{
label: '城市建设管理事务中心党支部',
key: '2-12',
},
{
label: '花木街道机关退休干部党支部',
key: '2-13',
},
{
label: '花木街道机关离休干部党支部',
key: '2-14',
},
],
},
{
label: '社区党委',
key: '3',
icon: renderIcon(),
children: [
{
label: '六大社区党委',
key: '3-1',
children: [
{
label: '牡丹社区党委',
key: '3-1-1',
_hasSub: true,
},
{
label: '自由社区党委',
key: '3-1-2',
},
{
label: '培花社区党委',
key: '3-1-3',
},
{
label: '东城社区党委',
key: '3-1-4',
},
{
label: '联洋社区党委',
key: '3-1-5',
},
{
label: '钦阳社区党委',
key: '3-1-6',
},
],
},
{
label: '“两新”党组织',
key: '3-2',
},
{
label: '花木经济发展总公司党支部',
key: '3-3',
},
{
label: '花木房地产开发经营公司党支部',
key: '3-4',
},
{
label: '花木街道鑫荣联力联合党支部',
key: '3-5',
},
{
label: '上海钦洋投资管理中心党总支',
key: '3-6',
},
],
},
]
const subList = [
{ label: '牡丹社区直属党支部', key: '3-1-1-1' },
{ label: '牡丹第一居民区党总支', key: '3-1-1-2' },
{ label: '牡丹第二居民区党总支', key: '3-1-1-3' },
{ label: '牡丹第三居民区党总支', key: '3-1-1-4' },
{ label: '牡丹第四居民区党总支', key: '3-1-1-5' },
{ label: '牡丹第五居民区党总支', key: '3-1-1-6' },
{ label: '牡丹第六居民区党总支', key: '3-1-1-7' },
{ label: '牡丹第七居民区党总支', key: '3-1-1-8' },
{ label: '牡丹第八居民区党总支', key: '3-1-1-9' },
{ label: '牡丹第九居民区党总支', key: '3-1-1-10' },
{ label: '牡丹兰庭居民区党支部', key: '3-1-1-11' },
]
const expandedKeys = ref<string[]>([])
const handleExpand = (val: string[]) => {
if (expandedKeys.value.length === 0 || val.length === 0) {
expandedKeys.value = val
} else if (val[val.length - 1].startsWith(expandedKeys.value[0])) {
expandedKeys.value = val
} else {
expandedKeys.value = [val[val.length - 1]]
}
console.log(expandedKeys.value)
if (expandedKeys.value.length === 0) return
curKey.value = expandedKeys.value[0]
curMenu.value = menus.find((e) => e.key === curKey.value)!
}
const curKey = ref('default')
const subKey = ref<string | null>(null)
const curMenu = ref<any>({
label: '中共浦东新区花木街道工作委员会',
key: 'default',
})
const setCurKey = (val: string, item: any) => {
curKey.value = val
curMenu.value = item
subKey.value = null
if (val === 'default' || val === '1') handleExpand([])
}
const showSubordinates = computed(() => curMenu.value._hasSub || !!subKey.value)
const setSub = (data: any) => {
subKey.value = data.key
curMenu.value = data
}
const columns = [
{ title: '姓名', key: 'name' },
{ title: '性别', key: 'gender' },
{ title: '民族', key: 'ethic' },
{ title: '所属党组织', key: 'org' },
]
const tableList = [
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
{
name: '内容',
gender: '内容',
ethic: '内容',
org: '内容',
},
]
const pagination = {
pageSize: 10,
}
const exportList = () => {}
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
#struct-modal
position relative
font-size .1rem
height 90vh
border-radius .05rem
.layout
background inherit
border-radius inherit
width 100%
height 100%
.side-menu
z-index 5
height 100%
box-shadow .01rem 0 .03rem rgba(0,0,0,0.3)
h2
border-radius .05rem
padding .08rem
margin .16rem .16rem 0
font-size .14rem
color $red
cursor pointer
&:hover
&.on
background $light-red
.head
$flex-align()
justify-content space-between
padding 0 .2rem
box-shadow 0 .01rem .03rem rgba(0,0,0,0.3)
z-index 1
height .5rem
box-sizing border-box
p
font-size .14rem
font-family $font-ping-medium
margin-right .2rem
.close-btn
color $font
cursor pointer
.content
background #ededed
flex 1
box-sizing border-box
padding .12rem
.card
box-sizing inherit
padding .08rem .16rem
border-radius .05rem
background #fafafa
margin-bottom .1rem
.title
$flex-align()
justify-content space-between
margin-bottom .1rem
p
font-family $font-ping-medium
font-size .12rem
.flex
display flex
.col
flex 1
.row
margin-bottom .1rem
padding-left .05rem
span
color $font
.sub
width 100%
height 100%
background #f7f7f7
box-shadow .01rem 0 .03rem rgba(0,0,0,0.3)
z-index 3
box-sizing border-box
padding .1rem 0
p
padding .1rem .2rem
font-size .09rem
color $font
cursor pointer
&:hover
&.on
color $red
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
#struct-modal
.side-menu
display flex
flex-direction column
.menu
flex 1
overflow-y auto
.n-menu
.n-menu-item-content-header
z-index 1
>.n-submenu
>.n-submenu-children
.n-menu-item-content-header
font-size .12rem
.n-submenu-children
.n-menu-item-content-header
font-size .1rem
.n-menu-item-content--child-active
&:before
content ""
position absolute
left 8px
right 8px
top 0
bottom 0
pointer-events none
border-radius .05rem
transition background .3s
background $light-red
.wrapper
.n-layout-scroll-container
display flex
flex-direction column
</style>
src/view/main.vue
View file @ 32ae49ba
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<svg-icon :data="reset" original /> <svg-icon :data="reset" original />
</n-icon> </n-icon>
</div> </div>
<InforModal class="fix1" /> <!-- <InforModal class="fix1" /> -->
<!-- <ActivityDetail class="fix1" /> --> <ActivityDetail class="fix1" />
<ListModal class="fix2" pagination /> <ListModal class="fix2" pagination />
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment