onenote test环境再修改

mock/onenote.ts

@@ -65,6 +65,13 @@ export default [
       return {}
     }
   },
+  {
+    url: '/onenote/api/v1/item',
+    method: 'post',
+    response: () => {
+      return {}
+    }
+  },
   {
     url: '/onenote/api/v1/item',
     method: 'delete',

src/api/onenote.ts

@@ -7,14 +7,6 @@ const get_categorys = () => {
   })
 }
 
-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',
@@ -23,6 +15,13 @@ const put_category = (data: Object) => {
   })
 }
 
+const get_items = (category_id: string) => {
+  return service({
+    url: '/onenote/api/v1/' + category_id + '/items/',
+    method: 'GET',
+  })
+}
+
 const put_item = (data: Object) => {
   return service({
     url: '/onenote/api/v1/item',
@@ -47,29 +46,4 @@ const delete_item = (data: Object) => {
   })
 }
 
-const update_page = (params: Object) => {
+export { get_categorys, get_items, put_category, put_item, post_item, delete_item }
-  return service({
-    url: '/onenote/api/v1/one_note/update_page',
-    method: 'POST',
-    data: params
-  })
-}
-
-const update_section = (params: Object) => {
-  return service({
-    url: '/onenote/api/v1/one_note/update_section',
-    method: 'POST',
-    data: params
-  })
-}
-
-
-const insert_page = (params: Object) => {
-  return service({
-    url: '/onenote/one_note/insert_page',
-    method: 'PUT',
-    data: params
-  })
-}
-
-export { get_categorys, get_items, update_page, update_section, put_category, put_item, post_item, delete_item, insert_page }

src/view/onenote/index.vue

@@ -38,12 +38,12 @@
     <el-page-header @back="onBack">
       <template #content>
         <div class="flex items-center">
-          <span class="text-large font-600 mr-3"> {{ current_category }} </span>
+          <span class="category_theme"> {{ current_category.category_theme }} </span>
+          <el-button size="default" :icon="Plus" round @click="onAddItem"></el-button>
         </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)">
+    <el-card v-for="(item, key) in itemCards" shadow="hover" class="onenote_item_card" @dblclick="oNEditItem(item)">
       <template #header>
         <div class="onenote_card__header">
           {{ item.item_name }}
@@ -90,8 +90,11 @@
       <template #prepend>text:</template>
     </el-input>
 
-    <el-button size="large" :icon="Check" round @click="deleteItem">删除</el-button>
+    <el-button v-if="isEditItemMode == true" size="large" :icon="Check" round @click="deleteItem">删除</el-button>
-    <el-button size="large" :icon="Check" round @click="addItem">确认</el-button>
+    <el-button v-if="isEditItemMode == false" size="large" :icon="Check" round
+      @click="itemDrawer = false">取消</el-button>
+    <el-button v-if="isEditItemMode == false" size="large" :icon="Check" round @click="addItem">确认</el-button>
+    <el-button v-if="isEditItemMode == true" size="large" :icon="Check" round @click="editItem">确认</el-button>
   </el-drawer>
 
 </template>
@@ -99,7 +102,7 @@
 <script setup lang="ts">
 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 { get_categorys, get_items, put_category, put_item, delete_item, post_item } from '@/api/onenote'
 
 
 // -- IMPORT --
@@ -115,33 +118,40 @@ type CategoryCard = {
 type CategoryItem = {
   item_id: string,
   item_name: string,
-  item_value: string
+  item_value: string,
+  category_id: string
 }
 
 // -- REACTIVE OBJECT --
 const itemCards = reactive<CategoryItem[]>([])
 const categoryCards = reactive<CategoryCard[]>([])
+
+// -- REF OBJECT --
+let element_ui_icon = "https://element-plus.gitee.io/zh-CN/component/icon.html"
+let cainiao_color = "https://www.runoob.com/html/html-colornames.html"
+const categoryDrawer = ref(false)
+const itemDrawer = ref(false)
+let isEditItemMode = ref(false)
+let isShowCard = ref(false)
+let isshowCategorys = ref(true)
+let current_category = ref<CategoryCard>({
+  category_id: '',
+  category_color: '',
+  category_icon: '',
+  category_theme: ''
+})
+let item_form = ref<CategoryItem>({
+  item_id: '',
+  item_name: '',
+  item_value: '',
+  category_id: ''
+})
 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 = () => {
@@ -151,24 +161,41 @@ const onBack = () => {
 
 const onAddItem = () => {
   clearItemForm()
+  isEditItemMode.value = false
   itemDrawer.value = true
 }
 
+const oNEditItem = (item: CategoryItem) => {
+  itemDrawer.value = true
+  isEditItemMode.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 showCategory = (card: CategoryCard) => {
   get_items(card.category_id).then((response) => {
     itemCards.length = 0
     response.data.forEach((item: CategoryItem) => {
       itemCards.push(item)
     })
+    current_category.value.category_id = card.category_id
+    current_category.value.category_icon = card.category_icon
+    current_category.value.category_color = card.category_color
+    current_category.value.category_theme = card.category_theme
     isshowCategorys.value = false
     isShowCard.value = true
-    current_category.value = card.category_theme
   })
 }
 
 const addCategory = () => {
-  put_category(category_form).then(resp => {
+  put_category(category_form.value).then(resp => {
-    categoryCards.push(category_form.value)
+    categoryCards.push({
+      category_id: resp.data.category_id,
+      category_color: category_form.value.category_color,
+      category_icon: category_form.value.category_icon,
+      category_theme: category_form.value.category_theme
+    })
     categoryDrawer.value = false
     clearCategoryForm()
   })
@@ -176,31 +203,38 @@ const addCategory = () => {
 
 const addItem = () => {
   put_item(item_form.value).then(resp => {
+    itemCards.push({
+      item_id: resp.data.item_id,
+      item_name: item_form.value.item_name,
+      item_value: item_form.value.item_value,
+      category_id: current_category.value.category_id
+    })
+    itemDrawer.value = false
+  })
+}
+
+const editItem = () => {
+  post_item(item_form.value).then((resp) => {
+    let index = itemCards.findIndex((record) => record.item_id == item_form.value.item_id)
+    itemCards[index].item_name = item_form.value.item_name
+    itemCards[index].item_value = item_form.value.item_value
     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 = ''
+  item_form.value.category_id = current_category.value.category_id
 }
 
 const clearCategoryForm = () => {
@@ -228,6 +262,7 @@ get_categorys().then((resp) => {
   })
 })
 clearItemForm()
+
 </script>
 
 <style  scoped>
@@ -251,7 +286,8 @@ clearItemForm()
   width: 120px;
 }
 
-.onenote_card__body {}
+/* 
+.onenote_card__body {} */
 
 .onenote_card-box {
   display: flex;
@@ -273,4 +309,8 @@ clearItemForm()
 .category_icon {
   margin-bottom: 50px;
 }
+
+.category_theme {
+  margin-right: 30px;
+}
 </style>