fix(01): dialog drawer form
This commit is contained in:
puriphatt
parent
ef9aeb930a
commit
073635c95b
5 changed files with 227 additions and 105 deletions
|
|
@ -29,6 +29,7 @@ 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';
|
||||
import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
|
||||
|
||||
const $q = useQuasar();
|
||||
const { t } = useI18n();
|
||||
|
|
@ -69,10 +70,44 @@ const modal = ref<boolean>(false);
|
|||
const hideStat = ref(false);
|
||||
const currentStatus = ref<Status | 'All'>('All');
|
||||
const expandedTree = ref<string[]>([]);
|
||||
const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
|
||||
{
|
||||
icon: 'mdi-office-building-outline',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-phone',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-map-marker-radius',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-map-legend',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-qrcode',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-piggy-bank-outline',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
]);
|
||||
|
||||
const profileFileImg = ref<File | undefined>(undefined);
|
||||
const isImageEdit = ref(false);
|
||||
const profileFileImg = ref<File | null>(null);
|
||||
const imageUrl = ref<string | null>('');
|
||||
const currentNode = ref<BranchWithChildren>();
|
||||
const imageDialog = ref(false);
|
||||
|
||||
const inputFileImg = (() => {
|
||||
const element = document.createElement('input');
|
||||
|
|
@ -532,6 +567,25 @@ function handleHold(node: BranchWithChildren) {
|
|||
};
|
||||
}
|
||||
|
||||
function openImageDialog(isEdit?: boolean) {
|
||||
if (isEdit) isImageEdit.value = true;
|
||||
else isImageEdit.value = false;
|
||||
imageDialog.value = true;
|
||||
}
|
||||
|
||||
function handleImageUpload(file: File | null, url: string | null) {
|
||||
imageUrl.value = url;
|
||||
imageDialog.value = false;
|
||||
// profileFileImg = file;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => profileFileImg.value,
|
||||
() => {
|
||||
if (profileFileImg.value !== null) isImageEdit.value = true;
|
||||
},
|
||||
);
|
||||
|
||||
watch(locale, () => {
|
||||
fieldSelectedBranch.value = {
|
||||
label: t(`${fieldSelectedBranch.value.label}`),
|
||||
|
|
@ -1394,41 +1448,22 @@ watch(currentHq, () => {
|
|||
onSubmit();
|
||||
}
|
||||
"
|
||||
:close="() => (modal = false)"
|
||||
:close="() => ((modal = false), (profileFileImg = null))"
|
||||
>
|
||||
<div class="q-mx-lg q-mt-lg">
|
||||
<!-- title="บริษัทจ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด"
|
||||
caption="Jobs Worker Service Co., Ltd." -->
|
||||
<ProfileBanner
|
||||
active
|
||||
hideFade
|
||||
:hideFade="imageUrl === '' || imageUrl === null"
|
||||
:img="imageUrl || null"
|
||||
:cover="imageUrl || null"
|
||||
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)',
|
||||
},
|
||||
]"
|
||||
@view="openImageDialog"
|
||||
@edit="inputFileImg.click()"
|
||||
:menu="formMenuIcon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -1441,27 +1476,27 @@ watch(currentHq, () => {
|
|||
:menu="[
|
||||
{
|
||||
name: $t('formDialogTitleInformation'),
|
||||
anchor: 'information',
|
||||
anchor: 'form-information',
|
||||
},
|
||||
{
|
||||
name: $t('formDialogTitleContact'),
|
||||
anchor: 'contact',
|
||||
anchor: 'form-contact',
|
||||
},
|
||||
{
|
||||
name: $t('formDialogTitleAddress'),
|
||||
anchor: 'address',
|
||||
anchor: 'form-address',
|
||||
},
|
||||
{
|
||||
name: $t('formDialogTitleLocation'),
|
||||
anchor: 'location',
|
||||
anchor: 'form-location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'qr',
|
||||
anchor: 'form-qr',
|
||||
},
|
||||
{
|
||||
name: $t('bankBook'),
|
||||
anchor: 'bankBook',
|
||||
anchor: 'form-bankBook',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
|
|
@ -1476,7 +1511,7 @@ watch(currentHq, () => {
|
|||
|
||||
<div class="col-10 q-pa-md q-gutter-y-xl">
|
||||
<FormBranchInformation
|
||||
id="information"
|
||||
id="form-information"
|
||||
v-model:code="formData.codeHeadOffice"
|
||||
v-model:code-sub-branch="currentEdit.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
|
|
@ -1490,7 +1525,7 @@ watch(currentHq, () => {
|
|||
title="formDialogTitleInformation"
|
||||
/>
|
||||
<FormBranchContact
|
||||
id="contact"
|
||||
id="form-contact"
|
||||
v-model:type-branch="formTypeBranch"
|
||||
v-model:telephone-no="formData.telephoneNo"
|
||||
v-model:contact="formData.contact"
|
||||
|
|
@ -1503,7 +1538,7 @@ watch(currentHq, () => {
|
|||
:outlined="true"
|
||||
/>
|
||||
<FormAddress
|
||||
id="address"
|
||||
id="form-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
|
|
@ -1517,7 +1552,7 @@ watch(currentHq, () => {
|
|||
v-model:zip-code="formData.zipCode"
|
||||
/>
|
||||
<FormLocation
|
||||
id="location"
|
||||
id="form-location"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
v-model:latitude="formData.latitude"
|
||||
|
|
@ -1525,7 +1560,7 @@ watch(currentHq, () => {
|
|||
title="formDialogTitleLocation"
|
||||
/>
|
||||
<FormQr
|
||||
id="qr"
|
||||
id="form-qr"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
:qr="qrCodeimageUrl"
|
||||
|
|
@ -1564,21 +1599,71 @@ watch(currentHq, () => {
|
|||
:close="() => ((modalDrawer = false), flowStore.rotate())"
|
||||
:statusBranch="formData.status"
|
||||
>
|
||||
<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"
|
||||
v-model:zip-code="formData.zipCode"
|
||||
:title-form-address="$t('formDialogTitleAddress')"
|
||||
:address-title="$t('formDialogAddress')"
|
||||
:address-title-e-n="$t('formDialogAddressEN')"
|
||||
:readonly="formType === 'view'"
|
||||
<InfoForm>
|
||||
<div class="q-mx-lg q-mt-lg">
|
||||
<ProfileBanner
|
||||
active
|
||||
hideFade
|
||||
:img="imageUrl || null"
|
||||
:cover="imageUrl || null"
|
||||
:title="formData.name"
|
||||
:caption="formData.nameEN"
|
||||
icon="mdi-office-building-outline"
|
||||
color="hsla(var(--pink-6-hsl)/1)"
|
||||
bgColor="hsla(var(--pink-6-hsl)/0.15)"
|
||||
@view="openImageDialog"
|
||||
@edit="inputFileImg.click()"
|
||||
:readonly="formType === 'view'"
|
||||
:menu="formMenuIcon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col surface-1 q-ma-lg rounded bordered scroll row"
|
||||
id="branch-info"
|
||||
>
|
||||
<template #information>
|
||||
<div class="col">
|
||||
<div style="position: sticky; top: 0" class="q-pa-sm">
|
||||
<SideMenu
|
||||
:menu="[
|
||||
{
|
||||
name: $t('formDialogTitleInformation'),
|
||||
anchor: 'info-information',
|
||||
},
|
||||
{
|
||||
name: $t('formDialogTitleContact'),
|
||||
anchor: 'info-contact',
|
||||
},
|
||||
{
|
||||
name: $t('formDialogTitleAddress'),
|
||||
anchor: 'info-address',
|
||||
},
|
||||
{
|
||||
name: $t('formDialogTitleLocation'),
|
||||
anchor: 'info-location',
|
||||
},
|
||||
{
|
||||
name: 'QR Code',
|
||||
anchor: 'info-qr',
|
||||
},
|
||||
{
|
||||
name: $t('bankBook'),
|
||||
anchor: 'info-bankBook',
|
||||
},
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
foreground: 'var(--blue-6)',
|
||||
}"
|
||||
scroll-element="#branch-info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-10 q-pa-md q-gutter-y-xl">
|
||||
<FormBranchInformation
|
||||
id="info-information"
|
||||
v-model:code="formData.codeHeadOffice"
|
||||
v-model:code-sub-branch="currentEdit.code"
|
||||
v-model:taxNo="formData.taxNo"
|
||||
|
|
@ -1592,10 +1677,8 @@ watch(currentHq, () => {
|
|||
:view="formType === 'view'"
|
||||
title="formDialogTitleInformation"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #person>
|
||||
<FormBranchContact
|
||||
id="info-contact"
|
||||
title="formDialogTitleContact"
|
||||
v-model:telephone-no="formData.telephoneNo"
|
||||
v-model:contact="formData.contact"
|
||||
|
|
@ -1608,10 +1691,31 @@ watch(currentHq, () => {
|
|||
:dense="true"
|
||||
:outlined="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #qr-code>
|
||||
<FormAddress
|
||||
id="info-address"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
prefix-id="default"
|
||||
:title="$t('formDialogTitleAddress')"
|
||||
:readonly="formType === 'view'"
|
||||
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="info-location"
|
||||
title="formDialogTitleLocation"
|
||||
v-model:latitude="formData.latitude"
|
||||
v-model:longitude="formData.longitude"
|
||||
:readonly="formType === 'view'"
|
||||
:separator="true"
|
||||
/>
|
||||
<FormQr
|
||||
id="info-qr"
|
||||
:readonly="formType === 'view'"
|
||||
title="QR Code"
|
||||
:separator="true"
|
||||
|
|
@ -1622,20 +1726,7 @@ watch(currentHq, () => {
|
|||
}
|
||||
"
|
||||
/>
|
||||
</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
|
||||
<!-- <FormImage
|
||||
@upload="
|
||||
() => {
|
||||
inputFileImg.click();
|
||||
|
|
@ -1644,10 +1735,10 @@ watch(currentHq, () => {
|
|||
v-model:image="imageUrl"
|
||||
:title="$t('formDialogTitleImg')"
|
||||
:readonly="formType === 'view'"
|
||||
/>
|
||||
</template>
|
||||
</InfoForm>
|
||||
</template>
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</InfoForm>
|
||||
</DrawerInfo>
|
||||
|
||||
<q-dialog v-model="holdDialog" position="bottom">
|
||||
|
|
@ -1779,6 +1870,30 @@ watch(currentHq, () => {
|
|||
</q-list>
|
||||
</div>
|
||||
</q-dialog>
|
||||
|
||||
<ImageUploadDialog
|
||||
v-model:dialogState="imageDialog"
|
||||
v-model:file="profileFileImg"
|
||||
v-model:image-url="imageUrl"
|
||||
:hiddenFooter="!isImageEdit"
|
||||
clearButton
|
||||
@save="handleImageUpload"
|
||||
>
|
||||
<template #error>
|
||||
<div class="full-height full-width" style="background: white">
|
||||
<div
|
||||
class="full-height full-width flex justify-center items-center"
|
||||
style="background: hsla(var(--pink-6-hsl) / 0.15)"
|
||||
>
|
||||
<q-icon
|
||||
size="15rem"
|
||||
name="mdi-office-building-outline"
|
||||
style="color: hsla(var(--pink-6-hsl) / 1)"
|
||||
></q-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ImageUploadDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue