mfnefd/domBudg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

fix: страницы и формы теперь выглядят нормально

Browse Source
This commit is contained in:
mfnefd 2024-12-08 23:50:09 +04:00
parent 310aa7fb83
commit 169a042075
7 changed files with 89 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
front/src/App.vue
View File

@ -6,16 +6,21 @@ import Header from './components/main/Header.vue';
<a-layout class="layout">
<Header />
<a-layout-content>
<a-flex gap="middle" vertical>
<RouterView />
</a-flex>
</a-layout-content>
</a-layout>
</template>
<style scoped>
main {
padding: 36px;
margin: 14px;
display: flex;
justify-content: center;
padding: 5vh;
}
.base-page {
display: flex;
flex-direction: column;
min-width: 80dvw;
}
</style>

3
front/src/components/pages/Groups.vue
View File

@ -42,6 +42,8 @@ const onDelete = (key: string) => {
</script>
<template>
<div class="base-page">
<h1>Группы расходов</h1>
<SpendingGroupManager :refreshData="refreshData" />
<a-table :dataSource="state" :columns="columns" v-if="isReady">
<template #bodyCell="{ column, record }">
@ -62,6 +64,7 @@ const onDelete = (key: string) => {
<div v-else>
<a-spin size="large" />
</div>
</div>
</template>
<style scoped>

5
front/src/components/pages/Home.vue
View File

@ -47,6 +47,8 @@ const onDelete = (key: string) => {
</script>
<template>
<div class="base-page">
<h1>История изменений баланса</h1>
<ChangeRecordMenu :refreshData="refreshData" />
<a-table :dataSource="state" :columns="columns" v-if="isReady" >
<template #bodyCell="{ column, record }">
@ -64,8 +66,11 @@ const onDelete = (key: string) => {
<div v-else>
<a-spin size="large" />
</div>
</div>
</template>
<style scoped>
.layout {
}
</style>

2
front/src/components/pages/Plans.vue
View File

@ -52,6 +52,7 @@ const onDelete = (key: string) => {
</script>
<template>
<div class="base-page">
<h1>Планы группы</h1>
<PlanManager :groupId="groupId" :refreshData="refreshData"/>
<a-table :dataSource="state" :columns="columns" v-if="isReady">
@ -70,6 +71,7 @@ const onDelete = (key: string) => {
<div v-else>
<a-spin size="large" />
</div>
</div>
</template>
<style scoped>

11
front/src/components/support/ChangeRecordManager.vue
View File

@ -20,6 +20,7 @@
label="Группа расходов"
name="spendingGroupId"
v-if="isReady"
:rules="[{ required: true, message: 'Пожалуйста, выберите группу расходов' }]"
>
<a-select v-model:value="formState.spendingGroupId" :disabled="disabled">
@ -35,12 +36,13 @@
<a-form-item
name="changedAt"
label="Дата"
:rules="[{ required: true, message: 'Пожалуйста, выберите дату' }]"
>
<a-date-picker v-model:value="pickedChangedAt" />
</a-form-item>
<a-form-item>
<a-button html-type="submit" type="primary">Сохранить</a-button>
<a-button html-type="submit" :disabled="disabledForm" type="primary">Сохранить</a-button>
</a-form-item>
</a-form>
</a-space>
@ -49,7 +51,6 @@
import { computed, inject, reactive, ref } from 'vue';
import { ChangeRecordDto, SpendingGroupViewModel } from '../../core/api/data-contracts';
import { useUserStore } from '../../store';
import router from '../../router';
import { ChangeRecordService } from '../../core/services/change-record-service';
import { GroupService } from '../../core/services/group-service';
import { useAsyncState } from '@vueuse/core';
@ -70,7 +71,7 @@ const { state: groupList, isReady } = useAsyncState(() => groupService.getList()
const pickedChangedAt = ref<Dayjs>();
const formState = reactive<ChangeRecordDto>({
userId: store.user.id,
sum: 0,
sum: -1,
changedAt: new Date().toISOString(),
spendingGroupId: null
});
@ -88,5 +89,7 @@ const onFinishFailed = (errorInfo: any) => {
const disabled = computed(() => {
return formState.sum && formState.sum >= 0;
});
const disabledForm = computed(() => {
return !(formState.sum && formState.changedAt && (formState.spendingGroupId || formState.sum > 0));
})
</script>

9
front/src/components/support/PlanManager.vue
View File

@ -33,15 +33,14 @@
</a-form-item>
<a-form-item>
<a-button html-type="submit" type="primary">Добавить</a-button>
<a-button :disabled="disabledForm" html-type="submit" type="primary">Добавить</a-button>
</a-form-item>
</a-form>
</a-space>
</template>
<script setup lang="ts">
import { inject, reactive, ref } from 'vue';
import { computed, inject, reactive, ref } from 'vue';
import { SpendingPlanDto } from '../../core/api/data-contracts';
import { ChangeRecordService } from '../../core/services/change-record-service';
import { Dayjs } from 'dayjs';
import { PlanService } from '../../core/services/plans-service';
@ -74,4 +73,8 @@ const onFinish = async (values: any) => {
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
const disabledForm = computed(() => {
return !(formState.sum && formState.startAt && formState.endAt);
});
</script>

8
front/src/components/support/SpendingGroupManager.vue
View File

@ -15,13 +15,13 @@
<a-input v-model:value="formState.name" />
</a-form-item>
<a-form-item>
<a-button html-type="submit" type="primary">Сохранить</a-button>
<a-button :disabled="disabledForm" html-type="submit" type="primary">Сохранить</a-button>
</a-form-item>
</a-form>
</a-space>
</template>
<script setup lang="ts">
import { inject, reactive } from 'vue';
import { computed, inject, reactive } from 'vue';
import { useUserStore } from '../../store';
import { GroupService } from '../../core/services/group-service';
import { SpendingGroupDto } from '../../core/api/data-contracts';
@ -50,4 +50,8 @@ const onFinish = async (values: any) => {
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
const disabledForm = computed(() => {
return !formState.name;
});
</script>