UI修改
This commit is contained in:
a0049873
parent
227adc0f4b
commit
e5d600867f
|
|
@ -75,10 +75,12 @@
|
|||
<div class="mynotice" v-show="mynoticeFlag">
|
||||
<a-list item-layout="horizontal" :data-source="mynoticeData">
|
||||
<template #renderItem="{ item }">
|
||||
<a-tooltip placement="left">
|
||||
<!-- <a-tooltip placement="left">
|
||||
<template #title>
|
||||
<span>{{ item.content }}</span>
|
||||
</template>
|
||||
|
||||
</a-tooltip> -->
|
||||
<a-list-item>
|
||||
<a-list-item-meta :description="item.senderDate">
|
||||
<template #title>
|
||||
|
|
@ -86,10 +88,26 @@
|
|||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-list>
|
||||
<div class="bottom" @click="goToView()">查看更多</div>
|
||||
<div class="bottom" @click="goToView()">
|
||||
查看更多
|
||||
<svg
|
||||
t="1672387024761"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2682"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<path
|
||||
d="M185.884 327.55 146.3 367.133 512.021 732.779 877.7 367.133 838.117 327.55 511.997 653.676Z"
|
||||
p-id="2683"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<i
|
||||
|
|
@ -693,6 +711,9 @@
|
|||
text-align: center;
|
||||
color: #000;
|
||||
font-size: 0.16rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -721,6 +742,9 @@
|
|||
-webkit-box-orient: vertical;
|
||||
cursor: default;
|
||||
}
|
||||
a:hover {
|
||||
color: #0058e1;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 0.7rem;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-21 11:55:07
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-27 15:57:26
|
||||
* @LastEditors: Light
|
||||
* @LastEditTime: 2022-12-30 16:05:18
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -15,7 +15,12 @@
|
|||
</a-breadcrumb>
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div class="item" :class="{ select: selectNav == nav.key }" v-for="nav in navList" :key="nav.key">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ select: selectNav == nav.key }"
|
||||
v-for="nav in navList"
|
||||
:key="nav.key"
|
||||
>
|
||||
<i :class="nav.key" @click="changeNav(nav)"></i>
|
||||
<div>{{ nav.title + '(' + nav.num + ')' }}</div>
|
||||
</div>
|
||||
|
|
@ -23,11 +28,25 @@
|
|||
</div>
|
||||
<div class="btn">
|
||||
<div class="left">
|
||||
<a-select ref="select" v-model:value="value" style="width: 120px" @focus="focus" @change="handleChange">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="value"
|
||||
style="width: 120px"
|
||||
@focus="focus"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-select-option value="全部消息">全部消息</a-select-option>
|
||||
<a-select-option value="已读消息">已读消息</a-select-option>
|
||||
<a-select-option value="未读消息">未读消息</a-select-option>
|
||||
</a-select>
|
||||
<a-checkbox
|
||||
:checked="
|
||||
selectData.length !== 0 && selectData.length === data.length
|
||||
"
|
||||
stlye="margin-right:0.3rem;"
|
||||
@change="changeCheckAll()"
|
||||
></a-checkbox>
|
||||
<div style="margin-left: 10px">全选当前页</div>
|
||||
<div class="check">
|
||||
<div>
|
||||
共
|
||||
|
|
@ -37,26 +56,30 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a-checkbox :checked="
|
||||
selectData.length !== 0 && selectData.length === data.length
|
||||
" stlye="margin-right:0.3rem;" @change="changeCheckAll()"></a-checkbox>
|
||||
<div>全选当前页</div>
|
||||
<span @click="read()">标记为已读</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-box">
|
||||
<div class="main">
|
||||
<a-list item-layout="horizontal" :data-source="data">
|
||||
<template #renderItem="{ item }" @click="goNoticePage(item)">
|
||||
<a-list-item>
|
||||
<a-list-item-meta description="">
|
||||
<template #title>
|
||||
<div class="left" @click="read(item)" :class="item.readStatus === 0 ? 'bold-text' : ''">
|
||||
<div
|
||||
class="left"
|
||||
@click="read(item)"
|
||||
:class="item.readStatus === 0 ? 'bold-text' : ''"
|
||||
>
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="right">{{ '发布时间：' + item.senderDate }}</div>
|
||||
</template>
|
||||
<template #avatar>
|
||||
<a-checkbox :checked="item.checked" @change="changeCheckBox(item)"></a-checkbox>
|
||||
<a-checkbox
|
||||
:checked="item.checked"
|
||||
@change="changeCheckBox(item)"
|
||||
></a-checkbox>
|
||||
<a-badge dot :offset="[-30, 5]" v-show="item.readStatus == 0">
|
||||
<a-avatar :src="item.src" />
|
||||
</a-badge>
|
||||
|
|
@ -67,8 +90,15 @@
|
|||
</template>
|
||||
</a-list>
|
||||
</div>
|
||||
<a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total" show-less-items
|
||||
:show-size-changer="false" @change="changePageNum" />
|
||||
</div>
|
||||
<a-pagination
|
||||
v-model:current="pageNum"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="total"
|
||||
show-less-items
|
||||
:show-size-changer="false"
|
||||
@change="changePageNum"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
|
@ -189,32 +219,32 @@ let typeObj = {
|
|||
9: '评论后台',
|
||||
10: '会客厅前台',
|
||||
11: '会客厅后台',
|
||||
12: '其他'
|
||||
12: '其他',
|
||||
}
|
||||
|
||||
// 对应的后台管理的页面
|
||||
let pageObj = {
|
||||
'申请后台': {
|
||||
申请后台: {
|
||||
0: 'myAgent-CompetencyApplication',
|
||||
1: 'hasToDoTasks-CompetencyApplication',
|
||||
},
|
||||
'上架后台': {
|
||||
上架后台: {
|
||||
0: 'myAgent-AbilityResourceShelf',
|
||||
1: 'hasToDoTasks-AbilityResourceShelf',
|
||||
},
|
||||
'下架后台': {
|
||||
下架后台: {
|
||||
0: 'myAgent-AbilityResourcesRemoved',
|
||||
1: 'hasToDoTasks-AbilityResourcesRemoved',
|
||||
},
|
||||
'需求后台': {
|
||||
需求后台: {
|
||||
0: 'myAgent-ApplicationforCompetencyRequirements',
|
||||
1: 'hasToDoTasks-ApplicationForCompetencyRequirements',
|
||||
},
|
||||
'评论后台': {
|
||||
评论后台: {
|
||||
0: 'myAgent-CommentModeration',
|
||||
1: 'hasToDoTasks-CommentModeration',
|
||||
},
|
||||
'会客厅后台': {
|
||||
会客厅后台: {
|
||||
0: 'activiti-RoomExamineAdmin',
|
||||
1: 'activiti-RoomExamineAdmin',
|
||||
},
|
||||
|
|
@ -222,23 +252,23 @@ let pageObj = {
|
|||
|
||||
// 前台tab名称
|
||||
const tabTypeObj = {
|
||||
'申请前台': '能力申请',
|
||||
'上架前台': '能力上架',
|
||||
'下架前台': '能力下架',
|
||||
'需求前台': '需求评论',
|
||||
'评论前台': '需求评论',
|
||||
'会客厅前台': '会客厅前台'
|
||||
申请前台: '能力申请',
|
||||
上架前台: '能力上架',
|
||||
下架前台: '能力下架',
|
||||
需求前台: '需求评论',
|
||||
评论前台: '需求评论',
|
||||
会客厅前台: '会客厅前台',
|
||||
}
|
||||
|
||||
// 会客厅后台
|
||||
const goPage = (item) => {
|
||||
if (item.jumpUrl && item.type !== 12) {
|
||||
let typeText = typeObj[item.type];
|
||||
console.log('item------------>', item);
|
||||
console.log('typeText类型------------>', typeText);
|
||||
let typeText = typeObj[item.type]
|
||||
console.log('item------------>', item)
|
||||
console.log('typeText类型------------>', typeText)
|
||||
// "http://192.168.124.236:9796/#/personalCenter?tabTypeName=能力申请"
|
||||
let _url = item.jumpUrl && item.jumpUrl.split('#')
|
||||
let openType = '_self';
|
||||
let openType = '_self'
|
||||
// 如果是跳转到后台管理，重新打开页面
|
||||
if (typeText && typeText.indexOf('后台') !== -1) {
|
||||
openType = '_blank'
|
||||
|
|
@ -248,9 +278,8 @@ const goPage = (item) => {
|
|||
}
|
||||
}
|
||||
window.open(item.jumpUrl, openType)
|
||||
|
||||
}
|
||||
return;
|
||||
return
|
||||
// if (typeText) {
|
||||
// console.log('typeText类型------------>', typeText);
|
||||
// // 是后台，跳转到后台相关页面
|
||||
|
|
@ -292,7 +321,8 @@ const read = (item) => {
|
|||
if (item.readStatus === 1) {
|
||||
return goPage(item)
|
||||
}
|
||||
mynoticeRead(item.id).then((res) => {
|
||||
mynoticeRead(item.id)
|
||||
.then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
message.success('通知已读！')
|
||||
mybus.emit('getMynotice')
|
||||
|
|
@ -304,7 +334,8 @@ const read = (item) => {
|
|||
} else {
|
||||
message.error('操作失败！')
|
||||
}
|
||||
}).catch(err => {
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error(err)
|
||||
})
|
||||
} else {
|
||||
|
|
@ -380,11 +411,8 @@ onBeforeUnmount(() => {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -452,19 +480,19 @@ onBeforeUnmount(() => {
|
|||
.btn {
|
||||
background: #fff;
|
||||
margin-top: 0.16rem;
|
||||
padding: 0.14rem 3.1rem 0;
|
||||
padding: 0.14rem 3.1rem 0.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > div:nth-of-type(2) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.ant-select {
|
||||
margin-right: 0.24rem;
|
||||
}
|
||||
|
||||
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -507,12 +535,14 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
}
|
||||
|
||||
.main-box {
|
||||
background: #fff;
|
||||
.main {
|
||||
background: #fff;
|
||||
padding: 0 3.1rem;
|
||||
margin: 0 3.1rem;
|
||||
height: 4.75rem;
|
||||
overflow-y: scroll;
|
||||
|
||||
border-top: 1px solid #dddee1;
|
||||
:deep(.ant-list-item-meta) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -553,6 +583,7 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
background: #fff;
|
||||
|
|
|
|||
Loading…
Reference in New Issue