ระดับการศึกษา: เพิ่ม Tab ระดับการศึกษา

src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue

@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
+import { useQuasar } from "quasar";
+import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
+
+const store = usePersonalDataStore();
+const mixin = useCounterMixin();
+const { dialogRemove } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "rank",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "rank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const educationLevel = ref<string>("");
+const educationRank = ref<number>();
+const dialogStatus = ref<string>("");
+const personalName = ref<string>("ระดับการศึกษา");
+const visibleColumns = ref<string[]>([
+  "name",
+  "rank",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+]);
+
+const data = [
+  {
+    id: "1",
+    name: "เคยสมรสแต่ไม่ทราบสถานภาพสมรส",
+    rank: 1,
+    createdAt: new Date(),
+    lastUpdatedAt: new Date(),
+    lastUpdateFullName: "สาวิตรี ศรีสมัย",
+  },
+  {
+    id: "2",
+    name: "สมรส",
+    rank: 2,
+    createdAt: new Date(),
+    lastUpdatedAt: new Date(),
+    lastUpdateFullName: "System Administrator",
+  },
+  {
+    id: "3",
+    name: "แยกกันอยู่",
+    rank: 3,
+    createdAt: new Date(),
+    lastUpdatedAt: new Date(),
+    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+  },
+  {
+    id: "4",
+    name: "โสด",
+    rank: 4,
+    createdAt: new Date(),
+    lastUpdatedAt: new Date(),
+    lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+  },
+];
+
+onMounted(async () => {
+  store.fetchData(data);
+});
+</script>
+
+<template>
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <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>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    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">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </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.id">
+          <div>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <DialogForm
+    v-model:educationRank:="educationRank"
+    v-model:dialog="dialog"
+    v-model:data="educationLevel"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+  />
+</template>

src/modules/01_metadataNew/components/personal/DialogForm.vue

@@ -14,7 +14,22 @@ const data = defineModel<string>("data", {
 });
 const personalName = defineModel<string>("personalName");
 const dialogStatus = defineModel<string>("dialogStatus");
+const editId = defineModel<string>("editId");
 const dialog = defineModel<boolean>("dialog");
+const educationRank = defineModel<any>("rank");
+const props = defineProps({
+  fetchData: {
+    type: Function,
+  },
+  addData: {
+    type: Function,
+    default: () => {},
+  },
+  editData: {
+    type: Function,
+    default: () => {},
+  },
+});
 
 function closeDialog() {
   dialog.value = false;
@@ -22,6 +37,7 @@ function closeDialog() {
 
 function validateForm() {
   dataRef.value.validate();
+  educationRank.value.validate();
   onSubmit();
 }
 
@@ -30,6 +46,9 @@ async function onSubmit() {
     dialogConfirm(
       $q,
       async () => {
+        dialogStatus.value === "create"
+          ? props.addData()
+          : props.editData(editId.value);
         closeDialog();
         data.value = "";
       },
@@ -66,6 +85,24 @@ async function onSubmit() {
             hide-bottom-space
           />
         </q-card-section>
+        <q-card-section
+          class="q-pa-none"
+          v-if="personalName === 'ระดับการศึกษา'"
+        >
+          <q-input
+            ref="educationRankRef"
+            outlined
+            v-model="educationRank"
+            label="ลำดับ"
+            dense
+            type="number"
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val != undefined || 'กรุณากรอกลำดับ']"
+            hide-bottom-space
+          />
+        </q-card-section>
 
         <q-card-actions align="right">
           <q-btn