แก้ไขการแสดงผลกรณีถึงแก่กรรม

src/modules/04_registry/components/Salary.vue

@@ -2,54 +2,35 @@
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <q-form ref="myForm">
-      <ProfileTable
+      <ProfileTable :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns"
-        :rows="rows"
+        v-model:inputfilter="filter" v-model:inputvisible="visibleColumns" :add="clickAdd" name="ตำแหน่ง/เงินเดือน"
-        :columns="columns"
+        icon="mdi-cash" :statusEdit="statusEdit">
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :add="clickAdd"
-        name="ตำแหน่ง/เงินเดือน"
-        icon="mdi-cash"
-        :statusEdit="statusEdit"
-      >
         <template #columns="props">
           <q-tr :props="props">
-            <q-td
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props)"
-              v-for="col in props.cols"
+              class="cursor-pointer">
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
               <div v-if="col.name == 'date'" class="table_ellipsis">
                 {{ date2Thai(col.value) }}
               </div>
-              <div
+              <div v-else-if="props.row.salaryStatus !== 'DEATH' && (
-                v-else-if="
                   col.name == 'positionSalaryAmount' ||
                   col.name == 'mouthSalaryAmount' ||
-                  col.name == 'amount'
+                  col.name == 'amount')
-                "
+                " class="table_ellipsis">
-                class="table_ellipsis"
-              >
                 {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
               </div>
+              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name == 'position'" class="table_ellipsis">
+                ถึงแก่กรรม
+              </div>
+              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'" class="table_ellipsis">
+                -
+              </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
               </div>
             </q-td>
             <q-td auto-width>
-              <q-btn
+              <q-btn color="info" flat dense round size="14px" icon="mdi-history" @click="clickHistory(props.row)" />
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-                @click="clickHistory(props.row)"
-              />
             </q-td>
           </q-tr>
         </template>
@@ -67,46 +48,19 @@
             <div class="col-xs-12 col-sm-5 row">
               <q-card flat bordered class="fit q-pa-sm">
                 <q-scroll-area visible style="height: 70vh">
-                  <q-input
+                  <q-input outlined dense v-model="search" placeholder="ค้นหา" class="q-mb-sm">
-                    outlined
-                    dense
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
                     <template v-slot:append>
                       <q-icon name="mdi-magnify" />
                     </template>
                   </q-input>
-                  <q-tree
+                  <q-tree v-if="edit" :nodes="nodesTree" dense node-key="id" v-model:selected="selected"
-                    v-if="edit"
+                    v-model:expanded="expanded" no-selection-unset selected-color="primary" @update:selected="onSelected"
-                    :nodes="nodesTree"
+                    default-expand-all />
-                    dense
+                  <q-tree v-else :nodes="nodesTree" dense node-key="id" v-model:expanded="expanded" no-selection-unset
-                    node-key="id"
+                    selected-color="primary" @update:selected="onSelected" default-expand-all>
-                    v-model:selected="selected"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  />
-                  <q-tree
-                    v-else
-                    :nodes="nodesTree"
-                    dense
-                    node-key="id"
-                    v-model:expanded="expanded"
-                    no-selection-unset
-                    selected-color="primary"
-                    @update:selected="onSelected"
-                    default-expand-all
-                  >
                     <template v-slot:default-header="prop">
                       <div class="row items-center">
-                        <div
+                        <div class="text-primary" v-if="selected == prop.node.id">
-                          class="text-primary"
-                          v-if="selected == prop.node.id"
-                        >
                           {{ prop.node.label }}
                         </div>
                         <div v-else>
@@ -124,46 +78,24 @@
                   <div class="row col-12 q-col-gutter-xs">
                     <div class="col-xs-12 col-sm-12 col-md-12"></div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <datepicker
+                      <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
-                        menu-class-name="modalfix"
+                        :enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
-                        :readonly="!edit"
-                        v-model="date"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        @update:modelValue="clickEditRow"
-                        week-start="0"
-                      >
                         <template #year="{ year }">{{ year + 543 }}</template>
                         <template #year-overlay-value="{ value }">{{
                           parseInt(value + 543)
                         }}</template>
                         <template #trigger>
-                          <q-input
+                          <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
-                            :class="getClass(edit)"
+                            :model-value="date2Thai(date)" :rules="[
-                            :outlined="edit"
+                              (val: string) =>
-                            dense
-                            lazy-rules
-                            :borderless="!edit"
-                            :model-value="date2Thai(date)"
-                            :rules="[
-                              (val:string) =>
                                 !!val ||
                                 `${'กรุณาเลือกวัน เดือน ปี'}`,
-                            ]"
+                            ]" :label="`${'วัน เดือน ปี'}`" hide-bottom-space>
-                            :label="`${'วัน เดือน ปี'}`"
-                            hide-bottom-space
-                          >
                             <template v-slot:prepend>
-                              <q-icon
+                              <q-icon name="event" class="cursor-pointer" :style="edit
-                                name="event"
+                                  ? 'color: var(--q-primary)'
-                                class="cursor-pointer"
+                                  : 'color: var(--q-grey)'
-                                :style="
+                                ">
-                                  edit
-                                    ? 'color: var(--q-primary)'
-                                    : 'color: var(--q-grey)'
-                                "
-                              >
                               </q-icon>
                             </template>
                           </q-input>
@@ -171,249 +103,96 @@
                       </datepicker>
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
+                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="posNoId" :rules="[
-                        :outlined="edit"
+                          (val: string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
-                        dense
+                        ]" :label="`${'ตำแหน่งเลขที่'}`" @update:modelValue="clickEditRow" emit-value map-options
-                        lazy-rules
+                        option-label="name" :options="posNoOptions" option-value="id" hide-bottom-space use-input
-                        :readonly="!edit"
+                        input-debounce="0" @filter="(inputValue: any,
-                        :borderless="!edit"
+                          doneFn: Function) => filterSelector(inputValue, doneFn, '1'
-                        v-model="posNoId"
+                          )" />
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
-                        ]"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="posNoOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'1'
-                      ) "
-                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
+                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="positionId"
-                        :outlined="edit"
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]" :label="`${'ตำแหน่ง'}`"
-                        dense
+                        @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-                        lazy-rules
+                        :options="positionOptions" option-value="id" hide-bottom-space use-input input-debounce="0"
-                        :readonly="!edit"
+                        @filter="(inputValue: any,
-                        :borderless="!edit"
+                          doneFn: Function) => filterSelector(inputValue, doneFn, '2'
-                        v-model="positionId"
+                          )" />
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
-                        :label="`${'ตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'2'
-                      ) "
-                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
                       <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
-                      <selector
+                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="positionPathSideId" :label="`${'ด้าน/สาขา'}`"
-                        :outlined="edit"
+                        @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-                        dense
+                        :options="positionSideOptions" option-value="id" hide-bottom-space use-input input-debounce="0"
-                        lazy-rules
+                        @filter="(inputValue: any,
-                        :readonly="!edit"
+                          doneFn: Function) => filterSelector(inputValue, doneFn, '3'
-                        :borderless="!edit"
+                          )" />
-                        v-model="positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionSideOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'3'
-                      ) "
-                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
+                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="positionTypeId" :rules="[
-                        :outlined="edit"
+                          (val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`,
-                        dense
+                        ]" :label="`${'ตำแหน่งประเภท'}`" @update:modelValue="clickEditRow" emit-value map-options
-                        lazy-rules
+                        option-label="name" :options="positionTypeOptions" option-value="id" hide-bottom-space use-input
-                        :readonly="!edit"
+                        input-debounce="0" @filter="(inputValue: any,
-                        :borderless="!edit"
+                          doneFn: Function) => filterSelector(inputValue, doneFn, '4'
-                        v-model="positionTypeId"
+                          )" />
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`,
-                        ]"
-                        :label="`${'ตำแหน่งประเภท'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionTypeOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'4'
-                      ) "
-                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
+                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="positionLineId"
-                        :outlined="edit"
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกสายงาน'}`]" :label="`${'สายงาน'}`"
-                        dense
+                        @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-                        lazy-rules
+                        :options="positionLineOptions" option-value="id" hide-bottom-space use-input input-debounce="0"
-                        :readonly="!edit"
+                        @filter="(inputValue: any,
-                        :borderless="!edit"
+                          doneFn: Function) => filterSelector(inputValue, doneFn, '5'
-                        v-model="positionLineId"
+                          )" />
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
-                        :label="`${'สายงาน'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionLineOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'5'
-                      ) "
-                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
+                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="positionLevelId"
-                        :outlined="edit"
+                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" :label="`${'ระดับ'}`"
-                        dense
+                        @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-                        lazy-rules
+                        :options="positionLevelOptions" option-value="id" hide-bottom-space use-input input-debounce="0"
-                        :readonly="!edit"
+                        @filter="(inputValue: any,
-                        :borderless="!edit"
+                          doneFn: Function) => filterSelector(inputValue, doneFn, '6'
-                        v-model="positionLevelId"
+                          )" />
-                        :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        :label="`${'ระดับ'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionLevelOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'6'
-                      ) "
-                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <selector
+                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="positionExecutiveId" :label="`${'ตำแหน่งทางการบริหาร'}`"
-                        :outlined="edit"
+                        @update:modelValue="clickEditRow" emit-value map-options option-label="name"
-                        dense
+                        :options="positionExecutiveOptions" option-value="id" hide-bottom-space use-input
-                        lazy-rules
+                        input-debounce="0" @filter="(inputValue: any,
-                        :readonly="!edit"
+                          doneFn: Function) => filterSelector(inputValue, doneFn, '7'
-                        :borderless="!edit"
+                          )" />
-                        v-model="positionExecutiveId"
-                        :label="`${'ตำแหน่งทางการบริหาร'}`"
-                        @update:modelValue="clickEditRow"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        :options="positionExecutiveOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'7'
-                      ) "
-                      />
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="amount" :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :outlined="edit"
+                        :label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number" hide-bottom-space />
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="amount"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                        :label="`${'เงินเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="positionSalaryAmount" :label="`${'เงินประจำตำแหน่ง'}`"
-                        :outlined="edit"
+                        @update:modelValue="clickEditRow" type="number" hide-bottom-space />
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="positionSalaryAmount"
-                        :label="`${'เงินประจำตำแหน่ง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
-                      <q-input
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="mouthSalaryAmount" :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        :outlined="edit"
+                        @update:modelValue="clickEditRow" type="number" hide-bottom-space />
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="mouthSalaryAmount"
-                        :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                        @update:modelValue="clickEditRow"
-                        type="number"
-                        hide-bottom-space
-                      />
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6">
-                      <q-input
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="refCommandNo" hide-bottom-space :label="`${'เลขที่คำสั่ง'}`"
-                        :outlined="edit"
+                        :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                        dense
+                        @update:modelValue="clickEditRow">
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="refCommandNo"
-                        hide-bottom-space
-                        :label="`${'เลขที่คำสั่ง'}`"
-                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                        @update:modelValue="clickEditRow"
-                      >
                         <template v-slot:append>
-                          <q-icon
+                          <q-icon name="mdi-file" class="cursor-pointer" @click="resetFilter" />
-                            name="mdi-file"
-                            class="cursor-pointer"
-                            @click="resetFilter"
-                          />
                         </template>
                       </q-input>
                     </div>
@@ -451,41 +230,17 @@
                     </div> -->
 
                     <div class="row col-xs-12 col-sm-12 col-md-12">
-                      <selector
+                      <selector :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="refSelected" :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-                        :outlined="edit"
+                        @update:modelValue="clickEditRowRef" option-label="name" :options="refOptions" option-value="id"
-                        dense
+                        hide-bottom-space use-input input-debounce="0" @filter="(inputValue: any,
-                        lazy-rules
+                          doneFn: Function) => filterSelector(inputValue, doneFn, '8'
-                        :readonly="!edit"
+                          )" />
-                        :borderless="!edit"
-                        v-model="refSelected"
-                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRowRef"
-                        option-label="name"
-                        :options="refOptions"
-                        option-value="id"
-                        hide-bottom-space
-                        use-input
-                        input-debounce="0"
-                        @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'8'
-                      ) "
-                      />
                     </div>
                     <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-input
+                      <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
-                        :class="getClass(edit)"
+                        :borderless="!edit" v-model="salaryRef" :label="`${'เอกสารอ้างอิง'}`"
-                        :outlined="edit"
+                        @update:modelValue="clickEditRow" type="textarea" hide-bottom-space />
-                        dense
-                        lazy-rules
-                        :readonly="!edit"
-                        :borderless="!edit"
-                        v-model="salaryRef"
-                        :label="`${'เอกสารอ้างอิง'}`"
-                        @update:modelValue="clickEditRow"
-                        type="textarea"
-                        hide-bottom-space
-                      />
                     </div>
                   </div>
                 </q-scroll-area>
@@ -494,49 +249,25 @@
           </div>
         </q-card-section>
         <q-separator />
-        <DialogFooter
+        <DialogFooter :cancel="clickCancel" :edit="clickEdit" :save="clickSave" :validate="validateData"
-          :cancel="clickCancel"
+          :clickNext="clickNext" :clickPrevious="clickPrevious" :clickDelete="clickDelete" v-model:editvisible="edit"
-          :edit="clickEdit"
+          v-model:next="next" v-model:previous="previous" v-model:modalEdit="modalEdit" />
-          :save="clickSave"
-          :validate="validateData"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :clickDelete="clickDelete"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
       </q-form>
     </q-card>
   </q-dialog>
-  <HistoryTable
+  <HistoryTable :rows="rowsHistory" :columns="columnsHistory" :filter="filterHistory"
-    :rows="rowsHistory"
+    :visible-columns="visibleColumnsHistory" v-model:modal="modalHistory" v-model:inputfilter="filterHistory"
-    :columns="columnsHistory"
+    v-model:inputvisible="visibleColumnsHistory" v-model:tittle="tittleHistory">
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
     <template #columns="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
+          <div v-if="col.name == 'date' || col.name == 'createdAt'" class="table_ellipsis">
-            v-if="col.name == 'date' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
             {{ date2Thai(col.value) }}
           </div>
-          <div
+          <div v-else-if="col.name == 'positionSalaryAmount' ||
-            v-else-if="
+            col.name == 'mouthSalaryAmount' ||
-              col.name == 'positionSalaryAmount' ||
+            col.name == 'amount'
-              col.name == 'mouthSalaryAmount' ||
+            " class="table_ellipsis">
-              col.name == 'amount'
-            "
-            class="table_ellipsis"
-          >
             {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
           </div>
           <div v-else class="table_ellipsis">
@@ -917,23 +648,23 @@ const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.salary.columns.length == 0
   ? (visibleColumns.value = [
-      "date",
+    "date",
-      "amount",
+    "amount",
-      "positionSalaryAmount",
+    "positionSalaryAmount",
-      "mouthSalaryAmount",
+    "mouthSalaryAmount",
-      "oc",
+    "oc",
-      "position",
+    "position",
-      "posNo",
+    "posNo",
-      "positionLine",
+    "positionLine",
-      "positionPathSide",
+    "positionPathSide",
-      "positionType",
+    "positionType",
-      "positionLevel",
+    "positionLevel",
-      "positionExecutive",
+    "positionExecutive",
-      "positionExecutiveSide",
+    "positionExecutiveSide",
-      "salaryClass",
+    "salaryClass",
-      "salaryRef",
+    "salaryRef",
-      "refCommandNo",
+    "refCommandNo",
-    ])
+  ])
   : (visibleColumns.value = profileData.salary.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -1507,7 +1238,7 @@ const fetchPosition = async () => {
       positionLevelOptions.value = optionPositionLevels;
       positionLevelOptionsFilter.value = optionPositionLevels;
     })
-    .catch((e: any) => {})
+    .catch((e: any) => { })
     .finally(() => {
       hideLoader();
     });
@@ -1548,6 +1279,7 @@ const fetchData = async () => {
             positionExecutiveSideId: e.positionExecutiveSideId,
             salaryClass: e.salaryClass,
             salaryRef: e.salaryRef,
+            salaryStatus: e.salaryStatus,
             refCommandNo: e.refCommandNo,
             createdFullName: e.createdFullName,
             createdAt: new Date(e.createdAt),
@@ -2024,6 +1756,7 @@ const clickHistory = async (row: RequestItemsObject) => {
           positionExecutiveSide: e.positionExecutiveSide,
           positionExecutiveSideId: e.positionExecutiveSideId,
           salaryClass: e.salaryClass,
+          salaryStatus: e.salaryStatus,
           salaryRef: e.salaryRef,
           refCommandNo: e.refCommandNo,
           createdFullName: e.createdFullName,
@@ -2061,7 +1794,7 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
-const resetFilter = () => {};
+const resetFilter = () => { };
 </script>
 <style lang="scss">
 .modalfix {

src/modules/04_registry/interface/request/Salary.ts

@@ -37,6 +37,7 @@ interface RequestItemsObject {
   salaryRef: string;
   refCommandNo: string;
   //   refCommandDate: Date | null;
+  salaryStatus: string | null;
   createdFullName: string;
   createdAt: Date;
 }
@@ -65,6 +66,7 @@ interface RequestItemsEmployee {
   salaryClass: string | null;
   salaryRef: string | null;
   refCommandNo: string;
+  salaryStatus: string | null;
   //   refCommandDate: Date | null;
 }
 

src/modules/04_registry/interface/response/Salary.ts

@@ -27,6 +27,7 @@ interface ResponseObject {
   salaryRef: string;
   refCommandNo: string;
   //   refCommandDate: Date | null;
+  salaryStatus: string | null;
   createdFullName: string;
   createdAt: Date;
 }
@@ -55,6 +56,7 @@ interface ResponseObjectEmployee {
   salaryClass: string | null;
   salaryRef: string | null;
   refCommandNo: string;
+  salaryStatus: string | null;
   //   refCommandDate: Date | null;
 }
 

src/modules/08_registryEmployee/views/Salary.vue

@@ -16,26 +16,24 @@
       >
         <template #columns="props">
           <q-tr :props="props">
-            <q-td
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props)"
-              v-for="col in props.cols"
+              class="cursor-pointer">
-              :key="col.name"
-              :props="props"
-              @click="selectData(props)"
-              class="cursor-pointer"
-            >
               <div v-if="col.name == 'date'" class="table_ellipsis">
                 {{ date2Thai(col.value) }}
               </div>
-              <div
+              <div v-else-if="props.row.salaryStatus !== 'DEATH' && (
-                v-else-if="
                   col.name == 'positionSalaryAmount' ||
                   col.name == 'mouthSalaryAmount' ||
-                  col.name == 'amount'
+                  col.name == 'amount')
-                "
+                " class="table_ellipsis">
-                class="table_ellipsis"
-              >
                 {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
               </div>
+              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name == 'position'" class="table_ellipsis">
+                ถึงแก่กรรม
+              </div>
+              <div v-else-if="props.row.salaryStatus === 'DEATH' && col.name !== 'salaryRef'" class="table_ellipsis">
+                -
+              </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
               </div>
@@ -1548,6 +1546,7 @@ const fetchData = async () => {
             positionExecutiveSideId: e.positionExecutiveSideId,
             salaryClass: e.salaryClass,
             salaryRef: e.salaryRef,
+            salaryStatus: e.salaryStatus,
             refCommandNo: e.refCommandNo,
             createdFullName: e.createdFullName,
             createdAt: new Date(e.createdAt),
@@ -2026,6 +2025,7 @@ const clickHistory = async (row: RequestItemsObject) => {
           salaryClass: e.salaryClass,
           salaryRef: e.salaryRef,
           refCommandNo: e.refCommandNo,
+          salaryStatus: e.salaryStatus,
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });

src/modules/08_registryEmployee/views/SalaryEmployee.vue

@@ -1513,6 +1513,7 @@ const fetchData = async () => {
             salaryClass: e.salaryClass,
             salaryRef: e.salaryRef,
             refCommandNo: e.refCommandNo,
+            salaryStatus: e.salaryStatus,
             //   refCommandDate: new Date(e.refCommandDate),
             createdFullName: e.createdFullName,
             createdAt: new Date(e.createdAt),
@@ -1982,6 +1983,7 @@ const clickHistory = async (row: RequestItemsEmployee) => {
           salaryClass: e.salaryClass,
           salaryRef: e.salaryRef,
           refCommandNo: e.refCommandNo,
+          salaryStatus: e.salaryStatus,
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });