学习模块功能基本实现

src/view/school/NavTab.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="nav_tab"
+    style="display: flex;"
+    @mouseover.native="onOver"
+    @mouseleave.native="onLeave"
+  >
+    <div class="nav_before" :style="nav_back_color"></div>
+    <el-button :id="'input_edit' + row_key" class="nav_button">{{ nav_name }}</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+
+type Props = {
+  row_key: number,
+  checked: boolean,
+  nav_name: string
+}
+const props = defineProps<Props>()
+let nav_back_color = ref("blueviolet")
+watch(props, (newValue, oldValue) => {
+  if (props.checked) {
+    nav_back_color.value = "background-color: blueviolet;"
+  } else {
+    nav_back_color.value = "background-color: white;"
+  }
+})
+if (props.checked) {
+  nav_back_color.value = "background-color: blueviolet;"
+}
+
+const onOver = (e: any) => {
+  if (props.checked)
+    return
+  nav_back_color.value = "background-color: #FDF5E6;"
+}
+const onLeave = () => {
+  if (props.checked)
+    return
+  nav_back_color.value = "background-color: white;"
+}
+</script>
+
+<style scoped>
+.nav_before {
+  background-color: white;
+  width: 5px;
+  height: 40px;
+}
+.nav_button {
+  border-radius: 0px;
+  width: 50px;
+  height: 40px;
+}
+</style>

src/view/school/PageTab.vue

@@ -24,7 +24,7 @@ import { reactive, ref, watch } from 'vue'
 import { update_page } from '../../api/onenote'
 
 type Props = {
-  row_key: number,
+  row_key: string,
   checked: boolean,
   page_data: any
 }
@@ -47,7 +47,7 @@ if (props.checked) {
   back_color.value = "background-color: #d0d0d0;"
   prex_back_color.value = "background-color: blueviolet;"
 }
-const editPage = (row_key: number) => {
+const editPage = (row_key: string) => {
   is_edit.value = !is_edit.value
   const inputt: any = document.getElementById("input_edit" + row_key)
   setTimeout(() => inputt.focus())

src/view/school/index.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="one_note">
-    <el-tabs class="demo-tabs" style="width: 80px;" tab-position="left">
-      <el-tab-pane label="图书馆"></el-tab-pane>
-      <el-tab-pane label="检索"></el-tab-pane>
-      <el-tab-pane label="历史"></el-tab-pane>
-    </el-tabs>
-    <div class="section_tabs">
+    <div class="nav_tabs common_box">
+      <NavTab
+        :row_key="index"
+        :checked="nav == index ? true : false"
+        :nav_name="item"
+        @click="onclickNav(index)"
+        v-for="(item, index) in nav_list"
+      ></NavTab>
+    </div>
+    <div class="section_tabs common_box">
       <div>
         <SectionTab
           :row_key="item.section_id"
@@ -15,43 +19,33 @@
           v-for="(item, index) in data_sections"
         ></SectionTab>
       </div>
-      <el-button @click="addSection">+</el-button>
+      <el-button class="plus_button" @click="addSection">+</el-button>
     </div>
 
-    <div class="page_tabs">
+    <div class="page_tabs common_box">
       <div>
         <PageTab
-          :row_key="index"
+          :row_key="item.page_id"
           v-show="item.section_id == section.section_id ? true : false"
-          @click="onclickPage(index)"
-          :checked="index === page ? true : false"
+          @click="onclickPage(item.page_id)"
+          :checked="item.page_id === page ? true : false"
           :page_data="item"
           v-for="(item, index) in current_page_list"
         ></PageTab>
       </div>
 
-      <el-button @click="addPage">+</el-button>
+      <el-button class="plus_button" @click="addPage">+</el-button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import PageTab from '../../components/layout/PageTab.vue'
-import SectionTab from '../../components/layout/SectionTab.vue'
+import PageTab from './PageTab.vue'
+import SectionTab from './SectionTab.vue'
+import NavTab from './NavTab.vue'
 import { get_notes, insert_section, insert_page } from '../../api/onenote'
 import { reactive, ref } from 'vue';
-
-let page = ref(0)
-let section = reactive<Section>(<Section>{})
-
-const onclickPage = (index: number) => {
-  page.value = index
-
-}
-const onclickSection = (section_id: string, index: number) => {
-  section.section_id = section_id
-  Object.assign(current_page_list, data_sections[index].page_list)
-}
+// type 定義
 type Section = {
   section_id: string,
   section_name: string,
@@ -63,10 +57,14 @@ type Page = {
   section_id: string,
   page_name: string
 }
-
+// 変数定義
+let nav = ref(0)
+let page = ref("")
+let section = reactive<Section>(<Section>{})
 const data_sections = reactive<Section[]>([])
 const current_page_list = reactive<Page[]>([])
-
+const nav_list = reactive<any>(["图书馆", "检索", "历史"])
+// API 呼び出す
 get_notes({}).then(response => {
   response.data.forEach((item: any) => {
     const section: Section = {
@@ -85,9 +83,20 @@ get_notes({}).then(response => {
     data_sections.push(section)
   });
 }).then(() => {
-  console.log(data_sections)
   Object.assign(current_page_list, data_sections[0].page_list)
 });
+
+// アクション
+const onclickNav = (index: number) => {
+  nav.value = index
+}
+const onclickPage = (index: string) => {
+  page.value = index
+}
+const onclickSection = (section_id: string, index: number) => {
+  section.section_id = section_id
+  Object.assign(current_page_list, data_sections[index].page_list)
+}
 const addSection = () => {
   insert_section().then(response => {
     const data = response.data
@@ -113,12 +122,12 @@ const addPage = () => {
       section_id: data.section_id,
       page_name: data.page_name
     }
-    console.log(section.page_list)
+    current_page_list.push(page)
   })
 }
 </script>
 
-<style scoped>
+<style  scoped>
 .one_note {
   display: flex;
   align-items: stretch;
@@ -129,12 +138,27 @@ const addPage = () => {
   flex-direction: column;
   justify-content: space-between;
   width: 90px;
-  background-color: white;
 }
 
-.demo-tabs {
+.nav_tabs {
   display: flex;
   flex-direction: column;
+  width: 70px;
   padding: 0px;
 }
+
+.common_box {
+  background-color: white;
+
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-right-color: antiquewhite;
+}
+.plus_button {
+  border-top: 1px solid antiquewhite;
+  border-bottom: 1px solid antiquewhite;
+  border-left: 0px solid antiquewhite;
+  border-right: 0px solid antiquewhite;
+  border-radius: 0px;
+}
 </style>