ブログ編集画面

src/api/blog.ts

@@ -18,4 +18,23 @@ const get_blog = (params: any) => {
   })
 }
 
-export { get_blogs, get_blog }
+const get_user_blogs = (params: Object) => {
+  return request({
+    url: '/blog',
+    method: 'get',
+    params: params,
+    paramsSerializer: (params) => {
+      return Qs.stringify(params, { arrayFormat: 'repeat' })
+    },
+  })
+}
+
+const update_blog_type = (params: Object) => {
+  return request({
+    url: '/blog/update_blog_type',
+    method: 'post',
+    data: params
+  })
+}
+
+export { get_blogs, get_blog, get_user_blogs, update_blog_type }

src/components/common/Tab.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="section_tab" @mouseover.native="onOver" @mouseleave.native="onLeave" @dblclick="editSection"
+    :style="back_color">
+    <el-input :id="'tab_edit' + row_key" v-show="is_edit" v-model="tab_text" @blur="clickTap" @keyup.enter="doNothing">
+    </el-input>
+    <div :id="'tab_show' + row_key" v-show="!is_edit">{{ tab_text }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+type Props = {
+  row_key: string,
+  checked: boolean,
+  checked_color: string,
+  over_color: string,
+  leave_color: string,
+  tab_text: string
+}
+const props = defineProps<Props>()
+
+const color = {
+  checked_color: props.checked_color.length == 0 ? "grey" : props.checked_color,
+  over_color: props.over_color.length == 0 ? "#FDF5E6" : props.over_color,
+  leave_color: props.leave_color.length == 0 ? "white" : props.leave_color
+}
+
+let back_color = ref("white")
+let is_edit = ref(false)
+
+watch(props, () => {
+  if (props.checked) {
+    back_color.value = "background-color: " + color.checked_color + ";"
+  } else {
+    back_color.value = "background-color: " + color.leave_color + ";"
+  }
+})
+if (props.checked) {
+  back_color.value = "background-color: " + color.checked_color + ";"
+}
+const editSection = () => {
+  is_edit.value = !is_edit.value
+  const inputElement: any = document.getElementById("section_edit" + props.row_key)
+  setTimeout(() => inputElement.focus())
+}
+const doNothing = (e: KeyboardEvent) => {
+  (e.target as HTMLInputElement).blur()
+}
+const onOver = () => {
+  if (props.checked)
+    return
+  is_edit.value ? "" : back_color.value = "background-color: " + color.over_color + ";"
+}
+const onLeave = () => {
+  if (props.checked)
+    return
+  is_edit.value ? "" : back_color.value = "background-color: " + color.leave_color + ";"
+}
+const emit = defineEmits(['on-click'])
+const clickTap = () => {
+  is_edit.value = !is_edit.value
+  const params = {
+    section_id: props.row_key,
+    section_name: props.tab_text
+  }
+  emit('on-click', params)
+  onLeave()
+}
+</script>
+
+<style scoped>
+.tab_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>

src/entity/index.ts

@@ -0,0 +1,15 @@
+type Blog = {
+  blog_id: string,
+  blog_type_id: string,
+  blog_type_name: string,
+  blog_title: string,
+  blog_prex: string
+}
+
+type BlogType = {
+  blog_type_id: string,
+  blog_type_name: string,
+  blog_list: Blog[]
+}
+
+export { Blog, BlogType }

src/main.ts

@@ -19,14 +19,26 @@ import { getToken } from './utils/auth'
 const whiteList = ['/', '/blog']
 let url = window.location.href
 console.log(url)
-if (url != 'http://localhost:3000/' && url.search("blog=") != -1) {
-  let blog = {
-    blog_id: url.split("=")[1]
+if (url != 'http://localhost:3000/') {
+  // if(url.search("blog=") != -1) {
+  //   let blog = {
+  //     blog_id: url.split("=")[1]
+  //   }
+  //   router.push({
+  //     path: '/feedback',
+  //     query: blog
+  //   })
+  // }
+  if (url.search("edit_blog=") != -1) {
+    let blog = {
+      blog_id: url.split("=")[1]
+    }
+    router.push({
+      path: '/BlogEditer',
+      query: blog
+    })
   }
-  router.push({
-    path: '/feedback',
-    query: blog
-  })
+
 }
 router.beforeEach((to, from, next) => {
   console.log(from.path, to.path)

src/router/index.ts

@@ -74,6 +74,10 @@ const routes: Array<RouteRecordRaw> = [
     path: "/feedback",
     component: () => import('../view/blog/mdview.vue')
   },
+  {
+    path: "/BlogEditer",
+    component: () => import('../view/blog/createBlog.vue')
+  },
   {
     path: "/login",
     component: () => import('../components/login/login.vue')

src/view/blog/createBlog.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="blog_editer">
+    <div class="tab_list">
+      <Tab :row_key="item.blog_type_id" :checked="handleCheck(item.blog_type_id)" :tab_text="item.blog_type_name"
+        checked_color="" over_color="" leave_color="" @on-click="saveType"
+        @click="onclickTypeTab(item.blog_type_id, index)" v-for="(item, index) in data_type_list">
+      </Tab>
+    </div>
+    <div>
+      <Tab :row_key="item.blog_type_id" :checked="handleCheck(item.blog_type_id)" :tab_text="item.blog_type_name"
+        checked_color="" over_color="" leave_color="" @on-click="saveBlog"
+        @click="onclickBlogTab(item.blog_type_id, index)"
+        v-for="(item, index) in data_type_list[checkedIndex].blog_list">
+      </Tab>
+    </div>
+    <div>
+      <md-editor v-model="text" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import MdEditor from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+import { get_user_blogs } from '../../api/blog'
+import { Blog, BlogType } from '../../entity/index'
+import { update_blog_type } from '../../api/blog'
+import Tab from '../../components/common/Tab.vue'
+
+let text = ref<string>("")
+type Tab = {
+  id: string
+}
+
+let type_tab = reactive<Tab>(<Tab>{
+  id: '1'
+})
+let blog_tab = reactive<Tab>(<Tab>{
+  id: '1'
+})
+
+const data_type_list = reactive<BlogType[]>([])
+let checkedIndex = ref<number>(0)
+
+data_type_list.push({
+  blog_type_id: '1',
+  blog_type_name: 'xxx',
+  blog_list: []
+})
+// data_type_list[0].blog_list.push({})
+data_type_list.push({
+  blog_type_id: '2',
+  blog_type_name: 'yyy',
+  blog_list: []
+})
+data_type_list.push({
+  blog_type_id: '3',
+  blog_type_name: 'zzz',
+  blog_list: []
+})
+
+
+const blog_type_list = reactive<BlogType[]>([])
+get_user_blogs({}).then(response => {
+
+  response.data.forEach((element: any) => {
+    const blog_type: BlogType = {
+      blog_type_id: element.blog_type_id,
+      blog_type_name: element.blog_type_id,
+      blog_list: []
+    }
+    element.blog_list.forEach((item: any) => {
+      const blog: Blog = {
+        blog_id: item.blog_id,
+        blog_type_id: item.blog_type_id,
+        blog_type_name: item.blog_type_name,
+        blog_title: item.blog_title,
+        blog_prex: item.blog_prex
+      }
+      blog_type.blog_list.push(blog)
+    });
+    blog_type_list.push(blog_type)
+  });
+})
+const handleCheck = (id: string) => {
+  return type_tab.id == id
+}
+const saveType = (params: any) => {
+  console.log(params)
+  update_blog_type(1).then(response => {
+
+  })
+}
+const saveBlog = (params: any) => {
+  console.log(params)
+  update_blog_type(1).then(response => {
+
+  })
+}
+const onclickTypeTab = (id: string, index: number) => {
+  checkedIndex.value = index
+  type_tab.id = id
+}
+const onclickBlogTab = (id: string, index: number) => {
+  blog_tab.id = id
+}
+</script>
+
+
+<style>
+.blog_editer {
+  display: flex;
+}
+
+.tab_list {
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/view/blog/index.vue

@@ -1,7 +1,11 @@
 <template>
+  <el-button @click="openBlogEditer">++++++</el-button>
   <div class="blog_list" v-for="item in data_list">
     <h3 style="cursor: pointer;" @click="openBlog">{{ item.blog_title }}</h3>
-    <span style="font-size: 12px;">{{ item.blog_prex }}</span>  </div>
+    <span style="font-size: 12px;">{{ item.blog_prex }}</span>
+  </div>
+
+
 </template>
 
 <script setup lang="ts">
@@ -9,13 +13,7 @@ import { reactive, ref } from 'vue';
 import { get_blogs } from '../../api/blog'
 import router from '../../router/index'
 
-type Blog = {
-  blog_id: String,
-  blog_type_id: String,
-  blog_type_name: string,
-  blog_title: string,
-  blog_prex: string
-}
+import { Blog, BlogType } from '../../entity/index'
 
 const data_list = reactive<Blog[]>([])
 
@@ -31,7 +29,6 @@ query()
 let text = ref<string>('')
 text.value = "开始吧肿瘤"
 
-
 const openBlog = () => {
   const { href } = router.resolve({
     path: '/blog=1'
@@ -39,6 +36,12 @@ const openBlog = () => {
   window.open(href, '_blank');
 }
 
+const openBlogEditer = () => {
+  const { href } = router.resolve({
+    path: '/edit_blog=1'
+  });
+  window.open(href, '_blank');
+}
 </script>
 
 <style>