1076 lines
34 KiB
Vue
1076 lines
34 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, watch } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { QSelect, QTableProps } from 'quasar';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import { baseUrl } from 'src/stores/utils';
|
|
import useCustomerStore from 'stores/customer';
|
|
import useFlowStore from 'stores/flow';
|
|
import useOptionStore from 'stores/options';
|
|
import { dialog, canAccess } from 'stores/utils';
|
|
|
|
import { Status } from 'stores/types';
|
|
import { Employee } from 'stores/employee/types';
|
|
import { CustomerBranch, CustomerType } from 'stores/customer/types';
|
|
|
|
import { columnsEmployee } from './constant';
|
|
import { useCustomerBranchForm, useEmployeeForm } from './form';
|
|
|
|
import DialogEmployee from 'src/components/03_customer-management/DialogEmployee.vue';
|
|
import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
|
|
import EmployerFormAuthorized from './components/employer/EmployerFormAuthorized.vue';
|
|
import FloatingActionButton from 'components/FloatingActionButton.vue';
|
|
import SideMenu from 'components/SideMenu.vue';
|
|
import { DialogFormContainer, DialogHeader } from 'components/dialog';
|
|
import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
|
|
import PaginationComponent from 'components/PaginationComponent.vue';
|
|
import NoData from 'components/NoData.vue';
|
|
import TableEmpoloyee from 'components/03_customer-management/TableEmpoloyee.vue';
|
|
import { AddressForm } from 'components/form';
|
|
import {
|
|
SaveButton,
|
|
CancelButton,
|
|
UndoButton,
|
|
EditButton,
|
|
DeleteButton,
|
|
} from 'components/button';
|
|
import {
|
|
EmployerFormAbout,
|
|
EmployerFormBusiness,
|
|
EmployerFormContact,
|
|
} from './components';
|
|
import { formatAddress } from 'src/utils/address';
|
|
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
|
|
import { nextTick } from 'vue';
|
|
|
|
const route = useRoute();
|
|
const flowStore = useFlowStore();
|
|
const customerStore = useCustomerStore();
|
|
const employeeFormStore = useEmployeeForm();
|
|
const customerBranchFormStore = useCustomerBranchForm();
|
|
|
|
const { t } = useI18n();
|
|
const { fetchListCustomerBranch, fetchBranchEmployee } = customerStore;
|
|
const {
|
|
currentFormData: customerBranchFormData,
|
|
state: customerBranchFormState,
|
|
} = storeToRefs(customerBranchFormStore);
|
|
|
|
const inputSearch = ref<string>('');
|
|
|
|
const branch = defineModel<CustomerBranch[]>('branch');
|
|
const modeView = defineModel<boolean>('modeView');
|
|
|
|
const currentCustomerUrlImage = defineModel<string | null>(
|
|
'currentCustomerUrlImage',
|
|
);
|
|
|
|
const { state: employeeFormState } = storeToRefs(employeeFormStore);
|
|
|
|
const refFilter = ref<InstanceType<typeof QSelect>>();
|
|
const currentStatus = ref<Status | 'All'>('All');
|
|
const currentBtnOpen = ref<boolean[]>([]);
|
|
const totalBranch = ref(0);
|
|
|
|
const currentPageBranch = ref<number>(1);
|
|
const maxPageBranch = ref<number>(1);
|
|
const pageSizeBranch = ref<number>(30);
|
|
|
|
const statusEmployeeCreate = defineModel<boolean>('statusEmployeeCreate');
|
|
const statusEmployeeEdit = defineModel<boolean>('statusEmployeeEdit');
|
|
|
|
const prop = withDefaults(
|
|
defineProps<{
|
|
index?: string | number;
|
|
color?: 'purple' | 'green';
|
|
currentCustomerName?: string;
|
|
customerType: CustomerType;
|
|
countEmployee?: number;
|
|
currentCitizenId?: string;
|
|
gender: string;
|
|
selectedImage: string;
|
|
fetchImageList: (
|
|
id: string,
|
|
selectedName: string,
|
|
type: 'customer' | 'employee',
|
|
) => Promise<void>;
|
|
}>(),
|
|
{
|
|
color: 'green',
|
|
},
|
|
);
|
|
const currentBranchEmployee = ref<string>('');
|
|
const listEmployee = ref<Employee[]>([]);
|
|
const customerId = defineModel<string>('customerId', { required: true });
|
|
|
|
defineEmits<{
|
|
(e: 'addEmployee', currentBranch: CustomerBranch): void;
|
|
(e: 'back'): void;
|
|
(e: 'viewDetail', branch: CustomerBranch, index: number): void;
|
|
(e: 'dialog'): void;
|
|
}>();
|
|
|
|
const columns = [
|
|
{
|
|
name: 'branchName',
|
|
align: 'left',
|
|
label: 'general.name',
|
|
field: 'name',
|
|
},
|
|
{
|
|
name: 'address',
|
|
align: 'left',
|
|
label: 'general.address',
|
|
field: 'name',
|
|
},
|
|
{
|
|
name: 'telephone',
|
|
align: 'left',
|
|
label: 'general.telephone',
|
|
field: 'name',
|
|
},
|
|
{
|
|
name: 'businessType',
|
|
align: 'left',
|
|
label: 'customer.form.businessType',
|
|
field: 'name',
|
|
},
|
|
{
|
|
name: 'totalEmployee',
|
|
align: 'left',
|
|
label: 'customer.table.totalEmployee',
|
|
field: 'name',
|
|
},
|
|
] satisfies QTableProps['columns'];
|
|
|
|
const fieldDisplay = ref<
|
|
(
|
|
| 'branchName'
|
|
| 'address'
|
|
| 'telephone'
|
|
| 'businessTypePure'
|
|
| 'totalEmployee'
|
|
)[]
|
|
>(['branchName', 'address', 'telephone', 'businessTypePure', 'totalEmployee']);
|
|
const branchFieldSelected = ref<
|
|
(
|
|
| 'branchName'
|
|
| 'address'
|
|
| 'telephone'
|
|
| 'businessTypePure'
|
|
| 'totalEmployee'
|
|
)[]
|
|
>(fieldDisplay.value);
|
|
|
|
function getCustomerName(
|
|
record: CustomerBranch,
|
|
opts?: {
|
|
locale?: string;
|
|
},
|
|
) {
|
|
const customer = record;
|
|
|
|
return (
|
|
{
|
|
['CORP']: {
|
|
['eng']: customer.registerNameEN,
|
|
['tha']: customer.registerName,
|
|
}[opts?.locale || 'eng'],
|
|
['PERS']: {
|
|
['eng']: `${useOptionStore().mapOption(customer?.namePrefix)} ${customer?.firstNameEN} ${customer?.lastNameEN}`,
|
|
['tha']: `${useOptionStore().mapOption(customer?.namePrefix)} ${customer?.firstName} ${customer?.lastName}`,
|
|
}[opts?.locale || 'eng'],
|
|
}[customer.customer.customerType] || '-'
|
|
);
|
|
}
|
|
|
|
async function deleteBranchById(id: string) {
|
|
return await new Promise((resolve) => {
|
|
dialog({
|
|
color: 'negative',
|
|
icon: 'mdi-alert',
|
|
title: t('dialog.title.confirmDelete'),
|
|
actionText: t('general.delete'),
|
|
persistent: true,
|
|
message: t('dialog.message.confirmDelete'),
|
|
action: async () => {
|
|
await customerStore.deleteBranchById(id);
|
|
await fetchList();
|
|
flowStore.rotate();
|
|
resolve(true);
|
|
customerBranchFormState.value.dialogModal = false;
|
|
},
|
|
cancel: () => {
|
|
resolve(false);
|
|
},
|
|
});
|
|
});
|
|
}
|
|
|
|
async function fetchList() {
|
|
if (!customerId.value) return;
|
|
|
|
const result = await fetchListCustomerBranch({
|
|
customerId: customerId.value,
|
|
query: !!inputSearch.value ? inputSearch.value : undefined,
|
|
page: currentPageBranch.value,
|
|
pageSize: pageSizeBranch.value,
|
|
includeCustomer: true,
|
|
status:
|
|
currentStatus.value === 'All'
|
|
? undefined
|
|
: currentStatus.value === 'ACTIVE'
|
|
? 'ACTIVE'
|
|
: 'INACTIVE',
|
|
});
|
|
if (result) {
|
|
totalBranch.value = result.total;
|
|
maxPageBranch.value = Math.ceil(result.total / pageSizeBranch.value);
|
|
branch.value = result.result;
|
|
}
|
|
}
|
|
|
|
function openEmployerBranchForm(formType: 'create' | 'edit' | 'info') {
|
|
customerBranchFormState.value.dialogType = formType;
|
|
customerBranchFormState.value.dialogModal = true;
|
|
nextTick(() => {
|
|
customerBranchFormState.value.customerType = prop.customerType;
|
|
customerBranchFormData.value.citizenId = prop.currentCitizenId;
|
|
});
|
|
}
|
|
|
|
async function fetchEmployee(opts: { branchId: string; pageSize?: number }) {
|
|
const res = await fetchBranchEmployee(opts.branchId, {
|
|
pageSize: opts.pageSize,
|
|
passport: true,
|
|
visa: true,
|
|
});
|
|
|
|
if (res) {
|
|
listEmployee.value = res.data.result;
|
|
}
|
|
}
|
|
|
|
watch([customerId, inputSearch, currentStatus, pageSizeBranch], async () => {
|
|
await fetchList();
|
|
});
|
|
watch(
|
|
() => [statusEmployeeCreate.value, statusEmployeeEdit.value],
|
|
async () => {
|
|
if (!statusEmployeeCreate.value || !statusEmployeeEdit.value) {
|
|
await fetchEmployee({
|
|
branchId: currentBranchEmployee.value,
|
|
pageSize: 999,
|
|
});
|
|
|
|
const br = branch.value?.find(
|
|
(v) => v.id === currentBranchEmployee.value,
|
|
);
|
|
if (br) br._count.employee = listEmployee.value.length;
|
|
}
|
|
},
|
|
);
|
|
|
|
onMounted(async () => {
|
|
customerBranchFormState.value.currentCustomerId = route.params
|
|
.customerId as string;
|
|
await fetchList();
|
|
|
|
branch.value?.forEach((v) => {
|
|
currentBtnOpen.value.push(false);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<FloatingActionButton
|
|
style="z-index: 999"
|
|
v-if="$route.name !== 'CustomerManagement' && canAccess('customer', 'edit')"
|
|
@click="openEmployerBranchForm('create')"
|
|
hide-icon
|
|
></FloatingActionButton>
|
|
<div
|
|
class="row justify-between bordered-b surface-3 full-width q-px-md"
|
|
style="z-index: 1"
|
|
>
|
|
<div class="row items-center col-12 col-md">
|
|
<q-card-section
|
|
class="q-pa-sm q-pt-md q-mr-md q-mb-sm"
|
|
:class="{
|
|
color__purple: customerType === 'CORP',
|
|
color__green: customerType === 'PERS',
|
|
}"
|
|
style="border-radius: 0 0 40px 40px; position: relative"
|
|
>
|
|
<q-avatar no-padding size="50px">
|
|
<q-img
|
|
:src="`${baseUrl}/customer/${customerId}/image/${selectedImage}`"
|
|
class="full-height full-width"
|
|
>
|
|
<template #error>
|
|
<q-img
|
|
:src="`${customerType === 'CORP' ? `/images/customer-CORP-avartar-male.png` : `/images/customer-PERS-avartar-${gender}.png`}`"
|
|
/>
|
|
</template>
|
|
</q-img>
|
|
|
|
<img :src="currentCustomerUrlImage ?? '/no-profile.png'" />
|
|
</q-avatar>
|
|
</q-card-section>
|
|
<div>
|
|
<div>{{ currentCustomerName }}</div>
|
|
<div class="row items-center">
|
|
<i
|
|
class="isax isax-frame5"
|
|
style="font-size: 1rem; color: var(--stone-6)"
|
|
/>
|
|
<div class="q-px-sm">
|
|
{{ countEmployee }}
|
|
</div>
|
|
<q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
|
|
<div class="q-px-sm">
|
|
{{ totalBranch }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row items-center justify-between col-12 col-md q-py-sm no-wrap">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
class="col-md-6 col"
|
|
:label="$t('general.search')"
|
|
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
|
v-model="inputSearch"
|
|
debounce="500"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="mdi-magnify" />
|
|
</template>
|
|
<template v-if="$q.screen.lt.md" v-slot:append>
|
|
<span class="row">
|
|
<q-separator vertical />
|
|
<q-btn
|
|
icon="mdi-filter-variant"
|
|
unelevated
|
|
class="q-ml-sm"
|
|
padding="4px"
|
|
size="sm"
|
|
rounded
|
|
@click="refFilter?.showPopup"
|
|
/>
|
|
</span>
|
|
</template>
|
|
</q-input>
|
|
|
|
<q-select
|
|
v-show="$q.screen.gt.sm"
|
|
ref="refFilter"
|
|
id="select-status"
|
|
for="select-status"
|
|
v-model="currentStatus"
|
|
outlined
|
|
dense
|
|
option-value="value"
|
|
option-label="label"
|
|
class="col q-pl-sm"
|
|
map-options
|
|
emit-value
|
|
:hide-dropdown-icon="$q.screen.lt.sm"
|
|
:options="[
|
|
{ label: $t('general.all'), value: 'All' },
|
|
{ label: $t('status.ACTIVE'), value: 'ACTIVE' },
|
|
{ label: $t('status.INACTIVE'), value: 'INACTIVE' },
|
|
]"
|
|
></q-select>
|
|
|
|
<q-btn-toggle
|
|
id="btn-mode"
|
|
v-model="modeView"
|
|
dense
|
|
class="no-shadow bordered rounded surface-1 q-ml-sm"
|
|
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
|
|
size="xs"
|
|
:options="[
|
|
{ value: true, slot: 'folder' },
|
|
{ value: false, slot: 'list' },
|
|
]"
|
|
>
|
|
<template v-slot:folder>
|
|
<q-icon
|
|
id="icon-mode-grid"
|
|
name="mdi-view-grid-outline"
|
|
size="16px"
|
|
class="q-px-sm q-py-sm rounded"
|
|
:style="{
|
|
color: $q.dark.isActive
|
|
? modeView
|
|
? '#C9D3DB'
|
|
: '#787B7C'
|
|
: modeView
|
|
? '#787B7C'
|
|
: '#C9D3DB',
|
|
}"
|
|
/>
|
|
</template>
|
|
<template v-slot:list>
|
|
<q-icon
|
|
id="icon-mode-list"
|
|
name="mdi-format-list-bulleted"
|
|
class="q-px-sm q-py-xs rounded"
|
|
size="16px"
|
|
:style="{
|
|
color: $q.dark.isActive
|
|
? modeView === true
|
|
? '#C9D3DB'
|
|
: '#787B7C'
|
|
: modeView === false
|
|
? '#787B7C'
|
|
: '#C9D3DB',
|
|
}"
|
|
/>
|
|
</template>
|
|
</q-btn-toggle>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="row q-pa-md col scroll full-width surface-2"
|
|
:class="{
|
|
'justify-center': totalBranch === 0,
|
|
'items-center': totalBranch === 0,
|
|
}"
|
|
>
|
|
<NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
|
|
|
|
<div style="width: 100%" v-else>
|
|
<q-table
|
|
v-if="branch"
|
|
flat
|
|
class="full-width"
|
|
bordered
|
|
:rows-per-page-options="[0]"
|
|
:rows="branch"
|
|
:columns="columns"
|
|
:grid="modeView"
|
|
card-container-class="row q-col-gutter-md"
|
|
row-key="name"
|
|
hide-pagination
|
|
>
|
|
<template #header="{ cols }">
|
|
<q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
|
|
<q-th
|
|
v-for="(v, i) in cols"
|
|
:key="v"
|
|
:class="{ 'text-left': i === 0 || i === 2 || i === 3 }"
|
|
>
|
|
{{ $t(v.label) }}
|
|
</q-th>
|
|
<q-th auto-width />
|
|
</q-tr>
|
|
</template>
|
|
<template #body="props">
|
|
<q-tr
|
|
:class="{
|
|
'app-text-muted': props.row.status === 'INACTIVE',
|
|
}"
|
|
:props="props"
|
|
@click="$emit('viewDetail', props.row, props.rowIndex)"
|
|
>
|
|
<q-td v-if="branchFieldSelected.includes('branchName')">
|
|
<div class="row items-center no-wrap">
|
|
<div
|
|
:class="{
|
|
'status-active': props.row.status !== 'INACTIVE',
|
|
'status-inactive': props.row.status === 'INACTIVE',
|
|
}"
|
|
class="q-mr-md"
|
|
style="display: flex; margin-bottom: var(--size-2)"
|
|
>
|
|
<div
|
|
class="branch-card__icon"
|
|
:class="{
|
|
dark: $q.dark.isActive,
|
|
'branch-card__pers':
|
|
props.row.customer.customerType === 'PERS',
|
|
'branch-card__corp':
|
|
props.row.customer.customerType === 'CORP',
|
|
}"
|
|
>
|
|
<q-icon
|
|
size="md"
|
|
style="scale: 0.8"
|
|
name="mdi-office-building-outline"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col" style="min-width: fit-content">
|
|
<div class="col">
|
|
{{
|
|
customerType === 'CORP'
|
|
? $i18n.locale === 'eng'
|
|
? props.row.registerNameEN || '-'
|
|
: props.row.registerName || '-'
|
|
: $i18n.locale === 'eng'
|
|
? props.row.firstNameEN +
|
|
' ' +
|
|
props.row.lastNameEN || '-'
|
|
: props.row.firstName + ' ' + props.row.lastName ||
|
|
'-'
|
|
}}
|
|
</div>
|
|
<div class="col app-text-muted">
|
|
{{ props.row.code }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-td>
|
|
<q-td
|
|
v-if="branchFieldSelected.includes('address')"
|
|
class="text-left"
|
|
>
|
|
{{
|
|
{
|
|
['eng']: formatAddress({ ...props.row, en: true }),
|
|
['tha']: formatAddress({ ...props.row, en: false }),
|
|
}[$i18n.locale]
|
|
}}
|
|
</q-td>
|
|
<q-td
|
|
v-if="branchFieldSelected.includes('telephone')"
|
|
class="text-left"
|
|
>
|
|
{{ props.row.telephoneNo || '-' }}
|
|
</q-td>
|
|
<q-td
|
|
v-if="branchFieldSelected.includes('businessTypePure')"
|
|
class="text-left"
|
|
>
|
|
{{
|
|
props.row.businessType
|
|
? props.row.businessType[
|
|
$i18n.locale === 'eng' ? 'nameEN' : 'name'
|
|
]
|
|
: '-'
|
|
}}
|
|
</q-td>
|
|
<q-td
|
|
v-if="branchFieldSelected.includes('totalEmployee')"
|
|
class="text-center"
|
|
>
|
|
{{ props.row._count?.employee }}
|
|
</q-td>
|
|
<q-td>
|
|
<q-btn
|
|
dense
|
|
flat
|
|
:id="`btn-show-employee-${currentCustomerName}`"
|
|
@click.stop="
|
|
async () => {
|
|
currentBranchEmployee = props.row.id;
|
|
await fetchEmployee({
|
|
branchId: currentBranchEmployee,
|
|
pageSize: 999,
|
|
});
|
|
|
|
currentBtnOpen.map((v, i) => {
|
|
if (i !== props.rowIndex) {
|
|
currentBtnOpen[i] = false;
|
|
}
|
|
});
|
|
|
|
currentBtnOpen[props.rowIndex] =
|
|
!currentBtnOpen[props.rowIndex];
|
|
}
|
|
"
|
|
>
|
|
<div class="row items-center">
|
|
<q-icon name="mdi-account-group-outline" />
|
|
<q-icon
|
|
class="btn-arrow-right"
|
|
:class="{
|
|
active: currentBtnOpen[props.rowIndex],
|
|
}"
|
|
size="xs"
|
|
name="mdi-chevron-right"
|
|
/>
|
|
</div>
|
|
</q-btn>
|
|
<q-btn
|
|
icon="mdi-eye-outline"
|
|
:id="`btn-eye-${currentCustomerName}`"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
@click="
|
|
() => {
|
|
customerBranchFormStore.initForm('info', props.row.id);
|
|
customerBranchFormState.dialogModal = true;
|
|
}
|
|
"
|
|
/>
|
|
</q-td>
|
|
</q-tr>
|
|
|
|
<q-tr v-show="currentBtnOpen[props.rowIndex]" :props="props">
|
|
<q-td colspan="100%" style="padding: 16px">
|
|
<div class="text-center">
|
|
<TableEmpoloyee
|
|
:prefix-id="props.row.registerName || props.row.firstName"
|
|
:add-button="canAccess('customer', 'edit')"
|
|
in-table
|
|
:list-employee="listEmployee"
|
|
:columns-employee="columnsEmployee"
|
|
:field-selected="[
|
|
'orderNumber',
|
|
'firstName',
|
|
'general.age',
|
|
'formDialogInputNationality',
|
|
'formDialogInputPassportNo',
|
|
'passportExpiryDate',
|
|
'visaExpireDate',
|
|
'beDue',
|
|
'action',
|
|
]"
|
|
@add="
|
|
() => {
|
|
statusEmployeeCreate = false;
|
|
$emit('addEmployee', props.row);
|
|
}
|
|
"
|
|
@history="(item) => {}"
|
|
@view="
|
|
async (item) => {
|
|
employeeFormState.drawerModal = true;
|
|
//employeeFormState.isEmployeeEdit = true;
|
|
employeeFormStore.assignFormDataEmployee(item.id);
|
|
await fetchImageList(
|
|
item.id,
|
|
item.selectedImage || '',
|
|
'employee',
|
|
);
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
<template #item="props">
|
|
<div class="col-12 col-md-6">
|
|
<BranchCardCustomer
|
|
:prefix-id="props.row.registerName || props.row.firstName"
|
|
class="surface-1"
|
|
:inactive="props.row.status === 'INACTIVE'"
|
|
:color="customerType === 'CORP' ? 'corp' : 'pers'"
|
|
:badgeField="['status']"
|
|
:data="{
|
|
customerBranchFormTab: props.row.branchNo,
|
|
code: props.row.code,
|
|
branchName: getCustomerName(props.row, {
|
|
locale: $i18n.locale,
|
|
}),
|
|
address:
|
|
$i18n.locale === 'eng'
|
|
? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
|
|
: `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
|
|
telephone: props.row.telephoneNo,
|
|
businessTypePure: props.row.businessType
|
|
? props.row.businessType[
|
|
$i18n.locale === 'eng' ? 'nameEN' : 'name'
|
|
]
|
|
: '-',
|
|
totalEmployee: props.row._count?.employee,
|
|
}"
|
|
:visible-columns="branchFieldSelected"
|
|
@view-detail="
|
|
() => {
|
|
customerBranchFormStore.initForm('info', props.row.id);
|
|
customerBranchFormState.dialogModal = true;
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</q-table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-between items-center q-px-md q-py-sm surface-2">
|
|
<div class="row col-4 items-center">
|
|
<div class="app-text-muted" style="width: 80px" v-if="$q.screen.gt.sm">
|
|
{{ $t('general.recordPerPage') }}
|
|
</div>
|
|
|
|
<div><PaginationPageSize v-model="pageSizeBranch" /></div>
|
|
</div>
|
|
|
|
<div class="col-4 flex justify-center app-text-muted">
|
|
{{
|
|
$q.screen.gt.sm
|
|
? $t('general.recordsPage', {
|
|
resultcurrentPage: branch?.length,
|
|
total: totalBranch,
|
|
})
|
|
: $t('general.ofPage', {
|
|
current: branch?.length,
|
|
total: totalBranch,
|
|
})
|
|
}}
|
|
</div>
|
|
<div class="col-4 flex justify-end">
|
|
<PaginationComponent
|
|
v-model:current-page="currentPageBranch"
|
|
v-model:max-page="maxPageBranch"
|
|
:fetch-data="
|
|
async () => {
|
|
await fetchList();
|
|
flowStore.rotate();
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFormContainer
|
|
:model-value="customerBranchFormState.dialogModal"
|
|
:on-close="
|
|
async () => {
|
|
await fetchList();
|
|
customerBranchFormState.dialogModal = false;
|
|
customerBranchFormStore.resetForm();
|
|
flowStore.rotate();
|
|
}
|
|
"
|
|
@submit="
|
|
async () => {
|
|
const res = await customerBranchFormStore.submitForm();
|
|
|
|
if (res) {
|
|
customerBranchFormStore.initForm('info', res?.id);
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<template #header>
|
|
<DialogHeader
|
|
:title="
|
|
$t(`form.title.${customerBranchFormState.dialogType}`, {
|
|
name: $t('customerBranch.form.title'),
|
|
})
|
|
"
|
|
>
|
|
<template #before>
|
|
<EditButton
|
|
icon-only
|
|
v-if="customerBranchFormState.dialogType === 'info'"
|
|
@click="customerBranchFormState.dialogType = 'edit'"
|
|
/>
|
|
<DeleteButton
|
|
icon-only
|
|
v-if="
|
|
customerBranchFormState.dialogType === 'info' &&
|
|
canAccess('customer', 'edit')
|
|
"
|
|
@click="
|
|
() => {
|
|
deleteBranchById(customerBranchFormData.id || '');
|
|
}
|
|
"
|
|
/>
|
|
<UndoButton
|
|
icon-only
|
|
v-if="customerBranchFormState.dialogType === 'edit'"
|
|
@click="customerBranchFormState.dialogType = 'info'"
|
|
/>
|
|
</template>
|
|
</DialogHeader>
|
|
</template>
|
|
|
|
<div
|
|
style="flex: 1; width: 100%; overflow-y: auto"
|
|
class="surface-2 q-pa-md"
|
|
id="customer-form"
|
|
>
|
|
<div class="col surface-1 full-height rounded bordered row">
|
|
<div
|
|
class="col full-height"
|
|
style="max-height: 100%; overflow-y: auto"
|
|
v-if="$q.screen.gt.sm"
|
|
>
|
|
<div class="q-py-md q-pl-md q-pr-sm">
|
|
<SideMenu
|
|
:menu="[
|
|
{
|
|
name: $t('customerBranch.tab.main'),
|
|
anchor: 'employer-branch-main',
|
|
},
|
|
{
|
|
name: $t('customerBranch.tab.address'),
|
|
anchor: 'employer-branch-address',
|
|
},
|
|
{
|
|
name: $t('customerBranch.tab.business'),
|
|
anchor: 'employer-branch-business',
|
|
},
|
|
{
|
|
name: $t('customerBranch.tab.contact'),
|
|
anchor: 'employer-branch-contact',
|
|
},
|
|
]"
|
|
background="transparent"
|
|
:active="{
|
|
background: 'hsla(var(--blue-6-hsl) / .2)',
|
|
foreground: 'var(--blue-6)',
|
|
}"
|
|
scroll-element="#employer-branch-content"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="employer-branch-content"
|
|
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm full-height scroll"
|
|
>
|
|
<div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-main">
|
|
<div class="col-12 text-weight-bold text-body1 row items-center">
|
|
<q-icon
|
|
flat
|
|
size="xs"
|
|
class="q-pa-sm rounded q-mr-sm"
|
|
color="info"
|
|
name="mdi-office-building-outline"
|
|
style="background-color: var(--surface-3)"
|
|
/>
|
|
<span>{{ $t('customerBranch.tab.main') }}</span>
|
|
</div>
|
|
</div>
|
|
<EmployerFormAbout
|
|
prefix-id="dialog"
|
|
:readonly="customerBranchFormState.dialogType === 'info'"
|
|
class="q-mb-xl"
|
|
:index="
|
|
(customerBranchFormData.code &&
|
|
Number(
|
|
customerBranchFormData.code.split('-').pop(),
|
|
).toString()) ||
|
|
''
|
|
"
|
|
:customer-type="customerType"
|
|
v-model:citizen-id="customerBranchFormData.citizenId"
|
|
v-model:prefix-name="customerBranchFormData.namePrefix"
|
|
v-model:first-name="customerBranchFormData.firstName"
|
|
v-model:last-name="customerBranchFormData.lastName"
|
|
v-model:first-name-en="customerBranchFormData.firstNameEN"
|
|
v-model:last-name-en="customerBranchFormData.lastNameEN"
|
|
v-model:gender="customerBranchFormData.gender"
|
|
v-model:birth-date="customerBranchFormData.birthDate"
|
|
v-model:legal-person-no="customerBranchFormData.legalPersonNo"
|
|
v-model:branch-code="customerBranchFormData.code"
|
|
v-model:register-name="customerBranchFormData.registerName"
|
|
v-model:register-name-en="customerBranchFormData.registerNameEN"
|
|
v-model:register-date="customerBranchFormData.registerDate"
|
|
v-model:authorized-capital="
|
|
customerBranchFormData.authorizedCapital
|
|
"
|
|
v-model:telephone-no="customerBranchFormData.telephoneNo"
|
|
v-model:code-customer="customerBranchFormData.codeCustomer"
|
|
/>
|
|
<div
|
|
class="row q-col-gutter-sm q-mb-sm"
|
|
id="employer-branch-business"
|
|
>
|
|
<div class="col-12 text-weight-bold text-body1 row items-center">
|
|
<q-icon
|
|
flat
|
|
size="xs"
|
|
class="q-pa-sm rounded q-mr-sm"
|
|
color="info"
|
|
name="mdi-office-building-outline"
|
|
style="background-color: var(--surface-3)"
|
|
/>
|
|
<span>{{ $t('customerBranch.tab.business') }}</span>
|
|
</div>
|
|
</div>
|
|
<EmployerFormBusiness
|
|
dense
|
|
outlined
|
|
prefix-id="employer-branch"
|
|
:readonly="customerBranchFormState.dialogType === 'info'"
|
|
v-model:business-type-id="customerBranchFormData.businessTypeId"
|
|
v-model:job-position="customerBranchFormData.jobPosition"
|
|
v-model:job-description="customerBranchFormData.jobDescription"
|
|
v-model:pay-date="customerBranchFormData.payDate"
|
|
v-model:pay-date-en="customerBranchFormData.payDateEN"
|
|
v-model:wage-rate="customerBranchFormData.wageRate"
|
|
v-model:wage-rate-text="customerBranchFormData.wageRateText"
|
|
/>
|
|
<div
|
|
v-if="customerType === 'CORP'"
|
|
class="row q-col-gutter-sm q-mb-sm"
|
|
id="employer-branch-address"
|
|
>
|
|
<div class="col-12 text-weight-bold text-body1 row items-center">
|
|
<q-icon
|
|
flat
|
|
size="xs"
|
|
class="q-pa-sm rounded q-mr-sm"
|
|
color="info"
|
|
name="mdi-office-building-outline"
|
|
style="background-color: var(--surface-3)"
|
|
/>
|
|
<span>{{ $t('customerBranch.tab.authorized') }}</span>
|
|
</div>
|
|
</div>
|
|
<EmployerFormAuthorized
|
|
v-if="customerType === 'CORP'"
|
|
class="q-mb-xl"
|
|
prefix-id="employer-branch"
|
|
:readonly="customerBranchFormState.dialogType === 'info'"
|
|
v-model:authorized-name="customerBranchFormData.authorizedName"
|
|
v-model:authorized-name-en="customerBranchFormData.authorizedNameEN"
|
|
/>
|
|
<div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address">
|
|
<div class="col-12 text-weight-bold text-body1 row items-center">
|
|
<q-icon
|
|
flat
|
|
size="xs"
|
|
class="q-pa-sm rounded q-mr-sm"
|
|
color="info"
|
|
name="mdi-office-building-outline"
|
|
style="background-color: var(--surface-3)"
|
|
/>
|
|
<span>{{ $t('customerBranch.tab.address') }}</span>
|
|
</div>
|
|
</div>
|
|
<AddressForm
|
|
prefix-id="employer-branch"
|
|
class="q-mb-xl"
|
|
hide-title
|
|
use-employment
|
|
dense
|
|
:readonly="customerBranchFormState.dialogType === 'info'"
|
|
outlined
|
|
:title="$t('form.address')"
|
|
v-model:home-code="customerBranchFormData.homeCode"
|
|
v-model:employment-office="customerBranchFormData.employmentOffice"
|
|
v-model:employment-office-en="
|
|
customerBranchFormData.employmentOfficeEN
|
|
"
|
|
v-model:address="customerBranchFormData.address"
|
|
v-model:address-en="customerBranchFormData.addressEN"
|
|
v-model:province-id="customerBranchFormData.provinceId"
|
|
v-model:district-id="customerBranchFormData.districtId"
|
|
v-model:sub-district-id="customerBranchFormData.subDistrictId"
|
|
v-model:street="customerBranchFormData.street"
|
|
v-model:street-en="customerBranchFormData.streetEN"
|
|
v-model:moo="customerBranchFormData.moo"
|
|
v-model:moo-en="customerBranchFormData.mooEN"
|
|
v-model:soi="customerBranchFormData.soi"
|
|
v-model:soi-en="customerBranchFormData.soiEN"
|
|
:address-title="$t('form.address')"
|
|
:address-title-en="$t('form.address', { suffix: '(EN)' })"
|
|
/>
|
|
<div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-contact">
|
|
<div class="col-12 text-weight-bold text-body1 row items-center">
|
|
<q-icon
|
|
flat
|
|
size="xs"
|
|
class="q-pa-sm rounded q-mr-sm"
|
|
color="info"
|
|
name="mdi-office-building-outline"
|
|
style="background-color: var(--surface-3)"
|
|
/>
|
|
<span>{{ $t('customerBranch.tab.contact') }}</span>
|
|
</div>
|
|
</div>
|
|
<EmployerFormContact
|
|
prefixId="dialog"
|
|
class="q-mb-lg"
|
|
:readonly="customerBranchFormState.dialogType === 'info'"
|
|
v-model:contact-name="customerBranchFormData.contactName"
|
|
v-model:email="customerBranchFormData.email"
|
|
v-model:contact-tel="customerBranchFormData.contactTel"
|
|
v-model:office-tel="customerBranchFormData.officeTel"
|
|
v-model:agent-user-id="customerBranchFormData.agentUserId"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<CancelButton outlined class="q-ml-auto" v-close-popup />
|
|
<SaveButton
|
|
solid
|
|
class="q-ml-sm"
|
|
type="submit"
|
|
v-if="customerBranchFormState.dialogType !== 'info'"
|
|
/>
|
|
</template>
|
|
</DialogFormContainer>
|
|
|
|
<DialogEmployee
|
|
:fetch-list-employee="fetchEmployee"
|
|
:fetch-image-list="fetchImageList"
|
|
current-tab="employer"
|
|
/>
|
|
|
|
<DrawerEmployee
|
|
:fetch-list-employee="fetchEmployee"
|
|
:fetch-image-list="fetchImageList"
|
|
current-tab="employer"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.branch-card__icon {
|
|
--_branch-card-bg: var(--pink-6-hsl);
|
|
|
|
background-color: hsla(var(--_branch-card-bg) / 0.15);
|
|
border-radius: 50%;
|
|
padding: var(--size-1);
|
|
position: relative;
|
|
transform: rotate(45deg);
|
|
|
|
&.branch-card__pers {
|
|
--_branch-card-bg: var(--teal-10-hsl);
|
|
}
|
|
&.branch-card__corp {
|
|
--_branch-card-bg: var(--violet-11-hsl);
|
|
&.dark {
|
|
--_branch-card-bg: var(--violet-10-hsl);
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
content: ' ';
|
|
display: block;
|
|
block-size: 0.5rem;
|
|
aspect-ratio: 1;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
right: -0.25rem;
|
|
top: calc(50% - 0.25rem);
|
|
bottom: calc(50% - 0.25rem);
|
|
background-color: hsla(var(--_branch-status-color) / 1);
|
|
}
|
|
|
|
& :deep(.q-icon) {
|
|
transform: rotate(-45deg);
|
|
color: hsla(var(--_branch-card-bg) / 1);
|
|
}
|
|
}
|
|
|
|
.btn-arrow-right {
|
|
transform: rotate(0deg);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.btn-arrow-right.active {
|
|
transform: rotate(90deg);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
</style>
|