feat:重构模块
This commit is contained in:
43
src/views/anniversary/category.vue
Normal file
43
src/views/anniversary/category.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="mobile-anniversary-category common-mobile-view">
|
||||
<div class="category-list">
|
||||
<category-card
|
||||
v-for="(item, index) in anniversaryCategoryMap.keys()" :key="index"
|
||||
:category-item="anniversaryCategoryMap.get(item)" :count="getCategoryCount(item)"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CategoryCard from '@/components/Anniversary/CategoryCard.vue'
|
||||
import { onMounted } from 'vue'
|
||||
import { useAnniversaryStore } from '@/store/anniversary.ts'
|
||||
import { anniversaryCategoryMap } from '@/utils/home/anniversaryUtil.ts'
|
||||
|
||||
const anniversaryStore = useAnniversaryStore()
|
||||
|
||||
onMounted(async () => {
|
||||
await anniversaryStore.queryAnniversaryCategory()
|
||||
})
|
||||
|
||||
const getCategoryCount = (name: string): number => {
|
||||
const categoryItem = anniversaryStore.categoryStats.find((item) => item.name === name)
|
||||
if (categoryItem) {
|
||||
return categoryItem.value
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mobile-anniversary-category {
|
||||
.category-list {
|
||||
padding: 0 5px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
justify-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
122
src/views/anniversary/detail[id].vue
Normal file
122
src/views/anniversary/detail[id].vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="mobile-anniversary-detail common-mobile-view">
|
||||
<el-form ref="formRef" :model="anniversaryStore.currentAnniversary"
|
||||
:rules="rules" label-width="60px">
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="anniversaryStore.currentAnniversary.title" autocomplete="off"
|
||||
placeholder="请输入标题" clearable
|
||||
show-word-limit maxlength="10">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="日期" prop="date">
|
||||
<el-date-picker
|
||||
v-model="anniversaryStore.currentAnniversary.date"
|
||||
type="date" :editable="false" placeholder="请选择日期"
|
||||
value-format="YYYY-MM-DD"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="anniversaryStore.currentAnniversary.type"
|
||||
@change="changeTypeEvent">
|
||||
<el-radio v-for="(item, index) in dateTypeList"
|
||||
:value="item.value" :key="index" :label="item.label">
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="重复" prop="recurring">
|
||||
<el-switch
|
||||
v-model="anniversaryStore.currentAnniversary.recurring"
|
||||
inline-prompt active-text="是" inactive-text="否"
|
||||
:disabled="anniversaryStore.currentAnniversary.type === 'countUp'"
|
||||
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="分类" prop="category">
|
||||
<el-select v-model="anniversaryStore.currentAnniversary.category"
|
||||
placeholder="请选择分类" clearable>
|
||||
<el-option
|
||||
v-for="(item, index) in anniversaryCategoryMap.keys()"
|
||||
:key="index" :label="item" :value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="button-container">
|
||||
<el-button type="primary" @click="confirmClick">确认</el-button>
|
||||
<el-button v-if="anniversaryStore.anniversaryApiType === 'UPDATE'"
|
||||
type="danger" @click="deleteClick">删除</el-button>
|
||||
<el-button type="info" @click="cancelClick">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useAnniversaryStore } from '@/store/anniversary.ts'
|
||||
import { useAppStore } from '@/store/app.ts'
|
||||
import { FormRules } from 'element-plus'
|
||||
import { anniversaryRules } from '@/utils/element/elRules.ts'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
||||
import { anniversaryCategoryMap } from '@/utils/home/anniversaryUtil.ts'
|
||||
|
||||
const formRef = ref()
|
||||
const rules = reactive<FormRules>(anniversaryRules)
|
||||
const anniversaryStore = useAnniversaryStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const dateTypeList = [{
|
||||
value: 'countDown',
|
||||
label: '倒数日'
|
||||
}, {
|
||||
value: 'countUp',
|
||||
label: '正数日'
|
||||
}]
|
||||
|
||||
onMounted(async () => {
|
||||
appStore.isShowMobileBack = true
|
||||
})
|
||||
|
||||
const changeTypeEvent = (value: string) => {
|
||||
if (value === 'countUp') {
|
||||
anniversaryStore.currentAnniversary.recurring = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
const confirmClick = () => {
|
||||
formRef.value.validate().then(async () => {
|
||||
await anniversaryStore.handleAnniversaryApi(anniversaryStore.currentAnniversary)
|
||||
history.back()
|
||||
})
|
||||
}
|
||||
|
||||
const cancelClick = () => {
|
||||
history.back()
|
||||
}
|
||||
|
||||
const deleteClick = () => {
|
||||
commonElMessageBox('是否确认删除该纪念日内容?').then(async () => {
|
||||
anniversaryStore.anniversaryApiType = 'DELETE'
|
||||
await anniversaryStore.handleAnniversaryApi(anniversaryStore.currentAnniversary)
|
||||
history.back()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mobile-anniversary-detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.button-container {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
50
src/views/anniversary/list.vue
Normal file
50
src/views/anniversary/list.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="mobile-anniversary-list common-mobile-view">
|
||||
<anniversary-query />
|
||||
|
||||
<el-empty v-if="anniversaryStore.anniversaryList.length === 0" />
|
||||
|
||||
<div v-else class="anniversary-list">
|
||||
<anniversary-card v-for="(item, index) in anniversaryStore.anniversaryList"
|
||||
:key="index" :date-item="item" />
|
||||
</div>
|
||||
|
||||
<draggable-button @click="addClick"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import DraggableButton from '@/components/Common/DraggableButton.vue'
|
||||
import AnniversaryQuery from '@/components/Anniversary/AnniversaryQuery.vue'
|
||||
import AnniversaryCard from '@/components/Anniversary/AnniversaryCard.vue'
|
||||
import { useAnniversaryStore } from '@/store/anniversary.ts'
|
||||
import { onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const anniversaryStore = useAnniversaryStore()
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(async () => {
|
||||
await anniversaryStore.queryAnniversaryList()
|
||||
})
|
||||
|
||||
const addClick = () => {
|
||||
anniversaryStore.anniversaryApiType = 'ADD'
|
||||
anniversaryStore.currentAnniversary = anniversaryStore.getEmptyAnniversary()
|
||||
router.push({ name: 'AnniversaryDetailId', params: { id: 0 } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mobile-anniversary-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.anniversary-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user