feat: form ดูรายละเอียด
This commit is contained in:
Net
parent
f9d9b83792
commit
6b0a1a56b5
1 changed files with 190 additions and 16 deletions
|
|
@ -17,6 +17,8 @@ import FormLocation from 'src/components/01_branch-management/FormLocation.vue';
|
|||
import FormQr from 'src/components/01_branch-management/FormQr.vue';
|
||||
import FormBranchContact from 'src/components/01_branch-management/FormBranchContact.vue';
|
||||
import FormImage from 'src/components/01_branch-management/FormImage.vue';
|
||||
import DrawerInfo from 'src/components/DrawerInfo.vue';
|
||||
import infoForm from 'src/components/02_personnel-management/infoForm.vue';
|
||||
|
||||
import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
|
||||
import { watch } from 'vue';
|
||||
|
|
@ -157,10 +159,21 @@ const formDialogRef = ref();
|
|||
const formType = ref<'create' | 'edit' | 'delete' | 'view'>('create');
|
||||
const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
|
||||
const codeHq = ref<{ id: string; code: string }>({ id: '', code: '' });
|
||||
const codeSubBranch = ref<{ id: string; code: string }>({ id: '', code: '' });
|
||||
const formData = ref<Omit<BranchCreate, 'qrCodeImage' | 'imageUrl'>>(
|
||||
structuredClone(defaultFormData),
|
||||
);
|
||||
|
||||
const prevFormData = ref<Omit<BranchCreate, 'qrCodeImage' | 'imageUrl'>>(
|
||||
structuredClone(defaultFormData),
|
||||
);
|
||||
|
||||
const modalDrawer = ref<boolean>(false);
|
||||
|
||||
function openDrawer() {
|
||||
modalDrawer.value = true;
|
||||
}
|
||||
|
||||
function openDialog() {
|
||||
modal.value = true;
|
||||
}
|
||||
|
|
@ -171,6 +184,10 @@ async function fetchBranchById(id: string) {
|
|||
if (res) {
|
||||
qrCodeimageUrl.value = res.qrCodeImageUrl;
|
||||
imageUrl.value = res.imageUrl;
|
||||
codeSubBranch.value = {
|
||||
id: res.id,
|
||||
code: res.code,
|
||||
};
|
||||
formData.value = {
|
||||
headOfficeId: res.headOfficeId,
|
||||
taxNo: res.taxNo,
|
||||
|
|
@ -198,21 +215,42 @@ function clearData() {
|
|||
formData.value = structuredClone(defaultFormData);
|
||||
imageUrl.value = null;
|
||||
qrCodeimageUrl.value = null;
|
||||
codeSubBranch.value = {
|
||||
id: '',
|
||||
code: '',
|
||||
};
|
||||
profileFile.value = undefined;
|
||||
}
|
||||
|
||||
function triggerView(id: string, code?: string) {
|
||||
function triggerView(
|
||||
id: string,
|
||||
typeBranch: 'headOffice' | 'subBranch',
|
||||
code?: string,
|
||||
) {
|
||||
fetchBranchById(id);
|
||||
if (id && code) {
|
||||
if (id && code && typeBranch === 'headOffice') {
|
||||
codeHq.value = {
|
||||
id: id,
|
||||
code: code,
|
||||
};
|
||||
}
|
||||
|
||||
formTypeBranch.value = typeBranch;
|
||||
formType.value = 'view';
|
||||
|
||||
openDialog();
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
function drawerEdit() {
|
||||
formType.value = 'edit';
|
||||
prevFormData.value = {
|
||||
...formData.value,
|
||||
};
|
||||
}
|
||||
|
||||
async function undo() {
|
||||
formType.value = 'view';
|
||||
formData.value = prevFormData.value;
|
||||
}
|
||||
|
||||
function triggerCreate(type: string, id?: string, code?: string) {
|
||||
|
|
@ -235,7 +273,7 @@ function triggerCreate(type: string, id?: string, code?: string) {
|
|||
|
||||
function triggerEdit(type: string, id: string, code?: string) {
|
||||
fetchBranchById(id);
|
||||
if (id && code) {
|
||||
if (id && code && type === 'headOffice') {
|
||||
codeHq.value = {
|
||||
id: id,
|
||||
code: code,
|
||||
|
|
@ -265,6 +303,7 @@ function triggerDelete(id: string) {
|
|||
action: async () => {
|
||||
await branchStore.deleteById(id);
|
||||
await branchStore.fetchList({ pageSize: 99999 });
|
||||
modalDrawer.value = false;
|
||||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
|
|
@ -273,15 +312,37 @@ function triggerDelete(id: string) {
|
|||
|
||||
async function onSubmit() {
|
||||
if (formType.value === 'edit') {
|
||||
await branchStore.editById(
|
||||
codeHq.value.id,
|
||||
formData.value,
|
||||
profileFile.value,
|
||||
profileFileImg.value,
|
||||
);
|
||||
if (modalDrawer.value) {
|
||||
dialog({
|
||||
color: 'primary',
|
||||
icon: 'mdi-pencil-outline',
|
||||
title: 'ยืนยันการแก้ไขข้อมูล',
|
||||
actionText: 'ตกลง',
|
||||
persistent: true,
|
||||
message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
|
||||
action: async () => {
|
||||
await branchStore.editById(
|
||||
codeHq.value.id,
|
||||
formData.value,
|
||||
profileFile.value,
|
||||
profileFileImg.value,
|
||||
);
|
||||
await branchStore.fetchList({ pageSize: 99999 });
|
||||
formType.value = 'view';
|
||||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
} else {
|
||||
await branchStore.editById(
|
||||
codeHq.value.id,
|
||||
formData.value,
|
||||
profileFile.value,
|
||||
profileFileImg.value,
|
||||
);
|
||||
|
||||
await branchStore.fetchList({ pageSize: 99999 });
|
||||
modal.value = false;
|
||||
await branchStore.fetchList({ pageSize: 99999 });
|
||||
modal.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
if (formTypeBranch.value === 'headOffice') {
|
||||
|
|
@ -326,12 +387,16 @@ function changeTitle(
|
|||
if (typeBranch === 'headOffice') {
|
||||
return formType === 'create'
|
||||
? t('formDialogTitleCreateHeadOffice')
|
||||
: t('formDialogTitleEditHeadOffice');
|
||||
: formType === 'view'
|
||||
? t('formDialogTitleViewHeadOffice')
|
||||
: t('formDialogTitleEditHeadOffice');
|
||||
}
|
||||
if (typeBranch === 'subBranch') {
|
||||
return formType === 'create'
|
||||
? t('formDialogTitleCreateSubBranch')
|
||||
: t('formDialogTitleEditSubBranch');
|
||||
: formType === 'view'
|
||||
? t('formDialogTitleViewSubBranch')
|
||||
: t('formDialogTitleEditSubBranch');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
|
@ -740,7 +805,16 @@ watch(locale, () => {
|
|||
:data="item"
|
||||
:field-selected="fieldSelected"
|
||||
:inactive="item.status === 'INACTIVE'"
|
||||
@view-detail="(b) => triggerView(b.id, b.branchLabelCode)"
|
||||
@view-detail="
|
||||
(b) => {
|
||||
console.log(b);
|
||||
if (b.hq) {
|
||||
triggerView(b.id, 'headOffice', b.branchLabelCode);
|
||||
} else {
|
||||
triggerView(b.id, 'subBranch', b.branchLabelCode);
|
||||
}
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -757,7 +831,7 @@ watch(locale, () => {
|
|||
v-model:province-id="formData.provinceId"
|
||||
v-model:district-id="formData.districtId"
|
||||
v-model:sub-district-id="formData.subDistrictId"
|
||||
:title="changeTitle(formType, formTypeBranch)"
|
||||
:title="changeTitle(formType, formTypeBranch) + ' ' + codeSubBranch.code"
|
||||
:titleFormAddress="$t('formDialogTitleAddress')"
|
||||
:addressSeparator="true"
|
||||
:submit="
|
||||
|
|
@ -769,6 +843,7 @@ watch(locale, () => {
|
|||
<template #information>
|
||||
<FormBranchInformation
|
||||
v-model:code="codeHq.code"
|
||||
v-model:code-sub-branch="codeSubBranch.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
v-model:name="formData.name"
|
||||
v-model:nameEN="formData.nameEN"
|
||||
|
|
@ -776,6 +851,8 @@ watch(locale, () => {
|
|||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
:view="formType === 'view'"
|
||||
title="formDialogTitleInformation"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -799,6 +876,7 @@ watch(locale, () => {
|
|||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
:readonly="formType === 'view'"
|
||||
@upload="
|
||||
() => {
|
||||
inputFile.click();
|
||||
|
|
@ -809,6 +887,7 @@ watch(locale, () => {
|
|||
|
||||
<template #location>
|
||||
<FormLocation
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
|
|
@ -818,6 +897,7 @@ watch(locale, () => {
|
|||
|
||||
<template #by-type>
|
||||
<FormImage
|
||||
:readonly="formType === 'view'"
|
||||
v-model:image="imageUrl"
|
||||
@upload="
|
||||
() => {
|
||||
|
|
@ -828,6 +908,100 @@ watch(locale, () => {
|
|||
/>
|
||||
</template>
|
||||
</FormDialog>
|
||||
|
||||
<DrawerInfo
|
||||
ref="formDialogRef"
|
||||
v-model:drawerOpen="modalDrawer"
|
||||
:title="changeTitle(formType, formTypeBranch) + ' ' + codeSubBranch.code"
|
||||
:titleFormAddress="$t('formDialogTitleAddress')"
|
||||
:addressSeparator="true"
|
||||
:undo="() => undo()"
|
||||
:isEdit="formType === 'edit'"
|
||||
:editData="() => drawerEdit()"
|
||||
:submit="() => onSubmit()"
|
||||
:delete-data="() => triggerDelete(codeSubBranch.id)"
|
||||
>
|
||||
<template #info>
|
||||
<infoForm
|
||||
v-model:address="formData.address"
|
||||
v-model:addressEN="formData.addressEN"
|
||||
v-model:province-id="formData.provinceId"
|
||||
v-model:district-id="formData.districtId"
|
||||
v-model:sub-district-id="formData.subDistrictId"
|
||||
:readonly="formType === 'view'"
|
||||
>
|
||||
<template #information>
|
||||
<FormBranchInformation
|
||||
v-model:code="codeHq.code"
|
||||
v-model:code-sub-branch="codeSubBranch.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
v-model:name="formData.name"
|
||||
v-model:nameEN="formData.nameEN"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
:view="formType === 'view'"
|
||||
title="formDialogTitleInformation"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #person>
|
||||
<FormBranchContact
|
||||
title="formDialogTitleContact"
|
||||
v-model:telephone-no="formData.telephoneNo"
|
||||
v-model:contact="formData.contact"
|
||||
v-model:email="formData.email"
|
||||
v-model:contact-name="formData.contactName"
|
||||
v-model:line-id="formData.lineId"
|
||||
:readonly="formType === 'view'"
|
||||
:view="formType === 'view'"
|
||||
:separator="true"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #qr-code>
|
||||
<FormQr
|
||||
:readonly="formType === 'view'"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
@upload="
|
||||
() => {
|
||||
inputFile.click();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #location>
|
||||
<FormLocation
|
||||
title="formDialogTitleLocation"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #by-type>
|
||||
<FormImage
|
||||
@upload="
|
||||
() => {
|
||||
inputFileImg.click();
|
||||
}
|
||||
"
|
||||
v-model:image="imageUrl"
|
||||
:title="$t('formDialogTitleImg')"
|
||||
:readonly="formType === 'view'"
|
||||
/>
|
||||
</template>
|
||||
</infoForm>
|
||||
</template>
|
||||
</DrawerInfo>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue