API จัดการตำแหน่งติดเงื่อนไข

src/modules/19_condition/components/DialogCondition.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+import type { PropType } from "vue";
+import type { DataPositionCondition } from "@/modules/19_condition/interface/response/Main";
+import type { FormPositionCondition } from "@/modules/19_condition/interface/request/Main";
+
 import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
@@ -15,10 +19,13 @@ const { showLoader, hideLoader, messageError, success, dialogConfirm } =
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   fetchData: { type: Function, required: true },
-  dataCondition: { type: Object, required: true },
+  dataCondition: {
+    type: Object as PropType<DataPositionCondition | undefined>,
+    required: true,
+  },
 });
 
-const formData = reactive({
+const formData = reactive<FormPositionCondition>({
   isCondition: false,
   conditionReason: "",
 });
@@ -31,22 +38,34 @@ function onCloseDialog() {
 
 function onSubmit() {
   dialogConfirm($q, async () => {
-    // showLoader();
-    // await http
-    //   .put(config.API.รอAPI, formData)
-    //   .then(async () => {
-    //     await props.fetchData?.();
-    //     onCloseDialog();
-    //     success($q, "บันทึกข้อมูลสำเร็จ");
-    //   })
-    //   .catch((err) => {
-    //     messageError($q, err);
-    //   })
-    //   .finally(() => {
-    //     hideLoader();
-    //   });
+    showLoader();
+    await http
+      .put(
+        config.API.positionCondition + `/${props?.dataCondition?.id}`,
+        formData
+      )
+      .then(async () => {
+        await props.fetchData?.();
+        onCloseDialog();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
+
+watch(modal, () => {
+  if (modal.value) {
+    if (props.dataCondition) {
+      formData.isCondition = props.dataCondition.isCondition;
+      formData.conditionReason = props.dataCondition.conditionReason;
+    }
+  }
+});
 </script>
 
 <template>

src/modules/19_condition/interface/index/Main.ts

@@ -0,0 +1,5 @@
+interface Pagination {
+  rowsPerPage: number;
+}
+
+export type { Pagination };

src/modules/19_condition/interface/request/Main.ts

@@ -0,0 +1,5 @@
+interface FormPositionCondition {
+  isCondition: boolean;
+  conditionReason: string;
+}
+export type { FormPositionCondition };

src/modules/19_condition/interface/response/Main.ts

@@ -0,0 +1,45 @@
+interface OrgTree {
+  orgTreeId: string;
+  orgRootId: string;
+  orgLevel: number;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  orgTreeCode: string;
+  orgCode: string;
+  orgTreeRank: string;
+  orgTreeOrder: number | null;
+  orgRootCode: string;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeFax: string;
+  orgRevisionId: string;
+  isOfficer: boolean;
+  children: OrgTree[];
+}
+
+interface DataPositionCondition {
+  conditionReason: string;
+  id: string;
+  isCondition: boolean;
+  orgShortname: string;
+  posMasterNo: number;
+  posMasterNoPrefix: string | null;
+  posMasterNoSuffix: string | null;
+  profilePosition: string;
+  profilePoslevel: string;
+  profilePostype: string;
+  positions: Positions[];
+}
+
+interface Positions {
+  id: string;
+  posExecutiveName: string;
+  posLevelName: string;
+  posTypeName: string;
+  positionArea: string;
+  positionExecutiveField: string;
+  positionField: string;
+  positionName: string;
+}
+
+export type { OrgTree, DataPositionCondition };

src/modules/19_condition/view/Main.vue

@@ -7,6 +7,11 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
+import type {
+  OrgTree,
+  DataPositionCondition,
+} from "@/modules/19_condition/interface/response/Main";
+import type { Pagination } from "@/modules/19_condition/interface/index/Main";
 
 import LoadView from "@/components/LoadView.vue";
 import DialogCondition from "@/modules/19_condition/components/DialogCondition.vue";
@@ -20,7 +25,7 @@ const isLoadTable = ref<boolean>(false);
 const activeId = ref<string>("");
 const filter = ref<string>("");
 const orgTreeId = ref<string>("");
-const nodeTree = ref<any[]>([]);
+const nodeTree = ref<OrgTree[]>([]);
 const expanded = ref<string[]>([]);
 
 //Table
@@ -32,9 +37,9 @@ const orgLevel = ref<number>(0);
 const totalPage = ref<number>(1);
 const totalRow = ref<number>(0);
 const modalCondition = ref<boolean>(false);
-const dataCondition = ref<any>();
+const dataCondition = ref<DataPositionCondition>();
 
-const rows = ref<any[]>([]);
+const rows = ref<DataPositionCondition[]>([]);
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
@@ -230,7 +235,7 @@ async function fetchDataTree(id: string) {
     });
 }
 
-function onSelectedOrgTree(data: any) {
+function onSelectedOrgTree(data: OrgTree) {
   orgTreeId.value = data.orgTreeId;
   orgLevel.value = data.orgLevel;
   fetchDataTable();
@@ -243,7 +248,7 @@ async function fetchDataTable() {
   rows.value = [];
   isLoadTable.value = true;
   await http
-    .post(config.API.orgPosMasterList, {
+    .post(config.API.positionCondition, {
       id: orgTreeId.value,
       type: orgLevel.value,
       isAll: isAll.value,
@@ -256,7 +261,8 @@ async function fetchDataTable() {
       const data = await res.data.result;
       totalRow.value = data.total;
       totalPage.value = Math.ceil(data.total / pageSize.value);
-      rows.value = data.data.map((e: any) => ({
+
+      rows.value = data.data.map((e: DataPositionCondition) => ({
         ...e,
         profilePosition: e.profilePosition
           ? e.profilePosition
@@ -282,12 +288,11 @@ function onSearchDataTable() {
   fetchDataTable();
 }
 
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: Pagination) {
   pageSize.value = newPagination.rowsPerPage;
 }
 
-function onSetCondution(data: any) {
-  console.log(data);
+function onSetCondution(data: DataPositionCondition) {
   dataCondition.value = data;
   modalCondition.value = true;
 }
@@ -450,7 +455,13 @@ onMounted(async () => {
                     :props="props"
                   >
                     <div v-if="col.name === 'isCondition'">
-                      <q-icon name="check" color="primary" />
+                      <q-icon
+                        v-if="col.value"
+                        name="check"
+                        color="primary"
+                        size="sm"
+                      />
+                      <span v-else>-</span>
                     </div>
                     <div v-else>
                       {{ col.value ? col.value : "-" }}