fix: service work expansion
This commit is contained in:
puriphatt
parent
aadc0c3759
commit
5a0087b649
2 changed files with 201 additions and 126 deletions
|
|
@ -12,6 +12,7 @@ const workItems = ref([
|
|||
{
|
||||
id: '1',
|
||||
label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
|
||||
labelEn: '2 year work permit fee',
|
||||
code: 'AC101',
|
||||
price: '1,200.00',
|
||||
time: '14',
|
||||
|
|
@ -24,6 +25,7 @@ const workItems = ref([
|
|||
{
|
||||
id: '1',
|
||||
label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
|
||||
labelEn: '2 year work permit fee',
|
||||
code: 'AC101',
|
||||
price: '1,200.00',
|
||||
time: '14',
|
||||
|
|
@ -32,6 +34,8 @@ const workItems = ref([
|
|||
id: '1',
|
||||
label:
|
||||
'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
|
||||
labelEn:
|
||||
'Service and processing fees for submitting a work permit application on behalf of an MOU foreign worker',
|
||||
code: 'AC102',
|
||||
price: '1,200.00',
|
||||
time: '14',
|
||||
|
|
@ -77,8 +81,10 @@ defineEmits<{
|
|||
<WorkManagementComponent
|
||||
v-for="(work, index) in workItems"
|
||||
:key="work.id"
|
||||
v-model:product-items="work.product"
|
||||
:index="index"
|
||||
:length="workItems.length"
|
||||
:workIndex="index"
|
||||
v-model:product-items="work.product"
|
||||
@addProduct="$emit('addProduct')"
|
||||
></WorkManagementComponent>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
<script lang="ts" setup>
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
const serviceName = defineModel<string>('serviceName');
|
||||
|
||||
defineProps<{
|
||||
workIndex: number;
|
||||
length: number;
|
||||
index: number;
|
||||
}>();
|
||||
|
||||
const workName = defineModel<string>('workName');
|
||||
const productItems = defineModel<
|
||||
{
|
||||
id: string;
|
||||
label: string;
|
||||
labelEn: string;
|
||||
code: string;
|
||||
price: string;
|
||||
time: string;
|
||||
|
|
@ -24,151 +26,207 @@ defineEmits<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="column rounded bordered surface-2 items-start">
|
||||
<div class="row items-center full-width q-gutter-x-md q-py-sm q-px-md">
|
||||
<q-btn
|
||||
id="btn-swap-work"
|
||||
icon="mdi-swap-vertical"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
padding="0"
|
||||
color="info"
|
||||
class="q-ml-sm"
|
||||
/>
|
||||
<q-btn
|
||||
id="btn-delete-work"
|
||||
icon="mdi-trash-can-outline"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
padding="0"
|
||||
color="negative"
|
||||
class="q-ml-sm"
|
||||
@click="$emit('deleteWork')"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
for="input-work-name"
|
||||
dense
|
||||
outlined
|
||||
borderless
|
||||
class="col"
|
||||
hide-bottom-space
|
||||
label="ชื่องาน"
|
||||
v-model="serviceName"
|
||||
style="background-color: var(--surface-1)"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
round
|
||||
padding="0"
|
||||
style="background-color: var(--surface-tab)"
|
||||
>
|
||||
<Icon
|
||||
icon="basil:settings-adjust-solid"
|
||||
width="24px"
|
||||
style="color: var(--stone-7)"
|
||||
/>
|
||||
</q-btn>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="full-width q-py-xs text-weight-medium row justify-between items-center q-px-lg"
|
||||
style="background-color: hsla(var(--info-bg) / 0.1)"
|
||||
<div class="bordered rounded">
|
||||
<q-expansion-item
|
||||
dense
|
||||
switch-toggle-side
|
||||
default-opened
|
||||
expand-icon="mdi-chevron-down-circle"
|
||||
>
|
||||
<span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
|
||||
<q-btn
|
||||
id="btn-add-work-product"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-plus"
|
||||
:label="$t('serviceAddProduct')"
|
||||
padding="0"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
@click="$emit('addProduct')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="q-py-md q-px-lg full-width">
|
||||
<div
|
||||
v-for="(product, index) in productItems"
|
||||
:key="product.id"
|
||||
class="full-width q-py-md q-px-sm row items-center justify-between"
|
||||
style="background-color: var(--surface-1)"
|
||||
>
|
||||
<div class="row items-center col-9 no-wrap">
|
||||
<template v-slot:header>
|
||||
<div class="row items-center q-py-sm full-width">
|
||||
<q-btn
|
||||
id="btn-swap-work-product"
|
||||
icon="mdi-swap-vertical"
|
||||
icon="mdi-arrow-up"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="info"
|
||||
:disable="index === 0"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
/>
|
||||
<q-btn
|
||||
id="btn-delete-work-product"
|
||||
id="btn-swap-work-product"
|
||||
icon="mdi-arrow-down"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
class="q-mx-sm"
|
||||
:disable="index === length - 1"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
/>
|
||||
<q-input
|
||||
for="input-work-name"
|
||||
dense
|
||||
outlined
|
||||
borderless
|
||||
class="col"
|
||||
hide-bottom-space
|
||||
:placeholder="$t('workName')"
|
||||
v-model="workName"
|
||||
:input-style="'color: hsl(var(--text-mute-2))'"
|
||||
style="background-color: var(--surface-1)"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
round
|
||||
padding="0"
|
||||
style="background-color: var(--surface-tab)"
|
||||
>
|
||||
<Icon
|
||||
icon="basil:settings-adjust-solid"
|
||||
width="24px"
|
||||
style="color: var(--stone-7)"
|
||||
/>
|
||||
</q-btn>
|
||||
<span class="text-body2 q-pl-sm" style="color: var(--foreground)">
|
||||
{{ $t('workNo') }} {{ index + 1 }} :
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-btn
|
||||
id="btn-delete-work"
|
||||
icon="mdi-trash-can-outline"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
padding="0"
|
||||
color="negative"
|
||||
class="q-mx-sm"
|
||||
@click="$emit('deleteProduct')"
|
||||
class="q-ml-sm"
|
||||
@click="$emit('deleteWork')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div class="surface-2">
|
||||
<div
|
||||
class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
|
||||
style="background-color: hsla(var(--info-bg) / 0.1)"
|
||||
>
|
||||
<span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
|
||||
<q-btn
|
||||
id="btn-add-work-product"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-plus"
|
||||
:label="$t('serviceAddProduct')"
|
||||
padding="0"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
@click="$emit('addProduct')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-avatar
|
||||
size="md"
|
||||
class="text-white q-mx-lg"
|
||||
style="background-color: var(--teal-9)"
|
||||
<div class="q-py-md q-px-lg full-width q-gutter-y-sm">
|
||||
<div
|
||||
v-for="(product, index) in productItems"
|
||||
:key="product.id"
|
||||
class="full-width row items-center justify-between"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</q-avatar>
|
||||
<div
|
||||
class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
|
||||
>
|
||||
<div class="row items-center col-9 no-wrap" v-if="productItems">
|
||||
<q-btn
|
||||
id="btn-swap-work-product"
|
||||
icon="mdi-arrow-up"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
:disable="index === 0"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
/>
|
||||
<q-btn
|
||||
id="btn-swap-work-product"
|
||||
icon="mdi-arrow-down"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
class="q-mx-sm"
|
||||
:disable="index === productItems.length - 1"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
/>
|
||||
|
||||
<div class="row no-wrap">
|
||||
<div class="bordered q-mx-md col-3 image-box">
|
||||
<q-img
|
||||
src="blank-image.png"
|
||||
style="object-fit: cover; width: 100%; height: 100%"
|
||||
></q-img>
|
||||
</div>
|
||||
<div class="column col justify-between">
|
||||
<span
|
||||
class="text-weight-bold ellipsis-2-lines"
|
||||
:style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
|
||||
>
|
||||
{{ product.label }}
|
||||
<q-tooltip>{{ product.label }}</q-tooltip>
|
||||
</span>
|
||||
<div
|
||||
class="bordered q-px-sm"
|
||||
style="border-radius: 6px; max-width: 60px"
|
||||
>
|
||||
{{ product.code }}
|
||||
<q-avatar
|
||||
size="md"
|
||||
class="q-mx-lg"
|
||||
style="background-color: var(--surface-tab)"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</q-avatar>
|
||||
|
||||
<div class="row no-wrap">
|
||||
<div class="bordered q-mx-md col-3 image-box">
|
||||
<q-img
|
||||
src="blank-image.png"
|
||||
style="object-fit: cover; width: 100%; height: 100%"
|
||||
></q-img>
|
||||
</div>
|
||||
<div class="column col justify-between">
|
||||
<span
|
||||
class="text-weight-bold ellipsis-2-lines"
|
||||
:style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
|
||||
>
|
||||
{{
|
||||
$i18n.locale === 'en-US'
|
||||
? product.labelEn
|
||||
: product.label
|
||||
}}
|
||||
<q-tooltip>
|
||||
{{
|
||||
$i18n.locale === 'en-US'
|
||||
? product.labelEn
|
||||
: product.label
|
||||
}}
|
||||
</q-tooltip>
|
||||
</span>
|
||||
<div
|
||||
class="bordered q-px-sm"
|
||||
style="border-radius: 6px; max-width: 60px"
|
||||
>
|
||||
{{ product.code }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-end text-right col-3">
|
||||
<span
|
||||
class="col-12 text-weight-bold text-h6"
|
||||
style="color: var(--teal-9)"
|
||||
>
|
||||
฿ {{ product.price }}
|
||||
</span>
|
||||
<span class="col-9 text-caption app-text-muted-2">
|
||||
{{ $t('processTime') }}
|
||||
</span>
|
||||
<span class="col-3 text-caption app-text-muted-2">
|
||||
{{ product.time }} {{ $t('day') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
id="btn-delete-work-product"
|
||||
icon="mdi-trash-can-outline"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="negative"
|
||||
class="q-mx-sm"
|
||||
@click="$emit('deleteProduct')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-end text-right col-3">
|
||||
<span
|
||||
class="col-12 text-weight-bold text-h6"
|
||||
style="color: var(--teal-9)"
|
||||
>
|
||||
฿ {{ product.price }}
|
||||
</span>
|
||||
<span class="col-9 text-caption app-text-muted-2">
|
||||
{{ $t('processTime') }}
|
||||
</span>
|
||||
<span class="col-3 text-caption app-text-muted-2">
|
||||
{{ product.time }} {{ $t('day') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-expansion-item>
|
||||
<div class="q-py-sm q-px-md bordered-t row items-center justify-between">
|
||||
<div>
|
||||
{{ $t('totalProductWork') }}
|
||||
<span class="app-text-muted-2">
|
||||
{{ workName }}
|
||||
</span>
|
||||
</div>
|
||||
<div>{{ productItems?.length ?? 0 }} {{ $t('list') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -181,4 +239,15 @@ defineEmits<{
|
|||
border-radius: 10px;
|
||||
background-color: var(--surface-3);
|
||||
}
|
||||
|
||||
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
|
||||
color: var(--brand-1);
|
||||
}
|
||||
|
||||
:deep(
|
||||
.q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
|
||||
) {
|
||||
padding-right: 8px !important;
|
||||
min-width: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue