hrms-mgt/src/modules/05_placement/components/OrderPlacement/step/step04.vue

<template>
  <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" v-if="tab == 'main'">
            คำสั่ง
          </div>
          <div class="card-pdf q-ma-md q-pa-md" v-else>เอกสารแนบท้าย</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-pa-sm q-gutter-sm">
      <q-btn 
        dense 
        outline 
        color="primary" 
        icon="chevron_left" 
        @click="previous" 
        class="q-pr-md"
        label="เลือกรายชื่อส่งสำเนา">
      </q-btn>
      <q-btn
        unelevated
        label="บันทึก"
        color="public"
        @click="next"
      > <!-- icon="mdi-content-save-outline"
        <q-tooltip>บันทึก</q-tooltip> -->
      </q-btn>
     
      <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
        <q-tooltip>ต่อไป</q-tooltip>
      </q-btn> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const props = defineProps({
  next: {
    type: Function,
    default: () => console.log("not function"),
  },
  previous: {
    type: Function,
    default: () => console.log("not function"),
  },
});

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>