140 lines
3.7 KiB
Vue
140 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { moveItemUp, moveItemDown, deleteItem, dialog } from 'src/stores/utils';
|
|
|
|
import NoData from 'src/components/NoData.vue';
|
|
import WorkManagementComponent from './WorkManagementComponent.vue';
|
|
|
|
const { t } = useI18n();
|
|
|
|
import { WorkItems, ProductList } from 'src/stores/product-service/types';
|
|
|
|
const serviceName = defineModel<string>('serviceName');
|
|
const product = defineModel<ProductList[]>();
|
|
|
|
const workItems = defineModel<WorkItems[]>('workItems', { default: [] });
|
|
|
|
// const workItems = ref([
|
|
// {
|
|
// id: '1',
|
|
// product: [
|
|
// {
|
|
// id: '1',
|
|
// label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี 555',
|
|
// labelEn: '2 year work permit fee',
|
|
// code: 'AC101',
|
|
// price: 1200,
|
|
// time: '14',
|
|
// },
|
|
// ],
|
|
// },
|
|
// {
|
|
// id: '2',
|
|
// product: [
|
|
// {
|
|
// id: '1',
|
|
// label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
|
|
// labelEn: '2 year work permit fee',
|
|
// code: 'AC101',
|
|
// price: 1200,
|
|
// time: '14',
|
|
// },
|
|
// {
|
|
// 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: 1200,
|
|
// time: '14',
|
|
// },
|
|
// ],
|
|
// },
|
|
// ]);
|
|
|
|
defineProps<{
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
separator?: boolean;
|
|
}>();
|
|
|
|
defineEmits<{
|
|
(e: 'addProduct', index: number): void;
|
|
(e: 'manageWorkName'): void;
|
|
(e: 'workProperties', index: number): void;
|
|
}>();
|
|
|
|
function addWork() {
|
|
workItems.value.push({
|
|
id: '',
|
|
name: '',
|
|
attributes: { additional: [] },
|
|
product: [],
|
|
});
|
|
}
|
|
|
|
function confirmDelete(items: unknown[], index: number) {
|
|
dialog({
|
|
color: 'negative',
|
|
icon: 'mdi-alert',
|
|
title: t('deleteConfirmTitle'),
|
|
actionText: t('delete'),
|
|
message: t('deleteConfirmMessage'),
|
|
action: async () => {
|
|
deleteItem(items, index);
|
|
},
|
|
cancel: () => {},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="column col-12 full-height">
|
|
<div class="col-1 app-text-muted row items-start">
|
|
• {{ $t(`workInformation`) }}
|
|
<q-btn
|
|
icon="mdi-plus"
|
|
dense
|
|
flat
|
|
round
|
|
padding="0"
|
|
color="primary"
|
|
class="q-ml-sm"
|
|
@click="addWork"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="workItems.length > 0" class="col q-gutter-y-md">
|
|
<WorkManagementComponent
|
|
v-for="(work, index) in workItems"
|
|
:key="work.id"
|
|
:index="index"
|
|
:length="workItems.length"
|
|
:workIndex="index"
|
|
v-model:work-name="workItems[index].name"
|
|
v-model:product-items="work.product"
|
|
@add-product="$emit('addProduct', index)"
|
|
@move-work-up="moveItemUp(workItems, index)"
|
|
@move-work-down="moveItemDown(workItems, index)"
|
|
@delete-work="confirmDelete(workItems, index)"
|
|
@move-product-up="moveItemUp"
|
|
@move-product-down="moveItemDown"
|
|
@delete-product="confirmDelete"
|
|
@manage-work-name="$emit('manageWorkName')"
|
|
@work-properties="$emit('workProperties', index)"
|
|
></WorkManagementComponent>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="col row rounded bordered surface-2 justify-center items-center"
|
|
>
|
|
<NoData />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|