增加 appstatus，messagebox式样
This commit is contained in:
simple321vip
@@ -83,4 +83,12 @@ export default [
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
url: '/wiki/api/v1/author/blogs/001',
|
||||
method: 'POST',
|
||||
response: () => {
|
||||
return {
|
||||
}
|
||||
},
|
||||
},
|
||||
] as MockMethod[]
|
||||
|
||||
@@ -24,6 +24,20 @@ export default [
|
||||
btId: "001",
|
||||
order: 1,
|
||||
},
|
||||
{
|
||||
bid: "0003",
|
||||
title: "three",
|
||||
content: "xxxxxxxxx",
|
||||
btId: "001",
|
||||
order: 2,
|
||||
},
|
||||
{
|
||||
bid: "0004",
|
||||
title: "four",
|
||||
content: "xxyyyyxxxxxxx",
|
||||
btId: "001",
|
||||
order: 3,
|
||||
},
|
||||
],
|
||||
order: 0
|
||||
},
|
||||
|
||||
@@ -17,6 +17,40 @@
|
||||
</el-col>
|
||||
<el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
|
||||
<div class="right-box">
|
||||
<el-dropdown class="item">
|
||||
<div class="dp-flex justify-content-center align-items height-full width-full">
|
||||
<el-button v-show="!useSettingsStore.isMobile" type="success" round>appStatus</el-button>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="dropdown-group">
|
||||
<el-dropdown-item v-for="status in appStatus">
|
||||
<el-icon v-if="status.status" color="green">
|
||||
<CircleCheck />
|
||||
</el-icon>
|
||||
<el-icon v-if="!status.status" color="red">
|
||||
<Warning />
|
||||
</el-icon>
|
||||
{{ status.appName }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<el-badge :value="messageCount" class="item">
|
||||
<el-button round @click="drawer = true">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<Message />
|
||||
</el-icon>
|
||||
<el-drawer v-model="drawer" title="I am the title" :with-header="false">
|
||||
<span>站内信呢</span>
|
||||
<div v-for="msg in messageList">
|
||||
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
</el-button>
|
||||
</el-badge>
|
||||
<el-dropdown>
|
||||
<div class="dp-flex justify-content-center align-items height-full width-full">
|
||||
<span class="header-avatar" style="cursor: pointer">
|
||||
@@ -57,19 +91,46 @@
|
||||
import CustomPic from "@/components/customPic/index.vue";
|
||||
import { tenantStore } from '@/store/modules/tenant'
|
||||
import { settingsStore } from '@/store/modules/settings'
|
||||
import { Message } from "@element-plus/icons-vue"
|
||||
import { reactive, ref } from "vue";
|
||||
|
||||
// -- IMPORT --
|
||||
const useTenantStore = tenantStore()
|
||||
const useSettingsStore = settingsStore()
|
||||
|
||||
// -- REACTIVE OBJECT --
|
||||
const appStatus = reactive([
|
||||
{
|
||||
appName: "wiki",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
appName: "bookmark",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
appName: "calendar",
|
||||
status: false,
|
||||
},
|
||||
])
|
||||
|
||||
// -- REF OBJECT --
|
||||
const messageCount = ref()
|
||||
const drawer = ref(false)
|
||||
const messageList = reactive<any[]>([
|
||||
{
|
||||
title: "过期通知",
|
||||
type: "",
|
||||
message: "尊敬的用户，你的账号余额已不足，请充值",
|
||||
Unread: true,
|
||||
}
|
||||
])
|
||||
|
||||
// -- EVENT DEFINITION
|
||||
const toPerson = () => {
|
||||
}
|
||||
|
||||
|
||||
useTenantStore.reflush()
|
||||
|
||||
</script>
|
||||
@@ -88,6 +149,11 @@ useTenantStore.reflush()
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 5px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.header-avatar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
<div>
|
||||
<el-menu router class="el-menu-vertical" :style="{ height: sideHeight }" :background-color="theme.background"
|
||||
:active-text-color="theme?.background">
|
||||
|
||||
<el-menu-item v-for="(route, index) in current_routes" :key="index" :index="route.path" :title="route.meta?.name"
|
||||
@click="onclick()">
|
||||
<template #title>
|
||||
|
||||
@@ -43,8 +43,8 @@
|
||||
</div>
|
||||
<draggable :list="blogTypes[checkedBlogIndex].blogs" ghost-class="ghost" handle=".move" animation="300"
|
||||
:force-fallback="true" itemKey="" filter=".forbid" chosen-class="chosenClass" :fallback-class="true"
|
||||
:fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50" @start="onStartBlog"
|
||||
@end="sortBlog" group="group2" :move="onMove">
|
||||
:fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50" @start="onStartBlog" @end="sortBlog"
|
||||
group="group2" :move="onMove">
|
||||
<template #item="{ element }">
|
||||
<div class="item">
|
||||
<label class="move"></label>
|
||||
@@ -247,6 +247,9 @@ const onclickTypeTab = (order: number) => {
|
||||
|
||||
const onclickBlogTab = (blog: Blog) => {
|
||||
deleteBtName.value = ""
|
||||
if (blog.order == checkedIndex.value) {
|
||||
return
|
||||
}
|
||||
getContent(blog.bid).then(response => {
|
||||
checkedIndex.value = blog.order
|
||||
blogTypes[checkedBlogIndex.value].blogs[checkedIndex.value].content = response.data.content
|
||||
@@ -466,16 +469,19 @@ const sortBlogType = () => {
|
||||
|
||||
const sortData: BlogType[] = []
|
||||
blogTypes.forEach((blogType: BlogType, index) => {
|
||||
blogType.order = index
|
||||
|
||||
if (blogType.btId == id.value) {
|
||||
checkedBlogIndex.value = index
|
||||
}
|
||||
sortData.push({
|
||||
btId: blogType.btId,
|
||||
btName: blogType.btName,
|
||||
blogs: [],
|
||||
order: blogType.order
|
||||
})
|
||||
if (blogType.order != index) {
|
||||
sortData.push({
|
||||
btId: blogType.btId,
|
||||
btName: blogType.btName,
|
||||
blogs: [],
|
||||
order: index
|
||||
})
|
||||
blogType.order = index
|
||||
}
|
||||
})
|
||||
|
||||
sortBlogTypes(sortData).then(() => {
|
||||
@@ -489,19 +495,24 @@ const sortBlogType = () => {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc wikiソート機能
|
||||
*
|
||||
*/
|
||||
const sortBlog = () => {
|
||||
|
||||
const sortData: any[] = []
|
||||
|
||||
blogTypes[checkedBlogIndex.value].blogs.forEach((blog: Blog, index) => {
|
||||
blog.order = index
|
||||
if (blog.bid == id.value) {
|
||||
checkedIndex.value = index
|
||||
}
|
||||
sortData.push({
|
||||
bid: blog.bid,
|
||||
order: blog.order
|
||||
})
|
||||
if (index != blog.order) {
|
||||
sortData.push({
|
||||
bid: blog.bid,
|
||||
order: index
|
||||
})
|
||||
blog.order = index
|
||||
}
|
||||
})
|
||||
|
||||
sortBlogs(sortData, blogTypes[checkedBlogIndex.value].btId).then(() => {
|
||||
@@ -553,13 +564,7 @@ const onStartBlogType = () => {
|
||||
};
|
||||
|
||||
const onStartBlog = () => {
|
||||
console.log("开始拖拽");
|
||||
id.value = blogTypes[checkedBlogIndex.value].blogs[checkedIndex.value].bid
|
||||
};
|
||||
|
||||
//拖拽结束的事件
|
||||
const onEnd = () => {
|
||||
|
||||
}
|
||||
|
||||
const onMove = (e: any) => {
|
||||
|
||||
@@ -23,8 +23,7 @@
|
||||
<el-form :model="dialog_form">
|
||||
<el-form-item label="分类" :label-width="formLabelWidth">
|
||||
<el-select v-model="dialog_form.bk_type_id" placeholder>
|
||||
<el-option v-for="(item) in types" :key="item.bk_type_id" :value="item.bk_type_id"
|
||||
:label="item.bk_type_name" />
|
||||
<el-option v-for="(item) in types" :key="item.bk_type_id" :value="item.bk_type_id" :label="item.bk_type_name" />
|
||||
</el-select>
|
||||
<el-form-item label="备注" :label-width="formLabelWidth">
|
||||
<el-input v-model="dialog_form.comment" autocomplete="off" />
|
||||
|
||||
@@ -208,6 +208,7 @@ const handleTags = (tag: any) => {
|
||||
} else {
|
||||
tag.clicked = true
|
||||
search_form.bk_type_ids.push(tag.bk_type_id)
|
||||
doSearch()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user