test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

perf(系统设置): 插件管理调整展示方式

This commit is contained in:
xinxin.wu 2023-07-28 16:34:43 +08:00 committed by 刘瑞斌
parent bc0efbc73e
commit 8a10eeb3f5
2 changed files with 103 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/hooks/useExpandStyle.ts
View File

@ -1,59 +0,0 @@
import { nextTick, reactive, onMounted, onUnmounted } from 'vue';
// 自定义展开行:表格的高度计算和展开折叠图标颜色控制
const useExpandStyle = (wrapperName?: string, className?: string[]) => {
const cssHeight = reactive({
height: '460px',
});
// 设置折叠展开后图标的颜色
const expandOrcollapseStyle = () => {
nextTick(() => {
const expandBtns = document.querySelectorAll('.expand');
const collapseBtns = document.querySelectorAll('.collapsebtn');
expandBtns.forEach((node) => {
(node.parentNode as HTMLElement).style.borderColor = 'rgb(var(--primary-6))';
});
collapseBtns.forEach((node) => {
(node.parentNode as HTMLElement).style.borderColor = 'var(--color-border-4)';
});
});
};
// 获取盒子的总高度
const getPageContentHeight = (boxElement: string) => {
const pageContent = document.querySelector(boxElement);
return pageContent ? pageContent.getBoundingClientRect().height : 0;
};
// 计算每一个元素的高度
const getDomHeightWithMargin = (selector: string) => {
const dom = document.querySelector(selector) as HTMLElement;
const computedStyle = getComputedStyle(dom);
const marginTop = parseFloat(computedStyle.marginTop);
const marginBottom = parseFloat(computedStyle.marginBottom);
return dom ? dom.getBoundingClientRect().height + marginTop + marginBottom : 460;
};
// 计算最后的高度
const countHeight = () => {
const contentHeight = getPageContentHeight(wrapperName as string);
const excludeTotalHeight =
className?.reduce((prev, item) => {
return prev + getDomHeightWithMargin(item);
}, 0) || 0;
return `${contentHeight - excludeTotalHeight - 70}px`;
};
const onResize = () => {
cssHeight.height = countHeight();
};
window.addEventListener('resize', onResize);
onMounted(() => {
onResize();
});
onUnmounted(() => {
window.removeEventListener('resize', onResize);
});
return {
expandOrcollapseStyle,
cssHeight,
};
};
export default useExpandStyle;

252
frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
View File

@ -18,99 +18,95 @@
></a-input-search> ></a-input-search>
</a-col> </a-col>
</a-row> </a-row>
<div class="mb-6" style="overflow: auto"> <a-table
<a-table :data="filterData"
:data="filterData" :pagination="false"
:pagination="false" :scroll="{ y: 386, x: 2400 }"
:scroll="{ y: 'auto', x: 2400 }" :expandable="expandable"
:expandable="expandable" :loading="loading"
:loading="loading" row-key="id"
row-key="id" :expanded-row-keys="expandedRowKeys"
:expanded-row-keys="expandedRowKeys" @expand="handleExpand"
@expand="handleExpand" >
> <template #columns>
<template #columns> <a-table-column fixed="left" :title="t('system.plugin.tableColunmName')">
<a-table-column fixed="left" :title="t('system.plugin.tableColunmName')"> <template #cell="{ record }">
<template #cell="{ record }"> {{ record.name }} <span class="text-[--color-text-4]">({{ record.pluginForms.length }})</span>
{{ record.name }} <span class="text-[--color-text-4]">({{ record.pluginForms.length }})</span> </template>
</template> </a-table-column>
</a-table-column> <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="description" />
<a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="description" /> <a-table-column :title="t('system.plugin.tableColunmStatus')">
<a-table-column :title="t('system.plugin.tableColunmStatus')"> <template #cell="{ record }">
<template #cell="{ record }"> <div v-if="record.enable" class="flex items-center">
<div v-if="record.enable" class="flex items-center"> <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
<icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" /> {{ t('system.user.tableEnable') }}
{{ t('system.user.tableEnable') }} </div>
</div> <div v-else class="flex items-center text-[var(--color-text-4)]">
<div v-else class="flex items-center text-[var(--color-text-4)]"> <icon-stop class="mr-[2px]" />
<icon-stop class="mr-[2px]" /> {{ t('system.user.tableDisable') }}
{{ t('system.user.tableDisable') }} </div>
</div> </template>
</template> </a-table-column>
</a-table-column> <a-table-column :title="t('system.plugin.tableColunmApplicationScene')" data-index="scenario">
<a-table-column :title="t('system.plugin.tableColunmApplicationScene')" data-index="scenario"> <template #cell="{ record }">{{
<template #cell="{ record }">{{ record.scenario === 'API' ? t('system.plugin.secneApi') : t('system.plugin.secneProManger')
record.scenario === 'API' ? t('system.plugin.secneApi') : t('system.plugin.secneProManger') }}</template>
}}</template> </a-table-column>
</a-table-column> <a-table-column :title="t('system.user.tableColunmOrg')">
<a-table-column :title="t('system.user.tableColunmOrg')"> <template #cell="{ record }">
<template #cell="{ record }"> <a-tag
<a-tag v-for="org of record.organizations"
v-for="org of record.organizations" :key="org.id"
:key="org.id" class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]" bordered
bordered >
> {{ org.name }}
{{ org.name }} </a-tag>
</a-tag> <a-tag
<a-tag v-show="record.organizations.length > 2"
v-show="record.organizations.length > 2" class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]" bordered
bordered >
> +{{ record.organizations.length - 2 }}
+{{ record.organizations.length - 2 }} </a-tag>
</a-tag> </template>
</template> </a-table-column>
</a-table-column> <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="fileName" />
<a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="fileName" /> <a-table-column :title="t('system.plugin.tableColunmVersion')" data-index="pluginId" />
<a-table-column :title="t('system.plugin.tableColunmVersion')" data-index="pluginId" /> <a-table-column :title="t('system.plugin.tableColunmAuthorization')">
<a-table-column :title="t('system.plugin.tableColunmAuthorization')"> <template #cell="{ record }">
<template #cell="{ record }"> <span>{{ record.xpack ? t('system.plugin.uploadOpenSource') : t('system.plugin.uploadCompSource') }}</span>
<span>{{ </template>
record.xpack ? t('system.plugin.uploadOpenSource') : t('system.plugin.uploadCompSource') </a-table-column>
}}</span> <a-table-column :title="t('system.plugin.tableColunmCreatedBy')" data-index="createUser" />
</template> <a-table-column :title="t('system.plugin.tableColunmUpdateTime')">
</a-table-column> <template #cell="{ record }">
<a-table-column :title="t('system.plugin.tableColunmCreatedBy')" data-index="createUser" /> <span>{{ getTime(record.updateTime) }}</span>
<a-table-column :title="t('system.plugin.tableColunmUpdateTime')"> </template>
<template #cell="{ record }"> </a-table-column>
<span>{{ getTime(record.updateTime) }}</span> <a-table-column :width="200" fixed="right" align="center" :bordered="false">
</template> <template #title>
</a-table-column> {{ t('system.plugin.tableColunmActions') }}
<a-table-column :width="200" fixed="right" align="center" :bordered="false"> </template>
<template #title> <template #cell="{ record }">
{{ t('system.plugin.tableColunmActions') }} <MsButton @click="update(record)">{{ t('system.plugin.edit') }}</MsButton>
</template> <MsButton v-if="record.enable" @click="disableHandler(record)">{{
<template #cell="{ record }"> t('system.plugin.tableDisable')
<MsButton @click="update(record)">{{ t('system.plugin.edit') }}</MsButton> }}</MsButton>
<MsButton v-if="record.enable" @click="disableHandler(record)">{{ <MsButton v-else>{{ t('system.plugin.tableEnable') }}</MsButton>
t('system.plugin.tableDisable') <MsTableMoreAction :list="tableActions" @select="handleSelect($event, record)"></MsTableMoreAction>
}}</MsButton> </template>
<MsButton v-else>{{ t('system.plugin.tableEnable') }}</MsButton> </a-table-column>
<MsTableMoreAction :list="tableActions" @select="handleSelect($event, record)"></MsTableMoreAction> </template>
</template> <template #expand-icon="{ record, expanded }">
</a-table-column> <span v-if="record.pluginForms.length && !expanded" class="collapsebtn"
</template> ><icon-plus :style="{ 'font-size': '12px' }"
<template #expand-icon="{ record, expanded }"> /></span>
<span v-if="record.pluginForms.length && !expanded" class="collapsebtn" <span v-else-if="record.pluginForms.length && expanded" class="expand"
><icon-plus :style="{ 'font-size': '12px' }" ><icon-minus class="text-[rgb(var(--primary-6))]" :style="{ 'font-size': '12px' }"
/></span> /></span>
<span v-else-if="record.pluginForms.length && expanded" class="expand" </template>
><icon-minus class="text-[rgb(var(--primary-6))]" :style="{ 'font-size': '12px' }" </a-table>
/></span>
</template>
</a-table>
</div>
<div class="ms-footerNum" <div class="ms-footerNum"
>{{ t('system.plugin.totalNum') }}<span class="mx-2">{{ totalNum }}</span >{{ t('system.plugin.totalNum') }}<span class="mx-2">{{ totalNum }}</span
>{{ t('system.plugin.dataList') }}</div >{{ t('system.plugin.dataList') }}</div
@ -133,7 +129,6 @@
import uploadSuccessModal from './uploadSuccessModal.vue'; import uploadSuccessModal from './uploadSuccessModal.vue';
import scriptDetailDrawer from './scriptDetailDrawer.vue'; import scriptDetailDrawer from './scriptDetailDrawer.vue';
import { useCommandComponent } from '@/hooks/useCommandComponent'; import { useCommandComponent } from '@/hooks/useCommandComponent';
import useExpandStyle from '@/hooks/useExpandStyle';
import useModal from '@/hooks/useModal'; import useModal from '@/hooks/useModal';
import { Message, TableData } from '@arco-design/web-vue'; import { Message, TableData } from '@arco-design/web-vue';
import useVisit from '@/hooks/useVisit'; import useVisit from '@/hooks/useVisit';
@ -144,11 +139,6 @@
const { t } = useI18n(); const { t } = useI18n();
const visitedKey = 'doNotShowAgain'; const visitedKey = 'doNotShowAgain';
const { getIsVisited } = useVisit(visitedKey); const { getIsVisited } = useVisit(visitedKey);
const { expandOrcollapseStyle, cssHeight } = useExpandStyle('.ms-card', [
'.arco-alert',
'.arco-row',
'.ms-footerNum',
]);
const data = ref<PluginList>([]); const data = ref<PluginList>([]);
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
@ -319,7 +309,6 @@
}); });
const handleExpand = (rowKey: string | number) => { const handleExpand = (rowKey: string | number) => {
Object.assign(expandedRowKeys, [rowKey]); Object.assign(expandedRowKeys, [rowKey]);
expandOrcollapseStyle();
}; };
onMounted(() => { onMounted(() => {
data.value = [ data.value = [
@ -472,53 +461,6 @@
}, },
], ],
}, },
{
id: 'string6',
name: '插件5',
pluginId: 'string',
fileName: 'string',
createTime: 0,
updateTime: 3084234,
createUser: '创建人',
enable: true,
global: true,
xpack: true,
description: 'string',
scenario: 'PLATFORM',
pluginForms: [
{
id: '111',
name: '步骤一',
},
{
id: '222',
name: '步骤二',
},
{
id: '333',
name: '步骤三',
},
{
id: '444',
name: '步骤四',
},
{
id: '555',
name: '步骤五',
},
{
id: '666',
name: '步骤六',
},
],
organizations: [
{
id: 'string',
num: 0,
name: 'string',
},
],
},
]; ];
loadData(); loadData();
filterData.value = [...data.value]; filterData.value = [...data.value];
@ -536,9 +478,21 @@
margin-right: -10px; margin-right: -10px;
padding-right: 10px; padding-right: 10px;
max-width: 100%; max-width: 100%;
height: v-bind('cssHeight.height') !important; }
:deep(.collapsebtn) {
padding: 0 1px;
border: 1px solid var(--color-text-4);
@apply bg-white;
}
:deep(.expand) {
padding: 0 1px;
border: 1px solid rgb(var(--primary-5));
@apply bg-white;
}
:deep(.arco-table-expand-btn) {
@apply bg-white;
} }
.ms-footerNum { .ms-footerNum {
@apply mt-4 text-sm text-slate-500; @apply absolute bottom-0 mt-4 text-sm text-slate-500;
} }
</style> </style>