perf(views): 优化页面操作按钮支持权限控制功能

src/components/LineChart.vue

@@ -14,6 +14,9 @@ import {
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 
+import { useUserInfoStore } from '@/stores/user-info';
+import { OperatePermission } from '@/utils/permission-type';
+
 import SvgIcon from './SvgIcon.vue';
 
 import type { MonitoringPointData } from '@/types';
@@ -32,7 +35,7 @@ use([
 ]);
 
 const list = ref<number[]>([]);
-
+const { booleanPermission } = useUserInfoStore();
 interface Props {
   data: MonitoringPointData;
   monitoringId?: number;
@@ -199,7 +202,12 @@ onUnmounted(() => {
         <div ref="textContainer" class="line-chart-header-text">{{ data.name }}</div>
       </APopover>
       <div v-else ref="textContainer" class="line-chart-header-text">{{ data.name }}</div>
-      <SvgIcon v-if="iconShow" class="line-chart-header-icon" @click="editorMonitoring(data.id)" name="adjustment" />
+      <SvgIcon
+        v-if="iconShow && booleanPermission(OperatePermission.编辑检测点)"
+        class="line-chart-header-icon"
+        @click="editorMonitoring(data.id)"
+        name="adjustment"
+      />
     </AFlex>
     <div @click="addHistoricalData(data)" class="chart-container" style="cursor: pointer">
       <VChart class="chart chart-bgc" :option="option" />

src/utils/permission-type.ts

@@ -16,7 +16,7 @@ export const enum ViewPermission {
   日志中心 = 110,
   智控日志 = 11101,
   操作日志 = 11102,
-  实时监控 = 111,
+  实时监测 = 111,
   设备工况 = 112,
 }
 

src/views/alarm-manage/AlarmManage.vue

@@ -7,6 +7,7 @@ import ConfirmModal from '@/components/ConfirmModal.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useDictData } from '@/hooks/dict-data';
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
 import {
   addAlarmEvent,
@@ -18,6 +19,7 @@ import {
   getOrgUsers,
   updateAlarmEvent,
 } from '@/api';
+import { OperatePermission } from '@/utils/permission-type';
 import { DictCode } from '@/constants';
 
 import AlarmConditions from './AlarmConditions.vue';
@@ -44,7 +46,7 @@ const { dictData: alarmRepeatTime, getDictData: getAlarmRepeatTime } = useDictDa
 const { dictData: alarmAlgOperator, getDictData: getAlarmAlgOperator } = useDictData(DictCode.AlarmAlgOperator);
 const { dictData: alarmDeviceState, getDictData: getAlarmDeviceState } = useDictData(DictCode.AlarmDeviceState);
 const { dictData: alarmNotifyMethod, getDictData: getAlarmNotifyMethod } = useDictData(DictCode.AlarmNotifyMethod);
-
+const { booleanPermission } = useUserInfoStore();
 const modalComponentRef = useTemplateRef('modalComponent');
 const formRef = ref<FormInstance>();
 const triggerConditionRefs = ref<InstanceType<typeof AlarmConditions>[]>([]);
@@ -630,7 +632,12 @@ onMounted(() => {
     <AFlex justify="space-between">
       <div class="text-top">{{ $t('navigation.alarmManage') }}</div>
       <div>
-        <AButton type="primary" class="icon-button" @click="addAlarm">
+        <AButton
+          v-if="booleanPermission(OperatePermission.新增事件响应)"
+          type="primary"
+          class="icon-button"
+          @click="addAlarm"
+        >
           <AFlex align="center">
             <SvgIcon name="plus" />
             <span> {{ $t('common.addNew') }} </span>
@@ -660,9 +667,19 @@ onMounted(() => {
             <ASwitch @change="switchalarm(record as EventTrigger)" v-model:checked="record.enabled" />
           </template>
           <template v-else-if="column.key === 'action'">
-            <SvgIcon @click="alarmEditor(record.id)" class="icon-style" name="edit-o" />
+            <SvgIcon
+              v-if="booleanPermission(OperatePermission.编辑事件响应)"
+              @click="alarmEditor(record.id)"
+              class="icon-style"
+              name="edit-o"
+            />
             <SvgIcon @click="alarmHistory(record.id)" class="icon-style" name="clock-circle-o" />
-            <SvgIcon @click="alarmDelete(record.id)" class="icon-style" name="delete" />
+            <SvgIcon
+              v-if="booleanPermission(OperatePermission.删除事件响应)"
+              @click="alarmDelete(record.id)"
+              class="icon-style"
+              name="delete"
+            />
           </template>
         </template>
       </ATable>

src/views/algorithm-manage/AlgorithmManage.vue

@@ -3,13 +3,16 @@ import { ref, useTemplateRef } from 'vue';
 
 import DeviceGroupSelect from '@/components/DeviceGroupSelect.vue';
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
 import { getAlgorithmConfigInfo } from '@/api';
+import { OperatePermission } from '@/utils/permission-type';
 
 import AlgorithmEditing from './AlgorithmEditing.vue';
 
 import type { AlgorithmConfigInfo } from '@/types';
 
+const { booleanPermission } = useUserInfoStore();
 const algorithmConfigInfo = ref<AlgorithmConfigInfo>();
 const algorithmEditingRef = useTemplateRef('algorithmEditing');
 const activeKey = ref<string[]>(['intelligentControl', 'functionSettings']);
@@ -51,7 +54,7 @@ const cancelClick = () => {
         <div class="title-text">{{ $t('algorithmManage.algorithmConfiguration') }}</div>
         <DeviceGroupSelect @change="handleDevGroupChange" />
       </AFlex>
-      <AButton type="primary" @click="editorAlgorithm">
+      <AButton type="primary" @click="editorAlgorithm" v-if="booleanPermission(OperatePermission.算法配置编辑)">
         <AFlex align="center">
           <SvgIcon style="margin-right: 4px" name="edit-o" />
           <span> {{ t('common.editor') }} </span>

src/views/device-group/DeviceGroup.vue

@@ -5,12 +5,15 @@ import { useRoute, useRouter } from 'vue-router';
 import DeviceWorkStatus from '@/views/device-work-status/DeviceWorkStatus.vue';
 import RealTimeMonitor from '@/views/real-time-monitor/RealTimeMonitor.vue';
 import { useRefreshView } from '@/hooks/refresh-view';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
+import { ViewPermission } from '@/utils/permission-type';
 
 import type { TabComponent } from '@/types';
 
 const router = useRouter();
 const route = useRoute();
+const { booleanPermission } = useUserInfoStore();
 const { renderView, refreshView } = useRefreshView();
 const activeKey = ref('');
 
@@ -19,7 +22,10 @@ const deviceGroupId = computed(() => {
 });
 
 const aiSmartCtrlTabs = computed<TabComponent[]>(() => {
-  return [
+  const realTimeMonitor = booleanPermission(ViewPermission.实时监测);
+  const deviceWorkStatus = booleanPermission(ViewPermission.设备工况);
+  const result: TabComponent[] = [];
+  const data = [
     {
       key: 'realTimeMonitor',
       name: t('navigation.realTimeMonitor'),
@@ -31,6 +37,16 @@ const aiSmartCtrlTabs = computed<TabComponent[]>(() => {
       component: DeviceWorkStatus,
     },
   ];
+
+  if (realTimeMonitor) {
+    result.push(data.find((item) => item.key === 'realTimeMonitor') as TabComponent);
+  }
+
+  if (deviceWorkStatus) {
+    result.push(data.find((item) => item.key === 'deviceWorkStatus') as TabComponent);
+  }
+
+  return result;
 });
 
 watch(deviceGroupId, () => {
@@ -69,7 +85,12 @@ const handleTabClick = (activeKey: string | number) => {
 
 <template>
   <div class="device-group-container">
-    <ATabs class="device-group-tab" v-model:active-key="activeKey" @tab-click="handleTabClick">
+    <ATabs
+      class="device-group-tab"
+      v-model:active-key="activeKey"
+      @tab-click="handleTabClick"
+      v-if="aiSmartCtrlTabs.length"
+    >
       <ATabPane v-for="item in aiSmartCtrlTabs" :key="item.key" :tab="item.name">
         <component
           v-if="activeKey === item.key && renderView"

src/views/device-list/DeviceList.vue

@@ -6,8 +6,10 @@ import { message } from 'ant-design-vue';
 import ModalGuidance from '@/layout/ModalGuidance.vue';
 import ConfirmModal from '@/components/ConfirmModal.vue';
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
 import { deviceDeletion, getPageList, groupList, queryDevicesList } from '@/api';
+import { OperatePermission } from '@/utils/permission-type';
 
 import CreateDevice from '../create-device/CreateDevice.vue';
 
@@ -64,7 +66,7 @@ const devicesColumns = [
     ellipsis: true,
   },
 ];
-
+const { booleanPermission } = useUserInfoStore();
 const router = useRouter();
 const modalGuidanceRef = useTemplateRef('modalGuidance');
 const devicesList = ref<DevicesListItem[]>([]);
@@ -198,14 +200,18 @@ onMounted(() => {
       <AFlex justify="space-between">
         <div class="text-top">{{ $t('navigation.deviceManage') }}</div>
         <div>
-          <AButton class="deletion-button default-button" @click="postDeviceDeletion">
+          <AButton
+            class="deletion-button default-button"
+            @click="postDeviceDeletion"
+            v-if="booleanPermission(OperatePermission.删除设备)"
+          >
             <AFlex align="center">
               <SvgIcon style="margin-right: 4px" name="delete" />
 
               <span> {{ $t('common.delete') }} </span>
             </AFlex>
           </AButton>
-          <AButton type="primary" @click="addEquipment">
+          <AButton type="primary" @click="addEquipment" v-if="booleanPermission(OperatePermission.新增设备)">
             <AFlex align="center">
               <SvgIcon style="margin-right: 4px" name="plus" />
               <span> {{ $t('common.add') }} </span>
@@ -288,11 +294,15 @@ onMounted(() => {
           <AButton class="default-button" @click="addQueryReset">{{ $t('common.reset') }}</AButton>
         </AFlex>
         <ATable
-          :row-selection="{
-            type: 'checkbox',
-            selectedRowKeys: devicesKeys,
-            onChange: devicesChange,
-          }"
+          :row-selection="
+            booleanPermission(OperatePermission.删除设备)
+              ? {
+                  type: 'checkbox',
+                  selectedRowKeys: devicesKeys,
+                  onChange: devicesChange,
+                }
+              : undefined
+          "
           row-key="id"
           :columns="devicesColumns"
           :data-source="devicesList"

src/views/env-monitor/EnvMonitor.vue

@@ -10,6 +10,7 @@ import LineChart from '@/components/LineChart.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useDictData } from '@/hooks/dict-data';
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import router from '@/router';
 import { t } from '@/i18n';
 import {
@@ -31,6 +32,7 @@ import {
   updateMonitorPoint,
   updateRegionMonitorPoint,
 } from '@/api';
+import { OperatePermission } from '@/utils/permission-type';
 import { DictCode, HumitureType } from '@/constants';
 
 import AreaEditor from './AreaEditor.vue';
@@ -90,7 +92,7 @@ const outdoorOpen = ref<boolean>(false);
 const regionNameOpen = ref<boolean>(false);
 const monitoringDataOpen = ref<boolean>(false);
 const regionCopyOpen = ref<boolean>(false);
-
+const { booleanPermission } = useUserInfoStore();
 const regionName = ref<string>('');
 const regionNameEditor = ref<string>('');
 const groupRegions = ref<GroupRegions[]>([]);
@@ -1136,7 +1138,12 @@ const copyAreaCanvas = () => {
               <span>{{ listDisplay ? $t('envMonitor.listDisplay') : $t('envMonitor.cardDisplay') }} </span>
             </AFlex>
           </AButton>
-          <AButton type="primary" class="icon-button button-monitoring" @click="addMonitoringPoint">
+          <AButton
+            type="primary"
+            class="icon-button button-monitoring"
+            @click="addMonitoringPoint"
+            v-if="booleanPermission(OperatePermission.新增监测点)"
+          >
             <AFlex align="center">
               <SvgIcon name="plus" />
               <span> {{ $t('envMonitor.addInspectionPoints') }} </span>
@@ -1218,7 +1225,7 @@ const copyAreaCanvas = () => {
                   {{ currentAreaData?.outSideTemperature || '-' }}℃｜{{ currentAreaData?.outSideHumidity || '-' }}%
                 </AButton>
                 <AFlex>
-                  <div @click="areaEditorRef?.showView">
+                  <div @click="areaEditorRef?.showView" v-if="booleanPermission(OperatePermission.编辑平面图)">
                     <AFlex justify="center" align="center" class="button-icon">
                       <SvgIcon name="edit-o" />
                     </AFlex>
@@ -1634,7 +1641,12 @@ const copyAreaCanvas = () => {
         </AForm>
         <template #footer>
           <AFlex justify="flex-end" :gap="16">
-            <AButton class="default-button" @click="deleteMonitoringPoint">{{ $t('common.delete') }}</AButton>
+            <AButton
+              v-if="booleanPermission(OperatePermission.删除监测点)"
+              class="default-button"
+              @click="deleteMonitoringPoint"
+              >{{ $t('common.delete') }}</AButton
+            >
             <AButton type="primary" @click="saveMonitoringPoint">{{ $t('common.save') }}</AButton>
           </AFlex>
         </template>

src/views/equipment-details/EquipmentDetails.vue

@@ -5,8 +5,10 @@ import { message } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
 import { equipmentDetails, getDeviceParams, noPaginationDevicesList } from '@/api';
+import { OperatePermission } from '@/utils/permission-type';
 
 import BasicInformation from '../create-device/BasicInformation.vue';
 import DetailedInformation from '../create-device/DetailedInformation.vue';
@@ -190,6 +192,7 @@ const customizationColumns = [
   },
 ];
 
+const { booleanPermission } = useUserInfoStore();
 const route = useRoute();
 const { isLoading, handleRequest } = useRequest();
 const router = useRouter();
@@ -628,7 +631,7 @@ const goBack = () => {
             :placeholder="$t('common.plzSelect')"
             @change="selectDeviceId"
           />
-          <AButton class="previous default-button" @click="switchDevices(1)">{{ $t('common.previous') }}</AButton>
+          <AButton class="default-button previous" @click="switchDevices(1)">{{ $t('common.previous') }}</AButton>
           <AButton class="default-button" @click="switchDevices(2)">{{ $t('common.next') }}</AButton>
         </div>
       </AFlex>
@@ -665,7 +668,7 @@ const goBack = () => {
           <div :class="switchTabs(1)" @click="addSwitchTabs">{{ $t('deviceList.realTimeMonitoring') }}</div>
           <div :class="switchTabs(2)" @click="addSwitchTabs">{{ $t('deviceList.basicInformation') }}</div>
         </AFlex>
-        <div @click="editorEquipment">
+        <div @click="editorEquipment" v-if="booleanPermission(OperatePermission.编辑设备)">
           <AFlex v-if="showTabs" align="center" class="pointer">
             <SvgIcon name="edit-o" />
             <div class="editor-style">{{ $t('common.editor') }}</div>

src/views/gateway-list/GatewayList.vue

@@ -5,6 +5,7 @@ import ModalGuidance from '@/layout/ModalGuidance.vue';
 import ConfirmModal from '@/components/ConfirmModal.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
 import {
   addGatewayLinkBatchUpdate,
@@ -14,6 +15,7 @@ import {
   obtainListPhysicalInterfaces,
   orgGatewayUnregister,
 } from '@/api';
+import { OperatePermission } from '@/utils/permission-type';
 
 import RegisterGateway from '../register-gateway/RegisterGateway.vue';
 
@@ -81,6 +83,7 @@ const agreementColumns = [
   },
 ];
 
+const { booleanPermission } = useUserInfoStore();
 const gatewayData = ref<GatewayListItem[]>([]);
 const interfaceList = ref<InterfaceLsit[]>([]);
 const interfaceOriginalData = ref<InterfaceLsit[]>([]);
@@ -288,7 +291,12 @@ onMounted(() => {
     <AFlex justify="space-between">
       <div class="text-top">{{ $t('navigation.gatewayManage') }}</div>
       <div>
-        <AButton type="primary" class="icon-button" @click="addGateway">
+        <AButton
+          type="primary"
+          class="icon-button"
+          @click="addGateway"
+          v-if="booleanPermission(OperatePermission.新增网关)"
+        >
           <AFlex align="center">
             <SvgIcon name="plus" />
             <span> {{ $t('common.add') }} </span>
@@ -346,7 +354,7 @@ onMounted(() => {
                 <div v-if="record.state === 0" class="tag-style default">{{ $t('common.offline') }}</div>
                 <div v-else class="tag-style success">{{ $t('common.online') }}</div>
               </template>
-              <template v-else-if="column.key === 'action'">
+              <template v-else-if="column.key === 'action' && booleanPermission(OperatePermission.删除网关)">
                 <SvgIcon @click="addGatewayDelete(record.id)" class="icon-delete" name="delete" />
               </template>
             </template>

src/views/gateway-protocol/GatewayProtocol.vue

@@ -6,9 +6,11 @@ import ModalGuidance from '@/layout/ModalGuidance.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { useViewVisible } from '@/hooks/view-visible';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
 import { deleteProtocolBaseInfo, getProtocolList, updateProtocolBaseInfo } from '@/api';
 import { getTablePageSorts } from '@/utils';
+import { OperatePermission } from '@/utils/permission-type';
 
 import ProtocolContent from '../setup-protocol/ProtocolContent.vue';
 import SetupProtocol from '../setup-protocol/SetupProtocol.vue';
@@ -16,6 +18,7 @@ import SetupProtocol from '../setup-protocol/SetupProtocol.vue';
 import type { ColumnType, TableProps } from 'ant-design-vue/es/table';
 import type { PageParams, ProtocolBaseInfo } from '@/types';
 
+const { booleanPermission } = useUserInfoStore();
 const protocolInitialInfo: Partial<ProtocolBaseInfo> = {
   id: undefined,
   protocolName: '',
@@ -174,7 +177,12 @@ const handleOk = () => {
 <template>
   <AFlex justify="space-between">
     <div class="hvac-layout-main-title">{{ $t('navigation.protocolManage') }}</div>
-    <AButton class="icon-button add-button" type="primary" @click="handleAdd">
+    <AButton
+      class="icon-button add-button"
+      type="primary"
+      @click="handleAdd"
+      v-if="booleanPermission(OperatePermission.新增协议)"
+    >
       <SvgIcon name="plus" />
       {{ $t('common.addNew') }}
     </AButton>
@@ -214,8 +222,18 @@ const handleOk = () => {
     >
       <template #bodyCell="{ column, record }">
         <span v-if="column.key === 'action'">
-          <SvgIcon class="action-icon" name="edit-o" @click="handleEdit(record as ProtocolBaseInfo)" />
-          <SvgIcon class="action-icon" name="delete" @click="handleDelete(record as ProtocolBaseInfo)" />
+          <SvgIcon
+            v-if="booleanPermission(OperatePermission.编辑协议)"
+            class="action-icon"
+            name="edit-o"
+            @click="handleEdit(record as ProtocolBaseInfo)"
+          />
+          <SvgIcon
+            v-if="booleanPermission(OperatePermission.删除协议)"
+            class="action-icon"
+            name="delete"
+            @click="handleDelete(record as ProtocolBaseInfo)"
+          />
         </span>
       </template>
     </ATable>

src/views/log-center/LogCenter.vue

@@ -2,18 +2,24 @@
 import { computed, onMounted, ref } from 'vue';
 
 import { useRefreshView } from '@/hooks/refresh-view';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
+import { ViewPermission } from '@/utils/permission-type';
 
 import OperateLog from './OperateLog.vue';
 import SmartCtrlLog from './SmartCtrlLog.vue';
 
 import type { TabComponent } from '@/types';
 
+const { booleanPermission } = useUserInfoStore();
 const { renderView, refreshView } = useRefreshView();
 const activeKey = ref('');
 
 const logTabs = computed<TabComponent[]>(() => {
-  return [
+  const smartCtrlLog = booleanPermission(ViewPermission.智控日志);
+  const operateLog = booleanPermission(ViewPermission.操作日志);
+  const result: TabComponent[] = [];
+  const data = [
     {
       key: 'smartCtrlLog',
       name: t('logCenter.smartControlLogs'),
@@ -25,6 +31,16 @@ const logTabs = computed<TabComponent[]>(() => {
       component: OperateLog,
     },
   ];
+
+  if (smartCtrlLog) {
+    result.push(data.find((item) => item.key === 'smartCtrlLog') as TabComponent);
+  }
+
+  if (operateLog) {
+    result.push(data.find((item) => item.key === 'operateLog') as TabComponent);
+  }
+
+  return result;
 });
 
 onMounted(() => {
@@ -34,7 +50,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <ATabs class="button-tabs-compact" v-model:active-key="activeKey" type="card" @tab-click="refreshView">
+  <ATabs
+    class="button-tabs-compact"
+    v-model:active-key="activeKey"
+    type="card"
+    @tab-click="refreshView"
+    v-if="logTabs.length"
+  >
     <ATabPane v-for="item in logTabs" :key="item.key" :tab="item.name">
       <component v-if="activeKey === item.key && renderView" :is="item.component" />
     </ATabPane>

src/views/organization-manage/OrganizationManage.vue

@@ -6,14 +6,17 @@ import dayjs from 'dayjs';
 import ConfirmModal from '@/components/ConfirmModal.vue';
 import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
 import { getDownloadLogo, getOrganizationAllList, getOrgInfo } from '@/api';
+import { OperatePermission } from '@/utils/permission-type';
 
 import EstablishOrganization from '../create-customer/EstablishOrganization.vue';
 
 import type { FormInstance } from 'ant-design-vue';
 import type { CreateCustomer, FormRules, OrganizationListItem, RegisterGatewayForm } from '@/types';
 
+const { booleanPermission } = useUserInfoStore();
 const organizationOpen = ref<boolean>(false);
 const establishOrganizationRef = useTemplateRef('establishOrganization');
 const organizationRefs = ref<FormInstance>();
@@ -202,7 +205,12 @@ onMounted(() => {
       <div class="text-top">{{ t('navigation.organizationManage') }}</div>
       <AFlex align="center">
         <!--<div class="text-restriction">还可创建1个</div> -->
-        <AButton type="primary" class="icon-button" @click="addOrganization">
+        <AButton
+          type="primary"
+          class="icon-button"
+          @click="addOrganization"
+          v-if="booleanPermission(OperatePermission.新增组织)"
+        >
           <AFlex align="center">
             <SvgIcon name="plus" />
             <span> {{ t('common.add') }} </span>
@@ -231,7 +239,12 @@ onMounted(() => {
           <ATable :columns="organizationColumns" :data-source="organizationList" :pagination="false">
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'action'">
-                <SvgIcon @click="organizationEditor(record.id)" class="icon-style" name="edit-o" />
+                <SvgIcon
+                  v-if="booleanPermission(OperatePermission.编辑组织)"
+                  @click="organizationEditor(record.id)"
+                  class="icon-style"
+                  name="edit-o"
+                />
                 <!-- <SvgIcon @click="organizationDelete(record.id)" class="icon-style" name="delete" /> -->
               </template>
             </template>

src/views/role-manage/RoleManage.vue

@@ -6,6 +6,7 @@ import ConfirmModal from '@/components/ConfirmModal.vue';
 import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
 import {
   addCharacter,
@@ -18,6 +19,7 @@ import {
   getSubOrgsByToken,
   updateCharacter,
 } from '@/api';
+import { OperatePermission } from '@/utils/permission-type';
 
 import type { DataNode, TreeProps } from 'ant-design-vue/es/tree';
 import type { Key } from 'ant-design-vue/es/vc-tree/interface';
@@ -30,6 +32,7 @@ interface HaracterItem {
   show: boolean;
 }
 
+const { booleanPermission } = useUserInfoStore();
 const characterList = ref<HaracterItem[]>([]);
 const { handleRequest } = useRequest();
 const characterListId = ref();
@@ -372,7 +375,11 @@ onMounted(() => {
       <div class="content">
         <AFlex justify="space-between" align="center" class="content-top">
           <div class="content-text">{{ t('userManage.role') }}</div>
-          <div class="icon-style pointer" @click="addCharacterName">
+          <div
+            class="icon-style pointer"
+            @click="addCharacterName"
+            v-if="booleanPermission(OperatePermission.新增角色)"
+          >
             <AFlex align="center"
               ><SvgIcon name="plus" />
               <div class="text-left">{{ t('common.add') }}</div>
@@ -399,8 +406,18 @@ onMounted(() => {
             >
               <div class="pointer text-height" @click="clickCharacter(item.id!)">{{ item.name }}</div>
               <div v-if="item.id === characterListId">
-                <SvgIcon class="pointer" name="edit-o" @click="addEditor(index)" />
-                <SvgIcon class="pointer icon-left" @click="addDelete(item.id)" name="delete" />
+                <SvgIcon
+                  v-if="booleanPermission(OperatePermission.编辑角色)"
+                  class="pointer"
+                  name="edit-o"
+                  @click="addEditor(index)"
+                />
+                <SvgIcon
+                  v-if="booleanPermission(OperatePermission.删除角色)"
+                  class="pointer icon-left"
+                  @click="addDelete(item.id)"
+                  name="delete"
+                />
               </div>
             </AFlex>
           </div>
@@ -410,13 +427,17 @@ onMounted(() => {
       <div class="permission-management">
         <AFlex justify="space-between" align="center" class="content-top">
           <div class="content-text">{{ t('roleManage.permission') }}</div>
-          <div class="pointer" @click="editorPermission" v-if="editorChecked">
+          <div
+            class="pointer"
+            @click="editorPermission"
+            v-if="editorChecked && booleanPermission(OperatePermission.编辑角色)"
+          >
             <AFlex align="center"
               ><SvgIcon name="edit-o" />
               <div class="text-left">{{ t('common.editor') }}</div>
             </AFlex>
           </div>
-          <AFlex v-else>
+          <AFlex v-if="!editorChecked">
             <div class="pointer" @click="cancelPermission">
               <AFlex align="center"
                 ><SvgIcon name="close" />

src/views/user-manage/UserManage.vue

@@ -6,13 +6,16 @@ import dayjs, { Dayjs } from 'dayjs';
 import ConfirmModal from '@/components/ConfirmModal.vue';
 import OrganizationalStructure from '@/components/OrganizationalStructure.vue';
 import { useRequest } from '@/hooks/request';
+import { useUserInfoStore } from '@/stores/user-info';
 import { t } from '@/i18n';
 import { addAccount, batchDeleteAccount, getFindRolesByOrgIds, getUserPageList, updateAccount } from '@/api';
+import { OperatePermission } from '@/utils/permission-type';
 
 import type { FormInstance, Rule } from 'ant-design-vue/es/form';
 import type { Key } from 'ant-design-vue/es/table/interface';
 import type { AccountForm, CharacterPageItem, UserPageItem, UserPageParams } from '@/types';
 
+const { booleanPermission } = useUserInfoStore();
 const modalComponentRef = useTemplateRef('modalComponent');
 const { handleRequest } = useRequest();
 const accountKeys = ref<Key[]>([]);
@@ -250,13 +253,22 @@ const getUserList = () => {
     <AFlex justify="space-between" class="account-header">
       <div class="text-top">{{ t('userManage.accountManagement') }}</div>
       <div>
-        <AButton class="icon-button default-button" @click="addDelete">
+        <AButton
+          v-if="booleanPermission(OperatePermission.删除账户)"
+          class="icon-button default-button"
+          @click="addDelete"
+        >
           <AFlex align="center">
             <SvgIcon name="delete" />
             <span>{{ t('common.delete') }}</span>
           </AFlex>
         </AButton>
-        <AButton type="primary" class="icon-button button-monitoring" @click="addOpenAccount">
+        <AButton
+          v-if="booleanPermission(OperatePermission.新增账户)"
+          type="primary"
+          class="icon-button button-monitoring"
+          @click="addOpenAccount"
+        >
           <AFlex align="center">
             <SvgIcon name="plus" />
             <span> {{ t('common.add') }} </span>
@@ -316,11 +328,15 @@ const getUserList = () => {
           <AButton class="default-button margin-left" @click="addReset"> {{ t('common.reset') }} </AButton>
         </AFlex>
         <ATable
-          :row-selection="{
-            type: 'checkbox',
-            selectedRowKeys: accountKeys,
-            onChange: accountChange,
-          }"
+          :row-selection="
+            booleanPermission(OperatePermission.删除账户)
+              ? {
+                  type: 'checkbox',
+                  selectedRowKeys: accountKeys,
+                  onChange: accountChange,
+                }
+              : undefined
+          "
           row-key="id"
           :columns="accountColumns"
           :data-source="accountList"
@@ -328,7 +344,8 @@ const getUserList = () => {
         >
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'mobile'">
-              <div @click="addCheck(record as UserPageItem)" class="mobile-phone">{{ record.mobile }}</div>
+              <div v-if="!booleanPermission(OperatePermission.编辑账户)">{{ record.mobile }}</div>
+              <div v-else @click="addCheck(record as UserPageItem)" class="mobile-phone">{{ record.mobile }}</div>
             </template>
             <template v-if="column.key === 'enabled'">
               <div v-if="record.enabled == 1" class="tag-style success">{{ t('common.activating') }}</div>