add ui dialog create or select command

src/api/06_retirement/api.retirement.ts

@@ -1,4 +1,3 @@
-import type { StringDictionary } from "quasar";
 import env from "../index";
 const retirement = `${env.API_URI}/retirement`;
 const retirementDischarge = `${retirement}/discharge`;

src/modules/05_placement/components/Transfer/DialogOrders.vue

@@ -4,16 +4,19 @@ import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
-import http from "@/plugins/http";
+import { useCommandMainStore } from "@/modules/18_command/store/Main";
-import config from "@/app.config";
+// import http from "@/plugins/http";
+// import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
 import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const stroeCommand = useCommandMainStore();
 const { statusText } = useTransferDataStore();
 const {
   showLoader,
@@ -24,16 +27,17 @@ const {
   date2Thai,
 } = mixin;
 
+const modal = defineModel<boolean>("modal", { required: true });
 /**
  * props
  */
 const props = defineProps({
-  modal: Boolean,
   closeModal: Function,
   fetchData: Function,
   rows: Array,
 });
 
+const modalCommand = ref<boolean>(false); //เปิด-ปิด modal สร้างคำสั่ง
 //Table
 const selected = ref<ResponseData[]>([]); //รายชื่อที่เลือก
 const filter = ref<string>(""); //คำค้นหา
@@ -133,20 +137,23 @@ function saveOrder() {
       const body = {
         id,
       };
-      showLoader();
+
-      await http
+      modalCommand.value = true;
-        .post(config.API.transferReport, body)
+      modal.value = false;
-        .then(async () => {
+      //     showLoader();
-          await props.fetchData?.();
+      //     await http
-          await success($q, "ส่งไปออกคำสั่งสำเร็จ");
+      //       .post(config.API.transferReport, body)
-          props.closeModal?.();
+      //       .then(async () => {
-        })
+      //         await props.fetchData?.();
-        .catch((e) => {
+      //         await success($q, "ส่งไปออกคำสั่งสำเร็จ");
-          messageError($q, e);
+      //         props.closeModal?.();
-        })
+      //       })
-        .finally(() => {
+      //       .catch((e) => {
-          hideLoader();
+      //         messageError($q, e);
-        });
+      //       })
+      //       .finally(() => {
+      //         hideLoader();
+      //       });
     },
     "ยืนยันส่งไปออกคำสั่ง",
     "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
@@ -159,9 +166,9 @@ function saveOrder() {
  * กำหนดให้  selected เป็นค่าว่าง
  */
 watch(
-  () => props.modal,
+  () => modal.value,
   () => {
-    if (props.modal === true) {
+    if (modal.value === true) {
       selected.value = [];
     }
   }
@@ -275,6 +282,12 @@ watch(
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <DialogCreateCommand
+    v-model:modal="modalCommand"
+    command-type-code="C-PM-13"
+    :persons-id="selected"
+  />
 </template>
 
 <style scoped></style>

src/modules/05_placement/views/02_transferMain.vue

@@ -297,7 +297,7 @@ onMounted(async () => {
   </q-card>
 
   <DialogOrders
-    v-bind:modal="modal"
+    v-model:modal="modal"
     v-model:filter-order="filterOrder"
     :fetch-data="fetchData"
     :close-modal="closeModal"

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

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useCommandMainStore } from "@/modules/18_command/store/Main";
+
+// import http from "@/plugins/http";
+// import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const storeCommand = useCommandMainStore();
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  success,
+  messageError,
+  dialogConfirm,
+  hideLoader,
+  date2Thai,
+} = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const props = defineProps({
+  commandTypeId: String, // ไอดีประเภทคำสั่ง
+  personsId: Array, // ไอดีคนที่เลือกออกคำสั่งส่งมาเป็น array
+});
+
+const rows = ref<ResponseData[]>([]); // รายการคำสั่ง
+const selected = ref<string>(""); // id คำสั่งที่เลือก
+const filter = ref<string>(""); // คำค้นหา
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "posType",
+  "organizationPositionOld",
+  "organization",
+  "createdAt",
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.positionTypeOld + " (" + row.positionLevelOld + ")";
+    },
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "ตำแหน่ง/สังกัดเดิม",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val) {
+      return date2Thai(val);
+    },
+  },
+]);
+
+/**
+ * ฟังก์ชันสร้างคำสั่งใหม่
+ */
+function createCommand() {
+  // dialogConfirm($q, async () => {
+  //   const id = selected.value.map((r) => r.id);
+  //   const body = {
+  //     id,
+  //   };
+  //   showLoader();
+  //   await http
+  //     .post(config.API.transferReport, body)
+  //     .then((res) => {
+  //       modal.value = false;
+  router.push("/command/edit/736c178f-9c11-44bc-b6e0-ef47ea06ffe9");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+  // });
+}
+
+/**
+ * ฟังก์ชันเพิ่มคนเข้าไปในคำสั่งที่เป็นแบบร่าง
+ */
+function addPersonalToCommand(id: string) {
+  // dialogConfirm($q, async () => {
+  //   const id = selected.value.map((r) => r.id);
+  //   const body = {
+  //     id,
+  //   };
+  //   showLoader();
+  //   await http
+  //     .post(config.API.transferReport, body)
+  //     .then((res) => {
+  //       modal.value = false;
+  // router.push("/command/edit/" + id);
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+  // });
+}
+
+const typeAction = ref<string>("NEW"); // NEW = สร้างใหม่, SELECT = เลือกคำสั่งที่เป็นแบบร่าง
+function onSubmit() {
+  if (typeAction.value === "NEW") {
+    createCommand();
+  } else {
+    addPersonalToCommand(selected.value);
+  }
+}
+
+function closeModal() {
+  modal.value = false;
+}
+
+const selectCreate = ref<string | null>(null);
+</script>
+
+<template>
+  <q-dialog v-model="modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader :tittle="'สร้าง/เลือกคำสั่ง'" :close="closeModal" />
+      <q-separator />
+      <q-card-section>
+        <div class="row q-mb-md">
+          <div class="col-12 q-gutter-md">
+            <q-btn
+              outline
+              label="สร้างคำสั่งใหม่"
+              :color="selectCreate == 'NEW' ? 'primary' : 'grey'"
+              @click="() => (selectCreate = 'NEW')"
+            />
+
+            <q-btn
+              outline
+              label="เลือกคำสั่งที่เป็นแบบร่าง"
+              :color="selectCreate == 'DRAF' ? 'primary' : 'grey'"
+              @click="() => (selectCreate = 'DRAF')"
+            />
+          </div>
+        </div>
+
+        <q-separator />
+
+        <div class="row justify-end q-mt-sm">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filter"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="filter = ''"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows"
+          :filter="filter"
+          row-key="id"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </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.id">
+                <div v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+
+                <div
+                  v-else
+                  :class="
+                    col.name === 'organizationPositionOld' ||
+                    col.name === 'organization'
+                      ? 'table_ellipsis'
+                      : ''
+                  "
+                >
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          label="บันทึก"
+          @click="onSubmit"
+          :disable="selected"
+          color="public"
+          ><q-tooltip>บันทึก</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

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

@@ -49,4 +49,19 @@ interface DateSelectPerson {
   profileId: string;
 }
 
-export type { Pagination, DataOption, ItemTabs, DataPerson, DateSelectPerson };
+interface ListCommand {
+  id: string;
+  code: string;
+  name: string;
+  subtitle?: string;
+  commandSysId: string;
+}
+
+export type {
+  Pagination,
+  DataOption,
+  ItemTabs,
+  DataPerson,
+  DateSelectPerson,
+  ListCommand,
+};

src/modules/18_command/store/Main.ts

@@ -0,0 +1,29 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { ListCommand } from "@/modules/18_command/interface/index/Main";
+
+export const useCommandMainStore = defineStore("commandMainStore", () => {
+  const commandTypes = ref<ListCommand[]>([
+    {
+      id: "c94b8ce3-46f2-4ecb-9d3c-4d6b08f33dd9",
+      name: "คำสั่งให้โอนข้าราชการกรุงเทพมหานครสามัญ",
+      code: "C-PM-13",
+      subtitle: "",
+      commandSysId: "PLACEMENT",
+    },
+  ]);
+
+  function getCommandTypes(data: ListCommand[]) {
+    return (commandTypes.value = data);
+  }
+
+  function getCommandTypeById(id: string) {
+    return commandTypes.value.find((item) => item.id === id);
+  }
+
+  return {
+    commandTypes,
+    getCommandTypes,
+    getCommandTypeById,
+  };
+});