feat:ทำ dark ของ form code
This commit is contained in:
Net
parent
d210ccaded
commit
0515a049a8
1 changed files with 106 additions and 40 deletions
|
|
@ -48,6 +48,7 @@ const openBranchDrawer = ref<boolean>(false);
|
|||
const openCardDetails = ref<boolean>(false);
|
||||
const openTableCard = ref<boolean>(true);
|
||||
|
||||
const formDialogRef = ref();
|
||||
const inputSelectBranch = ref<string>('ทั้งหมด');
|
||||
const inputFilter = ref<string>('คอลัมน์');
|
||||
const inputSearch = ref<string>('');
|
||||
|
|
@ -190,15 +191,17 @@ function triggerCreateSubBranch(code: string, id: string) {
|
|||
openDialog();
|
||||
}
|
||||
|
||||
function triggerEditSubBranch(code: string, id: string) {
|
||||
clearData();
|
||||
async function triggerEditSubBranch(code: string, id: string) {
|
||||
await clearData();
|
||||
formType.value = 'edit';
|
||||
typeBranch.value = 'subBranch';
|
||||
inputCode.value = code;
|
||||
formData.value.headOfficeId = id;
|
||||
currentBranchIdEdit.value = id;
|
||||
fetchFormEditBranch(id);
|
||||
fetchFormEditBranchContact(id);
|
||||
await fetchFormEditBranch(id);
|
||||
await fetchFormEditBranchContact(id);
|
||||
await formDialogRef.value.fetchDistrict(formData.value.provinceId);
|
||||
await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
|
||||
openDialog();
|
||||
}
|
||||
|
||||
|
|
@ -229,13 +232,17 @@ function triggerCreateHeadOffice() {
|
|||
openDialog();
|
||||
}
|
||||
|
||||
function triggerEditHeadOffice(id: string) {
|
||||
clearData();
|
||||
async function triggerEditHeadOffice(id: string) {
|
||||
await clearData();
|
||||
formType.value = 'edit';
|
||||
typeBranch.value = 'headOffice';
|
||||
currentBranchIdEdit.value = id;
|
||||
fetchFormEditBranch(id);
|
||||
fetchFormEditBranchContact(id);
|
||||
await fetchFormEditBranch(id);
|
||||
await fetchFormEditBranchContact(id);
|
||||
|
||||
await formDialogRef.value.fetchDistrict(formData.value.provinceId);
|
||||
await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
|
||||
|
||||
openDialog();
|
||||
}
|
||||
|
||||
|
|
@ -257,8 +264,6 @@ function triggerDeleteHeadOffice(id: string) {
|
|||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
|
||||
// openDialog();
|
||||
}
|
||||
|
||||
async function fetchFormEditBranch(id: string) {
|
||||
|
|
@ -339,9 +344,6 @@ async function submitForm(
|
|||
modal.value = false;
|
||||
return;
|
||||
}
|
||||
if (typeSubmit === 'delete') {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (formTypeSubmit === 'subBranch') {
|
||||
|
|
@ -371,10 +373,6 @@ async function submitForm(
|
|||
modal.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeSubmit === 'delete') {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -737,6 +735,7 @@ onMounted(async () => {
|
|||
/>
|
||||
|
||||
<FormDialog
|
||||
ref="formDialogRef"
|
||||
v-model:modal="modal"
|
||||
addressTitle="ที่อยู่"
|
||||
addressENTitle="address"
|
||||
|
|
@ -753,20 +752,28 @@ onMounted(async () => {
|
|||
<div class="row full-width">
|
||||
<div class="col">
|
||||
<q-input
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputCode"
|
||||
dense
|
||||
outlined
|
||||
label="รหัสสำนักงานใหญ่"
|
||||
:label="$t('formDialogInputCode')"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col q-pl-md">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="formData.taxNo"
|
||||
dense
|
||||
outlined
|
||||
label="เลขประจำตัวผู้เสียภาษี"
|
||||
:label="$t('formDialogInputTaxNo')"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || $t('formDialogInputTaxNoValidate'),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -774,68 +781,93 @@ onMounted(async () => {
|
|||
<div class="row full-width">
|
||||
<div class="col">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="formData.name"
|
||||
dense
|
||||
outlined
|
||||
label="ชื่อสำนักงานใหญ่"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHq')
|
||||
: $t('formDialogInputNameSubBranch')
|
||||
"
|
||||
lazy-rules
|
||||
:rules="[(val) => val && val.length > 0]"
|
||||
:error-message="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHqValidate')
|
||||
: $t('formDialogInputNameSubBranchValidate')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col q-pl-md">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="formData.nameEN"
|
||||
dense
|
||||
outlined
|
||||
label="ชื่อสำนักงานใหญ่ ภาษาอังกฤษ"
|
||||
:label="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHqEn')
|
||||
: $t('formDialogInputNameSubBranchEn')
|
||||
"
|
||||
:rules="[(val) => val && val.length > 0]"
|
||||
:error-message="
|
||||
typeBranch === 'headOffice'
|
||||
? $t('formDialogInputNameHqEnValidate')
|
||||
: $t('formDialogInputNameSubBranchEnValidate')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<AppBox class="q-mt-md" style="background: var(--gray-1)">
|
||||
<AppBox
|
||||
class="q-mt-md branch-form-input-Contact"
|
||||
:class="{ 'dark-form-input-Contact': $q.dark.isActive }"
|
||||
>
|
||||
<div class="row q-mb-md">
|
||||
<div class="col">
|
||||
<q-input
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
hide-bottom-space
|
||||
v-model="formDataContact.telephoneNo"
|
||||
dense
|
||||
outlined
|
||||
label="เบอร์โทรศัพท์"
|
||||
:label="$t('formDialogInputTelephoneContact')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col q-pl-md">
|
||||
<q-input
|
||||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
hide-bottom-space
|
||||
v-model="formDataContact.lineId"
|
||||
dense
|
||||
outlined
|
||||
label="id line"
|
||||
label="Line Id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="
|
||||
border: 2px dashed var(--gray-4);
|
||||
border-radius: 10px;
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
var(--indigo-0),
|
||||
var(--sand-0)
|
||||
);
|
||||
"
|
||||
class="q-pa-md column items-center justify-center full-width"
|
||||
class="branch-form-show-qr-code q-pa-md column items-center justify-center full-width"
|
||||
:class="{ 'dark-form-show-qr-code': $q.dark.isActive }"
|
||||
>
|
||||
<div class="col q-pb-md" style="opacity: 0.3">
|
||||
<div class="col q-pb-md">
|
||||
<q-img
|
||||
v-if="urlQrCode"
|
||||
:src="urlQrCode as string"
|
||||
style="width: 100px; height: 100px"
|
||||
/>
|
||||
<q-btn
|
||||
class="branch-form-btn-qr-code"
|
||||
v-else
|
||||
unelevated
|
||||
class="bg-white"
|
||||
style="border: 3px solid grey; border-radius: 6px"
|
||||
:color="$q.dark.isActive ? 'grey-10' : 'grey-2'"
|
||||
:text-color="$q.dark.isActive ? 'white' : 'grey-5'"
|
||||
>
|
||||
<Icon icon="teenyicons:add-outline" width="20px" height="50px" />
|
||||
</q-btn>
|
||||
|
|
@ -849,7 +881,7 @@ onMounted(async () => {
|
|||
"
|
||||
unelevated
|
||||
rounded
|
||||
label="อัปโหลด QR Code"
|
||||
:label="$t('formDialogUploadQrCode')"
|
||||
@click="inputFile.click()"
|
||||
></q-btn>
|
||||
</div>
|
||||
|
|
@ -865,7 +897,7 @@ onMounted(async () => {
|
|||
v-model="formData.telephoneNo"
|
||||
dense
|
||||
outlined
|
||||
label="เบอร์โทรศัพท์สำนักงานใหฐ่"
|
||||
:label="$t('formDialogInputTelephoneHq')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
|
|
@ -873,7 +905,7 @@ onMounted(async () => {
|
|||
v-model="formData.email"
|
||||
dense
|
||||
outlined
|
||||
label="อีเมลติดต่อสำนักงานใหญ่ "
|
||||
:label="$t('formDialogInputEmailHq')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -908,6 +940,40 @@ onMounted(async () => {
|
|||
background-size: auto;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.branch-form-btn-qr-code {
|
||||
--_color-btn-qr-code: 3px solid var(--gray-4);
|
||||
|
||||
border: var(--_color-btn-qr-code);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.branch-container {
|
||||
--_color-branch-tree-text: var(--blue-6-hsl);
|
||||
--_color-branch-title: var(--blue-10-hsl);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue