feat: Assign Command

src/api/18_command/api.command.ts

@@ -28,4 +28,6 @@ export default {
 
   commandEditSalary: `${command}/tab2/edit-salary`,
   commandOperator: `${env.API_URI}/org/commandoperator`,
+
+  commandAssign: (id: string) => `${command}/change-creator/${id}`,
 };

src/modules/18_command/components/DialogAssign.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+import { usePagination } from "@/composables/usePagination";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/18_command/interface/index/Main";
+import type { DataProfile} from  "@/modules/18_command/interface/response/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  dialogConfirm,
+  showLoader,
+  success,
+  messageError,
+  hideLoader,
+  dialogMessageNotify,
+} = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", () =>
+  fetchDataPerson()
+);
+
+const modal = defineModel<boolean>("modal", { required: true });
+const commandId = defineModel<string>("commandId", { required: true });
+const props = defineProps<{
+  fetchListCommand: () => Promise<void>;
+}>();
+
+const keyword = ref<string>("");
+const type = ref<string>("citizenId");
+const rows = ref<DataProfile[]>([]);
+const selected = ref<DataProfile[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    field: "no",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    field: "citizenId",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "fullName",
+    sortable: true,
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+    {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    field: "posNo",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+      {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "position",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+   {
+    name: "positionType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    field: "positionType",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posTypeName
+        ? `${row.posTypeName} ${row.positionLevelName ? `(${row.positionLevelName})` : ""}`
+        : "-";
+    },
+  },
+]);
+const visibleColumns = ref<string[]>(
+  columns.value ? columns.value.map((col) => col.name) : []
+);
+
+const searchTypeOption = ref<DataOption[]>([
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
+]);
+
+/** ฟังก์ชันเรียกรายชื่อคน*/
+async function fetchDataPerson() {
+  showLoader();
+  try {
+    const res = await http.post(
+      config.API.orgSearchPersonal(),
+      {
+        fieldName: type.value,
+        keyword: keyword.value.trim(),
+        system: (route.meta?.Key as string) || 'COMMAND',
+      },
+      {
+        params: params.value,
+      }
+    );
+    const result = res.data.result;
+    pagination.value.rowsNumber = result.total;
+    rows.value = result.data;
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
+}
+
+function onSubmit() {
+  if (selected.value.length == 0) {
+    dialogMessageNotify($q, "กรุณาเลือกบุคคลที่ต้องการหมอบหมายคำสั่ง");
+    return;
+  }
+  dialogConfirm($q, async () => {
+    const assingId = selected.value[0].keycloak;
+    try {
+      await http.put(config.API.commandAssign(commandId.value), {
+        assignId: assingId,
+      });
+      await props.fetchListCommand();
+      handleClose();
+      success($q, "หมอบหมายคำสั่งสำเร็จ");
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+function onSearch() {
+  pagination.value.page = 1;
+  fetchDataPerson();
+}
+
+function handleClose() {
+  modal.value = false;
+  rows.value = [];
+  selected.value = [];
+  keyword.value = "";
+  type.value = "citizenId";
+}
+
+watch(modal, (newVal) => {
+  if (newVal) {
+    fetchDataPerson();
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 50vw; max-width: 50vw">
+      <DialogHeader tittle="หมอบหมายคำสั่ง" :close="handleClose" />
+      <q-separator />
+      <q-card-section style="max-height: 60vh">
+        <div class="row q-col-gutter-md">
+          <div class="col-12">
+            <div class="row q-col-gutter-sm">
+              <q-select
+                label="ค้นหาจาก"
+                v-model="type"
+                :options="searchTypeOption"
+                outlined
+                emit-value
+                dense
+                emit-option
+                option-label="name"
+                option-value="id"
+                map-options
+              />
+              <q-space />
+              <q-input
+                dense
+                outlined
+                v-model="keyword"
+                label="ค้นหา"
+                @keydown.enter.prevent="onSearch"
+              >
+                <template v-slot:append> <q-icon name="search" /> </template>
+              </q-input>
+
+              <q-select
+                dense
+                multiple
+                outlined
+                emit-value
+                map-options
+                options-dense
+                option-value="name"
+                style="min-width: 140px"
+                v-model="visibleColumns"
+                :options="columns"
+                :display-value="$q.lang.table.columns"
+              />
+            </div>
+          </div>
+          <div class="col-12">
+            <p-table
+              :rows="rows"
+              :columns="columns"
+              row-key="id"
+              :selection="'single'"
+              v-model:selected="selected"
+              v-model:pagination="pagination"
+              @request="onRequest"
+              :visible-columns="visibleColumns"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th auto-width />
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </p-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn label="หมอบหมาย" color="public" @click="onSubmit"> </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/18_command/components/Main/TableMain.vue

@@ -12,6 +12,7 @@ import config from "@/app.config";
 import type { Pagination } from "@/modules/18_command/interface/index/Main";
 
 import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
+import DialogAssign from "@/modules/18_command/components/DialogAssign.vue";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -36,6 +37,7 @@ const props = defineProps({
 const modalCopy = ref<boolean>(false);
 const isCheckPageSize = ref<boolean>(false);
 const commandId = ref<string>("");
+const modalAssign = ref<boolean>(false);
 
 async function fetchListCommand() {
   await props.fetchList?.();
@@ -96,6 +98,7 @@ function onReCommand(id: string) {
     "ต้องการยืนยืนยันการดึงไปทำคำสั่งใหม่ใช่หรือไม่ ?"
   );
 }
+
 function onDeleteCommand(id: string) {
   dialogRemove(
     $q,
@@ -120,6 +123,11 @@ function onDeleteCommand(id: string) {
   );
 }
 
+function onAssignCommand(id: string) {
+  commandId.value = id;
+  modalAssign.value = true;
+}
+
 onMounted(() => {
   !isCheckPageSize.value && fetchListCommand();
 });
@@ -240,6 +248,25 @@ onMounted(() => {
                   </q-item-section>
                 </q-item>
 
+                <!-- หมอบหมายคำสั่ง -->
+                <q-item
+                  clickable
+                  v-close-popup
+                  v-if="checkPermission($route)?.attrOwnership === 'OWNER'"
+                  @click.prevent="onAssignCommand(props.row.id)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon
+                        color="green-6"
+                        size="xs"
+                        name="mdi-account-check"
+                      />
+                      <div class="q-pl-md">หมอบหมายคำสั่ง</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
+
                 <!-- ยกเลิก ไม่แสดง Tabs ยกเลิก -->
                 <q-item
                   v-if="
@@ -317,6 +344,8 @@ onMounted(() => {
     :is-copy="true"
     :command-id="commandId"
   />
+
+  <DialogAssign v-model:modal="modalAssign" :command-id="commandId" :fetch-list-command="fetchListCommand" />
 </template>
 
 <style scoped></style>

src/modules/18_command/interface/response/Main.ts

@@ -122,6 +122,54 @@ interface DataOperators {
   positionSign?: string;
 }
 
+interface DataProfile {
+  birthDate: string;
+  child1: string;
+  child1DnaId: string;
+  child1Id: string;
+  child1ShortName: string;
+  child2: string;
+  child2DnaId: string;
+  child2Id: string;
+  child2ShortName: string;
+  child3: string | null;
+  child3DnaId: string | null;
+  child3Id: string | null;
+  child3ShortName: string | null;
+  child4: string | null;
+  child4DnaId: string | null;
+  child4Id: string | null;
+  child4ShortName: string | null;
+  citizenId: string;
+  educationDegree: string | null;
+  email: string | null;
+  firstName: string;
+  id: string;
+  keycloak: string;
+  lastName: string;
+  name: string;
+  organization: string;
+  phone: string | null;
+  posLevelId: string;
+  posLevelName: string;
+  posMasterNo: number;
+  posNo:string;
+  posTypeId:string;
+  posTypeName: string;
+  position: string;
+  positionLevel: string;
+  positionLevelName: string;
+  positionType: string;
+  positionTypeName: string;
+  prefix: string;
+  rank: string;
+  root: string;
+  rootDnaId: string;
+  rootId:string;
+  rootShortName: string;
+  salary: number;
+}
+
 export type {
   ResListCommand,
   DataListCommand,
@@ -131,4 +179,5 @@ export type {
   DataDirector,
   DataAuthority,
   DataOperators,
+  DataProfile
 };