oneNote 技能
This commit is contained in:
simple321vip
@@ -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 }
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
+132
-4
@@ -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>
|
||||
.dashboard {
|
||||
background-color: beige;
|
||||
<style scoped>
|
||||
.one_note {
|
||||
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>
|
||||
Reference in New Issue
Block a user