Skip to content

Commit

Permalink
feat(frontend): 单据管理迭代_1206 #7190
Browse files Browse the repository at this point in the history 
# Reviewed, transaction id: 26103
  • Loading branch information
@JustaCattt @hLinx
JustaCattt authored and hLinx committed Dec 6, 2024
1 parent f957f9f commit 39b422f
Show file tree
Hide file tree
Showing 3 changed files with 238 additions and 270 deletions.
20 changes: 10 additions & 10 deletions dbm-ui/frontend/src/services/types/permission.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,16 +117,6 @@ export interface PasswordPolicyIncludeRule {
uppercase: boolean;
}

/**
* 新增账号规则
*/
export interface AccountRule {
access_db: string;
privilege: AccountRulePrivilege | string;
account_id: number | null;
account_type?: AccountTypesValues;
}

/**
* 新增账号规则 - 权限信息
*/
Expand All @@ -138,6 +128,16 @@ export interface AccountRulePrivilege {

export type AccountRulePrivilegeKey = keyof AccountRulePrivilege;

/**
* 新增账号规则
*/
export interface AccountRule {
access_db: string;
privilege: AccountRulePrivilege;
account_id: number | null;
account_type?: AccountTypesValues;
}

/**
* 规则授权前置检查信息
*/
Expand Down
248 changes: 116 additions & 132 deletions ...views/db-manage/common/permission/components/mysql/create-rule/components/PreviewDiff.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,14 @@
:is-active="collapseActive.accessDb"
mode="collapse"
:title="t('访问DB')">
<BkTable
:border="['col', 'outer']"
:columns="accessColumns"
:data="accessDbData" />
<BkTable :data="accessDbData">
<BkTableColumn
field="oldAccessDb"
:label="t('变更前')" />
<BkTableColumn
field="newAccessDb"
:label="t('变更后')" />
</BkTable>
</DbCard>
<DbCard
v-model:collapse="collapseActive.privilege"
Expand All @@ -48,18 +52,49 @@
</I18nT>
</template>
<BkTable
:border="['col', 'outer']"
:cell-class="getCellClass"
class="privilege-table"
:columns="privilegeColumns"
:data="privilegeData"
row-key="diffType" />
:merge-cells="mergeCells">
<BkTableColumn
class-name="cell-bold"
field="privilegeDisplay"
:label="t('权限类型')" />
<BkTableColumn :label="t('变更前')">
<template #default="{ data }: { data: PrivilegeRow }">
<div v-if="data.beforePrivilege">
<span>{{ data.beforePrivilege }}</span>
<span
v-if="data.isSensitiveWord"
class="sensitive-tip">
{{ t('敏感') }}
</span>
</div>
<span v-else>--</span>
</template>
</BkTableColumn>
<BkTableColumn
class-name="cell-privilege"
:label="t('变更后')">
<template #default="{ data }: { data: PrivilegeRow }">
<div
v-if="data.afterPrivilege"
:class="[data.diffType]">
<span>{{ data.afterPrivilege }}</span>
<span
v-if="data.isSensitiveWord"
class="sensitive-tip">
{{ t('敏感') }}
</span>
</div>
<span v-else>--</span>
</template>
</BkTableColumn>
</BkTable>
</DbCard>
</div>
</template>

<script setup lang="tsx">
import type { Column } from 'bkui-vue/lib/table/props';
<script setup lang="ts">
import { useI18n } from 'vue-i18n';

import type { AccountRule, AccountRulePrivilege, AccountRulePrivilegeKey } from '@services/types';
Expand All @@ -77,13 +112,13 @@

interface Props {
ruleSettingsConfig: {
dbOperations: AccountRulePrivilege,
ddlSensitiveWords: string[],
dbOperations: AccountRulePrivilege;
ddlSensitiveWords: string[];
};
rulesFormData: {
beforeChange: AccountRule;
afterChange: AccountRule;
}
};
}

interface Exposes {
Expand All @@ -104,145 +139,109 @@
accessDb: true,
privilege: true,
});
const privilegeData = shallowRef<PrivilegeRow[]>([]);
const mergeCells = shallowRef<Array<{ row: number; col: number; rowspan: number; colspan: number }>>([]);

const accessDbData = computed(() => [
{
oldAccessDb: props.rulesFormData.beforeChange?.access_db || '--',
newAccessDb: props.rulesFormData.afterChange?.access_db || '--',
},
]);
const addCount = computed(() => privilegeData.value.filter((item) => item.diffType === 'add').length);
const deleteCount = computed(() => privilegeData.value.filter((item) => item.diffType === 'delete').length);

const tags: {
type: PrivilegeRow['diffType'];
text: string;
}[] = [
{
type: 'add',
text: t('新增'),
},
{
type: 'delete',
text: t('删除'),
},
{
type: 'unchanged',
text: t('不变'),
},
];

const diffArray = (oldArray: string[], newArray: string[]) => {
const diffMap: Record<string, PrivilegeRow['diffType']> = Object.fromEntries(
oldArray.map(item => [item, 'delete'])
oldArray.map((item) => [item, 'delete']),
);
newArray.forEach(item => {
newArray.forEach((item) => {
diffMap[item] = diffMap[item] ? 'unchanged' : 'add';
});
return diffMap;
}
};

const getSensitiveWordMap = () => Object.fromEntries(
(props.ruleSettingsConfig.ddlSensitiveWords || []).map(word => [word, true])
);
const getSensitiveWordMap = () =>
Object.fromEntries((props.ruleSettingsConfig.ddlSensitiveWords || []).map((word) => [word, true]));

const getPrivilegeData = (key: AccountRulePrivilegeKey) => {
const beforeList = props.rulesFormData.beforeChange?.privilege[key] || [];
const afterList = props.rulesFormData.afterChange?.privilege[key] || [];
const diffMap = diffArray(beforeList, afterList);
const sensitiveWordMap = getSensitiveWordMap();
return Object.entries(diffMap).reduce<PrivilegeRow[]>((acc, [privilege, diffType]) => [...acc, {
privilegeKey: key,
privilegeDisplay: key === 'glob' ? t('全局') : key.toUpperCase(),
beforePrivilege: diffType === 'add' ? '' : privilege,
afterPrivilege: privilege,
diffType,
isSensitiveWord: key === 'glob' || sensitiveWordMap[privilege],
}], [])
return Object.entries(diffMap).reduce<PrivilegeRow[]>(
(acc, [privilege, diffType]) => [
...acc,
{
privilegeKey: key,
privilegeDisplay: key === 'glob' ? t('全局') : key.toUpperCase(),
beforePrivilege: diffType === 'add' ? '' : privilege,
afterPrivilege: privilege,
diffType,
isSensitiveWord: key === 'glob' || sensitiveWordMap[privilege],
},
],
[],
);
};

const privilegeData = computed(() => [
...getPrivilegeData('dml'),
...getPrivilegeData('ddl'),
...getPrivilegeData('glob'),
]);

const addCount = computed(() => privilegeData.value.filter(item => item.diffType === 'add').length);
const deleteCount = computed(() => privilegeData.value.filter(item => item.diffType === 'delete').length);

const tags: {
type: PrivilegeRow['diffType'],
text: string
}[] = [
watchEffect(() => {
const dmlData = getPrivilegeData('dml');
const ddlData = getPrivilegeData('ddl');
const globData = getPrivilegeData('glob');
mergeCells.value = [
{
type: 'add',
text: t('新增'),
row: 0,
col: 0,
rowspan: dmlData.length,
colspan: 1,
},
{
type: 'delete',
text: t('删除'),
row: dmlData.length,
col: 0,
rowspan: ddlData.length,
colspan: 1,
},
{
type: 'unchanged',
text: t('不变'),
row: dmlData.length + ddlData.length,
col: 0,
rowspan: globData.length,
colspan: 1,
},
];
const accessColumns: Column[] = [
{
label: t('变更前'),
field: 'oldAccessDb',
width: 300,
},
{
label: t('变更后'),
field: 'newAccessDb',
width: 300,
},
];
const privilegeColumns: Column[] = [
{
label: t('权限类型'),
field: 'privilegeDisplay',
width: 200,
rowspan: ({ row }: { row: PrivilegeRow }) => {
const { privilegeKey } = row;
const rowSpan = privilegeData.value.filter((item) => item.privilegeKey === privilegeKey).length;
return rowSpan > 1 ? rowSpan : 1;
},
render: ({ row }: { row: PrivilegeRow }) => <span class="cell-bold">{row.privilegeDisplay}</span>
},
{
label: t('变更前'),
field: 'beforePrivilege',
width: 200,
render: ({ row }: { row: PrivilegeRow }) => {
const { beforePrivilege, isSensitiveWord } = row;
return beforePrivilege ? (
<div>
<span>{beforePrivilege}</span>
{
isSensitiveWord && <span class="sensitive-tip">{t('敏感')}</span>
}
</div>
) : '--'
}
},
{
label: t('变更后'),
field: 'afterPrivilege',
width: 200,
render: ({ row }: { row: PrivilegeRow }) => {
const { afterPrivilege, isSensitiveWord } = row;
return (
<div>
<span>{afterPrivilege}</span>
{
isSensitiveWord && <span class="sensitive-tip">{t('敏感')}</span>
}
</div>
)
}
},
];

const getCellClass = (data: { field: string }) => data.field === 'afterPrivilege' ? 'cell-privilege' : '';
privilegeData.value = [...dmlData, ...ddlData, ...globData];
});

defineExpose<Exposes>({
changed: {
accessDb: accessDbData.value[0].newAccessDb!== accessDbData.value[0].oldAccessDb,
accessDb: accessDbData.value[0].newAccessDb !== accessDbData.value[0].oldAccessDb,
privilege: {
addCount: addCount.value,
deleteCount: deleteCount.value,
}
}
})
},
},
});
</script>

<style lang="less" scoped>
:deep(.bk-scrollbar-wrapper .bk-scrollbar-content-el) {
display: flex;
}

.preview-diff {
padding: 18px 24px;

Expand Down Expand Up @@ -317,8 +316,6 @@
}

.privilege-table {
height: calc(100vh - 400px) !important;

.cell-bold {
font-weight: 700;
}
Expand All @@ -335,27 +332,14 @@
border-radius: 2px;
}

.cell-privilege {
.vxe-cell {
padding: 0;

div {
padding-left: 16px;
}
}
}

.cell-privilege[data-id^='add_'] {
.cell-privilege:has(.vxe-cell .add) {
background-color: #f2fff4;
}

.cell-privilege[data-id^='delete_'] {
.cell-privilege:has(.vxe-cell .delete) {
color: #f8b4b4;
text-decoration: line-through;
background-color: #ffeeeee6;

.vxe-cell {
color: #f8b4b4;
text-decoration: line-through;
}
}
}
}
Expand Down
Loading

0 comments on commit 39b422f

Please sign in to comment.