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',
|
id: '1',
|
||||||
label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
|
label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
|
||||||
|
labelEn: '2 year work permit fee',
|
||||||
code: 'AC101',
|
code: 'AC101',
|
||||||
price: '1,200.00',
|
price: '1,200.00',
|
||||||
time: '14',
|
time: '14',
|
||||||
|
|
@ -24,6 +25,7 @@ const workItems = ref([
|
||||||
{
|
{
|
||||||
id: '1',
|
id: '1',
|
||||||
label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
|
label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
|
||||||
|
labelEn: '2 year work permit fee',
|
||||||
code: 'AC101',
|
code: 'AC101',
|
||||||
price: '1,200.00',
|
price: '1,200.00',
|
||||||
time: '14',
|
time: '14',
|
||||||
|
|
@ -32,6 +34,8 @@ const workItems = ref([
|
||||||
id: '1',
|
id: '1',
|
||||||
label:
|
label:
|
||||||
'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
|
'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
|
||||||
|
labelEn:
|
||||||
|
'Service and processing fees for submitting a work permit application on behalf of an MOU foreign worker',
|
||||||
code: 'AC102',
|
code: 'AC102',
|
||||||
price: '1,200.00',
|
price: '1,200.00',
|
||||||
time: '14',
|
time: '14',
|
||||||
|
|
@ -77,8 +81,10 @@ defineEmits<{
|
||||||
<WorkManagementComponent
|
<WorkManagementComponent
|
||||||
v-for="(work, index) in workItems"
|
v-for="(work, index) in workItems"
|
||||||
:key="work.id"
|
:key="work.id"
|
||||||
v-model:product-items="work.product"
|
:index="index"
|
||||||
|
:length="workItems.length"
|
||||||
:workIndex="index"
|
:workIndex="index"
|
||||||
|
v-model:product-items="work.product"
|
||||||
@addProduct="$emit('addProduct')"
|
@addProduct="$emit('addProduct')"
|
||||||
></WorkManagementComponent>
|
></WorkManagementComponent>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,18 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { Icon } from '@iconify/vue';
|
import { Icon } from '@iconify/vue';
|
||||||
|
|
||||||
const serviceName = defineModel<string>('serviceName');
|
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
workIndex: number;
|
workIndex: number;
|
||||||
|
length: number;
|
||||||
|
index: number;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
const workName = defineModel<string>('workName');
|
||||||
const productItems = defineModel<
|
const productItems = defineModel<
|
||||||
{
|
{
|
||||||
id: string;
|
id: string;
|
||||||
label: string;
|
label: string;
|
||||||
|
labelEn: string;
|
||||||
code: string;
|
code: string;
|
||||||
price: string;
|
price: string;
|
||||||
time: string;
|
time: string;
|
||||||
|
|
@ -24,151 +26,207 @@ defineEmits<{
|
||||||
}>();
|
}>();
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="column rounded bordered surface-2 items-start">
|
<div class="bordered rounded">
|
||||||
<div class="row items-center full-width q-gutter-x-md q-py-sm q-px-md">
|
<q-expansion-item
|
||||||
<q-btn
|
dense
|
||||||
id="btn-swap-work"
|
switch-toggle-side
|
||||||
icon="mdi-swap-vertical"
|
default-opened
|
||||||
dense
|
expand-icon="mdi-chevron-down-circle"
|
||||||
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)"
|
|
||||||
>
|
>
|
||||||
<span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
|
<template v-slot:header>
|
||||||
<q-btn
|
<div class="row items-center q-py-sm full-width">
|
||||||
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">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
id="btn-swap-work-product"
|
id="btn-swap-work-product"
|
||||||
icon="mdi-swap-vertical"
|
icon="mdi-arrow-up"
|
||||||
dense
|
dense
|
||||||
flat
|
flat
|
||||||
round
|
round
|
||||||
color="info"
|
:disable="index === 0"
|
||||||
|
style="color: hsl(var(--text-mute-2))"
|
||||||
/>
|
/>
|
||||||
<q-btn
|
<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"
|
icon="mdi-trash-can-outline"
|
||||||
dense
|
dense
|
||||||
flat
|
flat
|
||||||
round
|
round
|
||||||
|
padding="0"
|
||||||
color="negative"
|
color="negative"
|
||||||
class="q-mx-sm"
|
class="q-ml-sm"
|
||||||
@click="$emit('deleteProduct')"
|
@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
|
<div class="q-py-md q-px-lg full-width q-gutter-y-sm">
|
||||||
size="md"
|
<div
|
||||||
class="text-white q-mx-lg"
|
v-for="(product, index) in productItems"
|
||||||
style="background-color: var(--teal-9)"
|
:key="product.id"
|
||||||
|
class="full-width row items-center justify-between"
|
||||||
>
|
>
|
||||||
{{ index + 1 }}
|
<div
|
||||||
</q-avatar>
|
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">
|
<q-avatar
|
||||||
<div class="bordered q-mx-md col-3 image-box">
|
size="md"
|
||||||
<q-img
|
class="q-mx-lg"
|
||||||
src="blank-image.png"
|
style="background-color: var(--surface-tab)"
|
||||||
style="object-fit: cover; width: 100%; height: 100%"
|
>
|
||||||
></q-img>
|
{{ index + 1 }}
|
||||||
</div>
|
</q-avatar>
|
||||||
<div class="column col justify-between">
|
|
||||||
<span
|
<div class="row no-wrap">
|
||||||
class="text-weight-bold ellipsis-2-lines"
|
<div class="bordered q-mx-md col-3 image-box">
|
||||||
:style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
|
<q-img
|
||||||
>
|
src="blank-image.png"
|
||||||
{{ product.label }}
|
style="object-fit: cover; width: 100%; height: 100%"
|
||||||
<q-tooltip>{{ product.label }}</q-tooltip>
|
></q-img>
|
||||||
</span>
|
</div>
|
||||||
<div
|
<div class="column col justify-between">
|
||||||
class="bordered q-px-sm"
|
<span
|
||||||
style="border-radius: 6px; max-width: 60px"
|
class="text-weight-bold ellipsis-2-lines"
|
||||||
>
|
:style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
|
||||||
{{ product.code }}
|
>
|
||||||
|
{{
|
||||||
|
$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>
|
||||||
</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>
|
</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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -181,4 +239,15 @@ defineEmits<{
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: var(--surface-3);
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue