app_vue2/pages/parameters/bills.vue

<template>
  <LayoutContainer v-if="!fetchState.pending">
    <UiForm :id="id" :model="model" :query="query()">
      <template #form.input="{entry, updateRepository}">
        <v-expansion-panels  focusable multiple :value="[0,1]">
          <!-- Description -->
          <UiExpansionPanel id="description" icon="fa-info">
            <v-container fluid class="container">
              <v-row>
                <v-col cols="12" sm="6">
                  <UiInputText field="financialDate" :data="entry['financialDate']" @update="updateRepository" />
                </v-col>
              </v-row>
            </v-container>
          </UiExpansionPanel>

          <UiExpansionPanel id="salary" icon="fa-users">
            <v-container class="container">
              <v-row>
                <v-col cols="12" sm="6">
                  <UiInputText field="musicalDate" :data="entry['musicalDate']" @update="updateRepository" />
                </v-col>

                <v-col cols="12" sm="6">
                  <UiInputText field="startCourseDate" :data="entry['startCourseDate']" @update="updateRepository" />
                </v-col>

                <v-col cols="12" sm="6">
                  <UiInputText field="endCourseDate" :data="entry['endCourseDate']" @update="updateRepository" />
                </v-col>

              </v-row>
            </v-container>
          </UiExpansionPanel>
        </v-expansion-panels>
      </template>
    </UiForm>
  </LayoutContainer>
</template>

<script lang="ts">
import {computed, ComputedRef, defineComponent, useContext} from '@nuxtjs/composition-api'
import { Organization } from '@/models/Organization/Organization'
import { repositoryHelper } from '~/services/store/repository'
import {useDataUtils} from "~/composables/data/useDataUtils";
import {Parameters} from "~/models/Organization/Parameters";
import {Query} from "@vuex-orm/core";

export default defineComponent({
  name: 'parameters',
  setup () {
    const {store, $dataProvider} = useContext()
    const {getItemToEdit} = useDataUtils($dataProvider)
    const id = store.state.profile.organization.parametersId
    const {fetchState} = getItemToEdit(id, Parameters)

    const repository = repositoryHelper.getRepository(Parameters)
    const query: ComputedRef<Query> = computed(() => repository.query())

    return {
      query: () => query,
      id,
      fetchState,
      model: Organization
    }
  }
})
</script>

<style scoped>
.v-icon.v-icon {
  font-size: 14px;
}
</style>