fix

yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts

@@ -15,12 +15,10 @@ import { FormSchema } from '@/types/form'
 import { ComponentOptions } from '@/types/components'
 
 export type VxeCrudSchema = {
-  // 主键ID
-  primaryKey?: string
-  primaryType?: VxeColumnPropTypes.Type
-  // 是否开启操作栏插槽
-  action?: boolean
-  actionWidth?: string
+  primaryKey?: string // 主键ID
+  primaryType?: VxeColumnPropTypes.Type // 不填写为数据库编号 还支持 "seq" | "radio" | "checkbox" | "expand" | "html" | null
+  action?: boolean // 是否开启操作栏插槽
+  actionWidth?: string // 操作栏插槽宽度，一般1个 text 类型按钮 60-80
   columns: VxeCrudColumns[]
 }
 type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & {
@@ -173,7 +171,7 @@ const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns
     const tableSchemaItem = {
       title: t('common.index'),
       field: crudSchema.primaryKey,
-      type: crudSchema.primaryType ? crudSchema.primaryType : 'seq',
+      type: crudSchema.primaryType ? crudSchema.primaryType : null,
       width: '50px'
     }
     tableSchema.push(tableSchemaItem)

yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts

@@ -12,7 +12,7 @@ const message = useMessage() // 消息弹窗
 interface UseVxeGridConfig<T = any> {
   allSchemas: VxeAllSchemas
   getListApi: (option: any) => Promise<T>
-  delListApi?: (option: any) => Promise<T>
+  deleteApi?: (option: any) => Promise<T>
   exportListApi?: (option: any) => Promise<T>
   exportName?: string
 }
@@ -150,12 +150,12 @@ export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
    * @param ids rowid
    * @returns
    */
-  const delList = async (ref, ids: string | number | string[] | number[]) => {
+  const deleteData = async (ref, ids: string | number) => {
     if (!ref) {
       console.error('未传入gridRef')
       return
     }
-    if (!config?.delListApi) {
+    if (!config?.deleteApi) {
       console.error('未传入delListApi')
       return
     }
@@ -164,7 +164,7 @@ export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
       message
         .delConfirm()
         .then(() => {
-          config?.delListApi && config?.delListApi(ids)
+          config?.deleteApi && config?.deleteApi(ids)
           message.success(t('common.delSuccess'))
         })
         .finally(async () => {
@@ -216,7 +216,7 @@ export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
     gridOptions,
     reloadList,
     getSearchData,
-    delList,
+    deleteData,
     exportList,
     zoom
   }

yudao-ui-admin-vue3/src/views/bpm/group/index.vue

@@ -10,7 +10,7 @@ import type { UserGroupVO } from '@/api/bpm/userGroup/types'
 import { rules, allSchemas } from './group.data'
 import * as UserGroupApi from '@/api/bpm/userGroup'
 import { getListSimpleUsersApi } from '@/api/system/user'
-import { UserVO } from '@/api/system/user/types'
+import { UserVO } from '@/api/system/user'
 
 const { t } = useI18n() // 国际化
 

yudao-ui-admin-vue3/src/views/system/errorCode/index.vue

@@ -83,10 +83,10 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // grid Ref
-const { gridOptions, reloadList, delList } = useVxeGrid<ErrorCodeApi.ErrorCodeVO>({
+const { gridOptions, reloadList, deleteData } = useVxeGrid<ErrorCodeApi.ErrorCodeVO>({
   allSchemas: allSchemas,
   getListApi: ErrorCodeApi.getErrorCodePageApi,
-  delListApi: ErrorCodeApi.deleteErrorCodeApi
+  deleteApi: ErrorCodeApi.deleteErrorCodeApi
 })
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
@@ -110,23 +110,23 @@ const handleCreate = () => {
 
 // 修改操作
 const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
   // 设置数据
   const res = await ErrorCodeApi.getErrorCodeApi(rowId)
   unref(formRef)?.setValues(res)
+  setDialogTile('update')
 }
 
 // 详情操作
 const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
   // 设置数据
   const res = await ErrorCodeApi.getErrorCodeApi(rowId)
   detailRef.value = res
+  setDialogTile('detail')
 }
 
 // 删除操作
 const handleDelete = async (rowId: number) => {
-  delList(xGrid, rowId)
+  await deleteData(xGrid, rowId)
 }
 
 // 提交新增/修改的表单
@@ -150,7 +150,7 @@ const submitForm = async () => {
       } finally {
         actionLoading.value = false
         // 刷新列表
-        reloadList(xGrid)
+        await reloadList(xGrid)
       }
     }
   })

yudao-ui-admin-vue3/src/views/system/loginlog/index.vue

@@ -59,6 +59,6 @@ const handleDetail = async (row: LoginLogVO) => {
 
 // 导出操作
 const handleExport = async () => {
-  exportList(xGrid, '登录列表.xls')
+  await exportList(xGrid, '登录列表.xls')
 }
 </script>

yudao-ui-admin-vue3/src/views/system/notice/index.vue

@@ -82,10 +82,10 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions, reloadList, delList } = useVxeGrid<NoticeApi.NoticeVO>({
+const { gridOptions, reloadList, deleteData } = useVxeGrid<NoticeApi.NoticeVO>({
   allSchemas: allSchemas,
   getListApi: NoticeApi.getNoticePageApi,
-  delListApi: NoticeApi.deleteNoticeApi
+  deleteApi: NoticeApi.deleteNoticeApi
 })
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
@@ -109,23 +109,23 @@ const handleCreate = () => {
 
 // 修改操作
 const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
   // 设置数据
   const res = await NoticeApi.getNoticeApi(rowId)
   unref(formRef)?.setValues(res)
+  setDialogTile('update')
 }
 
 // 详情操作
 const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
   // 设置数据
   const res = await NoticeApi.getNoticeApi(rowId)
   detailRef.value = res
+  setDialogTile('detail')
 }
 
 // 删除操作
 const handleDelete = async (rowId: number) => {
-  delList(xGrid, rowId)
+  await deleteData(xGrid, rowId)
 }
 
 // 提交新增/修改的表单
@@ -148,8 +148,7 @@ const submitForm = async () => {
         dialogVisible.value = false
       } finally {
         actionLoading.value = false
-        // 刷新列表 TODO 星语：这里要有个 await
-        reloadList(xGrid)
+        await reloadList(xGrid)
       }
     }
   })

yudao-ui-admin-vue3/src/views/system/oauth2/client/index.vue

@@ -94,10 +94,10 @@ const message = useMessage() // 消息弹窗
 
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions, reloadList, delList } = useVxeGrid<ClientApi.OAuth2ClientVO>({
+const { gridOptions, reloadList, deleteData } = useVxeGrid<ClientApi.OAuth2ClientVO>({
   allSchemas: allSchemas,
   getListApi: ClientApi.getOAuth2ClientPageApi,
-  delListApi: ClientApi.deleteOAuth2ClientApi
+  deleteApi: ClientApi.deleteOAuth2ClientApi
 })
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
@@ -121,22 +121,22 @@ const handleCreate = () => {
 
 // 修改操作
 const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
   // 设置数据
   const res = await ClientApi.getOAuth2ClientApi(rowId)
   unref(formRef)?.setValues(res)
+  setDialogTile('update')
 }
 
 // 详情操作
 const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
   const res = await ClientApi.getOAuth2ClientApi(rowId)
   detailRef.value = res
+  setDialogTile('detail')
 }
 
 // 删除操作
 const handleDelete = async (rowId: number) => {
-  delList(xGrid, rowId)
+  await deleteData(xGrid, rowId)
 }
 
 // 提交新增/修改的表单
@@ -160,7 +160,7 @@ const submitForm = async () => {
       } finally {
         actionLoading.value = false
         // 刷新列表
-        reloadList(xGrid)
+        await reloadList(xGrid)
       }
     }
   })

yudao-ui-admin-vue3/src/views/system/oauth2/token/index.vue

@@ -63,9 +63,9 @@ const handleForceLogout = (rowId: number) => {
       await TokenApi.deleteAccessTokenApi(rowId)
       message.success(t('common.success'))
     })
-    .finally(() => {
+    .finally(async () => {
       // 刷新列表
-      reloadList(xGrid)
+      await reloadList(xGrid)
     })
 }
 </script>

yudao-ui-admin-vue3/src/views/system/operatelog/index.vue

@@ -74,7 +74,6 @@ const handleDetail = (row: OperateLogApi.OperateLogVO) => {
 
 // 导出操作
 const handleExport = async () => {
-  // TODO 星语：缺少 await 噢
-  exportList(xGrid, '岗位列表.xls')
+  await exportList(xGrid, '岗位列表.xls')
 }
 </script>

yudao-ui-admin-vue3/src/views/system/post/index.vue

@@ -46,7 +46,7 @@
     </vxe-grid>
   </ContentWrap>
   <!-- 弹窗 -->
-  <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
+  <XModal id="postModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
     <!-- 表单：添加/修改 -->
     <Form
       ref="formRef"
@@ -70,7 +70,7 @@
         @click="submitForm()"
       />
       <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
+      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
     </template>
   </XModal>
 </template>
@@ -90,15 +90,16 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions, reloadList, delList, exportList } = useVxeGrid<PostApi.PostVO>({
+const { gridOptions, reloadList, deleteData, exportList } = useVxeGrid<PostApi.PostVO>({
   allSchemas: allSchemas,
   getListApi: PostApi.getPostPageApi,
-  delListApi: PostApi.deletePostApi,
+  deleteApi: PostApi.deletePostApi,
   exportListApi: PostApi.exportPostApi
 })
 // 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
+const modelVisible = ref(false) // 是否显示弹出层
+const modelTitle = ref('edit') // 弹出层标题
+const modelLoading = ref(false) // 弹出层loading
 const actionType = ref('') // 操作按钮的类型
 const actionLoading = ref(false) // 按钮 Loading
 const formRef = ref<FormExpose>() // 表单 Ref
@@ -106,27 +107,29 @@ const detailData = ref() // 详情 Ref
 
 // 设置标题
 const setDialogTile = (type: string) => {
-  dialogTitle.value = t('action.' + type)
+  modelLoading.value = true
+  modelTitle.value = t('action.' + type)
   actionType.value = type
-  dialogVisible.value = true
+  modelVisible.value = true
 }
 
 // 新增操作
 const handleCreate = () => {
   setDialogTile('create')
+  modelLoading.value = false
 }
 
 // 导出操作
 const handleExport = async () => {
   await exportList(xGrid, '岗位列表.xls')
 }
-
 // 修改操作
 const handleUpdate = async (rowId: number) => {
   setDialogTile('update')
   // 设置数据
   const res = await PostApi.getPostApi(rowId)
   unref(formRef)?.setValues(res)
+  modelLoading.value = false
 }
 
 // 详情操作
@@ -134,11 +137,12 @@ const handleDetail = async (rowId: number) => {
   setDialogTile('detail')
   const res = await PostApi.getPostApi(rowId)
   detailData.value = res
+  modelLoading.value = false
 }
 
 // 删除操作
 const handleDelete = async (rowId: number) => {
-  await delList(xGrid, rowId)
+  await deleteData(xGrid, rowId)
 }
 
 // 提交新增/修改的表单
@@ -158,11 +162,11 @@ const submitForm = async () => {
           await PostApi.updatePostApi(data)
           message.success(t('common.updateSuccess'))
         }
-        dialogVisible.value = false
+        modelVisible.value = false
       } finally {
         actionLoading.value = false
         // 刷新列表
-        reloadList(xGrid)
+        await reloadList(xGrid)
       }
     }
   })

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

@@ -15,7 +15,6 @@ export const rules = reactive({
 // CrudSchema
 const crudSchemas = reactive<VxeCrudSchema>({
   primaryKey: 'id',
-  primaryType: 'seq',
   action: true,
   columns: [
     {

yudao-ui-admin-vue3/src/views/system/role/index.vue

@@ -174,10 +174,10 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions, reloadList, delList } = useVxeGrid<RoleApi.RoleVO>({
+const { gridOptions, reloadList, deleteData } = useVxeGrid<RoleApi.RoleVO>({
   allSchemas: allSchemas,
   getListApi: RoleApi.getRolePageApi,
-  delListApi: RoleApi.deleteRoleApi
+  deleteApi: RoleApi.deleteRoleApi
 })
 
 // ========== CRUD 相关 ==========
@@ -202,15 +202,23 @@ const handleCreate = () => {
 
 // 修改操作
 const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
   // 设置数据
   const res = await RoleApi.getRoleApi(rowId)
   unref(formRef)?.setValues(res)
+  setDialogTile('update')
+}
+
+// 详情操作
+const handleDetail = async (rowId: number) => {
+  // 设置数据
+  const res = await RoleApi.getRoleApi(rowId)
+  detailRef.value = res
+  setDialogTile('detail')
 }
 
 // 删除操作
 const handleDelete = async (rowId: number) => {
-  await delList(xGrid, rowId)
+  await deleteData(xGrid, rowId)
 }
 
 // 提交按钮
@@ -234,20 +242,12 @@ const submitForm = async () => {
       } finally {
         actionLoading.value = false
         // 刷新列表
-        reloadList(xGrid)
+        await reloadList(xGrid)
       }
     }
   })
 }
 
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  // 设置数据
-  const res = await RoleApi.getRoleApi(rowId)
-  detailRef.value = res
-}
-
 // ========== 数据权限 ==========
 const dataScopeForm = reactive({
   id: 0,

yudao-ui-admin-vue3/src/views/system/sms/smsChannel/index.vue

@@ -85,10 +85,10 @@ const message = useMessage() // 消息弹窗
 
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions, reloadList, delList } = useVxeGrid<SmsChannelApi.SmsChannelVO>({
+const { gridOptions, reloadList, deleteData } = useVxeGrid<SmsChannelApi.SmsChannelVO>({
   allSchemas: allSchemas,
   getListApi: SmsChannelApi.getSmsChannelPageApi,
-  delListApi: SmsChannelApi.deleteSmsChannelApi
+  deleteApi: SmsChannelApi.deleteSmsChannelApi
 })
 
 // 弹窗相关的变量
@@ -113,22 +113,22 @@ const handleCreate = () => {
 
 // 修改操作
 const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
   // 设置数据
   const res = await SmsChannelApi.getSmsChannelApi(rowId)
   unref(formRef)?.setValues(res)
+  setDialogTile('update')
 }
 
 // 详情操作
 const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
   const res = await SmsChannelApi.getSmsChannelApi(rowId)
   detailData.value = res
+  setDialogTile('detail')
 }
 
 // 删除操作
 const handleDelete = async (rowId: number) => {
-  await delList(xGrid, rowId)
+  await deleteData(xGrid, rowId)
 }
 
 // 提交按钮
@@ -152,7 +152,7 @@ const submitForm = async () => {
       } finally {
         actionLoading.value = false
         // 刷新列表
-        reloadList(xGrid)
+        await reloadList(xGrid)
       }
     }
   })

yudao-ui-admin-vue3/src/views/system/sms/smsTemplate/index.vue

@@ -127,10 +127,10 @@ const message = useMessage() // 消息弹窗
 
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions, reloadList, delList } = useVxeGrid<SmsTemplateApi.SmsTemplateVO>({
+const { gridOptions, reloadList, deleteData } = useVxeGrid<SmsTemplateApi.SmsTemplateVO>({
   allSchemas: allSchemas,
   getListApi: SmsTemplateApi.getSmsTemplatePageApi,
-  delListApi: SmsTemplateApi.deleteSmsTemplateApi
+  deleteApi: SmsTemplateApi.deleteSmsTemplateApi
 })
 
 // 弹窗相关的变量
@@ -155,23 +155,23 @@ const handleCreate = () => {
 
 // 修改操作
 const handleUpdate = async (rowId: number) => {
-  setDialogTile('update')
   // 设置数据
   const res = await SmsTemplateApi.getSmsTemplateApi(rowId)
   unref(formRef)?.setValues(res)
+  setDialogTile('update')
 }
 
 // 详情操作
 const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
   // 设置数据
   const res = await SmsTemplateApi.getSmsTemplateApi(rowId)
   detailData.value = res
+  setDialogTile('detail')
 }
 
 // 删除操作
 const handleDelete = async (rowId: number) => {
-  await delList(xGrid, rowId)
+  await deleteData(xGrid, rowId)
 }
 
 // 提交按钮
@@ -195,7 +195,7 @@ const submitForm = async () => {
       } finally {
         actionLoading.value = false
         // 刷新列表
-        reloadList(xGrid)
+        await reloadList(xGrid)
       }
     }
   })

yudao-ui-admin-vue3/src/views/system/user/index.vue

@@ -72,7 +72,7 @@
             preIcon="ep:view"
             :title="t('action.detail')"
             v-hasPermi="['system:user:update']"
-            @click="handleDetail(row)"
+            @click="handleDetail(row.id)"
           />
           <XTextButton
             preIcon="ep:key"
@@ -292,12 +292,13 @@ const defaultProps = {
 const tableTitle = ref('用户列表')
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions, reloadList, delList, exportList, getSearchData } = useVxeGrid<UserApi.UserVO>({
-  allSchemas: allSchemas,
-  getListApi: UserApi.getUserPageApi,
-  delListApi: UserApi.deleteUserApi,
-  exportListApi: UserApi.exportUserApi
-})
+const { gridOptions, reloadList, deleteData, exportList, getSearchData } =
+  useVxeGrid<UserApi.UserVO>({
+    allSchemas: allSchemas,
+    getListApi: UserApi.getUserPageApi,
+    deleteApi: UserApi.deleteUserApi,
+    exportListApi: UserApi.exportUserApi
+  })
 // ========== 创建部门树结构 ==========
 const filterText = ref('')
 const deptOptions = ref<any[]>([]) // 树形结构
@@ -360,7 +361,6 @@ const handleCreate = async () => {
 
 // 修改操作
 const handleUpdate = async (rowId: number) => {
-  await setDialogTile('update')
   unref(formRef)?.delSchema('username')
   unref(formRef)?.delSchema('password')
   // 设置数据
@@ -368,18 +368,20 @@ const handleUpdate = async (rowId: number) => {
   deptId.value = res.deptId
   postIds.value = res.postIds
   unref(formRef)?.setValues(res)
+  setDialogTile('update')
 }
 const detailData = ref()
 
 // 详情操作
-const handleDetail = async (row: UserApi.UserVO) => {
+const handleDetail = async (rowId: number) => {
   // 设置数据
-  detailData.value = row
+  const res = await UserApi.getUserApi(rowId)
+  detailData.value = res
   await setDialogTile('detail')
 }
 // 删除操作
 const handleDelete = async (rowId: number) => {
-  await delList(xGrid, rowId)
+  await deleteData(xGrid, rowId)
 }
 // 提交按钮
 const submitForm = async () => {
@@ -398,9 +400,9 @@ const submitForm = async () => {
     }
     dialogVisible.value = false
   } finally {
-    loading.value = false
     // 刷新列表
-    reloadList(xGrid)
+    await reloadList(xGrid)
+    loading.value = false
   }
 }
 // 改变用户状态操作
@@ -414,7 +416,7 @@ const handleStatusChange = async (row: UserApi.UserVO) => {
       await UserApi.updateUserStatusApi(row.id, row.status)
       message.success(text + '成功')
       // 刷新列表
-      reloadList(xGrid)
+      await reloadList(xGrid)
     })
     .catch(() => {
       row.status =
@@ -493,7 +495,7 @@ const submitFileForm = () => {
   uploadRef.value!.submit()
 }
 // 文件上传成功
-const handleFileSuccess = (response: any): void => {
+const handleFileSuccess = async (response: any): Promise<void> => {
   if (response.code !== 0) {
     message.error(response.msg)
     return
@@ -514,7 +516,7 @@ const handleFileSuccess = (response: any): void => {
     text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
   }
   message.alert(text)
-  reloadList(xGrid)
+  await reloadList(xGrid)
 }
 // 文件数超出提示
 const handleExceed = (): void => {

yudao-ui-admin-vue3/use.md

@@ -20,14 +20,13 @@
 ```
 
 - 其中api内index.ts 与 vue2 基本一致，只不过axios封装了get post put delete upload download 等方法，不用写method: 'get' 了
-- api内types.ts，是接口中的类型声明，与java中vo等保持一致， java中long int => ts 中 number
-- views中，index.vue 与 vue2 基本一致，本框架封装了Search Table Form Descriptions等组件，也可以按照vue2方式去写，参考menu
+- views中，index.vue 与 vue2 基本一致，本框架使用了vxe-table并封装了Search Table Form Descriptions等组件，当然也继续支持vue2的写法
 - post.data.ts 中主要是表单校验 rules 和表单 crudSchemas ，通过修改crudSchemas 就可以控制增删改查的字段、输入框还是下拉框等等
-- 本框架集成了国际化，不需要可以自己想办法移除，后期不会提供删减版 使用方式
+- 本框架集成了国际化，不需要可以自己想办法移除，后期不会提供删减版
 
 ```bash
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
 t('common.createTime')
-对应翻译文档在 src/locales 
+并在src/locales 增加相应的中英文
 ```