fix: 修改样式
This commit is contained in:
100011797
parent
5f15f21ff2
commit
0bd4dec42e
|
|
@ -1,14 +1,11 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<div class="box-item" v-if="data.length > showLength">
|
||||
<div class="box-item" v-if="pageIndex > 0">
|
||||
<j-button
|
||||
@click="onLeft"
|
||||
type="primary"
|
||||
:disabled="!(pageIndex > 0)"
|
||||
shape="circle"
|
||||
class="box-item-action"
|
||||
><AIcon type="LeftOutlined"
|
||||
/></j-button>
|
||||
>+{{ pageIndex * showLength }}</j-button>
|
||||
</div>
|
||||
<div class="box-item" v-for="item in getData" :key="item.id">
|
||||
<slot name="card" v-bind="item"></slot>
|
||||
|
|
@ -16,15 +13,12 @@
|
|||
<div class="box-item">
|
||||
<slot name="add"></slot>
|
||||
</div>
|
||||
<div class="box-item" v-if="data.length > showLength">
|
||||
<div class="box-item" v-if="(pageIndex + 1) * showLength < data.length">
|
||||
<j-button
|
||||
:disabled="!(pageIndex + showLength < data.length)"
|
||||
type="primary"
|
||||
shape="circle"
|
||||
class="box-item-action"
|
||||
@click="onRight"
|
||||
><AIcon type="RightOutlined"
|
||||
/></j-button>
|
||||
>+{{ data.length - (pageIndex + 1) * showLength }}</j-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -43,15 +37,13 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
// const emit = defineEmits(['add']);
|
||||
|
||||
const pageIndex = ref<number>(0);
|
||||
|
||||
const getData = computed(() => {
|
||||
const start = pageIndex.value >= 0 ? pageIndex.value : 0;
|
||||
const start = pageIndex.value >= 0 ? pageIndex.value * props.showLength : 0;
|
||||
const end =
|
||||
props.showLength + pageIndex.value < props.data.length
|
||||
? props.showLength + pageIndex.value
|
||||
(pageIndex.value + 1) * props.showLength < props.data.length
|
||||
? props.showLength * (pageIndex.value + 1)
|
||||
: props.data.length;
|
||||
return props.data.slice(start, end);
|
||||
});
|
||||
|
|
@ -69,10 +61,6 @@ const onLeft = () => {
|
|||
pageIndex.value -= 1;
|
||||
}
|
||||
};
|
||||
|
||||
// const onAdd = () => {
|
||||
// emit('add');
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
|
|
|||
|
|
@ -2,27 +2,32 @@
|
|||
<div class="box">
|
||||
<div class="content">
|
||||
<template v-if="bindList.length">
|
||||
<div class="content-item" v-for="item in bindList" :key="item.id">
|
||||
<div
|
||||
class="content-item"
|
||||
v-for="item in bindList"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="content-item-left">
|
||||
<img
|
||||
:src="item.logoUrl || getImage(bindIcon[item.provider])"
|
||||
style="height: 50px; width: 50px"
|
||||
width="50px"
|
||||
height="50px"
|
||||
:src="
|
||||
item.logoUrl ||
|
||||
getImage(bindIcon[item.provider])
|
||||
"
|
||||
style="height: 24px; width: 24px"
|
||||
alt=""
|
||||
/>
|
||||
<Ellipsis style="max-width: 200px; font-size: 22px">{{
|
||||
<Ellipsis style="max-width: 200px; color: #333; margin: 0 8px 0 6px">{{
|
||||
item?.name
|
||||
}}</Ellipsis>
|
||||
<div>
|
||||
<j-tag v-if="item.bound">已绑定</j-tag>
|
||||
<j-tag v-else>未绑定</j-tag>
|
||||
<span v-if="item.bound" style="color: #2BA245">已绑定</span>
|
||||
<span v-else style="color: #999">未绑定</span>
|
||||
</div>
|
||||
<div v-if="item.others?.name">
|
||||
绑定名：{{ item.others?.name }}
|
||||
<div v-if="item.others?.name" style="color: #666666">
|
||||
{{ item.others?.name }}（已绑定的用户名）
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="content-item-right">
|
||||
<j-popconfirm
|
||||
v-if="item.bound"
|
||||
title="确认解除绑定嘛?"
|
||||
|
|
@ -30,13 +35,17 @@
|
|||
>
|
||||
<j-button>解除绑定</j-button>
|
||||
</j-popconfirm>
|
||||
<j-button v-else type="primary" @click="clickBind(item.id)"
|
||||
<j-button
|
||||
v-else
|
||||
ghost
|
||||
type="primary"
|
||||
@click="clickBind(item.id)"
|
||||
>立即绑定</j-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<j-empty v-else style="margin: 200px 0;" />
|
||||
<j-empty v-else style="margin: 200px 0" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -93,18 +102,19 @@ onMounted(() => {
|
|||
.box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
.content {
|
||||
margin-top: 24px;
|
||||
width: 80%;
|
||||
|
||||
width: 100%;
|
||||
.content-item {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
margin-bottom: 16px;
|
||||
padding: 15px;
|
||||
border: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
background: #f7f8fa;
|
||||
|
||||
.content-item-left {
|
||||
display: flex;
|
||||
|
|
@ -112,6 +122,13 @@ onMounted(() => {
|
|||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.content-item-right {
|
||||
button:hover {
|
||||
background-color: @primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -73,17 +73,17 @@ onMounted(() => {
|
|||
<style lang="less" scoped>
|
||||
.choose-view {
|
||||
width: 100%;
|
||||
padding: 48px 90px;
|
||||
padding: 4% 9% 0 9%;
|
||||
box-sizing: border-box;
|
||||
.view-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.select-item {
|
||||
cursor: pointer;
|
||||
// width: 312px;
|
||||
width: 30%;
|
||||
|
||||
img {
|
||||
width: 312px;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,88 +1,81 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<div class="notification-record-container">
|
||||
<pro-search
|
||||
:columns="columns"
|
||||
target="category"
|
||||
style="padding: 0"
|
||||
@search="queryParams"
|
||||
/>
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getList_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
:defaultParams="defaultParams"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<j-popconfirm title="确认全部已读？" @confirm="onAllRead">
|
||||
<j-button type="primary">全部已读</j-button>
|
||||
</j-popconfirm>
|
||||
</template>
|
||||
<template #topicProvider="slotProps">
|
||||
{{ slotProps.topicName }}
|
||||
</template>
|
||||
<template #notifyTime="slotProps">
|
||||
{{
|
||||
dayjs(slotProps.notifyTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
}}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state.value"
|
||||
:text="slotProps.state.text"
|
||||
:statusNames="{
|
||||
read: 'success',
|
||||
unread: 'error',
|
||||
<div class="notification-record-container">
|
||||
<pro-search
|
||||
:columns="columns"
|
||||
:target="type"
|
||||
style="padding: 0"
|
||||
@search="(e) => (queryParams = e)"
|
||||
/>
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="columns"
|
||||
:request="getList_api"
|
||||
model="TABLE"
|
||||
:params="queryParams"
|
||||
:bodyStyle="{ padding: 0 }"
|
||||
:defaultParams="defaultParams"
|
||||
>
|
||||
<template #rightExtraRender>
|
||||
<j-popconfirm title="确认全部已读？" @confirm="onAllRead">
|
||||
<j-button type="primary">全部已读</j-button>
|
||||
</j-popconfirm>
|
||||
</template>
|
||||
<template #topicProvider="slotProps">
|
||||
{{ slotProps.topicName }}
|
||||
</template>
|
||||
<template #notifyTime="slotProps">
|
||||
{{ dayjs(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.state.value"
|
||||
:text="slotProps.state.text"
|
||||
:statusNames="{
|
||||
read: 'success',
|
||||
unread: 'error',
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:popConfirm="{
|
||||
title: `确认标为${
|
||||
slotProps.state.value === 'read'
|
||||
? '未读'
|
||||
: '已读'
|
||||
}`,
|
||||
onConfirm: () => changeStatus(slotProps),
|
||||
}"
|
||||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:popConfirm="{
|
||||
title: `确认标为${
|
||||
slotProps.state.value === 'read'
|
||||
? '未读'
|
||||
: '已读'
|
||||
}`,
|
||||
onConfirm: () => changeStatus(slotProps),
|
||||
}"
|
||||
:tooltip="{
|
||||
title:
|
||||
slotProps.state.value === 'read'
|
||||
? '标为未读'
|
||||
: '标为已读',
|
||||
}"
|
||||
>
|
||||
<AIcon type="icon-a-PIZHU1" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '查看',
|
||||
}"
|
||||
@click="view(slotProps)"
|
||||
>
|
||||
<AIcon type="SearchOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<ViewDialog
|
||||
v-if="viewVisible"
|
||||
v-model:visible="viewVisible"
|
||||
:data="viewItem"
|
||||
:type="type"
|
||||
/>
|
||||
</div>
|
||||
</page-container>
|
||||
:tooltip="{
|
||||
title:
|
||||
slotProps.state.value === 'read'
|
||||
? '标为未读'
|
||||
: '标为已读',
|
||||
}"
|
||||
>
|
||||
<AIcon type="icon-a-PIZHU1" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '查看',
|
||||
}"
|
||||
@click="view(slotProps)"
|
||||
>
|
||||
<AIcon type="SearchOutlined" />
|
||||
</PermissionButton>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
<ViewDialog
|
||||
v-if="viewVisible"
|
||||
v-model:visible="viewVisible"
|
||||
:data="viewItem"
|
||||
:type="type"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="NotificationRecord">
|
||||
|
|
@ -91,7 +84,7 @@ import PermissionButton from '@/components/PermissionButton/index.vue';
|
|||
import {
|
||||
getList_api,
|
||||
changeStatus_api,
|
||||
changeAllStatus
|
||||
changeAllStatus,
|
||||
} from '@/api/account/notificationRecord';
|
||||
import dayjs from 'dayjs';
|
||||
import { useUserInfo } from '@/store/userInfo';
|
||||
|
|
@ -115,11 +108,11 @@ const getType = computed(() => {
|
|||
return ['system-event'];
|
||||
} else {
|
||||
return [
|
||||
'alarm',
|
||||
'alarm-product',
|
||||
'alarm-device',
|
||||
'alarm-other',
|
||||
'alarm-org',
|
||||
'alarm',
|
||||
];
|
||||
}
|
||||
});
|
||||
|
|
@ -132,16 +125,18 @@ const columns = [
|
|||
search: {
|
||||
type: 'select',
|
||||
options: () =>
|
||||
getTypeList_api().then((resp: any) =>
|
||||
resp.result
|
||||
getTypeList_api().then((resp: any) => {
|
||||
return resp.result
|
||||
.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}))
|
||||
.filter((item: any) =>
|
||||
[...getType.value].includes(item?.value),
|
||||
),
|
||||
),
|
||||
.filter((item: any) => {
|
||||
return [...getType.value].includes(item?.value)
|
||||
}).sort((a: any, b: any) => {
|
||||
return b?.value?.length - a?.value?.length
|
||||
});
|
||||
}),
|
||||
},
|
||||
scopedSlots: true,
|
||||
ellipsis: true,
|
||||
|
|
@ -240,18 +235,18 @@ const changeStatus = (row: any) => {
|
|||
};
|
||||
|
||||
watchEffect(() => {
|
||||
if(user.messageInfo?.id) {
|
||||
view(user.messageInfo)
|
||||
if (user.messageInfo?.id) {
|
||||
view(user.messageInfo);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const onAllRead = async () => {
|
||||
const resp = await changeAllStatus('_read', getType.value)
|
||||
if(resp.status === 200){
|
||||
onlyMessage('操作成功！')
|
||||
refresh()
|
||||
const resp = await changeAllStatus('_read', getType.value);
|
||||
if (resp.status === 200) {
|
||||
onlyMessage('操作成功！');
|
||||
refresh();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (routerParams.params?.value.row) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="margin-top: 24px">
|
||||
<div>
|
||||
<j-tabs
|
||||
tab-position="left"
|
||||
v-if="tabs.length"
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="child-item">
|
||||
<div class="child-item-left">
|
||||
<div style="font-weight: 600">
|
||||
<div style="color: #333333">
|
||||
{{ data?.name }}
|
||||
</div>
|
||||
<div class="child-item-left-auth" v-if="data?.description">
|
||||
<j-tooltip :title="data.description">
|
||||
<AIcon
|
||||
style="font-size: 20px"
|
||||
style="font-size: 16px"
|
||||
type="ExclamationCircleOutlined"
|
||||
/>
|
||||
</j-tooltip>
|
||||
|
|
@ -19,22 +19,21 @@
|
|||
<div class="box-item">
|
||||
<div class="box-item-img">
|
||||
<j-dropdown placement="top" :trigger="['click']">
|
||||
<div>
|
||||
<div
|
||||
:class="{
|
||||
disabled: !notifyChannels?.includes(
|
||||
slotProps?.id,
|
||||
),
|
||||
}"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
iconMap.get(
|
||||
slotProps?.channelProvider,
|
||||
)
|
||||
"
|
||||
style="width: 60px;"
|
||||
style="width: 32px"
|
||||
/>
|
||||
<div
|
||||
:class="{
|
||||
disabled: !notifyChannels?.includes(
|
||||
slotProps?.id,
|
||||
),
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<template #overlay>
|
||||
<j-menu>
|
||||
|
|
@ -89,13 +88,6 @@
|
|||
</j-menu>
|
||||
</template>
|
||||
</j-dropdown>
|
||||
<!-- <div class="box-item-checked">
|
||||
<j-checkbox
|
||||
:checked="
|
||||
notifyChannels?.includes(slotProps?.id)
|
||||
"
|
||||
></j-checkbox>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="box-item-text">
|
||||
{{ slotProps?.name }}
|
||||
|
|
@ -264,17 +256,15 @@ const onSave = () => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.child-item {
|
||||
padding: 10px 20px;
|
||||
margin: 5px;
|
||||
background: #f7f7f7;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0px 1px 0px 0px #E2E2E2;
|
||||
|
||||
.child-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
|
|
@ -306,20 +296,18 @@ const onSave = () => {
|
|||
}
|
||||
|
||||
.disabled {
|
||||
background-color: rgba(#000, 0.38);
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
filter: grayscale(100%);
|
||||
// filter: brightness(0);
|
||||
// opacity: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.box-item-text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<j-spin :spinning="loading">
|
||||
<div style="margin-top: 24px">
|
||||
<div>
|
||||
<div class="alert">
|
||||
<AIcon type="InfoCircleOutlined" />
|
||||
你可以在该页面选择需要订阅的主题及接收通知的方式。
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<div class="content-collapse">
|
||||
<template v-if="dataSource.length">
|
||||
<j-collapse :bordered="false" v-model:activeKey="activeKey">
|
||||
<j-collapse :bordered="false" v-model:activeKey="activeKey" expand-icon-position="right">
|
||||
<template #expandIcon="{ isActive }">
|
||||
<AIcon
|
||||
type="CaretRightOutlined"
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
v-for="item in dataSource"
|
||||
:key="item.provider"
|
||||
class="custom"
|
||||
:header="item.name"
|
||||
>
|
||||
<template #header
|
||||
><h3>{{ item.name }}</h3></template
|
||||
|
|
@ -120,13 +121,19 @@ onMounted(() => {
|
|||
background-color: #f6f6f6;
|
||||
}
|
||||
.custom {
|
||||
background: #f7f7f7;
|
||||
border-radius: 4px;
|
||||
background: #F7F8FA;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
color: #333333;
|
||||
}
|
||||
.child {
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.content-collapse {
|
||||
:deep(.ant-collapse-content > .ant-collapse-content-box) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -154,8 +154,8 @@ const saveImage = (url: string) => {
|
|||
<style lang="less" scoped>
|
||||
@border: 1px dashed @border-color-base;
|
||||
@mask-color: rgba(#000, 0.35);
|
||||
@with: 66px;
|
||||
@height: 66px;
|
||||
@with: 96px;
|
||||
@height: 96px;
|
||||
|
||||
.flex-center() {
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -19,31 +19,44 @@
|
|||
Hi, {{ user.userInfos?.name }}
|
||||
</div>
|
||||
<div class="person-header-item-info-right-info">
|
||||
<span>{{ _org }}部门 · {{ _role }}角色</span>
|
||||
<div>
|
||||
<j-tag
|
||||
v-for="i in user.userInfos?.orgList || []"
|
||||
:key="i?.id"
|
||||
>{{ i?.name }}</j-tag
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<j-tag
|
||||
v-for="i in user.userInfos?.roleList || []"
|
||||
:key="i?.id"
|
||||
>{{ i?.name }}</j-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person-header-item-action">
|
||||
<j-space :size="24">
|
||||
<j-button type="primary" @click="visible = true"
|
||||
<j-button class="btn" @click="visible = true"
|
||||
>查看详情</j-button
|
||||
>
|
||||
<j-button @click="editInfoVisible = true"
|
||||
>编辑资料</j-button
|
||||
>
|
||||
<PermissionButton
|
||||
<j-button
|
||||
v-if="permission"
|
||||
@click="editPasswordVisible = true"
|
||||
>
|
||||
修改密码
|
||||
</PermissionButton>
|
||||
</j-button>
|
||||
</j-space>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person-content">
|
||||
<div class="person-content-item">
|
||||
<FullPage>
|
||||
<div class="person-content-item-content">
|
||||
<j-tabs v-model:activeKey="user.tabKey" type="card">
|
||||
<j-tab-pane
|
||||
v-for="item in list"
|
||||
|
|
@ -51,10 +64,10 @@
|
|||
:tab="item.title"
|
||||
/>
|
||||
</j-tabs>
|
||||
<div class="person-content-item-content">
|
||||
<j-scrollbar :height="`calc(100% - 51px)`">
|
||||
<component :is="tabs[user.tabKey]" />
|
||||
</div>
|
||||
</FullPage>
|
||||
</j-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Detail v-if="visible" @close="visible = false" />
|
||||
|
|
@ -136,29 +149,9 @@ const visible = ref<boolean>(false);
|
|||
const editInfoVisible = ref<boolean>(false);
|
||||
const editPasswordVisible = ref<boolean>(false);
|
||||
|
||||
const hasPermission = usePermissionStore().hasPermission;
|
||||
const permission = () =>
|
||||
hasPermission(`${USER_CENTER_MENU_CODE}:${USER_CENTER_MENU_BUTTON_CODE}`);
|
||||
|
||||
const onActivated = (_key: KeyType) => {
|
||||
user.tabKey = _key;
|
||||
};
|
||||
|
||||
const _org = computed(() => {
|
||||
return user.userInfos?.orgList
|
||||
?.map((item: any) => {
|
||||
return item?.name;
|
||||
})
|
||||
.join(',');
|
||||
});
|
||||
|
||||
const _role = computed(() => {
|
||||
return user.userInfos?.roleList
|
||||
?.map((item: any) => {
|
||||
return item?.name;
|
||||
})
|
||||
.join(',');
|
||||
});
|
||||
const permission = usePermissionStore().hasPermission(
|
||||
`${USER_CENTER_MENU_CODE}:${USER_CENTER_MENU_BUTTON_CODE}`,
|
||||
);
|
||||
|
||||
const onSave = () => {
|
||||
user.getUserInfo();
|
||||
|
|
@ -186,14 +179,19 @@ watchEffect(() => {
|
|||
user.tabKey = router.params.value?.tabKey;
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
user.tabKey = 'HomeView'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@padding: 14%;
|
||||
.person {
|
||||
.person-header {
|
||||
width: 100%;
|
||||
height: 156px;
|
||||
padding: 0 150px;
|
||||
padding: 0 @padding;
|
||||
background-color: #fff;
|
||||
|
||||
.person-header-item {
|
||||
|
|
@ -210,21 +208,15 @@ watchEffect(() => {
|
|||
.person-header-item-info-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.person-header-item-info-right-top {
|
||||
display: flex;
|
||||
font-size: 26px;
|
||||
color: #1d2129;
|
||||
font-weight: 500;
|
||||
// > :not(:last-child) {
|
||||
// margin-right: 20px;
|
||||
// }
|
||||
}
|
||||
.person-header-item-info-right-info {
|
||||
span {
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 5px;
|
||||
padding: 0 10px;
|
||||
div {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -233,23 +225,35 @@ watchEffect(() => {
|
|||
.person-header-item-action {
|
||||
button {
|
||||
width: 110px;
|
||||
background-color: #ebeef4;
|
||||
color: #333333;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: @primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.person-content-item {
|
||||
padding: 10px;
|
||||
padding: 10px 20px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.person-content {
|
||||
width: 100%;
|
||||
padding: 0 260px;
|
||||
// margin-top: 15px;
|
||||
.person-content-item-content {
|
||||
padding: 0 20px;
|
||||
}
|
||||
padding: 0 @padding;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.person-content-item-content {
|
||||
height: calc(100vh - 251px);
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
功能说明
|
||||
</div>
|
||||
<p>
|
||||
该功能用于将{{'协议包'}}中的
|
||||
该功能用于将协议包中的
|
||||
<b>物模型属性标识</b>与
|
||||
<b>平台物模型属性标识</b>进行映射,当两方属性标识不一致时，可在当前页面直接修改映射管理，系统将以映射后的物模型属性进行数据处理。
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -285,14 +285,6 @@ const getProtocol = async () => {
|
|||
if (productStore.current?.accessProvider === 'plugin_gateway') {
|
||||
list.value.push({ key: 'MetadataMap', tab: '物模型映射'})
|
||||
}
|
||||
// if (
|
||||
// instanceStore.current?.features?.find(
|
||||
// (item: any) => item?.id === 'diffMetadataSameProduct',
|
||||
// ) &&
|
||||
// !keys.includes('MetadataMap')
|
||||
// ) {
|
||||
// list.value.push({ key: 'MetadataMap', tab: '物模型映射'});
|
||||
// }
|
||||
}
|
||||
};
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="child-item" :class="{'border': !isLast}">
|
||||
<div class="child-item" :class="{ border: !isLast }">
|
||||
<div class="child-item-left">
|
||||
<div style="font-weight: 600">
|
||||
<div style="color: #333333">
|
||||
{{ data?.name }}
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</j-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="child-item-right" v-if="checked">
|
||||
<div class="child-item-right" :class="{ 'disabled': !checked }">
|
||||
<MCarousel :data="data?.channels">
|
||||
<template #card="slotProps">
|
||||
<div class="box-item">
|
||||
|
|
@ -74,29 +74,22 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #add>
|
||||
<div class="box-item">
|
||||
<div class="box-item-img">
|
||||
<j-tooltip
|
||||
:title="!add ? '暂无权限，请联系管理员' : ''"
|
||||
>
|
||||
<j-button
|
||||
:disabled="!add"
|
||||
type="text"
|
||||
@click="onAdd"
|
||||
>
|
||||
<AIcon
|
||||
style="font-size: 20px"
|
||||
type="PlusOutlined"
|
||||
/>
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
<div class="box-item-text"></div>
|
||||
</div>
|
||||
</template>
|
||||
</MCarousel>
|
||||
|
||||
<div class="box-item-add">
|
||||
<div class="box-item-img">
|
||||
<j-tooltip :title="!add ? '暂无权限，请联系管理员' : ''">
|
||||
<j-button :disabled="!add" type="text" @click="onAdd">
|
||||
<AIcon
|
||||
style="font-size: 20px"
|
||||
type="PlusOutlined"
|
||||
/>
|
||||
</j-button>
|
||||
</j-tooltip>
|
||||
</div>
|
||||
<div class="box-item-text"></div>
|
||||
</div>
|
||||
|
||||
<div class="child-item-right-auth">
|
||||
<j-tooltip :title="!update ? '暂无权限，请联系管理员' : ''">
|
||||
<j-button :disabled="!update" type="text" @click="onAuth">
|
||||
|
|
@ -159,7 +152,7 @@ const props = defineProps({
|
|||
isLast: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['refresh']);
|
||||
|
|
@ -349,8 +342,7 @@ const onSave = (_data: any) => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.child-item {
|
||||
padding: 10px 20px;
|
||||
margin: 5px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -371,14 +363,15 @@ const onSave = (_data: any) => {
|
|||
|
||||
.child-item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.box-item {
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
.box-item-img {
|
||||
background-color: #fff;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -387,10 +380,21 @@ const onSave = (_data: any) => {
|
|||
.box-item-text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-item-add {
|
||||
cursor: pointer;
|
||||
margin-left: 16px;
|
||||
background-color: #F8F9FC;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.child-item-right-auth {
|
||||
margin-left: 20px;
|
||||
|
||||
|
|
@ -412,10 +416,14 @@ const onSave = (_data: any) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.border {
|
||||
box-shadow: 0px 1px 0px 0px #E2E2E2;
|
||||
box-shadow: 0px 1px 0px 0px #e2e2e2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="content-collapse">
|
||||
<j-collapse :bordered="false" v-model:activeKey="activeKey">
|
||||
<template #expandIcon="{ isActive }">
|
||||
<j-collapse :bordered="false" v-model:activeKey="activeKey" expand-icon-position="right">
|
||||
<!-- <template #expandIcon="{ isActive }">
|
||||
<AIcon
|
||||
type="CaretRightOutlined"
|
||||
:style="{
|
||||
|
|
@ -19,15 +19,13 @@
|
|||
}deg)`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</template> -->
|
||||
<j-collapse-panel
|
||||
v-for="item in dataSource"
|
||||
:key="item.provider"
|
||||
class="custom"
|
||||
:header="item.name"
|
||||
>
|
||||
<template #header
|
||||
><h3>{{ item.name }}</h3></template
|
||||
>
|
||||
<div class="child">
|
||||
<template
|
||||
v-for="(child, index) in item.children"
|
||||
|
|
@ -157,13 +155,14 @@ onMounted(() => {
|
|||
background-color: #f6f6f6;
|
||||
}
|
||||
.custom {
|
||||
// background: #f7f7f7;
|
||||
border-radius: 4px;
|
||||
background: #F7F8FA;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
color: #333333;
|
||||
}
|
||||
.child {
|
||||
background-color: white;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.content-collapse {
|
||||
|
|
|
|||
Loading…
Reference in New Issue