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

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

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** importComponents*/
+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";
+
+/** use*/
+const $q = useQuasar();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/**  props*/
+const modal = defineModel<boolean>("modal", { required: true });
+
+const props = defineProps({
+  fetchDataTable: {
+    type: Function,
+    required: true,
+  },
+  dataPosMaster: {
+    type: Object,
+    required: true,
+  },
+});
+
+const sysType = ref<any[]>(["SALARY_EMP"]);
+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: "ขอโอน",
+      },
+    ],
+  },
+]);
+
+function closeDialog() {
+  modal.value = false;
+  sysType.value = [];
+}
+
+function onSubmit() {
+  if (sysType.value.length !== 0) {
+    dialogConfirm($q, () => {});
+  }
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value;
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 30%">
+      <q-form greedy @submit.prevent="onSubmit">
+        <DialogHeader tittle="กำหนดหน้าที่ความรับผิดชอบ" :close="closeDialog" />
+        <q-separator />
+        <q-card-section>
+          <div
+            v-for="(item, index) in sysTypeOptions"
+            :key="index"
+            class="col-12"
+          >
+            <div class="row q-ml-md q-col-gutter-sm">
+              <div class="text-weight-medium text-body2">
+                {{ item.name }}
+              </div>
+              <div class="col-12">
+                <q-list class="q-mt-none">
+                  <q-item
+                    dense
+                    v-for="(op, index) in item.modules"
+                    :key="index"
+                  >
+                    <q-item-section avatar :top="item.caption">
+                      <q-checkbox
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="sysType"
+                        :val="op.code"
+                        @update:model-value="isChangData = true"
+                      />
+                    </q-item-section>
+
+                    <q-item-section>
+                      <q-item-label>{{ op.name }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            :disable="sysType.length === 0 || !isChangData"
+            label="บันทึก"
+            color="secondary"
+            type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>