oneNote 技能

src/api/onenote.ts

@@ -0,0 +1,42 @@
+import request from '../utils/request'
+
+const get_notes = (params: Object) => {
+  return request({
+    url: '/one_note',
+    method: 'get',
+    params: params
+  })
+}
+
+const update_page = (params: Object) => {
+  return request({
+    url: '/one_note/update_page',
+    method: 'post',
+    data: params
+  })
+}
+
+const update_section = (params: Object) => {
+  return request({
+    url: '/one_note/update_section',
+    method: 'post',
+    data: params
+  })
+}
+
+const insert_section = () => {
+  return request({
+    url: '/one_note/insert_section',
+    method: 'put'
+  })
+}
+
+const insert_page = (params: Object) => {
+  return request({
+    url: '/one_note/insert_page',
+    method: 'put',
+    data: params
+  })
+}
+
+export { get_notes, update_page, update_section, insert_section, insert_page }

src/components/layout/PageTab.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="page_tab"
+    @mouseover.native="onOver"
+    @mouseleave.native="onLeave"
+    @dblclick="editPage(row_key)"
+    :style="back_color"
+  >
+    <div class="input_prex" :style="prex_back_color"></div>
+    <el-input
+      :id="'input_edit' + row_key"
+      class="input_edit"
+      v-show="is_edit"
+      v-model="page_data.page_name"
+      @blur="savePage"
+      @keyup.enter="doNothing"
+    ></el-input>
+    <div :id="'input_show' + row_key" class="input_show" v-show="!is_edit">{{ page_data.page_name }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { update_page } from '../../api/onenote'
+
+type Props = {
+  row_key: number,
+  checked: boolean,
+  page_data: any
+}
+const props = defineProps<Props>()
+
+let back_color = ref("aliceblue")
+let prex_back_color = ref("aliceblue")
+let is_edit = ref(false)
+
+watch(props, (newValue, oldValue) => {
+  if (props.checked) {
+    back_color.value = "background-color: #d0d0d0;"
+    prex_back_color.value = "background-color: blueviolet;"
+  } else {
+    back_color.value = "background-color: white;"
+    prex_back_color.value = "background-color: white;"
+  }
+})
+if (props.checked) {
+  back_color.value = "background-color: #d0d0d0;"
+  prex_back_color.value = "background-color: blueviolet;"
+}
+const editPage = (row_key: number) => {
+  is_edit.value = !is_edit.value
+  const inputt: any = document.getElementById("input_edit" + row_key)
+  setTimeout(() => inputt.focus())
+}
+const savePage = () => {
+  is_edit.value = !is_edit.value
+  const params = {
+    page_id: props.page_data.page_id,
+    page_name: props.page_data.page_name
+  }
+  update_page(params).then(response => {
+
+  })
+  onLeave()
+}
+const doNothing = (e: KeyboardEvent) => {
+  (e.target as HTMLInputElement).blur()
+}
+const onOver = (e: any) => {
+  if (props.checked)
+    return
+  is_edit.value ? "" : back_color.value = "background-color: #FDF5E6;"
+}
+const onLeave = () => {
+  if (props.checked)
+    return
+  is_edit.value ? "" : back_color.value = "background-color: white;"
+}
+</script>
+
+<style scoped>
+.input_prex {
+  width: 2px;
+  height: 35px;
+}
+.input_edit,
+.input_show {
+  margin-left: 5px;
+}
+.page_tab {
+  display: flex;
+  align-items: center;
+  width: 90px;
+  height: 35px;
+}
+.page_title {
+  font-size: 14px;
+  font-family: "Meiryo", Courier, monospace;
+}
+</style>

src/components/layout/SectionTab.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="section_tab"
+    @mouseover.native="onOver"
+    @mouseleave.native="onLeave"
+    @dblclick="editSection(row_key)"
+    :style="back_color"
+  >
+    <el-input
+      :id="'section_edit' + row_key"
+      v-show="is_edit"
+      v-model="section_data.section_name"
+      @blur="saveSection"
+      @keyup.enter="doNothing"
+    ></el-input>
+    <div :id="'section_show' + row_key" v-show="!is_edit">{{ section_data.section_name }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { update_section } from '../../api/onenote'
+
+type Props = {
+  row_key: string,
+  checked: boolean,
+  section_data: any
+}
+const props = defineProps<Props>()
+
+let back_color = ref("aliceblue")
+let is_edit = ref(false)
+
+watch(props, (newValue, oldValue) => {
+  if (props.checked) {
+    back_color.value = "background-color: #d0d0d0;"
+  } else {
+    back_color.value = "background-color: white;"
+  }
+})
+if (props.checked) {
+  back_color.value = "background-color: #d0d0d0;"
+}
+const editSection = (row_key: string) => {
+  is_edit.value = !is_edit.value
+  const inputt: any = document.getElementById("section_edit" + row_key)
+  setTimeout(() => inputt.focus())
+}
+const saveSection = () => {
+  is_edit.value = !is_edit.value
+  const params = {
+    section_id: props.section_data.section_id,
+    section_name: props.section_data.section_name
+  }
+  update_section(params).then(response => {
+
+  })
+  onLeave()
+}
+const doNothing = (e: KeyboardEvent) => {
+  (e.target as HTMLInputElement).blur()
+}
+const onOver = (e: any) => {
+  if (props.checked)
+    return
+  is_edit.value ? "" : back_color.value = "background-color: #FDF5E6;"
+}
+const onLeave = () => {
+  if (props.checked)
+    return
+  is_edit.value ? "" : back_color.value = "background-color: white;"
+}
+</script>
+
+<style scoped>
+.section_show {
+  width: 90px;
+}
+.section_tab {
+  display: flex;
+  align-items: center;
+  width: 90px;
+  height: 35px;
+}
+.page_title {
+  font-size: 14px;
+  font-family: "Meiryo", Courier, monospace;
+}
+</style>

src/view/school/index.vue

@@ -1,12 +1,140 @@
 <template>
-  <div class="dashboard">这里记述了我的学习笔记</div>
+  <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>
+        <SectionTab
+          :row_key="item.section_id"
+          @click="onclickSection(item.section_id, index)"
+          :checked="item.section_id === section.section_id ? true : false"
+          :section_data="item"
+          v-for="(item, index) in data_sections"
+        ></SectionTab>
+      </div>
+      <el-button @click="addSection">+</el-button>
+    </div>
+
+    <div class="page_tabs">
+      <div>
+        <PageTab
+          :row_key="index"
+          v-show="item.section_id == section.section_id ? true : false"
+          @click="onclickPage(index)"
+          :checked="index === page ? true : false"
+          :page_data="item"
+          v-for="(item, index) in current_page_list"
+        ></PageTab>
+      </div>
+
+      <el-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 { 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 Section = {
+  section_id: string,
+  section_name: string,
+  page_list: Page[]
+}
+
+type Page = {
+  page_id: string,
+  section_id: string,
+  page_name: string
+}
+
+const data_sections = reactive<Section[]>([])
+const current_page_list = reactive<Page[]>([])
+
+get_notes({}).then(response => {
+  response.data.forEach((item: any) => {
+    const section: Section = {
+      section_id: item.section_id,
+      section_name: item.section_name,
+      page_list: []
+    }
+    item.page_list.forEach((pageItem: any) => {
+      const page: Page = {
+        page_id: pageItem.page_id,
+        section_id: pageItem.section_id,
+        page_name: pageItem.page_name
+      }
+      section.page_list.push(page)
+    });
+    data_sections.push(section)
+  });
+}).then(() => {
+  console.log(data_sections)
+  Object.assign(current_page_list, data_sections[0].page_list)
+});
+const addSection = () => {
+  insert_section().then(response => {
+    const data = response.data
+    const section: Section = {
+      section_id: data.section_id,
+      section_name: data.section_name,
+      page_list: data.page_list
+    }
+    data_sections.push(section)
+  }).then(() => {
+    let index = data_sections.length - 1
+    onclickSection(data_sections[index].section_id, index)
+  })
+}
+const addPage = () => {
+  const params = {
+    section_id: section.section_id
+  }
+  insert_page(params).then(response => {
+    const data = response.data
+    const page: Page = {
+      page_id: data.page_id,
+      section_id: data.section_id,
+      page_name: data.page_name
+    }
+    console.log(section.page_list)
+  })
+}
 </script>
 
-<style>
+<style scoped>
-.dashboard {
+.one_note {
-  background-color: beige;
+  display: flex;
+  align-items: stretch;
+}
+.section_tabs,
+.page_tabs {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 90px;
+  background-color: white;
+}
+
+.demo-tabs {
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
 }
 </style>