726 lines
23 KiB
Vue
726 lines
23 KiB
Vue
<!-- card ข้อมูลที่อยู่ -->
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, reactive } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
|
|
|
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
|
|
|
import { useRoute } from "vue-router";
|
|
import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";
|
|
|
|
import type {
|
|
AddressOps,
|
|
Address as AddressType,
|
|
optionData,
|
|
AddressData,
|
|
} from "@/modules/05_placement/interface/index/Main";
|
|
import type { PropType } from "vue";
|
|
|
|
const props = defineProps({
|
|
statusEdit: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
notiNoEdit: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
fetch: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
data: {
|
|
type: Object as PropType<AddressType>,
|
|
default: AddressDataDefualt,
|
|
},
|
|
});
|
|
const emit = defineEmits(["update:statusEdit"]);
|
|
|
|
const route = useRoute();
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
date2Thai,
|
|
success,
|
|
messageError,
|
|
showLoader,
|
|
hideLoader,
|
|
dialogConfirm,
|
|
} = mixin;
|
|
const edit = ref<boolean>(false);
|
|
const onEdit = ref<boolean>(false);
|
|
const addressData = ref<AddressType>(props.data);
|
|
const myform = ref<any>();
|
|
const Ops = ref<AddressOps>({
|
|
provinceOps: [],
|
|
districtOps: [],
|
|
districtCOps: [],
|
|
subdistrictOps: [],
|
|
subdistrictCOps: [],
|
|
});
|
|
const OpsFilter = ref<AddressOps>({
|
|
provinceOps: [],
|
|
districtOps: [],
|
|
districtCOps: [],
|
|
subdistrictOps: [],
|
|
subdistrictCOps: [],
|
|
});
|
|
|
|
const registAddress = reactive<AddressData>({
|
|
subDistrictId: "",
|
|
zipCode: "",
|
|
districtId: "",
|
|
provinceId: "",
|
|
});
|
|
|
|
const currentAddress = reactive<AddressData>({
|
|
subDistrictId: "",
|
|
zipCode: "",
|
|
districtId: "",
|
|
provinceId: "",
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await getNewData();
|
|
emit("update:statusEdit", false);
|
|
});
|
|
|
|
const filterSelector = (val: any, update: Function, refData: string) => {
|
|
switch (refData) {
|
|
case "provinceOps":
|
|
update(() => {
|
|
Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
|
|
(v: optionData) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "districtOps":
|
|
update(() => {
|
|
Ops.value.districtOps = OpsFilter.value.districtOps.filter(
|
|
(v: optionData) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "districtCOps":
|
|
update(() => {
|
|
Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
|
|
(v: optionData) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "subdistrictOps":
|
|
update(() => {
|
|
Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
|
|
(v: optionData) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "subdistrictCOps":
|
|
update(() => {
|
|
Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
|
|
(v: optionData) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
const refreshData = async () => {
|
|
myform.value.reset();
|
|
if (onEdit.value) {
|
|
dialogConfirm(
|
|
$q,
|
|
async () => {
|
|
emit("update:statusEdit", false);
|
|
await props.fetch("Address");
|
|
fetchProvince();
|
|
edit.value = false;
|
|
onEdit.value = false;
|
|
},
|
|
`ข้อมูลมีการแก้ไข`,
|
|
`ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`
|
|
);
|
|
} else {
|
|
edit.value = false;
|
|
}
|
|
};
|
|
|
|
const getNewData = async () => {
|
|
// await props.fetch();
|
|
await fetchProvince();
|
|
};
|
|
|
|
// บันทึกข้อมูล
|
|
const editData = async () => {
|
|
dialogConfirm($q, async () => {
|
|
const body = {
|
|
registrationSame: addressData.value.registSame == "1",
|
|
registrationAddress: addressData.value.registAddress,
|
|
registrationSubDistrictId: registAddress.subDistrictId,
|
|
registrationDistrictId: registAddress.districtId,
|
|
registrationProvinceId: registAddress.provinceId,
|
|
registrationZipCode: registAddress.zipCode,
|
|
currentAddress:
|
|
addressData.value.registSame == "1"
|
|
? addressData.value.registAddress
|
|
: addressData.value.currentAddress,
|
|
currentSubDistrictId:
|
|
addressData.value.registSame == "1"
|
|
? registAddress.subDistrictId
|
|
: currentAddress.subDistrictId,
|
|
currentDistrictId:
|
|
addressData.value.registSame == "1"
|
|
? registAddress.districtId
|
|
: currentAddress.districtId,
|
|
currentProvinceId:
|
|
addressData.value.registSame == "1"
|
|
? registAddress.provinceId
|
|
: currentAddress.provinceId,
|
|
currentZipCode:
|
|
addressData.value.registSame == "1"
|
|
? registAddress.zipCode
|
|
: currentAddress.zipCode,
|
|
};
|
|
showLoader();
|
|
await http
|
|
.put(
|
|
config.API.placementAddressId(route.params.personalId.toString()),
|
|
body
|
|
)
|
|
.then(() => {
|
|
success($q, "แก้ไขข้อมูลสำเร็จ");
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(async () => {
|
|
edit.value = false;
|
|
emit("update:statusEdit", false);
|
|
await props.fetch("Address");
|
|
// await fetchProvince();
|
|
});
|
|
});
|
|
};
|
|
|
|
// เลือกข้อมูลจังหวัด
|
|
const selectProvince = async (e: string | null, name: string) => {
|
|
onEdit.value = true;
|
|
if (e != null) {
|
|
if (name == "1") {
|
|
registAddress.subDistrictId = "";
|
|
registAddress.zipCode = "";
|
|
registAddress.districtId = "";
|
|
} else {
|
|
currentAddress.subDistrictId = "";
|
|
currentAddress.zipCode = "";
|
|
currentAddress.districtId = "";
|
|
}
|
|
myform.value.resetValidation();
|
|
await fetchDistrict(e, name);
|
|
}
|
|
};
|
|
|
|
// เลือกข้อมูลอำเภอ
|
|
const selectDistrict = async (e: string | null, name: string) => {
|
|
onEdit.value = true;
|
|
if (e != null) {
|
|
if (name == "1") {
|
|
registAddress.subDistrictId = "";
|
|
registAddress.zipCode = "";
|
|
} else {
|
|
currentAddress.subDistrictId = "";
|
|
currentAddress.zipCode = "";
|
|
}
|
|
myform.value.resetValidation();
|
|
await fetchSubDistrict(e, name);
|
|
}
|
|
};
|
|
|
|
// เลือกข้อมูลตำบล
|
|
const selectSubDistrict = (e: string | null, name: string) => {
|
|
onEdit.value = true;
|
|
if (e != null) {
|
|
if (name == "1") {
|
|
const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
|
|
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
|
registAddress.zipCode = namecode;
|
|
} else {
|
|
const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
|
|
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
|
currentAddress.zipCode = namecode;
|
|
}
|
|
}
|
|
};
|
|
|
|
// ดึงข้อมูลจังหวัด
|
|
const fetchProvince = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.orgProvince)
|
|
.then(async (res) => {
|
|
const data = res.data.result;
|
|
let option: optionData[] = [];
|
|
data.map((r: any) => {
|
|
option.push({ id: r.id, name: r.name });
|
|
});
|
|
Ops.value.provinceOps = option;
|
|
OpsFilter.value.provinceOps = option;
|
|
|
|
const checkRegistProvinceId = await option.find(
|
|
(e: any) => e.id === addressData.value.registProvinceId
|
|
);
|
|
|
|
// ที่อยู่ถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
|
|
if (
|
|
addressData.value.registProvinceId == "" ||
|
|
addressData.value.registProvinceId ==
|
|
"00000000-0000-0000-0000-000000000000" ||
|
|
!checkRegistProvinceId
|
|
) {
|
|
registAddress.subDistrictId = "";
|
|
registAddress.zipCode = "";
|
|
registAddress.districtId = "";
|
|
} else {
|
|
registAddress.provinceId = await addressData.value.registProvinceId;
|
|
registAddress.zipCode = await addressData.value.registZipCode;
|
|
|
|
await fetchDistrict(addressData.value.registProvinceId, "1");
|
|
if (
|
|
addressData.value.registDistrictId != null &&
|
|
addressData.value.registDistrictId !=
|
|
"00000000-0000-0000-0000-000000000000"
|
|
) {
|
|
await fetchSubDistrict(addressData.value.registDistrictId, "1");
|
|
}
|
|
}
|
|
|
|
const checkCurrentProvinceId = await option.find(
|
|
(e: any) => e.id === addressData.value.currentProvinceId
|
|
);
|
|
|
|
// ที่อยู่ปัจจุบันถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
|
|
if (
|
|
addressData.value.currentProvinceId == "" ||
|
|
addressData.value.currentProvinceId ==
|
|
"00000000-0000-0000-0000-000000000000" ||
|
|
!checkCurrentProvinceId
|
|
) {
|
|
currentAddress.subDistrictId = "";
|
|
currentAddress.zipCode = "";
|
|
currentAddress.districtId = "";
|
|
} else {
|
|
currentAddress.provinceId = addressData.value.currentProvinceId;
|
|
currentAddress.zipCode = addressData.value.currentZipCode;
|
|
|
|
await fetchDistrict(addressData.value.currentProvinceId, "2");
|
|
if (
|
|
addressData.value.currentDistrictId != null &&
|
|
addressData.value.currentDistrictId !=
|
|
"00000000-0000-0000-0000-000000000000"
|
|
) {
|
|
await fetchSubDistrict(addressData.value.currentDistrictId, "2");
|
|
}
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {});
|
|
};
|
|
|
|
// ดึงข้อมูลอำเภอ
|
|
const fetchDistrict = async (id: string | null, position: string) => {
|
|
if (id != null && id != "") {
|
|
await http
|
|
.get(config.API.orgProvince + `/${id}`)
|
|
.then(async (res) => {
|
|
const data = res.data.result.districts;
|
|
let option: optionData[] = [];
|
|
data.map((r: any) => {
|
|
option.push({ id: r.id, name: r.name });
|
|
});
|
|
if (position == "1") {
|
|
Ops.value.districtOps = option;
|
|
OpsFilter.value.districtOps = option;
|
|
|
|
// ที่อยู่ เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
|
|
const checkRegistDistrictId = option.find(
|
|
(e: any) => e.id === addressData.value.registDistrictId
|
|
);
|
|
|
|
if (checkRegistDistrictId) {
|
|
registAddress.districtId = addressData.value.registDistrictId;
|
|
}
|
|
} else {
|
|
Ops.value.districtCOps = option;
|
|
OpsFilter.value.districtCOps = option;
|
|
|
|
// ที่อยู่ปัจจุบัน เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
|
|
const checkCurrentDistrictId = await option.find(
|
|
(e: any) => e.id === addressData.value.currentDistrictId
|
|
);
|
|
if (checkCurrentDistrictId) {
|
|
currentAddress.districtId = addressData.value.currentDistrictId;
|
|
}
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {});
|
|
}
|
|
};
|
|
|
|
// ดึงข้อมูลตำบล
|
|
const fetchSubDistrict = async (id: string | null, position: string) => {
|
|
if (id != null && id != "") {
|
|
await http
|
|
.get(config.API.orgDistrict + `/${id}`)
|
|
.then(async (res) => {
|
|
const data = res.data.result.subDistricts;
|
|
let option: zipCodeOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({
|
|
id: r.id,
|
|
name: r.name,
|
|
zipCode: r.zipCode,
|
|
});
|
|
});
|
|
if (position == "1") {
|
|
Ops.value.subdistrictOps = option;
|
|
OpsFilter.value.subdistrictOps = option;
|
|
|
|
// ที่อยู่ เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
|
|
const checkRegistSubDistrictId = await option.find(
|
|
(e: any) => e.id === addressData.value.registSubDistrictId
|
|
);
|
|
if (checkRegistSubDistrictId) {
|
|
registAddress.subDistrictId = addressData.value.registSubDistrictId;
|
|
}
|
|
} else {
|
|
Ops.value.subdistrictCOps = option;
|
|
OpsFilter.value.subdistrictCOps = option;
|
|
|
|
// ที่อยู่ปัจจุบัน เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
|
|
const checkCurrentSubDistrictId = await option.find(
|
|
(e: any) => e.id === addressData.value.currentSubDistrictId
|
|
);
|
|
if (checkCurrentSubDistrictId) {
|
|
currentAddress.subDistrictId =
|
|
addressData.value.currentSubDistrictId;
|
|
}
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
};
|
|
|
|
const changeBtn = async () => {
|
|
if (edit.value == true) {
|
|
if (props.statusEdit === true) {
|
|
props.notiNoEdit();
|
|
} else {
|
|
emit("update:statusEdit", true);
|
|
}
|
|
} else {
|
|
emit("update:statusEdit", false);
|
|
}
|
|
};
|
|
|
|
const getClass = (val: boolean) => {
|
|
return {
|
|
"full-width inputgreen cursor-pointer": val,
|
|
"full-width cursor-pointer": !val,
|
|
};
|
|
};
|
|
|
|
function checkEdit() {
|
|
onEdit.value = true;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-card class="col-12 q-px-lg q-py-md q-mt-md no-border">
|
|
<q-form ref="myform" greedy @submit.prevent @validation-success="editData">
|
|
<HeaderTop
|
|
v-model:edit="edit"
|
|
header="ข้อมูลที่อยู่"
|
|
icon="mdi-map-marker"
|
|
:history="false"
|
|
:changeBtn="changeBtn"
|
|
:disable="statusEdit"
|
|
:cancel="refreshData"
|
|
/>
|
|
|
|
<div class="row col-12 items-top q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
<div class="col-xs-12">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
type="textarea"
|
|
autogrow
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="addressData.registAddress"
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
|
|
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
|
|
@update:modelValue="checkEdit"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-select
|
|
:hide-dropdown-icon="!edit"
|
|
hide-bottom-space
|
|
:class="getClass(edit)"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
v-model="registAddress.provinceId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.provinceOps"
|
|
option-value="id"
|
|
:label="`${'จังหวัด'}`"
|
|
@update:model-value="(value: string) => selectProvince(value, '1')"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-select
|
|
:hide-dropdown-icon="!edit"
|
|
hide-bottom-space
|
|
:class="getClass(edit)"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
v-model="registAddress.districtId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.districtOps"
|
|
option-value="id"
|
|
:label="`${'เขต / อำเภอ'}`"
|
|
@update:model-value="(value: string) => selectDistrict(value, '1')"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'districtOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-select
|
|
:hide-dropdown-icon="!edit"
|
|
hide-bottom-space
|
|
:class="getClass(edit)"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
v-model="registAddress.subDistrictId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.subdistrictOps"
|
|
option-value="id"
|
|
:label="`${'แขวง / ตำบล '}`"
|
|
@update:model-value="(value: string) => selectSubDistrict(value, '1')"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
dense
|
|
lazy-rules
|
|
readonly
|
|
borderless
|
|
v-model="registAddress.zipCode"
|
|
:style="!edit ? '' : 'padding:0 12px;'"
|
|
:label="`${'รหัสไปรษณีย์'}`"
|
|
/>
|
|
</div>
|
|
<div class="col-12 q-pt-lg"><q-separator /></div>
|
|
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
|
|
<label class="text-bold"
|
|
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
|
|
>
|
|
<q-radio
|
|
v-model="addressData.registSame"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="1"
|
|
label="ใช่"
|
|
dense
|
|
:disable="!edit"
|
|
@update:modelValue="checkEdit"
|
|
/>
|
|
<q-radio
|
|
v-model="addressData.registSame"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
val="0"
|
|
label="ไม่"
|
|
dense
|
|
@update:modelValue="checkEdit"
|
|
:disable="!edit"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-12" v-if="addressData.registSame == '0'">
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
type="textarea"
|
|
@update:modelValue="checkEdit"
|
|
autogrow
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
v-model="addressData.currentAddress"
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
|
|
:label="`${'ที่อยู่ปัจจุบัน'}`"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-3 col-md-3"
|
|
v-if="addressData.registSame == '0'"
|
|
>
|
|
<q-select
|
|
:hide-dropdown-icon="!edit"
|
|
hide-bottom-space
|
|
:class="getClass(edit)"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
v-model="currentAddress.provinceId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.provinceOps"
|
|
option-value="id"
|
|
:label="`${'จังหวัด'}`"
|
|
@update:model-value="(value: string) => selectProvince(value, '2')"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-3 col-md-3"
|
|
v-if="addressData.registSame == '0'"
|
|
>
|
|
<q-select
|
|
:hide-dropdown-icon="!edit"
|
|
hide-bottom-space
|
|
:class="getClass(edit)"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
v-model="currentAddress.districtId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.districtCOps"
|
|
option-value="id"
|
|
:label="`${'เขต / อำเภอ'}`"
|
|
@update:model-value="(value: string) => selectDistrict(value, '2')"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'districtCOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-3 col-md-3"
|
|
v-if="addressData.registSame == '0'"
|
|
>
|
|
<q-select
|
|
:hide-dropdown-icon="!edit"
|
|
hide-bottom-space
|
|
:class="getClass(edit)"
|
|
:readonly="!edit"
|
|
:borderless="!edit"
|
|
:rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
|
|
:outlined="edit"
|
|
dense
|
|
lazy-rules
|
|
v-model="currentAddress.subDistrictId"
|
|
emit-value
|
|
map-options
|
|
option-label="name"
|
|
:options="Ops.subdistrictCOps"
|
|
option-value="id"
|
|
:label="`${'แขวง / ตำบล '}`"
|
|
@update:model-value="(value: string) => selectSubDistrict(value, '2')"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="(inputValue: string,
|
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictCOps'
|
|
)"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-3 col-md-3"
|
|
v-if="addressData.registSame == '0'"
|
|
>
|
|
<q-input
|
|
:class="getClass(edit)"
|
|
hide-bottom-space
|
|
dense
|
|
lazy-rules
|
|
readonly
|
|
borderless
|
|
v-model="currentAddress.zipCode"
|
|
:style="!edit ? '' : 'padding:0 12px;'"
|
|
:label="`${'รหัสไปรษณีย์'}`"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</template>
|