feat: แก้ สถานะ
This commit is contained in:
Net
parent
52baaca35e
commit
fc002b9ca0
3 changed files with 116 additions and 26 deletions
|
|
@ -10,6 +10,8 @@ withDefaults(
|
|||
status?: Status;
|
||||
date?: Date;
|
||||
isType?: boolean;
|
||||
id?: string;
|
||||
isDisabled?: boolean;
|
||||
}>(),
|
||||
{
|
||||
color: 'var(--brand-1)',
|
||||
|
|
@ -19,8 +21,16 @@ withDefaults(
|
|||
|
||||
<template>
|
||||
<div
|
||||
class="full-width rounded hover-card bordered q-pa-sm"
|
||||
@click="$emit('onClick')"
|
||||
class="full-width rounded bordered q-pa-sm"
|
||||
@click="
|
||||
() => {
|
||||
if (!isDisabled) $emit('onClick');
|
||||
}
|
||||
"
|
||||
:class="{
|
||||
'hover-card': !isDisabled,
|
||||
'disabled-card': isDisabled,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="relative-position rounded q-pb-lg"
|
||||
|
|
@ -52,7 +62,11 @@ withDefaults(
|
|||
dense
|
||||
class="row q-py-sm"
|
||||
style="white-space: nowrap"
|
||||
@click="$emit('viewCard')"
|
||||
@click="
|
||||
() => {
|
||||
if (!isDisabled) $emit('viewCard');
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-icon
|
||||
name="mdi-eye-outline"
|
||||
|
|
@ -69,7 +83,13 @@ withDefaults(
|
|||
clickable
|
||||
class="row q-py-sm"
|
||||
style="white-space: nowrap"
|
||||
@click="$emit('updateCard')"
|
||||
@click="
|
||||
() => {
|
||||
if (!isDisabled) {
|
||||
$emit('updateCard');
|
||||
}
|
||||
}
|
||||
"
|
||||
v-close-popup
|
||||
>
|
||||
<q-icon
|
||||
|
|
@ -85,7 +105,11 @@ withDefaults(
|
|||
<q-item
|
||||
dense
|
||||
clickable
|
||||
@click="$emit('deleteCard')"
|
||||
@click="
|
||||
() => {
|
||||
if (!isDisabled) $emit('deleteCard');
|
||||
}
|
||||
"
|
||||
v-close-popup
|
||||
>
|
||||
<q-icon
|
||||
|
|
@ -97,6 +121,28 @@ withDefaults(
|
|||
{{ $t('delete') }}
|
||||
</span>
|
||||
</q-item>
|
||||
<q-item dense>
|
||||
<q-item-section class="q-py-sm">
|
||||
<div class="q-pa-sm surface-2 rounded">
|
||||
<q-toggle
|
||||
dense
|
||||
size="sm"
|
||||
@click="$emit('toggleStatus', id)"
|
||||
:model-value="isDisabled"
|
||||
val="xs"
|
||||
padding="none"
|
||||
>
|
||||
<div class="q-ml-xs">
|
||||
{{
|
||||
isDisabled
|
||||
? $t('switchOnLabel')
|
||||
: $t('switchOffLabel')
|
||||
}}
|
||||
</div>
|
||||
</q-toggle>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
|
|
@ -142,7 +188,13 @@ withDefaults(
|
|||
{{ dateFormat(date) }}
|
||||
</div>
|
||||
<q-btn
|
||||
@click.stop="$emit('viewDetail')"
|
||||
@click.stop="
|
||||
() => {
|
||||
if (!isDisabled) {
|
||||
$emit('viewDetail');
|
||||
}
|
||||
}
|
||||
"
|
||||
unelevated
|
||||
class="q-px-sm"
|
||||
:label="$t('detail')"
|
||||
|
|
@ -171,4 +223,9 @@ withDefaults(
|
|||
opacity: 0.8;
|
||||
box-shadow: var(--shadow-3);
|
||||
}
|
||||
|
||||
.disabled-card {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import TotalProductCardComponent from 'components/04_product-service/TotalProduc
|
|||
style="
|
||||
width: 75vw;
|
||||
display: grid;
|
||||
|
||||
background: none;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--size-3);
|
||||
"
|
||||
|
|
|
|||
|
|
@ -84,6 +84,8 @@ import { onMounted } from 'vue';
|
|||
const { t } = useI18n();
|
||||
|
||||
const inputSearch = ref<string>('');
|
||||
const searchTotalProduct = ref<string>('');
|
||||
|
||||
const drawerInfo = ref<boolean>(false);
|
||||
const isEdit = ref<boolean>(false);
|
||||
const dialogInputForm = ref<boolean>(false);
|
||||
|
|
@ -99,7 +101,7 @@ const profileUrl = ref<string | null>('');
|
|||
|
||||
const groupName = ref<string>('งาน MOU');
|
||||
const dialogProductServiceType = ref<boolean>(false);
|
||||
const dialogTotalProduct = ref<boolean>(false);
|
||||
const dialogTotalProduct = ref<boolean>(true);
|
||||
const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
|
||||
|
||||
const productGroup = ref<ProductGroup[]>();
|
||||
|
|
@ -286,6 +288,22 @@ const itemCard = [
|
|||
},
|
||||
];
|
||||
|
||||
async function toggleStatusType(id: string, status: Status) {
|
||||
await editProductServiceType(id, {
|
||||
status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
|
||||
});
|
||||
|
||||
await fetchListType();
|
||||
}
|
||||
|
||||
async function toggleStatusGroup(id: string, status: Status) {
|
||||
await editProductService(id, {
|
||||
status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
|
||||
});
|
||||
|
||||
await fetchListGroups();
|
||||
}
|
||||
|
||||
async function deleteServiceById(serviceId?: string) {
|
||||
dialog({
|
||||
color: 'negative',
|
||||
|
|
@ -772,7 +790,10 @@ watch(currentStatus, async () => {
|
|||
:subtitle="v.code"
|
||||
:date="new Date(v.updatedAt)"
|
||||
:status="v.status"
|
||||
:id="v.id"
|
||||
:isDisabled="v.status === 'ACTIVE' || v.status === 'CREATED'"
|
||||
color="var(--purple-11-hsl)"
|
||||
@toggleStatus="toggleStatusType(v.id, v.status)"
|
||||
@viewCard="
|
||||
() => {
|
||||
clearFormGroup();
|
||||
|
|
@ -811,6 +832,9 @@ watch(currentStatus, async () => {
|
|||
:date="new Date(v.updatedAt)"
|
||||
:status="v.status"
|
||||
color="var(--pink-6-hsl)"
|
||||
:id="v.id"
|
||||
:isDisabled="v.status === 'ACTIVE' || v.status === 'CREATED'"
|
||||
@toggleStatus="toggleStatusGroup(v.id, v.status)"
|
||||
@viewCard="
|
||||
() => {
|
||||
clearFormGroup();
|
||||
|
|
@ -1111,7 +1135,7 @@ watch(currentStatus, async () => {
|
|||
v-model:modal="dialogTotalProduct"
|
||||
noAddress
|
||||
noAppBox
|
||||
title="รวมสินค้าทั้งหมด (2 ชิ้น)"
|
||||
title="สินค้าทั้งหมด"
|
||||
:submit="
|
||||
() => {
|
||||
console.log('submit');
|
||||
|
|
@ -1119,24 +1143,33 @@ watch(currentStatus, async () => {
|
|||
"
|
||||
:close="() => {}"
|
||||
>
|
||||
<template #footer>
|
||||
<div class="row items-center q-gutter-md">
|
||||
<q-icon name="mdi-cart" class="app-text-muted" size="sm" />
|
||||
<div class="relative-position" style="bottom: 15px; right: 25px">
|
||||
<div
|
||||
class="absolute bg-red text-white flex justify-center text-center rounded items-center"
|
||||
style="width: 16px; height: 16px; font-size: 11px"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
รวมสินค้าทั้งหมด
|
||||
<div class="text-bold" style="color: var(--green-10)">฿ 2,400</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 75vw;
|
||||
display: grid;
|
||||
background: none;
|
||||
grid-template-rows: auto;
|
||||
gap: var(--size-3);
|
||||
"
|
||||
>
|
||||
<div class="row items-center">
|
||||
<q-space />
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
:label="$t('search')"
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="searchTotalProduct"
|
||||
debounce="500"
|
||||
@update:model-value=""
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</template>
|
||||
<TotalProductComponent />
|
||||
<TotalProductComponent />
|
||||
</div>
|
||||
</FormDialog>
|
||||
|
||||
<!-- Add Product -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue