ส่งออกคำสั่ง ==> โครงสร้าง

src/modules/02_organization/components/TreeTable.vue

@@ -28,7 +28,6 @@ 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"; // สืบทอดตำแหน่ง
-import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue";
 
 const $q = useQuasar();
 const store = useOrganizational();
@@ -252,7 +251,6 @@ const columnsExpand = ref<QTableProps["columns"]>([
 ]);
 
 const dialogPosition = ref<boolean>(false); //ตำแหน่ง
-const modalCommand = ref<boolean>(false); //สร้างคำสั่ง
 
 /**
  * function  openPopup เพิ่มอัตรากำลัง
@@ -542,18 +540,6 @@ watch(
         <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>
@@ -905,12 +891,6 @@ 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>

src/modules/02_organization/views/main.vue

@@ -22,6 +22,7 @@ import StructureView from "@/modules/02_organization/components/StructureMain.vu
 import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
 import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
 import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
+import DialogCreateCommandORG from "@/modules/18_command/components/DialogCreateCommandORG.vue"; //ส่่งไปออกคำสั่ง
 
 /**
  * use
@@ -30,9 +31,7 @@ const $q = useQuasar();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const store = useOrganizational();
 
-/**
+/** ตัวแปร*/
- * ตัวแปร
- */
 const modalNewStructure = ref<boolean>(false); // เพิ่มโครงสร้าง
 const modalDateTime = ref<boolean>(false); //  ตั้งเวลาเผยแพร่
 const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
@@ -43,29 +42,10 @@ const historyId = ref<string>(""); // ID ประวัติโครงสร
 const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
 const count = ref<number>(0);
 
-// รายการเมนูเพิ่มโครงสร้าง
+const modalCommand = ref<boolean>(false); //ส่งไปออกคำสั่ง
-const itemStructure = ref<DataOption[]>([
-  {
-    id: "NEW",
-    name: "สร้างใหม่",
-  },
-  {
-    id: "ORG",
-    name: "ทำสำเนาเฉพาะโครงสร้าง",
-  },
-  {
-    id: "ORG_POSITION",
-    name: "ทำสำเนาโครงสร้างและตำแหน่ง",
-  },
-  {
-    id: "ORG_POSITION_PERSON",
-    name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
-  },
-]);
 
 /**
  * function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
- *
  * เก็บข่อมูลใน store
  */
 async function fetchOrganizationActive() {
@@ -225,6 +205,7 @@ onMounted(async () => {
         </div>
       </q-card>
     </div>
+
     <div v-else>
       <q-card class="my-card">
         <q-card-section class="q-pa-sm">
@@ -294,6 +275,17 @@ onMounted(async () => {
               @click="ocClickAddStructure('ADD')"
               class="q-px-md"
             />
+            <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-btn-dropdown
               v-if="checkPermission($route)?.attrOwnership == 'OWNER'"
@@ -383,6 +375,13 @@ onMounted(async () => {
     :close="onClickDateTime"
     :fetch-active="fetchOrganizationActive"
   />
+
+  <!-- dialog ส่งไปออกคำสั่ง -->
+  <DialogCreateCommandORG
+    v-model:modal="modalCommand"
+    command-type-code="C-PM-38"
+    :org-publish-date="store.orgPublishDate as Date | undefined"
+  />
 </template>
 
 <style scoped></style>

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

@@ -8,7 +8,12 @@ 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";
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  ListCommand,
+  DataOption,
+} from "@/modules/18_command/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -28,6 +33,7 @@ const {
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   commandTypeCode: String, // ไอดีประเภทคำสั่ง
+  orgPublishDate: { type: Date, defult: undefined },
 });
 
 const commandOp = ref<ListCommand[]>([]); // ประเภทคำสั่ง
@@ -36,33 +42,100 @@ const commandNo = ref<string>(""); //คำสั่งเลขที่
 const commandYear = ref<number>(new Date().getFullYear());
 const commandAffectDate = ref<Date | null>(null); //วันที่ลงนาม
 const commandExcecuteDate = ref<Date | null>(null); //วันที่คำสั่งมีผล
+const group = ref<string>(""); //กลุ่ม
+const isCheckOrgPublishDate = ref<boolean>(false); //เช็คค่าของวันที่คำสั่งมีผล
+const groupOp = ref<DataOption[]>([]);
+const groupDataOp = ref<DataOption[]>([
+  {
+    id: "1.1",
+    name: "กลุ่มที่ 1.1 : ปฏิบัติงาน ชำนาญงาน ปฏิบัติการ ชำนาญการ",
+  },
+  {
+    id: "1.2",
+    name: "กลุ่มที่ 1.2 : อาวุโส ชำนาญการพิเศษ อำนวยการต้น",
+  },
+  {
+    id: "2",
+    name: "กลุ่มที่ 2 : ทักษะพิเศษ เชี่ยวชาญ ทรงคุณวุฒิ อำนวยการสูง บริหารต้น บริหารสูง",
+  },
+]);
+
+//Table
+const rows = ref<any[]>([]);
+const selected = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: false,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "positionName",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: false,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: false,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionIsSelected",
+    align: "left",
+    label: "คนครอง",
+    sortable: false,
+    field: "positionIsSelected",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
 
 /** ฟังก์ชันบันทึกและไปยังหน้าคำสั่ง*/
 function onSubmit() {
   dialogConfirm($q, async () => {
-    showLoader();
+    // showLoader();
-    const body = {
+    // const body = {
-      commandYear: commandYear.value,
+    //   commandYear: commandYear.value,
-      commandNo: commandNo.value,
+    //   commandNo: commandNo.value,
-      commandTypeId: commandType.value,
+    //   commandTypeId: commandType.value,
-      commandAffectDate: commandAffectDate.value,
+    //   commandAffectDate: commandAffectDate.value,
-      commandExcecuteDate: commandExcecuteDate.value,
+    //   commandExcecuteDate: commandExcecuteDate.value,
-      persons: [],
+    //   persons: [],
-    };
+    // };
-
+    // await http
-    await http
+    //   .post(config.API.command + `/person`, body)
-      .post(config.API.command + `/person`, body)
+    //   .then(async (res) => {
-      .then(async (res) => {
+    //     const id = await res.data.result;
-        const id = await res.data.result;
+    //     router.push(`/command/edit/${id}`);
-        router.push(`/command/edit/${id}`);
+    //     modal.value = false;
-        modal.value = false;
+    //   })
-      })
+    //   .catch((e) => {
-      .catch((e) => {
+    //     messageError($q, e);
-        messageError($q, e);
+    //   })
-      })
+    //   .finally(() => {
-      .finally(() => {
+    //     hideLoader();
-        hideLoader();
+    //   });
-      });
   });
 }
 
@@ -76,6 +149,10 @@ function closeModal() {
   commandYear.value = new Date().getFullYear();
   commandAffectDate.value = null;
   commandExcecuteDate.value = null;
+  group.value = "";
+  isCheckOrgPublishDate.value = false;
+  rows.value = [];
+  selected.value = [];
 }
 
 /** ฟังก์ชันดึงข้อมูลคำสั่ง */
@@ -88,9 +165,66 @@ async function fetchCommandType() {
   commandType.value = commandOp.value[0].id;
 }
 
+/**
+ * ฟังก์ชันต้นหาข้อมูลของ Option ขอสถานะ
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    group.value = val ? "" : group.value;
+    groupOp.value = groupDataOp.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+/**
+ * ฟังก์ชันเลือกกลุ่ม
+ * @param val กลุ่มที่ต้องการค้นหา
+ */
+function updateGroup(val: string) {
+  const data = [
+    {
+      id: "1",
+      posMasterNo: "สกก.1",
+      positionName: "นักบริหาร",
+      posTypeName: "บริหาร",
+      posLevelName: "ปฏิบัติงาน",
+      positionIsSelected: "นายศรัณย์ ศิลาดี",
+      group: "1.1",
+    },
+    {
+      id: "2",
+      posMasterNo: "สกก.2",
+      positionName: "นักบริหาร",
+      posTypeName: "บริหาร",
+      posLevelName: "อำนวยการต้น",
+      positionIsSelected: "นางสาวพรทิพย์ กาญจนา",
+      group: "1.2",
+    },
+    {
+      id: "3",
+      posMasterNo: "สกก.3",
+      positionName: "นักบริหาร",
+      posTypeName: "บริหาร",
+      posLevelName: "อำนวยการสูง",
+      positionIsSelected: "",
+      group: "2",
+    },
+  ];
+
+  rows.value = data.filter((e: any) => e.group === val);
+}
+
 watch(modal, () => {
   if (modal.value) {
     fetchCommandType();
+    if (props.orgPublishDate) {
+      commandExcecuteDate.value = props.orgPublishDate;
+      isCheckOrgPublishDate.value = true;
+    }
   }
 });
 </script>
@@ -128,6 +262,8 @@ watch(modal, () => {
                 </template>
               </q-select>
             </div>
+
+            <!-- คำสั่งเลขที่ -->
             <div class="col-6">
               <q-input
                 class="inputgreen"
@@ -140,7 +276,7 @@ watch(modal, () => {
             <label class="col-1 flex justify-center items-center text-bold"
               >/</label
             >
-
+            <!-- พ.ศ -->
             <div class="col-5">
               <datepicker
                 menu-class-name="modalfix"
@@ -179,6 +315,7 @@ watch(modal, () => {
               </datepicker>
             </div>
 
+            <!-- วันที่ลงนาม -->
             <div class="col-6">
               <datepicker
                 clearable
@@ -222,6 +359,7 @@ watch(modal, () => {
               </datepicker>
             </div>
 
+            <!-- วันที่คำสั่งมีผล -->
             <div class="col-6">
               <datepicker
                 clearable
@@ -230,7 +368,8 @@ watch(modal, () => {
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
-                class="inputgreen"
+                :class="!isCheckOrgPublishDate ? 'inputgreen' : ''"
+                :readonly="isCheckOrgPublishDate"
               >
                 <template #year="{ year }">
                   {{ year + 543 }}
@@ -240,11 +379,12 @@ watch(modal, () => {
                 </template>
                 <template #trigger>
                   <q-input
+                    :readonly="isCheckOrgPublishDate"
                     clearable
                     dense
                     outlined
                     hide-bottom-space
-                    class="inputgreen"
+                    :class="!isCheckOrgPublishDate ? 'inputgreen' : ''"
                     :model-value="
                       commandExcecuteDate == null
                         ? null
@@ -265,6 +405,111 @@ watch(modal, () => {
                 </template>
               </datepicker>
             </div>
+
+            <!-- กลุ่ม -->
+            <div class="col-12">
+              <q-select
+                v-model="group"
+                :label="`${'กลุ่ม'}`"
+                option-label="name"
+                :options="groupOp"
+                option-value="id"
+                class="inputgreen"
+                dense
+                emit-value
+                map-options
+                lazy-rules
+                use-input
+                hide-bottom-space
+                outlined
+                @update:model-value="updateGroup"
+                @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <!-- TABLE -->
+            <div class="col-12">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                :paging="true"
+                row-key="id"
+                flat
+                bordered
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                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">
+                    <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 === 'posMasterNo'">
+                        {{
+                          props.row.isSit
+                            ? col.value + " " + "(นั่งทับตำแหน่ง)"
+                            : col.value
+                        }}
+                      </div>
+                      <div v-else-if="col.name === 'posLevelName'">
+                        {{
+                          props.row.posLevelName
+                            ? props.row.isSpecial == true
+                              ? `${props.row.posLevelName} (ฉ)`
+                              : props.row.posLevelName
+                            : "-"
+                        }}
+                      </div>
+                      <div v-else>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <!-- <template v-slot:pagination="scope">
+                    <q-pagination
+                      v-model="reqMaster.page"
+                      active-color="primary"
+                      color="dark"
+                      :max="totalPage"
+                      :max-pages="5"
+                      size="sm"
+                      boundary-links
+                      direction-links
+                    ></q-pagination>
+                  </template> -->
+              </d-table>
+            </div>
           </div>
         </q-card-section>
 
@@ -272,8 +517,8 @@ watch(modal, () => {
 
         <q-card-actions align="right">
           <q-btn
-            label="บันทึกและไปยังหน้าคำสั่ง"
+            label="ส่งไปออกคำสั่ง"
-            :disable="commandType == ''"
+            :disable="commandType == '' || selected.length === 0"
             type="submit"
             color="public"
           >