refactor: branch form
This commit is contained in:
puriphatt
Net
parent
a1f691a613
commit
fb076fc074
15 changed files with 651 additions and 274 deletions
|
|
@ -17,7 +17,8 @@ import AddButton from 'components/AddButton.vue';
|
|||
import TooltipComponent from 'components/TooltipComponent.vue';
|
||||
import StatCard from 'components/StatCardComponent.vue';
|
||||
import BranchCard from 'components/01_branch-management/BranchCard.vue';
|
||||
import FormDialog from 'components/FormDialog.vue';
|
||||
import FormAddress from 'components/02_personnel-management/FormAddress.vue';
|
||||
import DialogForm from 'components/DialogForm.vue';
|
||||
import FormBranchInformation from 'components/01_branch-management/FormBranchInformation.vue';
|
||||
import FormLocation from 'components/01_branch-management/FormLocation.vue';
|
||||
import FormQr from 'components/01_branch-management/FormQr.vue';
|
||||
|
|
@ -26,6 +27,8 @@ import FormImage from 'components/01_branch-management/FormImage.vue';
|
|||
import DrawerInfo from 'components/DrawerInfo.vue';
|
||||
import InfoForm from 'components/02_personnel-management/InfoForm.vue';
|
||||
import TreeCompoent from 'src/components/TreeCompoent.vue';
|
||||
import ProfileBanner from 'src/components/ProfileBanner.vue';
|
||||
import SideMenu from 'src/components/SideMenu.vue';
|
||||
|
||||
const $q = useQuasar();
|
||||
const { t } = useI18n();
|
||||
|
|
@ -1382,20 +1385,10 @@ watch(currentHq, () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<FormDialog
|
||||
<DialogForm
|
||||
ref="formDialogRef"
|
||||
v-model:modal="modal"
|
||||
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"
|
||||
v-model:zip-code="formData.zipCode"
|
||||
:title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
|
||||
:titleFormAddress="$t('formDialogTitleAddress')"
|
||||
:address-title="$t('formDialogAddress')"
|
||||
:address-title-EN="$t('formDialogAddressEN')"
|
||||
:addressSeparator="true"
|
||||
:submit="
|
||||
() => {
|
||||
onSubmit();
|
||||
|
|
@ -1403,75 +1396,159 @@ watch(currentHq, () => {
|
|||
"
|
||||
:close="() => (modal = false)"
|
||||
>
|
||||
<template #information>
|
||||
<FormBranchInformation
|
||||
v-model:code="formData.codeHeadOffice"
|
||||
v-model:code-sub-branch="currentEdit.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"
|
||||
<div class="q-mx-lg q-mt-lg">
|
||||
<!-- title="บริษัทจ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด"
|
||||
caption="Jobs Worker Service Co., Ltd." -->
|
||||
<ProfileBanner
|
||||
active
|
||||
hideFade
|
||||
icon="mdi-office-building-outline"
|
||||
color="hsla(var(--pink-6-hsl)/1)"
|
||||
bgColor="hsla(var(--pink-6-hsl)/0.15)"
|
||||
@view="console.log('view')"
|
||||
@edit="console.log('edit')"
|
||||
:menu="[
|
||||
{
|
||||
icon: 'mdi-phone',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-qrcode',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-image-filter-hdr',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-map-legend',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
||||
id="branch-form"
|
||||
>
|
||||
<div class="col">
|
||||
<div class="q-ma-sm fixed">
|
||||
<SideMenu
|
||||
:menu="[
|
||||
{
|
||||
name: $t('formDialogTitleInformation'),
|
||||
anchor: 'information',
|
||||
},
|
||||
{
|
||||
name: $t('formDialogTitleContact'),
|
||||
anchor: 'contact',
|
||||
},
|
||||
{
|
||||
name: $t('formDialogTitleAddress'),
|
||||
anchor: 'address',
|
||||
},
|
||||
{
|
||||
name: $t('formDialogTitleLocation'),
|
||||
anchor: 'location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'qr',
|
||||
},
|
||||
{
|
||||
name: $t('bankBook'),
|
||||
anchor: 'bankBook',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
foreground: 'var(--blue-6)',
|
||||
}"
|
||||
scroll-element="#branch-form"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #person>
|
||||
<FormBranchContact
|
||||
v-model:type-branch="formTypeBranch"
|
||||
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"
|
||||
:separator="true"
|
||||
title="formDialogTitleContact"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #qr-code>
|
||||
<FormQr
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
:readonly="formType === 'view'"
|
||||
@upload="
|
||||
() => {
|
||||
inputFile.click();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #location>
|
||||
<FormLocation
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
title="formDialogTitleLocation"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #by-type>
|
||||
<FormImage
|
||||
:readonly="formType === 'view'"
|
||||
v-model:image="imageUrl"
|
||||
@upload="
|
||||
() => {
|
||||
inputFileImg.click();
|
||||
}
|
||||
"
|
||||
:title="$t('formDialogTitleImg')"
|
||||
/>
|
||||
</template>
|
||||
</FormDialog>
|
||||
<div class="col-10 q-pa-md q-gutter-y-xl">
|
||||
<FormBranchInformation
|
||||
id="information"
|
||||
v-model:code="formData.codeHeadOffice"
|
||||
v-model:code-sub-branch="currentEdit.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
v-model:name="formData.name"
|
||||
v-model:nameEN="formData.nameEN"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
:readonly="formType === 'view'"
|
||||
:view="formType === 'view'"
|
||||
title="formDialogTitleInformation"
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="contact"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
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"
|
||||
:separator="true"
|
||||
title="formDialogTitleContact"
|
||||
:dense="true"
|
||||
:outlined="true"
|
||||
/>
|
||||
<FormAddress
|
||||
id="address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="$t('formDialogTitleAddress')"
|
||||
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"
|
||||
v-model:zip-code="formData.zipCode"
|
||||
/>
|
||||
<FormLocation
|
||||
id="location"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
title="formDialogTitleLocation"
|
||||
/>
|
||||
<FormQr
|
||||
id="qr"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
:readonly="formType === 'view'"
|
||||
@upload="
|
||||
() => {
|
||||
inputFile.click();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<!-- <FormImage
|
||||
:readonly="formType === 'view'"
|
||||
v-model:image="imageUrl"
|
||||
@upload="
|
||||
() => {
|
||||
inputFileImg.click();
|
||||
}
|
||||
"
|
||||
:title="$t('formDialogTitleImg')"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</DialogForm>
|
||||
|
||||
<DrawerInfo
|
||||
ref="formDialogRef"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue