รายการตำแหน่งทางการบริหาร

src/api/02_organizational/api.organization.ts

@@ -27,4 +27,6 @@ export default {
   orgPosSort: `${orgPos}/sort`,
   organizationShortName: `${organization}/sort`,
   organizationPublishGet: `${organization}/get/publish`,
+
+  orgPosExecutiveById:(id:string)=> `${orgPos}/executive/${id}`,
 };

src/modules/01_metadataNew/components/position/04ListExecutive.vue

@@ -1,3 +1,242 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import type {
+  RowListForm,
+  ListMenu,
+} from "@/modules/01_metadataNew/interface/request/position";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogAdd from '@/modules/01_metadataNew/components/position/DialogAddExecutive.vue'
+import { useCounterMixin } from "@/stores/mixin";
+
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = mixin;
+
+const dataEdit = ref<any>();
+const isEdit = ref<boolean>(false);
+const modalAdd = ref<boolean>(false);
+const filterKeyword = ref<string>("");
+const rows = ref<RowListForm[]>([]);
+
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "คัดลอก",
+    icon: "mdi-pencil",
+    type: "copy",
+    color: "teal-6",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "remove",
+    color: "red",
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "posExecutiveName",
+  "posExecutivePriority",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    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: "posExecutivePriority",
+    align: "left",
+    label: "ลำดับความสำคัญ",
+    sortable: true,
+    field: "posExecutivePriority",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.orgPosExecutive)
+    .then((res) => {
+      const dataList = res.data.result;
+      rows.value = dataList;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+function popUpAdd() {
+  modalAdd.value = true;
+}
+
+function editPopUp(data: RowListForm[]) {
+  dataEdit.value = data;
+  modalAdd.value = true;
+  isEdit.value = true;
+}
+
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgPosExecutiveById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        getData()
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+
 <template>
-    ตำแหน่งทางการบริหาร 
- </template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการตำแหน่งทางการบริหาร
+  </div>
+  <div class="row col-12 q-col-gutter-x-sm">
+    <div class="col-2">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="primary"
+        icon="mdi-plus"
+        @click="popUpAdd()"
+      >
+        <q-tooltip>เพิ่มตำแหน่งทางการบริหาร</q-tooltip>
+      </q-btn>
+    </div>
+
+    <q-space />
+    <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
+    <q-select
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+    />
+  </div>
+  <div class="col-12 q-mt-sm">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rows"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      class="custom-header-table"
+      :visible-columns="visibleColumns"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th
+            v-for="col in props.cols"
+            :key="col.name"
+            :props="props"
+            style="color: #000000; font-weight: 500"
+          >
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width></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-td auto-width>
+            <q-btn
+              flat
+              dense
+              icon="mdi-dots-vertical"
+              class="q-pa-none q-ml-xs"
+              color="grey-13"
+            >
+              <q-menu anchor="bottom middle" self="top middle">
+                <q-list dense v-for="(item, index) in listMenu" :key="index">
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="
+                      item.type === 'copy'
+                        ? editPopUp(props.row)
+                        : deletePos(props.row.id)
+                    "
+                  >
+                    <q-item-section avatar>
+                      <q-icon :color="item.color" :name="item.icon" size="sm" />
+                    </q-item-section>
+                    <q-item-section>{{ item.label }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
+
+  <DialogAdd
+  v-model:executive="modalAdd"
+  v-model:form-data="dataEdit"
+  v-model:edit="isEdit"
+  :get-data="getData"
+  />
+</template>

src/modules/01_metadataNew/components/position/DialogAddExecutive.vue

@@ -0,0 +1,213 @@
+<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 DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  FormExecutiveRef,
+  RowListForm,
+} from "@/modules/01_metadataNew/interface/request/position/index";
+import { useCounterMixin } from "@/stores/mixin";
+import { bo } from "@fullcalendar/core/internal-common";
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const formExecutive = reactive<RowListForm>({
+  id: "",
+  posExecutiveName: "",
+  posExecutivePriority: null,
+});
+const $q = useQuasar();
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const modal = defineModel<boolean>("executive", { required: true });
+const formData = defineModel<any>("formData", { required: true });
+const isEdit = defineModel<any>("edit", { required: true });
+
+const posExecutiveNameRef = ref<Object | null>(null);
+const posExecutivePriorityRef = ref<Object | null>(null);
+
+const objectExecutiveRef: FormExecutiveRef = {
+  posExecutiveName: posExecutiveNameRef,
+  posExecutivePriority: posExecutivePriorityRef,
+};
+
+const props = defineProps({
+    getData: Function,
+})
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateFormExecutive() {
+  const hasError = [];
+  for (const key in objectExecutiveRef) {
+    if (Object.prototype.hasOwnProperty.call(objectExecutiveRef, key)) {
+      const property = objectExecutiveRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    if(isEdit.value == false){
+        onSubmit();
+    }else{
+        putSubmit()
+    }
+  }
+}
+
+/** ฟังชั่น บันทึก */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const body = {
+        posExecutiveName: formExecutive.posExecutiveName,
+        posExecutivePriority: formExecutive.posExecutivePriority, //สายงาน
+      };
+      await http
+        .post(config.API.orgPosExecutive, body)
+        .then(() => {
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+          clearForm();
+          modal.value = false;
+          props.getData?.()
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มตำแหน่ง",
+    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+/** ฟังชั่น บันทึก */
+function putSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const body = {
+        posExecutiveName: formExecutive.posExecutiveName,
+        posExecutivePriority: formExecutive.posExecutivePriority, //สายงาน
+      };
+      await http
+        .put(config.API.orgPosExecutive+`/${formExecutive.id}`, body)
+        .then(() => {
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+          clearForm();
+          modal.value = false;
+          props.getData?.()
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มตำแหน่ง",
+    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+
+async function clearForm() {
+  formExecutive.id = "";
+  formExecutive.posExecutiveName = "";
+  formExecutive.posExecutivePriority = null;
+  isEdit.value = false;
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function close() {
+  clearForm();
+  modal.value = false;
+}
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      const dataList = formData.value;
+      formExecutive.id = "";
+      formExecutive.posExecutiveName = "";
+      formExecutive.posExecutivePriority = null;
+      if (isEdit.value == true) {
+        formExecutive.id = dataList.id;
+        formExecutive.posExecutiveName = dataList.posExecutiveName;
+        formExecutive.posExecutivePriority = dataList.posExecutivePriority;
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
+      <form @submit.prevent="validateFormExecutive">
+        {{ isEdit }}
+        <DialogHeader
+          :tittle="isEdit ? `แก้ไขตำแหน่งทางการบริหาร` : 'เพิ่มตำแหน่งทางการบริหาร'"
+          :close="close"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm col-12">
+            <div class="col-6">
+              <q-input
+                ref="posExecutiveNameRef"
+                v-model="formExecutive.posExecutiveName"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#posExecutiveName"
+                label="ชื่อตำแหน่งทางการบริหาร"
+                lazy-rules
+                hide-bottom-space
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกชื่อตำแหน่งทางการบริหาร'}`,
+                ]"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                ref="posExecutivePriorityRef"
+                v-model="formExecutive.posExecutivePriority"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                type="number"
+                for="#posExecutivePriority"
+                label="ลำดับความสำคัญ"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกลำดับความสำคัญ'}`]"
+              />
+            </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>

src/modules/01_metadataNew/components/position/DialogAddPosition.vue

@@ -7,7 +7,7 @@ import type { QTableProps } from "quasar";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type {
   DataOption,
-  FormPositionSelect,
+  FormPositionSelectDialog,
   FormPositionSelectRef,
   OptionType,
   OptionLevel,
@@ -21,7 +21,7 @@ const typeOps = ref<DataOption[]>([]);
 const typeOpsMain = ref<DataOption[]>([]);
 const dataLevel = ref<any>();
 const executiveOps = ref<DataOption[]>([]);
-const formPositionSelect = reactive<FormPositionSelect>({
+const formPositionSelect = reactive<FormPositionSelectDialog>({
   positionId: "",
   positionName: "",
   positionField: "",

src/modules/01_metadataNew/interface/request/position/index.ts

@@ -7,7 +7,7 @@ interface DataOption {
   name: string;
 }
 
-interface FormPositionSelect {
+interface FormPositionSelectDialog {
   positionId: string;
   positionName: string;
   positionField: string;
@@ -28,6 +28,12 @@ interface FormPositionSelectRef {
   positionArea: object | null;
   [key: string]: any;
 }
+interface FormExecutiveRef {
+  posExecutiveName: object | null;
+  posExecutivePriority: object | null;
+
+  [key: string]: any;
+}
 
 interface OptionType {
   id: string;
@@ -77,10 +83,18 @@ interface RowDetailPositions {
   posExecutiveId: string;
 }
 
+interface RowListForm {
+  id:string
+  posExecutiveName: string
+  posExecutivePriority: number|null
+}
 
 export type {
   Pagination, DataOption, FormPositionSelect, FormPositionSelectRef, OptionType, OptionLevel,
   OptionExecutive,
   ListMenu,
-  RowDetailPositions
+  RowDetailPositions,
+  RowListForm,
+  FormPositionSelectDialog,
+  FormExecutiveRef
 };

src/modules/01_metadataNew/views/position.vue

@@ -4,7 +4,7 @@ import { ref, onMounted } from "vue";
 import ListPosition from "@/modules/01_metadataNew/components/position/01ListPosition.vue";
 import ListType from "@/modules/01_metadataNew/components/position/02ListType.vue";
 import ListExecutive from "@/modules/01_metadataNew/components/position/04ListExecutive.vue";
-const currentTab = ref<string>("list_position");
+const currentTab = ref<string>("list_executive");
 const tabs = ref<Array<any>>([]);
 
 onMounted(() => {