Skip to content

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

view & modify page of activity

parent ec2a9a21
Show whitespace changes
Inline Side-by-side
Showing with 175 additions and 37 deletions
src/App.vue
View file @ 53ca8352
......@@ -34,19 +34,26 @@ const themeOverrides: GlobalThemeOverrides = {
},
Button: {
paddingTiny: '.03rem .1rem',
paddingSmall: '.03rem .16rem',
borderRadiusSmall: '.05rem',
textColorHover: '#dd505E',
textColorPressed: '#dd505E',
textColorFocus: '#dd505E',
borderHover: '#dd505E',
borderPressed: '#dd505E',
borderFocus: '#dd505E',
colorHoverPrimary: '#faadbb',
colorPressedPrimary: '#dd505E',
colorFocusPrimary: '#dd505E',
textColorHoverPrimary: '#dd505E',
borderHover: '#dd505E',
borderPressed: '#dd505E',
borderFocus: '#dd505E',
borderHoverPrimary: '#dd505E',
borderPressedPrimary: '#dd505E',
borderFocusPrimary: '#dd505E',
colorError: '#faadbb',
textColorError: '#dd505E',
borderError: '#dd505E',
borderHoverError: '#dd505E',
borderPressedError: '#dd505E',
},
Input: {
borderFocus: '#FCF4F5',
......@@ -88,6 +95,7 @@ const themeOverrides: GlobalThemeOverrides = {
Form: {
feedbackTextColorError: '#E59B00',
labelTextColor: '#6E798C',
labelFontSizeTopSmall: '.09rem',
},
}
</script>
......
src/view/components/activity-list-modal.vue
View file @ 53ca8352
......@@ -57,7 +57,11 @@
/>
</n-form-item>
<n-form-item>
<n-button color="#dd505e" text-color="#fff" @click="openNewDrawer">
<n-button
color="#dd505e"
text-color="#fff"
@click="openNewDrawer(null)"
>
<n-icon size=".1rem">
<Add />
</n-icon>
......@@ -82,11 +86,16 @@
preset="dialog"
title="操作确认"
content="请确认是否删除?"
positive-text="确定"
negative-text="取消"
@positive-click="sureToDelete"
/>
<NewActivityDrawer />
>
<template #action>
<n-space>
<div class="btn cancel" @click="deleteConfirm = false">取消</div>
<div class="btn sure" @click="sureToDelete">确定</div>
</n-space>
</template>
</n-modal>
<NewActivityDrawer :data="activityData" />
</template>
<script lang="ts" setup>
......@@ -109,10 +118,24 @@ const typeOptions = [
{ label: '类型1', value: 'type1' },
{ label: '类型2', value: 'type2' },
]
const openNewDrawer = () => {
const mockData = {
name: '某某活动',
type: '某某标签',
orgName: '某某党组织',
date: 1630425600000,
address: '某区某路XX号XX中心',
count: 20,
excludeCount: 10,
fileType: 'file',
}
const activityData = ref<any>(null)
const openNewDrawer = (data: any = null) => {
console.log(model.value)
activityData.value = data
store.commit('SET_NEW_ACTIVITY_DRAWER', true)
}
const deleteConfirm = ref(false)
const curRow = ref<any>(null)
const columns = [
......@@ -151,7 +174,7 @@ const columns = [
color: 'transparent',
tag: 'a',
textColor: '#3d7fe9',
onClick: () => console.log(row),
onClick: () => openNewDrawer({ ...mockData, _mode: 'view' }),
},
{ default: () => '查看' },
),
......@@ -163,7 +186,7 @@ const columns = [
color: 'transparent',
tag: 'a',
textColor: '#3d7fe9',
onClick: () => console.log(row),
onClick: () => openNewDrawer({ ...mockData, _mode: 'modify' }),
},
{ default: () => '修改' },
),
......@@ -314,6 +337,7 @@ const pagination = {
}
const sureToDelete = () => {
deleteConfirm.value = false
console.log(curRow.value)
message.success('删除成功')
}
......@@ -336,6 +360,19 @@ const sureToDelete = () => {
padding .08rem
.activity-table
font-size .08rem
.btn
font-size .1rem
box-sizing border-box
padding .03rem .2rem
border-radius .03rem
cursor pointer
&:hover
box-shadow 0 0 .06rem rgba(0,0,0,0.3)
&.cancel
border .01rem solid $light-gray
&.sure
color #fff
background $blue
</style>
<style lang="stylus">
@import '../../components/MyComponent/main.styl'
......
src/view/components/new-activity-drawer.vue
View file @ 53ca8352
......@@ -9,10 +9,23 @@
<n-drawer-content>
<template #header>
<div class="head">
<p>新增活动</p>
<p>{{ mode ? basicData.name : '新增活动' }}</p>
<n-space>
<n-button size="tiny" @click="closeDrawer(false)">取消</n-button>
<n-button type="primary" size="tiny" @click="submit">完成</n-button>
<n-button size="small" @click="closeDrawer(false)">取消</n-button>
<template v-if="mode === 'view'">
<n-button type="error" size="small" @click="mode = 'modify'">
编辑
</n-button>
<n-button type="primary" size="small" @click="submit">
<n-icon size=".1rem">
<svg-icon :data="exportIcon" original />
</n-icon>
导出
</n-button>
</template>
<n-button v-else type="primary" size="small" @click="submit">
完成
</n-button>
</n-space>
</div>
</template>
......@@ -28,27 +41,43 @@
>
<n-grid :cols="24" :x-gap="12">
<n-form-item-gi :span="12" label="活动名称" path="name">
<n-input v-model:value="basicData.name" />
<p v-if="mode === 'view'">{{ basicData.name }}</p>
<n-input v-else v-model:value="basicData.name" />
</n-form-item-gi>
<n-form-item-gi :span="12" label="标签类别" path="type">
<p v-if="mode === 'view'">
{{
typeOptions.find((e) => e.value === basicData.type)?.label
}}
</p>
<n-select
v-else
v-model:value="basicData.type"
:options="typeOptions"
/>
</n-form-item-gi>
<n-form-item-gi
:span="12"
label="党组织名称（下拉选择或输入关键字选择）"
label="党组织名称（下拉或输入关键字选择）"
path="orgName"
>
<p v-if="mode === 'view'">
{{
typeOptions.find((e) => e.value === basicData.orgName)
?.label
}}
</p>
<n-select
v-else
v-model:value="basicData.orgName"
:options="typeOptions"
filterable
/>
</n-form-item-gi>
<n-form-item-gi :span="12" label="活动日期" path="date">
<n-date-picker
v-model:value="basicData.date"
:disabled="mode === 'view'"
style="width: 100%"
/>
</n-form-item-gi>
......@@ -57,7 +86,8 @@
label="活动地址（请具体填写，如“XX区XX路XX号XX中心”）"
path="address"
>
<n-input v-model:value="basicData.address" />
<p v-if="mode === 'view'">{{ basicData.address }}</p>
<n-input v-else v-model:value="basicData.address" />
</n-form-item-gi>
</n-grid>
</n-form>
......@@ -73,7 +103,9 @@
>
<n-grid :cols="24" :x-gap="12">
<n-form-item-gi :span="12" label="实际参与人数" path="count">
<p v-if="mode === 'view'">{{ memberData.count }}</p>
<n-input-number
v-else
v-model:value="memberData.count"
size="small"
:show-button="false"
......@@ -87,7 +119,9 @@
label="不计入参与活动党员人数"
path="excludeCount"
>
<p v-if="mode === 'view'">{{ memberData.excludeCount }}</p>
<n-input-number
v-else
v-model:value="memberData.excludeCount"
size="small"
:show-button="false"
......@@ -97,11 +131,18 @@
</n-input-number>
</n-form-item-gi>
<n-form-item-gi
:span="12"
:span="24"
label="电子表格或签到照片（大小20M以内）"
path="fileType"
>
<p v-if="mode === 'view'">
{{
fileOptions.find((e) => e.value === memberData.fileType)
?.label
}}
</p>
<n-select
v-else
v-model:value="memberData.fileType"
:options="fileOptions"
placeholder="请选择上传类型"
......@@ -111,12 +152,7 @@
<n-upload
style="width: 100%"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:headers="{
'naive-info': 'hello!',
}"
:data="{
'naive-data': 'cool! naive!',
}"
accept=".docx,.doc,.xlsx,.xls,.csv,.txt"
>
<n-button> 上传附件 </n-button>
</n-upload>
......@@ -126,6 +162,7 @@
style="width: 100%"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="previewFileList"
accept="image/jpg,image/jpeg,image/png,image/img"
list-type="image-card"
@preview="handlePreview"
>
......@@ -148,9 +185,16 @@
<n-form-item-gi
:span="24"
label="活动内容描述或照片（大小20M以内）"
path="count"
path="fileType"
>
<p v-if="mode === 'view'">
{{
fileOptions.find((e) => e.value === memberData.fileType)
?.label
}}
</p>
<n-select
v-else
v-model:value="detailData.fileType"
:options="fileOptions"
placeholder="请选择上传类型"
......@@ -160,12 +204,7 @@
<n-upload
style="width: 100%"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:headers="{
'naive-info': 'hello!',
}"
:data="{
'naive-data': 'cool! naive!',
}"
accept=".docx,.doc,.xlsx,.xls,.csv,.txt"
>
<n-button> 上传附件 </n-button>
</n-upload>
......@@ -175,6 +214,7 @@
style="width: 100%"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="previewFileList"
accept="image/jpg,image/jpeg,image/png,image/img"
list-type="image-card"
@preview="handlePreview"
>
......@@ -190,6 +230,7 @@
style="width: 100%"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="previewFileList"
accept="image/jpg,image/jpeg,image/png,image/img"
list-type="image-card"
@preview="handlePreview"
>
......@@ -214,7 +255,17 @@
<script lang="ts" setup>
import store from '@/store'
import { computed, ref } from 'vue'
import { computed, PropType, ref, watch } from 'vue'
import { NForm } from 'naive-ui'
import exportIcon from '@images/export.svg'
const props = defineProps({
data: {
type: Object as PropType<{ [key: string]: any }>,
default: null,
},
})
const mode = ref<string | null>(null)
const show = computed(() => store.state.showNewActivityDrawer)
const closeDrawer = () => store.commit('SET_NEW_ACTIVITY_DRAWER', false)
......@@ -224,16 +275,46 @@ const typeOptions = [
{ label: '类型2', value: 'type2' },
]
const fileOptions = [
{ label: '电子表格', value: 'file' },
{ label: '照片', value: 'photo' },
{ label: '电子表格（docx、doc、xlsx、xls、csv、txt）', value: 'file' },
{ label: '描述照片（jpg、jpeg、png、img）', value: 'photo' },
]
const basicRef = ref<HTMLElement | null>(null)
const memberRef = ref<HTMLElement | null>(null)
const detailRef = ref<HTMLElement | null>(null)
const basicRef = ref<typeof NForm | null>(null)
const memberRef = ref<typeof NForm | null>(null)
const detailRef = ref<typeof NForm | null>(null)
const basicData = ref({})
const memberData = ref({})
const detailData = ref({})
watch(
() => props.data,
(data) => {
if (!data) {
basicData.value = {}
memberData.value = {}
detailData.value = {}
return
}
basicData.value = {
name: data.name,
type: data.type,
orgName: data.orgName,
date: data.date,
address: data.address,
}
memberData.value = {
count: data.count,
excludeCount: data.excludeCount,
fileType: data.fileType,
}
detailData.value = {
fileType: data.fileType,
}
mode.value = data._mode || null
},
{ immediate: true },
)
const rules = {
name: {
required: true,
......@@ -282,6 +363,15 @@ const rules = {
const submit = () => {
console.log(basicData.value, memberData.value, detailData.value)
let noMistake = true
basicRef.value?.validate((errors: any) => errors && (noMistake = false))
memberRef.value?.validate((errors: any) => errors && (noMistake = false))
detailRef.value?.validate((errors: any) => errors && (noMistake = false))
if (noMistake) {
// TODO 请求提交数据
console.log(basicData.value, memberData.value, detailData.value)
}
}
const previewFileList = ref([
......@@ -319,6 +409,9 @@ function handlePreview(file: any) {
background #f7f7f7
padding .08rem .1rem
box-sizing border-box
p
font-size .11rem
padding-left .02rem
>div
background $white-bg
border-radius .04rem
......
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