From f3879d7ab10d3309472c63cf80b1c1ad10e3ac50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=9C=9F=E8=B1=86=E5=93=A5?= <zhanglp15229380174@163.com>
Date: Wed, 17 Aug 2022 07:14:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QuickCrud/index.vue            |   7 +
 src/components/QuickTable/index.vue           |   7 +
 src/components/QuickToolbar/index.vue         |   6 -
 src/layout/components/AiniTop/index.vue       |  10 +-
 src/layout/index.vue                          |   2 -
 src/store/modules/user.ts                     |  21 +-
 src/types/dept.ts                             |   3 +
 src/utils/index.ts                            |  15 +-
 src/utils/request.ts                          |   4 +-
 src/views/permission/assignUser/index.vue     |   6 +-
 src/views/permission/rolePermission/index.vue |   2 +-
 src/views/resource/attachment/index.vue       | 180 ++++-----
 src/views/resource/sms/config/index.vue       | 208 +++++-----
 src/views/resource/sms/signature/index.vue    | 230 +++++------
 src/views/resource/sms/template/index.vue     | 212 +++++-----
 src/views/resource/storage/general/index.vue  | 220 +++++------
 src/views/resource/storage/object/index.vue   | 200 +++++-----
 src/views/system/dept/index.vue               | 190 ++++-----
 src/views/system/dictionary/index.vue         | 164 ++++----
 src/views/system/dictionaryType/index.vue     | 127 +++---
 src/views/system/log/error.vue                | 119 +++---
 src/views/system/log/operate.vue              |  96 ++---
 src/views/system/menu/index.vue               | 298 +++++++-------
 src/views/system/role/index.vue               | 125 +++---
 src/views/system/user/index.vue               | 363 +++++++++---------
 tsconfig.json                                 |  12 +-
 26 files changed, 1453 insertions(+), 1374 deletions(-)

diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index b4bcbcf..3050cce 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -87,6 +87,10 @@ const props = defineProps({
     type: [Boolean, Object],
     default: false,
   },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 })
 /**
  * props to ref
@@ -105,6 +109,7 @@ const {
   formModel,
   formItems,
   formInline,
+  loading,
 } = toRefs(props) as {
   searchFormModel: Ref<boolean | any>
   searchFormItems: Ref<FormItem[]>
@@ -119,6 +124,7 @@ const {
   tableActionbar: Ref<boolean | Actionbar>
   tableToolbar: Ref<boolean | Toolbar>
   page: Ref<Page>
+  loading: Ref<boolean>
 }
 /**
  * 类型转换
@@ -489,6 +495,7 @@ onActivated(() => {
         <quick-table
           :data="tableData"
           :columns="tableColumns"
+          :loading="loading"
           :table-actionbar="tableActionbar"
           :edit-button-name="actionbar?.editButtonName"
           :delete-button-name="actionbar?.deleteButtonName"
diff --git a/src/components/QuickTable/index.vue b/src/components/QuickTable/index.vue
index f4c7dc1..9f7e70e 100644
--- a/src/components/QuickTable/index.vue
+++ b/src/components/QuickTable/index.vue
@@ -34,6 +34,10 @@ const props = defineProps({
     type: String,
     default: 'id',
   },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
   tableActionbar: {
     type: [Boolean, Object],
     default: false,
@@ -71,6 +75,7 @@ const {
   columns,
   height,
   rowKey,
+  loading,
   tableActionbar,
   editButtonName,
   deleteButtonName,
@@ -83,6 +88,7 @@ const {
   columns: Ref<Column[]>
   height: Ref<number>
   rowKey: Ref<string>
+  loading: Ref<boolean>
   tableActionbar: Ref<boolean | Actionbar>
   editButtonName: Ref<string>
   deleteButtonName: Ref<string>
@@ -128,6 +134,7 @@ onMounted(() => {
 <template>
   <el-table
     ref="tableRef"
+    v-loading="loading"
     :data="data"
     style="width: 100%"
     :height="height"
diff --git a/src/components/QuickToolbar/index.vue b/src/components/QuickToolbar/index.vue
index d20ab31..6f361a8 100644
--- a/src/components/QuickToolbar/index.vue
+++ b/src/components/QuickToolbar/index.vue
@@ -108,12 +108,6 @@ const emits = defineEmits([
   'onCustomToolbarClick',
 ])
 const handleCustomClick = (item: any) => {
-  // item.click(() => {
-  //   emits('onCustomToolbarClick', (data: any) => {
-  //     const { checkDataList, ids } = data
-  //     console.log('ids', ids)
-  //   })
-  // })
   emits('onCustomToolbarClick', item.click)
 }
 </script>
diff --git a/src/layout/components/AiniTop/index.vue b/src/layout/components/AiniTop/index.vue
index ab3ef9d..4e9556e 100644
--- a/src/layout/components/AiniTop/index.vue
+++ b/src/layout/components/AiniTop/index.vue
@@ -15,11 +15,15 @@ import {
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 // import AiniLanguage from '@/components/AiniLanguage/index.vue'
-import { useAppStore } from '../../../store/modules/app'
+import { useAppStore } from '@/store/modules/app'
+import { useUserStore } from '@/store/modules/user'
 
 const router = useRouter()
 const appStore = useAppStore()
+const userStore = useUserStore()
+
 const isCollapse = computed(() => appStore.getCollapse)
+const userInfo = computed(() => userStore.userInfo)
 const collapse = () => {
   appStore.setCollapse(!isCollapse.value)
 }
@@ -87,7 +91,9 @@ const handleCommand = (cmd: string) => {
       <span class="test">
         <el-dropdown @command="handleCommand">
           <span class="el-dropdown-link">
-            <el-avatar :size="30"> user </el-avatar>
+            <el-avatar :size="30">
+              {{ userInfo.userName.charAt(0).toUpperCase() }}
+            </el-avatar>
           </span>
           <template #dropdown>
             <el-dropdown-menu>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index cd8ef46..b15db88 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -10,8 +10,6 @@ import AiniTop from './components/AiniTop/index.vue'
 import AiniSidebar from './components/AiniSidebar/index.vue'
 
 const route = useRoute()
-console.log('route', route)
-
 const router = useRouter()
 const appStore = useAppStore()
 const menuStore = useMenuStore()
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 984400b..4826902 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -36,6 +36,9 @@ export const useUserStore = defineStore('userStore', {
     getPermissionMenuList(): Array<Menu> {
       return this.permissionMenuList
     },
+    userInfo(): User {
+      return this.user
+    },
   },
   actions: {
     getPermission(id: string): Promise<QuickResponseData<Array<Menu>>> {
@@ -57,16 +60,16 @@ export const useUserStore = defineStore('userStore', {
         })
       })
     },
-    getUserPageList(parmas: object): Promise<QuickResponseData<Array<User>>> {
-      return new Promise((resolve) => {
-        getUserPageList(parmas).then((res) => {
-          const { data: userList } = res
-          this.userList = userList
+    // getUserPageList(parmas: object): Promise<QuickResponseData<Array<User>>> {
+    //   return new Promise((resolve) => {
+    //     getUserPageList(parmas).then((res) => {
+    //       const { data: userList } = res
+    //       this.userList = userList
 
-          resolve(res)
-        })
-      })
-    },
+    //       resolve(res)
+    //     })
+    //   })
+    // },
     getUserInfo(userName: string): Promise<User> {
       return new Promise((resolve) => {
         getUserInfo(userName).then((res) => {
diff --git a/src/types/dept.ts b/src/types/dept.ts
index eaf486f..0366ec2 100644
--- a/src/types/dept.ts
+++ b/src/types/dept.ts
@@ -4,3 +4,6 @@ export interface Dept {
   name: string
   pId: string
 }
+export interface DeptTree extends Dept {
+  children: DeptTree[]
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 89115e6..f9e822f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -34,8 +34,8 @@ export const selectTreeFormat = (data: any, options: SelectTreeOptions) => {
     options && options.children ? options.children : defaultOptions.children
   data.forEach((element: SelectTree) => {
     const obj: SelectTree = {
-      label: element[label],
-      value: element[value],
+      label: element[label].toString(),
+      value: element[value].toString(),
       children: [],
     }
     if (element[children] && element[children].length > 0) {
@@ -69,17 +69,6 @@ export const treeFormat = (data: any, options: TreeOptions) => {
   })
   return arr
 }
-export const listToTableTree = (data: any, pId = '0') => {
-  const arr = []
-  const parentData = data.filter((x: any) => x.pId === pId)
-  parentData.forEach((item: any) => {
-    const obj = item
-    obj.children = listToTableTree(data, item.id)
-    arr.push(obj)
-  })
-  return arr
-}
-
 export const tableTreeFormat = (data: any) => {
   const forderArr = []
   const menuArr = []
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 194fb7c..c1b79af 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -29,7 +29,7 @@ quickRequest.interceptors.request.use(
     if (cfg.headers) {
       cfg.headers.authorization = `Bearer ${token}`
     }
-    console.log('request', cfg)
+    console.info('request', cfg)
     return cfg
   },
   (error) => {
@@ -41,7 +41,7 @@ quickRequest.interceptors.request.use(
 // 响应拦截器
 quickRequest.interceptors.response.use(
   (res) => {
-    console.log('response', res)
+    console.info('response', res)
     const { data } = res
     const { status, data: payload, page, msg } = data as QuickResponseData<any>
     if (status === 1) {
diff --git a/src/views/permission/assignUser/index.vue b/src/views/permission/assignUser/index.vue
index 2e40d5b..03e380b 100644
--- a/src/views/permission/assignUser/index.vue
+++ b/src/views/permission/assignUser/index.vue
@@ -1,17 +1,18 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { treeFormat } from '@/utils'
 import { Column, Toolbar } from '@/types/table'
 import { User } from '@/types/user'
 import { Tree, LeftTree } from '@/types/tree'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import { getRoleList, getUserPermission, assignUser } from '@/api/role'
 import { getUserList } from '@/api/user'
 
 /**
  * 属性
  */
+const loading = ref(false)
 const dataList = reactive<Array<User>>([])
 const userList = reactive<Array<User>>([])
 const checkDataList = ref<Array<User>>([])
@@ -113,7 +114,9 @@ const tableColumns = reactive<Array<Column>>([
  * 加载数据
  */
 const load = () => {
+  loading.value = true
   getUserList().then((res) => {
+    loading.value = false
     const { data: userDataList } = res
     userList.length = 0
     userList.push(...userDataList)
@@ -193,6 +196,7 @@ const handleTreeClick = (data: Tree, done: any) => {
     :table-toolbar="tableToolbar"
     dialog-titles="dialogTitles"
     :left-tree="leftTree"
+    :loading="loading"
     @on-selection-change="handleSelectionChange"
     @on-load="load"
     @on-tree-load="treeLoad"
diff --git a/src/views/permission/rolePermission/index.vue b/src/views/permission/rolePermission/index.vue
index e2ed4ef..c0a5891 100644
--- a/src/views/permission/rolePermission/index.vue
+++ b/src/views/permission/rolePermission/index.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import { ElTree, ElMessage, ElMessageBox } from 'element-plus'
-import QuickToolbar from '@/components/QuickToolbar/index.vue'
 import { listToTree, treeFormat } from '@/utils'
 import { MenuTree } from '@/types/menu'
 import { Toolbar } from '@/types/table'
 import { Tree } from '@/types/tree'
+import QuickToolbar from '@/components/QuickToolbar/index.vue'
 import { getRoleList, getMenuPermission, assignPermission } from '@/api/role'
 import { getMenuList } from '@/api/menu'
 
diff --git a/src/views/resource/attachment/index.vue b/src/views/resource/attachment/index.vue
index da131b5..999ec5d 100644
--- a/src/views/resource/attachment/index.vue
+++ b/src/views/resource/attachment/index.vue
@@ -2,80 +2,19 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { UploadInstance } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Role } from '@/types/role'
 import { FormItem } from '@/types/form'
-import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 import { SearchUser } from '@/types/user'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 
-const uploadRef = ref<UploadInstance>()
-
-const dataList = reactive<Array<Role>>([])
 /**
- * 表单
+ * 属性
  */
-const dialogTitle = reactive({
-  add: '新增角色',
-  edit: '编辑角色',
-  detail: '角色详情',
-})
-const formModel = reactive<Role>({
-  id: '',
-  roleId: '',
-  roleName: '',
-})
-const formItems = reactive<Array<FormItem>>([
-  {
-    label: '角色编号',
-    labelWidth: '80px',
-    vModel: 'roleId',
-    placeholder: '角色编号',
-    editReadonly: true,
-    prop: 'roleId',
-    rules: [
-      {
-        required: true,
-        message: '角色编号不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '角色名称',
-    labelWidth: '80px',
-    vModel: 'roleName',
-    placeholder: '角色名称',
-    prop: 'roleName',
-    rules: [
-      {
-        required: true,
-        message: '角色名称不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-])
-const handleFormSubmit = (form: Role, done: any) => {
-  console.log('handleFormSubmit', form)
-  if (form.id) {
-    updateRole(form).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '角色修改成功',
-      })
-      done()
-    })
-  } else {
-    addRole(form).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '角色创建成功',
-      })
-      done()
-    })
-  }
-}
+const loading = ref(false)
+const uploadRef = ref<UploadInstance>()
+const dataList = reactive<Array<Role>>([])
 /**
  * 搜索
  */
@@ -94,7 +33,6 @@ const searchFormItems = reactive<Array<FormItem>>([
     placeholder: '类型',
   },
 ])
-
 /**
  * 工具栏
  */
@@ -105,7 +43,27 @@ const tableToolbar = reactive<Toolbar>({
   hiddenImportButton: true,
   importButtonName: '上传',
 })
-
+/**
+ * 操作栏
+ */
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 150,
+})
 /**
  * 表格
  */
@@ -136,29 +94,13 @@ const tableColumns = reactive<Array<Column>>([
     prop: 'roleName',
   },
 ])
-const handleDelete = (item: Role, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    deleteRole(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '角色删除成功',
-      })
-      done()
-    })
-  })
-}
-const tableActionbar = reactive<Actionbar>({
-  width: 150,
-})
 /**
  * 加载数据
  */
 const load = () => {
+  loading.value = true
   getRoleList().then((res) => {
+    loading.value = false
     const { data: roleList } = res
     dataList.length = 0
     dataList.push(...roleList)
@@ -183,6 +125,69 @@ const handleImport = (done: any) => {
 const submitUpload = () => {
   uploadRef.value!.submit()
 }
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增角色',
+  edit: '编辑角色',
+  detail: '角色详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '角色编号',
+    labelWidth: '80px',
+    vModel: 'roleId',
+    placeholder: '角色编号',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '角色名称',
+    labelWidth: '80px',
+    vModel: 'roleName',
+    placeholder: '角色名称',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
 </script>
 <template>
   <el-upload
@@ -206,6 +211,7 @@ const submitUpload = () => {
     :search-form-items="searchFormItems"
     :search-form-model="searchForm"
     dialog-titles="dialogTitles"
+    :loading="loading"
     @on-load="load"
     @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
diff --git a/src/views/resource/sms/config/index.vue b/src/views/resource/sms/config/index.vue
index fcfcce5..0e9d01e 100644
--- a/src/views/resource/sms/config/index.vue
+++ b/src/views/resource/sms/config/index.vue
@@ -1,17 +1,110 @@
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { UploadInstance } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Role } from '@/types/role'
 import { FormItem } from '@/types/form'
-import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 import { SearchUser } from '@/types/user'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 
+/**
+ * 属性
+ */
+const loading = ref(false)
 const uploadRef = ref<UploadInstance>()
-
 const dataList = reactive<Array<Role>>([])
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '任务名称',
+    vModel: 'userName',
+    placeholder: '任务名称',
+  },
+])
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+/**
+ * 操作栏
+ */
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+})
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '任务名称',
+    prop: 'roleName',
+    fixed: true,
+    width: '200',
+  },
+  {
+    label: '短信签名',
+    prop: 'roleName',
+    width: '200',
+  },
+  {
+    label: '短信模板',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '定时发送',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '发送号码',
+    prop: 'roleId',
+  },
+])
+
+/**
+ * 加载数据
+ */
+const load = () => {
+  loading.value = true
+  getRoleList().then((res) => {
+    loading.value = false
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
 /**
  * 表单
  */
@@ -99,7 +192,6 @@ const formItems = reactive<Array<FormItem>>([
   },
 ])
 const handleFormSubmit = (form: Role, done: any) => {
-  console.log('handleFormSubmit', form)
   if (form.id) {
     updateRole(form).then(() => {
       ElMessage({
@@ -118,111 +210,6 @@ const handleFormSubmit = (form: Role, done: any) => {
     })
   }
 }
-/**
- * 搜索
- */
-const searchForm = reactive<SearchUser>({
-  userName: '',
-})
-const searchFormItems = reactive<Array<FormItem>>([
-  {
-    label: '任务名称',
-    vModel: 'userName',
-    placeholder: '任务名称',
-  },
-])
-
-/**
- * 工具栏
- */
-const tableToolbar = reactive<Toolbar>({
-  hiddenExportButton: true,
-  hiddenPrintButton: true,
-  hiddenImportButton: true,
-  hiddenBatchDeleteButton: true,
-})
-
-/**
- * 表格
- */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '任务名称',
-    prop: 'roleName',
-    fixed: true,
-    width: '200',
-  },
-  {
-    label: '短信签名',
-    prop: 'roleName',
-    width: '200',
-  },
-  {
-    label: '短信模板',
-    prop: 'roleId',
-    width: '200',
-  },
-  {
-    label: '定时发送',
-    prop: 'roleId',
-    width: '200',
-  },
-  {
-    label: '发送号码',
-    prop: 'roleId',
-  },
-])
-const handleDelete = (item: Role, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    deleteRole(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '角色删除成功',
-      })
-      done()
-    })
-  })
-}
-
-const tableActionbar = reactive<Actionbar>({
-  width: 250,
-  btns: [
-    /*  {
-      name: '启用',
-      size: 'small',
-      click: (item: any, done: any) => {
-        console.log('左边自定义按钮click', item)
-        done()
-      },
-    },
-    {
-      name: '禁用',
-      size: 'small',
-      click: (item: any, done: any) => {
-        console.log('右边自定义按钮click', item)
-        done()
-      },
-    }, */
-  ],
-})
-/**
- * 加载数据
- */
-const load = () => {
-  getRoleList().then((res) => {
-    const { data: roleList } = res
-    dataList.length = 0
-    dataList.push(...roleList)
-  })
-}
 </script>
 <template>
   <quick-crud
@@ -236,6 +223,7 @@ const load = () => {
     :search-form-items="searchFormItems"
     :search-form-model="searchForm"
     dialog-titles="dialogTitles"
+    :loading="loading"
     @on-load="load"
     @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
diff --git a/src/views/resource/sms/signature/index.vue b/src/views/resource/sms/signature/index.vue
index 3e0405b..a0a51ca 100644
--- a/src/views/resource/sms/signature/index.vue
+++ b/src/views/resource/sms/signature/index.vue
@@ -2,16 +2,129 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { UploadInstance } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Role } from '@/types/role'
 import { FormItem } from '@/types/form'
-import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 import { SearchUser } from '@/types/user'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 
+/**
+ * 属性
+ */
+const loading = ref(false)
 const uploadRef = ref<UploadInstance>()
-
 const dataList = reactive<Array<Role>>([])
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '签名名称',
+    vModel: 'userName',
+    placeholder: '签名名称',
+  },
+  {
+    label: '签名类型',
+    vModel: 'userName',
+    placeholder: '签名类型',
+  },
+])
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+/**
+ * 操作栏
+ */
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '审核',
+      size: 'small',
+      click: (item: any, done: any) => {
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '签名名称',
+    prop: 'roleName',
+  },
+  {
+    label: '签名用途',
+    prop: 'roleName',
+  },
+  {
+    label: '签名类型',
+    prop: 'roleName',
+  },
+  {
+    label: '签名内容',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '证明类型',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '证明上传',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '联系人',
+    prop: 'roleId',
+    width: '200',
+  },
+])
+/**
+ * 加载数据
+ */
+const load = () => {
+  loading.value = true
+  getRoleList().then((res) => {
+    loading.value = false
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
 /**
  * 表单
  */
@@ -127,7 +240,6 @@ const formItems = reactive<Array<FormItem>>([
   },
 ])
 const handleFormSubmit = (form: Role, done: any) => {
-  console.log('handleFormSubmit', form)
   if (form.id) {
     updateRole(form).then(() => {
       ElMessage({
@@ -146,115 +258,6 @@ const handleFormSubmit = (form: Role, done: any) => {
     })
   }
 }
-/**
- * 搜索
- */
-const searchForm = reactive<SearchUser>({
-  userName: '',
-})
-const searchFormItems = reactive<Array<FormItem>>([
-  {
-    label: '签名名称',
-    vModel: 'userName',
-    placeholder: '签名名称',
-  },
-  {
-    label: '签名类型',
-    vModel: 'userName',
-    placeholder: '签名类型',
-  },
-])
-
-/**
- * 工具栏
- */
-const tableToolbar = reactive<Toolbar>({
-  hiddenExportButton: true,
-  hiddenPrintButton: true,
-  hiddenImportButton: true,
-  hiddenBatchDeleteButton: true,
-})
-
-/**
- * 表格
- */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '签名名称',
-    prop: 'roleName',
-  },
-  {
-    label: '签名用途',
-    prop: 'roleName',
-  },
-  {
-    label: '签名类型',
-    prop: 'roleName',
-  },
-  {
-    label: '签名内容',
-    prop: 'roleId',
-    width: '200',
-  },
-  {
-    label: '证明类型',
-    prop: 'roleId',
-    width: '200',
-  },
-  {
-    label: '证明上传',
-    prop: 'roleId',
-    width: '200',
-  },
-  {
-    label: '联系人',
-    prop: 'roleId',
-    width: '200',
-  },
-])
-const handleDelete = (item: Role, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    deleteRole(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '角色删除成功',
-      })
-      done()
-    })
-  })
-}
-
-const tableActionbar = reactive<Actionbar>({
-  width: 250,
-  btns: [
-    {
-      name: '审核',
-      size: 'small',
-      click: (item: any, done: any) => {
-        console.log('左边自定义按钮click', item)
-        done()
-      },
-    },
-  ],
-})
-/**
- * 加载数据
- */
-const load = () => {
-  getRoleList().then((res) => {
-    const { data: roleList } = res
-    dataList.length = 0
-    dataList.push(...roleList)
-  })
-}
 </script>
 <template>
   <quick-crud
@@ -268,6 +271,7 @@ const load = () => {
     :search-form-items="searchFormItems"
     :search-form-model="searchForm"
     dialog-titles="dialogTitles"
+    :loading="loading"
     @on-load="load"
     @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
diff --git a/src/views/resource/sms/template/index.vue b/src/views/resource/sms/template/index.vue
index fd533d2..2243f66 100644
--- a/src/views/resource/sms/template/index.vue
+++ b/src/views/resource/sms/template/index.vue
@@ -2,16 +2,120 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { UploadInstance } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Role } from '@/types/role'
 import { FormItem } from '@/types/form'
-import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 import { SearchUser } from '@/types/user'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 
+/**
+ * 属性
+ */
+const loading = ref(false)
 const uploadRef = ref<UploadInstance>()
-
 const dataList = reactive<Array<Role>>([])
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '模板名称',
+    vModel: 'userName',
+    placeholder: '模板名称',
+  },
+  {
+    label: '短信类型',
+    vModel: 'userName',
+    placeholder: '短信类型',
+  },
+])
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+/**
+ * 操作栏
+ */
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '审核',
+      size: 'small',
+      click: (item: any, done: any) => {
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '模板名称',
+    prop: 'roleName',
+    fixed: true,
+  },
+  {
+    label: '短信类型',
+    prop: 'roleName',
+  },
+  {
+    label: '短信内容',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '申请说明',
+    prop: 'roleId',
+  },
+  {
+    label: '联系人',
+    prop: 'roleId',
+    width: '200',
+  },
+])
+/**
+ * 加载数据
+ */
+const load = () => {
+  loading.value = true
+  getRoleList().then((res) => {
+    loading.value = false
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
 /**
  * 表单
  */
@@ -127,7 +231,6 @@ const formItems = reactive<Array<FormItem>>([
   },
 ])
 const handleFormSubmit = (form: Role, done: any) => {
-  console.log('handleFormSubmit', form)
   if (form.id) {
     updateRole(form).then(() => {
       ElMessage({
@@ -146,106 +249,6 @@ const handleFormSubmit = (form: Role, done: any) => {
     })
   }
 }
-/**
- * 搜索
- */
-const searchForm = reactive<SearchUser>({
-  userName: '',
-})
-const searchFormItems = reactive<Array<FormItem>>([
-  {
-    label: '模板名称',
-    vModel: 'userName',
-    placeholder: '模板名称',
-  },
-  {
-    label: '短信类型',
-    vModel: 'userName',
-    placeholder: '短信类型',
-  },
-])
-
-/**
- * 工具栏
- */
-const tableToolbar = reactive<Toolbar>({
-  hiddenExportButton: true,
-  hiddenPrintButton: true,
-  hiddenImportButton: true,
-  hiddenBatchDeleteButton: true,
-})
-
-/**
- * 表格
- */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '模板名称',
-    prop: 'roleName',
-    fixed: true,
-  },
-  {
-    label: '短信类型',
-    prop: 'roleName',
-  },
-  {
-    label: '短信内容',
-    prop: 'roleId',
-    width: '200',
-  },
-  {
-    label: '申请说明',
-    prop: 'roleId',
-  },
-  {
-    label: '联系人',
-    prop: 'roleId',
-    width: '200',
-  },
-])
-const handleDelete = (item: Role, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    deleteRole(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '角色删除成功',
-      })
-      done()
-    })
-  })
-}
-
-const tableActionbar = reactive<Actionbar>({
-  width: 250,
-  btns: [
-    {
-      name: '审核',
-      size: 'small',
-      click: (item: any, done: any) => {
-        console.log('左边自定义按钮click', item)
-        done()
-      },
-    },
-  ],
-})
-/**
- * 加载数据
- */
-const load = () => {
-  getRoleList().then((res) => {
-    const { data: roleList } = res
-    dataList.length = 0
-    dataList.push(...roleList)
-  })
-}
 </script>
 <template>
   <quick-crud
@@ -259,6 +262,7 @@ const load = () => {
     :search-form-items="searchFormItems"
     :search-form-model="searchForm"
     dialog-titles="dialogTitles"
+    :loading="loading"
     @on-load="load"
     @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
diff --git a/src/views/resource/storage/general/index.vue b/src/views/resource/storage/general/index.vue
index 71f7ad6..a5b830f 100644
--- a/src/views/resource/storage/general/index.vue
+++ b/src/views/resource/storage/general/index.vue
@@ -2,16 +2,124 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { UploadInstance } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Role } from '@/types/role'
 import { FormItem } from '@/types/form'
-import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 import { SearchUser } from '@/types/user'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 
+/**
+ * 属性
+ */
+const loading = ref(false)
 const uploadRef = ref<UploadInstance>()
-
 const dataList = reactive<Array<Role>>([])
+/**
+ * 搜索
+ */
+const searchForm = reactive<SearchUser>({
+  userName: '',
+})
+const searchFormItems = reactive<Array<FormItem>>([
+  {
+    label: '空间名称',
+    vModel: 'userName',
+    placeholder: '空间名称',
+  },
+  {
+    label: '类型',
+    vModel: 'userName',
+    placeholder: '类型',
+  },
+])
+
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenImportButton: true,
+  hiddenBatchDeleteButton: true,
+})
+/**
+ * 操作栏
+ */
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 250,
+  btns: [
+    {
+      name: '启用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        done()
+      },
+    },
+    {
+      name: '禁用',
+      size: 'small',
+      click: (item: any, done: any) => {
+        done()
+      },
+    },
+  ],
+})
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: 'FTP地址',
+    prop: 'roleName',
+    fixed: true,
+  },
+  {
+    label: 'FTP账号',
+    prop: 'roleName',
+  },
+  {
+    label: 'FTP密码',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '状态',
+    prop: 'roleId',
+    width: '200',
+  },
+])
+/**
+ * 加载数据
+ */
+const load = () => {
+  loading.value = true
+  getRoleList().then((res) => {
+    loading.value = false
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
 /**
  * 表单
  */
@@ -71,7 +179,6 @@ const formItems = reactive<Array<FormItem>>([
   },
 ])
 const handleFormSubmit = (form: Role, done: any) => {
-  console.log('handleFormSubmit', form)
   if (form.id) {
     updateRole(form).then(() => {
       ElMessage({
@@ -90,110 +197,6 @@ const handleFormSubmit = (form: Role, done: any) => {
     })
   }
 }
-/**
- * 搜索
- */
-const searchForm = reactive<SearchUser>({
-  userName: '',
-})
-const searchFormItems = reactive<Array<FormItem>>([
-  {
-    label: '空间名称',
-    vModel: 'userName',
-    placeholder: '空间名称',
-  },
-  {
-    label: '类型',
-    vModel: 'userName',
-    placeholder: '类型',
-  },
-])
-
-/**
- * 工具栏
- */
-const tableToolbar = reactive<Toolbar>({
-  hiddenExportButton: true,
-  hiddenPrintButton: true,
-  hiddenImportButton: true,
-  hiddenBatchDeleteButton: true,
-})
-
-/**
- * 表格
- */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: 'FTP地址',
-    prop: 'roleName',
-    fixed: true,
-  },
-  {
-    label: 'FTP账号',
-    prop: 'roleName',
-  },
-  {
-    label: 'FTP密码',
-    prop: 'roleId',
-    width: '200',
-  },
-  {
-    label: '状态',
-    prop: 'roleId',
-    width: '200',
-  },
-])
-const handleDelete = (item: Role, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    deleteRole(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '角色删除成功',
-      })
-      done()
-    })
-  })
-}
-
-const tableActionbar = reactive<Actionbar>({
-  width: 250,
-  btns: [
-    {
-      name: '启用',
-      size: 'small',
-      click: (item: any, done: any) => {
-        console.log('左边自定义按钮click', item)
-        done()
-      },
-    },
-    {
-      name: '禁用',
-      size: 'small',
-      click: (item: any, done: any) => {
-        console.log('右边自定义按钮click', item)
-        done()
-      },
-    },
-  ],
-})
-/**
- * 加载数据
- */
-const load = () => {
-  getRoleList().then((res) => {
-    const { data: roleList } = res
-    dataList.length = 0
-    dataList.push(...roleList)
-  })
-}
 </script>
 <template>
   <quick-crud
@@ -207,6 +210,7 @@ const load = () => {
     :search-form-items="searchFormItems"
     :search-form-model="searchForm"
     dialog-titles="dialogTitles"
+    :loading="loading"
     @on-load="load"
     @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
diff --git a/src/views/resource/storage/object/index.vue b/src/views/resource/storage/object/index.vue
index 7754329..64b18e2 100644
--- a/src/views/resource/storage/object/index.vue
+++ b/src/views/resource/storage/object/index.vue
@@ -2,108 +2,19 @@
 import { reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { UploadInstance } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Role } from '@/types/role'
 import { FormItem } from '@/types/form'
-import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 import { SearchUser } from '@/types/user'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 
-const uploadRef = ref<UploadInstance>()
-
-const dataList = reactive<Array<Role>>([])
 /**
- * 表单
+ * 属性
  */
-const dialogTitle = reactive({
-  add: '新增对象存储',
-  edit: '编辑对象存储',
-  detail: '对象存储详情',
-})
-const formModel = reactive<Role>({
-  id: '',
-  roleId: '',
-  roleName: '',
-})
-const formItems = reactive<Array<FormItem>>([
-  {
-    label: '空间名称',
-    labelWidth: '90px',
-    vModel: 'roleId',
-    placeholder: '空间名称',
-    editReadonly: true,
-    prop: 'roleId',
-    rules: [
-      {
-        required: true,
-        message: '角色编号不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '类型',
-    labelWidth: '90px',
-    vModel: 'roleName',
-    placeholder: '类型',
-    prop: 'roleName',
-    rules: [
-      {
-        required: true,
-        message: '角色名称不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: 'accessKey',
-    labelWidth: '90px',
-    vModel: 'roleName',
-    placeholder: 'accessKey',
-    prop: 'roleName',
-    rules: [
-      {
-        required: true,
-        message: '角色名称不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: 'secretKey',
-    labelWidth: '90px',
-    vModel: 'roleName',
-    placeholder: 'secretKey',
-    prop: 'roleName',
-    rules: [
-      {
-        required: true,
-        message: '角色名称不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-])
-const handleFormSubmit = (form: Role, done: any) => {
-  console.log('handleFormSubmit', form)
-  if (form.id) {
-    updateRole(form).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '角色修改成功',
-      })
-      done()
-    })
-  } else {
-    addRole(form).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '角色创建成功',
-      })
-      done()
-    })
-  }
-}
+const loading = ref(false)
+const uploadRef = ref<UploadInstance>()
+const dataList = reactive<Array<Role>>([])
 /**
  * 搜索
  */
@@ -122,7 +33,6 @@ const searchFormItems = reactive<Array<FormItem>>([
     placeholder: '类型',
   },
 ])
-
 /**
  * 工具栏
  */
@@ -132,7 +42,6 @@ const tableToolbar = reactive<Toolbar>({
   hiddenImportButton: true,
   hiddenBatchDeleteButton: true,
 })
-
 /**
  * 表格
  */
@@ -178,7 +87,6 @@ const handleDelete = (item: Role, done: any) => {
     })
   })
 }
-
 const tableActionbar = reactive<Actionbar>({
   width: 250,
   btns: [
@@ -186,7 +94,6 @@ const tableActionbar = reactive<Actionbar>({
       name: '启用',
       size: 'small',
       click: (item: any, done: any) => {
-        console.log('左边自定义按钮click', item)
         done()
       },
     },
@@ -194,7 +101,6 @@ const tableActionbar = reactive<Actionbar>({
       name: '禁用',
       size: 'small',
       click: (item: any, done: any) => {
-        console.log('右边自定义按钮click', item)
         done()
       },
     },
@@ -204,12 +110,105 @@ const tableActionbar = reactive<Actionbar>({
  * 加载数据
  */
 const load = () => {
+  loading.value = true
   getRoleList().then((res) => {
+    loading.value = false
     const { data: roleList } = res
     dataList.length = 0
     dataList.push(...roleList)
   })
 }
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '新增对象存储',
+  edit: '编辑对象存储',
+  detail: '对象存储详情',
+})
+const formModel = reactive<Role>({
+  id: '',
+  roleId: '',
+  roleName: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '空间名称',
+    labelWidth: '90px',
+    vModel: 'roleId',
+    placeholder: '空间名称',
+    editReadonly: true,
+    prop: 'roleId',
+    rules: [
+      {
+        required: true,
+        message: '角色编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '类型',
+    labelWidth: '90px',
+    vModel: 'roleName',
+    placeholder: '类型',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: 'accessKey',
+    labelWidth: '90px',
+    vModel: 'roleName',
+    placeholder: 'accessKey',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: 'secretKey',
+    labelWidth: '90px',
+    vModel: 'roleName',
+    placeholder: 'secretKey',
+    prop: 'roleName',
+    rules: [
+      {
+        required: true,
+        message: '角色名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+])
+const handleFormSubmit = (form: Role, done: any) => {
+  if (form.id) {
+    updateRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色修改成功',
+      })
+      done()
+    })
+  } else {
+    addRole(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色创建成功',
+      })
+      done()
+    })
+  }
+}
 </script>
 <template>
   <quick-crud
@@ -223,6 +222,7 @@ const load = () => {
     :search-form-items="searchFormItems"
     :search-form-model="searchForm"
     dialog-titles="dialogTitles"
+    :loading="loading"
     @on-load="load"
     @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 685e68b..05d6caa 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,18 +1,19 @@
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
-import { listToTableTree, selectTreeFormat } from '@/utils'
+import { selectTreeFormat } from '@/utils'
 import { Column, Actionbar, Toolbar } from '@/types/table'
-import { Dept } from '@/types/dept'
+import { Dept, DeptTree } from '@/types/dept'
 import { FormItem } from '@/types/form'
 import { Options } from '@/types/options'
 import { Tree, LeftTree } from '@/types/tree'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import { getDeptList, addDept, updateDept, deleteDept } from '@/api/dept'
 
 /**
  * 属性
  */
+const loading = ref(false)
 const deptDdataListTemp = reactive<Array<Dept>>([])
 const dicTypeList = reactive<Array<Options>>([])
 const dataList = reactive<Array<Dept>>([])
@@ -21,82 +22,6 @@ const currentTreeData = ref<Tree>({
   label: '',
   children: [],
 })
-/**
- * 表单
- */
-const dialogTitle = reactive({
-  add: '创建部门',
-  edit: '修改部门',
-  detail: '部门详情',
-})
-const formModel = reactive<Dept>({
-  id: '',
-  deptId: '',
-  name: '',
-  pId: '',
-})
-const formItems = reactive<Array<FormItem>>([
-  {
-    label: '部门编号',
-    labelWidth: '80px',
-    vModel: 'deptId',
-    placeholder: '部门编号',
-    editReadonly: true,
-    prop: 'deptId',
-    rules: [
-      {
-        required: true,
-        message: '部门编号不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '部门名称',
-    labelWidth: '80px',
-    vModel: 'name',
-    placeholder: '部门名称',
-    prop: 'name',
-    rules: [
-      {
-        required: true,
-        message: '部门名称不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '父级部门',
-    labelWidth: '80px',
-    vModel: 'pId',
-    placeholder: '父级部门',
-    type: 'tree',
-    addDisabled: true,
-    editDisabled: true,
-    detailDisabled: true,
-    options: dicTypeList,
-    prop: 'pId',
-  },
-])
-const handleFormSubmit = (form: Dept, done: any) => {
-  if (form.id) {
-    updateDept(form).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '部门修改成功',
-      })
-      done()
-    })
-  } else {
-    addDept(form).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '部门创建成功',
-      })
-      done()
-    })
-  }
-}
 /**
  * 工具栏
  */
@@ -109,8 +34,8 @@ const tableToolbar = reactive<Toolbar>({
 /**
  * 操作栏
  */
-const handleEdit = (form: any, done: any) => {
-  const model = form
+const handleEdit = (form: Dept, done: any) => {
+  const model = { ...form }
   model.pId = model.pId.toString()
   done(model)
 }
@@ -158,12 +83,12 @@ const deptTreeFormat = (data: Array<Dept>, pId = '0') => {
     label: '',
     children: [],
   }
-  const parentData = data.find((x: Dept) => x.pId === pId)
+  const parentData = data.find((x: Dept) => x.pId.toString() === pId)
   if (parentData) {
     obj.id = parentData.id.toString()
     obj.label = parentData.name
-    const parentId = parentData.id
-    const companyData = data.filter((x: Dept) => x.pId === parentId)
+    const parentId = parentData.id.toString()
+    const companyData = data.filter((x: Dept) => x.pId.toString() === parentId)
     companyData.forEach((item: Dept) => {
       if (companyData) {
         const companyObj: Tree = {
@@ -171,8 +96,10 @@ const deptTreeFormat = (data: Array<Dept>, pId = '0') => {
           label: item.name,
           children: [],
         }
-        const companyPid = item.id
-        const deptData = data.filter((x: Dept) => x.pId === companyPid)
+        const companyPid = item.id.toString()
+        const deptData = data.filter(
+          (x: Dept) => x.pId.toString() === companyPid
+        )
         deptData.forEach((deptItem) => {
           companyObj.children.push({
             id: deptItem.id.toString(),
@@ -187,13 +114,25 @@ const deptTreeFormat = (data: Array<Dept>, pId = '0') => {
   arr.push(obj)
   return arr
 }
+const listToTableTree = (data: Array<Dept>, pId = '0') => {
+  const arr: Array<DeptTree> = []
+  const parentData = data.filter((x: Dept) => x.pId.toString() === pId)
+  parentData.forEach((item: Dept) => {
+    const obj: DeptTree = { ...item, children: [] }
+    obj.children = listToTableTree(data, item.id)
+    arr.push(obj)
+  })
+  return arr
+}
 /**
  * 加载数据
  */
 const load = () => {
   const { id } = currentTreeData.value
   const pId = id
+  loading.value = true
   const deptTree = listToTableTree(deptDdataListTemp, pId)
+  loading.value = false
   dataList.length = 0
   dataList.push(...deptTree)
 }
@@ -229,6 +168,82 @@ const handleTreeClick = (data: Tree, done: any) => {
   currentTreeData.value = data
   done()
 }
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '创建部门',
+  edit: '修改部门',
+  detail: '部门详情',
+})
+const formModel = reactive<Dept>({
+  id: '',
+  deptId: '',
+  name: '',
+  pId: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '部门编号',
+    labelWidth: '80px',
+    vModel: 'deptId',
+    placeholder: '部门编号',
+    editReadonly: true,
+    prop: 'deptId',
+    rules: [
+      {
+        required: true,
+        message: '部门编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '部门名称',
+    labelWidth: '80px',
+    vModel: 'name',
+    placeholder: '部门名称',
+    prop: 'name',
+    rules: [
+      {
+        required: true,
+        message: '部门名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '父级部门',
+    labelWidth: '80px',
+    vModel: 'pId',
+    placeholder: '父级部门',
+    type: 'tree',
+    addDisabled: true,
+    editDisabled: true,
+    detailDisabled: true,
+    options: dicTypeList,
+    prop: 'pId',
+  },
+])
+const handleFormSubmit = (form: Dept, done: any) => {
+  if (form.id) {
+    updateDept(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '部门修改成功',
+      })
+      done()
+    })
+  } else {
+    addDept(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '部门创建成功',
+      })
+      done()
+    })
+  }
+}
 </script>
 <template>
   <quick-crud
@@ -242,6 +257,7 @@ const handleTreeClick = (data: Tree, done: any) => {
     dialog-titles="dialogTitles"
     :left-tree="leftTree"
     :left-tree-refresh="true"
+    :loading="loading"
     @on-edit="handleEdit"
     @on-load="load"
     @on-tree-load="treeLoad"
diff --git a/src/views/system/dictionary/index.vue b/src/views/system/dictionary/index.vue
index 81c116b..cadde7a 100644
--- a/src/views/system/dictionary/index.vue
+++ b/src/views/system/dictionary/index.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { dicFormat, treeFormat } from '@/utils'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Dictionary } from '@/types/dictionary'
 import { FormItem } from '@/types/form'
 import { Options } from '@/types/options'
 import { Tree, LeftTree } from '@/types/tree'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import { getDictionaryTypeList } from '@/api/dictionaryType'
 import {
   getDictionaryList,
@@ -19,6 +19,7 @@ import {
 /**
  * 属性
  */
+const loading = ref(false)
 const dicTypeList = reactive<Array<Options>>([])
 const treeDataList = reactive<Array<Tree>>([])
 const dataList = reactive<Array<Dictionary>>([])
@@ -27,86 +28,6 @@ const currentTreeData = ref<Tree>({
   label: '',
   children: [],
 })
-/**
- * 表单
- */
-const dialogTitle = reactive({
-  add: '创建字典',
-  edit: '修改字典',
-  detail: '字典详情',
-})
-const formModel = reactive<Dictionary>({
-  id: '',
-  dicTypeId: '',
-  dicId: '',
-  name: '',
-})
-const formItems = reactive<Array<FormItem>>([
-  {
-    label: '字典编号',
-    labelWidth: '80px',
-    vModel: 'dicId',
-    placeholder: '字典编号',
-    editReadonly: true,
-    prop: 'dicId',
-    rules: [
-      {
-        required: true,
-        message: '字典编号不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '字典名称',
-    labelWidth: '80px',
-    vModel: 'name',
-    placeholder: '字典名称',
-    prop: 'name',
-    rules: [
-      {
-        required: true,
-        message: '字典名称不能为空',
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '字典类型',
-    labelWidth: '80px',
-    vModel: 'dicTypeId',
-    placeholder: '字典类型',
-    type: 'select',
-    addDisabled: true,
-    editDisabled: true,
-    detailDisabled: true,
-    options: dicTypeList,
-    prop: 'dicTypeId',
-    change: (val: string) => {
-      console.log('change', val)
-    },
-  },
-])
-const handleFormSubmit = (form: Dictionary, done: any) => {
-  console.log('handleFormSubmit', form)
-  if (form.id) {
-    updateDictionary(form).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '字典修改成功',
-      })
-      done()
-    })
-  } else {
-    addDictionary(form).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '字典创建成功',
-      })
-      done()
-    })
-  }
-}
 /**
  * 工具栏
  */
@@ -194,12 +115,90 @@ const handleTreeClick = (data: Tree, done: any) => {
  */
 const load = () => {
   const { id } = currentTreeData.value
+  loading.value = true
   getDictionaryList(id).then((res) => {
+    loading.value = false
     const { data: dictionaryList } = res
     dataList.length = 0
     dataList.push(...dictionaryList)
   })
 }
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '创建字典',
+  edit: '修改字典',
+  detail: '字典详情',
+})
+const formModel = reactive<Dictionary>({
+  id: '',
+  dicTypeId: '',
+  dicId: '',
+  name: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '字典编号',
+    labelWidth: '80px',
+    vModel: 'dicId',
+    placeholder: '字典编号',
+    editReadonly: true,
+    prop: 'dicId',
+    rules: [
+      {
+        required: true,
+        message: '字典编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '字典名称',
+    labelWidth: '80px',
+    vModel: 'name',
+    placeholder: '字典名称',
+    prop: 'name',
+    rules: [
+      {
+        required: true,
+        message: '字典名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '字典类型',
+    labelWidth: '80px',
+    vModel: 'dicTypeId',
+    placeholder: '字典类型',
+    type: 'select',
+    addDisabled: true,
+    editDisabled: true,
+    detailDisabled: true,
+    options: dicTypeList,
+    prop: 'dicTypeId',
+  },
+])
+const handleFormSubmit = (form: Dictionary, done: any) => {
+  if (form.id) {
+    updateDictionary(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '字典修改成功',
+      })
+      done()
+    })
+  } else {
+    addDictionary(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '字典创建成功',
+      })
+      done()
+    })
+  }
+}
 </script>
 <template>
   <quick-crud
@@ -212,6 +211,7 @@ const load = () => {
     :table-toolbar="tableToolbar"
     dialog-titles="dialogTitles"
     :left-tree="leftTree"
+    :loading="loading"
     @on-load="load"
     @on-tree-load="treeLoad"
     @on-tree-click="handleTreeClick"
diff --git a/src/views/system/dictionaryType/index.vue b/src/views/system/dictionaryType/index.vue
index 5bb8d83..7cb2b0b 100644
--- a/src/views/system/dictionaryType/index.vue
+++ b/src/views/system/dictionaryType/index.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { DictionaryType } from '@/types/dictionaryType'
 import { FormItem } from '@/types/form'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import {
   getDictionaryTypeList,
   addDictionaryType,
@@ -15,7 +15,69 @@ import {
 /**
  * 属性
  */
+const loading = ref(false)
 const dataList = reactive<Array<DictionaryType>>([])
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenBatchDeleteButton: true,
+  hiddenImportButton: true,
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+})
+/**
+ * 操作栏
+ */
+const handleDelete = (item: DictionaryType, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.name}】的字典分类吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteDictionaryType(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '字典分类删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 100,
+  hiddenDetailButton: true,
+})
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '分类编号',
+    prop: 'dicTypeId',
+    width: '200',
+  },
+  {
+    label: '字典分类',
+    prop: 'name',
+  },
+])
+/**
+ * 加载数据
+ */
+const load = () => {
+  loading.value = true
+  getDictionaryTypeList().then((res) => {
+    loading.value = false
+    const { data: dictionaryTypeList } = res
+    dataList.length = 0
+    dataList.push(...dictionaryTypeList)
+  })
+}
 /**
  * 表单
  */
@@ -61,7 +123,6 @@ const formItems = reactive<Array<FormItem>>([
   },
 ])
 const handleFormSubmit = (form: DictionaryType, done: any) => {
-  console.log('handleFormSubmit', form)
   if (form.id) {
     updateDictionaryType(form).then(() => {
       ElMessage({
@@ -80,65 +141,6 @@ const handleFormSubmit = (form: DictionaryType, done: any) => {
     })
   }
 }
-/**
- * 工具栏
- */
-const tableToolbar = reactive<Toolbar>({
-  hiddenBatchDeleteButton: true,
-  hiddenImportButton: true,
-  hiddenExportButton: true,
-  hiddenPrintButton: true,
-})
-/**
- * 操作栏
- */
-const handleDelete = (item: DictionaryType, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.name}】的字典分类吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    deleteDictionaryType(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '字典分类删除成功',
-      })
-      done()
-    })
-  })
-}
-const tableActionbar = reactive<Actionbar>({
-  width: 100,
-  hiddenDetailButton: true,
-})
-/**
- * 表格
- */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '分类编号',
-    prop: 'dicTypeId',
-    width: '200',
-  },
-  {
-    label: '字典分类',
-    prop: 'name',
-  },
-])
-/**
- * 加载数据
- */
-const load = () => {
-  getDictionaryTypeList().then((res) => {
-    const { data: dictionaryTypeList } = res
-    dataList.length = 0
-    dataList.push(...dictionaryTypeList)
-  })
-}
 </script>
 <template>
   <quick-crud
@@ -150,6 +152,7 @@ const load = () => {
     :table-actionbar="tableActionbar"
     :table-toolbar="tableToolbar"
     dialog-titles="dialogTitles"
+    :loading="loading"
     @on-load="load"
     @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
diff --git a/src/views/system/log/error.vue b/src/views/system/log/error.vue
index f0bcb79..ffa7b4c 100644
--- a/src/views/system/log/error.vue
+++ b/src/views/system/log/error.vue
@@ -1,16 +1,17 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { FormItem } from '@/types/form'
 import { Page } from '@/types/page'
 import { Log, SearchLog } from '@/types/log'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import { getLogPageList, removeLog, batchRemove } from '@/api/log'
 
 /**
  * 属性
  */
+const loading = ref(false)
 const dataList = reactive<Array<Log>>([])
 /**
  * 分页
@@ -37,61 +38,6 @@ const searchFormItems = reactive<Array<FormItem>>([
     type: 'datetimerange',
   },
 ])
-/**
- * 表单
- */
-const dialogTitle = reactive({
-  detail: '日志详情',
-})
-const formModel = reactive<Log>({
-  id: 0,
-  logTime: '',
-  operateApi: '',
-  requestParams: '',
-  errorMessage: '',
-  exceptionMessage: '',
-  ip: '',
-  logType: 0,
-})
-const formItems = reactive<Array<FormItem>>([
-  {
-    label: '编号',
-    labelWidth: '80px',
-    vModel: 'id',
-  },
-  {
-    label: '日志时间',
-    labelWidth: '80px',
-    vModel: 'logTime',
-  },
-  {
-    label: '操作接口',
-    labelWidth: '80px',
-    vModel: 'operateApi',
-  },
-  {
-    label: 'IP',
-    labelWidth: '80px',
-    vModel: 'ip',
-  },
-  {
-    label: '错误信息',
-    labelWidth: '80px',
-    vModel: 'errorMessage',
-  },
-  {
-    label: '请求参数',
-    labelWidth: '80px',
-    vModel: 'requestParams',
-    type: 'textarea',
-  },
-  {
-    label: '异常信息',
-    labelWidth: '80px',
-    vModel: 'exceptionMessage',
-    type: 'textarea',
-  },
-])
 /**
  * 工具栏
  */
@@ -192,8 +138,9 @@ const load = (params: any) => {
   } else {
     obj = { ...params, logType: 1 }
   }
-
+  loading.value = true
   getLogPageList(obj).then((res: any) => {
+    loading.value = false
     const { data: logList, page: pagination } = res
     if (logList) {
       dataList.length = 0
@@ -204,6 +151,61 @@ const load = (params: any) => {
     }
   })
 }
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  detail: '日志详情',
+})
+const formModel = reactive<Log>({
+  id: 0,
+  logTime: '',
+  operateApi: '',
+  requestParams: '',
+  errorMessage: '',
+  exceptionMessage: '',
+  ip: '',
+  logType: 0,
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '编号',
+    labelWidth: '80px',
+    vModel: 'id',
+  },
+  {
+    label: '日志时间',
+    labelWidth: '80px',
+    vModel: 'logTime',
+  },
+  {
+    label: '操作接口',
+    labelWidth: '80px',
+    vModel: 'operateApi',
+  },
+  {
+    label: 'IP',
+    labelWidth: '80px',
+    vModel: 'ip',
+  },
+  {
+    label: '错误信息',
+    labelWidth: '80px',
+    vModel: 'errorMessage',
+  },
+  {
+    label: '请求参数',
+    labelWidth: '80px',
+    vModel: 'requestParams',
+    type: 'textarea',
+  },
+  {
+    label: '异常信息',
+    labelWidth: '80px',
+    vModel: 'exceptionMessage',
+    type: 'textarea',
+  },
+])
 </script>
 <template>
   <quick-crud
@@ -219,6 +221,7 @@ const load = (params: any) => {
     dialog-titles="dialogTitles"
     :page="page"
     :form-inline="true"
+    :loading="loading"
     @on-load="load"
     @on-detail="handleDetail"
     @on-delete="handleDelete"
diff --git a/src/views/system/log/operate.vue b/src/views/system/log/operate.vue
index 5f25a16..47eeb88 100644
--- a/src/views/system/log/operate.vue
+++ b/src/views/system/log/operate.vue
@@ -1,16 +1,17 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Log, SearchLog } from '@/types/log'
 import { FormItem } from '@/types/form'
 import { Page } from '@/types/page'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import { getLogPageList, removeLog, batchRemove } from '@/api/log'
 
 /**
  * 属性
  */
+const loading = ref(false)
 const dataList = reactive<Array<Log>>([])
 /**
  * 分页
@@ -37,50 +38,6 @@ const searchFormItems = reactive<Array<FormItem>>([
     type: 'datetimerange',
   },
 ])
-/**
- * 表单
- */
-const dialogTitle = reactive({
-  detail: '日志详情',
-})
-const formModel = reactive<Log>({
-  id: 0,
-  logTime: '',
-  operateApi: '',
-  requestParams: '',
-  errorMessage: '',
-  exceptionMessage: '',
-  ip: '',
-  logType: 0,
-})
-const formItems = reactive<Array<FormItem>>([
-  {
-    label: '编号',
-    labelWidth: '80px',
-    vModel: 'id',
-  },
-  {
-    label: '日志时间',
-    labelWidth: '80px',
-    vModel: 'logTime',
-  },
-  {
-    label: 'IP',
-    labelWidth: '80px',
-    vModel: 'ip',
-  },
-  {
-    label: '操作接口',
-    labelWidth: '80px',
-    vModel: 'operateApi',
-  },
-  {
-    label: '请求参数',
-    labelWidth: '80px',
-    vModel: 'requestParams',
-    type: 'textarea',
-  },
-])
 /**
  * 工具栏
  */
@@ -182,7 +139,9 @@ const load = (params: any) => {
   } else {
     obj = { ...params, logType: 0, logTime: null }
   }
+  loading.value = true
   getLogPageList(obj).then((res) => {
+    loading.value = false
     const { data: logList, page: pagination } = res
     if (logList) {
       dataList.length = 0
@@ -193,6 +152,50 @@ const load = (params: any) => {
     }
   })
 }
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  detail: '日志详情',
+})
+const formModel = reactive<Log>({
+  id: 0,
+  logTime: '',
+  operateApi: '',
+  requestParams: '',
+  errorMessage: '',
+  exceptionMessage: '',
+  ip: '',
+  logType: 0,
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '编号',
+    labelWidth: '80px',
+    vModel: 'id',
+  },
+  {
+    label: '日志时间',
+    labelWidth: '80px',
+    vModel: 'logTime',
+  },
+  {
+    label: 'IP',
+    labelWidth: '80px',
+    vModel: 'ip',
+  },
+  {
+    label: '操作接口',
+    labelWidth: '80px',
+    vModel: 'operateApi',
+  },
+  {
+    label: '请求参数',
+    labelWidth: '80px',
+    vModel: 'requestParams',
+    type: 'textarea',
+  },
+])
 </script>
 <template>
   <quick-crud
@@ -207,6 +210,7 @@ const load = (params: any) => {
     :search-form-model="searchForm"
     dialog-titles="dialogTitles"
     :page="page"
+    :loading="loading"
     @on-load="load"
     @on-detail="handleDetail"
     @on-delete="handleDelete"
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index bde4019..4fc5c18 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,20 +1,176 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { selectTreeFormat, listToTree } from '@/utils/index'
 import elementPlusIcons from '@/config/custormIcons.json'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Menu } from '@/types/menu'
 import { FormItem } from '@/types/form'
 import { Options } from '@/types/options'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import { getMenuList, addMenu, updateMenu, deleteMenu } from '@/api/menu'
 
 /**
  * 属性
  */
+const loading = ref(false)
 const dataList = reactive<Array<Menu>>([])
 const parentTreeList = reactive<Array<Options>>([])
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenBatchDeleteButton: true,
+  hiddenImportButton: true,
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+})
+/**
+ * 操作栏
+ */
+const handleEdit = (form: Menu, done: any) => {
+  const model = { ...form }
+  if (!model.pid) {
+    model.pid = ''
+  } else {
+    model.pid = model.pid.toString()
+  }
+  done(model)
+}
+const handleDetail = (form: Menu, done: any) => {
+  const model = { ...form }
+  if (!model.pid) {
+    model.pid = ''
+  } else {
+    model.pid = model.pid.toString()
+  }
+  done(model)
+}
+const handleDelete = (item: Menu, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.menuName}】的菜单吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteMenu(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '菜单删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 150,
+})
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '菜单编号',
+    prop: 'menuId',
+    width: '200',
+  },
+  {
+    label: '菜单名称',
+    prop: 'menuName',
+    width: '200',
+    fixed: true,
+  },
+  {
+    label: '路由',
+    prop: 'path',
+    width: '200',
+  },
+  {
+    label: '视图',
+    prop: 'viewPath',
+    width: '200',
+  },
+  {
+    label: '菜单类型',
+    prop: 'menuType',
+    width: '200',
+    format: (row: Menu) => {
+      if (row.menuType === 0) {
+        return '目录'
+      }
+      if (row.menuType === 1) {
+        return '菜单'
+      }
+      if (row.menuType === 2) {
+        return '按钮'
+      }
+      return ''
+    },
+  },
+  {
+    label: '菜单图标',
+    prop: 'icon',
+    width: '200',
+  },
+  {
+    label: '菜单排序',
+    prop: 'sort',
+    width: '200',
+  },
+  {
+    label: '是否外链',
+    prop: 'link',
+    width: '200',
+    format: (row: Menu) => {
+      return row.link === 1 ? '外链' : '非外链'
+    },
+  },
+  {
+    label: '是否启用',
+    prop: 'enabled',
+    width: '200',
+    format: (row: Menu) => {
+      return row.enabled === 1 ? '启用' : '禁用'
+    },
+  },
+  {
+    label: '是否显示',
+    prop: 'status',
+    width: '200',
+    format: (row: Menu) => {
+      return row.status === 1 ? '显示' : '不显示'
+    },
+  },
+])
+/**
+ * 加载数据
+ */
+const load = () => {
+  loading.value = true
+  getMenuList().then((res) => {
+    loading.value = false
+    const { data: menuList } = res
+    const menuTree = listToTree(menuList, 0, {
+      pId: 'pid',
+    })
+    dataList.length = 0
+    dataList.push(...menuTree)
+
+    const parentMenuList = menuList.filter((x) => x.menuType !== 2)
+    const parentTree = listToTree(parentMenuList, 0, {
+      pId: 'pid',
+    })
+    const selectTreeData = selectTreeFormat(parentTree, {
+      value: 'id',
+      label: 'menuName',
+    })
+    parentTreeList.length = 0
+    parentTreeList.push(...selectTreeData)
+  })
+}
 /**
  * 表单
  */
@@ -202,141 +358,6 @@ const handleFormSubmit = (form: Menu, done: any) => {
     })
   }
 }
-/**
- * 工具栏
- */
-const tableToolbar = reactive<Toolbar>({
-  hiddenBatchDeleteButton: true,
-  hiddenImportButton: true,
-  hiddenExportButton: true,
-  hiddenPrintButton: true,
-})
-/**
- * 操作栏
- */
-const handleDelete = (item: Menu, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.menuName}】的菜单吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    deleteMenu(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '菜单删除成功',
-      })
-      done()
-    })
-  })
-}
-const tableActionbar = reactive<Actionbar>({
-  width: 150,
-})
-/**
- * 表格
- */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '菜单编号',
-    prop: 'menuId',
-    width: '200',
-  },
-  {
-    label: '菜单名称',
-    prop: 'menuName',
-    width: '200',
-    fixed: true,
-  },
-  {
-    label: '路由',
-    prop: 'path',
-    width: '200',
-  },
-  {
-    label: '视图',
-    prop: 'viewPath',
-    width: '200',
-  },
-  {
-    label: '菜单类型',
-    prop: 'menuType',
-    width: '200',
-    format: (row: Menu) => {
-      if (row.menuType === 0) {
-        return '目录'
-      }
-      if (row.menuType === 1) {
-        return '菜单'
-      }
-      if (row.menuType === 2) {
-        return '按钮'
-      }
-      return ''
-    },
-  },
-  {
-    label: '菜单图标',
-    prop: 'icon',
-    width: '200',
-  },
-  {
-    label: '菜单排序',
-    prop: 'sort',
-    width: '200',
-  },
-  {
-    label: '是否外链',
-    prop: 'link',
-    width: '200',
-    format: (row: Menu) => {
-      return row.link === 1 ? '外链' : '非外链'
-    },
-  },
-  {
-    label: '是否启用',
-    prop: 'enabled',
-    width: '200',
-    format: (row: Menu) => {
-      return row.enabled === 1 ? '启用' : '禁用'
-    },
-  },
-  {
-    label: '是否显示',
-    prop: 'status',
-    width: '200',
-    format: (row: Menu) => {
-      return row.status === 1 ? '显示' : '不显示'
-    },
-  },
-])
-/**
- * 加载数据
- */
-const load = () => {
-  getMenuList().then((res) => {
-    const { data: menuList } = res
-    const menuTree = listToTree(menuList, 0, {
-      pId: 'pid',
-    })
-    dataList.length = 0
-    dataList.push(...menuTree)
-
-    const parentMenuList = menuList.filter((x) => x.menuType !== 2)
-    const parentTree = listToTree(parentMenuList, 0, {
-      pId: 'pid',
-    })
-    const selectTreeData = selectTreeFormat(parentTree, {
-      value: 'id',
-      label: 'menuName',
-    })
-    parentTreeList.length = 0
-    parentTreeList.push(...selectTreeData)
-  })
-}
 </script>
 <template>
   <quick-crud
@@ -349,8 +370,11 @@ const load = () => {
     :table-actionbar="tableActionbar"
     :table-toolbar="tableToolbar"
     dialog-titles="dialogTitles"
+    :loading="loading"
     @on-load="load"
     @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
+    @on-edit="handleEdit"
+    @on-detail="handleDetail"
   ></quick-crud>
 </template>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 830cd1d..9e8299b 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,16 +1,77 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { Role } from '@/types/role'
 import { FormItem } from '@/types/form'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import { getRoleList, addRole, updateRole, deleteRole } from '@/api/role'
 
 /**
  * 属性
  */
+const loading = ref(false)
 const dataList = reactive<Array<Role>>([])
+/**
+ * 工具栏
+ */
+const tableToolbar = reactive<Toolbar>({
+  hiddenBatchDeleteButton: true,
+  hiddenImportButton: true,
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+})
+/**
+ * 操作栏
+ */
+const tableActionbar = reactive<Actionbar>({
+  width: 150,
+})
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '角色编号',
+    prop: 'roleId',
+    width: '200',
+  },
+  {
+    label: '角色名称',
+    prop: 'roleName',
+  },
+])
+const handleDelete = (item: Role, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteRole(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '角色删除成功',
+      })
+      done()
+    })
+  })
+}
+/**
+ * 加载数据
+ */
+const load = () => {
+  loading.value = true
+  getRoleList().then((res) => {
+    loading.value = false
+    const { data: roleList } = res
+    dataList.length = 0
+    dataList.push(...roleList)
+  })
+}
 /**
  * 表单
  */
@@ -56,7 +117,6 @@ const formItems = reactive<Array<FormItem>>([
   },
 ])
 const handleFormSubmit = (form: Role, done: any) => {
-  console.log('handleFormSubmit', form)
   if (form.id) {
     updateRole(form).then(() => {
       ElMessage({
@@ -75,64 +135,6 @@ const handleFormSubmit = (form: Role, done: any) => {
     })
   }
 }
-/**
- * 工具栏
- */
-const tableToolbar = reactive<Toolbar>({
-  hiddenBatchDeleteButton: true,
-  hiddenImportButton: true,
-  hiddenExportButton: true,
-  hiddenPrintButton: true,
-})
-/**
- * 操作栏
- */
-const tableActionbar = reactive<Actionbar>({
-  width: 150,
-})
-/**
- * 表格
- */
-const tableColumns = reactive<Array<Column>>([
-  {
-    width: '50',
-    type: 'selection',
-  },
-  {
-    label: '角色编号',
-    prop: 'roleId',
-    width: '200',
-  },
-  {
-    label: '角色名称',
-    prop: 'roleName',
-  },
-])
-const handleDelete = (item: Role, done: any) => {
-  ElMessageBox.confirm(`你真的删除【${item.roleName}】的角色吗？`, '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    deleteRole(item.id).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '角色删除成功',
-      })
-      done()
-    })
-  })
-}
-/**
- * 加载数据
- */
-const load = () => {
-  getRoleList().then((res) => {
-    const { data: roleList } = res
-    dataList.length = 0
-    dataList.push(...roleList)
-  })
-}
 </script>
 <template>
   <quick-crud
@@ -144,6 +146,7 @@ const load = () => {
     :table-actionbar="tableActionbar"
     :table-toolbar="tableToolbar"
     dialog-titles="dialogTitles"
+    :loading="loading"
     @on-load="load"
     @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index bd45c49..e3383f8 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import QuickCrud from '@/components/QuickCrud/index.vue'
 import { Column, Actionbar, Toolbar } from '@/types/table'
 import { User, SearchUser } from '@/types/user'
 import { FormItem } from '@/types/form'
 import { Page } from '@/types/page'
+import QuickCrud from '@/components/QuickCrud/index.vue'
 import {
   getUserPageList,
   addUser,
@@ -20,6 +20,7 @@ import {
 /**
  * 属性
  */
+const loading = ref(false)
 const dataList = reactive<Array<User>>([])
 /**
  * 分页
@@ -43,184 +44,6 @@ const searchFormItems = reactive<Array<FormItem>>([
     placeholder: '用户名',
   },
 ])
-/**
- * 表单
- */
-const dialogTitle = reactive({
-  add: '添加用户',
-  edit: '编辑用户',
-  detail: '用户详情',
-})
-const validateUserId = (rule: any, value: string, callback: any) => {
-  const reg = /^YH_\d+$/
-  if (!reg.test(value)) {
-    callback(new Error('用户编号必须是以YH_开头和数字组合'))
-  } else {
-    callback()
-  }
-}
-const validateUserName = (rule: any, value: string, callback: any) => {
-  const reg = /^[a-zA-Z0-9]{4,16}$/
-  if (!reg.test(value)) {
-    callback(new Error('用户必须是4-16位的字母、数字'))
-  } else {
-    callback()
-  }
-}
-const validateFullName = (rule: any, value: string, callback: any) => {
-  const reg = /^[\u4e00-\u9fa5]{2,4}$/
-  if (!value) {
-    callback()
-  } else if (!reg.test(value)) {
-    callback(new Error('非法姓名'))
-  } else {
-    callback()
-  }
-}
-const validatePhone = (rule: any, value: string, callback: any) => {
-  const reg =
-    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
-  if (!value) {
-    callback()
-  } else if (!reg.test(value)) {
-    callback(new Error('非法手机号'))
-  } else {
-    callback()
-  }
-}
-const validateEmail = (rule: any, value: string, callback: any) => {
-  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
-  if (!value) {
-    callback()
-  } else if (!reg.test(value)) {
-    callback(new Error('非法邮箱'))
-  } else {
-    callback()
-  }
-}
-const formModel = reactive<User>({
-  id: '',
-  userId: '',
-  userName: '',
-  fullName: '',
-  phone: '',
-  email: '',
-  address: '',
-  remark: '',
-})
-const formItems = reactive<Array<FormItem>>([
-  {
-    label: '用户编号',
-    labelWidth: '80px',
-    vModel: 'userId',
-    editReadonly: true,
-    placeholder: '用户编号',
-    prop: 'userId',
-    rules: [
-      {
-        required: true,
-        message: '用户编号不能为空',
-        trigger: 'blur',
-      },
-      {
-        validator: validateUserId,
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '用户名',
-    labelWidth: '80px',
-    vModel: 'userName',
-    placeholder: '用户名',
-    prop: 'userName',
-    rules: [
-      {
-        required: true,
-        message: '用户名不能为空',
-        trigger: 'blur',
-      },
-      {
-        validator: validateUserName,
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '姓名',
-    labelWidth: '80px',
-    vModel: 'fullName',
-    placeholder: '姓名',
-    prop: 'fullName',
-    rules: [
-      {
-        validator: validateFullName,
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '手机号',
-    labelWidth: '80px',
-    vModel: 'phone',
-    placeholder: '手机号',
-    prop: 'phone',
-    rules: [
-      {
-        validator: validatePhone,
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '邮箱',
-    labelWidth: '80px',
-    vModel: 'email',
-    placeholder: '邮箱',
-    prop: 'email',
-    rules: [
-      {
-        validator: validateEmail,
-        trigger: 'blur',
-      },
-    ],
-  },
-  {
-    label: '地址',
-    labelWidth: '80px',
-    vModel: 'address',
-    placeholder: '地址',
-    prop: 'address',
-  },
-  {
-    label: '备注',
-    labelWidth: '80px',
-    vModel: 'remark',
-    placeholder: '备注',
-    type: 'textarea',
-    prop: 'remark',
-  },
-])
-const handleFormSubmit = (form: User, done: any) => {
-  console.log('handleFormSubmit', form)
-  if (form.id) {
-    updateUser(form).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '用户修改成功',
-      })
-      done()
-    })
-  } else {
-    addUser(form).then(() => {
-      ElMessage({
-        type: 'success',
-        message: '用户创建成功',
-      })
-      done()
-    })
-  }
-}
 /**
  * 工具栏
  */
@@ -405,7 +228,9 @@ const tableColumns = reactive<Array<Column>>([
  * 加载数据
  */
 const load = (parmas: object) => {
+  loading.value = true
   getUserPageList(parmas).then((res) => {
+    loading.value = false
     const { data: userList, page: pagination } = res
     if (userList) {
       dataList.length = 0
@@ -416,6 +241,183 @@ const load = (parmas: object) => {
     }
   })
 }
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '添加用户',
+  edit: '编辑用户',
+  detail: '用户详情',
+})
+const validateUserId = (rule: any, value: string, callback: any) => {
+  const reg = /^YH_\d+$/
+  if (!reg.test(value)) {
+    callback(new Error('用户编号必须是以YH_开头和数字组合'))
+  } else {
+    callback()
+  }
+}
+const validateUserName = (rule: any, value: string, callback: any) => {
+  const reg = /^[a-zA-Z0-9]{4,16}$/
+  if (!reg.test(value)) {
+    callback(new Error('用户必须是4-16位的字母、数字'))
+  } else {
+    callback()
+  }
+}
+const validateFullName = (rule: any, value: string, callback: any) => {
+  const reg = /^[\u4e00-\u9fa5]{2,4}$/
+  if (!value) {
+    callback()
+  } else if (!reg.test(value)) {
+    callback(new Error('非法姓名'))
+  } else {
+    callback()
+  }
+}
+const validatePhone = (rule: any, value: string, callback: any) => {
+  const reg =
+    /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
+  if (!value) {
+    callback()
+  } else if (!reg.test(value)) {
+    callback(new Error('非法手机号'))
+  } else {
+    callback()
+  }
+}
+const validateEmail = (rule: any, value: string, callback: any) => {
+  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
+  if (!value) {
+    callback()
+  } else if (!reg.test(value)) {
+    callback(new Error('非法邮箱'))
+  } else {
+    callback()
+  }
+}
+const formModel = reactive<User>({
+  id: '',
+  userId: '',
+  userName: '',
+  fullName: '',
+  phone: '',
+  email: '',
+  address: '',
+  remark: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '用户编号',
+    labelWidth: '80px',
+    vModel: 'userId',
+    editReadonly: true,
+    placeholder: '用户编号',
+    prop: 'userId',
+    rules: [
+      {
+        required: true,
+        message: '用户编号不能为空',
+        trigger: 'blur',
+      },
+      {
+        validator: validateUserId,
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '用户名',
+    labelWidth: '80px',
+    vModel: 'userName',
+    placeholder: '用户名',
+    prop: 'userName',
+    rules: [
+      {
+        required: true,
+        message: '用户名不能为空',
+        trigger: 'blur',
+      },
+      {
+        validator: validateUserName,
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '姓名',
+    labelWidth: '80px',
+    vModel: 'fullName',
+    placeholder: '姓名',
+    prop: 'fullName',
+    rules: [
+      {
+        validator: validateFullName,
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '手机号',
+    labelWidth: '80px',
+    vModel: 'phone',
+    placeholder: '手机号',
+    prop: 'phone',
+    rules: [
+      {
+        validator: validatePhone,
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '邮箱',
+    labelWidth: '80px',
+    vModel: 'email',
+    placeholder: '邮箱',
+    prop: 'email',
+    rules: [
+      {
+        validator: validateEmail,
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '地址',
+    labelWidth: '80px',
+    vModel: 'address',
+    placeholder: '地址',
+    prop: 'address',
+  },
+  {
+    label: '备注',
+    labelWidth: '80px',
+    vModel: 'remark',
+    placeholder: '备注',
+    type: 'textarea',
+    prop: 'remark',
+  },
+])
+const handleFormSubmit = (form: User, done: any) => {
+  if (form.id) {
+    updateUser(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户修改成功',
+      })
+      done()
+    })
+  } else {
+    addUser(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '用户创建成功',
+      })
+      done()
+    })
+  }
+}
 </script>
 <template>
   <quick-crud
@@ -430,6 +432,7 @@ const load = (parmas: object) => {
     :search-form-model="searchForm"
     dialog-titles="dialogTitles"
     :page="page"
+    :loading="loading"
     @on-load="load"
     @on-form-submit="handleFormSubmit"
     @on-delete="handleDelete"
diff --git a/tsconfig.json b/tsconfig.json
index 35933cf..2bff026 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,13 +12,19 @@
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
     "skipLibCheck": true,
-    "types": ["element-plus/global"],
+    "types": ["element-plus/global", "pinia-plugin-persist"],
     "suppressImplicitAnyIndexErrors": true,
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]
-    }
-    // "type": ["pinia-plugin-persist"]
+    },
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "strictBindCallApply": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
-- 
Gitee