ปรับui เพิ่มactivepopup

src/modules/05_placement/components/pass/Table.vue

@@ -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="col items-center q-px-xs q-pt-xs">
-                          <div class="text-weight-medium text-grey-7 ">
+                          <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
+                      <q-input
-                        :class="getClass(edit)"
+                        disable
-                        :outlined="edit"
+                        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
+                      <q-input
-                        :class="getClass(edit)"
+                        disable
-                        :outlined="edit"
+                        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
+                      <q-input
-                        :class="getClass(edit)"
+                        disable
-                        :outlined="edit"
+                        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
+                      <q-input
-                        :class="getClass(edit)"
+                        disable
-                        :outlined="edit"
+                        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
+                      <q-input
-                        :class="getClass(edit)"
+                        disable
-                        :outlined="edit"
+                        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
+                      <q-input
-                        :class="getClass(edit)"
+                        disable
-                        :outlined="edit"
+                        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>