feat: จัด layout inputform
This commit is contained in:
Net
parent
81cd5296bd
commit
406e76ac73
1 changed files with 200 additions and 3 deletions
|
|
@ -9,6 +9,7 @@ import TooltipComponent from 'components/TooltipComponent.vue';
|
||||||
import StatCardComponent from 'components/StatCardComponent.vue';
|
import StatCardComponent from 'components/StatCardComponent.vue';
|
||||||
import CardDetailsComponent from 'src/components/01_branch-management/CardDetailsComponent.vue';
|
import CardDetailsComponent from 'src/components/01_branch-management/CardDetailsComponent.vue';
|
||||||
import DeatailsBranchDrawerComponent from 'src/components/01_branch-management/DeatailsBranchDrawerComponent.vue';
|
import DeatailsBranchDrawerComponent from 'src/components/01_branch-management/DeatailsBranchDrawerComponent.vue';
|
||||||
|
import FormDialog from 'src/components/FormDialog.vue';
|
||||||
|
|
||||||
import { BranchWithChildren, Branch } from 'src/stores/branch/types';
|
import { BranchWithChildren, Branch } from 'src/stores/branch/types';
|
||||||
|
|
||||||
|
|
@ -20,6 +21,7 @@ const modal = ref<boolean>(false);
|
||||||
const showCurrentBaranch = ref<Branch | boolean | null>();
|
const showCurrentBaranch = ref<Branch | boolean | null>();
|
||||||
|
|
||||||
const shape = ref<boolean>(false);
|
const shape = ref<boolean>(false);
|
||||||
|
const openBranchDrawer = ref<boolean>(true);
|
||||||
|
|
||||||
const inputSelectBranch = ref<string>('ทั้งหมด');
|
const inputSelectBranch = ref<string>('ทั้งหมด');
|
||||||
const inputFilter = ref<string>('คอลัมน์');
|
const inputFilter = ref<string>('คอลัมน์');
|
||||||
|
|
@ -34,6 +36,39 @@ const optionsFilter: string[] = [
|
||||||
'สถานะ',
|
'สถานะ',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const formData = ref({
|
||||||
|
hqId: '',
|
||||||
|
branchId: '',
|
||||||
|
tel: '',
|
||||||
|
gender: '',
|
||||||
|
email: '',
|
||||||
|
addressL: {
|
||||||
|
address: '',
|
||||||
|
province: '',
|
||||||
|
district: '',
|
||||||
|
subDistrict: '',
|
||||||
|
zip: '',
|
||||||
|
},
|
||||||
|
addressEng: {
|
||||||
|
address: '',
|
||||||
|
province: '',
|
||||||
|
district: '',
|
||||||
|
subDistrict: '',
|
||||||
|
zip: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const selected = ref<string>('');
|
||||||
|
|
||||||
|
const headOfficeCode = ref<string>('');
|
||||||
|
const headOfficeName = ref<string>('');
|
||||||
|
const taxIDNumber = ref<string>('');
|
||||||
|
const nameHeadOfficeEN = ref<string>('');
|
||||||
|
const inputPhone = ref<string>('');
|
||||||
|
const inputIdLine = ref<string>('');
|
||||||
|
const inputPhonHeadOffice = ref<string>('');
|
||||||
|
const inputEmailHeadOffice = ref<string>('');
|
||||||
|
|
||||||
const expanded = ref<string[]>([]);
|
const expanded = ref<string[]>([]);
|
||||||
|
|
||||||
const rows: {
|
const rows: {
|
||||||
|
|
@ -106,9 +141,11 @@ const branchStat = ref<
|
||||||
|
|
||||||
const treeData = ref<BranchWithChildren[]>([]);
|
const treeData = ref<BranchWithChildren[]>([]);
|
||||||
|
|
||||||
onMounted(() => {
|
function openDialog() {
|
||||||
BranchStore.fetchById('9ff3521b-0669-4812-bb25-7f1961956c8e');
|
console.log('openDialog');
|
||||||
console.log(BranchStore.data);
|
|
||||||
|
modal.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
async function getTree() {
|
async function getTree() {
|
||||||
const result = await branchStore.fetchList<BranchWithChildren>({
|
const result = await branchStore.fetchList<BranchWithChildren>({
|
||||||
|
|
@ -378,9 +415,169 @@ onMounted(async () => {
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<DeatailsBranchDrawerComponent
|
||||||
|
@open="openBranchDrawer = !openBranchDrawer"
|
||||||
|
:open="openBranchDrawer"
|
||||||
|
:data="showCurrentBaranch as Branch"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormDialog
|
||||||
|
v-model:modal="modal"
|
||||||
|
v-model:addressL="formData.addressL"
|
||||||
|
v-model:addressEng="formData.addressEng"
|
||||||
|
title="เพิ่มสำนักงานใหญ่"
|
||||||
|
addressLocaleTitle="ที่อยู่พนักงาน"
|
||||||
|
addressEngTitle="ที่อยู่พนักงาน ENG"
|
||||||
|
>
|
||||||
|
<template #top>
|
||||||
|
<div class="row full-width">
|
||||||
|
<div class="col">
|
||||||
|
<q-input
|
||||||
|
v-model="headOfficeCode"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="รหัสสำนักงานใหญ่"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col q-pl-md">
|
||||||
|
<q-input
|
||||||
|
v-model="taxIDNumber"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="เลขประจำตัวผู้เสียภาษี"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row full-width">
|
||||||
|
<div class="col">
|
||||||
|
<q-input
|
||||||
|
v-model="headOfficeName"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="ชื่อสำนักงานใหญ่"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col q-pl-md">
|
||||||
|
<q-input
|
||||||
|
v-model="nameHeadOfficeEN"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="ชื่อสำนักงานใหญ่ ภาษาอังกฤษ"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #append>
|
||||||
|
<AppBox class="q-mt-md" style="background: var(--gray-1)">
|
||||||
|
<div class="row q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<q-input
|
||||||
|
v-model="inputPhone"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="เบอร์โทรศัพท์"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col q-pl-md">
|
||||||
|
<q-input v-model="inputIdLine" dense outlined label="id line" />
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
<div class="col q-pb-md" style="opacity: 0.3">
|
||||||
|
<q-btn
|
||||||
|
unelevated
|
||||||
|
class="bg-white"
|
||||||
|
style="border: 3px solid grey; border-radius: 6px"
|
||||||
|
>
|
||||||
|
<Icon icon="teenyicons:add-outline" width="20px" height="50px" />
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-btn
|
||||||
|
style="
|
||||||
|
background: var(--blue-5);
|
||||||
|
color: var(--blue-0);
|
||||||
|
font-size: 12px;
|
||||||
|
"
|
||||||
|
unelevated
|
||||||
|
rounded
|
||||||
|
label="อัปโหลด QR Code"
|
||||||
|
></q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AppBox>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #midBottom>
|
||||||
|
<div>
|
||||||
|
<div class="row full-width q-pb-md">
|
||||||
|
<div class="col q-pr-md">
|
||||||
|
<q-input
|
||||||
|
v-model="inputPhonHeadOffice"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="เบอร์โทรศัพท์สำนักงานใหฐ่"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<q-input
|
||||||
|
v-model="inputEmailHeadOffice"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
label="อีเมลติดต่อสำนักงานใหญ่ "
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="column q-pa-sm full-width bordered"
|
||||||
|
style="border-radius: 6px"
|
||||||
|
>
|
||||||
|
<div class="col">location</div>
|
||||||
|
<div class="col self-center bg-image q-pa-md">
|
||||||
|
<q-btn
|
||||||
|
rounded
|
||||||
|
style="
|
||||||
|
background: var(--blue-5);
|
||||||
|
color: var(--blue-0);
|
||||||
|
font-size: 12px;
|
||||||
|
"
|
||||||
|
class="flex flrx-center"
|
||||||
|
label="location"
|
||||||
|
></q-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</FormDialog>
|
||||||
|
|
||||||
|
<q-btn label="test" @click="openBranchDrawer = !openBranchDrawer" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.bg-image {
|
||||||
|
background-image: url(/map.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.branch-main-variable-color {
|
.branch-main-variable-color {
|
||||||
--_color-branch-tree-text: var(--blue-6-hsl);
|
--_color-branch-tree-text: var(--blue-6-hsl);
|
||||||
--_color-branch-title: var(--blue-10-hsl);
|
--_color-branch-title: var(--blue-10-hsl);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue