update: 权限管理添加权限

src/api/system/permission.ts

@@ -1,12 +1,15 @@
 import server from '@/utils/request';
 
 // 获取权限列表
-export const getPermission_api = (data:object) => server.post(`/permission/_query/`,data);
+export const getPermission_api = (data: object) => server.post(`/permission/_query/`, data);
 // 新增时校验标识id是否可用
-export const checkId_api = (data:object) => server.get(`/permission/id/_validate`,data);
+export const checkId_api = (data: object) => server.get(`/permission/id/_validate`, data);
-// 修改权限
+// 修改权限 | 导入文件内容
-export const editPermission_api = (data:object) => server.patch(`/permission`,data);
+export const editPermission_api = (data: object) => server.patch(`/permission`, data);
 // 添加权限
-export const addPermission_api = (data:object) => server.post(`/permission`,data);
+export const addPermission_api = (data: object) => server.post(`/permission`, data);
 // 删除权限
-export const delPermission_api = (id:string) => server.remove(`/permission/${id}`);
+export const delPermission_api = (id: string) => server.remove(`/permission/${id}`);
+
+// 导出权限数据
+export const exportPermission_api = (data: object) => server.post(`/permission/_query/no-paging`, data);

src/utils/comm.ts

@@ -83,4 +83,4 @@ export const dateFormat = (dateSouce:any):string|Error => {
     seconds = (seconds < 10) ? '0' + seconds : seconds;
     return year + "-" + month + "-" + day
         + " " + hour + ":" + minutes + ":" + seconds;
-}
+}

src/views/home/modules/config.ts

@@ -84,8 +84,8 @@ export const deviceStepDetails: recommendList[] = [
             '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
         iconUrl: '/images/home/bottom-2.png',
         linkUrl: '/iot/device/Instance/detail',
-        auth: devicePermission('update'),
+        // auth: devicePermission('update'),
-        // auth: true,
+        auth: true,
         dialogTag: 'funcTest',
     },
     {

src/views/system/Permission/index.vue

@@ -11,9 +11,40 @@
             :defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
         >
             <template #headerTitle>
-                <a-button type="primary" @click="table.openDialog(undefined)"
+                <a-button
+                    type="primary"
+                    @click="table.openDialog(undefined)"
+                    style="margin-right: 10px"
                     ><plus-outlined />新增</a-button
                 >
+                <a-dropdown trigger="hover">
+                    <a-button>批量操作</a-button>
+                    <template #overlay>
+                        <a-menu>
+                            <a-menu-item>
+                                <a-upload
+                                    name="file"
+                                    action="#"
+                                    accept=".json"
+                                    :showUploadList="false"
+                                    :before-upload="table.clickImport"
+                                >
+                                    <a-button>导入</a-button>
+                                </a-upload>
+                            </a-menu-item>
+                            <a-menu-item>
+                                <a-popconfirm
+                                    title="确认导出？"
+                                    ok-text="确定"
+                                    cancel-text="取消"
+                                    @confirm="table.clickExport"
+                                >
+                                    <a-button>导出</a-button>
+                                </a-popconfirm>
+                            </a-menu-item>
+                        </a-menu>
+                    </template>
+                </a-dropdown>
             </template>
             <template #status="slotProps">
                 <StatusLabel :status-value="slotProps.status" />
@@ -51,18 +82,27 @@
                     </a-popconfirm>
 
                     <a-popconfirm
-                        title="确定要删除吗？"
+                        title="确认删除"
                         ok-text="确定"
                         cancel-text="取消"
                         @confirm="table.clickDel(slotProps)"
                         :disabled="slotProps.status"
                     >
                         <a-tooltip>
-                            <template #title>删除</template>
+                            <template #title>{{
+                                systemPermission('delete')
+                                    ? slotProps.status
+                                        ? '请先禁用，再删除'
+                                        : '删除'
+                                    : '暂无权限，请联系管理员'
+                            }}</template>
                             <a-button
                                 style="padding: 0"
                                 type="link"
-                                :disabled="slotProps.status"
+                                :disabled="
+                                    !systemPermission('delete') ||
+                                    slotProps.status
+                                "
                             >
                                 <delete-outlined />
                             </a-button>
@@ -89,11 +129,22 @@ import {
     StopOutlined,
     PlayCircleOutlined,
 } from '@ant-design/icons-vue';
-import { getPermission_api, editPermission_api, delPermission_api } from '@/api/system/permission';
+import {
+    getPermission_api,
+    editPermission_api,
+    delPermission_api,
+    exportPermission_api,
+} from '@/api/system/permission';
+import { downloadObject } from '@/utils/utils';
+import { usePermissionStore } from '@/store/permission';
 
 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: [
@@ -138,9 +189,9 @@ const query = reactive({
         },
     ],
     params: {},
-    search: (params:object)=>{
+    search: (params: object) => {
-        query.params = params
+        query.params = params;
-    }
+    },
 });
 
 // 表格
@@ -170,10 +221,55 @@ const table = reactive({
         },
     ],
     tableData: [],
+    // 打开编辑弹窗
     openDialog: (row: object | undefined = {}) => {
-        editDialogRef.value.openDialog(true, row);
+        let permissionCode = '';
+        if (Object.keys(row).length < 1) permissionCode = 'add';
+        else permissionCode = 'update';
+        if (systemPermission(permissionCode))
+            editDialogRef.value.openDialog(true, row);
+        else message.warn('暂无权限，请联系管理员');
     },
+    // 导入数据
+    clickImport: (file: File) => {
+        if (file.type === 'application/json') {
+            const reader = new FileReader();
+            reader.readAsText(file);
+            reader.onload = (result: any) => {
+                try {
+                    const data = JSON.parse(result.target.result);
+                    editPermission_api(data).then((resp) => {
+                        if (resp.status === 200) {
+                            message.success('导入成功');
+                            table.refresh();
+                        }
+                    });
+                } catch (error) {
+                    message.error('导入失败，请重试！');
+                }
+            };
+        } else message.error('请上传json格式');
+        return false;
+    },
+    // 导出数据
+    clickExport: () => {
+        const params = {
+            paging: false,
+            ...query.params,
+        };
+        exportPermission_api(params).then((resp) => {
+            if (resp.status === 200) {
+                downloadObject(resp.result as any, '权限数据');
+                message.success('导出成功');
+            } else {
+                message.error('导出错误');
+            }
+        });
+    },
+    // 修改状态
     changeStatus: (row: any) => {
+        if (!systemPermission('action'))
+            return message.warn('暂无权限，请联系管理员');
         const params = {
             ...row,
             status: row.status ? 0 : 1,
@@ -183,6 +279,7 @@ const table = reactive({
             tableRef.value.reload();
         });
     },
+    // 删除
     clickDel: (row: any) => {
         delPermission_api(row.id).then((resp: any) => {
             if (resp.status === 200) {
@@ -191,6 +288,7 @@ const table = reactive({
             }
         });
     },
+    // 刷新列表
     refresh: () => {
         tableRef.value.reload();
     },