Skip to content

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

new activity drawer

parent 5114d968
Expand all Show whitespace changes
Inline Side-by-side
Showing with 500 additions and 52 deletions
package-lock.json
View file @ ec2a9a21
......@@ -34,7 +34,7 @@
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.14.0",
"naive-ui": "^2.16.7",
"naive-ui": "^2.18.0",
"prettier": "^2.3.2",
"stylus": "^0.54.8",
"typescript": "^4.3.5",
......@@ -3618,24 +3618,24 @@
"dev": true
},
"node_modules/naive-ui": {
"version": "2.16.7",
"resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.16.7.tgz",
"integrity": "sha512-0l0WX5lJZT9W9kyUke4K8nZsekIXSbfySxA82UPcI/MsaeOXZ5DPRrRGJEgDjK+D8Nw4hD6iex2IAvSvv5Uqog==",
"version": "2.18.0",
"resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.18.0.tgz",
"integrity": "sha512-AlZBIwwt/8WfBdEMwjHcAWQ81Lm7xg50QAX7NbVnvsuCkONqhq4sDU9doZKxm7uTUi/YiQ/Kzm1KOplgOI1/Fw==",
"dev": true,
"dependencies": {
"@css-render/plugin-bem": "^0.15.4",
"@css-render/vue3-ssr": "^0.15.4",
"@css-render/plugin-bem": "^0.15.6",
"@css-render/vue3-ssr": "^0.15.6",
"@types/lodash": "^4.14.170",
"@types/lodash-es": "^4.17.4",
"async-validator": "^4.0.1",
"css-render": "^0.15.4",
"css-render": "^0.15.6",
"date-fns": "^2.19.0",
"evtd": "^0.2.2",
"highlight.js": "^11.0.1",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"seemly": "^0.3.1",
"treemate": "^0.3.0",
"treemate": "^0.3.4",
"vdirs": "^0.1.4",
"vfonts": "^0.1.0",
"vooks": "^0.2.6",
......@@ -4997,9 +4997,9 @@
"dev": true
},
"node_modules/treemate": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.3.tgz",
"integrity": "sha512-vU14Dd2ej4SqomQHz+XqJkWQyug23hLbmzcOLu9imZSwQwPLUBWQMafnSqL2xjJ2xcchP6y4SW9V1PGRXTY5mw==",
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.5.tgz",
"integrity": "sha512-lg9Xu6urOjIX1hI8AZ2sYwI8tFEqWMmivpT+p/oNdJqIOwrsCEp7whRRovsjU+HPC1WPkHXsfR3mzoXR6TfLmA==",
"dev": true
},
"node_modules/tsconfig-paths": {
......@@ -8355,24 +8355,24 @@
"dev": true
},
"naive-ui": {
"version": "2.16.7",
"resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.16.7.tgz",
"integrity": "sha512-0l0WX5lJZT9W9kyUke4K8nZsekIXSbfySxA82UPcI/MsaeOXZ5DPRrRGJEgDjK+D8Nw4hD6iex2IAvSvv5Uqog==",
"version": "2.18.0",
"resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.18.0.tgz",
"integrity": "sha512-AlZBIwwt/8WfBdEMwjHcAWQ81Lm7xg50QAX7NbVnvsuCkONqhq4sDU9doZKxm7uTUi/YiQ/Kzm1KOplgOI1/Fw==",
"dev": true,
"requires": {
"@css-render/plugin-bem": "^0.15.4",
"@css-render/vue3-ssr": "^0.15.4",
"@css-render/plugin-bem": "^0.15.6",
"@css-render/vue3-ssr": "^0.15.6",
"@types/lodash": "^4.14.170",
"@types/lodash-es": "^4.17.4",
"async-validator": "^4.0.1",
"css-render": "^0.15.4",
"css-render": "^0.15.6",
"date-fns": "^2.19.0",
"evtd": "^0.2.2",
"highlight.js": "^11.0.1",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"seemly": "^0.3.1",
"treemate": "^0.3.0",
"treemate": "^0.3.4",
"vdirs": "^0.1.4",
"vfonts": "^0.1.0",
"vooks": "^0.2.6",
......@@ -9421,9 +9421,9 @@
"dev": true
},
"treemate": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.3.tgz",
"integrity": "sha512-vU14Dd2ej4SqomQHz+XqJkWQyug23hLbmzcOLu9imZSwQwPLUBWQMafnSqL2xjJ2xcchP6y4SW9V1PGRXTY5mw==",
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.5.tgz",
"integrity": "sha512-lg9Xu6urOjIX1hI8AZ2sYwI8tFEqWMmivpT+p/oNdJqIOwrsCEp7whRRovsjU+HPC1WPkHXsfR3mzoXR6TfLmA==",
"dev": true
},
"tsconfig-paths": {
......
package.json
View file @ ec2a9a21
......@@ -38,7 +38,7 @@
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.14.0",
"naive-ui": "^2.16.7",
"naive-ui": "^2.18.0",
"prettier": "^2.3.2",
"stylus": "^0.54.8",
"typescript": "^4.3.5",
......
src/App.vue
View file @ ec2a9a21
......@@ -4,16 +4,24 @@
:locale="zhCN"
:date-locale="dateZhCN"
>
<n-message-provider>
<div id="main">
<Main />
</div>
<m-loader v-if="showLoading" />
</n-message-provider>
</n-config-provider>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { NConfigProvider, GlobalThemeOverrides, zhCN, dateZhCN } from 'naive-ui'
import {
NConfigProvider,
NMessageProvider,
GlobalThemeOverrides,
zhCN,
dateZhCN,
} from 'naive-ui'
import Main from './view/main.vue'
import store from '@/store'
......@@ -21,12 +29,32 @@ const showLoading = computed(() => store.state.showLoading)
const themeOverrides: GlobalThemeOverrides = {
common: {
primaryColor: '#dd505E',
fontSize: '0.1rem',
fontSize: '0.09rem',
errorColor: '#E59B00',
},
Button: {
paddingTiny: '.03rem .1rem',
textColorHover: '#dd505E',
textColorPressed: '#dd505E',
textColorFocus: '#dd505E',
colorHoverPrimary: '#faadbb',
colorPressedPrimary: '#dd505E',
colorFocusPrimary: '#dd505E',
textColorHoverPrimary: '#dd505E',
borderHover: '#dd505E',
borderPressed: '#dd505E',
borderFocus: '#dd505E',
borderHoverPrimary: '#dd505E',
borderPressedPrimary: '#dd505E',
borderFocusPrimary: '#dd505E',
},
Input: {
borderFocus: '#FCF4F5',
iconSize: '0.14rem',
},
InternalSelection: {
borderHover: 'dd505E',
},
Checkbox: {
textColor: '#6E798C',
},
......@@ -51,6 +79,16 @@ const themeOverrides: GlobalThemeOverrides = {
borderError: '#F5F0F9',
textColorError: '#AC60CA',
},
Message: {
padding: '.02rem .1rem',
colorSuccess: '#269D74',
iconColorSuccess: '#fff',
textColorSuccess: '#fff',
},
Form: {
feedbackTextColorError: '#E59B00',
labelTextColor: '#6E798C',
},
}
</script>
......
src/components/MyComponent/main.styl
View file @ ec2a9a21
......@@ -26,7 +26,6 @@ $primary-bg = rgba(49,94,139,.3)
$primary-border = rgba(91,213,255,.5)
$edge = #00f2ff
$yellow = #ffd400
$green = #4F953B
$edge = #00f2ff
$card-bg = linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.6))
......@@ -53,6 +52,8 @@ $pink = #faadbb
$blue = #3D7FE9
$light-blue = #ECEFFA
$green = #269D74
$gray = rgba(0,0,0,.6)
$light-gray = rgba(0,0,0,.06)
......
src/main.ts
View file @ ec2a9a21
......@@ -29,6 +29,9 @@ import {
NSelect,
NDataTable,
NTag,
NGrid,
NFormItemGi,
NUpload,
} from 'naive-ui'
const naive = create({
......@@ -56,6 +59,9 @@ const naive = create({
NSelect,
NDataTable,
NTag,
NGrid,
NFormItemGi,
NUpload,
],
})
......
src/store/mutations.ts
View file @ ec2a9a21
......@@ -13,6 +13,9 @@ export default {
SET_ACTIVITY_DRAWER(state: GlobalStateProps, val: boolean) {
state.showActivityDrawer = val
},
SET_NEW_ACTIVITY_DRAWER(state: GlobalStateProps, val: boolean) {
state.showNewActivityDrawer = val
},
SET_BUILDING_DRAWER(state: GlobalStateProps, val: boolean) {
state.showBuildingDrawer = val
},
......
src/store/state.ts
View file @ ec2a9a21
......@@ -3,6 +3,7 @@ export default {
showBasicInfo: true,
showFilterDrawer: false,
showActivityDrawer: false,
showNewActivityDrawer: false,
showBuildingDrawer: false,
showActivityListModal: false,
}
src/view/components/activity-list-modal.vue
View file @ ec2a9a21
......@@ -10,7 +10,6 @@
<div class="content">
<div id="activity-filter">
<n-form
ref="formRef"
:model="model"
label-placement="left"
label-width="1rem"
......@@ -78,26 +77,44 @@
</div>
</div>
</n-modal>
<n-modal
v-model:show="deleteConfirm"
preset="dialog"
title="操作确认"
content="请确认是否删除?"
positive-text="确定"
negative-text="取消"
@positive-click="sureToDelete"
/>
<NewActivityDrawer />
</template>
<script lang="ts" setup>
import store from '@/store'
import { computed, ref, h } from 'vue'
import NewActivityDrawer from './new-activity-drawer.vue'
import { Add } from '@vicons/ionicons5'
import { NButton, NTag } from 'naive-ui'
import { NButton, NTag, useMessage } from 'naive-ui'
import { activity } from '@/util/tags'
const message = useMessage()
const show = computed(() => store.state.showActivityListModal)
const close = (val: boolean) => store.commit('SET_ACTIVITY_LIST_MODAL', val)
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 openNewDrawer = () => {
// showNewActivityDrawer.value = true
console.log(model.value)
store.commit('SET_NEW_ACTIVITY_DRAWER', true)
}
const deleteConfirm = ref(false)
const curRow = ref<any>(null)
const columns = [
{ title: '活动名称', key: 'name' },
{ title: '活动日期', key: 'date' },
......@@ -158,7 +175,10 @@ const columns = [
color: 'transparent',
tag: 'a',
textColor: '#dd505E',
onClick: () => console.log(row),
onClick: () => {
deleteConfirm.value = true
curRow.value = row
},
},
{ default: () => '删除' },
),
......@@ -172,7 +192,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '支部党员大会',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -180,7 +200,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '支部委员会',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -188,7 +208,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '楼组党建会议',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -196,7 +216,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '党课',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -204,7 +224,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '主题党日活动',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -212,7 +232,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '支部党员大会',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -220,7 +240,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '支部委员会',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -228,7 +248,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '楼组党建会议',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -236,7 +256,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '党课',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -244,7 +264,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '主题党日活动',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -252,7 +272,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '支部党员大会',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -260,7 +280,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '支部委员会',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -268,7 +288,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '楼组党建会议',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -276,7 +296,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '党课',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -284,7 +304,7 @@ const activityList = [
name: '某某党员大会',
date: '2020年8月1日',
type: '主题党日活动',
address: '某某去某某路某某小区某某号',
address: '某某区某某路某某小区某某号',
rate: '82%',
count: '200人',
},
......@@ -292,6 +312,11 @@ const activityList = [
const pagination = {
pageSize: 10,
}
const sureToDelete = () => {
console.log(curRow.value)
message.success('删除成功')
}
</script>
<style lang="stylus" scoped>
......@@ -344,4 +369,13 @@ const pagination = {
.activity-table
.n-scrollbar-container
border-radius .06rem
.n-dialog
.n-dialog__content
margin-left .3rem
.n-dialog__icon
color #F2A70D
.n-button.n-button--primary-type
background $blue
.n-button__border
border none
</style>
src/view/components/basic-info.vue
View file @ ec2a9a21
<template>
<m-animate enter="fadeInRight" leave="fadeOutLeft" :duration="200">
<m-animate enter="fadeInLeft" leave="fadeOutLeft" :duration="300">
<div v-if="show" class="container">
<n-collapse
id="basic-info"
......@@ -70,7 +70,7 @@
</div>
</n-collapse-item>
</n-collapse>
<m-animate enter="fadeInUp" leave="fadeOutDown" :duration="100">
<m-animate enter="fadeInUp" leave="fadeOutDown" :duration="200">
<div v-if="visible" class="tag-box">
<span
v-for="tag in tagList"
......@@ -323,12 +323,13 @@ const clickTag = (key: string) => {
.n-collapse-item__header
position relative
display flex
justify-content flex-end
height .3rem
border-radius .02rem
padding 0 .12rem
font-family $font-ping-medium
font-size .14rem
.n-collapse-item__header-main
justify-content flex-end
&:before
position absolute
left 0.12rem
......
src/view/components/new-activity-drawer.vue 0 → 100644
View file @ ec2a9a21
This diff is collapsed.
src/view/main.vue
View file @ ec2a9a21
......@@ -52,4 +52,12 @@ const showReset = computed(() => store.state.showBasicInfo)
left 50%
transform translate(-50%, -50%)
margin-left 4rem
.n-form-item-label__asterisk
color $red !important
.n-input .n-input-wrapper
background #F9FAFB
border-radius inherit
.n-base-selection .n-base-selection-label
background #F9FAFB
</style>
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