แก้รายการเกษียณ

src/modules/06_retirement/components/ListRetirement/TableList.vue

@@ -33,105 +33,9 @@ const filter = ref<string>("");
 const statusUpload = ref<boolean>();
 const modalEdit = ref<boolean>(false);
 const textReport = ref<string>("");
-const columns = ref<any["columns"]>([
+const employeeType = ref<string>("OFFICER")
-  {
-    name: "order",
-    label: "ลำดับ",
-    title: "ลำดับ",
-    field: "order",
-    align: "left",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    title: "ชื่อ - นามสกุล",
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationOrganization",
-    align: "left",
-    label: "สังกัด",
-    title: "สังกัด",
-    field: "organizationOrganization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionEmployeeGroup",
-    align: "left",
-    label: "กลุ่มงาน",
-    title: "กลุ่มงาน",
-    // subtitle: "ในสายงาน/ระดับ",
-    field: "positionEmployeeGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionEmployeePosition",
-    align: "left",
-    label: "ตำแหน่ง",
-    title: "ตำแหน่ง",
-    // subtitle: "ประเภท",
-    field: "positionEmployeePosition",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionEmployeeLevel",
-    align: "left",
-    label: "ระดับชั้น",
-    title: "ระดับชั้น",
-    // subtitle: "ทางการบริหาร",
-    field: "positionEmployeeLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
 
-  {
+const columns = ref<any["columns"]>([])
-    name: "positionNumber",
-    align: "left",
-    label: "ตำแหน่ง (เลขที่) ",
-    title: "ตำแหน่ง",
-    subtitle: "เลขที่",
-    field: "positionNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "govGroup",
-    align: "left",
-    label: "ส่วนราชการ (ระดับฝ่าย/กลุ่มงาน/ส่วน)",
-    title: "ส่วนราชการ",
-    subtitle: "ระดับฝ่าย/กลุ่มงาน/ส่วน",
-    field: "govGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "govOffice",
-    align: "left",
-    label: "ส่วนราชการ (ระดับสถาบัน/สำนักงาน/กอง)",
-    title: "ส่วนราชการ",
-    subtitle: "ระดับสถาบัน/สำนักงาน/กอง",
-    field: "govOffice",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "bureau",
-    align: "left",
-    label: "หน่วยงาน",
-    title: "หน่วยงาน",
-    field: "bureau",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
 const rows = ref<any>([]);
 const visibleColumns = ref<string[]>([
   "order",
@@ -140,6 +44,8 @@ const visibleColumns = ref<string[]>([
   "positionEmployeePosition",
   "positionEmployeeLevel",
   "positionEmployeeGroup",
+  "organizationAgency",
+  "organizationGovernmentAgency",
   "positionNumber",
   "govGroup",
   "govOffice",
@@ -172,6 +78,8 @@ const fecthlistprofile = async (id: string) => {
       statusReport.value = res.data.result.json;
       typeReport.value = res.data.result.typeReport;
       textReport.value = res.data.result.detail;
+      employeeType.value = res.data.result.type;
+
       // รายชื่อผู้เกษียณอายุราชการ
       rows.value = res.data.result.profile.map((e: any) => ({
         id: e.id,
@@ -179,10 +87,12 @@ const fecthlistprofile = async (id: string) => {
         order: e.order,
         name: e.fullName,
         organizationOrganization: e.organizationOrganization,
-        positionEmployeePosition: e.positionEmployeePosition,
+        positionEmployeePosition: res.data.result.type == 'OFFICER' ? e.positionType : e.positionEmployeePosition,
-        positionEmployeeLevel: e.positionEmployeeLevel,
+        positionEmployeeLevel: res.data.result.type == 'OFFICER' ? (e.positionExecutive != null ? e.positionExecutive : "-") : e.positionEmployeeLevel,
-        positionNumber: e.posNoEmployee,
+        positionNumber: res.data.result.type == 'OFFICER' ? e.posNo : e.posNoEmployee,
-        positionEmployeeGroup: e.positionEmployeeGroup,
+        positionEmployeeGroup: res.data.result.type == 'OFFICER' ? e.position : e.positionEmployeeGroup,
+        organizationAgency: e.organizationAgency,
+        organizationGovernmentAgency: e.organizationGovernmentAgency,
         bureau: e.oc,
         reason: e.reason,
         remove: e.remove,
@@ -195,9 +105,110 @@ const fecthlistprofile = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
+      columns.value = [
+        {
+          name: "order",
+          label: "ลำดับ",
+          title: "ลำดับ",
+          field: "order",
+          align: "left",
+          headerStyle: "font-size: 14px",
+          style: "font-size: 14px",
+        },
+        {
+          name: "name",
+          align: "left",
+          label: "ชื่อ - นามสกุล",
+          title: "ชื่อ - นามสกุล",
+          field: "name",
+          headerStyle: "font-size: 14px",
+          style: "font-size: 14px",
+        },
+        {
+          name: "organizationOrganization",
+          align: "left",
+          label: "สังกัด",
+          title: "สังกัด",
+          field: "organizationOrganization",
+          headerStyle: "font-size: 14px",
+          style: "font-size: 14px",
+        },
+        {
+          name: "positionEmployeeGroup",
+          align: "left",
+          label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ในสายงาน/ระดับ)" : "กลุ่มงาน",
+          title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "กลุ่มงาน",
+          subtitle: employeeType.value == "OFFICER" ? "ในสายงาน/ระดับ" : "",
+          field: "positionEmployeeGroup",
+          headerStyle: "font-size: 14px",
+          style: "font-size: 14px",
+        },
+        {
+          name: "positionEmployeePosition",
+          align: "left",
+          label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ประเภท)" : "ตำแหน่ง",
+          title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "ตำแหน่ง",
+          subtitle: employeeType.value == "OFFICER" ? "ประเภท" : "",
+          field: "positionEmployeePosition",
+          headerStyle: "font-size: 14px",
+          style: "font-size: 14px",
+        },
+        {
+          name: "positionEmployeeLevel",
+          align: "left",
+          label: employeeType.value == "OFFICER" ? "ตำแหน่ง (ทางการบริหาร)" : "ระดับชั้น",
+          title: employeeType.value == "OFFICER" ? "ตำแหน่ง" : "ระดับชั้น",
+          subtitle: employeeType.value == "OFFICER" ? "ทางการบริหาร" : "",
+          field: "positionEmployeeLevel",
+          headerStyle: "font-size: 14px",
+          style: "font-size: 14px",
+        },
+
+        {
+          name: "positionNumber",
+          align: "left",
+          label: "ตำแหน่ง (เลขที่) ",
+          title: "ตำแหน่ง",
+          subtitle: "เลขที่",
+          field: "positionNumber",
+          headerStyle: "font-size: 14px",
+          style: "font-size: 14px",
+        },
+        {
+          name: "organizationAgency",
+          align: "left",
+          label: "ส่วนราชการ (ระดับฝ่าย/กลุ่มงาน/ส่วน)",
+          title: "ส่วนราชการ",
+          subtitle: "ระดับฝ่าย/กลุ่มงาน/ส่วน",
+          field: "organizationAgency",
+          headerStyle: "font-size: 14px",
+          style: "font-size: 14px",
+        },
+        {
+          name: "organizationGovernmentAgency",
+          align: "left",
+          label: "ส่วนราชการ (ระดับสถาบัน/สำนักงาน/กอง)",
+          title: "ส่วนราชการ",
+          subtitle: "ระดับสถาบัน/สำนักงาน/กอง",
+          field: "organizationGovernmentAgency",
+          headerStyle: "font-size: 14px",
+          style: "font-size: 14px",
+        },
+        {
+          name: "bureau",
+          align: "left",
+          label: "หน่วยงาน",
+          title: "หน่วยงาน",
+          field: "bureau",
+          headerStyle: "font-size: 14px",
+          style: "font-size: 14px",
+        },
+      ];
+
       hideLoader();
     });
 };
+
 // เช็คสถานะการอัพโหลด
 const fecthCheck = async (id: string) => {
   await http
@@ -371,154 +382,69 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="backHistory" />
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="backHistory"
-    />
     รายชื่อผู้เกษียณอายุราชการ
   </div>
   <div>
     <q-card class="col-12 q-pa-md">
       <div class="row col-12 q-pb-sm">
         <div class="row">
-          <AddList
+          <AddList :dataProfile="dataProfile" :retireld="retireld" :profile-id="profileId" :UpdateListId="UpdateListId"
-            :dataProfile="dataProfile"
+            v-if="statusReport === false &&
-            :retireld="retireld"
-            :profile-id="profileId"
-            :UpdateListId="UpdateListId"
-            v-if="
-              statusReport === false &&
               (typeReport == 'ADD' || typeReport == '' || typeReport == null) &&
               statusUpload !== true
-            "
+              " />
-          />
           <q-btn color="primary" flat round icon="mdi-dots-vertical">
             <q-menu>
               <q-list style="min-width: 100px">
-                <q-item
+                <q-item clickable v-close-popup type="a" @click="openmodalEditReport()" target="_blank">
-                  clickable
+                  <q-item-section avatar><q-icon color="primary" name="mdi-pencil" /></q-item-section>
-                  v-close-popup
-                  type="a"
-                  @click="openmodalEditReport()"
-                  target="_blank"
-                >
-                  <q-item-section avatar
-                    ><q-icon color="primary" name="mdi-pencil"
-                  /></q-item-section>
                   <q-item-section>แก้ไข มติ อ.ก.ก. </q-item-section>
                 </q-item>
                 <q-separator />
-                <q-item
+                <q-item clickable v-close-popup type="a" @click="downloadAttachment('pdf', retireld)" target="_blank">
-                  clickable
+                  <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
-                  v-close-popup
-                  type="a"
-                  @click="downloadAttachment('pdf', retireld)"
-                  target="_blank"
-                >
-                  <q-item-section avatar
-                    ><q-icon color="red" name="mdi-file-pdf"
-                  /></q-item-section>
                   <q-item-section>ไฟล์ .PDF</q-item-section>
                 </q-item>
-                <q-item
+                <q-item clickable v-close-popup type="a" @click="downloadAttachment('docx', retireld)" target="_blank">
-                  clickable
+                  <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
-                  v-close-popup
-                  type="a"
-                  @click="downloadAttachment('docx', retireld)"
-                  target="_blank"
-                >
-                  <q-item-section avatar
-                    ><q-icon color="blue" name="mdi-file-word"
-                  /></q-item-section>
                   <q-item-section>ไฟล์ .docx</q-item-section>
                 </q-item>
               </q-list>
             </q-menu>
             <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
           </q-btn>
-          <q-file
+          <q-file bg-color="white" clearable outlined dense v-model="fileUpload" accept=".pdf"
-            bg-color="white"
+            :style="fileUpload === null ? 'width: 150px' : 'width: auto'" label="อัปโหลดไฟล์"
-            clearable
+            v-if="statusUpload !== true">
-            outlined
-            dense
-            v-model="fileUpload"
-            accept=".pdf"
-            :style="fileUpload === null ? 'width: 150px' : 'width: auto'"
-            label="อัปโหลดไฟล์"
-            v-if="statusUpload !== true"
-          >
             <template v-slot:prepend>
               <q-icon color="light-blue" name="attach_file" />
               <q-tooltip>อัปโหลดไฟล์</q-tooltip>
             </template>
           </q-file>
-          <q-btn
+          <q-btn flat round color="light-blue" icon="upload" @click="uploadFile(fileUpload)" v-if="fileUpload !== null" />
-            flat
-            round
-            color="light-blue"
-            icon="upload"
-            @click="uploadFile(fileUpload)"
-            v-if="fileUpload !== null"
-          />
         </div>
         <q-space />
         <div class="row">
           <q-tabs shrink>
-            <q-input
+            <q-input borderless outlined dense debounce="300" v-model="filter" placeholder="ค้นหา"
-              borderless
+              style="max-width: 200px" class="q-ml-sm">
-              outlined
-              dense
-              debounce="300"
-              v-model="filter"
-              placeholder="ค้นหา"
-              style="max-width: 200px"
-              class="q-ml-sm"
-            >
               <template v-slot:append>
                 <q-icon name="search" />
               </template>
             </q-input>
-            <q-select
+            <q-select v-model="visibleColumns" multiple outlined dense options-dense
-              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns" emit-value map-options :options="columns" option-value="name"
-              multiple
+              options-cover style="min-width: 150px" class="gt-xs q-ml-sm">
-              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"
-              class="gt-xs q-ml-sm"
-            >
             </q-select>
           </q-tabs>
         </div>
       </div>
 
       <div>
-        <q-table
+        <q-table flat dense bordered :rows="rows" :columns="columns" row-key="order" class="custom-header-table"
-          flat
+          :filter="filter" :visible-columns="visibleColumns" no-data-label="ไม่มีข้อมูล"
-          dense
+          :pagination-label="paginationLabel" v-model:pagination="pagination">
-          bordered
-          :rows="rows"
-          :columns="columns"
-          row-key="order"
-          class="custom-header-table"
-          :filter="filter"
-          :visible-columns="visibleColumns"
-          no-data-label="ไม่มีข้อมูล"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -530,45 +456,29 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 </div>
               </q-th>
               <q-th auto-width />
-              <q-th
+              <q-th auto-width v-if="(typeReport === 'EDIT' ||
-                auto-width
+                  typeReport === null ||
-                v-if="
+                  typeReport === '') &&
-                  (typeReport === 'EDIT' ||
+                statusReport === false &&
-                    typeReport === null ||
+                statusUpload !== true
-                    typeReport === '') &&
+                " />
-                  statusReport === false &&
-                  statusUpload !== true
-                "
-              />
               <q-th auto-width v-else></q-th>
-              <q-th
+              <q-th auto-width v-if="(typeReport === 'REMOVE' ||
-                auto-width
+                  typeReport === null ||
-                v-if="
+                  typeReport === '') &&
-                  (typeReport === 'REMOVE' ||
+                statusReport === false &&
-                    typeReport === null ||
+                statusUpload !== true
-                    typeReport === '') &&
+                " />
-                  statusReport === false &&
-                  statusUpload !== true
-                "
-              />
               <q-th auto-width v-else></q-th>
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr
+            <q-tr :props="props" class="cursor-pointer" :style="props.row.profileId === profileId && 'color: #26a69a;'"
-              :props="props"
+              @click.stop="router.push(`/registry/${props.row.profileId}`)">
-              class="cursor-pointer"
-              :style="props.row.profileId === profileId && 'color: #26a69a;'"
-              @click.stop="router.push(`/registry/${props.row.profileId}`)"
-            >
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <q-td key="name" :props="props">{{ props.row.name }}</q-td>
-              <q-td
+              <q-td class="table_ellipsis" key="organizationOrganization" :props="props">{{
-                class="table_ellipsis"
+                props.row.organizationOrganization }}</q-td>
-                key="organizationOrganization"
-                :props="props"
-                >{{ props.row.organizationOrganization }}</q-td
-              >
               <q-td key="positionEmployeeGroup" :props="props">{{
                 props.row.positionEmployeeGroup
               }}</q-td>
@@ -582,81 +492,51 @@ const paginationLabel = (start: number, end: number, total: number) => {
               <q-td key="positionNumber" :props="props">{{
                 props.row.positionNumber
               }}</q-td>
-              <q-td key="govGroup" :props="props">{{
+              <q-td key="organizationAgency" :props="props">{{
-                props.row.govGroup
+                props.row.organizationAgency
               }}</q-td>
-              <q-td key="govOffice" :props="props">{{
+              <q-td key="organizationGovernmentAgency" :props="props">{{
-                props.row.govOffice
+                props.row.organizationGovernmentAgency
               }}</q-td>
               <q-td class="table_ellipsis" key="bureau" :props="props">{{
                 props.row.bureau
               }}</q-td>
               <q-td auto-width></q-td>
-              <q-td
+              <q-td auto-width v-if="(typeReport === 'EDIT' ||
-                auto-width
-                v-if="
-                  (typeReport === 'EDIT' ||
                     typeReport === null ||
                     typeReport === '') &&
                   statusReport === false &&
                   statusUpload !== true
-                "
+                  ">
-              >
+                <q-btn flat round color="primary" icon="mdi-pencil" dense @click.stop="
-                <q-btn
+                  (modalNote = true),
-                  flat
+                  (note = props.row.reason),
-                  round
+                  (action = 'edit'),
-                  color="primary"
+                  (retireProfileId = props.row.id)
-                  icon="mdi-pencil"
+                  ">
-                  dense
-                  @click.stop="
-                    (modalNote = true),
-                      (note = props.row.reason),
-                      (action = 'edit'),
-                      (retireProfileId = props.row.id)
-                  "
-                >
                   <q-tooltip>กรอกเหตุผล</q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width v-else></q-td>
-              <q-td
+              <q-td auto-width v-if="(typeReport === 'REMOVE' ||
-                auto-width
+                  typeReport === null ||
-                v-if="
+                  typeReport === '') &&
-                  (typeReport === 'REMOVE' ||
+                statusReport === false &&
-                    typeReport === null ||
+                statusUpload !== true
-                    typeReport === '') &&
+                ">
-                  statusReport === false &&
+                <q-btn flat round class="text-red-14" icon="mdi-delete" dense @click.stop="
-                  statusUpload !== true
+                  (modalNote = true),
-                "
+                  (action = 'delete'),
-              >
+                  (note = props.row.reason),
-                <q-btn
+                  (retireProfileId = props.row.id)
-                  flat
+                  "><q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
-                  round
-                  class="text-red-14"
-                  icon="mdi-delete"
-                  dense
-                  @click.stop="
-                    (modalNote = true),
-                      (action = 'delete'),
-                      (note = props.row.reason),
-                      (retireProfileId = props.row.id)
-                  "
-                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
-                >
               </q-td>
               <q-td auto-width v-else></q-td>
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination
+            <q-pagination v-model="pagination.page" color="primary" :max="scope.pagesNumber" :max-pages="5" size="sm"
-              v-model="pagination.page"
+              boundary-links direction-links></q-pagination>
-              color="primary"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -671,46 +551,21 @@ const paginationLabel = (start: number, end: number, total: number) => {
       <q-card-section class="q-pt-none bg-grey-1">
         <div class="row q-col-gutter-sm">
           <div class="col-12">
-            <q-input
+            <q-input outlined dense lazy-rules v-model="note" :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-              outlined
+              :label="`${'กรอกเหตุผล'}`" type="textarea" />
-              dense
-              lazy-rules
-              v-model="note"
-              :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
-              :label="`${'กรอกเหตุผล'}`"
-              type="textarea"
-            />
           </div>
         </div>
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn
+        <q-btn v-if="action === 'delete'" label="บันทึก" color="secondary" :disable="visibleNote" @click="clickDelete" />
-          v-if="action === 'delete'"
+        <q-btn v-else label="บักทึก" color="secondary" @click="saveNote" :disable="visibleNote" />
-          label="บันทึก"
-          color="secondary"
-          :disable="visibleNote"
-          @click="clickDelete"
-        />
-        <q-btn
-          v-else
-          label="บักทึก"
-          color="secondary"
-          @click="saveNote"
-          :disable="visibleNote"
-        />
       </q-card-actions>
     </q-card>
   </q-dialog>
 
-  <DialogPopupReason
+  <DialogPopupReason :modal="modalEdit" title="แก้ไขมติ อ.ก.ก." label="มติ อ.ก.ก." :click-close="closemodalEditReport"
-    :modal="modalEdit"
+    :savaForm="saveEdiitReport" :textReport="textReport" />
-    title="แก้ไขมติ อ.ก.ก."
-    label="มติ อ.ก.ก."
-    :click-close="closemodalEditReport"
-    :savaForm="saveEdiitReport"
-    :textReport="textReport"
-  />
 </template>
 
 <style lang="scss" scope>