refactor: vxe crud

xingyu4j
1 parent 7cbd6cfb
Showing 16 changed files with 190 additions and 119 deletions
yudao-ui-admin-vue3/src/api/system/menu/index.ts
yudao-ui-admin-vue3/src/api/system/menu/types.ts
yudao-ui-admin-vue3/src/api/system/notice/index.ts
yudao-ui-admin-vue3/src/api/system/notice/types.ts
yudao-ui-admin-vue3/src/api/system/post/index.ts
yudao-ui-admin-vue3/src/api/system/post/types.ts
yudao-ui-admin-vue3/src/components/DictTag/src/DictTag.vue
yudao-ui-admin-vue3/src/hooks/web/useMessage.ts
yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts
yudao-ui-admin-vue3/src/store/modules/dict.ts
yudao-ui-admin-vue3/src/utils/dict.ts
yudao-ui-admin-vue3/src/views/system/menu/index.vue
yudao-ui-admin-vue3/src/views/system/notice/index.vue
yudao-ui-admin-vue3/src/views/system/notice/notice.data.ts
yudao-ui-admin-vue3/src/views/system/post/index.vue
yudao-ui-admin-vue3/types/global.d.ts
 import request from '@/config/axios'
-import type { MenuVO } from './types'
  
+export interface MenuVO {
+  id: number
+  name: string
+  permission: string
+  type: number
+  sort: number
+  parentId: number
+  path: string
+  icon: string
+  component: string
+  status: number
+  visible: boolean
+  keepAlive: boolean
+  createTime: string
+}
+
+export interface MenuPageReqVO {
+  name?: string
+  status?: number
+}
 // 查询菜单（精简）列表
 export const listSimpleMenusApi = () => {
   return request.get({ url: '/system/menu/list-all-simple' })
 }
  
 // 查询菜单列表
-export const getMenuListApi = (params) => {
+export const getMenuListApi = (params: MenuPageReqVO) => {
   return request.get({ url: '/system/menu/list', params })
 }
  
-export type MenuVO = {
-  id: number
-  name: string
-  permission: string
-  type: number
-  sort: number
-  parentId: number
-  path: string
-  icon: string
-  component: string
-  status: number
-  visible: boolean
-  keepAlive: boolean
-  createTime: string
-}
 import request from '@/config/axios'
-import type { NoticeVO } from './types'
+export interface NoticeVO {
+  id: number
+  title: string
+  type: number
+  content: string
+  status: number
+  remark: string
+  creator: string
+  createTime: string
+  updater: string
+  updateTime: string
+}
+
+export interface NoticePageReqVO extends BasePage {
+  title?: string
+  status?: number
+}
  
 // 查询公告列表
-export const getNoticePageApi = (params) => {
+export const getNoticePageApi = (params: NoticePageReqVO) => {
   return request.get({ url: '/system/notice/page', params })
 }
  
-export type NoticeVO = {
-  id: number
-  title: string
-  type: number
-  content: string
-  status: number
-  remark: string
-  creator: string
-  createTime: string
-  updater: string
-  updateTime: string
-}
 import request from '@/config/axios'
-import type { PostVO, PostPageReqVO, PostExportReqVO } from './types'
+
+export interface PostVO {
+  id?: number
+  name: string
+  code: string
+  sort: number
+  status: number
+  remark: string
+  createTime?: string
+}
+
+export interface PostPageReqVO extends BasePage {
+  code?: string
+  name?: string
+  status?: number
+}
+
+export interface PostExportReqVO {
+  code?: string
+  name?: string
+  status?: number
+}
  
 // 查询岗位列表
 export const getPostPageApi = async (params: PostPageReqVO) => {
@@ -31,7 +52,6 @@ export const deletePostApi = async (id: number) =&gt; {
 }
  
 // 导出岗位
-// TODO @星语：导出这块，咱怎么弄哈
 export const exportPostApi = async (params: PostExportReqVO) => {
   return await request.download({ url: '/system/post/export', params })
 }
-export type PostVO = {
-  id?: number
-  name: string
-  code: string
-  sort: number
-  status: number
-  remark: string
-  createTime?: string
-}
-
-// TODO @星语：要不要搞个 Page 基类呀？和后端对应
-export type PostPageReqVO = {
-  code: string
-  name: string
-  status?: number
-  pageSize?: number
-  pageNo?: number
-}
-
-export type PostExportReqVO = {
-  code: string
-  name: string
-  status?: number
-}
@@ -38,7 +38,7 @@ onUpdated(() =&gt; {
       dictData?.colorType === '' ||
       dictData?.colorType === undefined
     "
-    :key="dictData?.value"
+    :key="dictData?.value.toString()"
     :class="dictData?.cssClass"
   >
     {{ dictData?.label }}
@@ -71,6 +71,18 @@ export const useMessage = () =&gt; {
         }
       )
     },
+    // 导出窗体
+    exportConfirm(content?: string, tip?: string) {
+      return ElMessageBox.confirm(
+        content ? content : t('common.exportMessage'),
+        tip ? tip : t('common.confirmTitle'),
+        {
+          confirmButtonText: t('common.ok'),
+          cancelButtonText: t('common.cancel'),
+          type: 'warning'
+        }
+      )
+    },
     // 提交内容
     prompt(content: string, tip: string) {
       return ElMessageBox.prompt(content, tip, {
@@ -13,6 +13,7 @@ interface UseVxeGridConfig&lt;T = any&gt; {
   getListApi: (option: any) => Promise<T>
   delListApi?: (option: any) => Promise<T>
   exportListApi?: (option: any) => Promise<T>
+  exportName?: string
 }
  
 const appStore = useAppStore()
@@ -88,10 +89,29 @@ export const useVxeGrid = &lt;T = any&gt;(config?: UseVxeGridConfig&lt;T&gt;) =&gt; {
           return new Promise(async (resolve) => {
             resolve(await config?.getListApi(queryParams))
           })
+        },
+        queryAll: ({ form }) => {
+          const queryParams = Object.assign({}, JSON.parse(JSON.stringify(form)))
+          return new Promise(async (resolve) => {
+            if (config?.exportListApi) {
+              resolve(await config?.exportListApi(queryParams))
+            } else {
+              resolve(await config?.getListApi(queryParams))
+            }
+          })
         }
       }
+    },
+    exportConfig: {
+      filename: config?.exportName,
+      // 默认选中类型
+      type: 'csv',
+      // 自定义数据量列表
+      modes: ['current', 'all'],
+      columns: config?.allSchemas.printSchema
     }
   })
+
   const delList = (ids: string | number | string[] | number[]) => {
     return new Promise(async () => {
       message.delConfirm().then(() => {
@@ -3,7 +3,7 @@ import { store } from &#39;../index&#39;
 import { DictDataVO } from '@/api/system/dict/types'
  
 export interface DictValueType {
-  value: string
+  value: string | number | boolean
   label: string
   clorType: string
   cssClass: string
@@ -15,7 +15,7 @@ const dictStore = useDictStoreWithOut()
 export interface DictDataType {
   dictType: string
   label: string
-  value: string | number
+  value: string | number | boolean
   colorType: ElementPlusInfoType | '' | 'default' | 'primary'
   cssClass: string
 }
@@ -34,10 +34,10 @@ export const getDictOptions = (dictType: string) =&gt; {
 export const getIntDictOptions = (dictType: string) => {
   const dictOptions: DictDataType[] = []
   dictStore.getDictMap.forEach((dict: DictDataType) => {
-    if (dict.dictType + '' === dictType) {
+    if (dict.dictType.toString() === dictType) {
       dictOptions.push({
         ...dict,
-        value: parseInt(dict.value + '')
+        value: dict.value
       })
     }
   })
@@ -42,7 +42,6 @@
       </template>
     </vxe-toolbar>
     <!-- 列表 -->
-    <!-- TODO 星语：是不是也搞成 grid 会好点，后续代码就统一走 grid 风格？ -->
     <vxe-table
       show-overflow
       keep-source
@@ -84,14 +83,14 @@
             preIcon="ep:edit"
             :title="t('action.edit')"
             v-hasPermi="['system:menu:update']"
-            @click="handleUpdate(row)"
+            @click="handleUpdate(row.id)"
           />
           <!-- 操作：删除 -->
           <XTextButton
             preIcon="ep:delete"
             :title="t('action.del')"
             v-hasPermi="['system:menu:delete']"
-            @click="handleDelete(row)"
+            @click="handleDelete(row.id)"
           />
         </template>
       </vxe-column>
@@ -102,6 +101,7 @@
     <template #default>
       <!-- 对话框(添加 / 修改) -->
       <el-form
+        ref="formRef"
         :model="menuForm"
         :rules="rules"
         :inline="true"
@@ -254,7 +254,6 @@
 import { onMounted, reactive, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
-// TODO @星语：是不是 'element-plus' 和 '@/components/Tooltip' 和 '@/components/Icon' 全局直接引入
 import {
   ElRow,
   ElCol,
@@ -266,14 +265,14 @@ import {
   ElTreeSelect,
   ElOption,
   ElRadioGroup,
-  ElRadioButton
+  ElRadioButton,
+  FormInstance
 } from 'element-plus'
 import { Tooltip } from '@/components/Tooltip'
 import { IconSelect } from '@/components/Icon'
 import { VxeTableInstance } from 'vxe-table'
 // 业务相关的 import
 import * as MenuApi from '@/api/system/menu'
-import { MenuVO } from '@/api/system/menu/types'
 import { required } from '@/utils/formRules.js'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
@@ -291,7 +290,8 @@ const dialogTitle = ref(&#39;edit&#39;) // 弹出层标题
 const actionType = ref('') // 操作按钮的类型
 const actionLoading = ref(false) // 遮罩层
 // 新增和修改的表单值
-const menuForm = ref<MenuVO>({
+const formRef = ref<FormInstance>()
+const menuForm = ref<MenuApi.MenuVO>({
   id: 0,
   name: '',
   permission: '',
@@ -316,19 +316,12 @@ const rules = reactive({
  
 // ========== 下拉框[上级菜单] ==========
 // 下拉框[上级菜单]的配置项目
-// TODO @星语：menuProps 貌似也可以抽到全局？
 const menuProps = {
   checkStrictly: true,
   children: 'children',
   label: 'name',
   value: 'id'
 }
-// TODO @星语：Tree 可以是全局的
-interface Tree {
-  id: number
-  name: string
-  children?: Tree[] | any[]
-}
 const menuOptions = ref<any[]>([]) // 树形结构
 const getTree = async () => {
   menuOptions.value = []
@@ -339,9 +332,9 @@ const getTree = async () =&gt; {
 }
  
 // ========== 查询 ==========
-const queryParams = reactive({
-  name: null,
-  status: null
+const queryParams = reactive<MenuApi.MenuPageReqVO>({
+  name: undefined,
+  status: undefined
 })
 const getList = async () => {
   tableLoading.value = true
@@ -357,31 +350,47 @@ const handleQuery = async () =&gt; {
  
 // 重置操作
 const resetQuery = async () => {
-  queryParams.name = null
-  queryParams.status = null
+  queryParams.name = undefined
+  queryParams.status = undefined
   await getList()
 }
  
 // ========== 新增/修改 ==========
  
 // 设置标题
-const setDialogTile = (type: string) => {
+const setDialogTile = async (type: string) => {
+  await getTree()
   dialogTitle.value = t('action.' + type)
   actionType.value = type
   dialogVisible.value = true
 }
  
-// 新建操作
+// 新增操作
 const handleCreate = () => {
   setDialogTile('create')
-  // TODO @星语：重置表单
+  formRef.value?.resetFields()
+  menuForm.value = {
+    id: 0,
+    name: '',
+    permission: '',
+    type: SystemMenuTypeEnum.DIR,
+    sort: 1,
+    parentId: 0,
+    path: '',
+    icon: '',
+    component: '',
+    status: CommonStatusEnum.ENABLE,
+    visible: true,
+    keepAlive: true,
+    createTime: ''
+  }
 }
  
 // 修改操作
-const handleUpdate = async (row: MenuVO) => {
+const handleUpdate = async (rowId: number) => {
   setDialogTile('update')
   // 设置数据
-  const res = await MenuApi.getMenuApi(row.id)
+  const res = await MenuApi.getMenuApi(rowId)
   menuForm.value = res
 }
  
@@ -411,11 +420,11 @@ const submitForm = async () =&gt; {
       await MenuApi.updateMenuApi(menuForm.value)
       message.success(t('common.updateSuccess'))
     }
-    // 操作成功，重新加载列表
-    dialogVisible.value = false
-    await getList()
   } finally {
+    dialogVisible.value = false
     actionLoading.value = false
+    // 操作成功，重新加载列表
+    await getList()
   }
 }
  
@@ -426,9 +435,9 @@ const isExternal = (path: string) =&gt; {
  
 // ========== 删除 ==========
 // 删除操作
-const handleDelete = async (row: MenuVO) => {
-  message.confirm(t('common.delDataMessage'), t('common.confirmTitle')).then(async () => {
-    await MenuApi.deleteMenuApi(row.id)
+const handleDelete = async (rowId: number) => {
+  message.delConfirm().then(async () => {
+    await MenuApi.deleteMenuApi(rowId)
     message.success(t('common.delSuccess'))
     await getList()
   })
@@ -437,7 +446,5 @@ const handleDelete = async (row: MenuVO) =&gt; {
 // ========== 初始化 ==========
 onMounted(async () => {
   await getList()
-  // TODO @星语：这个告警解决下；是不是改成新增和修改点击的时候，去加载下好一点哈？
-  getTree()
 })
 </script>
@@ -21,7 +21,7 @@
           preIcon="ep:view"
           :title="t('action.detail')"
           v-hasPermi="['system:notice:update']"
-          @click="handleDetail(row)"
+          @click="handleDetail(row.id)"
         />
         <XTextButton
           preIcon="ep:delete"
@@ -36,10 +36,10 @@
     <template #default>
       <!-- 对话框(添加 / 修改) -->
       <Form
+        ref="formRef"
         v-if="['create', 'update'].includes(actionType)"
         :schema="allSchemas.formSchema"
         :rules="rules"
-        ref="formRef"
       />
       <!-- 对话框(详情) -->
       <Descriptions
@@ -63,30 +63,31 @@
 </template>
 <script setup lang="ts">
 import { ref, unref } from 'vue'
-import * as NoticeApi from '@/api/system/notice'
-import { NoticeVO } from '@/api/system/notice/types'
-import { rules, allSchemas } from './notice.data'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useVxeGrid } from '@/hooks/web/useVxeGrid'
 import { VxeGridInstance } from 'vxe-table'
 import { FormExpose } from '@/components/Form'
  
+import * as NoticeApi from '@/api/system/notice'
+import { rules, allSchemas } from './notice.data'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
+
+const xGrid = ref<VxeGridInstance>() // grid Ref
+const { gridOptions } = useVxeGrid<NoticeApi.NoticeVO>({
+  allSchemas: allSchemas,
+  getListApi: NoticeApi.getNoticePageApi
+})
+
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
 const actionType = ref('') // 操作按钮的类型
 const actionLoading = ref(false) // 按钮Loading
-const xGrid = ref<VxeGridInstance>() // grid Ref
 const formRef = ref<FormExpose>() // 表单 Ref
 const detailRef = ref() // 详情 Ref
  
-const { gridOptions } = useVxeGrid<NoticeVO>({
-  allSchemas: allSchemas,
-  getListApi: NoticeApi.getNoticePageApi
-})
-
 // 设置标题
 const setDialogTile = (type: string) => {
   dialogTitle.value = t('action.' + type)
@@ -110,9 +111,11 @@ const handleUpdate = async (rowId: number) =&gt; {
 }
  
 // 详情操作
-const handleDetail = (row: NoticeVO) => {
+const handleDetail = async (rowId: number) => {
   setDialogTile('detail')
-  detailRef.value = row
+  // 设置数据
+  const res = await NoticeApi.getNoticeApi(rowId)
+  detailRef.value = res
 }
  
 // 删除操作
@@ -137,7 +140,7 @@ const submitForm = async () =&gt; {
       actionLoading.value = true
       // 提交请求
       try {
-        const data = unref(formRef)?.formModel as NoticeVO
+        const data = unref(formRef)?.formModel as NoticeApi.NoticeVO
         if (actionType.value === 'create') {
           await NoticeApi.createNoticeApi(data)
           message.success(t('common.createSuccess'))
@@ -25,8 +25,7 @@ const crudSchemas = reactive&lt;VxeCrudSchema&gt;({
     {
       title: '公告类型',
       field: 'type',
-      dictType: DICT_TYPE.SYSTEM_NOTICE_TYPE,
-      isSearch: true
+      dictType: DICT_TYPE.SYSTEM_NOTICE_TYPE
     },
     {
       title: t('common.status'),
@@ -11,6 +11,13 @@
           v-hasPermi="['system:post:create']"
           @click="handleCreate()"
         />
+        <XButton
+          type="primary"
+          preIcon="ep:download"
+          :title="t('action.export')"
+          v-hasPermi="['system:post:export']"
+          @click="handleExport()"
+        />
       </template>
       <template #actionbtns_default="{ row }">
         <!-- 操作：修改 -->
@@ -25,7 +32,7 @@
           preIcon="ep:view"
           :title="t('action.detail')"
           v-hasPermi="['system:post:update']"
-          @click="handleDetail(row)"
+          @click="handleDetail(row.id)"
         />
         <!-- 操作：删除 -->
         <XTextButton
@@ -42,10 +49,10 @@
     <template #default>
       <!-- 表单：添加/修改 -->
       <Form
+        ref="formRef"
         v-if="['create', 'update'].includes(actionType)"
         :schema="allSchemas.formSchema"
         :rules="rules"
-        ref="formRef"
       />
       <!-- 表单：详情 -->
       <Descriptions
@@ -78,14 +85,14 @@ import { VxeGridInstance } from &#39;vxe-table&#39;
 import { FormExpose } from '@/components/Form'
 // 业务相关的 import
 import * as PostApi from '@/api/system/post'
-import { PostVO } from '@/api/system/post/types'
 import { rules, allSchemas } from './post.data'
+import download from '@/utils/download'
  
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions } = useVxeGrid<PostVO>({
+const { gridOptions } = useVxeGrid<PostApi.PostVO>({
   allSchemas: allSchemas,
   getListApi: PostApi.getPostPageApi
 })
@@ -111,6 +118,16 @@ const handleCreate = () =&gt; {
   unref(formRef)?.getElFormRef()?.resetFields()
 }
  
+// 导出操作
+const handleExport = async () => {
+  const queryParams = Object.assign(
+    {},
+    JSON.parse(JSON.stringify(xGrid.value?.getRefMaps().refForm.value.data))
+  )
+  const res = await PostApi.exportPostApi(queryParams)
+  download.excel(res, '岗位列表.xls')
+}
+
 // 修改操作
 const handleUpdate = async (rowId: number) => {
   setDialogTile('update')
@@ -120,10 +137,10 @@ const handleUpdate = async (rowId: number) =&gt; {
 }
  
 // 详情操作
-const handleDetail = (row: PostVO) => {
+const handleDetail = async (rowId: number) => {
   setDialogTile('detail')
-  // TODO @星语：要不读取下后端？
-  detailRef.value = row
+  const res = await PostApi.getPostApi(rowId)
+  detailRef.value = res
 }
  
 // 删除操作
@@ -144,13 +161,12 @@ const handleDelete = async (rowId: number) =&gt; {
 const submitForm = async () => {
   const elForm = unref(formRef)?.getElFormRef()
   if (!elForm) return
-  // TODO @星语：这个告警，要不要解决下？
   elForm.validate(async (valid) => {
     if (valid) {
       actionLoading.value = true
       // 提交请求
       try {
-        const data = unref(formRef)?.formModel as PostVO
+        const data = unref(formRef)?.formModel as PostApi.PostVO
         if (actionType.value === 'create') {
           await PostApi.createPostApi(data)
           message.success(t('common.createSuccess'))
@@ -36,4 +36,14 @@ declare global {
     code: string
     data: T extends any ? T : T & any
   }
+
+  declare interface BasePage {
+    pageSize?: number
+    pageNo?: number
+  }
+  declare interface Tree {
+    id: number
+    name: string
+    children?: Tree[] | any[]
+  }
 }