feat:重构模块
This commit is contained in:
23
src/views/plan/calendar.vue
Normal file
23
src/views/plan/calendar.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="mobile-plan-view common-mobile-view">
|
||||
<!-- <plan-stats />-->
|
||||
<plan-calendar />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import PlanCalendar from '@/components/Plan/PlanCalendar.vue'
|
||||
import { usePlanStore } from '@/store/plan.ts'
|
||||
import { onMounted } from 'vue'
|
||||
import PlanStats from '@/components/Plan/PlanStats.vue'
|
||||
|
||||
const planStore = usePlanStore()
|
||||
|
||||
onMounted(() => {
|
||||
planStore.refreshInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@/styles/home/plan.mobile.module";
|
||||
</style>
|
||||
207
src/views/plan/detail[id].vue
Normal file
207
src/views/plan/detail[id].vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<div class="plan-detail-mobile common-mobile-view">
|
||||
<el-form ref="formRef" :model="planStore.currentPlan"
|
||||
:rules="rules" label-width="80px" class="plan-form">
|
||||
<el-form-item label="计划标题" prop="title">
|
||||
<el-input v-model="planStore.currentPlan.title" autocomplete="off"
|
||||
placeholder="请输入标题" clearable
|
||||
show-word-limit maxlength="10">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="计划内容">
|
||||
<el-input v-model="planStore.currentPlan.content" autocomplete="off"
|
||||
placeholder="请输入标题" :rows="2" type="textarea" clearable
|
||||
show-word-limit maxlength="20">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="开始日期">
|
||||
<el-date-picker v-model="planStore.currentPlan.date"
|
||||
type="date" placeholder="请选择日期" :editable="false"
|
||||
value-format="YYYY-MM-DD" style="width: 150px;"
|
||||
:disabled-date="disabledDate" @change="changeDateEvent"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="开始时间">
|
||||
<el-time-picker v-model="planStore.currentPlan.startTime"
|
||||
placeholder="请选择开始时间" :editable="false"
|
||||
format="HH:mm" value-format="HH:mm" style="width: 150px;"
|
||||
:disabled="planStore.currentPlan.date === null"
|
||||
@change="changeStartTimeEvent"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="结束时间">
|
||||
<el-time-picker v-model="planStore.currentPlan.endTime"
|
||||
placeholder="请选择结束时间" :editable="false"
|
||||
:disabled="planStore.currentPlan.startTime === null"
|
||||
format="HH:mm" value-format="HH:mm" style="width: 150px;"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="提醒时间">
|
||||
<el-date-picker v-model="planStore.currentPlan.alterTime"
|
||||
type="datetime" placeholder="请选择提醒时间" :editable="false"
|
||||
format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm:ss"
|
||||
@change="changeAlterTimeEvent"
|
||||
:disabled-date="disabledDate" style="width: 200px;"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="邮箱地址" prop="email">
|
||||
<el-input v-model="planStore.currentPlan.email"
|
||||
placeholder="请输入邮箱地址" clearable
|
||||
:disabled="planStore.currentPlan.alterTime === null"
|
||||
style="width: 200px;">
|
||||
<template #prefix>
|
||||
<i class="fa-solid fa-envelope"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="类别">
|
||||
<el-input v-model="planStore.currentPlan.tag" autocomplete="off"
|
||||
placeholder="请输入类别" clearable
|
||||
show-word-limit maxlength="10" style="width: 150px;">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="置顶">
|
||||
<el-switch v-model="planStore.currentPlan.isTop"
|
||||
:active-value="1" :inactive-value="0"
|
||||
@change="changeTopEvent"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="优先级">
|
||||
<el-select v-model="planStore.currentPlan.priority"
|
||||
placeholder="请选择优先级" style="width: 150px;"
|
||||
:disabled="!!planStore.currentPlan.isTop">
|
||||
<el-option v-for="(item, index) in priorityOptionList"
|
||||
:key="index" :label="item.label" :value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="button-container">
|
||||
<el-button type="primary" @click="confirmClick">确认</el-button>
|
||||
<el-button v-if="planStore.planApiType === 'UPDATE'"
|
||||
type="danger" @click="deleteClick">删除</el-button>
|
||||
<el-button type="info" @click="cancelClick">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ElMessage, FormInstance, FormRules } from 'element-plus'
|
||||
import { planRules } from '@/utils/element/elRules.ts'
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import { isBeforeTime } from '@/utils/home/planUtil.ts'
|
||||
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
||||
import { usePlanStore } from '@/store/plan.ts'
|
||||
import { useUserStore } from '@/store/user.ts'
|
||||
import { useAppStore } from '@/store/app.ts'
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const rules = reactive<FormRules>(planRules)
|
||||
const planStore = usePlanStore()
|
||||
const userStore = useUserStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const priorityOptionList = [{
|
||||
value: 0,
|
||||
label: '高'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '中'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '低'
|
||||
}]
|
||||
|
||||
const disabledDate = (time: Date) => {
|
||||
return time.getTime() < Date.now() - 8.64e7
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
appStore.isShowMobileBack = true
|
||||
|
||||
await nextTick(() => {
|
||||
formRef.value?.clearValidate()
|
||||
})
|
||||
})
|
||||
|
||||
const changeDateEvent = (value: string) => {
|
||||
if (!value) {
|
||||
planStore.currentPlan.startTime = null
|
||||
planStore.currentPlan.endTime = null
|
||||
}
|
||||
}
|
||||
|
||||
const changeStartTimeEvent = (value: string) => {
|
||||
if (!value) {
|
||||
planStore.currentPlan.endTime = null
|
||||
}
|
||||
}
|
||||
|
||||
const changeAlterTimeEvent = (value: string) => {
|
||||
if (value) {
|
||||
planStore.currentPlan.email = userStore.userInfo.email
|
||||
}
|
||||
}
|
||||
|
||||
const changeTopEvent = (value: number) => {
|
||||
if (value) {
|
||||
planStore.currentPlan.priority = 0
|
||||
}
|
||||
}
|
||||
|
||||
const validatePlan = (): boolean => {
|
||||
const { startTime, endTime } = planStore.currentPlan
|
||||
if (startTime && endTime) {
|
||||
if (!isBeforeTime(startTime, endTime)) {
|
||||
ElMessage.error('请确认结束时间大于开始时间')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
const confirmClick = () => {
|
||||
formRef.value?.validate().then(async () => {
|
||||
if (validatePlan()) {
|
||||
await planStore.handlePlanApi(planStore.currentPlan)
|
||||
history.back()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const deleteClick = () => {
|
||||
commonElMessageBox('是否确认删除该计划内容?').then(async () => {
|
||||
planStore.planApiType = 'DELETE'
|
||||
await planStore.handlePlanApi(planStore.currentPlan)
|
||||
history.back()
|
||||
})
|
||||
}
|
||||
|
||||
const cancelClick = () => {
|
||||
history.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.plan-detail-mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.button-container {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
src/views/plan/list.vue
Normal file
30
src/views/plan/list.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="mobile-plan-view common-mobile-view">
|
||||
<plan-query />
|
||||
<plan-list />
|
||||
|
||||
<el-button type="primary" :icon="Plus" circle size="large"
|
||||
@click="addNewPlanClick" class="add-new" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import PlanList from '@/components/Plan/PlanList.vue'
|
||||
import PlanQuery from '@/components/Plan/PlanQuery.vue'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { usePlanStore } from '@/store/plan.ts'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const planStore = usePlanStore()
|
||||
const router = useRouter()
|
||||
|
||||
const addNewPlanClick = () => {
|
||||
planStore.planApiType = 'ADD'
|
||||
planStore.currentPlan = planStore.getEmptyPlan()
|
||||
router.push({ name: 'PlanDetailId', params: { id: 0 } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@/styles/home/plan.mobile.module";
|
||||
</style>
|
||||
Reference in New Issue
Block a user