997 lines
32 KiB
Vue
997 lines
32 KiB
Vue
<template>
|
|
<div>
|
|
<div class="row col-12 items-center q-pt-md">
|
|
<div class="bg-white q-px-sm topCard">
|
|
<span class="text-weight-medium">เพิ่มหน่วยงาน</span>
|
|
<q-btn
|
|
flat
|
|
color="primary"
|
|
size="12px"
|
|
icon="mdi-plus"
|
|
dense
|
|
class="q-mx-sm"
|
|
@click="addOrganizationItem()"
|
|
>
|
|
<q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
<!-- การ์ดเพิ่มหน่วยงาน-->
|
|
<q-form ref="myForm">
|
|
<q-card bordered flat>
|
|
<div class="overScroll q-py-sm">
|
|
<q-card
|
|
flat
|
|
class="bg-grey-2 q-pa-sm q-ma-sm row col-12 items-start"
|
|
v-for="(item, index) in organizations"
|
|
:key="index"
|
|
>
|
|
<div>
|
|
<q-avatar
|
|
class="q-mr-sm"
|
|
size="25px"
|
|
color="grey-3"
|
|
text-color="grey-9"
|
|
>{{ index + 1 }}</q-avatar
|
|
>
|
|
</div>
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="red"
|
|
size="10px"
|
|
class="q-mr-sm"
|
|
icon="mdi-trash-can-outline"
|
|
dense
|
|
@click="deleteOrgItem(item)"
|
|
/>
|
|
<!-- @update:model-value="updateGoverment" -->
|
|
<div class="col-11 row q-col-gutter-xs">
|
|
<selector
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="item.organizationOrganizationId"
|
|
:options="organizationOri"
|
|
label="หน่วยงาน"
|
|
class="col-xs-12 col-sm-6 col-md-6"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '1')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
|
|
/>
|
|
<selector
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="item.organizationAgencyCode"
|
|
:options="organizationAgencyCode"
|
|
label="รหัสหน่วยงาน"
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterCodeSelector(inputValue, doneFn, '2',item)
|
|
"
|
|
@update:model-value="(value:any) => updateGovernmentCode(value, item)"
|
|
option-label="agencyCode"
|
|
option-value="agencyCode"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสหน่วยงาน'}`]"
|
|
/>
|
|
|
|
<selector
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="item.organizationGovernmentCode"
|
|
:options="item.organizationGovernmentCodeOption"
|
|
label="รหัสส่วนราชการ"
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterCodeSelector(inputValue, doneFn, '3',item)
|
|
"
|
|
@update:model-value="(value:any) => updateAgencyCode(value, item)"
|
|
option-label="governmentCode"
|
|
option-value="governmentCode"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
|
|
/>
|
|
|
|
<q-input
|
|
hide-bottom-space
|
|
dense
|
|
readonly
|
|
outlined
|
|
:modelValue="item.organizationShortName.toString() ?? ''"
|
|
label="ชื่อย่อหน่วยงาน"
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
/>
|
|
<q-input
|
|
dense
|
|
outlined
|
|
v-model="item.agency"
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
label="เลขที่หน่วยงาน"
|
|
/>
|
|
<q-input
|
|
dense
|
|
outlined
|
|
v-model="item.government"
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
label="เลขที่ส่วนราชการ"
|
|
/>
|
|
<q-input
|
|
dense
|
|
outlined
|
|
v-model="item.department"
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
label="เลขที่ฝ่าย/ส่วน"
|
|
/>
|
|
<q-input
|
|
dense
|
|
outlined
|
|
v-model="item.pile"
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
label="เลขที่กอง"
|
|
/>
|
|
<selector
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="item.organizationTypeId"
|
|
:options="organizationType"
|
|
label="ประเภทหน่วยงาน"
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '6')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
|
|
<selector
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="item.organizationLevelId"
|
|
:options="organizationLevel"
|
|
label="ระดับหน่วยงาน"
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '7')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
:rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
|
|
/>
|
|
<selector
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="item.organizationAgencyId"
|
|
:options="organizationAgency"
|
|
label="หน่วยงานต้นสังกัด"
|
|
class="col-xs-12 col-sm-4 col-md-4"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '1')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/>
|
|
<selector
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="item.organizationGovernmentAgencyId"
|
|
:options="organizationGovernmentAgency"
|
|
label="ส่วนราชการต้นสังกัด"
|
|
class="col-xs-12 col-sm-6 col-md-6"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '1')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/>
|
|
<q-input
|
|
dense
|
|
outlined
|
|
v-model="item.organizationOrder"
|
|
class="col-xs-12 col-sm-2 col-md-2"
|
|
type="number"
|
|
label="ลำดับผังโครงสร้าง"
|
|
/>
|
|
<selector
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="item.organizationExternalPhoneId"
|
|
:options="organizationTelExternal"
|
|
label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
|
|
class="col-xs-12 col-sm-4 col-md-4"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '8')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/>
|
|
<selector
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="item.organizationInternalPhoneId"
|
|
:options="organizationTelInternal"
|
|
label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
|
|
class="col-xs-12 col-sm-4 col-md-4"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '9')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/>
|
|
<selector
|
|
hide-bottom-space
|
|
dense
|
|
outlined
|
|
v-model="item.organizationFaxId"
|
|
:options="organizationFax"
|
|
label="หมายเลขโทรสาร"
|
|
class="col-xs-12 col-sm-4 col-md-4"
|
|
use-input
|
|
input-debounce="0"
|
|
@filter="
|
|
(inputValue:any, doneFn:Function) =>
|
|
filterSelector(inputValue, doneFn, '10')
|
|
"
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
clearable
|
|
/>
|
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
|
<q-input
|
|
:class="getClass(true)"
|
|
hide-bottom-space
|
|
:outlined="true"
|
|
dense
|
|
lazy-rules
|
|
:readonly="false"
|
|
:borderless="false"
|
|
v-model="item.organizationUserNote"
|
|
:label="`${'หน้าที่รับผิดชอบ'}`"
|
|
type="textarea"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</q-card>
|
|
</q-form>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, defineAsyncComponent, watch, onMounted } from "vue";
|
|
import type { PropType } from "vue";
|
|
import { useQuasar, QForm } from "quasar";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import type {
|
|
DataOption,
|
|
OrganizaOption,
|
|
GovermentOption,
|
|
} from "../../interface/index/Main";
|
|
import { log } from "console";
|
|
|
|
// import { organizationSet } from "../interface/index/Main";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
const props = defineProps({
|
|
organizprops: Array as PropType<OrganizaOption[]>,
|
|
formprops: QForm as PropType<QForm | null>,
|
|
});
|
|
|
|
const emit = defineEmits(["update:organizprops", "update:formprops"]);
|
|
|
|
const mixin = useCounterMixin();
|
|
const { showLoader, hideLoader } = mixin;
|
|
|
|
const $q = useQuasar(); // show dialog
|
|
const myForm = ref<QForm | null>(null);
|
|
|
|
// const organizations = ref<OrganizaOption[]>([]);
|
|
const organizations = ref<OrganizaOption[]>([]);
|
|
emit("update:organizprops", organizations.value);
|
|
// emit("update:formprops", myForm.value);
|
|
|
|
watch(myForm, (form: QForm | null, prevForm: QForm | null) => {
|
|
emit("update:formprops", form);
|
|
});
|
|
|
|
const organizationFax = ref<DataOption[]>([]);
|
|
const organizationTelInternal = ref<DataOption[]>([]);
|
|
const organizationTelExternal = ref<DataOption[]>([]);
|
|
const organizationFaxFilter = ref<DataOption[]>([]);
|
|
const organizationTelInternalFilter = ref<DataOption[]>([]);
|
|
const organizationTelExternalFilter = ref<DataOption[]>([]);
|
|
|
|
const organizationGovernmentAgency = ref<DataOption[]>([]);
|
|
const organizationGovernmentAgencyFilter = ref<DataOption[]>([]);
|
|
const organizationAgency = ref<DataOption[]>([]);
|
|
const organizationAgencyFilter = ref<DataOption[]>([]);
|
|
const organizationType = ref<DataOption[]>([]);
|
|
const organizationTypeFilter = ref<DataOption[]>([]);
|
|
|
|
const organizationLevel = ref<DataOption[]>([]);
|
|
const organizationLevelFilter = ref<DataOption[]>([]);
|
|
const organizationOri = ref<DataOption[]>([]);
|
|
const organizationOriFilter = ref<DataOption[]>([]);
|
|
const organizationGovernmentCode = ref<GovermentOption[]>([]);
|
|
const organizationGovernmentCodeFilter = ref<GovermentOption[]>([]);
|
|
const organizationAgencyCode = ref<GovermentOption[]>([]);
|
|
const organizationAgencyCodeFilter = ref<GovermentOption[]>([]);
|
|
|
|
onMounted(async () => {
|
|
hideLoader();
|
|
await fetchOrganizationOri();
|
|
await fetchOrganizationAgencyCode();
|
|
await fetchOrganizationGovernmentCode();
|
|
|
|
await fetchOrganizationAgency();
|
|
await fetchOrganizationGovernmentAgency();
|
|
await fetchOrganizationType();
|
|
await fetchOrganizationLevel();
|
|
|
|
await fetchOrganizationFax();
|
|
await fetchOrganizationTelExternal();
|
|
await fetchOrganizationTelInternal();
|
|
});
|
|
|
|
/**
|
|
* หน่วยงาน
|
|
*/
|
|
const fetchOrganizationOri = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.organization)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
organizationOri.value = option;
|
|
organizationOriFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
/**
|
|
* รหัสหน่วยงาน
|
|
*/
|
|
const fetchOrganizationAgencyCode = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.organizationCode)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
// console.log(data);
|
|
let option: GovermentOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({
|
|
id: r.id.toString(),
|
|
governmentCode: r.governmentCode.toString(),
|
|
agencyCode: r.agencyCode.toString(),
|
|
shortName: r.name.toString(),
|
|
});
|
|
});
|
|
organizationAgencyCode.value = option;
|
|
organizationAgencyCodeFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
/**
|
|
* รหัสส่วนราชการ
|
|
*/
|
|
const fetchOrganizationGovernmentCode = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.organizationShortName)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
// console.log(data);
|
|
let option: GovermentOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({
|
|
id: r.id.toString(),
|
|
governmentCode: r.governmentCode.toString(),
|
|
agencyCode: r.agencyCode.toString(),
|
|
shortName: r.name.toString(),
|
|
});
|
|
});
|
|
organizationGovernmentCode.value = option;
|
|
organizationGovernmentCodeFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
// /**
|
|
// * ชื่อย่อหน่วยงาน
|
|
// */
|
|
// const fetchOrganizationShortName = async () => {
|
|
// showLoader();
|
|
// await http
|
|
// .get(config.API.organizationShortName)
|
|
// .then((res) => {
|
|
// const data = res.data.result;
|
|
// // console.log(data);
|
|
// let option: GovermentOption[] = [];
|
|
// data.map((r: any) => {
|
|
// option.push({
|
|
// id: r.id.toString(),
|
|
// name: r.governmentCode.toString(),
|
|
// agencyCode: r.agencyCode.toString(),
|
|
// shortName: r.name.toString(),
|
|
// });
|
|
// });
|
|
// organizationShortName.value = option;
|
|
// organizationShortNameFilter.value = option;
|
|
// })
|
|
// .catch((e) => {
|
|
// console.log(e);
|
|
// })
|
|
// .finally(() => {
|
|
// hideLoader();
|
|
// });
|
|
// };
|
|
/**
|
|
* หน่วยงานต้นสังกัด
|
|
*/
|
|
const fetchOrganizationAgency = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({
|
|
id: r.organizationId.toString(),
|
|
name: r.organizationName.toString(),
|
|
});
|
|
});
|
|
organizationAgency.value = option;
|
|
organizationAgencyFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
/**
|
|
* ส่วนราชการต้นสังกัด
|
|
*/
|
|
const fetchOrganizationGovernmentAgency = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({
|
|
id: r.organizationId.toString(),
|
|
name: r.organizationName.toString(),
|
|
});
|
|
});
|
|
organizationGovernmentAgency.value = option;
|
|
organizationGovernmentAgencyFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
/**
|
|
* ประเภทหน่วยงาน
|
|
*/
|
|
const fetchOrganizationType = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.organizationType)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
organizationType.value = option;
|
|
organizationTypeFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
/**
|
|
* ระดับหน่วยงาน
|
|
*/
|
|
const fetchOrganizationLevel = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.organizationLevel)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
organizationLevel.value = option;
|
|
organizationLevelFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
/**
|
|
* เบอร์ติดต่อภายใน
|
|
*/
|
|
const fetchOrganizationTelInternal = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.organizationTelInternal)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
organizationTelInternal.value = option;
|
|
organizationTelInternalFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
/**
|
|
* เบอร์ติดต่อภายนอก
|
|
*/
|
|
const fetchOrganizationTelExternal = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.organizationTelExternal)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
organizationTelExternal.value = option;
|
|
organizationTelExternalFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
/**
|
|
* เบอร์โทรสาร
|
|
*/
|
|
const fetchOrganizationFax = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.organizationFax)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
let option: DataOption[] = [];
|
|
data.map((r: any) => {
|
|
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
});
|
|
organizationFax.value = option;
|
|
organizationFaxFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
|
|
/**Delete positionSet item from positions
|
|
* ลบตำแหน่งตัวที่กดลบ
|
|
* @param val data ใน item ที่จะลบ
|
|
*/
|
|
const deleteOrgItem = (val: OrganizaOption) => {
|
|
//Check if val is completed before delete
|
|
//จะใช้ filter ต้องเป็น array เลยต้องจับใส่ [val]
|
|
|
|
if (!isEmptyOrganization([val])) {
|
|
$q.dialog({
|
|
title: "ยืนยันการลบข้อมูล",
|
|
message: "มีข้อมูลอยู่ หากต้องการลบกด ตกลง",
|
|
cancel: true,
|
|
persistent: true,
|
|
})
|
|
.onOk(() => {
|
|
// console.log(">>>> OK");
|
|
organizations.value = organizations.value.filter(
|
|
(x: object) => x !== val
|
|
); //คำสั่งลบ
|
|
// console.log(positions.value);
|
|
})
|
|
.onCancel(() => {
|
|
// console.log(">>>> Cancel");
|
|
})
|
|
.onDismiss(() => {
|
|
// console.log("I am triggered on both OK and Cancel");
|
|
});
|
|
} else {
|
|
organizations.value = organizations.value.filter((x: object) => x !== val);
|
|
}
|
|
emit("update:organizprops", organizations.value);
|
|
};
|
|
|
|
/** Check if organization is Empty
|
|
* -- return true/false
|
|
* @param items Array of OrganizaOption
|
|
*/
|
|
const isEmptyOrganization = (items: OrganizaOption[]) => {
|
|
const isEmpty = items.map(
|
|
(f: OrganizaOption) =>
|
|
!f.organizationOrganizationId &&
|
|
!f.organizationShortNameId &&
|
|
!f.organizationAgencyId &&
|
|
!f.organizationGovernmentAgencyId &&
|
|
!f.organizationTypeId &&
|
|
!f.organizationLevelId &&
|
|
!f.organizationExternalPhoneId &&
|
|
!f.organizationInternalPhoneId &&
|
|
!f.organizationFaxId
|
|
);
|
|
// ถ้าว่างเป็น true
|
|
// ถ้ามี data false
|
|
return isEmpty[0];
|
|
};
|
|
|
|
/**Add new positionSet item into positions
|
|
*กรอกข้อมูลสำคัญครบถึงเพิ่ม ตำแหน่ง ใหม่ได้
|
|
*ข้อมูลไม่ครบแสดง Alert เตือนให้รู้เฉยๆ แล้วไม่ให้เพิ่ม
|
|
*/
|
|
const addOrganizationItem = async () => {
|
|
await myForm.value!.validate().then(async (result: boolean) => {
|
|
// console.log(result);
|
|
if (result) {
|
|
// organizations.value.push(JSON.parse(JSON.stringify(organizationSet)));
|
|
organizations.value.push({
|
|
organizationOrganizationId: "", // หน่วยงาน
|
|
organizationShortNameId: "", // Idย่อหน่วยงาน
|
|
organizationShortName: "", // ชื่อย่อหน่วยงาน
|
|
organizationAgencyCode: "", // รหัสหน่วยงาน
|
|
organizationGovernmentCode: "", // รหัสส่วนราชการ
|
|
organizationAgencyId: "", // หน่วยงานต้นสังกัด
|
|
organizationGovernmentAgencyId: "", // ส่วนราชการต้นสังกัด
|
|
organizationTypeId: "", // ประเภทหน่วยงาน
|
|
organizationLevelId: "", //ระดับหน่วยงาน
|
|
organizationInternalPhoneId: "", //เบอร์ติดต่อภายใน
|
|
organizationExternalPhoneId: "", //เบอร์ติดต่อภายนอก
|
|
organizationFaxId: "", //เบอร์โทรสาร
|
|
organizationOrder: 0, // ลำดับผังโครงสร้าง
|
|
organizationUserNote: "", // User Note
|
|
organizationStatusId: "",
|
|
agency: "", // หน่วยงาน
|
|
government: "", // ส่วนราชการ
|
|
department: "", // ฝ่าย/ส่วน
|
|
pile: "", // กอง
|
|
organizationGovernmentCodeOption: organizationGovernmentCode.value,
|
|
organizationGovernmentCodeOptionFilter:
|
|
organizationGovernmentCodeFilter.value,
|
|
isActive: true,
|
|
});
|
|
emit("update:organizprops", organizations.value);
|
|
// console.log(organizations);
|
|
}
|
|
});
|
|
};
|
|
|
|
const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
|
|
let option: GovermentOption[] = [];
|
|
showLoader();
|
|
await http
|
|
.get(config.API.organizationGovernmentCode(val))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
data.map((r: any) => {
|
|
option.push({
|
|
id: r.id.toString(),
|
|
governmentCode: r.governmentCode.toString(),
|
|
agencyCode: r.agencyCode.toString(),
|
|
shortName: r.name.toString(),
|
|
});
|
|
});
|
|
// organizationAgencyCode.value = option;
|
|
// organizationAgencyCodeFilter.value = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
return option;
|
|
};
|
|
|
|
const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
|
|
let option: GovermentOption[] = [];
|
|
showLoader();
|
|
await http
|
|
.get(config.API.organizationAgencyCode(val))
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
data.map((r: any) => {
|
|
option.push({
|
|
id: r.id.toString(),
|
|
governmentCode: r.governmentCode.toString(),
|
|
agencyCode: r.agencyCode.toString(),
|
|
shortName: r.name.toString(),
|
|
});
|
|
});
|
|
item.organizationGovernmentCodeOption = option;
|
|
item.organizationGovernmentCodeOptionFilter = option;
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
return option;
|
|
};
|
|
|
|
/**เมื่อเลือกใหม่
|
|
* q-select ส่งค่ามาให้เองจาก @update:model-value="updateShortName"
|
|
* @param val ค่าตัวที่เลือก
|
|
*/
|
|
const updateAgencyCode = async (val: string, item: OrganizaOption) => {
|
|
let option = await fetchAgencyCode(val, item);
|
|
// organizationAgencyCode.value = option;
|
|
// organizationAgencyCodeFilter.value = option;
|
|
// const find = option.filter((r) => r.governmentCode === val);
|
|
// if (find.length == 1) {
|
|
item.organizationShortName = option[0].shortName.toString();
|
|
item.organizationAgencyCode = option[0].agencyCode.toString();
|
|
item.organizationGovernmentCode = option[0].governmentCode.toString();
|
|
item.organizationShortNameId = option[0].id;
|
|
// } else {
|
|
// item.organizationShortName = "";
|
|
// item.organizationAgencyCode = "";
|
|
// // item.organizationGovernmentCode = "";
|
|
// }
|
|
await fetchGovernmentCode(item.organizationAgencyCode, item);
|
|
};
|
|
|
|
/**เมื่อเลือกใหม่
|
|
* q-select ส่งค่ามาให้เองจาก @update:model-value="updateShortName"
|
|
* @param val ค่าตัวที่เลือก
|
|
*/
|
|
const updateGovernmentCode = async (val: string, item: OrganizaOption) => {
|
|
let option = await fetchGovernmentCode(val, item);
|
|
const find = option.filter((r) => r.agencyCode === val);
|
|
if (find.length == 1) {
|
|
item.organizationShortName = find[0].shortName.toString();
|
|
item.organizationAgencyCode = find[0].agencyCode.toString();
|
|
item.organizationGovernmentCode = find[0].governmentCode.toString();
|
|
item.organizationShortNameId = find[0].id.toString();
|
|
} else {
|
|
item.organizationShortName = "";
|
|
// item.organizationAgencyCode = "";
|
|
item.organizationGovernmentCode = "";
|
|
}
|
|
};
|
|
|
|
const updateNumber = (item: OrganizaOption, newValue: any) => {
|
|
item.organizationOrder = newValue;
|
|
};
|
|
|
|
/**Fuction Filter DropDown
|
|
* q-select ส่งค่ามาให้เองจาก @filter="filterSelector"
|
|
* @param val ค่าตัวพิมพ์ค้นหา
|
|
* @param update ทุกครั้งที่พิมพ์ค่า
|
|
*/
|
|
const filterSelector = (val: any, update: Function, filtername: string) => {
|
|
switch (filtername) {
|
|
case "1":
|
|
update(() => {
|
|
organizationOri.value = organizationOriFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
// case "2":
|
|
// update(() => {
|
|
// organizationAgencyCode.value =
|
|
// organizationAgencyCodeFilter.value.filter(
|
|
// (v: GovermentOption) => v.agencyCode.indexOf(val) > -1
|
|
// );
|
|
// });
|
|
// break;
|
|
// case "3":
|
|
// update(() => {
|
|
// organizationGovernmentCode.value =
|
|
// organizationGovernmentCodeFilter.value.filter(
|
|
// (v: GovermentOption) => v.governmentCode.indexOf(val) > -1
|
|
// );
|
|
// });
|
|
// break;
|
|
case "4":
|
|
update(() => {
|
|
organizationAgency.value = organizationAgencyFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "5":
|
|
update(() => {
|
|
organizationGovernmentAgency.value =
|
|
organizationGovernmentAgencyFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "6":
|
|
update(() => {
|
|
organizationType.value = organizationTypeFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "7":
|
|
update(() => {
|
|
organizationLevel.value = organizationLevelFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "8":
|
|
update(() => {
|
|
organizationTelExternal.value =
|
|
organizationTelExternalFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "9":
|
|
update(() => {
|
|
organizationTelInternal.value =
|
|
organizationTelInternalFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "10":
|
|
update(() => {
|
|
organizationFax.value = organizationFaxFilter.value.filter(
|
|
(v: DataOption) => v.name.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
const filterCodeSelector = (
|
|
val: any,
|
|
update: Function,
|
|
filtername: string,
|
|
item: OrganizaOption
|
|
) => {
|
|
switch (filtername) {
|
|
case "2":
|
|
update(() => {
|
|
organizationAgencyCode.value =
|
|
organizationAgencyCodeFilter.value.filter(
|
|
(v: GovermentOption) => v.agencyCode.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
case "3":
|
|
update(() => {
|
|
item.organizationGovernmentCodeOption =
|
|
item.organizationGovernmentCodeOptionFilter.filter(
|
|
(v: GovermentOption) => v.governmentCode.indexOf(val) > -1
|
|
);
|
|
});
|
|
break;
|
|
}
|
|
};
|
|
|
|
/**class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
|
|
* copy from AddMappingPositions
|
|
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
|
|
*/
|
|
const getClass = (val: boolean) => {
|
|
return {
|
|
"full-width inputgreen cursor-pointer": val,
|
|
"full-width cursor-pointer": !val,
|
|
};
|
|
};
|
|
</script>
|