โครงสร้าอัตรากำลัง

src/modules/02_organizationalNew/views/main.vue

@@ -1,7 +1,144 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/** importComponents*/
+import ListView from "@/modules/02_organizationalNew/components/listView.vue";
+import StructureView from "@/modules/02_organizationalNew/components/structureView.vue";
+
+/** importStore*/
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+const stroe = useOrganizational();
+
+const isStatusData = ref<boolean>(true);
+
+const itemStructure = ref<any>([
+  {
+    val: "NEW",
+    name: "สร้างใหม่",
+  },
+  {
+    val: "STRUCTURE",
+    name: "ทำสำเนาเฉพาะโครงสร้าง",
+  },
+  {
+    val: "STRUCTUREANDPOSITION",
+    name: "ทำสำเนาโครงสร้างและตำแหน่ง",
+  },
+  {
+    val: "STRUCTUREANDPOSITION",
+    name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
+  },
+]);
+</script>
 <template>
-  โครงสร้างอัตรากำลัง (ใหม่)
+  <div class="row">
+    <div class="toptitle text-dark row items-center">โครงสร้างอัตรากำลัง</div>
+    <q-space />
+    <div class="toptitle row" v-if="stroe.typeOrganizational === 'draft'">
+      <q-btn color="indigo-9" icon="alarm" label="ตั้งเวลาเผยแพร่"> </q-btn>
+    </div>
+  </div>
+
+  <q-card flat bordered>
+    <div class="q-pa-xl" v-if="!isStatusData">
+      <q-card
+        flat
+        bordered
+        style="
+          height: 70vh;
+          border: 1px solid rgb(210, 210, 210);
+          border-radius: 5px;
+        "
+      >
+        <div
+          class="text-center row"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+          "
+        >
+          <div>
+            <q-btn
+              flat
+              style="background-color: #d8f5f2"
+              round
+              color="primary"
+              size="lg"
+              icon="add"
+              @click="isStatusData = true"
+            >
+              <q-tooltip>เพิ่มโครงสร้าง </q-tooltip>
+            </q-btn>
+            <div class="q-mt-sm">เพิ่มโครงสร้าง</div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+    <div v-else>
+      <q-card class="my-card">
+        <q-card-section>
+          <q-toolbar class="q-gutter-md" style="padding: 0px">
+            <q-btn-group outline>
+              <q-btn
+                :outline="stroe.typeOrganizational === 'current' ? false : true"
+                color="blue"
+                label="ปัจจุบัน"
+                @click="stroe.typeOrganizational = 'current'"
+              />
+              <q-btn
+                :outline="stroe.typeOrganizational === 'draft' ? false : true"
+                color="blue"
+                label="แบบร่าง"
+                @click="stroe.typeOrganizational = 'draft'"
+              />
+            </q-btn-group>
+
+            <q-btn-dropdown color="green" label="ปรับโครงสร้าง">
+              <q-list>
+                <q-item
+                  clickable
+                  v-close-popup
+                  v-for="(item, index) in itemStructure"
+                  :key="index"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+
+            <q-btn flat round color="primary" icon="history">
+              <q-tooltip>ประวัติโครงสร้าง</q-tooltip>
+            </q-btn>
+            <q-space />
+            <q-btn
+              flat
+              round
+              :color="stroe.statusView === 'list' ? 'grey-7' : 'grey-4'"
+              icon="list"
+              @click="stroe.statusView = 'list'"
+            />
+            <q-btn
+              flat
+              round
+              icon="account_tree"
+              :color="stroe.statusView === 'tree' ? 'grey-7' : 'grey-4'"
+              @click="stroe.statusView = 'tree'"
+            />
+          </q-toolbar>
+        </q-card-section>
+        <q-separator />
+        <q-card-section style="padding: 0px">
+          <ListView v-if="stroe.statusView === 'list'" />
+          <StructureView v-if="stroe.statusView === 'tree'" />
+        </q-card-section>
+      </q-card>
+    </div>
+  </q-card>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>