优化admin导入组件为异步导入

src/views/admin/api/index.vue

@@ -47,14 +47,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, defineAsyncComponent } from 'vue'
 import { ApiListOutput } from '/@/api/admin/data-contracts'
 import { Api as ApiApi } from '/@/api/admin/Api'
 import { listToTree } from '/@/utils/tree'
-import ApiForm from './components/api-form.vue'
 import { cloneDeep } from 'lodash-es'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const ApiForm = defineAsyncComponent(() => import('./components/api-form.vue'))
+
 const { proxy } = getCurrentInstance() as any
 
 const apiFormRef = ref()

src/views/admin/dictionary/dictionary-type.vue

@@ -55,12 +55,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, nextTick } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, nextTick, defineAsyncComponent } from 'vue'
 import { DictionaryTypeListOutput, PageInputDictionaryTypeGetPageDto } from '/@/api/admin/data-contracts'
 import { DictionaryType as DictionaryTypeApi } from '/@/api/admin/DictionaryType'
-import DictionaryTypeForm from './components/dictionary-type-form.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const DictionaryTypeForm = defineAsyncComponent(() => import('./components/dictionary-type-form.vue'))
+
 const { proxy } = getCurrentInstance() as any
 
 const tableRef = ref()

src/views/admin/dictionary/dictionary.vue

@@ -48,12 +48,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, defineAsyncComponent } from 'vue'
 import { DictionaryListOutput, PageInputDictionaryGetPageDto, DictionaryTypeListOutput } from '/@/api/admin/data-contracts'
 import { Dictionary as DictionaryApi } from '/@/api/admin/Dictionary'
-import DictionaryForm from './components/dictionary-form.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const DictionaryForm = defineAsyncComponent(() => import('./components/dictionary-form.vue'))
+
 const { proxy } = getCurrentInstance() as any
 
 const dictionaryFormRef = ref()

src/views/admin/dictionary/index.vue

@@ -12,8 +12,11 @@
 </template>
 
 <script lang="ts" setup>
-import DictionaryType from './dictionary-type.vue'
-import Dictionary from './dictionary.vue'
+import { defineAsyncComponent } from 'vue'
+
+// 引入组件
+const DictionaryType = defineAsyncComponent(() => import('./dictionary-type.vue'))
+const Dictionary = defineAsyncComponent(() => import('./dictionary.vue'))
 </script>
 
 <script lang="ts">

src/views/admin/logs/login-log.vue

@@ -0,0 +1,105 @@
+<template>
+  <div style="padding: 0px 0px 8px 8px">
+    <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+      <el-form :model="state.filterModel" :inline="true">
+        <el-form-item prop="name">
+          <el-input v-model="state.filterModel.createdUserName" placeholder="登录账户" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card shadow="never" style="margin-top: 8px">
+      <el-table v-loading="state.loading" :data="state.loginLogListData" row-key="id" style="width: 100%">
+        <el-table-column prop="createdUserName" label="操作账号" width="100">
+          <template #default="{ row }"> {{ row.createdUserName }}<br />{{ row.nickName }} </template>
+        </el-table-column>
+        <el-table-column prop="ip" label="IP地址" width="130" />
+        <el-table-column prop="browser" label="浏览器" width="100" />
+        <el-table-column prop="os" label="操作系统" width="100" />
+        <el-table-column prop="elapsedMilliseconds" label="耗时(毫秒)" width="100" />
+        <el-table-column prop="status" label="登录状态" width="80">
+          <template #default="{ row }">
+            <el-tag :type="row.status ? 'success' : 'danger'" disable-transitions>{{ row.status ? '成功' : '失败' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdTime" label="登录时间" :formatter="formatterTime" width="160" />
+        <el-table-column prop="msg" label="登录消息" width="" />
+      </el-table>
+      <div class="my-flex my-flex-end" style="margin-top: 20px">
+        <el-pagination
+          v-model:currentPage="state.pageInput.currentPage"
+          v-model:page-size="state.pageInput.pageSize"
+          :total="state.total"
+          :page-sizes="[10, 20, 50, 100]"
+          small
+          background
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, onMounted } from 'vue'
+import { LoginLogListOutput, PageInputLogGetPageDto } from '/@/api/admin/data-contracts'
+import { LoginLog as LoginLogApi } from '/@/api/admin/LoginLog'
+import dayjs from 'dayjs'
+
+const state = reactive({
+  loading: false,
+  loginLogFormTitle: '',
+  filterModel: {
+    createdUserName: '',
+  },
+  total: 0,
+  pageInput: {
+    currentPage: 1,
+    pageSize: 20,
+  } as PageInputLogGetPageDto,
+  loginLogListData: [] as Array<LoginLogListOutput>,
+  loginLogLogsTitle: '',
+})
+
+onMounted(() => {
+  onQuery()
+})
+
+const formatterTime = (row: any, column: any, cellValue: any) => {
+  return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
+}
+
+const onQuery = async () => {
+  state.loading = true
+  const res = await new LoginLogApi().getPage(state.pageInput)
+
+  state.loginLogListData = res?.data?.list ?? []
+  state.total = res.data?.total ?? 0
+  state.loading = false
+}
+
+const onSizeChange = (val: number) => {
+  state.pageInput.pageSize = val
+  onQuery()
+}
+
+const onCurrentChange = (val: number) => {
+  state.pageInput.currentPage = val
+  onQuery()
+}
+</script>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'admin/loginLog',
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/admin/logs/opration-log.vue

@@ -0,0 +1,110 @@
+<template>
+  <div style="padding: 0px 0px 8px 8px">
+    <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
+      <el-form :model="state.filterModel" :inline="true">
+        <el-form-item prop="name">
+          <el-input v-model="state.filterModel.createdUserName" placeholder="操作账号" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card shadow="never" style="margin-top: 8px">
+      <el-table v-loading="state.loading" :data="state.oprationLogListData" row-key="id" style="width: 100%">
+        <el-table-column prop="createdUserName" label="操作账号" width="100">
+          <template #default="{ row }"> {{ row.createdUserName }}<br />{{ row.nickName }} </template>
+        </el-table-column>
+        <el-table-column prop="ip" label="IP地址" width="130" />
+        <el-table-column prop="apiLabel" label="操作名称" width />
+        <el-table-column prop="apiPath" label="操作接口" width />
+        <el-table-column prop="elapsedMilliseconds" label="耗时(毫秒)" width="100" />
+        <el-table-column prop="status" label="操作状态" width="80">
+          <template #default="{ row }">
+            <el-tag :type="row.status ? 'success' : 'danger'" disable-transitions>{{ row.status ? '成功' : '失败' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="登录状态" width="80">
+          <template #default="{ row }">
+            <el-tag :type="row.status ? 'success' : 'danger'" disable-transitions>{{ row.status ? '成功' : '失败' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createdTime" label="登录时间" :formatter="formatterTime" width="160" />
+        <el-table-column prop="msg" label="登录消息" width="" />
+      </el-table>
+      <div class="my-flex my-flex-end" style="margin-top: 20px">
+        <el-pagination
+          v-model:currentPage="state.pageInput.currentPage"
+          v-model:page-size="state.pageInput.pageSize"
+          :total="state.total"
+          :page-sizes="[10, 20, 50, 100]"
+          small
+          background
+          @size-change="onSizeChange"
+          @current-change="onCurrentChange"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, onMounted } from 'vue'
+import { OprationLogListOutput, PageInputLogGetPageDto } from '/@/api/admin/data-contracts'
+import { OprationLog as OprationLogApi } from '/@/api/admin/OprationLog'
+import dayjs from 'dayjs'
+
+const state = reactive({
+  loading: false,
+  oprationLogFormTitle: '',
+  filterModel: {
+    createdUserName: '',
+  },
+  total: 0,
+  pageInput: {
+    currentPage: 1,
+    pageSize: 20,
+  } as PageInputLogGetPageDto,
+  oprationLogListData: [] as Array<OprationLogListOutput>,
+  oprationLogLogsTitle: '',
+})
+
+onMounted(() => {
+  onQuery()
+})
+
+const formatterTime = (row: any, column: any, cellValue: any) => {
+  return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
+}
+
+const onQuery = async () => {
+  state.loading = true
+  const res = await new OprationLogApi().getPage(state.pageInput)
+
+  state.oprationLogListData = res?.data?.list ?? []
+  state.total = res.data?.total ?? 0
+  state.loading = false
+}
+
+const onSizeChange = (val: number) => {
+  state.pageInput.pageSize = val
+  onQuery()
+}
+
+const onCurrentChange = (val: number) => {
+  state.pageInput.currentPage = val
+  onQuery()
+}
+</script>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'admin/oprationLog',
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/admin/org/index.vue

@@ -49,13 +49,15 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, defineAsyncComponent } from 'vue'
 import { OrgListOutput } from '/@/api/admin/data-contracts'
 import { Org as OrgApi } from '/@/api/admin/Org'
 import { listToTree } from '/@/utils/tree'
-import OrgForm from './components/org-form.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const OrgForm = defineAsyncComponent(() => import('./components/org-form.vue'))
+
 const { proxy } = getCurrentInstance() as any
 
 const orgFormRef = ref()

src/views/admin/permission/components/permission-group-form.vue

@@ -102,14 +102,16 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, toRefs, getCurrentInstance, ref, PropType } from 'vue'
+import { reactive, toRefs, getCurrentInstance, ref, PropType, defineAsyncComponent } from 'vue'
 import { PermissionListOutput, PermissionUpdateGroupInput, ViewListOutput } from '/@/api/admin/data-contracts'
 import { Permission as PermissionApi } from '/@/api/admin/Permission'
 import { View as ViewApi } from '/@/api/admin/View'
 import { listToTree } from '/@/utils/tree'
-import MySelectIcon from '/@/components/my-select-icon/index.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const MySelectIcon = defineAsyncComponent(() => import('/@/components/my-select-icon/index.vue'))
+
 defineProps({
   title: {
     type: String,

src/views/admin/permission/components/permission-menu-form.vue

@@ -123,14 +123,16 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, toRefs, getCurrentInstance, ref, PropType } from 'vue'
+import { reactive, toRefs, getCurrentInstance, ref, PropType, defineAsyncComponent } from 'vue'
 import { PermissionListOutput, PermissionUpdateMenuInput, ViewListOutput } from '/@/api/admin/data-contracts'
 import { Permission as PermissionApi } from '/@/api/admin/Permission'
 import { View as ViewApi } from '/@/api/admin/View'
 import { listToTree } from '/@/utils/tree'
-import MySelectIcon from '/@/components/my-select-icon/index.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const MySelectIcon = defineAsyncComponent(() => import('/@/components/my-select-icon/index.vue'))
+
 defineProps({
   title: {
     type: String,

src/views/admin/permission/index.vue

@@ -94,16 +94,18 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, defineAsyncComponent } from 'vue'
 import { PermissionListOutput } from '/@/api/admin/data-contracts'
 import { Permission as PermissionPermission } from '/@/api/admin/Permission'
 import { listToTree } from '/@/utils/tree'
 import { cloneDeep } from 'lodash-es'
-import PermissionGroupForm from './components/permission-group-form.vue'
-import PermissionMenuForm from './components/permission-menu-form.vue'
-import PermissionDotForm from './components/permission-dot-form.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const PermissionGroupForm = defineAsyncComponent(() => import('./components/permission-group-form.vue'))
+const PermissionMenuForm = defineAsyncComponent(() => import('./components/permission-menu-form.vue'))
+const PermissionDotForm = defineAsyncComponent(() => import('./components/permission-dot-form.vue'))
+
 const { proxy } = getCurrentInstance() as any
 
 const permissionGroupFormRef = ref()

src/views/admin/personal/index.vue

@@ -136,7 +136,7 @@
 </template>
 
 <script setup lang="ts" name="personal">
-import { reactive, computed, onMounted, toRefs, ref, getCurrentInstance } from 'vue'
+import { reactive, computed, onMounted, toRefs, ref, getCurrentInstance, defineAsyncComponent } from 'vue'
 import { formatAxis } from '/@/utils/formatTime'
 import { User as UserApi } from '/@/api/admin/User'
 import { UserGetBasicOutput } from '/@/api/admin/data-contracts'
@@ -145,7 +145,9 @@ import pinia from '/@/stores/index'
 import { storeToRefs } from 'pinia'
 import { getToken } from '/@/api/admin/http-client'
 import { AxiosResponse } from 'axios'
-import ChangePasswordForm from './components/change-password-form.vue'
+
+// 引入组件
+const ChangePasswordForm = defineAsyncComponent(() => import('./components/change-password-form.vue'))
 
 const { proxy } = getCurrentInstance() as any
 

src/views/admin/role/index.vue

@@ -98,19 +98,21 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, nextTick } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, nextTick, defineAsyncComponent } from 'vue'
 import { RoleGetListOutput, UserGetRoleUserListOutput, UserGetPageOutput, RoleAddRoleUserListInput, RoleType } from '/@/api/admin/data-contracts'
 import { Role as RoleApi } from '/@/api/admin/Role'
 import { listToTree } from '/@/utils/tree'
 import { ElTable } from 'element-plus'
 import { cloneDeep } from 'lodash-es'
-import RoleForm from './components/role-form.vue'
-import SetRoleMenu from './components/set-role-menu.vue'
-import SetRoleDataScope from './components/set-role-data-scope.vue'
-import UserSelect from '/@/views/admin/user/components/user-select.vue'
-import MyDropdownMore from '/@/components/my-dropdown-more/index.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const RoleForm = defineAsyncComponent(() => import('./components/role-form.vue'))
+const SetRoleMenu = defineAsyncComponent(() => import('./components/set-role-menu.vue'))
+const SetRoleDataScope = defineAsyncComponent(() => import('./components/set-role-data-scope.vue'))
+const UserSelect = defineAsyncComponent(() => import('/@/views/admin/user/components/user-select.vue'))
+const MyDropdownMore = defineAsyncComponent(() => import('/@/components/my-dropdown-more/index.vue'))
+
 const { proxy } = getCurrentInstance() as any
 
 const roleTableRef = ref()

src/views/admin/task/index.vue

@@ -70,11 +70,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue'
 import { TaskListOutput, PageInputTaskGetPageDto } from '/@/api/admin/data-contracts'
 import { Task as TaskApi } from '/@/api/admin/Task'
 import dayjs from 'dayjs'
-import TaskLogs from './components/task-logs.vue'
+
+// 引入组件
+const TaskLogs = defineAsyncComponent(() => import('./components/task-logs.vue'))
 
 const { proxy } = getCurrentInstance() as any
 

src/views/admin/tenant/index.vue

@@ -54,14 +54,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, defineAsyncComponent } from 'vue'
 import { TenantListOutput, PageInputTenantGetPageDto } from '/@/api/admin/data-contracts'
 import { Tenant as TenantApi } from '/@/api/admin/Tenant'
-import TenantForm from './components/tenant-form.vue'
-import MyDropdownMore from '/@/components/my-dropdown-more/index.vue'
-import SetTenantMenu from './components/set-tenant-menu.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const TenantForm = defineAsyncComponent(() => import('./components/tenant-form.vue'))
+const MyDropdownMore = defineAsyncComponent(() => import('./components/tenant-form.vue'))
+const SetTenantMenu = defineAsyncComponent(() => import('./components/set-tenant-menu.vue'))
+
 const { proxy } = getCurrentInstance() as any
 
 const tenantFormRef = ref()

src/views/admin/user/components/my-select-user.vue

@@ -16,9 +16,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, PropType } from 'vue'
+import { ref, reactive, PropType, defineAsyncComponent } from 'vue'
 import { UserGetPageOutput } from '/@/api/admin/data-contracts'
-import UserSelect from './user-select.vue'
+
+// 引入组件
+const UserSelect = defineAsyncComponent(() => import('./user-select.vue'))
 
 const props = defineProps({
   name: String as PropType<string | undefined | null>,

src/views/admin/user/components/user-form.vue

@@ -100,7 +100,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, toRefs, getCurrentInstance, ref, watch } from 'vue'
+import { reactive, toRefs, getCurrentInstance, ref, watch, defineAsyncComponent } from 'vue'
 import { UserAddInput, UserUpdateInput, OrgListOutput, RoleGetListOutput } from '/@/api/admin/data-contracts'
 import { User as UserApi } from '/@/api/admin/User'
 import { Org as OrgApi } from '/@/api/admin/Org'
@@ -108,9 +108,11 @@ import { Role as roleApi } from '/@/api/admin/Role'
 import { listToTree, treeToList } from '/@/utils/tree'
 import { cloneDeep } from 'lodash-es'
 import { testMobile, testEmail } from '/@/utils/test'
-import MySelectUser from './my-select-user.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const MySelectUser = defineAsyncComponent(() => import('./my-select-user.vue'))
+
 defineProps({
   title: {
     type: String,

src/views/admin/user/components/user-select.vue

@@ -64,11 +64,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, defineAsyncComponent } from 'vue'
 import { ElTable } from 'element-plus'
 import { UserGetPageOutput, PageInputUserGetPageDto, OrgListOutput } from '/@/api/admin/data-contracts'
 import { User as UserApi } from '/@/api/admin/User'
-import OrgMenu from '/@/views/admin/org/components/org-menu.vue'
+
+// 引入组件
+const OrgMenu = defineAsyncComponent(() => import('/@/views/admin/org/components/org-menu.vue'))
 
 const props = defineProps({
   title: {

src/views/admin/user/index.vue

@@ -68,14 +68,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, defineAsyncComponent } from 'vue'
 import { UserGetPageOutput, PageInputUserGetPageDto, OrgListOutput, UserSetManagerInput, UserResetPasswordInput } from '/@/api/admin/data-contracts'
 import { User as UserApi } from '/@/api/admin/User'
-import UserForm from './components/user-form.vue'
-import OrgMenu from '/@/views/admin/org/components/org-menu.vue'
-import MyDropdownMore from '/@/components/my-dropdown-more/index.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const UserForm = defineAsyncComponent(() => import('./components/user-form.vue'))
+const OrgMenu = defineAsyncComponent(() => import('/@/views/admin/org/components/org-menu.vue'))
+const MyDropdownMore = defineAsyncComponent(() => import('/@/components/my-dropdown-more/index.vue'))
+
 const { proxy } = getCurrentInstance() as any
 
 const userFormRef = ref()

src/views/admin/view/index.vue

@@ -50,14 +50,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, onMounted, getCurrentInstance, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, defineAsyncComponent } from 'vue'
 import { ViewListOutput } from '/@/api/admin/data-contracts'
 import { View as ViewView } from '/@/api/admin/View'
 import { listToTree } from '/@/utils/tree'
 import { cloneDeep } from 'lodash-es'
-import ViewForm from './components/view-form.vue'
 import eventBus from '/@/utils/mitt'
 
+// 引入组件
+const ViewForm = defineAsyncComponent(() => import('./components/view-form.vue'))
+
 const viewFormRef = ref()
 const { proxy } = getCurrentInstance() as any