ทะเบียนประวัติ: UI ความสามารถพิเศษ+ประวัติ

src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue

@@ -495,6 +495,7 @@ function deleteChildren(items: any) {
               class="col"
               outlined
               hide-bottom-space
+              bg-color="white"
               dense
               v-model="fatherData.citizenId"
               :label="`${'เลขประจำตัวประชาชน'}`"
@@ -505,6 +506,7 @@ function deleteChildren(items: any) {
               :disable="!fatherData.isHaveInfo"
               class="col"
               outlined
+              bg-color="white"
               lazy-rules
               dense
               v-model="fatherData.prefix"
@@ -518,6 +520,7 @@ function deleteChildren(items: any) {
               class="col"
               outlined
               dense
+              bg-color="white"
               lazy-rules
               v-model="fatherData.firstName"
               :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
@@ -529,6 +532,7 @@ function deleteChildren(items: any) {
               class="col"
               outlined
               dense
+              bg-color="white"
               lazy-rules
               v-model="fatherData.lastName"
               :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
@@ -539,6 +543,7 @@ function deleteChildren(items: any) {
               class="col"
               outlined
               dense
+              bg-color="white"
               v-model="fatherData.job"
               label="อาชีพ"
             />
@@ -582,6 +587,7 @@ function deleteChildren(items: any) {
               outlined
               hide-bottom-space
               dense
+              bg-color="white"
               v-model="motherData.citizenId"
               :label="`${'เลขประจำตัวประชาชน'}`"
               maxlength="13"
@@ -595,6 +601,7 @@ function deleteChildren(items: any) {
               v-model="motherData.prefix"
               :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
               lazy-rules
+              bg-color="white"
               :options="motherData.optionPrefix"
               label="คำนำหน้าชื่อ"
             />
@@ -602,6 +609,7 @@ function deleteChildren(items: any) {
               :disable="!motherData.isHaveInfo"
               class="col"
               outlined
+              bg-color="white"
               :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
               dense
               lazy-rules
@@ -613,6 +621,7 @@ function deleteChildren(items: any) {
               :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
               class="col"
               outlined
+              bg-color="white"
               lazy-rules
               dense
               v-model="motherData.lastName"
@@ -622,6 +631,7 @@ function deleteChildren(items: any) {
               :disable="!motherData.isHaveInfo"
               class="col"
               outlined
+              bg-color="white"
               dense
               v-model="motherData.job"
               label="อาชีพ"
@@ -666,6 +676,7 @@ function deleteChildren(items: any) {
               outlined
               hide-bottom-space
               dense
+              bg-color="white"
               v-model="spouseData.citizenId"
               :label="`${'เลขประจำตัวประชาชน'}`"
               maxlength="13"
@@ -676,6 +687,7 @@ function deleteChildren(items: any) {
               :disable="!spouseData.isHave"
               outlined
               dense
+              bg-color="white"
               v-model="spouseData.prefix"
               :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
               :options="spouseData.optionPrefix"
@@ -683,6 +695,7 @@ function deleteChildren(items: any) {
             />
             <q-input
               class="col"
+              bg-color="white"
               :disable="!spouseData.isHave"
               outlined
               dense
@@ -696,6 +709,7 @@ function deleteChildren(items: any) {
               :disable="!spouseData.isHave"
               outlined
               dense
+              bg-color="white"
               v-model="spouseData.lastName"
               label="นามสกุล"
             />
@@ -704,6 +718,7 @@ function deleteChildren(items: any) {
               :disable="!spouseData.isHave"
               outlined
               dense
+              bg-color="white"
               v-model="spouseData.job"
               label="อาชีพ"
             />
@@ -756,6 +771,7 @@ function deleteChildren(items: any) {
                 v-model="items.citizenId"
                 :label="`${'เลขประจำตัวประชาชน'}`"
                 maxlength="13"
+                bg-color="white"
                 mask="#############"
               />
               <q-select
@@ -763,6 +779,7 @@ function deleteChildren(items: any) {
                 outlined
                 dense
                 lazy-rules
+                bg-color="white"
                 v-model="items.prefix"
                 :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                 :options="childrenOptionPrefix"
@@ -773,6 +790,7 @@ function deleteChildren(items: any) {
                 outlined
                 dense
                 lazy-rules
+                bg-color="white"
                 v-model="items.firstName"
                 :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
                 label="ชื่อ"
@@ -781,6 +799,7 @@ function deleteChildren(items: any) {
                 class="col"
                 outlined
                 lazy-rules
+                bg-color="white"
                 dense
                 v-model="items.lastName"
                 :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
@@ -789,6 +808,7 @@ function deleteChildren(items: any) {
               <q-input
                 class="col"
                 outlined
+                bg-color="white"
                 dense
                 v-model="items.job"
                 label="อาชีพ"

src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue

@@ -170,7 +170,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const isDate = ref<string>("false");
 const educationOption = ["ใช่", "ไม่ใช่"];
-
+const historyDialog = ref<boolean>(false);
 const educationData = reactive({
   level: "",
   institute: "",
@@ -191,13 +191,24 @@ const educationData = reactive({
   note: "",
 });
 
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+
 const row = [
   {
     level: "ประกาศนียบัตรบัณฑิต",
     institute: "เชียงใหม่วิทย์",
     degree: "ปริญญาตรี",
     field: "วิศวะคอม",
-    gpa: "",
+    gpa: "4.5",
     country: "อังกฤษ",
     duration: "3 ปี",
     durationYear: "4 ปี",
@@ -293,6 +304,9 @@ async function onSubmit() {
 function closeDialog() {
   addDataDialog.value = false;
 }
+function closeHistoryDialog() {
+  historyDialog.value = false;
+}
 
 watch(
   () => isDate.value,
@@ -415,7 +429,15 @@ watch(
           </div>
         </q-td>
         <q-td auto-width>
-          <q-btn color="info" flat dense round size="14px" icon="mdi-history" />
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="() => (historyDialog = true)"
+          />
         </q-td>
       </q-tr>
     </template>
@@ -428,7 +450,13 @@ watch(
             <q-btn flat round color="primary" icon="edit">
               <q-tooltip>แก่ไขข้อมุล</q-tooltip>
             </q-btn>
-            <q-btn flat round color="blue" icon="history">
+            <q-btn
+              flat
+              round
+              color="blue"
+              icon="history"
+              @click="historyDialog = true"
+            >
               <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
             </q-btn>
           </q-card-actions>
@@ -808,6 +836,93 @@ watch(
       </q-form>
     </q-card>
   </q-dialog>
+
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            tittle="ประวัติแก้ไขประวัติการศึกษา"
+            :close="closeHistoryDialog"
+          />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section>
+          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+            <q-space />
+            <q-input
+              dense
+              outlined
+              bg-color="white"
+              v-model="formFilter.keyword"
+              label="ค้นหา"
+              class="q-mr-sm"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              bg-color="white"
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </q-toolbar>
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="row"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :rows-per-page-options="[20, 50, 100]"
+            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
+                    v-if="
+                      col.name === 'startDate' ||
+                      col.name === 'finishDate' ||
+                      col.name === 'graduateDate'
+                    "
+                  >
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped>

src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue

@@ -1,6 +1,427 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { QForm, useQuasar } from "quasar";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const mode = ref<string>("table");
+const { dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const historyDialog = ref<boolean>(false);
+const rows = [
+  {
+    field: "กีต้าร์",
+    detail: "ตะแน่วๆ",
+    remark: "เล่นดีมาก",
+    reference: "อ้างอิง",
+  },
+  {
+    field: "ว่ายน้ำ",
+    detail: "ตะแน่วๆ",
+    remark: "เล่นดีมาก",
+    reference: "อ้างอิง",
+  },
+  {
+    field: "กีฬา",
+    detail: "ตะแน่วๆ",
+    remark: "เล่นดีมาก",
+    reference: "อ้างอิง",
+  },
+  {
+    field: "การเรียน",
+    detail: "ตะแน่วๆ",
+    remark: "เล่นดีมาก",
+    reference: "อ้างอิง",
+  },
+];
+const dialog = ref<boolean>(false);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+
+const specialSkill = reactive({
+  field: "",
+  detail: "",
+  remark: "",
+  reference: "",
+});
+
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+
+const visibleColumns = ref<string[]>([
+  "field",
+  "detail",
+  "remark",
+  "reference",
+]);
+function closeDialog() {
+  dialog.value = false;
+}
+
+function closeHistoryDialog() {
+  historyDialog.value = false;
+}
+
+function validateForm() {
+  onSubmit();
+}
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      closeDialog();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+</script>
 <template>
-  <div>6</div>
+  <div class="row items-center q-gutter-sm">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      ความสามารถพิเศษ
+    </div>
+  </div>
+  <q-toolbar style="padding: 0px" class="text-primary">
+    <q-btn flat round dense icon="add" @click="() => (dialog = true)">
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      dense
+      v-if="mode === 'table'"
+      outlined
+      v-model="formFilter.keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </q-input>
+
+    <q-select
+      v-model="visibleColumns"
+      multiple
+      outlined
+      v-if="mode === 'table'"
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="q-mr-sm"
+    />
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
+
+  <d-table
+    :grid="mode === 'card'"
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="rows"
+    :paging="true"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[20, 50, 100]"
+    :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" v-if="mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div>{{ col.value ? col.value : "-" }}</div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="historyDialog = true"
+          >
+            <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+      >
+        <q-card bordered>
+          <q-card-actions align="right">
+            <q-btn flat round color="primary" icon="edit">
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
+            <q-btn
+              flat
+              round
+              color="blue"
+              icon="history"
+              @click="historyDialog = true"
+            >
+              <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+          <q-list>
+            <q-item v-for="col in props.cols" :key="col.name">
+              <q-item-section>
+                <q-item-label>{{ col.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label caption>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 40%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header tittle="เพิ่มความสามารถพิเศษ" :close="closeDialog" />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section class="col q-gutter-sm q-pr-lg">
+          <div class="row q-gutter-sm q-ml-none">
+            <q-input
+              outlined
+              class="col"
+              dense
+              bg-color="white"
+              v-model="specialSkill.field"
+              label="ด้าน"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
+            />
+            <q-input
+              outlined
+              class="col"
+              dense
+              bg-color="white"
+              v-model="specialSkill.detail"
+              label="รายละเอียด"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+            />
+          </div>
+          <q-input
+            class="col-12"
+            outlined
+            dense
+            bg-color="white"
+            v-model="specialSkill.remark"
+            label="หมายเหตุ"
+          />
+          <q-input
+            outlined
+            dense
+            class="col-12"
+            bg-color="white"
+            v-model="specialSkill.reference"
+            label="เอกสารอ้างอิง"
+          />
+        </q-card-section>
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            tittle="ประวัติแก้ไขประวัติการศึกษา"
+            :close="closeHistoryDialog"
+          />
+        </q-card-section>
+        <q-separator color="grey-4" />
+        <q-card-section>
+          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+            <q-space />
+            <q-input
+              dense
+              outlined
+              bg-color="white"
+              v-model="formFilter.keyword"
+              label="ค้นหา"
+              class="q-mr-sm"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              bg-color="white"
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </q-toolbar>
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :rows-per-page-options="[20, 50, 100]"
+            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-tr>
+            </template>
+          </d-table>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>