78 lines
2 KiB
Vue
78 lines
2 KiB
Vue
<script setup lang="ts">
|
|
import { AddButton } from 'components/button';
|
|
import ToggleButton from 'src/components/button/ToggleButton.vue';
|
|
import WorkerItem from 'src/components/05_quotation/WorkerItem.vue';
|
|
|
|
defineProps<{
|
|
readonly?: boolean;
|
|
hideBtnAddWorker?: boolean;
|
|
employeeAmount?: number;
|
|
rowWorker: {
|
|
foreignRefNo: string;
|
|
employeeName: string;
|
|
birthDate: string;
|
|
gender: string;
|
|
age: string;
|
|
nationality: string;
|
|
documentExpireDate: string;
|
|
imgUrl?: string;
|
|
status: string;
|
|
}[];
|
|
}>();
|
|
|
|
defineEmits<{
|
|
(e: 'addWorker'): void;
|
|
(e: 'edit'): void;
|
|
(e: 'update:employeeAmount', number: number): void;
|
|
(e: 'delete', index: number): void;
|
|
}>();
|
|
|
|
const toggleWorker = defineModel<boolean>('toggleWorker');
|
|
</script>
|
|
|
|
<template>
|
|
<q-expansion-item
|
|
for="item-up"
|
|
id="item-up"
|
|
dense
|
|
class="overflow-hidden"
|
|
switch-toggle-side
|
|
default-opened
|
|
style="border-radius: var(--radius-2)"
|
|
expand-icon="mdi-chevron-down-circle"
|
|
header-class="surface-1"
|
|
>
|
|
<template v-slot:header>
|
|
<section class="row items-center full-width">
|
|
<div class="row items-center q-pr-md q-py-sm">
|
|
<span class="q-mr-md" style="font-size: 18px">
|
|
{{ $t('quotation.employeeList') }}
|
|
</span>
|
|
<template v-if="!readonly">
|
|
<!-- <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
|
|
{{ toggleWorker ? $t('general.specify') : $t('general.noSpecify') }} -->
|
|
</template>
|
|
</div>
|
|
<nav class="q-ml-auto">
|
|
<AddButton
|
|
v-if="!readonly"
|
|
icon-only
|
|
@click.stop="$emit('addWorker')"
|
|
/>
|
|
</nav>
|
|
</section>
|
|
</template>
|
|
|
|
<div class="surface-1 q-pa-md full-width">
|
|
<WorkerItem
|
|
@update:employee-amount="(v) => $emit('update:employeeAmount', v)"
|
|
:employee-amount
|
|
:readonly="readonly"
|
|
:rows="rowWorker"
|
|
@delete="(i) => $emit('delete', i)"
|
|
/>
|
|
</div>
|
|
</q-expansion-item>
|
|
</template>
|
|
|
|
<style scoped></style>
|