refactor: vxe

yudao-ui-admin-vue3/src/api/infra/apiAccessLog/index.ts

@@ -1,5 +1,20 @@
 import request from '@/config/axios'
 
+export interface ApiAccessLogVO {
+  id: number
+  traceId: string
+  userId: string
+  userType: string
+  applicationName: string
+  requestMethod: string
+  requestParams: string
+  requestUrl: string
+  beginTime: string
+  endTIme: string
+  duration: string
+  resultCode: number
+}
+
 // 查询列表API 访问日志
 export const getApiAccessLogPageApi = (params) => {
   return request.get({ url: '/infra/api-access-log/page', params })

yudao-ui-admin-vue3/src/api/infra/apiAccessLog/types.ts

@@ -1,14 +0,0 @@
-export type ApiAccessLogVO = {
-  id: number
-  traceId: string
-  userId: string
-  userType: string
-  applicationName: string
-  requestMethod: string
-  requestParams: string
-  requestUrl: string
-  beginTime: string
-  endTIme: string
-  duration: string
-  resultCode: number
-}

yudao-ui-admin-vue3/src/api/infra/apiErrorLog/index.ts

@@ -1,5 +1,23 @@
 import request from '@/config/axios'
 
+export interface ApiErrorLogVO {
+  id: number
+  userId: string
+  userIp: string
+  userAgent: string
+  userType: string
+  applicationName: string
+  requestMethod: string
+  requestParams: string
+  requestUrl: string
+  exceptionTime: string
+  exceptionName: string
+  exceptionStackTrace: string
+  processUserId: string
+  processStatus: number
+  resultCode: number
+}
+
 // 查询列表API 访问日志
 export const getApiErrorLogPageApi = (params) => {
   return request.get({ url: '/infra/api-error-log/page', params })

yudao-ui-admin-vue3/src/api/infra/apiErrorLog/types.ts

@@ -1,17 +0,0 @@
-export type ApiErrorLogVO = {
-  id: number
-  userId: string
-  userIp: string
-  userAgent: string
-  userType: string
-  applicationName: string
-  requestMethod: string
-  requestParams: string
-  requestUrl: string
-  exceptionTime: string
-  exceptionName: string
-  exceptionStackTrace: string
-  processUserId: string
-  processStatus: number
-  resultCode: number
-}

yudao-ui-admin-vue3/src/plugins/vxeTable/renderer/dataTimePicker.tsx

@@ -13,6 +13,7 @@ VXETable.renderer.add('XDataTimePicker', {
       <ElDatePicker
         v-model={data[field]}
         type={content ? (content as any) : 'datetimerange'}
+        style="maxWidth: 330px"
         value-format="YYYY-MM-DD HH:mm:ss"
         range-separator="-"
         start-placeholder={t('common.startTimeText')}

yudao-ui-admin-vue3/src/views/infra/apiAccessLog/apiAccessLog.data.ts

@@ -1,88 +1,74 @@
 import { reactive } from 'vue'
-import { useI18n } from '@/hooks/web/useI18n'
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
 import { DICT_TYPE } from '@/utils/dict'
-const { t } = useI18n() // 国际化
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
 
 // CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
-  {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index'
-  },
-  {
-    label: '链路追踪',
-    field: 'traceId'
-  },
-  {
-    label: '用户编号',
-    field: 'userId',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '用户类型',
-    field: 'userType',
-    dictType: DICT_TYPE.USER_TYPE,
-    dictClass: 'number',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '应用名',
-    field: 'applicationName',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '请求方法名',
-    field: 'requestMethod'
-  },
-  {
-    label: '请求地址',
-    field: 'requestUrl',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '请求时间',
-    field: 'beginTime',
-    search: {
-      show: true,
-      component: 'DatePicker',
-      componentProps: {
-        type: 'datetimerange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'seq',
+  action: true,
+  actionWidth: '80px',
+  columns: [
+    {
+      title: '链路追踪',
+      field: 'traceId'
+    },
+    {
+      title: '用户编号',
+      field: 'userId',
+      isSearch: true
+    },
+    {
+      title: '用户类型',
+      field: 'userType',
+      dictType: DICT_TYPE.USER_TYPE,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: '应用名',
+      field: 'applicationName',
+      isSearch: true
+    },
+    {
+      title: '请求方法名',
+      field: 'requestMethod'
+    },
+    {
+      title: '请求地址',
+      field: 'requestUrl',
+      isSearch: true
+    },
+    {
+      title: '请求时间',
+      field: 'beginTime',
+      formatter: 'formatDate',
+      search: {
+        show: true,
+        itemRender: {
+          name: 'XDataTimePicker'
+        }
       }
-    }
-  },
-  {
-    label: '执行时长',
-    field: 'duration'
-  },
-  {
-    label: '操作结果',
-    field: 'resultCode',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '300px',
-    form: {
-      show: false
     },
-    detail: {
-      show: false
+    {
+      title: '执行时长',
+      field: 'duration',
+      table: {
+        slots: {
+          default: 'duration_default'
+        }
+      }
+    },
+    {
+      title: '操作结果',
+      field: 'resultCode',
+      isSearch: true,
+      table: {
+        slots: {
+          default: 'resultCode_default'
+        }
+      }
     }
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

yudao-ui-admin-vue3/src/views/infra/apiAccessLog/index.vue

@@ -1,80 +1,24 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import dayjs from 'dayjs'
-import { DICT_TYPE } from '@/utils/dict'
-import { useTable } from '@/hooks/web/useTable'
-import { useI18n } from '@/hooks/web/useI18n'
-import type { ApiAccessLogVO } from '@/api/infra/apiAccessLog/types'
-import { allSchemas } from './apiAccessLog.data'
-import * as ApiAccessLogApi from '@/api/infra/apiAccessLog'
-const { t } = useI18n() // 国际化
-
-// ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<ApiAccessLogVO>({
-  getListApi: ApiAccessLogApi.getApiAccessLogPageApi
-})
-const { getList, setSearchParams } = methods
-
-// ========== 详情相关 ==========
-const detailRef = ref() // 详情 Ref
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('') // 弹出层标题
-
-// 详情操作
-const handleDetail = (row: ApiAccessLogVO) => {
-  // 设置数据
-  detailRef.value = row
-  dialogTitle.value = t('action.detail')
-  dialogVisible.value = true
-}
-// ========== 初始化 ==========
-getList()
-</script>
-
 <template>
-  <!-- 搜索工作区 -->
-  <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
   <ContentWrap>
     <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #userType="{ row }">
-        <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
-      </template>
-      <template #beginTime="{ row }">
-        <span>{{ dayjs(row.beginTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #duration="{ row }">
+    <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
+      <template #duration_default="{ row }">
         <span>{{ row.duration + 'ms' }}</span>
       </template>
-      <template #resultCode="{ row }">
+      <template #resultCode_default="{ row }">
         <span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
       </template>
-      <template #action="{ row }">
-        <el-button
-          link
-          type="primary"
+      <template #actionbtns_default="{ row }">
+        <!-- 操作：详情 -->
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.detail')"
           v-hasPermi="['infra:api-access-log:query']"
           @click="handleDetail(row)"
-        >
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
+        />
       </template>
-    </Table>
+    </vxe-grid>
   </ContentWrap>
-
   <XModal v-model="dialogVisible" :title="dialogTitle">
     <!-- 对话框(详情) -->
     <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
@@ -91,3 +35,33 @@ getList()
     </template>
   </XModal>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useVxeGrid } from '@/hooks/web/useVxeGrid'
+import { VxeGridInstance } from 'vxe-table'
+import { allSchemas } from './apiAccessLog.data'
+import * as ApiAccessLogApi from '@/api/infra/apiAccessLog'
+const { t } = useI18n() // 国际化
+
+// 列表相关的变量
+const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
+const { gridOptions } = useVxeGrid<ApiAccessLogApi.ApiAccessLogVO>({
+  allSchemas: allSchemas,
+  topActionSlots: false,
+  getListApi: ApiAccessLogApi.getApiAccessLogPageApi
+})
+// ========== 详情相关 ==========
+const detailRef = ref() // 详情 Ref
+const dialogVisible = ref(false) // 是否显示弹出层
+const dialogTitle = ref('') // 弹出层标题
+
+// 详情操作
+const handleDetail = (row: ApiAccessLogApi.ApiAccessLogVO) => {
+  // 设置数据
+  detailRef.value = row
+  dialogTitle.value = t('action.detail')
+  dialogVisible.value = true
+}
+</script>

yudao-ui-admin-vue3/src/views/infra/apiErrorLog/apiErrorLog.data.ts

@@ -1,97 +1,77 @@
 import { reactive } from 'vue'
-import { useI18n } from '@/hooks/web/useI18n'
-import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
 import { DICT_TYPE } from '@/utils/dict'
-const { t } = useI18n() // 国际化
+import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
 
 // CrudSchema
-const crudSchemas = reactive<CrudSchema[]>([
-  {
-    label: t('common.index'),
-    field: 'id',
-    type: 'index'
-  },
-  {
-    label: '链路追踪',
-    field: 'traceId'
-  },
-  {
-    label: '用户编号',
-    field: 'userId',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '用户类型',
-    field: 'userType',
-    dictType: DICT_TYPE.USER_TYPE,
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '应用名',
-    field: 'applicationName',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '请求方法名',
-    field: 'requestMethod'
-  },
-  {
-    label: '请求地址',
-    field: 'requestUrl',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '异常发生时间',
-    field: 'exceptionTime',
-    search: {
-      show: true,
-      component: 'DatePicker',
-      componentProps: {
-        type: 'datetimerange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id',
+  primaryType: 'seq',
+  action: true,
+  actionWidth: '300',
+  columns: [
+    {
+      title: '链路追踪',
+      field: 'traceId',
+      isTable: false
+    },
+    {
+      title: '用户编号',
+      field: 'userId',
+      isSearch: true
+    },
+    {
+      title: '用户类型',
+      field: 'userType',
+      dictType: DICT_TYPE.USER_TYPE,
+      isSearch: true
+    },
+    {
+      title: '应用名',
+      field: 'applicationName',
+      isSearch: true
+    },
+    {
+      title: '请求方法名',
+      field: 'requestMethod'
+    },
+    {
+      title: '请求地址',
+      field: 'requestUrl',
+      isSearch: true
+    },
+    {
+      title: '异常发生时间',
+      field: 'exceptionTime',
+      formatter: 'formatDate',
+      search: {
+        show: true,
+        itemRender: {
+          name: 'XDataTimePicker'
+        }
       }
-    }
-  },
-  {
-    label: '异常名',
-    field: 'exceptionName'
-  },
-  {
-    label: '处理状态',
-    field: 'processStatus',
-    dictType: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
-    dictClass: 'number',
-    search: {
-      show: true
-    }
-  },
-  {
-    label: '处理人',
-    field: 'processUserId'
-  },
-  {
-    label: '处理时间',
-    field: 'processTime'
-  },
-  {
-    label: t('table.action'),
-    field: 'action',
-    width: '300px',
-    form: {
-      show: false
     },
-    detail: {
-      show: false
+    {
+      title: '异常名',
+      field: 'exceptionName'
+    },
+    {
+      title: '处理状态',
+      field: 'processStatus',
+      dictType: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
+      dictClass: 'number',
+      isSearch: true
+    },
+    {
+      title: '处理人',
+      field: 'processUserId',
+      isTable: false
+    },
+    {
+      title: '处理时间',
+      field: 'processTime',
+      formatter: 'formatDate',
+      isTable: false
     }
-  }
-])
-export const { allSchemas } = useCrudSchemas(crudSchemas)
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

yudao-ui-admin-vue3/src/views/infra/apiErrorLog/index.vue

@@ -1,10 +1,61 @@
+<template>
+  <ContentWrap>
+    <!-- 列表 -->
+    <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
+      <!-- 操作：导出 -->
+      <template #toolbar_buttons>
+        <XButton
+          type="warning"
+          preIcon="ep:download"
+          :title="t('action.export')"
+          @click="handleExport()"
+        />
+      </template>
+      <template #duration_default="{ row }">
+        <span>{{ row.duration + 'ms' }}</span>
+      </template>
+      <template #resultCode_default="{ row }">
+        <span>{{ row.resultCode === 0 ? '成功' : '失败(' + row.resultMsg + ')' }}</span>
+      </template>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作：详情 -->
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.detail')"
+          v-hasPermi="['infra:api-access-log:query']"
+          @click="handleDetail(row)"
+        />
+        <XTextButton
+          preIcon="ep:cpu"
+          title="已处理"
+          v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
+          v-hasPermi="['infra:api-error-log:update-status']"
+          @click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.DONE, '已处理')"
+        />
+        <XTextButton
+          preIcon="ep:mute-notification"
+          title="已忽略"
+          v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
+          v-hasPermi="['infra:api-error-log:update-status']"
+          @click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略')"
+        />
+      </template>
+    </vxe-grid>
+  </ContentWrap>
+  <XModal v-model="dialogVisible" :title="dialogTitle">
+    <!-- 对话框(详情) -->
+    <Descriptions :schema="allSchemas.detailSchema" :data="detailRef" />
+    <!-- 操作按钮 -->
+    <template #footer>
+      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
+    </template>
+  </XModal>
+</template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import dayjs from 'dayjs'
-import { DICT_TYPE } from '@/utils/dict'
-import { useTable } from '@/hooks/web/useTable'
 import { useI18n } from '@/hooks/web/useI18n'
-import type { ApiErrorLogVO } from '@/api/infra/apiErrorLog/types'
+import { useVxeGrid } from '@/hooks/web/useVxeGrid'
+import { VxeGridInstance } from 'vxe-table'
 import { allSchemas } from './apiErrorLog.data'
 import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
 import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
@@ -13,113 +64,45 @@ const message = useMessage()
 const { t } = useI18n() // 国际化
 
 // ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<ApiErrorLogVO>({
+const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
+const { gridOptions, getList, exportList } = useVxeGrid<ApiErrorLogApi.ApiErrorLogVO>({
+  allSchemas: allSchemas,
   getListApi: ApiErrorLogApi.getApiErrorLogPageApi,
   exportListApi: ApiErrorLogApi.exportApiErrorLogApi
 })
-const { getList, setSearchParams, exportList } = methods
-
 // ========== 详情相关 ==========
 const detailRef = ref() // 详情 Ref
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('') // 弹出层标题
 
 // 详情操作
-const handleDetail = (row: ApiErrorLogVO) => {
+const handleDetail = (row: ApiErrorLogApi.ApiErrorLogVO) => {
   // 设置数据
   detailRef.value = row
   dialogTitle.value = t('action.detail')
   dialogVisible.value = true
 }
+// 导出
+const handleExport = async () => {
+  await exportList(xGrid, '错误数据.xls')
+}
 // 异常处理操作
-const handleProcessClick = (row: ApiErrorLogVO, processSttatus: number, type: string) => {
+const handleProcessClick = (
+  row: ApiErrorLogApi.ApiErrorLogVO,
+  processSttatus: number,
+  type: string
+) => {
   message
     .confirm('确认标记为' + type + '?', t('common.reminder'))
     .then(async () => {
       ApiErrorLogApi.updateApiErrorLogPageApi(row.id, processSttatus).then(() => {
         message.success(t('common.updateSuccess'))
-        getList()
       })
     })
+    .finally(async () => {
+      // 刷新列表
+      await getList(xGrid)
+    })
     .catch(() => {})
 }
-// ========== 初始化 ==========
-getList()
 </script>
-
-<template>
-  <!-- 搜索工作区 -->
-  <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <el-button v-hasPermi="['infra:api-error-log:export']" @click="exportList('错误数据.xls')">
-      <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
-    </el-button>
-    <!-- 列表 -->
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #userType="{ row }">
-        <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
-      </template>
-      <template #processStatus="{ row }">
-        <DictTag :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS" :value="row.processStatus" />
-      </template>
-      <template #exceptionTime="{ row }">
-        <span>{{ dayjs(row.exceptionTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #processTime="{ row }">
-        <span v-if="row.processTime">{{
-          dayjs(row.processTime).format('YYYY-MM-DD HH:mm:ss')
-        }}</span>
-      </template>
-      <template #action="{ row }">
-        <el-button
-          link
-          type="primary"
-          v-hasPermi="['infra:api-error-log:export']"
-          @click="handleDetail(row)"
-        >
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
-          v-hasPermi="['infra:api-error-log:update-status']"
-          @click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.DONE, '已处理')"
-        >
-          <Icon icon="ep:cpu" class="mr-1px" /> 已处理
-        </el-button>
-        <el-button
-          link
-          type="primary"
-          v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
-          v-hasPermi="['infra:api-error-log:update-status']"
-          @click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略')"
-        >
-          <Icon icon="ep:mute-notification" class="mr-1px" /> 已忽略
-        </el-button>
-      </template>
-    </Table>
-  </ContentWrap>
-
-  <XModal v-model="dialogVisible" :title="dialogTitle">
-    <!-- 对话框(详情) -->
-    <Descriptions :schema="allSchemas.detailSchema" :data="detailRef" />
-    <!-- 操作按钮 -->
-    <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
-    </template>
-  </XModal>
-</template>

yudao-ui-admin-vue3/src/views/system/errorCode/errorCode.data.ts

@@ -45,8 +45,8 @@ const crudSchemas = reactive<VxeCrudSchema>({
       field: 'createTime',
       formatter: 'formatDate',
       isForm: false,
-      isSearch: true,
       search: {
+        show: true,
         itemRender: {
           name: 'XDataTimePicker'
         }