- เพิ่มเมนูแต่งตั้งลูกจ้างประจำ

- ปรับเงื่อนไขการแสดงเมนูในทะเบียนประวัติเพิ่ม
- เพิ่มเมนูรายการแต่งตั้งลูกจ้างประจำ

src/modules/05_placement/components/AppointEmployee/Dialogbody.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { UserData } from "@/modules/05_placement/interface/response/AppointMent";
+
+import DialogHeader from "@/modules/05_placement/components/AppointMent/DialogHeader.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+
+const $q = useQuasar();
+const selected = ref<[]>([]);
+const checkSelected = computed(() => {
+  if (selected.value.length === 0 || props.type === "") {
+    return true;
+  }
+});
+
+const props = defineProps({
+  Modal: Boolean,
+  clickClose: Function,
+  fecthlistappointment: Function,
+  nextPage: Function,
+  optionsType: Array,
+  rows2: Array,
+  filterKeyword2: String,
+  type: String,
+});
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "organizationName",
+  "birthday",
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    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",
+  },
+  {
+    name: "organizationName",
+    align: "left",
+    label: "หน่วยงานที่รับการแต่งตั้ง-เลื่อน",
+    sortable: true,
+    field: "organizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthday",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthday",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const pageNext = (item: object) => {
+  props.nextPage?.(item)
+}
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:type",
+  "update:selected",
+
+]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+
+const updateInputType = (value: string) => {
+  emit("update:type", value);
+};
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+  emit("update:filterKeyword2", "");
+};
+//เปิด modal ยืนยัน
+const clickAddlist = () => {
+  dialogConfirm($q, () => createdAppoint());
+};
+
+
+//อัพเดต ส่งไปออกคำสั่ง
+const createdAppoint = async () => {
+  let pId: string[] = [];
+  let Type = props.type as string
+  selected.value.forEach((e: UserData) => {
+    pId.push(e.personalId);
+  });
+  let data = {
+    id: pId,
+  };
+  showLoader();
+  await http
+    .put(config.API.apppointmentReport(Type), data)
+    .then((res) => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      props.fecthlistappointment?.();
+      selected.value = [];
+      props.clickClose?.()
+    });
+};
+
+watchEffect(() => {
+  if (props.Modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="props.Modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่ง" :close="clickClose" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-between">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-select outlined dense :model-value="type" @update:model-value="updateInputType" :options="optionsType"
+                label="คำสั่งแต่งตั่ง-เลื่อน-ย้าย" style="width: 400px; max-width: auto" emit-value map-options
+                option-label="name" option-value="id" />
+            </q-toolbar>
+          </div>
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input borderless outlined dense debounce="300" :model-value="filterKeyword2"
+                @update:model-value="updateInput" placeholder="ค้นหา" style="width: 850px; max-width: auto">
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="Reset" />
+                </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="rows2" :filter="filterKeyword2" row-key="personalId" flat
+          :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 key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="citizenId" :props="props" @click="pageNext(props.row)">
+                {{ props.row.citizenId }}
+              </q-td>
+              <q-td key="fullname" :props="props" @click="pageNext(props.row)">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="organizationName" :props="props" @click="pageNext(props.row)">
+                <div v-if="props.row.orgName !== null ||
+                  props.row.positionPath !== null
+                  ">
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                      {{ props.row.organizationShortName !== null ? `(${props.row.organizationShortName})` : "" }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ props.row.positionPath !== null ? props.row.positionPath : "-" }}
+                      {{ props.row.positionNumber !== null ? `(${props.row.positionNumber})` : "" }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else>
+                  <div class="col-4">
+                    <div class="text-weight-medium">-</div>
+                  </div>
+                </div>
+              </q-td>
+              <q-td key="birthday" :props="props" @click="pageNext(props.row)">
+                {{ props.row.birthday }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ส่งไปออกคำสั่ง" @click="clickAddlist" color="public" :disable="checkSelected" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>