From 716387150adb6f553b378c746bad95197376b76f Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 1 Mar 2023 15:45:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E7=BB=9C=E7=BB=84=E4=BB=B6=20?=
 =?UTF-8?q?=E5=8A=A0=E5=85=A5=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/link/Type/Detail/index.vue |  46 ++++----
 src/views/link/Type/data.ts          |  10 ++
 src/views/link/Type/index.vue        | 152 ++++++++++-----------------
 3 files changed, 93 insertions(+), 115 deletions(-)

diff --git a/src/views/link/Type/Detail/index.vue b/src/views/link/Type/Detail/index.vue
index c56ded01..48f32450 100644
--- a/src/views/link/Type/Detail/index.vue
+++ b/src/views/link/Type/Detail/index.vue
@@ -56,10 +56,9 @@
                                                 独立配置:集群下不同节点使用不同配置
                                             </p>
                                         </template>
-                                        <question-circle-outlined />
+                                        <AIcon type="QuestionCircleOutlined" />
                                     </a-tooltip>
                                 </div>
-
                                 <a-radio-group
                                     v-model:value="formData.shareCluster"
                                     button-style="solid"
@@ -101,8 +100,9 @@
                                     :header="`#${index + 1}.节点`"
                                 >
                                     <template #extra v-if="!shareCluster">
-                                        <delete-outlined
+                                        <AIcon
                                             @click="removeCluster(cluster)"
+                                            type="DeleteOutlined"
                                         />
                                     </template>
                                     <a-row :gutter="[24, 0]">
@@ -171,7 +171,9 @@
                                                                 绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
                                                             </p>
                                                         </template>
-                                                        <question-circle-outlined />
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
                                                     </a-tooltip>
                                                 </div>
 
@@ -230,7 +232,9 @@
                                                                 监听指定端口的请求
                                                             </p>
                                                         </template>
-                                                        <question-circle-outlined />
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
                                                     </a-tooltip>
                                                 </div>
                                                 <a-select
@@ -281,7 +285,9 @@
                                                                 对外提供访问的地址,内网环境时填写服务器的内网IP地址
                                                             </p>
                                                         </template>
-                                                        <question-circle-outlined />
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
                                                     </a-tooltip>
                                                 </div>
                                                 <a-input
@@ -324,7 +330,9 @@
                                                                 对外提供访问的端口
                                                             </p>
                                                         </template>
-                                                        <question-circle-outlined />
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
                                                     </a-tooltip>
                                                 </div>
 
@@ -517,7 +525,9 @@
                                                                 当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share
                                                             </p>
                                                         </template>
-                                                        <question-circle-outlined />
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
                                                     </a-tooltip>
                                                 </div>
                                                 <a-input
@@ -560,7 +570,9 @@
                                                                 单次收发消息的最大长度,单位:字节;设置过大可能会影响性能
                                                             </p>
                                                         </template>
-                                                        <question-circle-outlined />
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
                                                     </a-tooltip>
                                                 </div>
                                                 <a-input-number
@@ -691,7 +703,9 @@
                                                                 处理TCP粘拆包的方式
                                                             </p>
                                                         </template>
-                                                        <question-circle-outlined />
+                                                        <AIcon
+                                                            type="QuestionCircleOutlined"
+                                                        />
                                                     </a-tooltip>
                                                 </div>
                                                 <a-select
@@ -966,7 +980,7 @@
                         </div>
                         <a-form-item v-if="!shareCluster">
                             <a-button type="dashed" block @click="addCluster">
-                                <PlusOutlined />
+                                <AIcon type="PlusOutlined" />
                                 新增
                             </a-button>
                         </a-form-item>
@@ -986,14 +1000,15 @@
                 </a-form>
             </div>
             <div class="footer">
-                <a-button
+                <PermissionButton
                     v-if="view === 'false'"
                     type="primary"
                     @click="saveData"
                     :loading="loading"
+                    :hasPermission="`link/Type:${id ? 'update' : 'add'}`"
                 >
                     保存
-                </a-button>
+                </PermissionButton>
             </div>
         </a-card>
     </page-container>
@@ -1002,11 +1017,6 @@
 <script lang="ts" setup name="AccessNetwork">
 import { message } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
-import {
-    DeleteOutlined,
-    PlusOutlined,
-    QuestionCircleOutlined,
-} from '@ant-design/icons-vue';
 import {
     update,
     save,
diff --git a/src/views/link/Type/data.ts b/src/views/link/Type/data.ts
index e0fe7816..3d3df67b 100644
--- a/src/views/link/Type/data.ts
+++ b/src/views/link/Type/data.ts
@@ -301,3 +301,13 @@ export const Rules = {
         },
     ],
 };
+
+export const TiTlePermissionButtonStyle = {
+    padding: 0,
+    color: ' #1890ff !important',
+    'font-weight': 700,
+    'font-size': '16px',
+    overflow: 'hidden',
+    'text-overflow': 'ellipsis',
+    'white-space': 'nowrap',
+};
diff --git a/src/views/link/Type/index.vue b/src/views/link/Type/index.vue
index 9fff29a0..b8f89f3c 100644
--- a/src/views/link/Type/index.vue
+++ b/src/views/link/Type/index.vue
@@ -14,9 +14,14 @@
                 :params="params"
             >
                 <template #headerTitle>
-                    <a-button type="primary" @click="handlAdd"
-                        ><AIcon type="PlusOutlined" />新增</a-button
+                    <PermissionButton
+                        type="primary"
+                        @click="handlAdd"
+                        hasPermission="link/Type:add"
                     >
+                        <template #icon><AIcon type="PlusOutlined" /></template>
+                        新增
+                    </PermissionButton>
                 </template>
                 <template #card="slotProps">
                     <CardBox
@@ -43,18 +48,14 @@
                         </template>
                         <template #content>
                             <div class="card-item-content">
-                                <!-- <a
+                                <PermissionButton
+                                    type="link"
                                     @click="handlEye(slotProps.id)"
-                                    class="card-item-content-title-a"
+                                    hasPermission="link/Type:view"
+                                    :style="TiTlePermissionButtonStyle"
                                 >
                                     {{ slotProps.name }}
-                                </a> -->
-                                <h3
-                                    @click="handlEye(slotProps.id)"
-                                    class="card-item-content-title card-item-content-title-a"
-                                >
-                                    {{ slotProps.name }}
-                                </h3>
+                                </PermissionButton>
                                 <a-row class="card-item-content-box">
                                     <a-col :span="12">
                                         <div class="card-item-content-text">
@@ -88,78 +89,49 @@
                             </div>
                         </template>
                         <template #actions="item">
-                            <a-tooltip
-                                v-bind="item.tooltip"
-                                :title="item.disabled && item.tooltip.title"
+                            <PermissionButton
+                                :disabled="item.disabled"
+                                :popConfirm="item.popConfirm"
+                                :tooltip="{
+                                    ...item.tooltip,
+                                }"
+                                @click="item.onClick"
+                                :hasPermission="'link/Type:' + item.key"
                             >
-                                <a-popconfirm
-                                    v-if="item.popConfirm"
-                                    v-bind="item.popConfirm"
-                                    :disabled="item.disabled"
-                                >
-                                    <a-button :disabled="item.disabled">
-                                        <AIcon
-                                            type="DeleteOutlined"
-                                            v-if="item.key === 'delete'"
-                                        />
-                                        <template v-else>
-                                            <AIcon :type="item.icon" />
-                                            <span>{{ item.text }}</span>
-                                        </template>
-                                    </a-button>
-                                </a-popconfirm>
+                                <AIcon
+                                    type="DeleteOutlined"
+                                    v-if="item.key === 'delete'"
+                                />
                                 <template v-else>
-                                    <a-button
-                                        :disabled="item.disabled"
-                                        @click="item.onClick"
-                                    >
-                                        <AIcon
-                                            type="DeleteOutlined"
-                                            v-if="item.key === 'delete'"
-                                        />
-                                        <template v-else>
-                                            <AIcon :type="item.icon" />
-                                            <span>{{ item.text }}</span>
-                                        </template>
-                                    </a-button>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item?.text }}</span>
                                 </template>
-                            </a-tooltip>
+                            </PermissionButton>
                         </template>
                     </CardBox>
                 </template>
                 <template #action="slotProps">
-                    <a-space :size="16">
-                        <a-tooltip
+                    <a-space>
+                        <template
                             v-for="i in getActions(slotProps, 'table')"
                             :key="i.key"
-                            v-bind="i.tooltip"
                         >
-                            <a-popconfirm
-                                v-if="i.popConfirm"
-                                v-bind="i.popConfirm"
+                            <PermissionButton
                                 :disabled="i.disabled"
-                            >
-                                <a-button
-                                    :disabled="i.disabled"
-                                    style="padding: 0"
-                                    type="link"
-                                    ><AIcon :type="i.icon"
-                                /></a-button>
-                            </a-popconfirm>
-                            <a-button
-                                style="padding: 0"
+                                :popConfirm="i.popConfirm"
+                                :tooltip="{
+                                    ...i.tooltip,
+                                }"
+                                style="padding: 0px"
+                                @click="i.onClick"
                                 type="link"
-                                v-else
-                                @click="i.onClick && i.onClick(slotProps)"
+                                :hasPermission="'link/Type:' + i.key"
                             >
-                                <a-button
-                                    :disabled="i.disabled"
-                                    style="padding: 0"
-                                    type="link"
+                                <template #icon
                                     ><AIcon :type="i.icon"
-                                /></a-button>
-                            </a-button>
-                        </a-tooltip>
+                                /></template>
+                            </PermissionButton>
+                        </template>
                     </a-space>
                 </template>
                 <template #state="slotProps">
@@ -186,13 +158,15 @@
     </page-container>
 </template>
 <script lang="ts" setup name="TypePage">
-import type { ActionsType } from '@/components/Table/index'
+import type { ActionsType } from '@/components/Table/index';
 import { getImage } from '@/utils/comm';
 import { supports, query, remove, start, shutdown } from '@/api/link/type';
 import { message } from 'ant-design-vue';
+import { TiTlePermissionButtonStyle } from './data';
+import { useMenuStore } from 'store/menu';
 
+const menuStory = useMenuStore();
 const tableRef = ref<Record<string, any>>({});
-const router = useRouter();
 const params = ref<Record<string, any>>({});
 const options = ref([]);
 
@@ -282,9 +256,10 @@ const getActions = (
 ): ActionsType[] => {
     if (!data) return [];
     const state = data.state.value;
+    const stateText = state === 'enabled' ? '禁用' : '启用';
     const actions = [
         {
-            key: 'eye',
+            key: 'view',
             text: '查看',
             tooltip: {
                 title: '查看',
@@ -295,7 +270,7 @@ const getActions = (
             },
         },
         {
-            key: 'edit',
+            key: 'update',
             text: '编辑',
             tooltip: {
                 title: '编辑',
@@ -307,13 +282,13 @@ const getActions = (
         },
         {
             key: 'action',
-            text: state === 'enabled' ? '禁用' : '启用',
+            text: stateText,
             tooltip: {
-                title: state === 'enabled' ? '禁用' : '启用',
+                title: stateText,
             },
             icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
             popConfirm: {
-                title: `确认${state === 'enabled' ? '禁用' : '启用'}?`,
+                title: `确认${stateText}?`,
                 onConfirm: async () => {
                     let res =
                         state === 'enabled'
@@ -353,36 +328,19 @@ const getActions = (
     ];
     return type === 'table'
         ? actions
-        : actions.filter((item) => item.key !== 'eye');
+        : actions.filter((item) => item.key !== 'view');
 };
 
 const handlAdd = () => {
-    router.push({
-        path: `/iot/link/type/detail/:id`,
-        query: { view: false },
-    });
+    menuStory.jumpPage(`link/Type/Detail`, { id: ':id' }, { view: false });
 };
 
 const handlEye = (id: string) => {
-    router.push({
-        path: `/iot/link/type/detail/${id}`,
-        query: { view: true },
-    });
+    menuStory.jumpPage(`link/Type/Detail`, { id }, { view: true });
 };
 
 const handlEdit = (id: string) => {
-    router.push({
-        path: `/iot/link/type/detail/${id}`,
-        query: { view: false },
-    });
-};
-
-const handlDelete = async (id: string) => {
-    const res = await remove(id);
-    if (res.success) {
-        message.success('操作成功');
-        tableRef.value.reload();
-    }
+    menuStory.jumpPage(`link/Type/Detail`, { id }, { view: false });
 };
 
 const getDetails = (slotProps: Partial<Record<string, any>>) => {