ปรับui เพิ่มactivepopup
This commit is contained in:
setthawutttty
parent
4a5314cf5f
commit
0a3d99bd07
1 changed files with 81 additions and 120 deletions
|
|
@ -234,10 +234,10 @@ const templateDetail = async () => {
|
|||
};
|
||||
const appointModal = ref<boolean>(false);
|
||||
|
||||
const nodeTree = async (isDraft: boolean) => {
|
||||
const nodeTree = async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.getDraftTreeRoot)
|
||||
.get(config.API.getTreeRoot)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
nodesTree.value = data;
|
||||
|
|
@ -287,7 +287,7 @@ const clickEditRow = () => {
|
|||
};
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width inputgreen cursor-pointer ": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
|
|
@ -371,7 +371,7 @@ placementData.mappingPosition.columns.length == 0
|
|||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
align: "center",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
|
|
@ -391,7 +391,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
{
|
||||
name: "ExamOrder",
|
||||
align: "left",
|
||||
align: "center",
|
||||
label: "ลำดับที่สอบได้",
|
||||
sortable: true,
|
||||
field: "ExamOrder",
|
||||
|
|
@ -422,7 +422,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
{
|
||||
name: "BMAOfficer",
|
||||
align: "left",
|
||||
align: "center",
|
||||
label: "ข้าราชการฯ กทม.",
|
||||
sortable: true,
|
||||
field: "BMAOfficer",
|
||||
|
|
@ -1067,7 +1067,6 @@ onMounted(async () => {
|
|||
// await fetchData();
|
||||
});
|
||||
const fetchChildrenByParentId = async (node: any) => {
|
||||
// console.log(isDraft);
|
||||
console.log("Call API4");
|
||||
showLoader();
|
||||
let request = "";
|
||||
|
|
@ -1094,6 +1093,17 @@ const onLazyLoad = (node: any) => {
|
|||
node.done(node.node.children); //return ค่าให้ q-tree generate children
|
||||
}, 10);
|
||||
};
|
||||
const listKeyId = (data: any) => {
|
||||
const { node } = data;
|
||||
console.log("test", node);
|
||||
posNoId.value = node.positionNum;
|
||||
positionId.value = node.positionName;
|
||||
positionPathSideId.value = node.executivePositionSide;
|
||||
positionTypeId.value = node.positionType;
|
||||
positionLineId.value = node.organizationName;
|
||||
positionLevelId.value = node.positionLevel;
|
||||
return node.keyId;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<q-form ref="myForm">
|
||||
|
|
@ -1146,7 +1156,26 @@ const onLazyLoad = (node: any) => {
|
|||
</div>
|
||||
<div v-else-if="col.name == 'Name'" class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
<p>{{ props.row.fullName }}</p>
|
||||
<div class="row col-12 text-no-wrap items-center">
|
||||
<img
|
||||
v-if="props.row.avatar == null"
|
||||
src="@/assets/avatar_user.jpg"
|
||||
class="col-4 img-info"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
:src="props.row.avatar"
|
||||
class="col-4 img-info"
|
||||
/>
|
||||
<div class="col-4">
|
||||
<div class="text-weight-medium">
|
||||
{{ props.row.fullName }}
|
||||
</div>
|
||||
<div class="text-weight-light">
|
||||
{{ props.row.profileID }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="col.name == 'Unit'" class="table_ellipsis">
|
||||
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
|
||||
|
|
@ -1176,7 +1205,7 @@ const onLazyLoad = (node: any) => {
|
|||
-
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ props.row.examResult }}
|
||||
{{ props.row.UnitGroup }}
|
||||
<p>{{ col.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1357,8 +1386,8 @@ const onLazyLoad = (node: any) => {
|
|||
|
||||
<q-space />
|
||||
</div>
|
||||
<div class="col items-center q-px-xs q-pt-xs ">
|
||||
<div class="text-weight-medium text-grey-7 ">
|
||||
<div class="col items-center q-px-xs q-pt-xs">
|
||||
<div class="text-weight-medium text-grey-7">
|
||||
{{ prop.node.governmentCode }}
|
||||
{{ prop.node.organizationShortName }}
|
||||
</div>
|
||||
|
|
@ -1369,7 +1398,7 @@ const onLazyLoad = (node: any) => {
|
|||
<q-item
|
||||
clickable
|
||||
:active="clickAction === prop.node.keyId"
|
||||
@click="clickAction = '1-1-3'"
|
||||
@click="clickAction = listKeyId(prop)"
|
||||
active-class="my-list-link text-primary text-weight-medium"
|
||||
class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||
>
|
||||
|
|
@ -1490,153 +1519,75 @@ const onLazyLoad = (node: any) => {
|
|||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<selector
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
<q-input
|
||||
disable
|
||||
standout
|
||||
readonly
|
||||
class="custom-input"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="posNoId"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณาเลือกเลขที่ตำแหน่ง'}`,
|
||||
]"
|
||||
:label="`${'เลขที่ตำแหน่ง'}`"
|
||||
@update:modelValue="clickEditRow"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="posNoOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<selector
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
<q-input
|
||||
disable
|
||||
readonly
|
||||
class="custom-input"
|
||||
standout
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionId"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
|
||||
:label="`${'ตำแหน่ง'}`"
|
||||
@update:modelValue="clickEditRow"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="positionOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'2'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<selector
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
<q-input
|
||||
disable
|
||||
readonly
|
||||
class="custom-input"
|
||||
standout
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionPathSideId"
|
||||
:label="`${'ด้าน/สาขา'}`"
|
||||
@update:modelValue="clickEditRow"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="positionSideOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'3'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<selector
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
<q-input
|
||||
disable
|
||||
readonly
|
||||
class="custom-input"
|
||||
standout
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionTypeId"
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,
|
||||
]"
|
||||
:label="`${'ประเภทตำแหน่ง'}`"
|
||||
@update:modelValue="clickEditRow"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="positionTypeOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'4'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<selector
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
<q-input
|
||||
disable
|
||||
readonly
|
||||
class="custom-input"
|
||||
standout
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionLineId"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
|
||||
:label="`${'สายงาน'}`"
|
||||
@update:modelValue="clickEditRow"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="positionLineOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'5'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
||||
<selector
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
<q-input
|
||||
disable
|
||||
readonly
|
||||
class="custom-input"
|
||||
standout
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionLevelId"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
|
||||
:label="`${'ระดับ'}`"
|
||||
@update:modelValue="clickEditRow"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="positionLevelOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'6'
|
||||
) "
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-6 col-md-6"></div>
|
||||
|
|
@ -1869,6 +1820,9 @@ const onLazyLoad = (node: any) => {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-input {
|
||||
font-size: 16px;
|
||||
}
|
||||
.my-list-link {
|
||||
border-radius: 5px;
|
||||
|
||||
|
|
@ -1880,4 +1834,11 @@ const onLazyLoad = (node: any) => {
|
|||
margin-bottom: 0;
|
||||
color: #818181;
|
||||
}
|
||||
.img-info {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue