add notic for cheques list with two colors

This commit is contained in:
Hesabix 2025-09-03 01:04:56 +03:30
parent fb251af713
commit 822402cfda

View file

@ -11,11 +11,11 @@
<template v-slot:extension>
<v-tabs v-model="tab" color="primary" class="bg-light" grow>
<v-tab value="input" block>
<v-icon start>mdi-file-export</v-icon>
<v-icon start color="green">mdi-arrow-down-bold</v-icon>
چکهای دریافتی
</v-tab>
<v-tab value="output" block>
<v-icon start>mdi-file-import</v-icon>
<v-icon start color="red">mdi-arrow-up-bold</v-icon>
چکهای پرداختی
</v-tab>
</v-tabs>
@ -29,14 +29,14 @@
<v-list>
<v-list-item @click="$router.push('/acc/cheque/input')">
<template v-slot:prepend>
<v-icon>mdi-file-export</v-icon>
<v-icon color="green">mdi-arrow-down-bold</v-icon>
</template>
<v-list-item-title>چک دریافتی</v-list-item-title>
</v-list-item>
<v-list-item @click="$router.push('/acc/cheque/output')">
<template v-slot:prepend>
<v-icon>mdi-file-import</v-icon>
<v-icon color="red">mdi-arrow-up-bold</v-icon>
</template>
<v-list-item-title>چک پرداختی</v-list-item-title>
</v-list-item>
@ -63,11 +63,12 @@
<v-window v-model="tab">
<v-window-item value="input">
<v-text-field class="pt-1" v-model="searchValueInput" prepend-inner-icon="mdi-magnify" label="جست و جو"
variant="outlined" density="compact" :rounded="false"></v-text-field>
<div class="input-tab-container">
<v-text-field class="pt-1" v-model="searchValueInput" prepend-inner-icon="mdi-magnify" label="جست و جو"
variant="outlined" density="compact" :rounded="false"></v-text-field>
<v-data-table :headers="headersInput" :items="itemsInput" :search="searchValueInput" :loading="loading" show-index
density="comfortable" class="elevation-1" :header-props="{ class: 'custom-header' }">
<v-data-table :headers="headersInput" :items="itemsInput" :search="searchValueInput" :loading="loading" show-index
density="comfortable" class="elevation-1" :header-props="{ class: 'custom-header' }">
<template v-slot:item.operation="{ item }">
<div class="d-flex">
<v-menu>
@ -117,15 +118,17 @@
{{ item.status }}
</v-chip>
</template>
</v-data-table>
</v-data-table>
</div>
</v-window-item>
<v-window-item value="output">
<v-text-field class="pt-1" v-model="searchValueOutput" prepend-inner-icon="mdi-magnify" label="جست و جو"
variant="outlined" density="compact" :rounded="false"></v-text-field>
<div class="output-tab-container">
<v-text-field class="pt-1" v-model="searchValueOutput" prepend-inner-icon="mdi-magnify" label="جست و جو"
variant="outlined" density="compact" :rounded="false"></v-text-field>
<v-data-table :headers="headersInput" :items="itemsOutput" :search="searchValueOutput" :loading="loading"
show-index density="comfortable" class="elevation-1" :header-props="{ class: 'custom-header' }">
<v-data-table :headers="headersInput" :items="itemsOutput" :search="searchValueOutput" :loading="loading"
show-index density="comfortable" class="elevation-1" :header-props="{ class: 'custom-header' }">
<template v-slot:item.operation="{ item }">
<div class="d-flex">
<v-menu>
@ -163,7 +166,8 @@
{{ item.status }}
</v-chip>
</template>
</v-data-table>
</v-data-table>
</div>
</v-window-item>
</v-window>
@ -540,4 +544,34 @@ export default {
.bg-primary-light {
background-color: var(--v-primary-lighten1);
}
/* استایل ساده برای تب چک‌های دریافتی - سبز روشن */
.input-tab-container {
background-color: #e8f5e8;
}
/* استایل ساده برای تب چک‌های پرداختی - قرمز روشن */
.output-tab-container {
background-color: #ffeaea;
}
/* استایل ساده برای تب دریافتی */
.v-tab[value="input"] {
color: #2e7d32 !important;
}
.v-tab[value="input"].v-tab--selected {
background-color: #c8e6c9;
color: #1b5e20 !important;
}
/* استایل ساده برای تب پرداختی */
.v-tab[value="output"] {
color: #c62828 !important;
}
.v-tab[value="output"].v-tab--selected {
background-color: #ffcdd2;
color: #b71c1c !important;
}
</style>