ปรับ UI โครงสร้าง
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
88041a1974
commit
8c1bfb7a75
6 changed files with 237 additions and 111 deletions
|
|
@ -9,6 +9,7 @@ import type {
|
|||
DataOption,
|
||||
} from "@/modules/02_organizationalNew/interface/index/Main";
|
||||
|
||||
const level = defineModel<string>("orgLevel", { required: true });
|
||||
const props = defineProps({
|
||||
modal: Boolean,
|
||||
close: Function,
|
||||
|
|
@ -18,35 +19,46 @@ const $q = useQuasar();
|
|||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm } = mixin;
|
||||
|
||||
const ocLevelOp = ref<DataOption[]>([]);
|
||||
const orgLevelOptionMain = ref<DataOption[]>([
|
||||
{ name: "ระดับสำนัก", id: "DEPARTMENT" },
|
||||
{
|
||||
name: "ระดับกอง/สำนักงาน/ส่วนราชการ/โรงพยาบาล/เทียบเท่ากอง",
|
||||
id: "OFFICE",
|
||||
},
|
||||
{ name: "ระดับส่วน/กลุ่มภารกิจ", id: "DIVISION" },
|
||||
{ name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
|
||||
]);
|
||||
|
||||
const ocNameRef = ref<Object | null>(null);
|
||||
const shortNameRef = ref<Object | null>(null);
|
||||
const ocNoRef = ref<Object | null>(null);
|
||||
const ocLevelRef = ref<Object | null>(null);
|
||||
const telOutRef = ref<Object | null>(null);
|
||||
const telInRef = ref<Object | null>(null);
|
||||
const telRef = ref<Object | null>(null);
|
||||
const orgLevelOption = ref<DataOption[]>([]);
|
||||
|
||||
const orgNameRef = ref<Object | null>(null);
|
||||
const orgShortNameRef = ref<Object | null>(null);
|
||||
const orgCodeRef = ref<Object | null>(null);
|
||||
const orgPhoneExRef = ref<Object | null>(null);
|
||||
const orgPhoneInRef = ref<Object | null>(null);
|
||||
const orgFaxRef = ref<Object | null>(null);
|
||||
const orgLevelRef = ref<Object | null>(null);
|
||||
|
||||
const formData = reactive<FormDataAgency>({
|
||||
ocName: "",
|
||||
shortName: "",
|
||||
ocNo: "",
|
||||
ocLevel: "",
|
||||
telOut: "",
|
||||
telIn: "",
|
||||
tel: "",
|
||||
orgName: "",
|
||||
orgShortName: "",
|
||||
orgCode: "",
|
||||
orgPhoneEx: "",
|
||||
orgPhoneIn: "",
|
||||
orgFax: "",
|
||||
orgRevisionId: "",
|
||||
orgLevel: "",
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const objectComplaintsRef: FormAgencyRef = {
|
||||
ocName: ocNameRef,
|
||||
shortName: shortNameRef,
|
||||
ocNo: ocNoRef,
|
||||
ocLevel: ocLevelRef,
|
||||
telOut: telOutRef,
|
||||
telIn: telInRef,
|
||||
tel: telRef,
|
||||
orgName: orgNameRef,
|
||||
orgShortName: orgShortNameRef,
|
||||
orgCode: orgCodeRef,
|
||||
orgPhoneEx: orgPhoneExRef,
|
||||
orgPhoneIn: orgPhoneInRef,
|
||||
orgFax: orgFaxRef,
|
||||
orgLevel: orgLevelRef,
|
||||
};
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
|
|
@ -70,7 +82,7 @@ function validateForm() {
|
|||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
console.log(formData)
|
||||
console.log(formData);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -78,16 +90,13 @@ watch(
|
|||
() => props.modal,
|
||||
() => {
|
||||
if (props.modal === true) {
|
||||
ocLevelOp.value = [
|
||||
{
|
||||
id: "id1",
|
||||
name: "id1",
|
||||
},
|
||||
{
|
||||
id: "id2",
|
||||
name: "id2",
|
||||
},
|
||||
];
|
||||
if (level.value === "DEPARTMENT") {
|
||||
formData.orgLevel = level.value;
|
||||
orgLevelOption.value = orgLevelOptionMain.value;
|
||||
} else {
|
||||
orgLevelOption.value = orgLevelOptionMain.value.splice(1, 4);
|
||||
formData.orgLevel = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -104,8 +113,8 @@ watch(
|
|||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.ocName"
|
||||
ref="ocNameRef"
|
||||
v-model="formData.orgName"
|
||||
ref="orgNameRef"
|
||||
dense
|
||||
outlined
|
||||
for="#ocName"
|
||||
|
|
@ -116,8 +125,8 @@ watch(
|
|||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
v-model="formData.shortName"
|
||||
ref="shortNameRef"
|
||||
v-model="formData.orgShortName"
|
||||
ref="orgShortNameRef"
|
||||
dense
|
||||
outlined
|
||||
for="#shortName"
|
||||
|
|
@ -128,8 +137,8 @@ watch(
|
|||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
v-model="formData.ocNo"
|
||||
ref="ocNoRef"
|
||||
v-model="formData.orgCode"
|
||||
ref="orgCodeRef"
|
||||
dense
|
||||
outlined
|
||||
for="#ocNo"
|
||||
|
|
@ -140,8 +149,9 @@ watch(
|
|||
</div>
|
||||
<div class="col-4">
|
||||
<q-select
|
||||
:readonly="level === 'DEPARTMENT'"
|
||||
for="#ocLevel"
|
||||
ref="ocLevelRef"
|
||||
ref="orgLevelRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
|
|
@ -149,8 +159,8 @@ watch(
|
|||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="formData.ocLevel"
|
||||
:options="ocLevelOp"
|
||||
v-model="formData.orgLevel"
|
||||
:options="orgLevelOption"
|
||||
label="ระดับของหน่วยงาน"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกระดับของหน่วยงาน'}`]"
|
||||
lazy-rules
|
||||
|
|
@ -158,8 +168,8 @@ watch(
|
|||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.telOut"
|
||||
ref="telOutRef"
|
||||
v-model="formData.orgPhoneEx"
|
||||
ref="orgPhoneExRef"
|
||||
dense
|
||||
outlined
|
||||
for="#telOut"
|
||||
|
|
@ -174,8 +184,8 @@ watch(
|
|||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.telIn"
|
||||
ref="telInRef"
|
||||
v-model="formData.orgPhoneIn"
|
||||
ref="orgPhoneInRef"
|
||||
dense
|
||||
outlined
|
||||
for="#telIn"
|
||||
|
|
@ -189,8 +199,8 @@ watch(
|
|||
</div>
|
||||
<div class="col-4">
|
||||
<q-input
|
||||
v-model="formData.tel"
|
||||
ref="telRef"
|
||||
v-model="formData.orgFax"
|
||||
ref="orgFaxRef"
|
||||
dense
|
||||
outlined
|
||||
for="#tel"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import type {
|
|||
FormDataNewStructure,
|
||||
FormNewStructureRef,
|
||||
DataOption,
|
||||
HistoryType,
|
||||
} from "@/modules/02_organizationalNew/interface/index/Main";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
|
@ -22,6 +23,7 @@ const { dialogConfirm, showLoader, success, hideLoader, messageError } =
|
|||
|
||||
const modal = defineModel<boolean>("newStructure", { required: true });
|
||||
const status = defineModel<boolean>("status", { required: true });
|
||||
const type = defineModel<string>("type", { default: "NEW" });
|
||||
|
||||
const typeOp = ref<DataOption[]>([
|
||||
{
|
||||
|
|
@ -41,19 +43,25 @@ const typeOp = ref<DataOption[]>([
|
|||
name: "ทำสำเนาโครงสร้าง ตำแหน่ง และคนครอง",
|
||||
},
|
||||
]);
|
||||
const orgRevisionId = ref<string>("");
|
||||
const orgRevisionOpMain = ref<DataOption[]>([]);
|
||||
const orgRevisionOp = ref<DataOption[]>([]);
|
||||
|
||||
const orgRevisionNameRef = ref<Object | null>(null);
|
||||
const typeRef = ref<Object | null>(null);
|
||||
const orgRevisionIdRef = ref<Object | null>(null);
|
||||
|
||||
const formData = reactive<FormDataNewStructure>({
|
||||
orgRevisionId: "",
|
||||
orgRevisionName: "",
|
||||
type: "",
|
||||
typeDraft: "",
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const objectRef: FormNewStructureRef = {
|
||||
orgRevisionName: orgRevisionNameRef,
|
||||
type: typeRef,
|
||||
orgRevisionId: orgRevisionIdRef,
|
||||
};
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
|
|
@ -77,31 +85,75 @@ function validateForm() {
|
|||
/** ฟังชั่น บันทึก */
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
// http
|
||||
// .post(config.API.createOrganization, formData)
|
||||
// .then(() => {
|
||||
status.value = true;
|
||||
store.typeOrganizational = "draft";
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// messageError($q, err);
|
||||
// })
|
||||
// .finally(() => {});
|
||||
|
||||
console.log(formData);
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.createOrganization, formData)
|
||||
.then(() => {
|
||||
status.value = true;
|
||||
store.typeOrganizational = "draft";
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
modal.value = await false;
|
||||
await close();
|
||||
await hideLoader();
|
||||
});
|
||||
});
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
function close() {
|
||||
modal.value = false;
|
||||
formData.orgRevisionId = "";
|
||||
formData.orgRevisionName = "";
|
||||
formData.typeDraft = "";
|
||||
}
|
||||
|
||||
async function fetchOrgRevision() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.organizationHistoryNew)
|
||||
.then((res) => {
|
||||
const data = res.data.result.filter(
|
||||
(e: HistoryType) => e.orgRevisionIsDraft === false
|
||||
);
|
||||
if (data) {
|
||||
const listOption = data.map((e: HistoryType) => ({
|
||||
id: e.orgRevisionId,
|
||||
name: e.orgRevisionName,
|
||||
}));
|
||||
orgRevisionOpMain.value = listOption;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "orgRevisionId":
|
||||
update(() => {
|
||||
orgRevisionOp.value = orgRevisionOpMain.value.filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => modal.value,
|
||||
() => {
|
||||
modal.value && !status.value && (formData.type = "NEW");
|
||||
modal.value && (formData.typeDraft = type.value);
|
||||
modal.value && type.value !== "NEW" && fetchOrgRevision();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
@ -131,7 +183,7 @@ watch(
|
|||
<q-select
|
||||
for="#type"
|
||||
ref="typeRef"
|
||||
:readonly="!status"
|
||||
readonly
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
|
|
@ -139,13 +191,43 @@ watch(
|
|||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="formData.type"
|
||||
v-model="formData.typeDraft"
|
||||
:options="typeOp"
|
||||
label="ประเภทการโคลน"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทการโคลน'}`]"
|
||||
lazy-rules
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6" v-if="type !== 'NEW'">
|
||||
<q-select
|
||||
for="#orgRevisionId"
|
||||
ref="orgRevisionIdRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
v-model="formData.orgRevisionId"
|
||||
:options="orgRevisionOp"
|
||||
label="เลือกโครงสร้าง"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกโครงการสร้าง'}`]"
|
||||
lazy-rules
|
||||
use-input
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'orgRevisionId'
|
||||
) "
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey-5">
|
||||
ไม่พบข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ const expanded = ref<Array<any>>([]);
|
|||
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
|
||||
const noData = ref<string>("ไม่มีข้อมูล");
|
||||
const selected = ref("");
|
||||
const orgLevel = ref<string>("");
|
||||
|
||||
const filterData = (node: any, filter: string) => {
|
||||
// ให้ทาง API ค้นหาให้
|
||||
|
|
@ -225,8 +226,9 @@ function searchAndReplace(
|
|||
}
|
||||
|
||||
const dialogAgency = ref<boolean>(false);
|
||||
function onClickAgency() {
|
||||
function onClickAgency(level: string) {
|
||||
dialogAgency.value = !dialogAgency.value;
|
||||
orgLevel.value = level;
|
||||
}
|
||||
|
||||
watch(
|
||||
|
|
@ -277,7 +279,7 @@ onMounted(async () => {
|
|||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="onClickAgency"
|
||||
@click="onClickAgency('DEPARTMENT')"
|
||||
>
|
||||
<q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
|
||||
</q-btn>
|
||||
|
|
@ -347,6 +349,8 @@ onMounted(async () => {
|
|||
@click="
|
||||
item.val === 'EDIT'
|
||||
? edit(prop.node.organizationId)
|
||||
: item.val === 'ADD'
|
||||
? onClickAgency('TEST')
|
||||
: null
|
||||
"
|
||||
>
|
||||
|
|
@ -370,7 +374,12 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<DialogAgency :modal="dialogAgency" :close="onClickAgency" />
|
||||
<!-- เพิ่มหน่วยงาน -->
|
||||
<DialogAgency
|
||||
:modal="dialogAgency"
|
||||
:close="onClickAgency"
|
||||
v-model:orgLevel="orgLevel"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue