refactor: vxe crud

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

@@ -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('edit') // 弹出层标题
 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 () => {
 }
 
 // ========== 查询 ==========
-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 () => {
 
 // 重置操作
 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 () => {
       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) => {
 
 // ========== 删除 ==========
 // 删除操作
-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) => {
 // ========== 初始化 ==========
 onMounted(async () => {
   await getList()
-  // TODO @星语：这个告警解决下；是不是改成新增和修改点击的时候，去加载下好一点哈？
-  getTree()
 })
 </script>

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

@@ -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) => {
 }
 
 // 详情操作
-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 () => {
       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'))

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

@@ -25,8 +25,7 @@ const crudSchemas = reactive<VxeCrudSchema>({
     {
       title: '公告类型',
       field: 'type',
-      dictType: DICT_TYPE.SYSTEM_NOTICE_TYPE,
-      isSearch: true
+      dictType: DICT_TYPE.SYSTEM_NOTICE_TYPE
     },
     {
       title: t('common.status'),

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

@@ -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 'vxe-table'
 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 = () => {
   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) => {
 }
 
 // 详情操作
-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) => {
 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'))