72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
|
<div class="mobile-period-setting common-mobile-view">
|
|
<el-form ref="formRef" :model="periodStore.periodSetting"
|
|
label-width="auto">
|
|
<el-form-item label="周期天数">
|
|
<el-input-number v-model="periodStore.periodSetting.cycleLength" autocomplete="off"
|
|
placeholder="请输入周期天数" clearable>
|
|
</el-input-number>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="持续天数">
|
|
<el-input-number v-model="periodStore.periodSetting.duration" autocomplete="off"
|
|
placeholder="请输入持续天数" clearable>
|
|
</el-input-number>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="是否计算">
|
|
<el-switch
|
|
v-model="periodStore.periodSetting.isCalculate"
|
|
active-text="是"
|
|
inactive-text="否"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="button-container">
|
|
<el-button type="primary" @click="confirmClick">确认</el-button>
|
|
<el-button type="info" @click="cancelClick">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { usePeriodStore } from '@/store/period.ts'
|
|
import { useAppStore } from '@/store/app.ts'
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const formRef = ref()
|
|
const periodStore = usePeriodStore()
|
|
const appStore = useAppStore()
|
|
|
|
onMounted(async () => {
|
|
appStore.isShowMobileBack = true
|
|
})
|
|
|
|
/**
|
|
* 点击确认按钮
|
|
*/
|
|
const confirmClick = () => {
|
|
formRef.value.validate().then(async () => {
|
|
await periodStore.updatePeriodSetting()
|
|
history.back()
|
|
})
|
|
}
|
|
|
|
const cancelClick = () => {
|
|
history.back()
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.mobile-period-setting {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
.button-container {
|
|
align-self: center;
|
|
}
|
|
}
|
|
</style>
|