From af90e36918924365b1c3721c69a0a94002a799a8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 30 Sep 2024 13:30:45 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=AA=E0=B9=88=E0=B8=87=E0=B9=84?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=87=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=AD=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_organization/components/TreeTable.vue  |  25 +-
 .../components/AppointMent/DialogOrders.vue   |   8 +-
 .../components/DialogCreateCommand.vue        |  16 +-
 .../components/DialogCreateCommandORG.vue     | 277 ++++++++++++++++++
 4 files changed, 314 insertions(+), 12 deletions(-)
 create mode 100644 src/modules/18_command/components/DialogCreateCommandORG.vue

diff --git a/src/modules/02_organization/components/TreeTable.vue b/src/modules/02_organization/components/TreeTable.vue
index 8433bc661..fc9fca910 100644
--- a/src/modules/02_organization/components/TreeTable.vue
+++ b/src/modules/02_organization/components/TreeTable.vue
@@ -28,8 +28,7 @@ import DialogMovePos from "@/modules/02_organization/components/DialogMovePos.vu
 import DialogHistoryPos from "@/modules/02_organization/components/DialogHistoryPos.vue"; // ประวัติตำแหน่ง
 import DialogSelectPerson from "@/modules/02_organization/components/DialogSelectPerson.vue"; // เลือกคนครอง
 import DialogSuccession from "@/modules/02_organization/components/DialogSuccession.vue"; // สืบทอดตำแหน่ง
-
-/** importStore*/
+import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue";
 
 const $q = useQuasar();
 const store = useOrganizational();
@@ -177,7 +176,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
 const columnsExpand = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -254,6 +252,8 @@ const columnsExpand = ref<QTableProps["columns"]>([
 ]);
 
 const dialogPosition = ref<boolean>(false); //ตำแหน่ง
+const modalCommand = ref<boolean>(false); //สร้างคำสั่ง
+
 /**
  * function  openPopup เพิ่มอัตรากำลัง
  * @param type ประเภท
@@ -541,6 +541,19 @@ watch(
         </q-menu>
         <q-tooltip>ดาวน์โหลด</q-tooltip>
       </q-btn>
+
+      <q-btn
+        v-if="store.typeOrganizational === 'draft'"
+        flat
+        round
+        dense
+        color="add"
+        icon="mdi-account-arrow-right"
+        @click.prevent="modalCommand = true"
+      >
+        <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+      </q-btn>
+
       <q-space />
       <div class="row q-gutter-md">
         <div>
@@ -892,6 +905,12 @@ watch(
 
   <!-- สืบทอดตำแหน่ง -->
   <DialogSuccession v-model:modal="modalDialogSuccession" :rowId="rowId" />
+
+  <!-- dialog สร้างคำสั่ง -->
+  <DialogCreateCommandORG
+    v-model:modal="modalCommand"
+    command-type-code="C-PM-38"
+  />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/05_placement/components/AppointMent/DialogOrders.vue b/src/modules/05_placement/components/AppointMent/DialogOrders.vue
index 003d9828e..0e5755400 100644
--- a/src/modules/05_placement/components/AppointMent/DialogOrders.vue
+++ b/src/modules/05_placement/components/AppointMent/DialogOrders.vue
@@ -54,7 +54,7 @@ const visibleColumns2 = ref<string[]>([
   "citizenId",
   "fullname",
   "organizationName",
-  "birthday",
+  "dateOfBirth",
   "typeCommand",
 ]);
 const columns2 = ref<QTableProps["columns"]>([
@@ -115,11 +115,11 @@ const columns2 = ref<QTableProps["columns"]>([
     },
   },
   {
-    name: "birthday",
+    name: "dateOfBirth",
     align: "left",
     label: "วัน/เดือน/ปี เกิด",
     sortable: true,
-    field: "birthday",
+    field: "dateOfBirth",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -200,6 +200,8 @@ watch(
   async () => {
     if (props.Modal === true) {
       rows.value = props.rows2 ? props.rows2 : [];
+      console.log(rows.value);
+
       selected.value = [];
       commandType.value = "";
       const data = await storeCommand.getCommandTypes();
diff --git a/src/modules/18_command/components/DialogCreateCommand.vue b/src/modules/18_command/components/DialogCreateCommand.vue
index d774b7ca2..4143fae0f 100644
--- a/src/modules/18_command/components/DialogCreateCommand.vue
+++ b/src/modules/18_command/components/DialogCreateCommand.vue
@@ -83,11 +83,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "commandExcecuteDate",
+    name: "commandAffectDate",
     align: "left",
     label: "วันที่ลงนาม",
     sortable: false,
-    field: "commandExcecuteDate",
+    field: "commandAffectDate",
     format(val) {
       return val ? date2Thai(val) : "-";
     },
@@ -95,11 +95,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "commandAffectDate",
+    name: "commandExcecuteDate",
     align: "left",
     label: "วันที่คำสั่งมีผล",
     sortable: false,
-    field: "commandAffectDate",
+    field: "commandExcecuteDate",
     format(val) {
       return val ? date2Thai(val) : "-";
     },
@@ -523,7 +523,9 @@ watch(
         <q-btn
           label="บันทึกและเลือกรายชื่อต่อ"
           @click="() => onSubmit(false)"
-          :disable="selected.length == 0 && commandType == ''"
+          :disable="
+            selectCreate == 'NEW' ? commandType == '' : selected.length == 0
+          "
           color="blue"
         >
           <q-tooltip>บันทึกและเลือกรายชื่อต่อ</q-tooltip>
@@ -531,7 +533,9 @@ watch(
         <q-btn
           label="บันทึกและไปยังหน้าคำสั่ง"
           @click="() => onSubmit(true)"
-          :disable="selected.length == 0 && commandType == ''"
+          :disable="
+            selectCreate == 'NEW' ? commandType == '' : selected.length == 0
+          "
           color="public"
         >
           <q-tooltip>บันทึกและไปยังหน้าคำสั่ง</q-tooltip>
diff --git a/src/modules/18_command/components/DialogCreateCommandORG.vue b/src/modules/18_command/components/DialogCreateCommandORG.vue
new file mode 100644
index 000000000..ac96ff82b
--- /dev/null
+++ b/src/modules/18_command/components/DialogCreateCommandORG.vue
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useCommandMainStore } from "@/modules/18_command/store/Main";
+
+import type { ListCommand } from "@/modules/18_command/interface/index/Main";
+
+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({
+  commandTypeCode: String, // ไอดีประเภทคำสั่ง
+});
+
+const commandOp = ref<ListCommand[]>([]); // ประเภทคำสั่ง
+const commandType = ref<string>(""); //ประเภทคำสั่ง
+const commandNo = ref<string>(""); //คำสั่งเลขที่
+const commandYear = ref<number>(new Date().getFullYear());
+const commandAffectDate = ref<Date | null>(null); //วันที่ลงนาม
+const commandExcecuteDate = ref<Date | null>(null); //วันที่คำสั่งมีผล
+
+/**
+ * ฟังก์ชันสร้างคำสั่งใหม่
+ */
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+/** ปิด popup */
+function closeModal() {
+  modal.value = false;
+  clearValue();
+}
+
+function clearValue() {
+  commandNo.value = "";
+  commandYear.value = new Date().getFullYear();
+  commandAffectDate.value = null;
+  commandExcecuteDate.value = null;
+}
+
+/** ดึงข้อมูลคำสั่ง */
+async function fetchCommandType() {
+  const data = await storeCommand.getCommandTypes(); // ยิงไป get ที่ store
+  // filter เฉพาะ code ของคำสั่งที่เลือก
+  commandOp.value = await data.filter(
+    (v: any) => v.code == props.commandTypeCode
+  );
+  commandType.value = commandOp.value[0].id;
+}
+
+watch(modal, () => {
+  if (modal.value) {
+    fetchCommandType();
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="'สร้างคำสั่ง'" :close="closeModal" />
+        <q-separator />
+        <q-card-section style="max-height: 50vh" class="scroll">
+          <div class="row q-sm q-col-gutter-sm">
+            <div class="col-12">
+              <q-select
+                v-model="commandType"
+                :label="`${'ประเภทคำสั่ง'}`"
+                option-label="name"
+                :options="commandOp"
+                option-value="id"
+                dense
+                emit-value
+                map-options
+                lazy-rules
+                use-input
+                hide-bottom-space
+                outlined
+                readonly
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-6">
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                v-model="commandNo"
+                :label="`${'คำสั่งเลขที่'}`"
+              />
+            </div>
+            <label class="col-1 flex justify-center items-center text-bold"
+              >/</label
+            >
+
+            <div class="col-5">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="commandYear"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                class="inputgreen"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    hide-bottom-space
+                    :model-value="
+                      commandYear == null ? null : commandYear + 543
+                    "
+                    :label="`${'พ.ศ.'}`"
+                    :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-6">
+              <datepicker
+                clearable
+                menu-class-name="modalfix"
+                v-model="commandAffectDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                class="inputgreen"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    clearable
+                    dense
+                    outlined
+                    hide-bottom-space
+                    :model-value="
+                      commandAffectDate == null
+                        ? null
+                        : date2Thai(commandAffectDate)
+                    "
+                    :label="`${'วันที่ลงนาม'}`"
+                    @clear="() => (commandAffectDate = null)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-6">
+              <datepicker
+                clearable
+                menu-class-name="modalfix"
+                v-model="commandExcecuteDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                class="inputgreen"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    clearable
+                    dense
+                    outlined
+                    hide-bottom-space
+                    class="inputgreen"
+                    :model-value="
+                      commandExcecuteDate == null
+                        ? null
+                        : date2Thai(commandExcecuteDate)
+                    "
+                    :label="`${'วันที่คำสั่งมีผล'}`"
+                    @clear="() => (commandExcecuteDate = null)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <!-- <q-btn
+          label="บันทึกและเลือกรายชื่อต่อ"
+          @click="() => onSubmit(false)"
+          :disable="
+            selectCreate === 'NEW' ? commandType == '' : selected.length == 0
+          "
+          color="blue"
+        >
+          <q-tooltip>บันทึกและเลือกรายชื่อต่อ</q-tooltip>
+        </q-btn> -->
+          <q-btn
+            label="บันทึกและไปยังหน้าคำสั่ง"
+            :disable="commandType == ''"
+            type="submit"
+            color="public"
+          >
+            <q-tooltip>บันทึกและไปยังหน้าคำสั่ง</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>