simple321vip/violin-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
simple321vip
2022-10-27 00:04:37 +08:00
parent 7ffde47b21
commit 6fc98d832b
2 changed files with 131 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mock/blogs.ts
+50
View File
@@ -50,5 +50,55 @@ export default [
}, },
] ]
} }
},
{
url: '/auth/api/v1/author/blog_types',
method: 'post',
response: () => {
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: 1
},
{
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: 0
},
]
}
} }
] as MockMethod[] ] as MockMethod[]
src/view/blog/createBlog.vue
+81 -70
View File
@@ -2,12 +2,17 @@
<div class="blog_editer" v-if="isReady"> <div class="blog_editer" v-if="isReady">
<div class="bt_section" :style="btWholeStyle"> <div class="bt_section" :style="btWholeStyle">
<el-button class="bt-input" @click="contentDialogVisible = true">增加一个分类</el-button> <el-button class="bt-input" @click="contentDialogVisible = true">增加一个分类</el-button>
<draggable :list="blogTypes" ghost-class="ghost" handle=".move" animation="300" :force-fallback="true" <draggable :list="blogTypes" ghost-class="ghost" handle=".move" animation="300" :force-fallback="true" itemKey=""
filter=".forbid" chosen-class="chosenClass" :fallback-class="true" :fallback-on-body="true" filter=".forbid" chosen-class="chosenClass" :fallback-class="true" :fallback-on-body="true"
:touch-start-threshold="50" :fallback-tolerance="50" @start="onStart" @end="onEnd" group="group1"> :touch-start-threshold="50" :fallback-tolerance="50" @start="onStart" @end="onEnd" group="group1"
:move="onMove">
<template #item="{ element }"> <template #item="{ element }">
<div :class="element.disabledMove ? 'forbid item' : 'item'"> <div class="item">
<label class="move">{{ element.btName }}</label> <label class="move"></label>
<el-button class="bt-input" @click="onclickTypeTab(element.order)">{{ element.btName }}</el-button>
<el-icon v-show="checkedBlogIndex == element.order">
<Setting />
</el-icon>
</div> </div>
</template> </template>
</draggable> </draggable>
@@ -15,27 +20,25 @@
<div class="b_section" :style="bWholeStyle"> <div class="b_section" :style="bWholeStyle">
<el-button class="bt-input" :disabled="isclicked" @click="insertBlog">增加一个博客</el-button> <el-button class="bt-input" :disabled="isclicked" @click="insertBlog">增加一个博客</el-button>
<el-button class="bt-input" v-for="(blog, index) of blogTypes[checkedBlogIndex].blogs" <draggable :list="blogTypes[checkedBlogIndex].blogs" ghost-class="ghost" handle=".move" animation="300"
@click="onclickBlogTab(blog[1])"> :force-fallback="true" itemKey="" filter=".forbid" chosen-class="chosenClass" :fallback-class="true"
<el-dropdown trigger="click"> :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50" @start="onStart" @end="onEnd"
<el-icon v-show="checkedIndex == blog[0]"> group="group2" :move="onMove">
<edit /> <template #item="{ element }">
</el-icon> <div class="item">
<template #dropdown> <label class="move"></label>
<el-dropdown-menu> <el-button class="bt-input" @click="onclickBlogTab(element)">{{ element.title }}</el-button>
<el-dropdown-item @click="deleteDialogVisible = true">删除</el-dropdown-item> <el-icon v-show="checkedBlogIndex == element.order">
<el-dropdown-item>顶置</el-dropdown-item> <Setting />
<el-dropdown-item @click="true">退出</el-dropdown-item> </el-icon>
</el-dropdown-menu> </div>
</template> </template>
</el-dropdown> </draggable>
{{ blog[1].title }}
</el-button>
</div> </div>
<div class="c_section"> <div class="c_section">
<div class="title_style"> <div class="title_style">
<el-input v-model="((blogTypes[checkedBlogIndex] as BlogType).blogs.get(checkedIndex) as Blog).title" <el-input v-model="blogTypes[checkedBlogIndex].blogs[checkedIndex].title" @keyup.enter.native="saveTitle"
@keyup.enter.native="saveTitle" @blur="saveTitle"> @blur="saveTitle">
</el-input> </el-input>
<div style="width: 60px;"> <div style="width: 60px;">
<span v-if="!updated">已保存</span> <span v-if="!updated">已保存</span>
@@ -43,9 +46,8 @@
</div> </div>
</div> </div>
<div :style="cWholeStyle"> <div :style="cWholeStyle">
<md-editor theme="light" <md-editor theme="light" v-model="blogTypes[checkedBlogIndex].blogs[checkedIndex].content" @save="saveContent"
v-model="((blogTypes[checkedBlogIndex] as BlogType).blogs.get(checkedIndex) as Blog).content" :style="{ height: innerHeight }" />
@save="saveContent" :style="{ height: innerHeight }" />
</div> </div>
</div> </div>
<el-dialog v-model="dialogVisible" title="修改博客分类名称" width="30%"> <el-dialog v-model="dialogVisible" title="修改博客分类名称" width="30%">
@@ -68,8 +70,8 @@
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="btdeleteDialogVisible" title="删除博客分类" width="30%"> <el-dialog v-model="btdeleteDialogVisible" title="删除博客分类" width="30%">
你正在对 {{ (blogTypes[checkedBlogIndex] as BlogType).btName }} 你正在对 {{ blogTypes[checkedBlogIndex].btName }}
<el-input v-model="btName" :placeholder="'请输入<' + (blogTypes[checkedBlogIndex] as BlogType).btName + '>'"> <el-input v-model="btName" :placeholder="'请输入<' + blogTypes[checkedBlogIndex].btName + '>'">
</el-input> </el-input>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
@@ -79,7 +81,7 @@
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="deleteDialogVisible" title="删除博客" width="30%"> <el-dialog v-model="deleteDialogVisible" title="删除博客" width="30%">
你正在对 {{ ((blogTypes[checkedBlogIndex] as BlogType).blogs.get(checkedIndex) as Blog).title }} 你正在对 {{ blogTypes[checkedBlogIndex].blogs[checkedIndex].title }}
<el-input v-model="btName" :placeholder="'请输入<删除>'"> <el-input v-model="btName" :placeholder="'请输入<删除>'">
</el-input> </el-input>
<template #footer> <template #footer>
@@ -126,7 +128,7 @@ type Blog = {
type BlogType = { type BlogType = {
btId: string, btId: string,
btName: string, btName: string,
blogs: Map<string, Blog>, blogs: Blog[],
order: number order: number
} }
const blogTypes = reactive<BlogType[]>([]) const blogTypes = reactive<BlogType[]>([])
@@ -135,7 +137,7 @@ const contentDialogVisible = ref(false)
const btdeleteDialogVisible = ref(false) const btdeleteDialogVisible = ref(false)
const deleteDialogVisible = ref(false) const deleteDialogVisible = ref(false)
let checkedIndex = ref<string>("") let checkedIndex = ref<number>(0)
let checkedBlogIndex = ref<number>(0) let checkedBlogIndex = ref<number>(0)
let isclicked = ref(false) let isclicked = ref(false)
let isReady = ref(false) let isReady = ref(false)
@@ -171,6 +173,12 @@ const onEnd = () => {
sortBlogType() sortBlogType()
} }
const onMove = (e: any) => {
//不允许停靠
if (e.relatedContext.element.disabledPark == true) return false;
return true;
}
/** /**
* Blog一覧取得 * Blog一覧取得
*/ */
@@ -181,7 +189,7 @@ const getTestData = async () => {
const blog_type: BlogType = { const blog_type: BlogType = {
btId: element.btId, btId: element.btId,
btName: element.btName, btName: element.btName,
blogs: new Map<string, Blog>(), blogs: [],
order: element.order order: element.order
} }
element.blog_list.forEach((item: any) => { element.blog_list.forEach((item: any) => {
@@ -195,7 +203,7 @@ const getTestData = async () => {
content: item.content, content: item.content,
order: item.order order: item.order
} }
blog_type.blogs.set(item.bid, blog) blog_type.blogs.push(blog)
}) })
blogTypes.push(blog_type) blogTypes.push(blog_type)
}) })
@@ -228,17 +236,18 @@ const getTestData = async () => {
* @param key * @param key
*/ */
const onclickTypeTab = (order: number) => { const onclickTypeTab = (order: number) => {
checkedBlogIndex.value = order
const bid = blogTypes[order].blogs.values().next().value.bid const bid = blogTypes[order].blogs.values().next().value.bid
getContent(bid).then(response => { // getContent(bid).then(response => {
(blogTypes[order].blogs.get(bid) as Blog).content = response.data.content // (blogTypes[order].blogs.get(bid) as Blog).content = response.data.content
checkedBlogIndex.value = order // checkedBlogIndex.value = order
checkedIndex.value = bid // checkedIndex.value = bid
}) // })
} }
const onclickBlogTab = (blog: Blog) => { const onclickBlogTab = (blog: Blog) => {
getContent(blog.bid).then(response => { getContent(blog.bid).then(response => {
((blogTypes[checkedBlogIndex.value] as BlogType).blogs.get(checkedIndex.value) as Blog).content = response.data.content blogTypes[checkedBlogIndex.value].blogs[checkedIndex.value].content = response.data.content
}) })
} }
@@ -257,7 +266,7 @@ const saveContent = () => {
updated.value = true updated.value = true
const query = { const query = {
bid: checkedIndex.value, bid: checkedIndex.value,
content: ((blogTypes[checkedBlogIndex.value] as BlogType).blogs.get(checkedIndex.value) as Blog).content content: blogTypes[checkedBlogIndex.value].blogs[checkedIndex.value].content
} }
updateContent(query).then(response => { updateContent(query).then(response => {
if (response.status == 200) { if (response.status == 200) {
@@ -290,7 +299,7 @@ const saveTitle = () => {
updated.value = true updated.value = true
const query = { const query = {
bid: checkedIndex.value, bid: checkedIndex.value,
title: ((blogTypes[checkedBlogIndex.value] as BlogType).blogs.get(checkedIndex.value) as Blog).title title: blogTypes[checkedBlogIndex.value].blogs[checkedIndex.value].title
} }
updateContent(query).then(response => { updateContent(query).then(response => {
updated.value = false updated.value = false
@@ -305,7 +314,7 @@ const insertBlog = () => {
const data = { const data = {
btId: checkedBlogIndex.value, btId: checkedBlogIndex.value,
title: $moment().format("YYYY-MM-DD"), title: $moment().format("YYYY-MM-DD"),
order: (blogTypes[checkedBlogIndex.value] as BlogType).blogs.size order: blogTypes[checkedBlogIndex.value].blogs.length
} }
putBlog(data).then(response => { putBlog(data).then(response => {
const { bid, btid, title, content, order, autosave_control } = response.data const { bid, btid, title, content, order, autosave_control } = response.data
@@ -320,7 +329,7 @@ const insertBlog = () => {
order: order order: order
} as Blog } as Blog
(blogTypes[checkedBlogIndex.value] as BlogType).blogs.set(bid, blog) blogTypes[checkedBlogIndex.value].blogs.push(blog)
checkedIndex.value = bid checkedIndex.value = bid
isclicked.value = false isclicked.value = false
}) })
@@ -334,11 +343,11 @@ const deleteBlog = () => {
let delete_data = { let delete_data = {
btId: blogTypes[checkedBlogIndex.value].btId btId: blogTypes[checkedBlogIndex.value].btId
} }
deleteContent(checkedIndex.value, delete_data).then(response => { deleteContent(blogTypes[checkedBlogIndex.value].blogs[checkedIndex.value].bid, delete_data).then(response => {
if (response.data.process_status) { if (response.data.process_status) {
const deleteKey = checkedIndex.value const deleteKey = checkedIndex.value
checkedIndex.value = blogTypes[checkedBlogIndex.value].blogs.keys().next().value checkedIndex.value = blogTypes[checkedBlogIndex.value].blogs.keys().next().value
blogTypes[checkedBlogIndex.value].blogs.delete(deleteKey) blogTypes[checkedBlogIndex.value].blogs.splice(checkedIndex.value, 1)
deleteDialogVisible.value = false deleteDialogVisible.value = false
} }
}) })
@@ -357,7 +366,7 @@ const insertBlogType = () => {
const blog_type: BlogType = { const blog_type: BlogType = {
btId: response.data.btId, btId: response.data.btId,
btName: response.data.btName, btName: response.data.btName,
blogs: new Map<string, Blog>(), blogs: [],
order: response.data.order order: response.data.order
} }
response.data.blog_list.forEach((item: any) => { response.data.blog_list.forEach((item: any) => {
@@ -371,7 +380,7 @@ const insertBlogType = () => {
content: item.content, content: item.content,
order: item.order order: item.order
} }
blog_type.blogs.set(item.bid, blog) blog_type.blogs.push(blog)
}) })
blogTypes.push(blog_type) blogTypes.push(blog_type)
checkedBlogIndex.value = response.data.btId checkedBlogIndex.value = response.data.btId
@@ -409,7 +418,7 @@ const sortBlogType = () => {
sortData.push({ sortData.push({
btId: blogType.btId, btId: blogType.btId,
btName: blogType.btName, btName: blogType.btName,
blogs: new Map(), blogs: [],
order: blogType.order order: blogType.order
}) })
}) })
@@ -471,22 +480,6 @@ innerHeight.value = (window.innerHeight - 50) + 'px'
border-right: 1px solid royalblue; border-right: 1px solid royalblue;
} }
.bt-input {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-left: 0px;
padding-left: 10px;
font-size: 15px;
overflow: hidden;
height: 50px;
border-radius: 0px;
border-right: 0px;
border-left: 0px;
border-top: 1px solid royalblue;
border-bottom: 1px solid royalblue;
}
.title_style { .title_style {
display: flex; display: flex;
} }
@@ -561,30 +554,48 @@ table.tb td:nth-of-type(1) {
} }
.item { .item {
border: solid 1px #ddd; /* border: solid 1px rgb(221, 221, 221); */
padding: 0px; padding: 0px;
text-align: left; text-align: left;
background-color: #fff; /* background-color: rgb(247, 246, 246); */
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
min-height: 100px; align-items: center;
/* min-height: 100px; */
user-select: none; user-select: none;
cursor: move;
} }
.item>label { .item>label {
border-bottom: solid 1px #ddd; /* border-bottom: solid 1px rgb(221, 221, 221); */
padding: 6px 10px; background-color: lightslategrey;
color: #333; color: #333;
height: 50px;
width: 10px;
} }
.item>label:hover { .item>label:hover {
cursor: move; cursor: move;
} }
.bt-input {
margin-left: 0px;
padding-left: 10px;
font-size: 15px;
overflow: hidden;
height: 50px;
width: 100px;
border-radius: 0px;
border-right: 0px;
border-left: 0px;
/* border-top: 1px solid royalblue;
border-bottom: 1px solid royalblue; */
}
.item>p { .item>p {
padding: 6px 10px; padding: 6px 10px;
color: #666; color: rgb(142, 51, 51);
} }
.chosenClass { .chosenClass {