feat: ทำ form input
This commit is contained in:
Net
parent
7c530c1149
commit
1885c4ceb1
7 changed files with 284 additions and 7 deletions
72
src/components/01_branch-management/FormBranchContact.vue
Normal file
72
src/components/01_branch-management/FormBranchContact.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const telephoneNo = defineModel<string>('telephoneNo');
|
||||
const contact = defineModel<string>('contact');
|
||||
const email = defineModel<string>('email');
|
||||
const contactName = defineModel<string>('contactName');
|
||||
const operatingHours = defineModel<string>('operatingHours');
|
||||
const lineId = defineModel<string>('lineId');
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
:label="$t('formDialogInputEmailHq')"
|
||||
v-model="email"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
hide-bottom-space
|
||||
class="col-7"
|
||||
:label="$t('formDialogInputTelephoneHq')"
|
||||
v-model="telephoneNo"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
:label="$t('formDialogInputContactName')"
|
||||
v-model="contactName"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
hide-bottom-space
|
||||
class="col-7"
|
||||
:label="$t('formDialogInputTelephoneContact')"
|
||||
v-model="contact"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
hide-bottom-space
|
||||
class="col-5"
|
||||
label="Line ID"
|
||||
v-model="lineId"
|
||||
/>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<script setup lang="ts">
|
||||
const code = defineModel<string>('code');
|
||||
const taxNo = defineModel<string>('taxNo');
|
||||
const name = defineModel<string>('name');
|
||||
const nameEN = defineModel<string>('nameEN');
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
|
||||
<div class="col-9 row q-col-gutter-md">
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputCode')"
|
||||
v-model="code"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-6"
|
||||
:label="$t('formDialogInputTaxNo')"
|
||||
v-model="taxNo"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:label="$t('formDialogInputNameHq')"
|
||||
v-model="name"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:dense="dense"
|
||||
:outlined="outlined"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
:label="$t('formDialogInputNameHqEn')"
|
||||
v-model="nameEN"
|
||||
/>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -1,5 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
const location = defineModel<string>('qr');
|
||||
const longitude = defineModel<string>('longitude');
|
||||
const latitude = defineModel<string>('latitude');
|
||||
|
||||
function getLocation() {
|
||||
navigator.geolocation.getCurrentPosition((position) => {
|
||||
longitude.value = position.coords.longitude.toString();
|
||||
latitude.value = position.coords.latitude.toString();
|
||||
});
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
|
|
@ -10,8 +18,46 @@ defineProps<{
|
|||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• ข้อมูลที่อยู่สำนักงานใหญ่</div>
|
||||
<div class="col-9 row">Location</div>
|
||||
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
|
||||
<div class="col-9 bordered rounded row no-padding">
|
||||
<div class="col-12 q-pl-md q-py-sm app-text-muted">location</div>
|
||||
|
||||
<div v-if="!!longitude && !!latitude" class="col-12 flex flex-center">
|
||||
<iframe
|
||||
:src="`https://maps.google.com/maps?q=${latitude}, ${longitude}&z=15&output=embed`"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
style="border: 0"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="col-12 flex flex-center"
|
||||
style="
|
||||
height: 100px;
|
||||
background-image: url(/map.png);
|
||||
background-position: center center;
|
||||
background-size: 920px 400px;
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
:text-color="$q.dark.isActive ? 'black' : 'white'"
|
||||
style="
|
||||
background: var(--blue-5);
|
||||
color: var(--blue-0);
|
||||
font-size: 12px;
|
||||
width: 150px;
|
||||
"
|
||||
unelevated
|
||||
rounded
|
||||
:label="$t('formDialogBtnLocation')"
|
||||
@click="getLocation()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
const qr = defineModel<string>('qr');
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
const qr = defineModel<string | null>('qr');
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
|
|
@ -8,13 +10,85 @@ defineProps<{
|
|||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
(e: 'upload'): void;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">• ข้อมูลที่อยู่สำนักงานใหญ่</div>
|
||||
<div class="col-9 row">QRCode</div>
|
||||
<div class="col-3 app-text-muted">• {{ title }}</div>
|
||||
<div
|
||||
:class="{ 'dark-form-show-qr-code': $q.dark.isActive }"
|
||||
class="col-9 row q-col-gutter-md q-mt-lg branch-form-show-qr-code"
|
||||
>
|
||||
<div class="col-12 flex flex-center">
|
||||
<q-img
|
||||
v-if="qr"
|
||||
:src="qr as string"
|
||||
style="width: 150px; height: 150px"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
@click="$emit('upload')"
|
||||
class="branch-form-btn-qr-code"
|
||||
:class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
|
||||
v-else
|
||||
unelevated
|
||||
:color="$q.dark.isActive ? 'black' : 'grey-2'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'grey-5'"
|
||||
>
|
||||
<Icon icon="teenyicons:add-outline" width="30px" height="50px" />
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-12 flex flex-center q-py-md">
|
||||
<q-btn
|
||||
:text-color="$q.dark.isActive ? 'black' : 'white'"
|
||||
style="background: var(--blue-5); color: var(--blue-0); font-size: 12px"
|
||||
unelevated
|
||||
rounded
|
||||
:label="$t('formDialogUploadQrCode')"
|
||||
@click="$emit('upload')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator
|
||||
v-if="separator"
|
||||
class="col-12 q-mt-xl q-mb-md"
|
||||
style="padding-block: 0.5px"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.branch-form-show-qr-code {
|
||||
--_bg-branch-form-show-qr-code: linear-gradient(
|
||||
180deg,
|
||||
var(--indigo-0),
|
||||
var(--sand-0)
|
||||
);
|
||||
--_border-branch-form-show-qr-code: 2px dashed var(--gray-4);
|
||||
border: var(--_border-branch-form-show-qr-code);
|
||||
border-radius: 10px;
|
||||
background-image: var(--_bg-branch-form-show-qr-code);
|
||||
&.dark-form-show-qr-code {
|
||||
background: var(--gray-9);
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.branch-form-btn-qr-code {
|
||||
--_color-btn-qr-code: 3px solid var(--gray-4);
|
||||
border: var(--_color-btn-qr-code);
|
||||
border-radius: 6px;
|
||||
&.dark-form-btn-qr-code {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.branch-form-input-Contact {
|
||||
--_bg-branch-form-input-Contact: var(--gray-1-hsl);
|
||||
background: hsl(var(--_bg-branch-form-input-Contact));
|
||||
&.dark-form-input-Contact {
|
||||
--_bg-branch-form-input-Contact: var(--gray-10-hsl);
|
||||
border: 2px solid var(--gray-9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import FormAddress from './02_personnel-management/FormAddress.vue';
|
|||
|
||||
defineProps<{
|
||||
title: string;
|
||||
titleFormAddress?: string;
|
||||
addressTitle?: string;
|
||||
addressTitleEN?: string;
|
||||
addressSeparator?: boolean;
|
||||
|
|
@ -83,6 +84,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
|
|||
<FormAddress
|
||||
dense
|
||||
outlined
|
||||
:title="titleFormAddress"
|
||||
:separator="addressSeparator"
|
||||
v-model:isOpen="modal"
|
||||
v-model:address="address"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
export default {
|
||||
formDialogTitleLocation: 'Head Office Location',
|
||||
formDialogTitleInformation: 'Basic Information',
|
||||
formDialogTitleContact: 'Contact Information',
|
||||
|
||||
formDialogInputCode: 'Head Office Code',
|
||||
formDialogInputTaxNo: 'Tax Identification Number',
|
||||
formDialogInputTaxNoValidate: 'Please enter the Tax Identification Number',
|
||||
|
|
@ -21,9 +25,15 @@ export default {
|
|||
formDialogInputTelephoneHq: 'Head Office Telephone Number',
|
||||
formDialogInputEmailHq: 'Head Office Contact Email',
|
||||
|
||||
formDialogInputContactName: 'Contact',
|
||||
|
||||
formDialogInputOperatingHours: 'Operating Hours',
|
||||
|
||||
formDialogInputAddressValidate: 'Please enter the address',
|
||||
formDialogInputProvinceValidate: 'Please enter the province',
|
||||
|
||||
formDialogInputDistrictValidate: 'Please enter the district',
|
||||
formDialogInputSubDistrictValidate: 'Please enter the sub-district',
|
||||
|
||||
formDialogBtnLocation: 'Start sharing location',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
export default {
|
||||
formDialogTitleLocation: 'สถานที่ตั้งสำนักงานใหญ่',
|
||||
formDialogTitleInformation: 'ข้อมูลพื้นฐาน',
|
||||
formDialogTitleContact: 'ข้อมูลติดต่อ',
|
||||
|
||||
formDialogInputCode: 'รหัสสำนักงานใหญ่',
|
||||
formDialogInputTaxNo: 'เลขประจำตัวผู้เสียภาษี',
|
||||
formDialogInputTaxNoValidate: 'โปรดระบุเลขประจำตัวผู้เสียภาษี',
|
||||
|
|
@ -13,15 +17,21 @@ export default {
|
|||
formDialogInputNameHqEnValidate: 'โปรดระบุชื่อสำนักงานใหญ่ (ภาษาอังกฤษ)',
|
||||
formDialogInputNameSubBranchEnValidate: 'โปรดระบุชื่อสาขา (ภาษาอังกฤษ)',
|
||||
|
||||
formDialogInputTelephoneContact: 'เบอร์โทรศัพท์',
|
||||
formDialogInputTelephoneContact: 'เบอร์โทรศัพท์ติดต่อ',
|
||||
formDialogUploadQrCode: 'อัปโหลด QR Code',
|
||||
|
||||
formDialogInputTelephoneHq: 'เบอร์โทรศัพท์สำนักงานใหญ่',
|
||||
formDialogInputEmailHq: 'อีเมลติดต่อสำนักงานใหญ่',
|
||||
|
||||
formDialogInputContactName: 'ติดต่อ',
|
||||
|
||||
formDialogInputOperatingHours: 'เวลาทําการ',
|
||||
|
||||
formDialogInputAddressValidate: 'โปรดระบุที่อยู่',
|
||||
formDialogInputProvinceValidate: 'โปรดระบุจังหวัด',
|
||||
|
||||
formDialogInputDistrictValidate: 'โปรดระบุอำเภอ',
|
||||
formDialogInputSubDistrictValidate: 'โปรดระบุตำบล',
|
||||
|
||||
formDialogBtnLocation: 'เริ่มแชร์โลเคชั่น',
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue