feat: employee address (same with employer)
This commit is contained in:
puriphatt
parent
c72f44d50a
commit
39118cc227
5 changed files with 204 additions and 40 deletions
|
|
@ -10,6 +10,7 @@ defineProps<{
|
|||
noAddress?: boolean;
|
||||
noPaddingTab?: boolean;
|
||||
disabledRule?: boolean;
|
||||
employee?: boolean;
|
||||
}>();
|
||||
|
||||
const address = defineModel('address', { default: '' });
|
||||
|
|
@ -19,6 +20,7 @@ const districtId = defineModel<string | null | undefined>('districtId');
|
|||
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
|
||||
const zipCode = defineModel<string>('zipCode', { default: '' });
|
||||
|
||||
const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
|
||||
const employeeTab = defineModel<string>('employeeTab');
|
||||
const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
|
||||
</script>
|
||||
|
|
@ -75,6 +77,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
|
|||
dense
|
||||
outlined
|
||||
separator
|
||||
employee
|
||||
:readonly="readonly"
|
||||
:disabledRule="disabledRule"
|
||||
v-model:address="address"
|
||||
|
|
@ -83,6 +86,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
|
|||
v-model:districtId="districtId"
|
||||
v-model:subDistrictId="subDistrictId"
|
||||
v-model:zipCode="zipCode"
|
||||
v-model:same-with-employer="sameWithEmployer"
|
||||
:title="titleFormAddress"
|
||||
:addressTitle="addressTitle || ''"
|
||||
:addressTitleEN="addressTitleEN || ''"
|
||||
|
|
@ -101,14 +105,14 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
|
|||
<style scoped lang="scss">
|
||||
.active-tab {
|
||||
color: var(--brand-1);
|
||||
background-color: var(--surface-3);
|
||||
background-color: var(--surface-tab);
|
||||
border-top: 1px solid var(--brand-1);
|
||||
border-left: 1px solid var(--brand-1);
|
||||
border-right: 1px solid var(--brand-1);
|
||||
border-top-left-radius: var(--radius-2);
|
||||
border-top-right-radius: var(--radius-2);
|
||||
margin-bottom: -1.5px;
|
||||
border-bottom: 3px solid var(--surface-3);
|
||||
border-bottom: 3px solid var(--surface-tab);
|
||||
}
|
||||
|
||||
.content-tab {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { CustomerBranch } from 'src/stores/customer/types';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const customerName = defineModel<string>('customerName');
|
||||
|
|
@ -8,7 +9,15 @@ const taxNo = defineModel<string | null | undefined>('taxNo');
|
|||
const employerID = defineModel<string>('employerID');
|
||||
|
||||
// employee
|
||||
const customerBranchId = defineModel<string>('customerBranchId');
|
||||
const customerBranch = defineModel<{
|
||||
id: string;
|
||||
address: string;
|
||||
addressEN: string;
|
||||
provinceId: string;
|
||||
districtId: string;
|
||||
subDistrictId: string;
|
||||
zipCode: string;
|
||||
}>('customerBranch');
|
||||
const employeeId = defineModel<string>('employeeId');
|
||||
const nrcNo = defineModel<string>('nrcNo');
|
||||
|
||||
|
|
@ -20,7 +29,7 @@ defineProps<{
|
|||
typeCustomer?: string;
|
||||
employee?: boolean;
|
||||
|
||||
employeeOwnerOption?: { label: string; value: string }[];
|
||||
employeeOwnerOption?: CustomerBranch[];
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
|
|
@ -91,11 +100,20 @@ onMounted(async () => {});
|
|||
:readonly="readonly"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
class="col-12"
|
||||
:label="$t('formDialogEmployerBranchCode')"
|
||||
v-model="customerBranchId"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="customerBranch"
|
||||
:option-value="
|
||||
(v) => ({
|
||||
id: v.id,
|
||||
address: v.address,
|
||||
addressEN: v.addressEN,
|
||||
provinceId: v.provinceId,
|
||||
districtId: v.districtId,
|
||||
subDistrictId: v.subDistrictId,
|
||||
zipCode: v.zipCode,
|
||||
})
|
||||
"
|
||||
emit-value
|
||||
map-options
|
||||
:options="employeeOwnerOption"
|
||||
|
|
@ -104,7 +122,65 @@ onMounted(async () => {});
|
|||
(val: string) =>
|
||||
!!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
|
||||
]"
|
||||
/>
|
||||
>
|
||||
<template v-slot:before-options>
|
||||
<q-item>
|
||||
<div
|
||||
class="row items-center col-12 app-text-muted text-weight-medium"
|
||||
>
|
||||
<div class="col-4">{{ $t('branchCode') }}</div>
|
||||
<div class="col">{{ $t('name') }}</div>
|
||||
<div class="col">{{ $t('address') }}</div>
|
||||
</div>
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<template v-slot:option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<div v-if="scope.opt" class="row items-center col-12">
|
||||
<div class="col-4">
|
||||
{{ scope.opt.code }}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
|
||||
</div>
|
||||
<div v-if="scope.opt.province" class="col">
|
||||
{{
|
||||
$i18n.locale === 'en-US'
|
||||
? scope.opt.addressEN
|
||||
: scope.opt.address
|
||||
}}
|
||||
({{
|
||||
$i18n.locale === 'en-US'
|
||||
? scope.opt.province.nameEN
|
||||
: scope.opt.province.name
|
||||
}})
|
||||
</div>
|
||||
</div>
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<template v-slot:selected-item="scope">
|
||||
<div v-if="scope.opt" class="row items-center col-12">
|
||||
<div class="col-4">
|
||||
{{ scope.opt.code }}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
|
||||
</div>
|
||||
<div v-if="scope.opt.province" class="col">
|
||||
{{
|
||||
$i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
|
||||
}}
|
||||
({{
|
||||
$i18n.locale === 'en-US'
|
||||
? scope.opt.province.nameEN
|
||||
: scope.opt.province.name
|
||||
}})
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
for="input-employeeID"
|
||||
:dense="dense"
|
||||
|
|
@ -112,7 +188,7 @@ onMounted(async () => {});
|
|||
:readonly="true"
|
||||
:borderless="readonly"
|
||||
hide-bottom-space
|
||||
class="col-3"
|
||||
class="col-6"
|
||||
:label="$t('formDialogEmployeeID')"
|
||||
v-model="employeeId"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ const {
|
|||
deleteBranchById,
|
||||
editBranchById,
|
||||
fetchListBranch,
|
||||
fetchListBranchById,
|
||||
} = userCustomer;
|
||||
const employeeStore = useEmployeeStore();
|
||||
const formData = ref<CustomerCreate>({
|
||||
|
|
@ -113,14 +114,24 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
|
|||
value: 'all',
|
||||
});
|
||||
|
||||
const currentEmployee = ref<Employee>();
|
||||
const currentEmployee = ref<Employee | undefined>();
|
||||
const currentEmployeeCode = ref('');
|
||||
const isEmployeeEdit = ref(false);
|
||||
const formDataEmployeeSameAddr = ref(false);
|
||||
const formDataEmployeeSameAddr = ref(true);
|
||||
const formDataEmployeeTab = ref('personalInfo');
|
||||
const infoDrawerEmployee = ref(false);
|
||||
const infoDrawerEmployeeEdit = ref(false);
|
||||
const infoEmployeePersonCard = ref();
|
||||
const statsEmployee = ref(0);
|
||||
const formDataEmployeeOwner = ref<{
|
||||
id: string;
|
||||
address: string;
|
||||
addressEN: string;
|
||||
provinceId: string;
|
||||
districtId: string;
|
||||
subDistrictId: string;
|
||||
zipCode: string;
|
||||
}>();
|
||||
const formDataEmployee = ref<EmployeeCreate>({
|
||||
image: null,
|
||||
customerBranchId: '',
|
||||
|
|
@ -378,18 +389,12 @@ async function openDialogInputForm(
|
|||
: [];
|
||||
|
||||
const code = currentEmployee.value?.code.split('-')[0];
|
||||
|
||||
const result = await fetchListBranch({
|
||||
includeCustomer: true,
|
||||
query: code,
|
||||
pageSize: 30,
|
||||
});
|
||||
if (result) {
|
||||
employeeStore.ownerOption = result.result.map((i) => ({
|
||||
label: i.code,
|
||||
value: i.id,
|
||||
}));
|
||||
}
|
||||
if (result) employeeStore.ownerOption = result.result;
|
||||
}
|
||||
} else {
|
||||
if (selectorLabel.value === 'EMPLOYER') dialogInputForm.value = true;
|
||||
|
|
@ -403,12 +408,7 @@ async function openDialogInputForm(
|
|||
query: code,
|
||||
pageSize: 30,
|
||||
});
|
||||
if (result) {
|
||||
employeeStore.ownerOption = result.result.map((i) => ({
|
||||
label: i.code,
|
||||
value: i.id,
|
||||
}));
|
||||
}
|
||||
if (result) employeeStore.ownerOption = result.result;
|
||||
dialogEmployee.value = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -476,6 +476,12 @@ function clearFormEmployee() {
|
|||
isEmployeeEdit.value = false;
|
||||
infoDrawerEmployee.value = false;
|
||||
infoDrawerEmployeeEdit.value = false;
|
||||
formDataEmployeeSameAddr.value = true;
|
||||
currentEmployeeCode.value = '';
|
||||
|
||||
currentEmployee.value = undefined;
|
||||
formDataEmployeeOwner.value = undefined;
|
||||
|
||||
formDataEmployee.value = {
|
||||
image: null,
|
||||
customerBranchId: '',
|
||||
|
|
@ -790,12 +796,7 @@ async function employeeFilterOwnerBranch(
|
|||
query: val,
|
||||
pageSize: 30,
|
||||
});
|
||||
if (result) {
|
||||
employeeStore.ownerOption = result.result.map((i) => ({
|
||||
label: i.code,
|
||||
value: i.id,
|
||||
}));
|
||||
}
|
||||
if (result) employeeStore.ownerOption = result.result;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -894,13 +895,28 @@ async function assignFormDataEmployee(id: string) {
|
|||
};
|
||||
|
||||
formDataEmployeeTab.value = 'personalInfo';
|
||||
currentEmployeeCode.value = foundEmployee.code;
|
||||
currentEmployee.value = foundEmployee;
|
||||
profileUrl.value = foundEmployee.profileImageUrl;
|
||||
|
||||
foundEmployee.profileImageUrl
|
||||
? (profileSubmit.value = true)
|
||||
: (profileSubmit.value = false);
|
||||
isEmployeeEdit.value = true;
|
||||
|
||||
const foundBranch = await fetchListBranchById(
|
||||
foundEmployee.customerBranchId,
|
||||
);
|
||||
formDataEmployeeOwner.value = {
|
||||
id: foundBranch.id,
|
||||
address: foundBranch.address,
|
||||
addressEN: foundBranch.addressEN,
|
||||
provinceId: foundBranch.provinceId,
|
||||
districtId: foundBranch.districtId,
|
||||
subDistrictId: foundBranch.subDistrictId,
|
||||
zipCode: foundBranch.zipCode,
|
||||
};
|
||||
|
||||
formDataEmployee.value = {
|
||||
image: foundEmployee.profileImageUrl,
|
||||
customerBranchId: foundEmployee.customerBranchId,
|
||||
|
|
@ -939,6 +955,12 @@ async function assignFormDataEmployee(id: string) {
|
|||
employeeCheckup: employeeCheckup,
|
||||
employeeOtherInfo: employeeOther,
|
||||
};
|
||||
|
||||
if (foundBranch.address === foundEmployee.address) {
|
||||
formDataEmployeeSameAddr.value = true;
|
||||
} else {
|
||||
formDataEmployeeSameAddr.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1048,8 +1070,6 @@ watch(currentPageEmployee, async () => {
|
|||
watch(fieldSelectedCustomer, async () => {
|
||||
let resultList;
|
||||
|
||||
console.log(fieldSelectedCustomer.value.value);
|
||||
|
||||
if (fieldSelectedCustomer.value.value === 'all') {
|
||||
resultList = await fetchList({ includeBranch: true });
|
||||
}
|
||||
|
|
@ -1066,6 +1086,41 @@ watch(fieldSelectedCustomer, async () => {
|
|||
listCustomer.value = resultList.result;
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => formDataEmployeeOwner.value,
|
||||
(e) => {
|
||||
if (!e) return;
|
||||
if (formDataEmployeeSameAddr.value) {
|
||||
formDataEmployee.value.address = e.address;
|
||||
formDataEmployee.value.addressEN = e.addressEN;
|
||||
formDataEmployee.value.provinceId = e.provinceId;
|
||||
formDataEmployee.value.districtId = e.districtId;
|
||||
formDataEmployee.value.subDistrictId = e.subDistrictId;
|
||||
formDataEmployee.value.zipCode = e.zipCode;
|
||||
}
|
||||
formDataEmployee.value.customerBranchId = e.id;
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => formDataEmployeeSameAddr.value,
|
||||
(isSame) => {
|
||||
if (!formDataEmployeeOwner.value) return;
|
||||
if (isSame) {
|
||||
formDataEmployee.value.address = formDataEmployeeOwner.value.address;
|
||||
formDataEmployee.value.addressEN = formDataEmployeeOwner.value.addressEN;
|
||||
formDataEmployee.value.provinceId =
|
||||
formDataEmployeeOwner.value.provinceId;
|
||||
formDataEmployee.value.districtId =
|
||||
formDataEmployeeOwner.value.districtId;
|
||||
formDataEmployee.value.subDistrictId =
|
||||
formDataEmployeeOwner.value.subDistrictId;
|
||||
formDataEmployee.value.zipCode = formDataEmployeeOwner.value.zipCode;
|
||||
}
|
||||
formDataEmployee.value.customerBranchId = formDataEmployeeOwner.value.id;
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -1637,11 +1692,12 @@ watch(fieldSelectedCustomer, async () => {
|
|||
</template>
|
||||
</FormDialog>
|
||||
|
||||
<!-- Employee Form -->
|
||||
<FormDialog
|
||||
employee
|
||||
disabledRule
|
||||
v-model:modal="dialogEmployee"
|
||||
addressSeparator
|
||||
v-model:modal="dialogEmployee"
|
||||
:noAddress="formDataEmployeeTab !== 'personalInfo'"
|
||||
:noPaddingTab="
|
||||
formDataEmployeeTab === 'healthCheck' ||
|
||||
|
|
@ -1687,7 +1743,8 @@ watch(fieldSelectedCustomer, async () => {
|
|||
outlined
|
||||
separator
|
||||
:employee-owner-option="employeeStore.ownerOption"
|
||||
v-model:customer-branch-id="formDataEmployee.customerBranchId"
|
||||
v-model:customer-branch="formDataEmployeeOwner"
|
||||
v-model:employee-id="currentEmployeeCode"
|
||||
v-model:nrc-no="formDataEmployee.nrcNo"
|
||||
@filter-owner-branch="employeeFilterOwnerBranch"
|
||||
/>
|
||||
|
|
@ -2039,7 +2096,6 @@ watch(fieldSelectedCustomer, async () => {
|
|||
</FormDialog>
|
||||
|
||||
<!-- DRAWER INFO ของ นายจ้าง -->
|
||||
|
||||
<DrawerInfo
|
||||
:title="$t('formTitleCustomer', { msg: currentCustomer?.customerName })"
|
||||
v-model:drawer-open="infoDrawer"
|
||||
|
|
@ -2440,6 +2496,7 @@ watch(fieldSelectedCustomer, async () => {
|
|||
currentEmployee && onSubmitEdit(currentEmployee.id);
|
||||
}
|
||||
"
|
||||
bg-color="surface-tab"
|
||||
>
|
||||
<InfoForm
|
||||
v-if="employeeStore.globalOption"
|
||||
|
|
@ -2449,6 +2506,7 @@ watch(fieldSelectedCustomer, async () => {
|
|||
formDataEmployeeTab === 'healthCheck' ||
|
||||
formDataEmployeeTab === 'workHistory'
|
||||
"
|
||||
v-model:same-with-employer="formDataEmployeeSameAddr"
|
||||
v-model:tabs-list="employeeTab"
|
||||
v-model:employee-tab="formDataEmployeeTab"
|
||||
v-model:address="formDataEmployee.address"
|
||||
|
|
@ -2458,6 +2516,7 @@ watch(fieldSelectedCustomer, async () => {
|
|||
v-model:subDistrictId="formDataEmployee.subDistrictId"
|
||||
v-model:zipCode="formDataEmployee.zipCode"
|
||||
disabledRule
|
||||
employee
|
||||
>
|
||||
<template #person-card>
|
||||
<div class="q-ma-md">
|
||||
|
|
@ -2475,15 +2534,15 @@ watch(fieldSelectedCustomer, async () => {
|
|||
</template>
|
||||
<template #information>
|
||||
<BasicInformation
|
||||
v-if="formDataEmployeeTab === 'personalInfo' && currentEmployee"
|
||||
v-if="formDataEmployeeTab === 'personalInfo'"
|
||||
employee
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
:readonly="!infoDrawerEmployeeEdit"
|
||||
:employee-owner-option="employeeStore.ownerOption"
|
||||
v-model:customer-branch-id="formDataEmployee.customerBranchId"
|
||||
v-model:employee-id="currentEmployee.code"
|
||||
v-model:customer-branch="formDataEmployeeOwner"
|
||||
v-model:employee-id="currentEmployeeCode"
|
||||
v-model:nrc-no="formDataEmployee.nrcNo"
|
||||
@filter-owner-branch="employeeFilterOwnerBranch"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -420,6 +420,29 @@ const useCustomerStore = defineStore('api-customer', () => {
|
|||
);
|
||||
}
|
||||
|
||||
async function fetchListBranchById(
|
||||
branchId: string,
|
||||
flow?: {
|
||||
sessionId: string;
|
||||
refTransactionId: string;
|
||||
transactionId: string;
|
||||
},
|
||||
) {
|
||||
const res = await api.get(`/customer-branch/${branchId}`, {
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId,
|
||||
'X-Tid': flow?.transactionId,
|
||||
},
|
||||
});
|
||||
|
||||
if (res && res.status === 200) {
|
||||
return res.data;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
|
||||
|
|
@ -434,6 +457,7 @@ const useCustomerStore = defineStore('api-customer', () => {
|
|||
createBranch,
|
||||
editBranchById,
|
||||
deleteBranchById,
|
||||
fetchListBranchById,
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,13 @@ import {
|
|||
EmployeeOther,
|
||||
EmployeeWork,
|
||||
} from './types';
|
||||
import { CustomerBranch } from '../customer/types';
|
||||
import axios from 'axios';
|
||||
|
||||
const useEmployeeStore = defineStore('api-employee', () => {
|
||||
const data = ref<Pagination<Employee[]>>();
|
||||
const globalOption = ref();
|
||||
const ownerOption = ref<{ label: string; value: string }[]>();
|
||||
const ownerOption = ref<CustomerBranch[]>();
|
||||
|
||||
async function fetchList(
|
||||
opts?: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue