feat:运维管理下新增子菜单 上下线记录静态页面

@@ -20,6 +20,8 @@ import { usePermissionStore } from '/@/store/modules/permission';
 import { RouteRecordRaw } from 'vue-router';
 import { RouteRecordRaw } from 'vue-router';
 import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
 import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
 import { createLocalStorage } from '/@/utils/cache/index';
 import { createLocalStorage } from '/@/utils/cache/index';
+import { getEntitiesId } from '/@/api/dashboard/index';
+
 interface UserState {
 interface UserState {
   platInfo: any;
   platInfo: any;
   enterPriseInfo: any;
   enterPriseInfo: any;
@@ -185,6 +187,14 @@ export const useUserStore = defineStore({
       const { roles } = userInfo;
       const { roles } = userInfo;
       const roleList = roles.map((item) => item) as RoleEnum[];
       const roleList = roles.map((item) => item) as RoleEnum[];
       this.setRoleList(roleList);
       this.setRoleList(roleList);
+      try {
+        if (roleList[0] !== 'SYS_ADMIN') {
+          const res = await getEntitiesId();
+          const entityId = res.data[0]?.entityId;
+          window.localStorage.setItem('entityId', JSON.stringify(entityId));
+          window.sessionStorage.setItem('entityId', JSON.stringify(entityId));
+        }
+      } catch {}
       return userInfo;
       return userInfo;
     },
     },
     /**
     /**

@@ -21,7 +21,7 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
+  import { ref } from 'vue';
   import GrowCard from './components/GrowCard.vue';
   import GrowCard from './components/GrowCard.vue';
   import SiteAnalysis from './components/SiteAnalysis.vue';
   import SiteAnalysis from './components/SiteAnalysis.vue';
   import SiteAnalysisMessage from './components/SiteAnalysisMessage.vue';
   import SiteAnalysisMessage from './components/SiteAnalysisMessage.vue';
@@ -30,7 +30,6 @@
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import { getAuthCache } from '/@/utils/auth';
   import { isAdmin } from '/@/enums/roleEnum';
   import { isAdmin } from '/@/enums/roleEnum';
-  import { getEntitiesId } from '/@/api/dashboard/index';
 
 
   defineExpose({
   defineExpose({
     isAdmin,
     isAdmin,
@@ -45,15 +44,4 @@
   setTimeout(() => {
   setTimeout(() => {
     loading.value = false;
     loading.value = false;
   }, 1500);
   }, 1500);
-
-  const entityId = ref({});
-
-  onMounted(async () => {
-    if (role === 'TENANT_ADMIN') {
-      const res = await getEntitiesId();
-      entityId.value = res.data[0]?.entityId;
-      window.localStorage.setItem('entityId', JSON.stringify(entityId.value));
-      window.sessionStorage.setItem('entityId', JSON.stringify(entityId.value));
-    }
-  });
 </script>
 </script>

@@ -62,3 +62,8 @@
     </BasicTable>
     </BasicTable>
   </section>
   </section>
 </template>
 </template>
+<style scoped>
+  :deep(.ant-table-body) {
+    overflow: hidden !important;
+  }
+</style>

+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="上下线记录详情" width="40%">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  defineEmits(['success', 'register']);
+  const [registerForm, { setFieldsValue, resetFields }] = useForm({
+    labelWidth: 120,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+    await resetFields();
+    setDrawerProps({ confirmLoading: false });
+    await setFieldsValue(data.record);
+  });
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import moment from 'moment';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+// 表格数据
+export const columns: BasicColumn[] = [
+  {
+    title: '设备名称',
+    dataIndex: 'deviceName',
+    width: 120,
+  },
+  {
+    title: '设备配置',
+    dataIndex: 'deviceConfig',
+    width: 120,
+  },
+  {
+    title: '设备类型',
+    dataIndex: 'entityType',
+    width: 180,
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'orgName',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 180,
+    customRender: ({ record }) => {
+      const status = record.status;
+      const enable = status === 'SUCCESS' ? '启用' : '禁用';
+      const color = enable === '启用' ? 'green' : 'red';
+      const text = enable === '启用' ? '启用' : '禁用';
+      return h(Tag, { color }, () => text);
+    },
+  },
+  {
+    title: '时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+// 分页查询
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'deviceName',
+    label: '设备名称',
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入设备名称',
+    },
+    dynamicRules: () => {
+      return [
+        {
+          required: false,
+          validator: (_, value) => {
+            if (String(value).length > 255) {
+              return Promise.reject('字数不超过255个字');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+
+    colProps: { span: 6 },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    colProps: { span: 6 },
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择状态',
+      options: [
+        {
+          label: '启用',
+          value: 'NOTICE',
+        },
+        {
+          label: '禁用',
+          value: 'MEETING',
+        },
+      ],
+    },
+  },
+  {
+    field: 'queryTime',
+    label: '查询时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 6 },
+  },
+];
+
+// 详情配置
+export const formSchema: FormSchema[] = [
+  {
+    field: 'deviceName',
+    label: '设备名称',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'deviceConfig',
+    label: '设备配置',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'entityType',
+    label: '设备类型',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'orgName',
+    label: '所属组织',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'createTime',
+    label: '时间',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+];
+
+export const mockList = [
+  {
+    deviceName: '网关/直连设备',
+    id: '2d2321s122131',
+    deviceConfig: '车车网关设备配置',
+    entityType: '网关',
+    orgName: 'cheche',
+    status: 'SUCCESS',
+    createTime: '2022-12-22 16:25:36',
+  },
+  {
+    deviceName: '网关/直连设备',
+    id: '2d22321s12131',
+    deviceConfig: '车车网关设备配置',
+    entityType: '网关',
+    orgName: 'cheche',
+    status: 'SUCCESS',
+    createTime: '2022-12-22 16:25:36',
+  },
+  {
+    deviceName: '网关/直连设备',
+    id: '2d232d1s12131',
+    deviceConfig: '车车网关设备配置',
+    entityType: '网关',
+    orgName: 'cheche',
+    status: 'SUCCESS',
+    createTime: '2022-12-22 16:25:36',
+  },
+  {
+    deviceName: '网关/直连设备',
+    id: '2d2321fs12131',
+    deviceConfig: '车车网关设备配置',
+    entityType: '网关',
+    orgName: 'cheche',
+    status: 'SUCCESS',
+    createTime: '2022-12-22 16:25:36',
+  },
+  {
+    deviceName: '网关/直连设备',
+    id: '2d2321ggs12131',
+    deviceConfig: '车车网关设备配置',
+    entityType: '网关',
+    orgName: 'cheche',
+    status: 'SUCCESS',
+    createTime: '2022-12-22 16:25:36',
+  },
+  {
+    deviceName: '网关/直连设备',
+    id: '2d2321hhs12131',
+    deviceConfig: '车车网关设备配置',
+    entityType: '网关',
+    orgName: 'cheche',
+    status: 'FATURE',
+    createTime: '2022-12-22 16:25:36',
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
+      <template #toolbar>
+        <Authority value="api:yt:onlinerecord:delete">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              auth: 'api:yt:onlinerecord:get',
+              icon: 'clarity:note-edit-line',
+              onClick: handleViewDetail.bind(null, record),
+            },
+            {
+              label: '删除',
+              auth: 'api:yt:onlinerecord:delete',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <OnlineRecordDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import OnlineRecordDrawer from './OnlineRecordDrawer.vue';
+  // import { getExceptionPage } from '/@/api/log/logManager';
+  import { searchFormSchema, columns, mockList } from './config.data';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { deleteConvertApi } from '/@/api/datamanager/dataManagerApi';
+  import { Popconfirm } from 'ant-design-vue';
+  import { Authority } from '/@/components/Authority';
+
+  const [registerTable, { setProps, reload }] = useTable({
+    title: '上下线记录',
+    dataSource: mockList,
+    // api: getExceptionPage,
+    columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      fieldMapToTime: [['queryTime', ['startTime', 'endTime'], 'x']],
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+  const handleSuccess = () => {
+    reload();
+    resetSelectedRowKeys();
+  };
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+    useBatchDelete(deleteConvertApi, handleSuccess, setProps);
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  // 弹框
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const handleViewDetail = (record) => {
+    openDrawer(true, {
+      isUpdate: true,
+      record,
+    });
+  };
+</script>