bug fix in cost list and use expanded row

This commit is contained in:
Hesabix 2025-03-27 13:06:32 +00:00
parent 65d45e73d1
commit a1a5b944c8
4 changed files with 264 additions and 216 deletions

View file

@ -296,7 +296,7 @@ class CostController extends AbstractController
// دریافت اطلاعات مرکز هزینه و مبلغ // دریافت اطلاعات مرکز هزینه و مبلغ
$costDetails = $entityManager->createQueryBuilder() $costDetails = $entityManager->createQueryBuilder()
->select('t.name as center_name, r.bd as amount') ->select('t.name as center_name, r.bd as amount, r.des as des')
->from('App\Entity\HesabdariRow', 'r') ->from('App\Entity\HesabdariRow', 'r')
->join('r.ref', 't') ->join('r.ref', 't')
->where('r.doc = :docId') ->where('r.doc = :docId')
@ -309,6 +309,7 @@ class CostController extends AbstractController
return [ return [
'name' => $detail['center_name'], 'name' => $detail['center_name'],
'amount' => (int) $detail['amount'], 'amount' => (int) $detail['amount'],
'des' => $detail['des'],
]; ];
}, $costDetails); }, $costDetails);

View file

@ -267,6 +267,8 @@ const fa_lang = {
count: "تعداد", count: "تعداد",
}, },
dialog: { dialog: {
acc_price: 'مبلغ',
des: 'شرح',
warning: 'هشدار', warning: 'هشدار',
column_settings: 'ستون‌های جدول', column_settings: 'ستون‌های جدول',
all: 'همه موارد', all: 'همه موارد',

View file

@ -103,8 +103,8 @@
</v-text-field> </v-text-field>
<v-data-table-server :headers="headers" :items="items" :loading="loading" :items-length="totalItems" <v-data-table-server :headers="headers" :items="items" :loading="loading" :items-length="totalItems"
v-model:options="serverOptions" @update:options="fetchData" item-value="code" class="elevation-1 data-table-wrapper" v-model:options="serverOptions" v-model:expanded="expanded" @update:options="fetchData" item-value="code"
:header-props="{ class: 'custom-header' }"> class="elevation-1 data-table-wrapper" :header-props="{ class: 'custom-header' }" show-expand>
<template #header.checkbox> <template #header.checkbox>
<v-checkbox :model-value="isAllSelected" @change="toggleSelectAll" hide-details density="compact" /> <v-checkbox :model-value="isAllSelected" @change="toggleSelectAll" hide-details density="compact" />
</template> </template>
@ -143,25 +143,66 @@
{{ $filters.formatNumber(item.amount) }} {{ $filters.formatNumber(item.amount) }}
</template> </template>
<template #item.costCenter="{ item }"> <template #expanded-row="{ columns, item }">
{{item.costCenters.map(center => center.name).join(', ') || '—'}} <tr>
</template> <td :colspan="columns.length" class="expanded-row">
</v-data-table-server> <v-container>
<v-row>
<v-row class="mt-4 pa-4"> <v-col cols="12">
<v-col cols="6"> <h4>مراکز هزینه</h4>
<v-card flat> <v-list dense>
<v-card-title>جمع کل هزینهها</v-card-title> <v-list-item v-for="(center, index) in item.costCenters" :key="index">
<v-card-text>{{ $filters.formatNumber(totalCost) }}</v-card-text> <v-list-item-title>
</v-card> {{ center.name }}
</v-col> {{ $t('dialog.acc_price') }} : {{ this.$filters.formatNumber(center.amount) }}
<v-col cols="6"> {{ $t('dialog.des') }} : {{ center.des }}
<v-card flat> </v-list-item-title>
<v-card-title>جمع موارد انتخابشده</v-card-title> </v-list-item>
<v-card-text>{{ $filters.formatNumber(selectedCost) }}</v-card-text> <v-list-item v-if="!item.costCenters || item.costCenters.length === 0">
</v-card> <v-list-item-title></v-list-item-title>
</v-list-item>
</v-list>
</v-col> </v-col>
</v-row> </v-row>
</v-container>
</td>
</tr>
</template>
</v-data-table-server>
<v-container fluid class="pa-0 ma-0 my-3">
<v-card
class="rounded border-start border-success border-3"
elevation="2"
link
href="javascript:void(0)"
>
<v-card-text class="bg-body-light pa-4">
<v-row>
<v-col cols="12" sm="6">
<span class="text-dark">
<v-icon icon="mdi-format-list-bulleted" size="small" class="me-1" />
مبلغ کل:
</span>
<span class="text-primary">
{{ $filters.formatNumber(totalCost) }}
{{ $filters.getActiveMoney().shortName }}
</span>
</v-col>
<v-col cols="12" sm="6">
<span class="text-dark">
<v-icon icon="mdi-format-list-checks" size="small" class="me-1" />
جمع مبلغ موارد انتخابی:
</span>
<span class="text-primary">
{{ $filters.formatNumber(selectedCost) }}
{{ $filters.getActiveMoney().shortName }}
</span>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-container>
</template> </template>
<script setup> <script setup>
@ -182,8 +223,9 @@ const selectedItems = ref(new Set());
const totalItems = ref(0); const totalItems = ref(0);
const searchQuery = ref(''); const searchQuery = ref('');
const timeFilter = ref('all'); const timeFilter = ref('all');
const expanded = ref([]); // برای مدیریت ردیفهای گسترشیافته
// فیلترهای زمانی (بدون بازه دلخواه) // فیلترهای زمانی
const timeFilters = ref([ const timeFilters = ref([
{ label: 'امروز', value: 'today', checked: false }, { label: 'امروز', value: 'today', checked: false },
{ label: 'این هفته', value: 'week', checked: false }, { label: 'این هفته', value: 'week', checked: false },
@ -191,13 +233,12 @@ const timeFilters = ref([
{ label: 'همه', value: 'all', checked: true }, { label: 'همه', value: 'all', checked: true },
]); ]);
// تعریف ستونهای جدول // تعریف ستونهای جدول (ستون costCenter از هدرها حذف شده)
const headers = ref([ const headers = ref([
{ title: '', key: 'checkbox', sortable: false, width: '50', align: 'center' }, { title: '', key: 'checkbox', sortable: false, width: '50', align: 'center' },
{ title: 'ردیف', key: 'index', align: 'center', sortable: false, width: '70' }, { title: 'ردیف', key: 'index', align: 'center', sortable: false, width: '70' },
{ title: 'عملیات', key: 'operation', align: 'center', sortable: false, width: '100' }, { title: 'عملیات', key: 'operation', align: 'center', sortable: false, width: '100' },
{ title: 'کد', key: 'code', align: 'center', sortable: true }, { title: 'کد', key: 'code', align: 'center', sortable: true },
{ title: 'مرکز هزینه', key: 'costCenter', align: 'center', sortable: false },
{ title: 'مبلغ', key: 'amount', align: 'center', sortable: true }, { title: 'مبلغ', key: 'amount', align: 'center', sortable: true },
{ title: 'تاریخ', key: 'date', align: 'center', sortable: true }, { title: 'تاریخ', key: 'date', align: 'center', sortable: true },
{ title: 'شرح', key: 'des', align: 'center', sortable: true }, { title: 'شرح', key: 'des', align: 'center', sortable: true },
@ -512,4 +553,9 @@ onMounted(() => {
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
} }
.expanded-row {
background-color: #f5f5f5;
padding: 10px;
}
</style> </style>

View file

@ -20,14 +20,14 @@
<input v-model="searchValue" class="form-control" type="text" placeholder="جست و جو ..."> <input v-model="searchValue" class="form-control" type="text" placeholder="جست و جو ...">
</div> </div>
</div> </div>
<EasyDataTable table-class-name="customize-table" v-model:items-selected="itemsSelected" show-index alternating :search-value="searchValue" <EasyDataTable table-class-name="customize-table" v-model:items-selected="itemsSelected" show-index
:headers="headers" :items="items" theme-color="#1d90ff" header-text-direction="center" alternating :search-value="searchValue" :headers="headers" :items="items" theme-color="#1d90ff"
body-text-direction="center" rowsPerPageMessage="تعداد سطر" emptyMessage="اطلاعاتی برای نمایش وجود ندارد" header-text-direction="center" body-text-direction="center" rowsPerPageMessage="تعداد سطر"
rowsOfPageSeparatorMessage="از" :loading="loading"> emptyMessage="اطلاعاتی برای نمایش وجود ندارد" rowsOfPageSeparatorMessage="از" :loading="loading">
<template #item-operation="{ code }"> <template #item-operation="{ code }">
<div class="dropdown-center"> <div class="dropdown-center">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-sm btn-link" <button aria-expanded="false" aria-haspopup="true" class="btn btn-sm btn-link" data-bs-toggle="dropdown"
data-bs-toggle="dropdown" id="dropdown-align-center-alt-primary" type="button"> id="dropdown-align-center-alt-primary" type="button">
<i class="fa-solid fa-ellipsis"></i> <i class="fa-solid fa-ellipsis"></i>
</button> </button>
<div aria-labelledby="dropdown-align-center-outline-primary" class="dropdown-menu dropdown-menu-end" <div aria-labelledby="dropdown-align-center-outline-primary" class="dropdown-menu dropdown-menu-end"
@ -52,36 +52,35 @@
</div> </div>
</template> </template>
</EasyDataTable> </EasyDataTable>
<div class="container-fluid p-0 mx-0 my-3"> <v-container fluid class="pa-0 ma-0 my-3">
<a class="block block-rounded block-link-shadow border-start border-success border-3" <v-card class="rounded border-start border-success border-3" elevation="2" link href="javascript:void(0)">
href="javascript:void(0)"> <v-card-text class="bg-body-light pa-4">
<div class="block-content block-content-full block-content-sm bg-body-light"> <v-row>
<div class="row"> <v-col cols="12" sm="6">
<div class="col-sm-6 com-md-6">
<span class="text-dark"> <span class="text-dark">
<i class="fa fa-list-dots"></i> <v-icon icon="mdi-format-list-bulleted" size="small" class="me-1" />
مبلغ کل: مبلغ کل:
</span> </span>
<span class="text-primary"> <span class="text-primary">
{{ $filters.formatNumber(this.sumTotal) }} {{ $filters.formatNumber(sumTotal) }}
{{ $filters.getActiveMoney().shortName }} {{ $filters.getActiveMoney().shortName }}
</span> </span>
</div> </v-col>
<div class="col-sm-6 com-md-6"> <v-col cols="12" sm="6">
<span class="text-dark"> <span class="text-dark">
<i class="fa fa-list-check"></i> <v-icon icon="mdi-format-list-checks" size="small" class="me-1" />
جمع مبلغ موارد انتخابی: جمع مبلغ موارد انتخابی:
</span> </span>
<span class="text-primary"> <span class="text-primary">
{{ $filters.formatNumber(this.sumSelected) }} {{ $filters.formatNumber(sumSelected) }}
{{ $filters.getActiveMoney().shortName }} {{ $filters.getActiveMoney().shortName }}
</span> </span>
</div> </v-col>
</div> </v-row>
</div> </v-card-text>
</a> </v-card>
</div> </v-container>
</div> </div>
</div> </div>
</div> </div>