Merge branch 'f-dev' into 'main'

feat：PC新增日志管理

See merge request huang/yun-teng-iot-front!227

+import { defHttp } from '/@/utils/http/axios';
+import { LogQueryParam } from './model/logModel';
+
+enum LogManagerApi {
+  LOG_DETAIL_URL = '/log',
+  LOG_EXCEPTION_URL = '/log/exception',
+  LOG_OPERATE_URL = '/log/operate',
+  LOG_USER_URL = '/log/user',
+}
+
+export const getExceptionPage = (params: LogQueryParam) => {
+  return defHttp.get<LogQueryParam>({
+    url: LogManagerApi.LOG_EXCEPTION_URL,
+    params,
+  });
+};
+
+export const getOperatePage = (params: LogQueryParam) => {
+  return defHttp.get<LogQueryParam>({
+    url: LogManagerApi.LOG_OPERATE_URL,
+    params,
+  });
+};
+
+export const getUserPage = (params: LogQueryParam) => {
+  return defHttp.get<LogQueryParam>({
+    url: LogManagerApi.LOG_USER_URL,
+    params,
+  });
+};
+
+// 异常详情
+export const getLogManageDetail = (id: string) => {
+  return defHttp.get({
+    url: LogManagerApi.LOG_DETAIL_URL + `/${id}`,
+  });
+};

+import { BasicPageParams } from '/@/api/model/baseModel';
+export type LogQueryParam = BasicPageParams & LoginParam;
+
+export type LoginParam = {
+  actionType?: string;
+  startTime?: string;
+  endTime?: string;
+};

@@ -150,7 +150,7 @@
 
       const getIsFixed = computed(() => {
         /* eslint-disable-next-line */
-        mixSideHasChildren.value = unref(childrenMenus).length > 0;
+        mixSideHasChildren.value = unref(childrenMenus).length > 0;interfaceDisplay
         const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
         if (isFixed) {
           /* eslint-disable-next-line */

@@ -14,7 +14,7 @@
       >
         <template #toolbar>
           <Authority value="api:yt:admin:addConfiguration">
-            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态中心 </a-button>
+            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>
           </Authority>
           <Authority value="api:yt:admin:deleteConfiguration">
             <a-button

+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="异常日志详情" width="40%">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { getLogManageDetail } from '/@/api/log/logManager';
+  import moment from 'moment';
+
+  export default defineComponent({
+    name: 'ContactDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_) {
+      const [registerForm, { setFieldsValue, resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        const res = await getLogManageDetail(data.record.id);
+        const actionData = JSON.stringify(res.actionData);
+        const createdTime = moment(data.record.createdTime).format('YYYY-MM-DD');
+        await setFieldsValue(res || data.record);
+        await setFieldsValue({ actionData });
+        await setFieldsValue({ createdTime });
+      });
+      return {
+        registerDrawer,
+        registerForm,
+      };
+    },
+  });
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import moment from 'moment';
+
+// 表格数据
+export const columns: BasicColumn[] = [
+  {
+    title: '租户名称',
+    dataIndex: 'tenantName',
+    width: 120,
+  },
+  {
+    title: '客户名称',
+    dataIndex: 'customerName',
+    width: 120,
+  },
+  {
+    title: '资源类型',
+    dataIndex: 'entityType',
+    width: 180,
+  },
+  {
+    title: '资源名称',
+    dataIndex: 'entityName',
+    width: 180,
+  },
+  {
+    title: '操作人员',
+    dataIndex: 'userName',
+    width: 180,
+  },
+  {
+    title: '操作类型',
+    dataIndex: 'actionType',
+    width: 180,
+  },
+  {
+    title: '操作状态',
+    dataIndex: 'actionStatus',
+    width: 180,
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'createdTime',
+    width: 80,
+    format: (_, record) => {
+      return moment(record.createdTime).format('YYYY-MM-DD');
+    },
+  },
+];
+
+// 分页查询
+export const searchFormSchema: FormSchema[] = [
+  {
+    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: 'createdTime',
+    label: '操作时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'tenantName',
+    label: '租户名称',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'customerName',
+    label: '客户名称',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'entityType',
+    label: '资源类型',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'entityName',
+    label: '资源名称',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'userName',
+    label: '操作人员',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'actionType',
+    label: '操作类型',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'actionStatus',
+    label: '操作状态',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'actionData',
+    label: '操作数据',
+    component: 'InputTextArea',
+    componentProps: {
+      disabled: true,
+      autosize: true,
+      allowClear: false,
+    },
+  },
+  {
+    field: 'actionFailureDetails',
+    label: '失败信息',
+    component: 'InputTextArea',
+    componentProps: {
+      disabled: true,
+      autosize: true,
+      allowClear: false,
+    },
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
+      <template #toolbar> </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              auth: 'api:yt:admin:viewFeedBack',
+              icon: 'clarity:note-edit-line',
+              onClick: handleViewDetail.bind(null, record),
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <ExceptionDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import ExceptionDrawer from './ExceptionDrawer.vue';
+  import { getExceptionPage } from '/@/api/log/logManager';
+  import { searchFormSchema, columns } from './config.data';
+  import { useModal } from '/@/components/Modal';
+
+  export default defineComponent({
+    components: {
+      BasicTable,
+      TableAction,
+      ExceptionDrawer,
+    },
+    setup() {
+      const [registerModal] = useModal();
+      const [registerTable, { reload }] = useTable({
+        title: '异常日志列表',
+        api: getExceptionPage,
+        columns,
+        showIndexColumn: false,
+        clickToRowSelect: false,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          fieldMapToTime: [['queryTime', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        rowKey: 'id',
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      // 弹框
+      const [registerDrawer, { openDrawer }] = useDrawer();
+
+      // 刷新
+      const handleSuccess = () => {
+        reload();
+      };
+
+      const handleViewDetail = (record) => {
+        openDrawer(true, {
+          isUpdate: true,
+          record,
+        });
+      };
+      return {
+        handleSuccess,
+        registerTable,
+        registerDrawer,
+        handleViewDetail,
+        registerModal,
+      };
+    },
+  });
+</script>

+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="操作日志详情" width="40%">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { getLogManageDetail } from '/@/api/log/logManager';
+  import moment from 'moment';
+
+  export default defineComponent({
+    name: 'ContactDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_) {
+      const [registerForm, { setFieldsValue, resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        const res = await getLogManageDetail(data.record.id);
+        const createdTime = moment(data.record.createdTime).format('YYYY-MM-DD');
+        const actionData = JSON.stringify(res.actionData);
+        await setFieldsValue(res || data.record);
+        await setFieldsValue({ actionData });
+        await setFieldsValue({ createdTime });
+      });
+      return {
+        registerDrawer,
+        registerForm,
+      };
+    },
+  });
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import moment from 'moment';
+
+// 表格数据
+export const columns: BasicColumn[] = [
+  {
+    title: '租户名称',
+    dataIndex: 'tenantName',
+    width: 120,
+  },
+  {
+    title: '客户名称',
+    dataIndex: 'customerName',
+    width: 120,
+  },
+  {
+    title: '资源类型',
+    dataIndex: 'entityType',
+    width: 180,
+  },
+  {
+    title: '资源名称',
+    dataIndex: 'entityName',
+    width: 180,
+  },
+  {
+    title: '操作人员',
+    dataIndex: 'userName',
+    width: 180,
+  },
+  {
+    title: '操作类型',
+    dataIndex: 'actionType',
+    width: 180,
+  },
+  {
+    title: '操作状态',
+    dataIndex: 'actionStatus',
+    width: 180,
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'createdTime',
+    width: 80,
+    format: (_, record) => {
+      return moment(record.createdTime).format('YYYY-MM-DD');
+    },
+  },
+];
+
+// 分页查询
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'entityType',
+    label: '资源类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'DEVICE', value: 'DEVICE' },
+        { label: 'DEVICE_PROFILE', value: 'DEVICE_PROFILE' },
+        { label: 'RPC', value: 'RPC' },
+        { label: 'TENANT', value: 'TENANT' },
+        { label: 'TENANT_PROFILE', value: 'TENANT_PROFILE' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'actionType',
+    label: '操作类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'ALL', value: '' },
+        { label: 'ADDED', value: 'ADDED' },
+        { label: 'DELETED', value: 'DELETED' },
+        { label: 'RPC_CALL', value: 'RPC_CALL' },
+        { label: 'UPDATED', value: 'UPDATED' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    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: 'createdTime',
+    label: '操作时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'tenantName',
+    label: '租户名称',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'customerName',
+    label: '客户名称',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'entityType',
+    label: '资源类型',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'entityName',
+    label: '资源名称',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'userName',
+    label: '操作人员',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'actionType',
+    label: '操作类型',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'actionStatus',
+    label: '操作状态',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'actionData',
+    label: '操作数据',
+    component: 'InputTextArea',
+    componentProps: {
+      disabled: true,
+      autosize: true,
+      allowClear: false,
+    },
+  },
+  {
+    field: 'actionFailureDetails',
+    label: '失败信息',
+    component: 'InputTextArea',
+    componentProps: {
+      disabled: true,
+      autosize: true,
+      allowClear: false,
+    },
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
+      <template #toolbar> </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              auth: 'api:yt:admin:viewFeedBack',
+              icon: 'clarity:note-edit-line',
+              onClick: handleViewDetail.bind(null, record),
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <OperateDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import OperateDrawer from './OperateDrawer.vue';
+  import { getOperatePage } from '/@/api/log/logManager';
+  import { searchFormSchema, columns } from './config.data';
+  import { useModal } from '/@/components/Modal';
+
+  export default defineComponent({
+    components: {
+      BasicTable,
+      TableAction,
+      OperateDrawer,
+    },
+    setup() {
+      const [registerModal] = useModal();
+      const [registerTable, { reload }] = useTable({
+        title: '操作日志列表',
+        api: getOperatePage,
+        columns,
+        showIndexColumn: false,
+        clickToRowSelect: false,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          fieldMapToTime: [['queryTime', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        rowKey: 'id',
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      // 弹框
+      const [registerDrawer, { openDrawer }] = useDrawer();
+
+      // 刷新
+      const handleSuccess = () => {
+        reload();
+      };
+
+      const handleViewDetail = (record) => {
+        openDrawer(true, {
+          isUpdate: true,
+          record,
+        });
+      };
+      return {
+        handleSuccess,
+        registerTable,
+        registerDrawer,
+        handleViewDetail,
+        registerModal,
+      };
+    },
+  });
+</script>

+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="登陆登出日志详情" width="40%">
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { getLogManageDetail } from '/@/api/log/logManager';
+  import moment from 'moment';
+
+  export default defineComponent({
+    name: 'ContactDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_) {
+      const [registerForm, { setFieldsValue, resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        const res = await getLogManageDetail(data.record.id);
+        const createdTime = moment(data.record.createdTime).format('YYYY-MM-DD');
+        const actionData = JSON.stringify(res.actionData);
+        await setFieldsValue(res || data.record);
+        await setFieldsValue({ actionData });
+        await setFieldsValue({ createdTime });
+      });
+      return {
+        registerDrawer,
+        registerForm,
+      };
+    },
+  });
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import moment from 'moment';
+
+// 表格数据
+export const columns: BasicColumn[] = [
+  {
+    title: '租户名称',
+    dataIndex: 'tenantName',
+    width: 120,
+  },
+  {
+    title: '客户名称',
+    dataIndex: 'customerName',
+    width: 120,
+  },
+  {
+    title: '资源类型',
+    dataIndex: 'entityType',
+    width: 180,
+  },
+  {
+    title: '资源名称',
+    dataIndex: 'entityName',
+    width: 180,
+  },
+  {
+    title: '操作人员',
+    dataIndex: 'userName',
+    width: 180,
+  },
+  {
+    title: '操作类型',
+    dataIndex: 'actionType',
+    width: 180,
+  },
+  {
+    title: '操作状态',
+    dataIndex: 'actionStatus',
+    width: 180,
+  },
+  {
+    title: '操作时间',
+    dataIndex: 'createdTime',
+    width: 80,
+    format: (_, record) => {
+      return moment(record.createdTime).format('YYYY-MM-DD');
+    },
+  },
+];
+
+// 分页查询
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'actionType',
+    label: '操作类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'LOGIN', value: 'LOGIN' },
+        { label: 'LOGOUT', value: 'LOGOUT' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+  {
+    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: 'createdTime',
+    label: '操作时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'tenantName',
+    label: '租户名称',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'customerName',
+    label: '客户名称',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'entityType',
+    label: '资源类型',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'entityName',
+    label: '资源名称',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'userName',
+    label: '操作人员',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'actionType',
+    label: '操作类型',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'actionStatus',
+    label: '操作状态',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'actionData',
+    label: '操作数据',
+    component: 'InputTextArea',
+    componentProps: {
+      disabled: true,
+      autosize: true,
+      allowClear: false,
+    },
+  },
+  {
+    field: 'actionFailureDetails',
+    label: '失败信息',
+    component: 'InputTextArea',
+    componentProps: {
+      disabled: true,
+      autosize: true,
+      allowClear: false,
+    },
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable">
+      <template #toolbar> </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              auth: 'api:yt:admin:viewFeedBack',
+              icon: 'clarity:note-edit-line',
+              onClick: handleViewDetail.bind(null, record),
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import UserDrawer from './UserDrawer.vue';
+  import { getUserPage } from '/@/api/log/logManager';
+  import { searchFormSchema, columns } from './config.data';
+  import { useModal } from '/@/components/Modal';
+
+  export default defineComponent({
+    components: {
+      BasicTable,
+      TableAction,
+      UserDrawer,
+    },
+    setup() {
+      const [registerModal] = useModal();
+      const [registerTable, { reload }] = useTable({
+        title: '登录登出日志列表',
+        api: getUserPage,
+        columns,
+        showIndexColumn: false,
+        clickToRowSelect: false,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          fieldMapToTime: [['queryTime', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        rowKey: 'id',
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      // 弹框
+      const [registerDrawer, { openDrawer }] = useDrawer();
+
+      // 刷新
+      const handleSuccess = () => {
+        reload();
+      };
+
+      const handleViewDetail = (record) => {
+        openDrawer(true, {
+          isUpdate: true,
+          record,
+        });
+      };
+      return {
+        handleSuccess,
+        registerTable,
+        registerDrawer,
+        handleViewDetail,
+        registerModal,
+      };
+    },
+  });
+</script>