Merge branch 'develop' into warunee-dev

src/interface/request/main/main.ts

@@ -187,7 +187,7 @@ const menuList = readonly<any[]>([
         role: "placement",
       },
       {
-        label: "ออกคำสั่งบรรจุ" /* ออกคำสั่งบรรจุ */,
+        label: "ออกคำสั่ง" /* ออกคำสั่งบรรจุ */,
         path: "Orderplacement",
         role: "placement",
       },

src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
   <div>
-    <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <q-card flat bordered class="col-12 q-mt-sm">
-      <div class="row q-col-gutter-md">
+      <div class="row q-pa-md">
-        <div class="row col-12 q-col-gutter-sm">
+        <div class="col-xs-12 col-sm-3 col-md-2">
-            <q-select 
+          <q-select
-            class="col-xs-10 col-sm-3 col-md-2"
             v-model="fiscalyear"
             label="ปีงบประมาณ"
             dense
@@ -22,21 +21,26 @@
             :hide-dropdown-icon="false"
             @update:model-value="searchfiscalyear"
           />
-          <div>
+        </div>
-            <q-btn
+        <div class="col-xs-12 col-sm-3 col-md-6">
-              size="12px"
+          <q-btn size="12px" flat round color="add" icon="mdi-plus">
-              flat
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-              round
+            <q-menu>
-              color="add"
+              <q-list style="min-width: 100px">
-              @click="clickAdd"
+                <q-item clickable v-close-popup disable>
-              icon="mdi-plus"
+                  <q-item-section
-            >
+                    >ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
-              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+                  >
-            </q-btn>
+                </q-item>
-          </div>
+                <q-item clickable @click="clickAdd">
-          <q-space />
+                  <q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-2">
           <q-input
-            class="col-xs-12 col-sm-3 col-md-2"
             standout
             dense
             v-model="filterKeyword"
@@ -44,6 +48,7 @@
             outlined
             debounce="300"
             placeholder="ค้นหา"
+            class="q-ml-sm"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
@@ -55,8 +60,9 @@
               />
             </template>
           </q-input>
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-2">
           <q-select
-            class="col-xs-12 col-sm-3 col-md-2"
             v-model="visibleColumns"
             multiple
             outlined
@@ -69,160 +75,162 @@
             option-value="name"
             options-cover
             style="min-width: 150px"
+            class="gt-xs q-ml-sm"
           />
         </div>
-        <div class="col-12">
+      </div>
-          <q-card bordered class="col-12 filter-card q-pa-sm">
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-            <div class="row col-12 q-col-gutter-sm">
+        <q-card bordered class="col-12 filter-card">
-                <q-select
+          <div class="row q-pa-sm">
-                  class="col-xs-12 col-sm-3 col-md-2"
+            <div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
-                  v-model="OrderType"
+              <q-select
-                  label="ประเภท"
+                v-model="OrderType"
-                  dense
+                label="ประเภท"
-                  emit-value
+                dense
-                  map-options
+                emit-value
-                  option-label="name"
+                map-options
-                  :options="OrderTypeOption"
+                option-label="name"
-                  option-value="id"
+                :options="OrderTypeOption"
-                  lazy-rules
+                option-value="id"
-                  hide-bottom-space
+                lazy-rules
-                  :readonly="false"
+                hide-bottom-space
-                  :borderless="false"
+                :readonly="false"
-                  :outlined="true"
+                :borderless="false"
-                  :hide-dropdown-icon="false"
+                :outlined="true"
-                  @update:model-value="searchFilterTable"
+                :hide-dropdown-icon="false"
-                />
+                @update:model-value="searchFilterTable"
-                <q-select
+              />
-                  class="col-xs-12 col-sm-3 col-md-2"
-                  v-model="OrderStatus"
-                  label="สถานะ"
-                  dense
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="OrderStatusOption"
-                  option-value="id"
-                  lazy-rules
-                  hide-bottom-space
-                  :readonly="false"
-                  :borderless="false"
-                  :outlined="true"
-                  :hide-dropdown-icon="false"
-                  @update:model-value="searchFilterTable"
-                />
             </div>
-          </q-card>
+            <div class="col-xs-12 col-sm-3 col-md- q-pl-sm">
-        </div>
+              <q-select
-        <div class="col-12">
+                v-model="OrderStatus"
-          <q-table
+                label="สถานะ"
-            ref="table"
+                dense
-            :columns="columns"
+                emit-value
-            :rows="UpdataData"
+                map-options
-            :filter="filterKeyword"
+                option-label="name"
-            row-key="Order"
+                :options="OrderStatusOption"
-            flat
+                option-value="id"
-            bordered
+                lazy-rules
-            :paging="true"
+                hide-bottom-space
-            dense
+                :readonly="false"
-            class="custom-header-table"
+                :borderless="false"
-            v-bind="attrs"
+                :outlined="true"
-            :visible-columns="visibleColumns"
+                :hide-dropdown-icon="false"
-            :pagination-label="paginationLabel"
+                @update:model-value="searchFilterTable"
-            v-model:pagination="pagination"
+              />
-          >
+            </div>
-            <template v-slot:header="props">
+          </div>
-              <q-tr :props="props">
+        </q-card>
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+      </div>
-                  <span class="text-weight-medium">{{ col.label }}</span>
+      <div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
-                </q-th>
+        <q-table
-                <q-th auto-width />
+          ref="table"
-              </q-tr>
+          :columns="columns"
-            </template>
+          :rows="UpdataData"
-            <template v-slot:body="props">
+          :filter="filterKeyword"
-              <q-tr :props="props" class="cursor-pointer">
+          row-key="Order"
-                <q-td
+          flat
-                  key="Order"
+          bordered
-                  :props="props"
+          :paging="true"
-                  @click="redirectToPage(props.row.Order)"
+          dense
-                >
+          class="custom-header-table"
-                  {{ props.row.Order }}
+          v-bind="attrs"
-                </q-td>
+          :visible-columns="visibleColumns"
-                <q-td
+          :pagination-label="paginationLabel"
-                  key="OrderNum"
+          v-model:pagination="pagination"
-                  :props="props"
+        >
-                  @click="redirectToPage(props.row.Order)"
+          <template v-slot:header="props">
-                >
+            <q-tr :props="props">
-                  {{ props.row.OrderNum }}
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                </q-td>
+                <span class="text-weight-medium">{{ col.label }}</span>
-                <q-td
+              </q-th>
-                  key="OrderDate"
+              <q-th auto-width />
-                  :props="props"
+            </q-tr>
-                  @click="redirectToPage(props.row.Order)"
+          </template>
-                >
+          <template v-slot:body="props">
-                  {{ props.row.OrderDate }}
+            <q-tr :props="props" class="cursor-pointer">
-                </q-td>
+              <q-td
-                <q-td
+                key="Order"
-                  key="OrderBy"
+                :props="props"
-                  :props="props"
+                @click="redirectToPage(props.row.Order)"
-                  @click="redirectToPage(props.row.Order)"
+              >
-                >
+                {{ props.row.Order }}
-                  {{ props.row.OrderBy }}
+              </q-td>
-                </q-td>
+              <q-td
-                <q-td
+                key="OrderNum"
-                  key="Signer"
+                :props="props"
-                  :props="props"
+                @click="redirectToPage(props.row.Order)"
-                  @click="redirectToPage(props.row.Order)"
+              >
-                >
+                {{ props.row.OrderNum }}
-                  {{ props.row.Signer }}
+              </q-td>
-                </q-td>
+              <q-td
-                <q-td
+                key="OrderDate"
-                  key="OrderStatus"
+                :props="props"
-                  :props="props"
+                @click="redirectToPage(props.row.Order)"
-                  @click="redirectToPage(props.row.Order)"
+              >
-                >
+                {{ props.row.OrderDate }}
-                  <q-icon
+              </q-td>
-                    v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
+              <q-td
-                    name="mdi-timer-sand"
+                key="OrderBy"
-                    color="orange"
+                :props="props"
-                    class="text-h6"
+                @click="redirectToPage(props.row.Order)"
-                  />
+              >
-                  <q-icon
+                {{ props.row.OrderBy }}
-                    v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
+              </q-td>
-                    name="mdi-check"
+              <q-td
-                    color="positive"
+                key="Signer"
-                    class="text-h6"
+                :props="props"
-                  />
+                @click="redirectToPage(props.row.Order)"
-                </q-td>
+              >
+                {{ props.row.Signer }}
+              </q-td>
+              <q-td
+                key="OrderStatus"
+                :props="props"
+                @click="redirectToPage(props.row.Order)"
+              >
+                <q-icon
+                  v-if="props.row.OrderStatus == 'ยังไม่ได้ออกคำสั่ง'"
+                  name="hourglass_top"
+                  color="orange"
+                  class="text-h5"
+                />
+                <q-icon
+                  v-if="props.row.OrderStatus == 'ออกคำสั่งแล้ว'"
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                />
+              </q-td>
 
-                <q-td auto-width>
+              <q-td auto-width>
-                  <q-btn
+                <q-btn
-                    dense
+                  dense
-                    size="12px"
+                  size="12px"
-                    flat
+                  flat
-                    round
+                  round
-                    color="red"
+                  color="red"
-                    @click="clickDelete(props.row.id)"
+                  @click="clickDelete(props.row.id)"
-                    icon="mdi-delete"
+                  icon="mdi-delete"
-                  >
+                >
-                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                  </q-btn>
+                </q-btn>
-                </q-td>
+              </q-td>
-              </q-tr>
+            </q-tr>
-            </template>
+          </template>
-            <template v-slot:pagination="scope">
+          <template v-slot:pagination="scope">
-              <q-pagination
+            <q-pagination
-                v-model="pagination.page"
+              v-model="pagination.page"
-                active-color="primary"
+              color="primary"
-                color="dark"
+              :max="scope.pagesNumber"
-                :max="scope.pagesNumber"
+              :max-pages="5"
-                :max-pages="5"
+              size="sm"
-                size="sm"
+              boundary-links
-                boundary-links
+              direction-links
-                direction-links
+            ></q-pagination>
-              ></q-pagination>
+          </template>
-            </template>
+        </q-table>
-          </q-table>
-        </div>
       </div>
     </q-card>
   </div>
@@ -244,7 +252,7 @@ const pagination = ref({
   sortBy: "desc",
   descending: false,
   page: 1,
-  rowsPerPage: 5,
+  rowsPerPage: 10,
 });
 
 const mixin = useCounterMixin();
@@ -321,7 +329,7 @@ const columns = ref<QTableProps["columns"]>([
   },
   {
     name: "OrderStatus",
-    align: "center",
+    align: "left",
     label: "สถานะคำสั่ง",
     sortable: false,
     field: "OrderStatus",
@@ -347,9 +355,9 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<FormOrderPlacementMainData[]>([
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
+    OrderNum: "1/2565",
-    fiscalYear: 2566,
+    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2566",
+    OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ยังไม่ได้ออกคำสั่ง",
@@ -358,9 +366,39 @@ const rows = ref<FormOrderPlacementMainData[]>([
 
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2566",
+    OrderNum: "1/2565",
-    fiscalYear: 2566,
+    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2566",
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
+    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2565",
+    fiscalYear: 2565,
+    OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ยังไม่ได้ออกคำสั่ง",
@@ -393,37 +431,7 @@ const rows = ref<FormOrderPlacementMainData[]>([
     OrderDate: "30 พ.ค. 2565",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
+    OrderStatus: "ยังไม่ได้ออกคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ออกคำสั่งแล้ว",
     OrderType: "คำสั่งบรรจุและแต่งตั้ง",
   },
   {
@@ -695,7 +703,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
 
 <style lang="scss" scope>
 .filter-card {
-  background-color: #f1f1f1b0;
+  background-color: #ededed;
 }
 
 .toggle-expired-account {

src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue

@@ -10,7 +10,7 @@
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    ออกคำสั่งบรรจุ
+    ออกคำสั่ง
   </div>
   <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
     <q-stepper
@@ -38,7 +38,7 @@
 
       <q-step
         :name="3"
-        title="เลือก"
+        title="เลือกรายชื่อส่งสำเนาคำสั่ง"
         prefix="3"
         :done="step > 3"
         :header-nav="step > 3"

src/modules/05_placement/components/OrderPlacement/step/step01.vue

@@ -187,6 +187,52 @@
           <div class="col-12">
             <q-separator />
           </div>
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="test"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
+              hide-bottom-space
+              :label="`${'รอบการสอบ'}`"
+              @update:modelValue="clickEditRow"
+              emit-value
+              map-options
+              option-label="name"
+              :options="testOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
+                      ) "
+            />
+          </div>
+          <div class="col-xs-12 col-md-6">
+            <selector
+              :class="getClass(true)"
+              outlined
+              dense
+              lazy-rules
+              v-model="position"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
+              hide-bottom-space
+              :label="`${'ตำแหน่งรับสมัคร'}`"
+              @update:modelValue="clickEditRow"
+              emit-value
+              map-options
+              option-label="name"
+              :options="positionOption"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionOption'
+                      ) "
+            />
+          </div>
           <div class="col-xs-12 col-md-6">
             <selector
               :class="getClass(true)"
@@ -319,29 +365,6 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-md-6">
-            <selector
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="position"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งรับสมัคร'}`]"
-              hide-bottom-space
-              :label="`${'ตำแหน่งรับสมัคร'}`"
-              @update:modelValue="clickEditRow"
-              emit-value
-              map-options
-              option-label="name"
-              :options="positionOption"
-              option-value="id"
-              use-input
-              input-debounce="0"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'positionOption'
-                      ) "
-            />
-          </div>
         </div>
       </q-form>
     </div>
@@ -420,6 +443,10 @@ const position = ref<string>("");
 const positionOption = ref<DataOption[]>([]);
 const positionOptionFilter = ref<DataOption[]>([]);
 
+const test = ref<string>("");
+const testOption = ref<DataOption[]>([]);
+const testOptionFilter = ref<DataOption[]>([]);
+
 const clickEditRow = () => (editRow.value = true);
 
 const filterSelector = (val: any, update: Function, filtername: string) => {
@@ -462,6 +489,13 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
         );
       });
       break;
+    case "testOption":
+      update(() => {
+        testOption.value = testOptionFilter.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
     default:
       break;
   }

src/modules/05_placement/components/OrderPlacement/step/step04.vue

@@ -1,6 +1,97 @@
 <template>
   <div>
-    <div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">04</div>
+    <div style="min-height: 70vh">
+      <q-splitter v-model="splitterModel" style="height: 70vh">
+        <template v-slot:before>
+          <div class="space">
+            <div @click="setTab('main')" :class="getClass(tab == 'main')">
+              <label>คำสั่ง</label>
+              <q-btn
+                size="12px"
+                flat
+                round
+                icon="mdi-download"
+                :disable="tab !== 'main'"
+                :color="tab !== 'main' ? 'grey' : 'add'"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 100px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section>ไฟล์ .PDF</q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup>
+                      <q-item-section>ไฟล์ .docx</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+            <div @click="setTab('second')" :class="getClass(tab == 'second')">
+              <label>เอกสารแนบท้าย</label>
+              <q-btn
+                size="12px"
+                flat
+                round
+                :color="tab !== 'second' ? 'grey' : 'add'"
+                icon="mdi-download"
+                :disable="tab !== 'second'"
+              >
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 100px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section>ไฟล์ .PDF</q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup>
+                      <q-item-section>ไฟล์ .docx</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </div>
+          <div class="card-pdf q-ma-md q-pa-md">asd</div>
+        </template>
+
+        <template v-slot:separator>
+          <q-avatar
+            color="primary"
+            text-color="white"
+            size="30px"
+            icon="drag_indicator"
+          />
+        </template>
+
+        <template v-slot:after>
+          <div class="q-pa-md">
+            <fieldset class="border q-pa-lg">
+              <legend class="text-header">อัปโหลดไฟล์</legend>
+
+              <div>
+                <label class="text-file">คำสั่ง</label>
+                <q-file outlined v-model="fileOrder" label="เลือกไฟล์คำสั่ง">
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <div class="q-py-lg" />
+                <label class="text-file">เอกสารแนบท้าย</label>
+                <q-file
+                  outlined
+                  v-model="fileOrder"
+                  label="เลือกไฟล์เอกสารแนบท้าย"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+            </fieldset>
+          </div>
+        </template>
+      </q-splitter>
+    </div>
     <q-separator />
     <div class="flex justify-end q-px-md q-gutter-sm">
       <q-btn
@@ -37,4 +128,73 @@ const props = defineProps({
 
 const next = () => props.next();
 const previous = () => props.previous();
+
+const splitterModel = ref<number>(50);
+const tab = ref<string>("main");
+const fileOrder = ref<any>(null);
+const fileTailer = ref<any>(null);
+
+const getClass = (val: boolean) => {
+  return {
+    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+    "card-header q-px-lg q-py-md cursor-pointer": !val,
+  };
+};
+
+const setTab = (val: string) => {
+  tab.value = val;
+};
 </script>
+<style lang="scss" scoped>
+.border {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+}
+.text-header {
+  color: #34373c;
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.text-file {
+  color: #34373c;
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+.space {
+  background-color: #e9eaec;
+  display: flex;
+}
+
+.card-header {
+  margin-top: 5px;
+  background-color: #e9eaec;
+  border-radius: 10px 10px 0px 0px;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  font-weight: normal;
+  align-items: center;
+}
+
+.card-header-active {
+  margin-top: 5px;
+  background-color: white;
+  border-radius: 10px 10px 0px 0px;
+  border: 1px solid #e9eaec;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  border-bottom-style: none;
+  font-weight: bold;
+  align-items: center;
+}
+
+.card-pdf {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+  background-color: #e9eaec;
+  height: 60vh;
+}
+</style>