reactor: 重构 XTable

This commit is contained in:
xingyu
2023-01-03 11:21:27 +08:00
parent a984eac965
commit f352c4d941
32 changed files with 250 additions and 285 deletions

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" show-overflow class="xtable-scrollbar">
<XTable @register="registerTable" show-overflow>
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
@ -33,7 +33,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<!-- 添加或修改菜单对话框 -->
<XModal id="deptModel" v-model="dialogVisible" :title="dialogTitle">
@ -81,7 +81,7 @@ import { VxeGridInstance } from 'vxe-table'
import { handleTree, defaultProps } from '@/utils/tree'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form'
import { allSchemas, rules } from './dept.data'
import * as DeptApi from '@/api/system/dept'
@ -119,7 +119,7 @@ const getTree = async () => {
dept.children = handleTree(res)
deptOptions.value.push(dept)
}
const { gridOptions, getList, deleteData } = useVxeGrid<DeptApi.DeptVO>({
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
treeConfig: treeConfig,
getListApi: DeptApi.getDeptPageApi,
@ -168,7 +168,7 @@ const submitForm = async () => {
dialogVisible.value = false
} finally {
actionLoading.value = false
await getList(xGrid)
await reload()
}
}
})
@ -176,7 +176,7 @@ const submitForm = async () => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
const userNicknameFormat = (row) => {

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<!-- 操作新增 -->
<template #toolbar_buttons>
<XButton
@ -35,7 +35,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle">
@ -71,8 +71,7 @@
import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form'
// 业务相关的 import
import { rules, allSchemas } from './errorCode.data'
@ -81,8 +80,7 @@ import * as ErrorCodeApi from '@/api/system/errorCode'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // grid Ref
const { gridOptions, getList, deleteData } = useVxeGrid<ErrorCodeApi.ErrorCodeVO>({
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: ErrorCodeApi.getErrorCodePageApi,
deleteApi: ErrorCodeApi.deleteErrorCodeApi
@ -125,7 +123,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 提交新增/修改的表单
@ -149,7 +147,7 @@ const submitForm = async () => {
} finally {
actionLoading.value = false
// 刷新列表
await getList(xGrid)
await reload()
}
}
})

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<!-- 操作导出 -->
<template #toolbar_buttons>
<XButton
@ -15,7 +15,7 @@
<!-- 操作详情 -->
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
@ -31,16 +31,14 @@
// 全局相关的 import
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
// 业务相关的 import
import { allSchemas } from './loginLog.data'
import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/loginLog'
const { t } = useI18n() // 国际化
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, exportList } = useVxeGrid<LoginLogVO>({
const [registerTable, { exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: getLoginLogPageApi,
exportListApi: exportLoginLogApi
@ -59,6 +57,6 @@ const handleDetail = async (row: LoginLogVO) => {
// 导出操作
const handleExport = async () => {
await exportList(xGrid, '登录列表.xls')
await exportList('登录列表.xls')
}
</script>

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" show-overflow class="xtable-scrollbar">
<XTable @register="registerTable" show-overflow>
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
@ -34,7 +34,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<!-- 添加或修改菜单对话框 -->
<XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle">
@ -201,7 +201,7 @@ import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
import { handleTree, defaultProps } from '@/utils/tree'
import * as MenuApi from '@/api/system/menu'
import { allSchemas, rules } from './menu.data'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { useXTable } from '@/hooks/web/useXTable'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@ -215,7 +215,7 @@ const treeConfig = {
parentField: 'parentId',
expandAll: false
}
const { gridOptions, getList, deleteData } = useVxeGrid<MenuApi.MenuVO>({
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
treeConfig: treeConfig,
getListApi: MenuApi.getMenuListApi,
@ -326,7 +326,7 @@ const submitForm = async () => {
actionLoading.value = false
wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
// 操作成功,重新加载列表
await getList(xGrid)
await reload()
}
}
@ -338,6 +338,6 @@ const isExternal = (path: string) => {
// ========== 删除 ==========
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
</script>

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<!-- 操作新增 -->
<template #toolbar_buttons>
<XButton
@ -35,7 +35,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="noticeModel" v-model="dialogVisible" :title="dialogTitle">
@ -75,8 +75,7 @@
import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form'
// 业务相关的 import
import * as NoticeApi from '@/api/system/notice'
@ -86,8 +85,7 @@ import { Editor } from '@/components/Editor'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, getList, deleteData } = useVxeGrid<NoticeApi.NoticeVO>({
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: NoticeApi.getNoticePageApi,
deleteApi: NoticeApi.deleteNoticeApi
@ -130,7 +128,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 提交新增/修改的表单
@ -153,7 +151,7 @@ const submitForm = async () => {
dialogVisible.value = false
} finally {
actionLoading.value = false
await getList(xGrid)
await reload()
}
}
})

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
@ -51,7 +51,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
@ -135,8 +135,7 @@ import { ref, unref } from 'vue'
import { ElTag } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form'
// 业务相关的 import
import * as ClientApi from '@/api/system/oauth2/client'
@ -146,8 +145,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, getList, deleteData } = useVxeGrid<ClientApi.OAuth2ClientVO>({
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: ClientApi.getOAuth2ClientPageApi,
deleteApi: ClientApi.deleteOAuth2ClientApi
@ -188,7 +186,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 提交新增/修改的表单
@ -212,7 +210,7 @@ const submitForm = async () => {
} finally {
actionLoading.value = false
// 刷新列表
await getList(xGrid)
await reload()
}
}
})

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<template #actionbtns_default="{ row }">
<!-- 操作详情 -->
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
@ -13,7 +13,7 @@
@click="handleForceLogout(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(详情) -->
@ -28,8 +28,7 @@
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { allSchemas } from './token.data'
import * as TokenApi from '@/api/system/oauth2/token'
@ -37,8 +36,7 @@ import * as TokenApi from '@/api/system/oauth2/token'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, getList } = useVxeGrid<TokenApi.OAuth2TokenVO>({
const [registerTable, { reload }] = useXTable({
allSchemas: allSchemas,
topActionSlots: false,
getListApi: TokenApi.getAccessTokenPageApi
@ -65,7 +63,7 @@ const handleForceLogout = (rowId: number) => {
})
.finally(async () => {
// 刷新列表
await getList(xGrid)
await reload()
})
}
</script>

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
@ -22,7 +22,7 @@
<!-- 操作详情 -->
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="postModel" v-model="dialogVisible" :title="t('action.detail')">
@ -45,16 +45,14 @@
// 全局相关的 import
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
// 业务相关的 import
import * as OperateLogApi from '@/api/system/operatelog'
import { allSchemas } from './operatelog.data'
const { t } = useI18n() // 国际化
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, exportList } = useVxeGrid<OperateLogApi.OperateLogVO>({
const [registerTable, { exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: OperateLogApi.getOperateLogPageApi,
exportListApi: OperateLogApi.exportOperateLogApi
@ -73,6 +71,6 @@ const handleDetail = (row: OperateLogApi.OperateLogVO) => {
// 导出操作
const handleExport = async () => {
await exportList(xGrid, '操作日志.xls')
await exportList('操作日志.xls')
}
</script>

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
@ -43,7 +43,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<!-- 弹窗 -->
<XModal id="postModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
@ -79,8 +79,7 @@
import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form'
// 业务相关的 import
import * as PostApi from '@/api/system/post'
@ -89,8 +88,7 @@ import { rules, allSchemas } from './post.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<PostApi.PostVO>({
const [registerTable, { reload, deleteData, exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: PostApi.getPostPageApi,
deleteApi: PostApi.deletePostApi,
@ -121,7 +119,7 @@ const handleCreate = () => {
// 导出操作
const handleExport = async () => {
await exportList(xGrid, '岗位列表.xls')
await exportList('岗位列表.xls')
}
// 修改操作
@ -143,7 +141,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 提交新增/修改的表单
@ -167,7 +165,7 @@ const submitForm = async () => {
} finally {
actionLoading.value = false
// 刷新列表
await getList(xGrid)
await reload()
}
}
})

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<!-- 操作新增 -->
<template #toolbar_buttons>
<XButton
@ -49,7 +49,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
@ -159,11 +159,10 @@ import {
ElSwitch,
ElTag
} from 'element-plus'
import { VxeGridInstance } from 'vxe-table'
import { FormExpose } from '@/components/Form'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { useXTable } from '@/hooks/web/useXTable'
import { handleTree, defaultProps } from '@/utils/tree'
import { SystemDataScopeEnum } from '@/utils/constants'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@ -176,8 +175,7 @@ import * as PermissionApi from '@/api/system/permission'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, getList, deleteData } = useVxeGrid<RoleApi.RoleVO>({
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: RoleApi.getRolePageApi,
deleteApi: RoleApi.deleteRoleApi
@ -221,7 +219,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 提交按钮
@ -245,7 +243,7 @@ const submitForm = async () => {
} finally {
actionLoading.value = false
// 刷新列表
await getList(xGrid)
await reload()
}
}
})

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
@ -53,7 +53,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
@ -106,8 +106,7 @@
import { onMounted, ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form'
import { ElTag, ElSelect, ElOption } from 'element-plus'
import * as SensitiveWordApi from '@/api/system/sensitiveWord'
@ -116,14 +115,12 @@ import { rules, allSchemas } from './sensitiveWord.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, getList, deleteData, exportList } =
useVxeGrid<SensitiveWordApi.SensitiveWordVO>({
allSchemas: allSchemas,
getListApi: SensitiveWordApi.getSensitiveWordPageApi,
deleteApi: SensitiveWordApi.deleteSensitiveWordApi,
exportListApi: SensitiveWordApi.exportSensitiveWordApi
})
const [registerTable, { reload, deleteData, exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: SensitiveWordApi.getSensitiveWordPageApi,
deleteApi: SensitiveWordApi.deleteSensitiveWordApi,
exportListApi: SensitiveWordApi.exportSensitiveWordApi
})
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层
@ -152,7 +149,7 @@ const handleCreate = () => {
// 导出操作
const handleExport = async () => {
await exportList(xGrid, '敏感词数据.xls')
await exportList('敏感词数据.xls')
}
// 修改操作
@ -172,7 +169,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 提交按钮
@ -196,7 +193,7 @@ const submitForm = async () => {
} finally {
actionLoading.value = false
// 刷新列表
await getList(xGrid)
await reload()
}
}
})

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<!-- 操作新增 -->
<template #toolbar_buttons>
<XButton
@ -35,7 +35,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<XModal id="smsChannel" v-model="dialogVisible" :title="dialogTitle">
@ -72,8 +72,7 @@
import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form'
// 业务相关的 import
import * as SmsChannelApi from '@/api/system/sms/smsChannel'
@ -83,8 +82,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, getList, deleteData } = useVxeGrid<SmsChannelApi.SmsChannelVO>({
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: SmsChannelApi.getSmsChannelPageApi,
deleteApi: SmsChannelApi.deleteSmsChannelApi
@ -127,7 +125,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 提交按钮
@ -151,7 +149,7 @@ const submitForm = async () => {
} finally {
actionLoading.value = false
// 刷新列表
await getList(xGrid)
await reload()
}
}
})

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<!-- 操作导出 -->
<template #toolbar_buttons>
<XButton
@ -14,7 +14,7 @@
<template #actionbtns_default="{ row }">
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<XModal id="smsLog" v-model="dialogVisible" :title="dialogTitle">
@ -34,15 +34,13 @@
// 全局相关的 import
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { allSchemas } from './sms.log.data'
import * as SmsLoglApi from '@/api/system/sms/smsLog'
const { t } = useI18n() // 国际化
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, exportList } = useVxeGrid<SmsLoglApi.SmsLogVO>({
const [registerTable, { exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: SmsLoglApi.getSmsLogPageApi,
exportListApi: SmsLoglApi.exportSmsLogApi
@ -62,6 +60,6 @@ const handleDetail = (row: SmsLoglApi.SmsLogVO) => {
// 导出操作
const handleExport = async () => {
await exportList(xGrid, '短信日志.xls')
await exportList('短信日志.xls')
}
</script>

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<!-- 操作新增 -->
<template #toolbar_buttons>
<XButton
@ -41,7 +41,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<XModal id="smsTemplate" v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
@ -113,8 +113,7 @@
import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form'
import { ElForm, ElFormItem, ElInput } from 'element-plus'
// 业务相关的 import
@ -125,8 +124,7 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, getList, deleteData } = useVxeGrid<SmsTemplateApi.SmsTemplateVO>({
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: SmsTemplateApi.getSmsTemplatePageApi,
deleteApi: SmsTemplateApi.deleteSmsTemplateApi
@ -170,7 +168,7 @@ const handleDetail = async (rowId: number) => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 提交按钮
@ -194,7 +192,7 @@ const submitForm = async () => {
} finally {
actionLoading.value = false
// 刷新列表
await getList(xGrid)
await reload()
}
}
})

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
@ -49,7 +49,7 @@
@click="handleDelete(row.id)"
/>
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
@ -89,8 +89,7 @@
import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { ElTag } from 'element-plus'
import { FormExpose } from '@/components/Form'
import * as TenantApi from '@/api/system/tenant'
@ -99,8 +98,7 @@ import { rules, allSchemas, tenantPackageOption } from './tenant.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<TenantApi.TenantVO>({
const [registerTable, { reload, deleteData, exportList }] = useXTable({
allSchemas: allSchemas,
getListApi: TenantApi.getTenantPageApi,
deleteApi: TenantApi.deleteTenantApi,
@ -153,12 +151,12 @@ const handleDetail = async (rowId: number) => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 导出操作
const handleExport = async () => {
await exportList(xGrid, '租户列表.xls')
await exportList('租户列表.xls')
}
// 提交按钮
@ -183,7 +181,7 @@ const submitForm = async () => {
} finally {
actionLoading.value = false
// 刷新列表
await getList(xGrid)
await reload()
}
}
})

View File

@ -1,7 +1,7 @@
<template>
<ContentWrap>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<template #toolbar_buttons>
<XButton
type="primary"
@ -14,7 +14,7 @@
<XTextButton preIcon="ep:edit" :title="t('action.edit')" @click="handleUpdate(row.id)" />
<XTextButton preIcon="ep:delete" :title="t('action.del')" @click="handleDelete(row.id)" />
</template>
</vxe-grid>
</XTable>
</ContentWrap>
<XModal v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) -->
@ -69,8 +69,7 @@ import { onMounted, ref, unref } from 'vue'
import { handleTree, defaultProps } from '@/utils/tree'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form'
import { ElCard, ElSwitch, ElTree } from 'element-plus'
// 业务相关的 import
@ -86,7 +85,6 @@ const menuExpand = ref(false)
const menuNodeAll = ref(false)
const treeRef = ref<InstanceType<typeof ElTree>>()
const treeNodeAll = ref(false)
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const formRef = ref<FormExpose>() // 表单 Ref
const loading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
@ -102,7 +100,7 @@ const getTree = async () => {
menuOptions.value = handleTree(res)
}
const { gridOptions, getList, deleteData } = useVxeGrid<TenantPackageApi.TenantPackageVO>({
const [registerTable, { reload, deleteData }] = useXTable({
allSchemas: allSchemas,
getListApi: TenantPackageApi.getTenantPackageTypePageApi,
deleteApi: TenantPackageApi.deleteTenantPackageTypeApi
@ -136,7 +134,7 @@ const handleUpdate = async (rowId: number) => {
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 提交按钮
@ -162,7 +160,7 @@ const submitForm = async () => {
} finally {
loading.value = false
// 刷新列表
await getList(xGrid)
await reload()
}
}
})

View File

@ -27,7 +27,7 @@
</div>
</template>
<!-- 列表 -->
<vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<XTable @register="registerTable">
<template #toolbar_buttons>
<!-- 操作新增 -->
<XButton
@ -119,7 +119,7 @@
</template>
</el-dropdown>
</template>
</vxe-grid>
</XTable>
</el-card>
</div>
<XModal v-model="dialogVisible" :title="dialogTitle">
@ -283,14 +283,13 @@ import {
UploadRawFile
} from 'element-plus'
import { useRouter } from 'vue-router'
import { VxeGridInstance } from 'vxe-table'
import { handleTree, defaultProps } from '@/utils/tree'
import download from '@/utils/download'
import { CommonStatusEnum } from '@/utils/constants'
import { getAccessToken, getTenantId } from '@/utils/auth'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { useXTable } from '@/hooks/web/useXTable'
import { FormExpose } from '@/components/Form'
import { rules, allSchemas } from './user.data'
import * as UserApi from '@/api/system/user'
@ -312,10 +311,9 @@ const queryParams = reactive({
// ========== 列表相关 ==========
const tableTitle = ref('用户列表')
// 列表相关的变量
const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
const { gridOptions, getList, deleteData, exportList } = useVxeGrid<UserApi.UserVO>({
const [registerTable, { reload, deleteData, exportList }] = useXTable({
allSchemas: allSchemas,
queryParams: queryParams,
params: queryParams,
getListApi: UserApi.getUserPageApi,
deleteApi: UserApi.deleteUserApi,
exportListApi: UserApi.exportUserApi
@ -334,7 +332,7 @@ const filterNode = (value: string, data: Tree) => {
}
const handleDeptNodeClick = async (row: { [key: string]: any }) => {
queryParams.deptId = row.id
await getList(xGrid)
await reload()
}
const { push } = useRouter()
const handleDeptEdit = () => {
@ -409,7 +407,7 @@ const handleDetail = async (rowId: number) => {
}
// 删除操作
const handleDelete = async (rowId: number) => {
await deleteData(xGrid, rowId)
await deleteData(rowId)
}
// 提交按钮
const submitForm = async () => {
@ -428,7 +426,7 @@ const submitForm = async () => {
} finally {
// unref(formRef)?.setSchema(allSchemas.formSchema)
// 刷新列表
await getList(xGrid)
await reload()
loading.value = false
}
}
@ -443,7 +441,7 @@ const handleStatusChange = async (row: UserApi.UserVO) => {
await UserApi.updateUserStatusApi(row.id, row.status)
message.success(text + '成功')
// 刷新列表
await getList(xGrid)
await reload()
})
.catch(() => {
row.status =
@ -544,7 +542,7 @@ const handleFileSuccess = async (response: any): Promise<void> => {
text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
}
message.alert(text)
await getList(xGrid)
await reload()
}
// 文件数超出提示
const handleExceed = (): void => {