Skip to content

Commit

Permalink
Merge pull request #11365 from useryuyu/issue_11138
Browse files Browse the repository at this point in the history 
feat：用户个人视角 权限管理优化 #11138
  • Loading branch information
@bkci-bot
bkci-bot authored Jan 6, 2025
2 parents e8dbaf5 + f648a23 commit d37c587
Show file tree
Hide file tree
Showing 21 changed files with 975 additions and 285 deletions.
2 changes: 1 addition & 1 deletion src/frontend/devops-manage/src/components/project-user-selector.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
ref="tagInputRef"
class="manage-user-selector"
clearable
:placeholder="t('输入授权人，选中回车进行校验')"
:placeholder="t('输入交接人，选中回车进行有效性校验')"
:search-key="searchKeyArr"
save-key="id"
display-key="displayName"
Expand Down
238 changes: 238 additions & 0 deletions ...nage/src/components/user-group/components/children/permission-manage/detail-group-tab.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
<template>
<bk-loading
:loading="detailGroupTable.isLoading"
:zIndex="100"
class="group-tab"
>
<div class="manage-content-project" v-if="projectTable.length">
<p class="project-group">
<span>{{t("资源授权")}}</span>
</p>
<div
class="project-group-table"
v-for="item in projectTable"
:key="item.resourceType"
>
<bk-collapse-panel
v-model="item.activeFlag"
:item-click="(type) => collapseClick(type, HandoverType.AUTHORIZATION)"
:name="item.resourceType"
>
<template #header>
<p class="group-title">
<i :class="getShapeIconClass(item.activeFlag)" />
<img
v-if="item.resourceType && detailGroupTable.getServiceIcon(item.resourceType)"
:src="detailGroupTable.getServiceIcon(item.resourceType)"
class="service-icon"
>
{{item.resourceTypeName}} ({{ item.resourceType }})
<span class="group-num">{{item.count}}</span>
</p>
</template>
<template #content>
<TabTable
v-if="item.tableData"
:data="item.tableData"
:isAuthorizations="true"
:pagination="item.pagination"
:resource-type="item.resourceType"
:resource-name="item.resourceTypeName"
:loading="item.tableLoading"
:group-name="item.resourceTypeName"
:type="HandoverType.AUTHORIZATION"
@page-limit-change="pageLimitChange"
@page-value-change="pageValueChange"
/>
</template>
</bk-collapse-panel>
</div>
</div>
<div class="manage-content-resource" v-if="sourceTable.length">
<p class="project-group">
<span>{{t("用户组")}}</span>
</p>
<div
class="project-group-table"
v-for="item in sourceTable"
:key="item.resourceType"
>
<bk-collapse-panel
v-model="item.activeFlag"
:item-click="(type) => collapseClick(type, HandoverType.GROUP)"
:name="item.resourceType"
>
<template #header>
<p class="group-title">
<i :class="getShapeIconClass(item.activeFlag)" />
<img
v-if="item.resourceType && detailGroupTable.getServiceIcon(item.resourceType)"
:src="detailGroupTable.getServiceIcon(item.resourceType)"
class="service-icon"
>
{{item.resourceTypeName}} ({{ item.resourceType }})
<span class="group-num">{{item.count}}</span>
</p>
</template>
<template #content>
<TabTable
v-if="item.tableData"
:data="item.tableData"
:pagination="item.pagination"
:resource-type="item.resourceType"
:resource-name="item.resourceTypeName"
:loading="item.tableLoading"
:group-name="item.resourceTypeName"
:type="HandoverType.GROUP"
@page-limit-change="pageLimitChange"
@page-value-change="pageValueChange"
/>
</template>
</bk-collapse-panel>
</div>
</div>
</bk-loading>
</template>

<script setup name="GroupTab">
import { useI18n } from 'vue-i18n';
import { defineProps, defineEmits, computed } from 'vue';
import userDetailGroupTable, { HandoverType } from '@/store/userDetailGroupTable';
import TabTable from './detail-tab-table.vue';
const props = defineProps({
sourceList: {
type: Array,
default: () => [],
},
pageLimitChange: {
type: Function,
default: () => {},
},
pageValueChange: {
type: Function,
default: () => {},
},
});
const { t } = useI18n();
const detailGroupTable = userDetailGroupTable();
const projectTable = computed(() => props.sourceList.filter(item => item.type === HandoverType.AUTHORIZATION));
const sourceTable= computed(() => props.sourceList.filter(item => item.type === HandoverType.GROUP));
const emit = defineEmits(['collapseClick']);
function getShapeIconClass(activeFlag) {
return `shape-icon manage-icon manage-icon-${activeFlag ? 'down' : 'right'}-shape`
}
/**
* 折叠面板点击事件
* @param id 折叠面板唯一标志
*/
function collapseClick(resourceType, flag) {
emit('collapseClick', resourceType.name, flag);
}
</script>

<style lang="less" scoped>
.group-tab {
width: calc(100% - 8px);
.manage-content-common {
background: #FFFFFF;
padding: 16px 24px;
box-shadow: 0 2px 4px 0 #1919290d;
}
.manage-content-project {
margin-bottom: 15px;
.manage-content-common();
}
.manage-content-resource {
.manage-content-common();
}
.project-group {
display: flex;
font-weight: 700;
font-size: 14px;
color: #63656E;
margin-bottom: 16px;
letter-spacing: 0;
line-height: 22px;
.describe {
width: 640px;
margin-left: 24px;
font-size: 12px;
color: #4D4F56;
font-weight: 500;
}
.text-blue{
color: #699DF4;
}
}
.project-group-table {
width: 100%;
height: 100%;
margin-bottom: 16px;
.permission {
margin-bottom: 10px;
}
.bk-table {
border: 1px solid #dcdee5;
}
::v-deep .bk-collapse-content {
padding: 0 !important;
}
.group-title {
display: flex;
align-items: center;
width: 100%;
height: 26px;
line-height: 26px;
padding-left: 10px;
background: #EAEBF0;
border-radius: 2px;
font-size: 12px;
color: #313238;
cursor: pointer;
.service-icon {
width: 14px;
height: 14px;
margin-right: 5px;
}
.shape-icon {
color: #989ca7;
margin-right: 10px;
}
}
.group-num {
display: inline-block;
width: 23px;
height: 16px;
line-height: 16px;
background: #F0F1F5;
border-radius: 2px;
font-size: 12px;
color: #979BA5;
letter-spacing: 0;
text-align: center;
margin-left: 5px;
}
.operation-btn {
display: flex;
justify-content: space-around;
}
}
}
</style>
75 changes: 75 additions & 0 deletions ...nage/src/components/user-group/components/children/permission-manage/detail-tab-table.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<template>
<bk-loading :loading="loading" :zIndex="100">
<bk-table
class="detail-table"
ref="refTable"
:max-height="!isShowOperation && 464"
:data="data"
show-overflow-tooltip
:pagination="pagination"
:border="border"
remote-pagination
empty-cell-text="--"
@page-limit-change="pageLimitChange"
@page-value-change="pageValueChange"
>
<bk-table-column :label="groupName" prop="resourceName" />
<template v-if="!isAuthorizations">
<bk-table-column :label="t('用户组')" prop="groupName" />
</template>
<template v-else>
<bk-table-column :label="t('授权人')" prop="handoverFrom" />
</template>
</bk-table>
</bk-loading>
</template>

<script setup name="TabTable">
import { useI18n } from 'vue-i18n';
import { ref, defineProps, defineEmits, computed } from 'vue';
const props = defineProps({
data: {
type: Array,
default: () => [],
},
pagination: Object,
resourceType: String,
resourceName: String,
loading: Boolean,
groupName: String,
isAuthorizations: {
type: Boolean,
default: false
},
type: String
});
const emit = defineEmits([
'pageLimitChange',
'pageValueChange',
])
const { t } = useI18n();
const refTable = ref(null);
const border = ['row', 'outer'];
function pageLimitChange(limit) {
emit('pageLimitChange',limit, props.resourceType, props.type);
}
function pageValueChange(value) {
emit('pageValueChange',value, props.resourceType, props.type);
}
</script>

<style lang="less" scoped>
.detail-table {
margin-top: 4px;
border: 1px solid #DCDEE5;
.hover-link {
cursor: pointer;
&:hover {
color: #3a84ff;
}
}
}
</style>
37 changes: 7 additions & 30 deletions ...vops-manage/src/components/user-group/components/children/permission-manage/group-tab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,11 @@
'manage-icon manage-icon-right-shape': !item.activeFlag,
'shape-icon': true,
}" />
<img v-if="item.resourceType" :src="getServiceIcon(item.resourceType)" class="service-icon" alt="">
<img
v-if="item.resourceType && detailGroupTable.getServiceIcon(item.resourceType)"
:src="detailGroupTable.getServiceIcon(item.resourceType)"
class="service-icon" alt=""
>
{{item.resourceTypeName}} ({{ item.resourceType }})
<span class="group-num">{{item.count}}</span>
</p>
Expand Down Expand Up @@ -101,40 +105,13 @@ import { useI18n } from 'vue-i18n';
import { defineProps, defineEmits, computed } from 'vue';
import userGroupTable from '@/store/userGroupTable';
import TabTable from './tab-table.vue';
import pipelineIcon from '../../../svg/color-logo-pipeline.svg';
import codelibIcon from '../../../svg/color-logo-codelib.svg';
import codeccIcon from '../../../svg/color-logo-codecc.svg';
import environmentIcon from '../../../svg/color-logo-environment.svg';
import experienceIcon from '../../../svg/color-logo-experience.svg';
import qualityIcon from '../../../svg/color-logo-quality.svg';
import ticketIcon from '../../../svg/color-logo-ticket.svg';
import turboIcon from '../../../svg/color-logo-turbo.svg';
import userDetailGroupTable from '@/store/userDetailGroupTable';
const { t } = useI18n();
const groupTableStore = userGroupTable();
const projectTable = computed(() => props.sourceList.find(item => item.resourceType == 'project'));
const sourceTable= computed(() => props.sourceList.filter(item => item.resourceType != 'project'));
const getServiceIcon = (type) => {
const iconMap = {
'pipeline': pipelineIcon,
'pipeline_group': pipelineIcon,
'repertory': codelibIcon,
'credential': ticketIcon,
'cert': ticketIcon,
'environment': environmentIcon,
'env_node': pipelineIcon,
'codecc_task': codeccIcon,
'codecc_rule_set': codeccIcon,
'codecc_ignore_type': codeccIcon,
'experience_task': experienceIcon,
'experience_group': experienceIcon,
'rule': qualityIcon,
'quality_group': qualityIcon,
'pipeline_template': pipelineIcon,
}
return iconMap[type]
}
const detailGroupTable = userDetailGroupTable();
const props = defineProps({
isShowOperation: {
Expand Down
Loading

0 comments on commit d37c587

Please sign in to comment.