API มอบหมายหน้าที่ความรับผิดชอบ

src/modules/02_users/components/05_responsIbilities/DialogResponsibilities.vue

@@ -10,24 +10,18 @@ import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
 
 /** importType*/
-import type { QTableProps } from "quasar";
-import type { FilterReqMaster } from "@/modules/02_users/interface/request/Main";
-import type { Roles } from "@/modules/02_users/interface/response/Main";
+import type {
+  PosMaster,
+  CommandSysAssign,
+} from "@/modules/02_users/interface/response/Main";
 
 /** use*/
 const $q = useQuasar();
-const {
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  messageError,
-  success,
-  dialogMessageNotify,
-} = useCounterMixin();
+const { showLoader, hideLoader, dialogConfirm, messageError, success } =
+  useCounterMixin();
 
 /**  props*/
 const modal = defineModel<boolean>("modal", { required: true });
-
 const props = defineProps({
   fetchDataTable: {
     type: Function,
@@ -37,40 +31,34 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  reqMaster: {
+    type: Object,
+    required: true,
+  },
 });
 
-const sysType = ref<any[]>(["SALARY_EMP"]);
+const posMasterId = ref<string>("");
+const sysType = ref<string[]>([]);
 const isChangData = ref<boolean>(false);
-const sysTypeOptions = ref<any[]>([
-  {
-    code: "SALARY",
-    name: "ระบบเงินเดือน",
-    modules: [
-      {
-        code: "SALARY_EMP",
-        name: "เงินเดือนข้าราชการ",
-      },
-      {
-        code: "SALARY_TEMP",
-        name: "เงินเดือนลูกจ้างประจำ",
-      },
-    ],
-  },
-  {
-    code: "PLACEMENT",
-    name: "ระบบบรรจุ",
-    modules: [
-      {
-        code: "PLACEMENT_NEW",
-        name: "เงินเดือนข้าราชการ",
-      },
-      {
-        code: "TRANSFER",
-        name: "ขอโอน",
-      },
-    ],
-  },
-]);
+const sysTypeOptions = ref<CommandSysAssign[]>([]);
+
+async function fetchCommandSysAssign() {
+  if (sysTypeOptions.value.length === 0) {
+    showLoader();
+    await http
+      .get(config.API.commandSysAssign)
+      .then(async (res) => {
+        const data = await res.data.result;
+        sysTypeOptions.value = data;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
 
 function closeDialog() {
   modal.value = false;
@@ -79,14 +67,45 @@ function closeDialog() {
 
 function onSubmit() {
   if (sysType.value.length !== 0) {
-    dialogConfirm($q, () => {});
+    dialogConfirm($q, async () => {
+      const body = {
+        posMasterId: posMasterId.value,
+        assignIds: sysType.value,
+      };
+      showLoader();
+      await http
+        .post(config.API.posAssign, body)
+        .then(async () => {
+          await props.fetchDataTable(
+            props.reqMaster.id,
+            props.reqMaster.revisionId,
+            props.reqMaster.type
+          );
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
   }
 }
 
 watch(
   () => modal.value,
-  () => {
-    modal.value;
+  async () => {
+    if (modal.value) {
+      await fetchCommandSysAssign();
+      posMasterId.value = props.dataPosMaster.id;
+      const assignId = props.dataPosMaster.posMasterAssigns.map(
+        (r: PosMaster) => r.assignId
+      );
+      sysType.value = assignId;
+      isChangData.value = false;
+    }
   }
 );
 </script>
@@ -105,22 +124,22 @@ watch(
           >
             <div class="row q-ml-md q-col-gutter-sm">
               <div class="text-weight-medium text-body2">
-                {{ item.name }}
+                {{ item.sysName }}
               </div>
               <div class="col-12">
                 <q-list class="q-mt-none">
                   <q-item
                     dense
-                    v-for="(op, index) in item.modules"
+                    v-for="(op, index) in item.assgins"
                     :key="index"
                   >
-                    <q-item-section avatar :top="item.caption">
+                    <q-item-section avatar>
                       <q-checkbox
                         keep-color
                         color="primary"
                         dense
                         v-model="sysType"
-                        :val="op.code"
+                        :val="op.id"
                         @update:model-value="isChangData = true"
                       />
                     </q-item-section>