เพิ่มข้อมูลหลักตำแหน่งลูกจ้างประจำ, เพิ่ม page เลื่อนเงินเดือนลูกจ้างประจำ

src/modules/04_registryNew/components/TableView.vue

@@ -329,10 +329,10 @@ watch(
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-4 col-md-3 q-pa-lg">
+      <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2 q-pa-md">
         <q-card flat bordered>
           <q-card-section class="text-center">
-            <q-avatar size="82px">
+            <q-avatar size="100px">
               <img src="@/assets/avatar_user.jpg" />
             </q-avatar>
 
@@ -346,8 +346,8 @@ watch(
             </div>
           </q-card-section>
 
-          <q-card-section class="q-pa-lg">
-            <q-card bordered class="bg-grey-12">
+          <q-card-section class="q-px-md">
+            <q-card bordered class="bg-grey-13">
               <q-list>
                 <q-item>
                   <q-item-section>
@@ -371,7 +371,7 @@ watch(
 
                 <q-item>
                   <q-item-section>
-                    <q-item-label caption>ประเภท</q-item-label>
+                    <q-item-label caption>ประเภทตำแหน่ง</q-item-label>
                     <q-item-label>
                       {{
                         props.row.posType ? props.row.posType : "-"
@@ -381,7 +381,9 @@ watch(
                 </q-item>
                 <q-item>
                   <q-item-section>
-                    <q-item-label caption>ระดับชั้นงาน</q-item-label>
+                    <q-item-label caption
+                      >ระดับตำแหน่ง/ระดับชั้นงาน</q-item-label
+                    >
                     <q-item-label>
                       {{
                         props.row.posLevel ? props.row.posLevel : "-"
@@ -457,4 +459,8 @@ watch(
   width: 100%;
   height: 100%;
 }
+
+.bg-grey-13 {
+  background: #f1f2f4 !important;
+}
 </style>

src/modules/04_registryNew/views/list.vue

@@ -27,7 +27,7 @@ const isShowFilter = ref<boolean>(false);
 const isShowBtnFilter = ref<boolean>(true);
 
 const labelOption = reactive({
-  type: "ข้าราชการทั้งหมด",
+  type: "ประเภททั้งหมด",
   posType: "ทั้งหมด",
   posLevel: "ทั้งหมด",
   retireYear: "",
@@ -170,7 +170,7 @@ function selectRetireYear(item: DataOption) {
 
 function clearSelect(t: string) {
   if (t === "type") {
-    labelOption.type = "ข้าราชการทั้งหมด";
+    labelOption.type = "ประเภททั้งหมด";
   } else if (t === "posType") {
     labelOption.posType = "ทั้งหมด";
   } else if (t === "posLevel") {
@@ -259,7 +259,7 @@ onMounted(async () => {
                   round
                   color="white"
                   icon="close"
-                  v-if="labelOption.type !== 'ข้าราชการทั้งหมด'"
+                  v-if="labelOption.type !== 'ประเภททั้งหมด'"
                   @click.stop.prevent="clearSelect('type')"
                 />
               </template>
@@ -285,7 +285,11 @@ onMounted(async () => {
               class="custom-btn"
             >
               <template v-slot:label>
-                {{ `ประเภทตำแหน่ง${labelOption.posType}` }}
+                {{
+                  labelOption.posType !== "ทั้งหมด"
+                    ? labelOption.posType
+                    : `ประเภทตำแหน่ง${labelOption.posType}`
+                }}
                 <q-btn
                   size="10px"
                   flat
@@ -318,7 +322,11 @@ onMounted(async () => {
               label-color="white"
             >
               <template v-slot:label>
-                {{ `ระดับตำแหน่ง${labelOption.posLevel}` }}
+                {{
+                  labelOption.posLevel !== "ทั้งหมด"
+                    ? labelOption.posLevel
+                    : `ระดับตำแหน่ง${labelOption.posLevel}`
+                }}
                 <q-btn
                   size="10px"
                   flat