onenote 式样修改
This commit is contained in:
simple321vip
+58
-11
@@ -2,27 +2,74 @@ import { MockMethod } from 'vite-plugin-mock'
|
||||
|
||||
export default [
|
||||
{
|
||||
url: '/onenote/api/v1/one_note',
|
||||
url: '/onenote/api/v1/category',
|
||||
method: 'get',
|
||||
response: () => {
|
||||
return [
|
||||
{
|
||||
section_id: 'x111',
|
||||
section_name: 'A',
|
||||
page_list: [
|
||||
{
|
||||
page_id: 'y111',
|
||||
section_id: 'x111',
|
||||
page_name: 'B',
|
||||
category_id: '4444',
|
||||
category_color: ' #B0E0E6',
|
||||
category_icon: 'Document',
|
||||
category_theme: 'WIKI'
|
||||
},
|
||||
{
|
||||
page_id: 'y222',
|
||||
section_id: 'x111',
|
||||
page_name: 'C',
|
||||
category_id: '4444',
|
||||
category_color: ' #B0E0E6',
|
||||
category_icon: 'Collection',
|
||||
category_theme: 'Collection'
|
||||
},
|
||||
{
|
||||
category_id: '4444',
|
||||
category_color: ' #B0E0E6',
|
||||
category_icon: 'Files',
|
||||
category_theme: 'Files'
|
||||
},
|
||||
{
|
||||
category_id: '4444',
|
||||
category_color: ' #B0E0E6',
|
||||
category_icon: 'Phone',
|
||||
category_theme: 'Phone'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/onenote/api/v1/4444/items/',
|
||||
method: 'get',
|
||||
response: () => {
|
||||
return [
|
||||
{
|
||||
item_id: '00001',
|
||||
item_name: '中国联通',
|
||||
item_value: '13332247026'
|
||||
},
|
||||
{
|
||||
item_id: '00002',
|
||||
item_name: '中国联通副号',
|
||||
item_value: '13333333333'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/onenote/api/v1/category',
|
||||
method: 'put',
|
||||
response: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/onenote/api/v1/item',
|
||||
method: 'put',
|
||||
response: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
{
|
||||
url: '/onenote/api/v1/item',
|
||||
method: 'delete',
|
||||
response: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
] as MockMethod[]
|
||||
+43
-10
@@ -1,10 +1,49 @@
|
||||
import { service } from '../utils/request'
|
||||
|
||||
const get_notes = (params: Object) => {
|
||||
const get_categorys = () => {
|
||||
return service({
|
||||
url: '/onenote/api/v1/one_note',
|
||||
url: '/onenote/api/v1/category',
|
||||
method: 'GET',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
||||
const get_items = (category_id: string) => {
|
||||
return service({
|
||||
url: '/onenote/api/v1/' + category_id + '/items/',
|
||||
method: 'GET',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const put_category = (data: Object) => {
|
||||
return service({
|
||||
url: '/onenote/api/v1/category',
|
||||
method: 'PUT',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
const put_item = (data: Object) => {
|
||||
return service({
|
||||
url: '/onenote/api/v1/item',
|
||||
method: 'PUT',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
const post_item = (data: Object) => {
|
||||
return service({
|
||||
url: '/onenote/api/v1/item',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
const delete_item = (data: Object) => {
|
||||
return service({
|
||||
url: '/onenote/api/v1/item',
|
||||
method: 'delete',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -24,12 +63,6 @@ const update_section = (params: Object) => {
|
||||
})
|
||||
}
|
||||
|
||||
const insert_section = () => {
|
||||
return service({
|
||||
url: '/onenote/api/v1/one_note/insert_section',
|
||||
method: 'PUT'
|
||||
})
|
||||
}
|
||||
|
||||
const insert_page = (params: Object) => {
|
||||
return service({
|
||||
@@ -39,4 +72,4 @@ const insert_page = (params: Object) => {
|
||||
})
|
||||
}
|
||||
|
||||
export { get_notes, update_page, update_section, insert_section, insert_page }
|
||||
export { get_categorys, get_items, update_page, update_section, put_category, put_item, post_item, delete_item, insert_page }
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
<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>
|
||||
@@ -1,101 +0,0 @@
|
||||
<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: string,
|
||||
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: string) => {
|
||||
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;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.page_title {
|
||||
font-size: 14px;
|
||||
font-family: "Meiryo", Courier, monospace;
|
||||
}
|
||||
</style>
|
||||
@@ -1,90 +0,0 @@
|
||||
<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;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.page_title {
|
||||
font-size: 14px;
|
||||
font-family: "Meiryo", Courier, monospace;
|
||||
}
|
||||
</style>
|
||||
+240
-117
@@ -1,153 +1,276 @@
|
||||
<template>
|
||||
<div class="one_note">
|
||||
<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 + ''" @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 class="plus_button" @click="addSection">+</el-button>
|
||||
|
||||
<div class="category_card-box" v-show="isshowCategorys">
|
||||
<el-card v-for="(card, key) in categoryCards" shadow="hover" @click="showCategory(card)"
|
||||
class="onenote_category_card">
|
||||
<template #header>
|
||||
<div class="category_card__header">
|
||||
<el-icon :size="40">
|
||||
<component :is="card.category_icon" :style="{ color: card.category_color }" />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<div class="page_tabs common_box">
|
||||
<div>
|
||||
<PageTab :row_key="item.page_id + ''" v-show="item.section_id == section.section_id ? 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>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="category_card__body">
|
||||
{{ card.category_theme }}
|
||||
</div>
|
||||
</template>
|
||||
</el-card>
|
||||
<el-card shadow="hover" @click="categoryDrawer = true" class="onenote_category_card">
|
||||
<template #header>
|
||||
<div class="category_card__header">
|
||||
<el-icon :size="40">
|
||||
<component is="Management" :style="{ color: '#5cdbd3' }" />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<el-button class="plus_button" @click="addPage">+</el-button>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="category_card__body">
|
||||
管理
|
||||
</div>
|
||||
<div></div>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<div class="onenote_card-box" v-show="isShowCard">
|
||||
<el-page-header @back="onBack">
|
||||
<template #content>
|
||||
<div class="flex items-center">
|
||||
<span class="text-large font-600 mr-3"> {{ current_category }} </span>
|
||||
</div>
|
||||
<el-button size="large" :icon="Plus" round @click="onAddItem"></el-button>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-card v-for="(item, key) in itemCards" shadow="hover" class="onenote_item_card" @dblclick="editItem(item)">
|
||||
<template #header>
|
||||
<div class="onenote_card__header">
|
||||
{{ item.item_name }}
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="onenote_card__body">
|
||||
{{ item.item_value }}
|
||||
</div>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-drawer v-model="categoryDrawer" title="I am the title" :with-header="false">
|
||||
|
||||
<span>Pick a icon!</span>
|
||||
<el-alert title="you can pick a icon on the website!" type="success" />
|
||||
<el-link type="success" @click="to_element_ui_icon">{{ element_ui_icon }}</el-link>
|
||||
<el-input v-model="category_form.category_icon" class="category_icon" size="large" placeholder="">
|
||||
<template #prepend>el-icon:</template>
|
||||
</el-input>
|
||||
|
||||
<span>Pick a color!</span>
|
||||
<el-alert title="you can pick a icon on the website!" type="success" />
|
||||
<el-link type="success" @click="to_cainiao_color">{{ cainiao_color }}</el-link>
|
||||
<el-input v-model="category_form.category_color" class="category_icon" size="large" placeholder="">
|
||||
<template #prepend>color:</template>
|
||||
</el-input>
|
||||
|
||||
<span>Pick a theme!</span>
|
||||
<el-input v-model="category_form.category_theme" class="category_icon" size="large" placeholder="">
|
||||
<template #prepend>theme:</template>
|
||||
</el-input>
|
||||
|
||||
<el-button size="large" :icon="Check" round @click="addCategory">确认</el-button>
|
||||
</el-drawer>
|
||||
|
||||
<el-drawer v-model="itemDrawer" title="I am the title" :with-header="false">
|
||||
<el-input v-model="item_form.item_name" class="category_icon" size="large" placeholder="">
|
||||
<template #prepend>name:</template>
|
||||
</el-input>
|
||||
|
||||
<el-input v-model="item_form.item_value" class="category_icon" size="large" type="textarea" :rows="10">
|
||||
<template #prepend>text:</template>
|
||||
</el-input>
|
||||
|
||||
<el-button size="large" :icon="Check" round @click="deleteItem">删除</el-button>
|
||||
<el-button size="large" :icon="Check" round @click="addItem">确认</el-button>
|
||||
</el-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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';
|
||||
// type 定義
|
||||
type Section = {
|
||||
section_id: string,
|
||||
section_name: string,
|
||||
page_list: Page[]
|
||||
import { reactive, ref } from 'vue'
|
||||
import { Check, Plus } from '@element-plus/icons-vue'
|
||||
import { get_categorys, get_items, put_category, put_item, delete_item } from '@/api/onenote'
|
||||
|
||||
|
||||
// -- IMPORT --
|
||||
|
||||
// -- INTERFACE OR TYPE DEFINITION --
|
||||
type CategoryCard = {
|
||||
category_id: string,
|
||||
category_color: string,
|
||||
category_icon: string,
|
||||
category_theme: string
|
||||
}
|
||||
|
||||
type Page = {
|
||||
page_id: string,
|
||||
section_id: string,
|
||||
page_name: string
|
||||
type CategoryItem = {
|
||||
item_id: string,
|
||||
item_name: string,
|
||||
item_value: 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 = {
|
||||
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(() => {
|
||||
Object.assign(current_page_list, data_sections[0].page_list)
|
||||
});
|
||||
|
||||
// アクション
|
||||
const onclickNav = (index: number) => {
|
||||
nav.value = index
|
||||
// -- REACTIVE OBJECT --
|
||||
const itemCards = reactive<CategoryItem[]>([])
|
||||
const categoryCards = reactive<CategoryCard[]>([])
|
||||
let category_form = ref<CategoryCard>({
|
||||
category_id: '',
|
||||
category_color: '',
|
||||
category_icon: '',
|
||||
category_theme: 'Sample'
|
||||
})
|
||||
let item_form = ref<CategoryItem>({
|
||||
item_id: '',
|
||||
item_name: '',
|
||||
item_value: '',
|
||||
})
|
||||
|
||||
// -- REF OBJECT --
|
||||
let element_ui_icon = "https://element-plus.gitee.io/zh-CN/component/icon.html"
|
||||
let cainiao_color = "runoob.com/html/html-colornames.html"
|
||||
const categoryDrawer = ref(false)
|
||||
const itemDrawer = ref(false)
|
||||
let isShowCard = ref(false)
|
||||
let isshowCategorys = ref(true)
|
||||
|
||||
let current_category = ref("")
|
||||
|
||||
// -- EVENT DEFINITION
|
||||
const onBack = () => {
|
||||
isshowCategorys.value = true
|
||||
isShowCard.value = false
|
||||
}
|
||||
const onclickPage = (index: string) => {
|
||||
page.value = index
|
||||
|
||||
const onAddItem = () => {
|
||||
clearItemForm()
|
||||
itemDrawer.value = true
|
||||
}
|
||||
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
|
||||
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 showCategory = (card: CategoryCard) => {
|
||||
get_items(card.category_id).then((response) => {
|
||||
itemCards.length = 0
|
||||
response.data.forEach((item: CategoryItem) => {
|
||||
itemCards.push(item)
|
||||
})
|
||||
isshowCategorys.value = false
|
||||
isShowCard.value = true
|
||||
current_category.value = card.category_theme
|
||||
})
|
||||
}
|
||||
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
|
||||
}
|
||||
current_page_list.push(page)
|
||||
|
||||
const addCategory = () => {
|
||||
put_category(category_form).then(resp => {
|
||||
categoryCards.push(category_form.value)
|
||||
categoryDrawer.value = false
|
||||
clearCategoryForm()
|
||||
})
|
||||
}
|
||||
|
||||
const addItem = () => {
|
||||
put_item(item_form.value).then(resp => {
|
||||
itemDrawer.value = false
|
||||
itemCards.push(item_form.value)
|
||||
})
|
||||
}
|
||||
|
||||
const deleteItem = () => {
|
||||
delete_item(item_form.value.item_id).then(resp => {
|
||||
itemDrawer.value = false
|
||||
let index = itemCards.findIndex((record) => record.item_id == item_form.value.item_id)
|
||||
itemCards.splice(index, 1)
|
||||
itemDrawer.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const editItem = (item: CategoryItem) => {
|
||||
itemDrawer.value = true
|
||||
item_form.value.item_id = item.item_id
|
||||
item_form.value.item_name = item.item_name
|
||||
item_form.value.item_value = item.item_value
|
||||
}
|
||||
|
||||
const clearItemForm = () => {
|
||||
item_form.value.item_id = ''
|
||||
item_form.value.item_name = ''
|
||||
item_form.value.item_value = ''
|
||||
}
|
||||
|
||||
const clearCategoryForm = () => {
|
||||
category_form.value.category_color = ''
|
||||
category_form.value.category_id = ''
|
||||
category_form.value.category_icon = ''
|
||||
category_form.value.category_theme = ''
|
||||
}
|
||||
|
||||
const to_element_ui_icon = () => {
|
||||
window.open(element_ui_icon, '_blank')
|
||||
}
|
||||
|
||||
const to_cainiao_color = () => {
|
||||
window.open(cainiao_color, '_blank')
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* AUTO INVOKE FUNCTION
|
||||
*/
|
||||
get_categorys().then((resp) => {
|
||||
resp.data.forEach((record: CategoryCard) => {
|
||||
categoryCards.push(record)
|
||||
})
|
||||
})
|
||||
clearItemForm()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.one_note {
|
||||
.category_card-box {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.section_tabs,
|
||||
.page_tabs {
|
||||
.category_card__header {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
line-height: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.category_card__body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.onenote_card__header {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.onenote_card__body {}
|
||||
|
||||
.onenote_card-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.nav_tabs {
|
||||
.onenote_item_card {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.onenote_category_card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 55px;
|
||||
padding: 0px;
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.category_icon {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user