From 2e2dbbbf72e1b4df3089437db5830e174443e4b3 Mon Sep 17 00:00:00 2001 From: simple321vip Date: Fri, 28 Oct 2022 00:52:28 +0800 Subject: [PATCH] rewrite write page --- mock/blog.ts | 31 +++ mock/{blogs.ts => blogType.ts} | 105 +++++++- src/view/blog/createBlog.vue | 428 +++++++++++++++++++-------------- 3 files changed, 383 insertions(+), 181 deletions(-) create mode 100644 mock/blog.ts rename mock/{blogs.ts => blogType.ts} (50%) diff --git a/mock/blog.ts b/mock/blog.ts new file mode 100644 index 0000000..0c9b7ff --- /dev/null +++ b/mock/blog.ts @@ -0,0 +1,31 @@ +import { MockMethod } from 'vite-plugin-mock' + +export default [ + { + url: '/auth/api/v1/author/blog/content/0001', + method: 'get', + response: ({ body, query }) => { + return { + content: "asdasdasdasdsadasdasdasdasdas" + } + } + }, + { + url: '/auth/api/v1/author/blog/content/0002', + method: 'get', + response: ({ body, query }) => { + return { + content: "wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww" + } + } + }, + { + url: '/auth/api/v1/author/blog/content', + method: 'POST', + response: ({ body, query }) => { + return { + content: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" + } + } + }, +] as MockMethod[] diff --git a/mock/blogs.ts b/mock/blogType.ts similarity index 50% rename from mock/blogs.ts rename to mock/blogType.ts index 7f2e8f7..32367c3 100644 --- a/mock/blogs.ts +++ b/mock/blogType.ts @@ -4,11 +4,11 @@ export default [ { url: '/auth/api/v1/author/blog/list', method: 'get', - response: () => { + response: ({ body, query }) => { return [ { btId: "001", - btName: "your world", + btName: "your world---", blog_list: [ { bid: "0001", @@ -48,6 +48,27 @@ export default [ ], order: 1 }, + { + btId: "003", + btName: "my world", + blog_list: [ + { + bid: "0003", + title: "three", + content: "nothing", + btId: "002", + order: 0, + }, + { + bid: "0004", + title: "two", + content: "anything", + btId: "002", + order: 1, + }, + ], + order: 2 + }, ] } }, @@ -100,5 +121,83 @@ export default [ }, ] } - } + }, + { + url: '/auth/api/v1/author/blog_type', + method: 'put', + response: () => { + return { + btId: "001", + btName: "your world---", + blog_list: [ + { + bid: "0001", + title: "one", + content: "nothing", + btId: "001", + order: 0, + }, + ], + order: 2, + } + } + }, + { + url: '/auth/api/v1/author/blog_type', + method: 'post', + response: () => { + return { + } + } + }, + { + url: '/auth/api/v1/author/blog_type', + method: 'delete', + response: ({ body, query }) => { + return [ + { + btId: "001", + btName: "your world---", + blog_list: [ + { + bid: "0001", + title: "one", + content: "nothing", + btId: "001", + order: 0, + }, + { + bid: "0002", + title: "two", + content: "anything", + btId: "001", + order: 1, + }, + ], + order: 0 + }, + { + btId: "002", + btName: "my world", + blog_list: [ + { + bid: "0003", + title: "three", + content: "nothing", + btId: "002", + order: 0, + }, + { + bid: "0004", + title: "two", + content: "anything", + btId: "002", + order: 1, + }, + ], + order: 1 + }, + ] + } + }, ] as MockMethod[] diff --git a/src/view/blog/createBlog.vue b/src/view/blog/createBlog.vue index 79ce4ed..60e46c9 100644 --- a/src/view/blog/createBlog.vue +++ b/src/view/blog/createBlog.vue @@ -1,7 +1,18 @@ -
- 增加一个博客 + +
+ + +
+
+
+ 增加一个博客 +
- {{ element.title }} - - - +

{{ element.title }}

+
+ +
+ +
- - - - - + + + - - 你正在对 {{ blogTypes[checkedBlogIndex].btName }} - - - + + + + 你正在对「 {{ blogTypes[checkedBlogIndex].btName }}」进行操作 +
+ 修改 + + +
+
+ 删除 + + +
+ + 你正在对 {{ blogTypes[checkedBlogIndex].blogs[checkedIndex].title }} @@ -98,7 +121,7 @@ import { onMounted, reactive, ref, watch } from 'vue' import $moment from "moment" import MdEditor from 'md-editor-v3' -import { Edit } from "@element-plus/icons-vue" +import { Edit, CaretRight, CaretLeft, Setting } from "@element-plus/icons-vue" import 'md-editor-v3/lib/style.css' import { updateBtName, @@ -132,9 +155,8 @@ type BlogType = { order: number } const blogTypes = reactive([]) -const dialogVisible = ref(false) -const contentDialogVisible = ref(false) -const btdeleteDialogVisible = ref(false) +const blogTypeCreateDialogVisible = ref(false) +const blogTypeEditDialogVisible = ref(false) const deleteDialogVisible = ref(false) let checkedIndex = ref(0) @@ -143,6 +165,9 @@ let isclicked = ref(false) let isReady = ref(false) let updated = ref(false) let startTime = reactive($moment()); +// tmp btName for create, edit, delete +let btName = ref("") +let deleteBtName = ref("") /* draggable 对CSS样式没有什么要求万物皆可拖拽 @@ -160,25 +185,6 @@ const state = reactive({ }) // 関数定義 -//拖拽开始的事件 -const onStart = () => { - console.log("开始拖拽"); -}; - -//拖拽结束的事件 -const onEnd = () => { - blogTypes.forEach((blogType, index) => { - blogType.order = index - }) - sortBlogType() -} - -const onMove = (e: any) => { - //不允许停靠 - if (e.relatedContext.element.disabledPark == true) return false; - return true; -} - /** * Blog一覧取得 */ @@ -210,7 +216,7 @@ const getTestData = async () => { }) isReady.value = true checkedBlogIndex.value = blogTypes[0].order - checkedIndex.value = blogTypes.values().next().value.blogs.keys().next().value + checkedIndex.value = 0 // TODO 需要优化部分 /** * 延迟执行一秒 @@ -233,27 +239,26 @@ const getTestData = async () => { /** * BlogTypeを選べる - * @param key + * @param order */ const onclickTypeTab = (order: number) => { checkedBlogIndex.value = order - const bid = blogTypes[order].blogs.values().next().value.bid - // getContent(bid).then(response => { - // (blogTypes[order].blogs.get(bid) as Blog).content = response.data.content - // checkedBlogIndex.value = order - // checkedIndex.value = bid - // }) -} - -const onclickBlogTab = (blog: Blog) => { - getContent(blog.bid).then(response => { - blogTypes[checkedBlogIndex.value].blogs[checkedIndex.value].content = response.data.content - + const bid = blogTypes[order].blogs[0].bid + getContent(bid).then(response => { + blogTypes[order].blogs[0].content = response.data.content + checkedBlogIndex.value = order + checkedIndex.value = 0 }) } -const handleEditBtName = (bt: BlogType) => { - dialogVisible.value = true +const onclickBlogTab = (blog: Blog) => { + checkedIndex.value = blog.order + getContent(blog.bid).then(response => { + blogTypes[checkedBlogIndex.value].blogs[checkedIndex.value].content = response.data.content + checkedIndex.value = blog.order + }).catch(() => { + checkedIndex.value = blog.order + }) } /** @@ -276,18 +281,7 @@ const saveContent = () => { }) } -/** - * btName modify - */ -const saveType = () => { - const query = { - btId: checkedBlogIndex.value, - btName: (blogTypes[checkedBlogIndex.value] as BlogType).btName - } - updateBtName(query).then(response => { - dialogVisible.value = false - }) -} + /** * Blogタイトル修正 @@ -350,14 +344,29 @@ const deleteBlog = () => { blogTypes[checkedBlogIndex.value].blogs.splice(checkedIndex.value, 1) deleteDialogVisible.value = false } + deleteDialogVisible.value = false + btName.value = "" + }).catch(() => { + deleteDialogVisible.value = false + btName.value = "" }) - btName.value = "" + } } -// Blogタイプ新規作成用、作成後、リセットする -let btName = ref("") +const handleCreateBlogType = () => { + btName.value = blogTypes[checkedBlogIndex.value].btName + blogTypeEditDialogVisible.value = true +} + +/** + * create blogType + */ const insertBlogType = () => { + if (btName.value == "") { + blogTypeCreateDialogVisible.value = false + return + } const data = { btName: btName.value, order: blogTypes.length @@ -383,32 +392,74 @@ const insertBlogType = () => { blog_type.blogs.push(blog) }) blogTypes.push(blog_type) - checkedBlogIndex.value = response.data.btId - checkedIndex.value = blog_type.blogs.keys().next().value - contentDialogVisible.value = false + checkedBlogIndex.value = response.data.order + checkedIndex.value = blog_type.blogs[0].order + blogTypeCreateDialogVisible.value = false btName.value = "" }) } +/** + * edit blogType + */ +const saveBlogType = () => { + if (btName.value == "") { + blogTypeEditDialogVisible.value = false + return + } + const query = { + btId: blogTypes[checkedBlogIndex.value].btId, + btName: btName.value, + } + updateBtName(query).then(() => { + console.log(blogTypes) + blogTypes[checkedBlogIndex.value].btName = btName.value + blogTypeEditDialogVisible.value = false + btName.value = "" + }).catch(() => { + btName.value = "" + blogTypeEditDialogVisible.value = false + }) +} + const deleteBlogType = () => { - if (btName.value == (blogTypes[checkedBlogIndex.value] as BlogType).btName) { + if (deleteBtName.value == blogTypes[checkedBlogIndex.value].btName) { const data = { btId: checkedBlogIndex.value } removeBlogType(data).then((response) => { - if (response.status == 200) { - blogTypes.splice(checkedBlogIndex.value, 1) - checkedBlogIndex.value = blogTypes.keys().next().value - checkedIndex.value = blogTypes.values().next().value.blogs.keys().next().value - } else { - - } - btdeleteDialogVisible.value = false + blogTypes.length = 0 + response.data.sort((x: any, y: any) => { x.order - y.order }) + response.data.forEach((element: any) => { + const blog_type: BlogType = { + btId: element.btId, + btName: element.btName, + blogs: [], + order: element.order + } + element.blog_list.forEach((item: any) => { + const blog: Blog = { + bid: item.bid, + btId: item.btId, + btName: item.btName, + title: item.title, + blog_prex: item.blog_prex, + autosave_control: item.autosave_control, + content: item.content, + order: item.order + } + blog_type.blogs.push(blog) + }) + blogTypes.push(blog_type) + }) + checkedBlogIndex.value = 0 + checkedIndex.value = 0 + blogTypeEditDialogVisible.value = false }) - btName.value = "" } else { - + blogTypeEditDialogVisible.value = false } + deleteBtName.value = "" } const sortBlogType = () => { @@ -448,26 +499,65 @@ getTestData() // サイズ調整部分 -type WholeStyle = { - width: string, - height: string +//拖拽开始的事件 +const onStart = () => { + console.log("开始拖拽"); +}; + +//拖拽结束的事件 +const onEnd = () => { + blogTypes.forEach((blogType, index) => { + blogType.order = index + }) + sortBlogType() } -let innerHeight = ref("") +const onMove = (e: any) => { + //不允许停靠 + if (e.relatedContext.element.disabledPark == true) return false; + return true; +} + +type WholeStyle = any const btWholeStyle = reactive({} as WholeStyle) -let btWidth = 0.10 * window.innerWidth -btWholeStyle.width = btWidth + 'px' -btWholeStyle.height = window.innerHeight + 'px' const bWholeStyle = reactive({} as WholeStyle) -let bWidth = 0.23 * window.innerWidth -bWholeStyle.width = bWidth + 'px' const cWholeStyle = reactive({} as WholeStyle) -let contentWidth = 0.67 * window.innerWidth -cWholeStyle.width = contentWidth + 'px' -innerHeight.value = (window.innerHeight - 50) + 'px' -// onMounted(() => { +const collapsible = reactive([0, 0]) +const whole_width = reactive([0.15, 0.15]) +let innerHeight = ref("") +const selected_style = { + "background-color": "#EBEBEB" +} + +const unselected_style = { + "background-color": "#FFFFFF" +} + +const setup_size = () => { + btWholeStyle.width = whole_width[0] * window.innerWidth + 'px' + bWholeStyle.width = whole_width[1] * window.innerWidth + 'px' + cWholeStyle.width = ((1 - whole_width[0] - whole_width[1]) * window.innerWidth - 44) + 'px' + innerHeight.value = (window.innerHeight - 50) + 'px' + btWholeStyle.height = window.innerHeight + 'px' +} +setup_size() + +watch(collapsible, async () => { + if (collapsible[0] == 0) { + whole_width[0] = 0.15 + } else { + whole_width[0] = 0 + } + if (collapsible[1] == 0) { + whole_width[1] = 0.15 + } else { + whole_width[1] = 0 + } + btWholeStyle.width = whole_width[0] * window.innerWidth + 'px' + bWholeStyle.width = whole_width[1] * window.innerWidth + 'px' + cWholeStyle.width = ((1 - whole_width[0] - whole_width[1]) * window.innerWidth - 44) + 'px' +}) -// })