From 9e2c0069b69ee6c18802503cb4fe9f9ae0bc3509 Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Fri, 17 Feb 2023 14:37:26 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=81=E6=9D=83=E9=99=90=E7=AE=A1=E7=90=86=E3=80=81=E5=85=B3?=
 =?UTF-8?q?=E7=B3=BB=E9=85=8D=E7=BD=AE=E6=B7=BB=E5=8A=A0=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Menu/Detail/BasicInfo.vue    |  11 +-
 src/views/system/Menu/Detail/ButtonMange.vue  |  77 ++++----
 .../Menu/components/ButtonAddDialog.vue       |  16 +-
 .../system/Menu/components/PermissChoose.vue  |  30 +++-
 src/views/system/Menu/index.vue               |  80 +++++----
 src/views/system/Permission/index.vue         | 168 +++++++++---------
 src/views/system/Relationship/index.vue       |  74 ++++----
 7 files changed, 245 insertions(+), 211 deletions(-)

diff --git a/src/views/system/Menu/Detail/BasicInfo.vue b/src/views/system/Menu/Detail/BasicInfo.vue
index ea01abbc..2a52fd3c 100644
--- a/src/views/system/Menu/Detail/BasicInfo.vue
+++ b/src/views/system/Menu/Detail/BasicInfo.vue
@@ -185,16 +185,18 @@
                         :first-width="3"
                         max-height="350px"
                         v-model:value="form.data.permissions"
+                        :key="form.data.id || ''"
                     />
                 </a-form-item>
             </a-form>
 
-            <a-button
+            <PermissionButton
                 type="primary"
+                :uhasPermission="`${permission}:update`"
                 @click="form.clickSave"
-                v-loading="form.saveLoading"
-                >保存</a-button
             >
+                保存
+            </PermissionButton>
         </a-card>
 
         <!-- 弹窗 -->
@@ -205,6 +207,7 @@
 </template>
 
 <script setup lang="ts">
+import PermissionButton from '@/components/PermissionButton/index.vue';
 import {
     PlusOutlined,
     QuestionCircleFilled,
@@ -222,6 +225,7 @@ import {
     addMenuInfo_api,
 } from '@/api/system/menu';
 
+const permission = 'system/Menu';
 // 路由
 const route = useRoute();
 const router = useRouter();
@@ -330,6 +334,7 @@ const dialog = {
 };
 
 type formType = {
+    id?: string;
     name: string;
     code: string;
     url: string;
diff --git a/src/views/system/Menu/Detail/ButtonMange.vue b/src/views/system/Menu/Detail/ButtonMange.vue
index cc232ce3..ec2702c5 100644
--- a/src/views/system/Menu/Detail/ButtonMange.vue
+++ b/src/views/system/Menu/Detail/ButtonMange.vue
@@ -8,49 +8,43 @@
             noPagination
         >
             <template #headerTitle>
-                <a-button
+                <PermissionButton
                     type="primary"
-                    style="margin-right: 10px"
-                    @click="() => dialog.openDialog('新增')"
-                    ><plus-outlined />新增</a-button
+                    :uhasPermission="`${permission}:update`"
+                    @click="dialog.openDialog('新增')"
                 >
+                    <AIcon type="PlusOutlined" />新增
+                </PermissionButton>
             </template>
             <template #action="slotProps">
                 <a-space :size="16">
-                    <a-tooltip>
-                        <template #title>编辑</template>
-                        <a-button
-                            style="padding: 0"
-                            type="link"
-                            @click="() => dialog.openDialog('编辑', slotProps)"
-                        >
-                            <edit-outlined />
-                        </a-button>
-                    </a-tooltip>
-                    <a-tooltip>
-                        <template #title>查看</template>
-                        <a-button
-                            style="padding: 0"
-                            type="link"
-                            @click="() => dialog.openDialog('查看', slotProps)"
-                        >
-                            <search-outlined />
-                        </a-button>
-                    </a-tooltip>
-
-                    <a-popconfirm
-                        title="确认删除"
-                        ok-text="确定"
-                        cancel-text="取消"
-                        @confirm="table.clickDel(slotProps)"
+                    <PermissionButton
+                        type="link"
+                        :uhasPermission="`${permission}:update`"
+                        :tooltip="{ title: '编辑' }"
+                        @click="dialog.openDialog('编辑', slotProps)"
                     >
-                        <a-tooltip>
-                            <template #title>删除</template>
-                            <a-button style="padding: 0" type="link">
-                                <delete-outlined />
-                            </a-button>
-                        </a-tooltip>
-                    </a-popconfirm>
+                        <AIcon type="EditOutlined" />
+                    </PermissionButton>
+                    <PermissionButton
+                        type="link"
+                        :uhasPermission="true"
+                        :tooltip="{ title: '查看' }"
+                        @click="dialog.openDialog('查看', slotProps)"
+                    >
+                        <AIcon type="SearchOutlined" />
+                    </PermissionButton>
+                    <PermissionButton
+                        type="link"
+                        :uhasPermission="`${permission}:update`"
+                        :tooltip="{ title: '删除' }"
+                        :popConfirm="{
+                            title: `确认删除`,
+                            onConfirm: () => table.clickDel(slotProps),
+                        }"
+                    >
+                        <AIcon type="DeleteOutlined" />
+                    </PermissionButton>
                 </a-space>
             </template>
         </JTable>
@@ -66,17 +60,14 @@
 </template>
 
 <script setup lang="ts">
-import {
-    EditOutlined,
-    SearchOutlined,
-    DeleteOutlined,
-    PlusOutlined,
-} from '@ant-design/icons-vue';
+import PermissionButton from '@/components/PermissionButton/index.vue';
+
 import ButtonAddDialog from '../components/ButtonAddDialog.vue';
 
 import { getMenuInfo_api, saveMenuInfo_api } from '@/api/system/menu';
 import { message } from 'ant-design-vue';
 
+const permission = 'system/Menu';
 // 路由
 const route = useRoute();
 const routeParams = {
diff --git a/src/views/system/Menu/components/ButtonAddDialog.vue b/src/views/system/Menu/components/ButtonAddDialog.vue
index 0a54e5df..9913c054 100644
--- a/src/views/system/Menu/components/ButtonAddDialog.vue
+++ b/src/views/system/Menu/components/ButtonAddDialog.vue
@@ -56,11 +56,12 @@
                     />
                 </a-form-item-rest> -->
                 <PermissChoose
-                        :first-width="8"
-                        max-height="350px"
-                        v-model:value="form.data.permissions"
-                        :disabled="form.mode === '查看'"
-                    />
+                    :first-width="8"
+                    max-height="350px"
+                    v-model:value="form.data.permissions"
+                    :disabled="form.mode === '查看'"
+                    :key="form.data.id || ''"
+                />
             </a-form-item>
             <a-form-item label="说明" name="describe">
                 <a-textarea
@@ -91,7 +92,8 @@ const dialog = reactive({
     visible: false,
     loading: false,
     handleOk: () => {
-        props.menuInfo.id && formRef.value &&
+        props.menuInfo.id &&
+            formRef.value &&
             formRef.value
                 .validate()
                 .then(() => {
@@ -112,7 +114,7 @@ const dialog = reactive({
                     saveMenuInfo_api(params)
                         .then((resp) => {
                             dialog.changeVisible();
-                            message.success('操作成功')
+                            message.success('操作成功');
                             emits('confirm');
                         })
                         .finally(() => (dialog.loading = false));
diff --git a/src/views/system/Menu/components/PermissChoose.vue b/src/views/system/Menu/components/PermissChoose.vue
index 0d658420..67c57bb4 100644
--- a/src/views/system/Menu/components/PermissChoose.vue
+++ b/src/views/system/Menu/components/PermissChoose.vue
@@ -47,8 +47,10 @@
 <script setup lang="ts">
 import { exportPermission_api } from '@/api/system/permission';
 import { Form } from 'ant-design-vue';
-Form.useInjectFormItemContext()
+Form.useInjectFormItemContext();
+
 const props = defineProps<{
+    key: string;
     value: any[];
     firstWidth: number;
     maxHeight: string;
@@ -58,7 +60,6 @@ const emits = defineEmits(['update:value']);
 const searchValue = ref<string>('');
 
 const search = reactive({
-    value: '',
     searchTimer: null as null | number,
     search: () => {
         if (search.searchTimer) {
@@ -72,17 +73,34 @@ const search = reactive({
 });
 const permission = reactive({
     list: [] as permissionType[],
+    sourceList: [] as any[],
+
+    init: () => {
+        permission.getList();
+        watch(
+            () => props.key,
+            () => {
+                nextTick(() => {
+                    permission.list = permission.makeList(
+                        props.value,
+                        permission.sourceList,
+                    );
+                });
+            },
+        );
+    },
     // 获取权限列表
     getList: () => {
         const params: paramsType = {
             paging: false,
         };
-        if (search.value) {
+        if (searchValue.value) {
             params.terms = [
-                { column: 'name$like', value: `%${search.value}%` },
+                { column: 'name$like', value: `%${searchValue.value}%` },
             ];
         }
         exportPermission_api(params).then((resp) => {
+            permission.sourceList = [...(resp.result as any[])];
             permission.list = permission.makeList(
                 props.value,
                 resp.result as any[],
@@ -91,7 +109,7 @@ const permission = reactive({
     },
     // 全选/取消全选
     selectAllOpions: (row: permissionType) => {
-        row.indeterminate = false
+        row.indeterminate = false;
         const newValue = props.value.filter(
             (item) => item.permission !== row.id,
         );
@@ -162,8 +180,8 @@ const permission = reactive({
         return result;
     },
 });
+permission.init();
 
-permission.getList();
 
 type permissionType = {
     id: string;
diff --git a/src/views/system/Menu/index.vue b/src/views/system/Menu/index.vue
index 802a0a6c..093843a9 100644
--- a/src/views/system/Menu/index.vue
+++ b/src/views/system/Menu/index.vue
@@ -10,13 +10,24 @@
             :params="query.params"
         >
             <template #headerTitle>
-                <a-button
+                <PermissionButton
                     type="primary"
+                    :uhasPermission="`${permission}:add`"
                     @click="table.toDetails({})"
-                    style="margin-right: 10px"
-                    ><plus-outlined />新增</a-button
                 >
-                <a-button @click="router.push('/system/Menu/Setting')">菜单实例</a-button>
+                    <AIcon type="PlusOutlined" />新增
+                </PermissionButton>
+                <a-button
+                    style="margin-left: 12px"
+                    @click="router.push('/system/Menu/Setting')"
+                    >菜单配置</a-button
+                >
+                <!-- <PermissionButton
+                    :uhasPermission="true"
+                    @click="router.push('/system/Menu/Setting')"
+                >
+                    菜单配置
+                </PermissionButton> -->
             </template>
             <template #createTime="slotProps">
                 {{ moment(slotProps.createTime).format('YYYY-MM-DD HH:mm:ss') }}
@@ -33,30 +44,26 @@
                             <search-outlined />
                         </a-button>
                     </a-tooltip>
-                    <a-tooltip>
-                        <template #title>新增子菜单</template>
-                        <a-button
-                            style="padding: 0"
-                            type="link"
-                            @click="table.addChildren(slotProps)"
-                        >
-                            <plus-circle-outlined />
-                        </a-button>
-                    </a-tooltip>
 
-                    <a-popconfirm
-                        title="是否删除该菜单"
-                        ok-text="确定"
-                        cancel-text="取消"
-                        @confirm="table.clickDel(slotProps)"
+                    <PermissionButton
+                        type="link"
+                        :uhasPermission="`${permission}:add`"
+                        :tooltip="{ title: '新增子菜单' }"
+                        @click="table.addChildren(slotProps)"
                     >
-                        <a-tooltip>
-                            <template #title>删除</template>
-                            <a-button style="padding: 0" type="link">
-                                <delete-outlined />
-                            </a-button>
-                        </a-tooltip>
-                    </a-popconfirm>
+                        <AIcon type="PlusCircleOutlined" />
+                    </PermissionButton>
+                    <PermissionButton
+                        type="link"
+                        :uhasPermission="`${permission}:delete`"
+                        :tooltip="{ title: '删除' }"
+                        :popConfirm="{
+                            title: `是否删除该菜单`,
+                            onConfirm: () => table.clickDel(slotProps),
+                        }"
+                    >
+                        <AIcon type="DeleteOutlined" />
+                    </PermissionButton>
                 </a-space>
             </template>
         </JTable>
@@ -64,16 +71,15 @@
 </template>
 
 <script setup lang="ts">
+import PermissionButton from '@/components/PermissionButton/index.vue';
+
 import { getMenuTree_api, delMenuInfo_api } from '@/api/system/menu';
-import {
-    SearchOutlined,
-    DeleteOutlined,
-    PlusOutlined,
-    PlusCircleOutlined,
-} from '@ant-design/icons-vue';
+import { SearchOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 import moment from 'moment';
 
+const permission = 'system/Menu';
+
 const router = useRouter();
 
 // 筛选
@@ -240,13 +246,13 @@ const table = reactive({
         router.push(
             `/system/Menu/detail/${row.id || ':id'}?pid=${
                 row.pid || ''
-            }&basePath=${row.url|| ''}&sortIndex=${table.total}`,
+            }&basePath=${row.url || ''}&sortIndex=${table.total}`,
         );
     },
     // 删除
     clickDel: (row: any) => {
         console.log(row.id);
-        
+
         delMenuInfo_api(row.id).then((resp: any) => {
             if (resp.status === 200) {
                 tableRef.value?.reload();
@@ -264,5 +270,11 @@ const table = reactive({
 <style lang="less" scoped>
 .menu-container {
     padding: 24px;
+
+    :deep(.ant-table-cell) {
+        .ant-btn-link {
+            padding: 0;
+        }
+    }
 }
 </style>
diff --git a/src/views/system/Permission/index.vue b/src/views/system/Permission/index.vue
index d221cc98..10ac1466 100644
--- a/src/views/system/Permission/index.vue
+++ b/src/views/system/Permission/index.vue
@@ -11,12 +11,13 @@
             :defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
         >
             <template #headerTitle>
-                <a-button
+                <PermissionButton
                     type="primary"
+                    :uhasPermission="`${permission}:add`"
                     @click="table.openDialog(undefined)"
-                    style="margin-right: 10px"
-                    ><plus-outlined />新增</a-button
                 >
+                    <AIcon type="PlusOutlined" />新增
+                </PermissionButton>
                 <a-dropdown trigger="hover">
                     <a-button>批量操作</a-button>
                     <template #overlay>
@@ -28,19 +29,27 @@
                                     accept=".json"
                                     :showUploadList="false"
                                     :before-upload="table.clickImport"
+                                    :disabled="
+                                        !hasPermission(`${permission}:import`)
+                                    "
                                 >
-                                    <a-button>导入</a-button>
+                                    <PermissionButton
+                                        :hasPermission="`${permission}:import`"
+                                    >
+                                        导入
+                                    </PermissionButton>
                                 </a-upload>
                             </a-menu-item>
                             <a-menu-item>
-                                <a-popconfirm
-                                    title="确认导出？"
-                                    ok-text="确定"
-                                    cancel-text="取消"
-                                    @confirm="table.clickExport"
+                                <PermissionButton
+                                    :uhasPermission="`${permission}:export`"
+                                    :popConfirm="{
+                                        title: `确认导出？`,
+                                        onConfirm: () => table.clickExport(),
+                                    }"
                                 >
-                                    <a-button>导出</a-button>
-                                </a-popconfirm>
+                                    导出
+                                </PermissionButton>
                             </a-menu-item>
                         </a-menu>
                     </template>
@@ -51,63 +60,53 @@
             </template>
             <template #action="slotProps">
                 <a-space :size="16">
-                    <a-tooltip>
-                        <template #title>编辑</template>
-                        <a-button
-                            style="padding: 0"
-                            type="link"
-                            @click="table.openDialog(slotProps)"
-                        >
-                            <edit-outlined />
-                        </a-button>
-                    </a-tooltip>
-
-                    <a-popconfirm
-                        :title="`确定要${
-                            slotProps.status ? '禁用' : '启用'
-                        }吗？`"
-                        ok-text="确定"
-                        cancel-text="取消"
-                        @confirm="table.changeStatus(slotProps)"
+                    <PermissionButton
+                        :uhasPermission="`${permission}:update`"
+                        type="link"
+                        :tooltip="{
+                            title: '编辑',
+                        }"
+                        @click="table.openDialog(slotProps)"
                     >
-                        <a-tooltip>
-                            <template #title>{{
-                                slotProps.status ? '禁用' : '启用'
-                            }}</template>
-                            <a-button style="padding: 0" type="link">
-                                <stop-outlined v-if="slotProps.status" />
-                                <play-circle-outlined v-else />
-                            </a-button>
-                        </a-tooltip>
-                    </a-popconfirm>
+                        <AIcon type="EditOutlined" />
+                    </PermissionButton>
 
-                    <a-popconfirm
-                        title="确认删除"
-                        ok-text="确定"
-                        cancel-text="取消"
-                        @confirm="table.clickDel(slotProps)"
+                    <PermissionButton
+                        :uhasPermission="`${permission}:action`"
+                        type="link"
+                        :popConfirm="{
+                            title: `确定要${
+                                slotProps.status ? '禁用' : '启用'
+                            }吗？`,
+                            onConfirm: () => table.changeStatus(slotProps),
+                        }"
+                        :tooltip="{ title: slotProps.status ? '禁用' : '启用' }"
+                    >
+                        <AIcon
+                            :type="
+                                slotProps.status
+                                    ? 'StopOutlined'
+                                    : 'PlayCircleOutlined '
+                            "
+                        />
+                    </PermissionButton>
+
+                    <PermissionButton
+                        :uhasPermission="`${permission}:delete`"
+                        type="link"
+                        :tooltip="{
+                            title: slotProps.status
+                                ? '请先禁用，再删除'
+                                : '删除',
+                        }"
+                        :popConfirm="{
+                            title: `确认删除`,
+                            onConfirm: () => table.clickDel(slotProps),
+                        }"
                         :disabled="slotProps.status"
                     >
-                        <a-tooltip>
-                            <template #title>{{
-                                systemPermission('delete')
-                                    ? slotProps.status
-                                        ? '请先禁用，再删除'
-                                        : '删除'
-                                    : '暂无权限，请联系管理员'
-                            }}</template>
-                            <a-button
-                                style="padding: 0"
-                                type="link"
-                                :disabled="
-                                    !systemPermission('delete') ||
-                                    slotProps.status
-                                "
-                            >
-                                <delete-outlined />
-                            </a-button>
-                        </a-tooltip>
-                    </a-popconfirm>
+                        <AIcon type="DeleteOutlined" />
+                    </PermissionButton>
                 </a-space>
             </template>
         </JTable>
@@ -119,16 +118,10 @@
 </template>
 
 <script setup lang="ts">
+import PermissionButton from '@/components/PermissionButton/index.vue';
 import EditDialog from './components/EditDialog.vue';
 import StatusLabel from './components/StatusLabel.vue';
 import { message } from 'ant-design-vue';
-import {
-    EditOutlined,
-    DeleteOutlined,
-    PlusOutlined,
-    StopOutlined,
-    PlayCircleOutlined,
-} from '@ant-design/icons-vue';
 import {
     getPermission_api,
     editPermission_api,
@@ -138,13 +131,11 @@ import {
 import { downloadObject } from '@/utils/utils';
 import { usePermissionStore } from '@/store/permission';
 
+const permission = 'system/Permission';
+const hasPermission = usePermissionStore().hasPermission;
+
 const editDialogRef = ref(); // 新增弹窗实例
 const tableRef = ref<Record<string, any>>({}); // 表格实例
-
-// 按钮权限控制
-const hasPermission = usePermissionStore().hasPermission;
-const systemPermission = (code: string) =>
-    hasPermission('system/Permission:${code}');
 // 筛选
 const query = reactive({
     columns: [
@@ -223,12 +214,7 @@ const table = reactive({
     tableData: [],
     // 打开编辑弹窗
     openDialog: (row: object | undefined = {}) => {
-        let permissionCode = '';
-        if (Object.keys(row).length < 1) permissionCode = 'add';
-        else permissionCode = 'update';
-        if (systemPermission(permissionCode))
-            editDialogRef.value.openDialog(true, row);
-        else message.warn('暂无权限，请联系管理员');
+        editDialogRef.value.openDialog(true, row);
     },
     // 导入数据
     clickImport: (file: File) => {
@@ -268,8 +254,6 @@ const table = reactive({
     },
     // 修改状态
     changeStatus: (row: any) => {
-        if (!systemPermission('action'))
-            return message.warn('暂无权限，请联系管理员');
         const params = {
             ...row,
             status: row.status ? 0 : 1,
@@ -295,4 +279,18 @@ const table = reactive({
 });
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.permission-container {
+    padding: 24px;
+
+    .ant-dropdown-trigger {
+        margin-left: 12px;
+    }
+
+    :deep(.ant-table-cell) {
+        .ant-btn-link {
+            padding: 0;
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Relationship/index.vue b/src/views/system/Relationship/index.vue
index e50f04c7..c0e6a011 100644
--- a/src/views/system/Relationship/index.vue
+++ b/src/views/system/Relationship/index.vue
@@ -11,38 +11,39 @@
             :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
         >
             <template #headerTitle>
-                <a-button
+                <PermissionButton
                     type="primary"
+                    :uhasPermission="`${permission}:add`"
                     @click="table.openDialog(undefined)"
-                    style="margin-right: 10px"
-                    ><plus-outlined />新增</a-button
                 >
+                    <AIcon type="PlusOutlined" />新增
+                </PermissionButton>
             </template>
             <template #action="slotProps">
                 <a-space :size="16">
-                    <a-tooltip>
-                        <template #title>编辑</template>
-                        <a-button
-                            style="padding: 0"
-                            type="link"
-                            @click="table.openDialog(slotProps)"
-                        >
-                            <edit-outlined />
-                        </a-button>
-                    </a-tooltip>
-                    <a-popconfirm
-                        title="确认删除"
-                        ok-text="确定"
-                        cancel-text="取消"
-                        @confirm="table.clickDel(slotProps)"
+                    <PermissionButton
+                        :uhasPermission="`${permission}:update`"
+                        type="link"
+                        :tooltip="{
+                            title: '编辑',
+                        }"
+                        @click="table.openDialog(slotProps)"
                     >
-                        <a-tooltip>
-                            <template #title>删除</template>
-                            <a-button style="padding: 0" type="link">
-                                <delete-outlined />
-                            </a-button>
-                        </a-tooltip>
-                    </a-popconfirm>
+                        <AIcon type="EditOutlined" />
+                    </PermissionButton>
+
+                    <PermissionButton
+                        :uhasPermission="`${permission}:delete`"
+                        type="link"
+                        :tooltip="{ title: '删除' }"
+                        :popConfirm="{
+                            title: `确认删除`,
+                            onConfirm: () => table.clickDel(slotProps),
+                        }"
+                        :disabled="slotProps.status"
+                    >
+                        <AIcon type="DeleteOutlined" />
+                    </PermissionButton>
                 </a-space>
             </template>
         </JTable>
@@ -52,14 +53,16 @@
 </template>
 
 <script setup lang="ts" name="Relationship">
-import { getRelationshipList_api, delRelation_api } from '@/api/system/relationship';
+import PermissionButton from '@/components/PermissionButton/index.vue';
+import {
+    getRelationshipList_api,
+    delRelation_api,
+} from '@/api/system/relationship';
 import { message } from 'ant-design-vue';
 import EditDialog from './components/EditDialog.vue';
-import {
-    EditOutlined,
-    DeleteOutlined,
-    PlusOutlined,
-} from '@ant-design/icons-vue';
+
+const permission = 'system/Relationship';
+
 const query = {
     columns: [
         {
@@ -158,7 +161,7 @@ const table = {
     ],
     // 打开编辑弹窗
     openDialog: (row: object | undefined = {}) => {
-        editDialogRef.value.openDialog(true, row)
+        editDialogRef.value.openDialog(true, row);
     },
     // 删除
     clickDel: (row: any) => {
@@ -178,6 +181,11 @@ const table = {
 
 <style lang="less" scoped>
 .relationship-container {
-    padding:24px ;
+    padding: 24px;
+    :deep(.ant-table-cell) {
+        .ant-btn-link {
+            padding: 0;
+        }
+    }
 }
 </style>