Skip to content

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

new activity drawer

parent 5114d968
Hide whitespace changes
Inline Side-by-side
Showing with 500 additions and 52 deletions
package-lock.json
View file @ ec2a9a21
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
"eslint-plugin-import": "^2.23.4", "eslint-plugin-import": "^2.23.4",
"eslint-plugin-prettier": "^3.4.0", "eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.14.0", "eslint-plugin-vue": "^7.14.0",
"naive-ui": "^2.16.7", "naive-ui": "^2.18.0",
"prettier": "^2.3.2", "prettier": "^2.3.2",
"stylus": "^0.54.8", "stylus": "^0.54.8",
"typescript": "^4.3.5", "typescript": "^4.3.5",
...@@ -3618,24 +3618,24 @@ ...@@ -3618,24 +3618,24 @@
"dev": true "dev": true
}, },
"node_modules/naive-ui": { "node_modules/naive-ui": {
"version": "2.16.7", "version": "2.18.0",
"resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.16.7.tgz", "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.18.0.tgz",
"integrity": "sha512-0l0WX5lJZT9W9kyUke4K8nZsekIXSbfySxA82UPcI/MsaeOXZ5DPRrRGJEgDjK+D8Nw4hD6iex2IAvSvv5Uqog==", "integrity": "sha512-AlZBIwwt/8WfBdEMwjHcAWQ81Lm7xg50QAX7NbVnvsuCkONqhq4sDU9doZKxm7uTUi/YiQ/Kzm1KOplgOI1/Fw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@css-render/plugin-bem": "^0.15.4", "@css-render/plugin-bem": "^0.15.6",
"@css-render/vue3-ssr": "^0.15.4", "@css-render/vue3-ssr": "^0.15.6",
"@types/lodash": "^4.14.170", "@types/lodash": "^4.14.170",
"@types/lodash-es": "^4.17.4", "@types/lodash-es": "^4.17.4",
"async-validator": "^4.0.1", "async-validator": "^4.0.1",
"css-render": "^0.15.4", "css-render": "^0.15.6",
"date-fns": "^2.19.0", "date-fns": "^2.19.0",
"evtd": "^0.2.2", "evtd": "^0.2.2",
"highlight.js": "^11.0.1", "highlight.js": "^11.0.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"seemly": "^0.3.1", "seemly": "^0.3.1",
"treemate": "^0.3.0", "treemate": "^0.3.4",
"vdirs": "^0.1.4", "vdirs": "^0.1.4",
"vfonts": "^0.1.0", "vfonts": "^0.1.0",
"vooks": "^0.2.6", "vooks": "^0.2.6",
...@@ -4997,9 +4997,9 @@ ...@@ -4997,9 +4997,9 @@
"dev": true "dev": true
}, },
"node_modules/treemate": { "node_modules/treemate": {
"version": "0.3.3", "version": "0.3.5",
"resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.3.tgz", "resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.5.tgz",
"integrity": "sha512-vU14Dd2ej4SqomQHz+XqJkWQyug23hLbmzcOLu9imZSwQwPLUBWQMafnSqL2xjJ2xcchP6y4SW9V1PGRXTY5mw==", "integrity": "sha512-lg9Xu6urOjIX1hI8AZ2sYwI8tFEqWMmivpT+p/oNdJqIOwrsCEp7whRRovsjU+HPC1WPkHXsfR3mzoXR6TfLmA==",
"dev": true "dev": true
}, },
"node_modules/tsconfig-paths": { "node_modules/tsconfig-paths": {
...@@ -8355,24 +8355,24 @@ ...@@ -8355,24 +8355,24 @@
"dev": true "dev": true
}, },
"naive-ui": { "naive-ui": {
"version": "2.16.7", "version": "2.18.0",
"resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.16.7.tgz", "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.18.0.tgz",
"integrity": "sha512-0l0WX5lJZT9W9kyUke4K8nZsekIXSbfySxA82UPcI/MsaeOXZ5DPRrRGJEgDjK+D8Nw4hD6iex2IAvSvv5Uqog==", "integrity": "sha512-AlZBIwwt/8WfBdEMwjHcAWQ81Lm7xg50QAX7NbVnvsuCkONqhq4sDU9doZKxm7uTUi/YiQ/Kzm1KOplgOI1/Fw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@css-render/plugin-bem": "^0.15.4", "@css-render/plugin-bem": "^0.15.6",
"@css-render/vue3-ssr": "^0.15.4", "@css-render/vue3-ssr": "^0.15.6",
"@types/lodash": "^4.14.170", "@types/lodash": "^4.14.170",
"@types/lodash-es": "^4.17.4", "@types/lodash-es": "^4.17.4",
"async-validator": "^4.0.1", "async-validator": "^4.0.1",
"css-render": "^0.15.4", "css-render": "^0.15.6",
"date-fns": "^2.19.0", "date-fns": "^2.19.0",
"evtd": "^0.2.2", "evtd": "^0.2.2",
"highlight.js": "^11.0.1", "highlight.js": "^11.0.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"seemly": "^0.3.1", "seemly": "^0.3.1",
"treemate": "^0.3.0", "treemate": "^0.3.4",
"vdirs": "^0.1.4", "vdirs": "^0.1.4",
"vfonts": "^0.1.0", "vfonts": "^0.1.0",
"vooks": "^0.2.6", "vooks": "^0.2.6",
...@@ -9421,9 +9421,9 @@ ...@@ -9421,9 +9421,9 @@
"dev": true "dev": true
}, },
"treemate": { "treemate": {
"version": "0.3.3", "version": "0.3.5",
"resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.3.tgz", "resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.5.tgz",
"integrity": "sha512-vU14Dd2ej4SqomQHz+XqJkWQyug23hLbmzcOLu9imZSwQwPLUBWQMafnSqL2xjJ2xcchP6y4SW9V1PGRXTY5mw==", "integrity": "sha512-lg9Xu6urOjIX1hI8AZ2sYwI8tFEqWMmivpT+p/oNdJqIOwrsCEp7whRRovsjU+HPC1WPkHXsfR3mzoXR6TfLmA==",
"dev": true "dev": true
}, },
"tsconfig-paths": { "tsconfig-paths": {
......
package.json
View file @ ec2a9a21
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
"eslint-plugin-import": "^2.23.4", "eslint-plugin-import": "^2.23.4",
"eslint-plugin-prettier": "^3.4.0", "eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.14.0", "eslint-plugin-vue": "^7.14.0",
"naive-ui": "^2.16.7", "naive-ui": "^2.18.0",
"prettier": "^2.3.2", "prettier": "^2.3.2",
"stylus": "^0.54.8", "stylus": "^0.54.8",
"typescript": "^4.3.5", "typescript": "^4.3.5",
......
src/App.vue
View file @ ec2a9a21
...@@ -4,16 +4,24 @@ ...@@ -4,16 +4,24 @@
:locale="zhCN" :locale="zhCN"
:date-locale="dateZhCN" :date-locale="dateZhCN"
> >
<div id="main"> <n-message-provider>
<Main /> <div id="main">
</div> <Main />
<m-loader v-if="showLoading" /> </div>
<m-loader v-if="showLoading" />
</n-message-provider>
</n-config-provider> </n-config-provider>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue' 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 Main from './view/main.vue'
import store from '@/store' import store from '@/store'
...@@ -21,12 +29,32 @@ const showLoading = computed(() => store.state.showLoading) ...@@ -21,12 +29,32 @@ const showLoading = computed(() => store.state.showLoading)
const themeOverrides: GlobalThemeOverrides = { const themeOverrides: GlobalThemeOverrides = {
common: { common: {
primaryColor: '#dd505E', 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: { Input: {
borderFocus: '#FCF4F5', borderFocus: '#FCF4F5',
iconSize: '0.14rem', iconSize: '0.14rem',
}, },
InternalSelection: {
borderHover: 'dd505E',
},
Checkbox: { Checkbox: {
textColor: '#6E798C', textColor: '#6E798C',
}, },
...@@ -51,6 +79,16 @@ const themeOverrides: GlobalThemeOverrides = { ...@@ -51,6 +79,16 @@ const themeOverrides: GlobalThemeOverrides = {
borderError: '#F5F0F9', borderError: '#F5F0F9',
textColorError: '#AC60CA', textColorError: '#AC60CA',
}, },
Message: {
padding: '.02rem .1rem',
colorSuccess: '#269D74',
iconColorSuccess: '#fff',
textColorSuccess: '#fff',
},
Form: {
feedbackTextColorError: '#E59B00',
labelTextColor: '#6E798C',
},
} }
</script> </script>
......
src/components/MyComponent/main.styl
View file @ ec2a9a21
...@@ -26,7 +26,6 @@ $primary-bg = rgba(49,94,139,.3) ...@@ -26,7 +26,6 @@ $primary-bg = rgba(49,94,139,.3)
$primary-border = rgba(91,213,255,.5) $primary-border = rgba(91,213,255,.5)
$edge = #00f2ff $edge = #00f2ff
$yellow = #ffd400 $yellow = #ffd400
$green = #4F953B
$edge = #00f2ff $edge = #00f2ff
$card-bg = linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.6)) $card-bg = linear-gradient(to bottom, rgba(5,71,138,.2), rgba(5,71,138,.6))
...@@ -53,6 +52,8 @@ $pink = #faadbb ...@@ -53,6 +52,8 @@ $pink = #faadbb
$blue = #3D7FE9 $blue = #3D7FE9
$light-blue = #ECEFFA $light-blue = #ECEFFA
$green = #269D74
$gray = rgba(0,0,0,.6) $gray = rgba(0,0,0,.6)
$light-gray = rgba(0,0,0,.06) $light-gray = rgba(0,0,0,.06)
......
src/main.ts
View file @ ec2a9a21
...@@ -29,6 +29,9 @@ import { ...@@ -29,6 +29,9 @@ import {
NSelect, NSelect,
NDataTable, NDataTable,
NTag, NTag,
NGrid,
NFormItemGi,
NUpload,
} from 'naive-ui' } from 'naive-ui'
const naive = create({ const naive = create({
...@@ -56,6 +59,9 @@ const naive = create({ ...@@ -56,6 +59,9 @@ const naive = create({
NSelect, NSelect,
NDataTable, NDataTable,
NTag, NTag,
NGrid,
NFormItemGi,
NUpload,
], ],
}) })
......
src/store/mutations.ts
View file @ ec2a9a21
...@@ -13,6 +13,9 @@ export default { ...@@ -13,6 +13,9 @@ export default {
SET_ACTIVITY_DRAWER(state: GlobalStateProps, val: boolean) { SET_ACTIVITY_DRAWER(state: GlobalStateProps, val: boolean) {
state.showActivityDrawer = val state.showActivityDrawer = val
}, },
SET_NEW_ACTIVITY_DRAWER(state: GlobalStateProps, val: boolean) {
state.showNewActivityDrawer = val
},
SET_BUILDING_DRAWER(state: GlobalStateProps, val: boolean) { SET_BUILDING_DRAWER(state: GlobalStateProps, val: boolean) {
state.showBuildingDrawer = val state.showBuildingDrawer = val
}, },
......
src/store/state.ts
View file @ ec2a9a21
...@@ -3,6 +3,7 @@ export default { ...@@ -3,6 +3,7 @@ export default {
showBasicInfo: true, showBasicInfo: true,
showFilterDrawer: false, showFilterDrawer: false,
showActivityDrawer: false, showActivityDrawer: false,
showNewActivityDrawer: false,
showBuildingDrawer: false, showBuildingDrawer: false,
showActivityListModal: false, showActivityListModal: false,
} }
src/view/components/activity-list-modal.vue
View file @ ec2a9a21
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
<div class="content"> <div class="content">
<div id="activity-filter"> <div id="activity-filter">
<n-form <n-form
ref="formRef"
:model="model" :model="model"
label-placement="left" label-placement="left"
label-width="1rem" label-width="1rem"
...@@ -78,26 +77,44 @@ ...@@ -78,26 +77,44 @@
</div> </div>
</div> </div>
</n-modal> </n-modal>
<n-modal
v-model:show="deleteConfirm"
preset="dialog"
title="操作确认"
content="请确认是否删除?"
positive-text="确定"
negative-text="取消"
@positive-click="sureToDelete"
/>
<NewActivityDrawer />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import store from '@/store' import store from '@/store'
import { computed, ref, h } from 'vue' import { computed, ref, h } from 'vue'
import NewActivityDrawer from './new-activity-drawer.vue'
import { Add } from '@vicons/ionicons5' import { Add } from '@vicons/ionicons5'
import { NButton, NTag } from 'naive-ui' import { NButton, NTag, useMessage } from 'naive-ui'
import { activity } from '@/util/tags' import { activity } from '@/util/tags'
const message = useMessage()
const show = computed(() => store.state.showActivityListModal) 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 model = ref({})
const typeOptions = [ const typeOptions = [
{ label: '类型1', value: 'type1' }, { label: '类型1', value: 'type1' },
{ label: '类型2', value: 'type2' }, { label: '类型2', value: 'type2' },
] ]
const openNewDrawer = () => { const openNewDrawer = () => {
// showNewActivityDrawer.value = true
console.log(model.value) console.log(model.value)
store.commit('SET_NEW_ACTIVITY_DRAWER', true)
} }
const deleteConfirm = ref(false)
const curRow = ref<any>(null)
const columns = [ const columns = [
{ title: '活动名称', key: 'name' }, { title: '活动名称', key: 'name' },
{ title: '活动日期', key: 'date' }, { title: '活动日期', key: 'date' },
...@@ -158,7 +175,10 @@ const columns = [ ...@@ -158,7 +175,10 @@ const columns = [
color: 'transparent', color: 'transparent',
tag: 'a', tag: 'a',
textColor: '#dd505E', textColor: '#dd505E',
onClick: () => console.log(row), onClick: () => {
deleteConfirm.value = true
curRow.value = row
},
}, },
{ default: () => '删除' }, { default: () => '删除' },
), ),
...@@ -172,7 +192,7 @@ const activityList = [ ...@@ -172,7 +192,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '支部党员大会', type: '支部党员大会',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -180,7 +200,7 @@ const activityList = [ ...@@ -180,7 +200,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '支部委员会', type: '支部委员会',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -188,7 +208,7 @@ const activityList = [ ...@@ -188,7 +208,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '楼组党建会议', type: '楼组党建会议',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -196,7 +216,7 @@ const activityList = [ ...@@ -196,7 +216,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '党课', type: '党课',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -204,7 +224,7 @@ const activityList = [ ...@@ -204,7 +224,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '主题党日活动', type: '主题党日活动',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -212,7 +232,7 @@ const activityList = [ ...@@ -212,7 +232,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '支部党员大会', type: '支部党员大会',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -220,7 +240,7 @@ const activityList = [ ...@@ -220,7 +240,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '支部委员会', type: '支部委员会',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -228,7 +248,7 @@ const activityList = [ ...@@ -228,7 +248,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '楼组党建会议', type: '楼组党建会议',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -236,7 +256,7 @@ const activityList = [ ...@@ -236,7 +256,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '党课', type: '党课',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -244,7 +264,7 @@ const activityList = [ ...@@ -244,7 +264,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '主题党日活动', type: '主题党日活动',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -252,7 +272,7 @@ const activityList = [ ...@@ -252,7 +272,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '支部党员大会', type: '支部党员大会',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -260,7 +280,7 @@ const activityList = [ ...@@ -260,7 +280,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '支部委员会', type: '支部委员会',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -268,7 +288,7 @@ const activityList = [ ...@@ -268,7 +288,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '楼组党建会议', type: '楼组党建会议',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -276,7 +296,7 @@ const activityList = [ ...@@ -276,7 +296,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '党课', type: '党课',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -284,7 +304,7 @@ const activityList = [ ...@@ -284,7 +304,7 @@ const activityList = [
name: '某某党员大会', name: '某某党员大会',
date: '2020年8月1日', date: '2020年8月1日',
type: '主题党日活动', type: '主题党日活动',
address: '某某去某某路某某小区某某号', address: '某某区某某路某某小区某某号',
rate: '82%', rate: '82%',
count: '200人', count: '200人',
}, },
...@@ -292,6 +312,11 @@ const activityList = [ ...@@ -292,6 +312,11 @@ const activityList = [
const pagination = { const pagination = {
pageSize: 10, pageSize: 10,
} }
const sureToDelete = () => {
console.log(curRow.value)
message.success('删除成功')
}
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
...@@ -344,4 +369,13 @@ const pagination = { ...@@ -344,4 +369,13 @@ const pagination = {
.activity-table .activity-table
.n-scrollbar-container .n-scrollbar-container
border-radius .06rem 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> </style>
src/view/components/basic-info.vue
View file @ ec2a9a21
<template> <template>
<m-animate enter="fadeInRight" leave="fadeOutLeft" :duration="200"> <m-animate enter="fadeInLeft" leave="fadeOutLeft" :duration="300">
<div v-if="show" class="container"> <div v-if="show" class="container">
<n-collapse <n-collapse
id="basic-info" id="basic-info"
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
</div> </div>
</n-collapse-item> </n-collapse-item>
</n-collapse> </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"> <div v-if="visible" class="tag-box">
<span <span
v-for="tag in tagList" v-for="tag in tagList"
...@@ -323,12 +323,13 @@ const clickTag = (key: string) => { ...@@ -323,12 +323,13 @@ const clickTag = (key: string) => {
.n-collapse-item__header .n-collapse-item__header
position relative position relative
display flex display flex
justify-content flex-end
height .3rem height .3rem
border-radius .02rem border-radius .02rem
padding 0 .12rem padding 0 .12rem
font-family $font-ping-medium font-family $font-ping-medium
font-size .14rem font-size .14rem
.n-collapse-item__header-main
justify-content flex-end
&:before &:before
position absolute position absolute
left 0.12rem left 0.12rem
......
src/view/components/new-activity-drawer.vue 0 → 100644
View file @ ec2a9a21
<template>
<n-drawer
class="top0"
to="#main"
:show="show"
width="5.2rem"
:mask-closable="false"
>
<n-drawer-content>
<template #header>
<div class="head">
<p>新增活动</p>
<n-space>
<n-button size="tiny" @click="closeDrawer(false)">取消</n-button>
<n-button type="primary" size="tiny" @click="submit">完成</n-button>
</n-space>
</div>
</template>
<div class="content">
<div>
<p class="title">基本信息</p>
<n-form
ref="basicRef"
:model="basicData"
:rules="rules"
size="small"
label-placement="top"
>
<n-grid :cols="24" :x-gap="12">
<n-form-item-gi :span="12" label="活动名称" path="name">
<n-input v-model:value="basicData.name" />
</n-form-item-gi>
<n-form-item-gi :span="12" label="标签类别" path="type">
<n-select
v-model:value="basicData.type"
:options="typeOptions"
/>
</n-form-item-gi>
<n-form-item-gi
:span="12"
label="党组织名称（下拉选择或输入关键字选择）"
path="orgName"
>
<n-select
v-model:value="basicData.orgName"
:options="typeOptions"
/>
</n-form-item-gi>
<n-form-item-gi :span="12" label="活动日期" path="date">
<n-date-picker
v-model:value="basicData.date"
style="width: 100%"
/>
</n-form-item-gi>
<n-form-item-gi
:span="24"
label="活动地址（请具体填写，如“XX区XX路XX号XX中心”）"
path="address"
>
<n-input v-model:value="basicData.address" />
</n-form-item-gi>
</n-grid>
</n-form>
</div>
<div>
<p class="title">人员参与情况</p>
<n-form
ref="memberRef"
:model="memberData"
:rules="rules"
size="small"
label-placement="top"
>
<n-grid :cols="24" :x-gap="12">
<n-form-item-gi :span="12" label="实际参与人数" path="count">
<n-input-number
v-model:value="memberData.count"
size="small"
:show-button="false"
:min="0"
>
<template #suffix>人</template>
</n-input-number>
</n-form-item-gi>
<n-form-item-gi
:span="12"
label="不计入参与活动党员人数"
path="excludeCount"
>
<n-input-number
v-model:value="memberData.excludeCount"
size="small"
:show-button="false"
:min="0"
>
<template #suffix>人</template>
</n-input-number>
</n-form-item-gi>
<n-form-item-gi
:span="12"
label="电子表格或签到照片（大小20M以内）"
path="fileType"
>
<n-select
v-model:value="memberData.fileType"
:options="fileOptions"
placeholder="请选择上传类型"
/>
</n-form-item-gi>
<n-form-item-gi v-if="memberData.fileType === 'file'" :span="24">
<n-upload
style="width: 100%"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:headers="{
'naive-info': 'hello!',
}"
:data="{
'naive-data': 'cool! naive!',
}"
>
<n-button> 上传附件 </n-button>
</n-upload>
</n-form-item-gi>
<n-form-item-gi v-if="memberData.fileType === 'photo'" :span="24">
<n-upload
style="width: 100%"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="previewFileList"
list-type="image-card"
@preview="handlePreview"
>
点击上传
</n-upload>
</n-form-item-gi>
</n-grid>
</n-form>
</div>
<div>
<p class="title">活动详情</p>
<n-form
ref="detailRef"
:model="detailData"
:rules="rules"
size="small"
label-placement="top"
>
<n-grid :cols="24" :x-gap="12">
<n-form-item-gi
:span="24"
label="活动内容描述或照片（大小20M以内）"
path="count"
>
<n-select
v-model:value="detailData.fileType"
:options="fileOptions"
placeholder="请选择上传类型"
/>
</n-form-item-gi>
<n-form-item-gi v-if="detailData.fileType === 'file'" :span="24">
<n-upload
style="width: 100%"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:headers="{
'naive-info': 'hello!',
}"
:data="{
'naive-data': 'cool! naive!',
}"
>
<n-button> 上传附件 </n-button>
</n-upload>
</n-form-item-gi>
<n-form-item-gi v-if="detailData.fileType === 'photo'" :span="24">
<n-upload
style="width: 100%"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="previewFileList"
list-type="image-card"
@preview="handlePreview"
>
点击上传
</n-upload>
</n-form-item-gi>
<n-form-item-gi
:span="24"
label="活动照片（格式为jpg、jpeg、png、img， 大小20M以内）"
path="photo"
>
<n-upload
style="width: 100%"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="previewFileList"
list-type="image-card"
@preview="handlePreview"
>
点击上传
</n-upload>
</n-form-item-gi>
</n-grid>
</n-form>
</div>
</div>
</n-drawer-content>
</n-drawer>
<n-modal
v-model:show="showPhoto"
preset="card"
style="width: 30%"
title="照片预览"
>
<img :src="previewImageUrl" style="width: 100%" />
</n-modal>
</template>
<script lang="ts" setup>
import store from '@/store'
import { computed, ref } from 'vue'
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 fileOptions = [
{ label: '电子表格', value: 'file' },
{ label: '照片', value: 'photo' },
]
const basicRef = ref<HTMLElement | null>(null)
const memberRef = ref<HTMLElement | null>(null)
const detailRef = ref<HTMLElement | null>(null)
const basicData = ref({})
const memberData = ref({})
const detailData = ref({})
const rules = {
name: {
required: true,
trigger: ['blur', 'input'],
message: '请输入活动名称',
},
type: {
required: true,
trigger: ['blur', 'change'],
message: '请选择标签类别',
},
orgName: {
required: true,
trigger: ['blur', 'change'],
message: '请选择党组织',
},
date: {
type: 'number',
required: true,
trigger: ['blur', 'change'],
message: '请选择活动日期',
},
address: {
required: true,
trigger: ['blur', 'input'],
message: '请输入活动地址',
},
count: {
type: 'number',
required: true,
trigger: ['blur', 'input'],
message: '请输入实际参与人数',
},
excludeCount: {
type: 'number',
required: true,
trigger: ['blur', 'input'],
message: '请输入不计入参与活动党员人数',
},
fileType: {
required: true,
trigger: ['blur', 'change'],
message: '请选择上传类型',
},
}
const submit = () => {
console.log(basicData.value, memberData.value, detailData.value)
}
const previewFileList = ref([
{
id: 'react',
name: '我是react.png',
status: 'finished',
url: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
},
{
id: 'vue',
name: '我是vue.png',
status: 'finished',
url: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
},
])
const previewImageUrl = ref('')
const showPhoto = ref(false)
function handlePreview(file: any) {
const { url } = file
previewImageUrl.value = url
showPhoto.value = true
}
</script>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.head
width 100%
$flex-align()
justify-content space-between
.content
height 100%
overflow-y auto
background #f7f7f7
padding .08rem .1rem
box-sizing border-box
>div
background $white-bg
border-radius .04rem
margin-bottom .08rem
padding .08rem
overflow hidden
box-sizing border-box
.title
font-family $font-ping-medium
margin-bottom .1rem
font-size .14rem
$flex-align()
&:before
content ''
display inline-block
width .02rem
height .14rem
background $red
margin-right .06rem
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
.n-drawer.n-drawer--right-placement.top0
top 0
.n-drawer-header__main
width 100%
.n-input-wrapper
padding-right 0
.n-input-number
width 100%
.n-input__suffix
background #f3f4f7
border-left .01rem solid $light-gray
padding 0 .1rem
</style>
src/view/main.vue
View file @ ec2a9a21
...@@ -52,4 +52,12 @@ const showReset = computed(() => store.state.showBasicInfo) ...@@ -52,4 +52,12 @@ const showReset = computed(() => store.state.showBasicInfo)
left 50% left 50%
transform translate(-50%, -50%) transform translate(-50%, -50%)
margin-left 4rem 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> </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