feat: add vxe crud schemas

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

@@ -1,24 +1,18 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
 import dayjs from 'dayjs'
 import { useI18n } from '@/hooks/web/useI18n'
-import {
-  VxeFormEvents,
-  VxeFormInstance,
-  VxeFormItemProps,
-  VxeGrid,
-  VxeGridInstance,
-  VxeGridProps
-} from 'vxe-table'
+import { VxeFormEvents, VxeFormInstance, VxeFormItemProps, VxeGridInstance } from 'vxe-table'
 import * as PostApi from '@/api/system/post'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { DICT_TYPE } from '@/utils/dict'
 import { ContentWrap } from '@/components/ContentWrap'
-import { PostPageReqVO, PostVO } from '@/api/system/post/types'
+import { PostVO } from '@/api/system/post/types'
 import { rules, allSchemas } from './post.data'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useVxeGrid } from '@/hooks/web/useVxeGrid'
 
 const { t } = useI18n() // 国际化
-
+const message = useMessage()
 const xGrid = ref<VxeGridInstance>()
 const xForm = ref<VxeFormInstance>()
 const dialogVisible = ref(false) // 是否显示弹出层
@@ -26,158 +20,9 @@ const dialogTitle = ref('edit') // 弹出层标题
 const actionType = ref('') // 操作按钮的类型
 const actionLoading = ref(false) // 遮罩层
 
-const gridOptions = reactive<VxeGridProps>({
-  loading: false,
-  rowConfig: {
-    keyField: 'id',
-    isHover: true
-  },
-  toolbarConfig: {
-    custom: true,
-    slots: { buttons: 'toolbar_buttons' }
-  },
-  printConfig: {
-    columns: [
-      { field: 'name' },
-      { field: 'code' },
-      { field: 'sort' },
-      { field: 'status' },
-      { field: 'createTime' }
-    ]
-  },
-  formConfig: {
-    titleWidth: 100,
-    titleAlign: 'right',
-    items: [
-      {
-        field: 'name',
-        title: '岗位名称',
-        span: 6,
-        itemRender: { name: '$input', props: { placeholder: '请输入岗位名称' } }
-      },
-      {
-        field: 'code',
-        title: '岗位编码',
-        span: 6,
-        itemRender: { name: '$input', props: { placeholder: '请输入岗位编码' } }
-      },
-      {
-        field: 'status',
-        title: t('common.status'),
-        span: 6,
-        itemRender: { name: '$select', options: getIntDictOptions(DICT_TYPE.COMMON_STATUS) }
-      },
-      {
-        span: 24,
-        align: 'center',
-        collapseNode: true,
-        itemRender: {
-          name: '$buttons',
-          children: [
-            { props: { type: 'submit', content: t('common.query'), status: 'primary' } },
-            { props: { type: 'reset', content: t('common.reset') } }
-          ]
-        }
-      }
-    ]
-  },
-  columns: [
-    { type: 'seq', title: t('common.index'), width: 100 },
-    { field: 'name', title: '岗位名称' },
-    { field: 'code', title: '岗位编码' },
-    { field: 'sort', title: '岗位顺序' },
-    {
-      field: 'status',
-      title: t('common.status'),
-      slots: {
-        default: 'status_default'
-      }
-    },
-    {
-      field: 'createTime',
-      title: t('common.createTime'),
-      width: 160,
-      sortable: true,
-      formatter: 'formatDate'
-    },
-    {
-      field: 'action',
-      title: t('table.action'),
-      width: '240px',
-      showOverflow: true,
-      slots: {
-        default: 'action_default'
-      }
-    }
-  ],
-  pagerConfig: {
-    border: false,
-    background: false,
-    perfect: true,
-    pageSize: 10,
-    pagerCount: 7,
-    pageSizes: [5, 10, 15, 20, 50, 100, 200, 500],
-    layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
-  },
-  proxyConfig: {
-    seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
-    form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
-    props: { result: 'list', total: 'total' },
-    ajax: {
-      query: ({ page, form }) => {
-        const queryParams: PostPageReqVO = Object.assign({}, form)
-        queryParams.pageSize = page.pageSize
-        queryParams.pageNo = page.currentPage
-        return new Promise(async (resolve) => {
-          resolve(await PostApi.getPostPageApi(queryParams))
-        })
-      }
-    }
-  }
-})
+const gridOptions = useVxeGrid(allSchemas, PostApi.getPostPageApi)
 const formData = ref<PostVO>()
-const formItems = ref<VxeFormItemProps[]>([
-  { field: 'id', title: 'id', visible: false },
-  {
-    field: 'name',
-    title: '岗位名称',
-    span: 12,
-    itemRender: { name: '$input', props: { placeholder: '请输入岗位名称' } }
-  },
-  {
-    field: 'code',
-    title: '岗位编码',
-    span: 12,
-    itemRender: { name: '$input', props: { placeholder: '请输入岗位编码' } }
-  },
-  {
-    field: 'sort',
-    title: '岗位顺序',
-    span: 12,
-    itemRender: { name: '$input', props: { type: 'number', placeholder: '请输入岗位顺序' } }
-  },
-  {
-    field: 'status',
-    title: t('common.status'),
-    span: 12,
-    itemRender: {
-      name: '$select',
-      options: getIntDictOptions(DICT_TYPE.COMMON_STATUS),
-      props: { placeholder: '请选择' }
-    }
-  },
-  {
-    align: 'center',
-    span: 24,
-    itemRender: {
-      name: '$buttons',
-      children: [
-        { props: { type: 'submit', content: t('action.save'), status: 'primary' } },
-        { props: { type: 'reset', content: t('common.reset') } }
-      ]
-    }
-  }
-])
+const formItems = ref<VxeFormItemProps[]>(allSchemas.formSchema)
 // 设置标题
 const setDialogTile = (type: string) => {
   dialogTitle.value = t('action.' + type)
@@ -206,16 +51,13 @@ const handleUpdate = async (rowId: number) => {
 }
 // 删除操作
 const handleDelete = (rowId: number) => {
-  ElMessageBox.confirm(t('common.delMessage'), t('common.confirmTitle'), {
-    confirmButtonText: t('common.ok'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning'
-  })
+  message
+    .confirm(t('common.delMessage'), t('common.confirmTitle'))
     .then(async () => {
       await PostApi.deletePostApi(rowId)
+      message.success(t('common.delSuccess'))
     })
     .finally(() => {
-      ElMessage.success(t('common.delSuccess'))
       xGrid.value?.commitProxy('query')
     })
 }
@@ -227,10 +69,10 @@ const submitForm: VxeFormEvents.Submit = async () => {
     const data = formData.value as PostVO
     if (actionType.value === 'create') {
       await PostApi.createPostApi(data)
-      ElMessage.success(t('common.createSuccess'))
+      message.success(t('common.createSuccess'))
     } else {
       await PostApi.updatePostApi(data)
-      ElMessage.success(t('common.updateSuccess'))
+      message.success(t('common.updateSuccess'))
     }
     // 操作成功，重新加载列表
     dialogVisible.value = false