รายการการประเมินผลการปฏิบัติราชการระดับบุคคล => ปรับ UI

src/modules/02_transfer/views/AddTransfer.vue

@@ -59,10 +59,6 @@ const saveData = async () => {
 const createTransfer = async () => {
   showLoader();
   const formData = new FormData();
-  //   const blob = files.value.slice(0, files.value[0].size);
-  //   const newFile = new File(blob, nameFile.value, {
-  //     type: files.value[0].type,
-  //   });
   formData.append("Organization", tranferOrg.value);
   formData.append("Reason", noteReason.value);
   formData.append("file", files.value);
@@ -145,7 +141,9 @@ const fileUploadDoc = async (file: any) => {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -154,7 +152,9 @@ const fileUploadDoc = async (file: any) => {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
                 />
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="noteReason"
@@ -166,7 +166,7 @@ const fileUploadDoc = async (file: any) => {
                 <div class="col-12 row" v-if="routeName == 'addTransfer'">
                   <q-file
                     v-model="files"
-                    class="col-xs-12 col-sm-12"
+                    class="col-xs-12 col-sm-12 inputgreen"
                     outlined
                     dense
                     lazy-rules

src/modules/02_transfer/views/Main.vue

@@ -234,7 +234,7 @@ const clickBack = () => {
             </div>
           </div>
           <div>
-            <q-table
+            <d-table
               flat
               bordered
               dense
@@ -290,52 +290,39 @@ const clickBack = () => {
                   </q-td>
                 </q-tr>
               </template>
-            </q-table>
+              <template #item="props">
+                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  <q-card
+                    bordered
+                    flat
+                    @click="router.push(`/transfer/` + props.row.id)"
+                  >
+                    <q-list>
+                      <q-item
+                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                        :key="col.name"
+                      >
+                        <q-item-section>
+                          <q-item-label caption>{{ col.label }}</q-item-label>
+
+                          <q-item-label v-if="col.name === 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </q-item-label>
+
+                          <q-item-label v-else>{{
+                            col.value ?? "-"
+                          }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+            </d-table>
           </div>
         </q-card>
       </div>
     </div>
   </div>
 </template>
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.custom-table2 {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/modules/03_retire/views/DialogRetire.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   fectData: { type: Function, require: true },
 });
 
-const id = ref<string>(route.params.id.toString());
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
 
 const mixin = useCounterMixin();
 const { dialogConfirm, messageError, showLoader, hideLoader, success } = mixin;

src/modules/03_retire/views/addRetire.vue

@@ -186,7 +186,12 @@ function downloadFile(data: string) {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-md-8 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-8 col-xs-12'
+                      : 'col-md-8 col-xs-12 inputgreen'
+                  "
+                  class=""
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -196,7 +201,11 @@ function downloadFile(data: string) {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
                 />
                 <datepicker
-                  class="col-md-2 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-2 col-xs-12'
+                      : 'col-md-2 col-xs-12 inputgreen'
+                  "
                   menu-class-name="modalfix"
                   v-model="dateCommand"
                   :locale="'th'"
@@ -240,7 +249,11 @@ function downloadFile(data: string) {
                   </template>
                 </datepicker>
                 <datepicker
-                  class="col-md-2 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-2 col-xs-12'
+                      : 'col-md-2 col-xs-12 inputgreen'
+                  "
                   menu-class-name="modalfix"
                   v-model="dateLeave"
                   :locale="'th'"
@@ -284,7 +297,9 @@ function downloadFile(data: string) {
                   </template>
                 </datepicker>
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="noteReason"
@@ -300,7 +315,7 @@ function downloadFile(data: string) {
                 <div class="col-12 row" v-if="routeName == 'AddRetire'">
                   <q-file
                     v-model="files"
-                    class="col-xs-12 col-sm-12"
+                    class="col-xs-12 col-sm-12 inputgreen"
                     outlined
                     dense
                     lazy-rules

src/modules/03_retire/views/main.vue

@@ -256,7 +256,7 @@ const clickBack = () => {
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
-                    <div>
+                    <div v-else>
                       {{ col.value }}
                     </div>
                   </q-td>

src/modules/05_leave/components/Table.vue

@@ -205,11 +205,11 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
     </q-card>
   </div>
   <div>
-    <q-table
+    <d-table
       ref="table"
       flat
       bordered
-      class="custom-table2"
+     
       v-bind="attrs"
       virtual-scroll
       :virtual-scroll-sticky-size-start="48"
@@ -244,7 +244,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
       <template v-slot:item="props">
         <slot v-bind="props" name="item"></slot>
       </template>
-    </q-table>
+    </d-table>
   </div>
 </template>
 

src/modules/05_leave/views/Main.vue

@@ -452,28 +452,30 @@ onMounted(async () => {
                 </q-td>
               </q-tr></template
             >
-            <!-- <template #item="props">
+            <template #item="props">
-            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+              <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-              <q-card bordered flat>
+                <q-card bordered flat>
-                <q-list>
+                  <q-list>
-                  <q-item
+                    <q-item
-                    v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                      v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
-                    :key="col.name"
+                      :key="col.name"
-                  >
+                    >
-                    <q-item-section>
+                      <q-item-section>
-                      <q-item-label caption>{{ col.label }}</q-item-label>
+                        <q-item-label caption>{{ col.label }}</q-item-label>
 
-                      <q-item-label v-if="col.name === 'no'">
+                        <q-item-label v-if="col.name === 'no'">
-                        {{ props.rowIndex + 1 }}
+                          {{ props.rowIndex + 1 }}
-                      </q-item-label>
+                        </q-item-label>
 
-                      <q-item-label v-else>{{ col.value }}</q-item-label>
+                        <q-item-label v-else>{{
-                    </q-item-section>
+                          col.value ?? "-"
-                  </q-item>
+                        }}</q-item-label>
-                </q-list>
+                      </q-item-section>
-              </q-card>
+                    </q-item>
-            </div>
+                  </q-list>
-          </template> -->
+                </q-card>
+              </div>
+            </template>
           </d-table>
         </div>
       </q-card-section>

src/modules/08_KPI/components/Evaluator/01_TabAll.vue

@@ -77,6 +77,33 @@ const pagination = ref({
           </q-td>
         </q-tr>
       </template>
+      <template #item="props">
+        <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat @click="redirectViewDetail(props.row.id)">
+            <q-list>
+              <q-item
+                v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                :key="col.name"
+              >
+                <q-item-section>
+                  <q-item-label caption>{{ col.label }}</q-item-label>
+
+                  <q-item-label>
+                    <div v-if="col.name === 'name'">
+                      {{
+                        `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div></q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
       <template v-slot:pagination="scope">
         ทั้งหมด {{ total }} รายการ
         <q-pagination

src/modules/08_KPI/components/Evaluator/02_TabOther.vue

@@ -152,6 +152,54 @@ function onClickApprove(type: string = "") {
           </q-td>
         </q-tr>
       </template>
+      <template v-slot:item="props">
+        <div
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+          :style="props.selected ? 'transform: scale(0.95);' : ''"
+        >
+          <q-card
+            bordered
+            flat
+            :class="
+              props.selected
+                ? $q.dark.isActive
+                  ? 'bg-grey-9'
+                  : 'bg-grey-2'
+                : ''
+            "
+          >
+            <q-card-section>
+              <q-checkbox
+                dense
+                v-model="props.selected"
+                :label="props.row.name"
+              />
+            </q-card-section>
+            <q-separator />
+            <q-list>
+              <q-item
+                v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                :key="col.name"
+              >
+                <q-item-section>
+                  <q-item-label caption>{{ col.label }}</q-item-label>
+
+                  <q-item-label>
+                    <div v-if="col.name === 'name'">
+                      {{
+                        `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div></q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
       <template v-slot:pagination="scope">
         ทั้งหมด {{ total }} รายการ
         <q-pagination

src/modules/08_KPI/components/Tab/TabMain.vue

@@ -35,22 +35,14 @@ const splitterModel = ref<number>(12);
 </script>
 
 <template>
-  <q-splitter v-model="splitterModel" disable>
+  <q-splitter v-model="splitterModel" :horizontal="!$q.screen.gt.xs" disable>
     <template v-slot:before>
       <q-tabs
         v-model="store.tabMain"
-        vertical
+        :vertical="$q.screen.gt.xs"
         class="text-grey-7 text-weight-light"
         active-class="bg-blue-1 text-blue-8 text-weight-bold"
       >
-        <!-- <q-tab
-          class="hover-tab"
-          v-for="(tab, index) in itemsTab"
-          :key="index"
-          :name="tab.name"
-          :icon="tab.icon"
-          :label="tab.label"
-        /> -->
         <q-tab name="1" label="จัดทำข้อตกลง" />
         <q-tab
           name="2"
@@ -62,12 +54,6 @@ const splitterModel = ref<number>(12);
           label="รายงานผลสำเร็จของงาน"
           :disable="store.tabOpen < 3"
         />
-        <!-- <q-tab name="3" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไป</div>
-        </q-tab>
-        <q-tab name="4" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไปอีกชั้นหนึ่ง</div>
-        </q-tab> -->
         <q-tab name="5" label="ไฟล์เอกสาร" />
       </q-tabs>
     </template>