เลือกคนครอง

src/modules/02_organizationalNew/components/DialogFormPosition.vue

@@ -63,9 +63,9 @@ const optionFilter = ref<DataOption[]>([
 const typeOpsMain = ref<DataOption[]>([]);
 const levelOpsMain = ref<DataOption[]>([]);
 const executiveOpsMain = ref<DataOption[]>([]);
+const executiveOps = ref<DataOption[]>([]);
 const typeOps = ref<DataOption[]>([]);
 const levelOps = ref<DataOption[]>([]);
-const executiveOps = ref<DataOption[]>([]);
 
 const listMenu = ref<ListMenu[]>([
   {
@@ -428,8 +428,6 @@ function onSubmitSelectEdit() {
   );
 }
 
-
-
 /** input ค้นหา */
 const searchRef = ref<any>(null);
 async function searchInput() {
@@ -724,7 +722,6 @@ async function clearFormPositionSelect() {
                         :options="optionFilter"
                         emit-value
                         dense
-                  
                         map-options
                         outlined
                         option-label="name"

src/modules/02_organizationalNew/components/DialogSelectPerson.vue

@@ -0,0 +1,550 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { Position } from "@/modules/02_organizationalNew/interface/index/organizational";
+import type { DataOption } from "@/modules/02_organizationalNew/interface/index/Main";
+import type {
+  OptionType,
+  OptionExecutive,
+  OptionLevel,
+} from "@/modules/02_organizationalNew/interface/response/organizational";
+interface FormDetailPosition {
+  positionNo: string;
+  positionType: string;
+  positionLevel: string;
+  personal: string;
+  status: string;
+}
+
+interface SeaechResult {
+  citizenId: string;
+  name: string;
+  posTypeName: string;
+  posLevelName: string;
+}
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isDisValidate = ref<boolean>(false);
+const executiveOpsMain = ref<DataOption[]>([]);
+const typeOpsMain = ref<DataOption[]>([]);
+const levelOpsMain = ref<DataOption[]>([]);
+const typeOps = ref<DataOption[]>([]);
+const levelOps = ref<DataOption[]>([]);
+const dataLevel = ref<any>();
+const executiveOps = ref<DataOption[]>([]);
+const store = useOrganizational();
+const $q = useQuasar();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+// const modal = ref<boolean>(true);
+
+const props = defineProps({
+  fetchActive: {
+    type: Function,
+    require: true,
+  },
+  dataDetailPos: { type: Object, require: true },
+});
+const row = ref<Position[]>([]);
+const rowResult = ref<SeaechResult[]>([]);
+const formData = reactive<FormDetailPosition>({
+  positionNo: "", //*เลขที่ตำแหน่ง
+  positionType: "", //*เลขที่ตำแหน่ง
+  positionLevel: "", //*เลขที่ตำแหน่ง
+  personal: "", //*เลขที่ตำแหน่ง
+  status: "",
+});
+
+const visibleColumnsResult = ref<String[]>([
+  "no",
+  "citizenId",
+  "name",
+  "posTypeName",
+  "posLevelName",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsResult = 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: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+function close() {
+  modal.value = false;
+}
+
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOps.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เรียกรายการตำแหน่งทางการบริหาร */
+async function fetchExecutive() {
+  showLoader();
+  await http
+    .get(config.API.orgPosExecutive)
+    .then((res) => {
+      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
+        id: e.id,
+        name: e.posExecutiveName,
+      }));
+      executiveOps.value = executiveOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      fetchType();
+      fetchExecutive();
+
+      if (props.dataDetailPos) {
+        formData.positionNo = props.dataDetailPos.posMasterNo;
+        formData.status =
+          store.typeOrganizational === "current"
+            ? "ปกติ"
+            : store.typeOrganizational === "draft"
+            ? "แบบร่าง"
+            : "ยุบเลิก";
+        row.value = props.dataDetailPos.positions.map((e: Position) => ({
+          ...e,
+          positionName: e.positionName ? e.positionName : "-",
+          positionField: e.positionField ? e.positionField : "-",
+          posTypeName: e.posTypeName ? e.posTypeName : "-",
+          posLevelName: e.posLevelName ? e.posLevelName : "-",
+          posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
+          positionExecutiveField: e.positionExecutiveField
+            ? e.positionExecutiveField
+            : "-",
+          positionArea: e.positionArea ? e.positionArea : "-",
+        }));
+      }
+    }
+  }
+);
+
+function updateSelectType(val: string) {
+  const listLevel = dataLevel.value.find((e: any) => e.id === val);
+  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
+    id: e.id,
+    name: e.posLevelName,
+  }));
+  levelOps.value = levelOpsMain.value;
+  formData.positionLevel = "";
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  // const hasError = [];
+  // for (const key in objectRef) {
+  //   if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+  //     const property = objectRef[key];
+  //     if (property.value && typeof property.value.validate === "function") {
+  //       const isValid = property.value.validate();
+  //       hasError.push(isValid);
+  //     }
+  //   }
+  // }
+  // if (hasError.every((result) => result === true)) {
+    onSubmit();
+  // } else {
+  // }
+}
+
+/** ฟังชั่น บันทึก */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    () => {
+      // showLoader();
+      // http
+      //   .post(config.API.createOrganization, formData)
+      //   .then((res) => {
+      //     status.value = true;
+      //     store.typeOrganizational = "draft";
+      //     store.draftId = res.data.result.id;
+      //     success($q, "บันทึกข้อมูลสำเร็จ");
+      //     // props.fetchActive?.();
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   })
+      //   .finally(async () => {
+      //     modal.value = await false;
+      //     await close();
+      //     await hideLoader();
+      //   });
+    },
+  );
+}
+
+/** เมื่อ enter ให้ทำการ ค้นหาข้อมูล */
+function filterFn() {
+  const data = [
+    {
+      citizenId: "test1",
+      name: "test1",
+      posTypeName: "test1",
+      posLevelName: "test1",
+    },
+    {
+      citizenId: "test2",
+      name: "test2",
+      posTypeName: "test2",
+      posLevelName: "test2",
+    },
+  ];
+
+  rowResult.value = data
+  // props.fetchListDisciplinary?.();
+}
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card style="min-width: 80vw">
+        <form @submit.prevent="validateForm">
+        <DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>เลขที่ตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionNo }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-12">
+                <d-table
+                  flat
+                  :columns="columns"
+                  :rows="row"
+                  row-key="id"
+                  dense
+                  hide-bottom
+                  class="custom-header-table-expand"
+                >
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <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
+                        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 }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mt-sm">
+              <div class="col-2">
+                <q-select
+                  ref="positionTypeRef"
+                  :class="inputEdit(isReadonly)"
+                  label="ประเภทตำแหน่ง"
+                  v-model="formData.positionType"
+                  :options="typeOps"
+                  emit-value
+                  dense
+                  @update:model-value="updateSelectType"
+                  map-options
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :rules="
+                    !isDisValidate
+                      ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
+                      : []
+                  "
+                />
+              </div>
+              <div class="col-2">
+                <q-select
+                  ref="positionLevelRef"
+                  :class="inputEdit(isReadonly)"
+                  label="ระดับตำแหน่ง"
+                  v-model="formData.positionLevel"
+                  :disable="formData.positionType === ''"
+                  :options="levelOps"
+                  emit-value
+                  dense
+                  map-options
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :rules="
+                    !isDisValidate
+                      ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
+                      : []
+                  "
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  ref="positionExecutiveFieldRef"
+                  v-model="formData.personal"
+                  :class="inputEdit(isReadonly)"
+                  dense
+                  outlined
+                  for="#search"
+                  label="คำค้นหา"
+                  lazy-rules
+                  hide-bottom-space
+                  @keydown.enter.prevent="filterFn"
+                />
+              </div>
+              <q-space />
+              <q-select
+                for="#select"
+                v-model="visibleColumnsResult"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columnsResult"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="col-xs-12 col-sm-3 col-md-2"
+              />
+              <div class="col-12">
+                <d-table
+                  flat
+                  :columns="columnsResult"
+                  :rows="rowResult"
+                  row-key="id"
+                  dense
+                  hide-bottom
+                  class="custom-header-table-expand"
+                >
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <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
+                        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 }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        </q-card-actions>
+        </form>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>

src/modules/02_organizationalNew/components/tableTree.vue

@@ -20,7 +20,7 @@ import DialogPositionDetail from "@/modules/02_organizationalNew/components/Posi
 import DialogSort from "@/modules/02_organizationalNew/components/DialogSortPosition.vue";
 import DialogMovePos from "@/modules/02_organizationalNew/components/DialogMovePos.vue";
 import DialogHistoryPos from "@/modules/02_organizationalNew/components/DialogHistoryPos.vue";
-
+import DialogSelectPerson from "@/modules/02_organizationalNew/components/DialogSelectPerson.vue";
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
@@ -51,6 +51,7 @@ const props = defineProps({
   },
 });
 
+const modalSelectPerson = ref<boolean>(false);
 const rowId = ref<string>("");
 const actionType = ref<string>("");
 /** ListMenu Table*/
@@ -314,6 +315,11 @@ function updatePagination(newPagination: NewPagination) {
   reqMaster.value.pageSize = newPagination.rowsPerPage;
   reqMaster.value.page = 1;
 }
+
+function openSelectPerson(data: DataPosition[]) {
+  modalSelectPerson.value = true;
+  dataDetailPos.value = data;
+}
 </script>
 <template>
   <!-- TOOLBAR -->
@@ -460,17 +466,27 @@ function updatePagination(newPagination: NewPagination) {
               size="12px"
             >
               <q-menu>
-                <q-list
+                <q-list dense style="min-width: 150px">
-                  dense
-                  style="min-width: 150px"
-                  v-for="(item, index) in stroe.typeOrganizational === 'draft'
-                    ? listMenu
-                    : listMenu.filter(
-                        (e) => e.type === 'HISTORY' || e.type === 'VIEWDETIAL'
-                      )"
-                  :key="index"
-                >
                   <q-item
+                    v-if="props.row.positionIsSelected == 'ว่าง'"
+                    clickable
+                    v-close-popup
+                    @click="openSelectPerson(props.row)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon color="primary" size="17px" name="edit" />
+                        <div class="q-pl-md">เลือกคนครอง</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-for="(item, index) in stroe.typeOrganizational === 'draft'
+                      ? listMenu
+                      : listMenu.filter(
+                          (e) => e.type === 'HISTORY' || e.type === 'VIEWDETIAL'
+                        )"
+                    :key="index"
                     clickable
                     v-close-popup
                     @click="
@@ -605,6 +621,11 @@ function updatePagination(newPagination: NewPagination) {
 
   <!-- ประวัติตำแหน่ง -->
   <DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
+
+  <DialogSelectPerson
+    v-model:modal="modalSelectPerson"
+    :dataDetailPos="dataDetailPos"
+  />
 </template>
 
 <style lang="scss" scoped>

src/modules/02_organizationalNew/interface/index/organizational.ts

@@ -75,4 +75,5 @@ interface DataTree {
   children?: DataTree[];
 }
 
+
 export type { DataPosition, Position, FormDetailPosition, DataTree };