yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pre Merge pull request !120 from puhui999/master-vxe

pull/120/MERGE
puhui999 2023-04-13 09:32:08 +00:00 committed by Gitee
parent 886c971447 6dd3219d5a
commit ccede9211b
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
48 changed files with 214 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
build/vite/index.ts
View File

@ -6,21 +6,25 @@ import progress from 'vite-plugin-progress'
import EslintPlugin from 'vite-plugin-eslint'
import PurgeIcons from 'vite-plugin-purge-icons'
import { ViteEjsPlugin } from 'vite-plugin-ejs'
// @ts-ignore
import ElementPlus from 'unplugin-element-plus/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import viteCompression from 'vite-plugin-compression'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import topLevelAwait from 'vite-plugin-top-level-await'
import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export function createVitePlugins() {
const root = process.cwd()
// 路径查找
function pathResolve(dir: string) {
return resolve(root, '.', dir)
}
return [
Vue(),
VueJsx(),
@ -46,6 +50,7 @@ export function createVitePlugins() {
'@/hooks/web/useXTable': ['useXTable'],
'@/hooks/web/useVxeCrudSchemas': ['useVxeCrudSchemas'],
'@/hooks/web/useTable': ['useTable'],
'@/hooks/web/useAdaptiveXTable': ['useAdaptiveXTable'],
'@/hooks/web/useCrudSchemas': ['useCrudSchemas'],
'@/utils/formRules': ['required'],
'@/utils/dict': ['DICT_TYPE']
@ -95,6 +100,13 @@ export function createVitePlugins() {
ext: '.gz', // 生成的压缩包后缀
deleteOriginFile: false //压缩后是否删除源文件
}),
ViteEjsPlugin()
ViteEjsPlugin(),
topLevelAwait({
// https://juejin.cn/post/7152191742513512485
// The export name of top-level await promise for each chunk module
promiseExportName: '__tla',
// The function to generate import names of top-level await promise in each chunk module
promiseImportName: (i) => `__tla_${i}`
})
]
}

3
package.json
View File

@ -122,7 +122,8 @@
"vite-plugin-progress": "^0.0.6",
"vite-plugin-purge-icons": "^0.9.2",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vite-plugin-top-level-await": "^1.3.0",
"vite-plugin-vue-setup-extend-plus": "^0.1.0",
"vite-plugin-windicss": "^1.8.10",
"vue-tsc": "^1.2.0",
"windicss": "^3.5.6"

15
src/components/XTable/src/XTable.vue
View File

@ -1,11 +1,11 @@
<template>
<VxeGrid v-bind="getProps" ref="xGrid" :class="`${prefixCls}`" class="xtable-scrollbar">
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
<VxeGrid ref="xGrid" :class="`${prefixCls}`" class="xtable-scrollbar" v-bind="getProps">
<template v-for="item in Object.keys($slots)" :key="item" #[item]="data">
<slot :name="item" v-bind="data || {}"></slot>
</template>
</VxeGrid>
</template>
<script setup lang="ts" name="XTable">
<script lang="ts" name="XTable" setup>
import { PropType } from 'vue'
import { SizeType, VxeGridInstance } from 'vxe-table'
import { useAppStore } from '@/store/modules/app'
@ -37,7 +37,6 @@ const removeStyles = () => {
allsuspects[i].getAttribute(targetattr) != null &&
allsuspects[i].getAttribute(targetattr)?.indexOf(filename) != -1
) {
console.log(allsuspects[i], 'node')
allsuspects[i].parentNode?.removeChild(allsuspects[i])
}
}
@ -90,7 +89,6 @@ const innerProps = ref<Partial<XTableProps>>()
const getProps = computed(() => {
const options = innerProps.value || props.options
options.size = currentSize as any
options.height = 700
getOptionInitConfig(options)
getColumnsConfig(options)
getProxyConfig(options)
@ -254,7 +252,7 @@ const getPageConfig = (options: XTableProps) => {
background: false, // 带背景颜色
perfect: false, // 配套的样式
pageSize: 10, // 每页大小
pagerCount: 7, // 显示页码按钮的数量
pagerCount: 5, // 显示页码按钮的数量
autoHidden: false, // 当只有一页时自动隐藏
pageSizes: [5, 10, 20, 30, 50, 100], // 每页大小选项列表
layouts: [
@ -272,7 +270,7 @@ const getPageConfig = (options: XTableProps) => {
}
}
// tool bar
// toolbar
const getToolBarConfig = (options: XTableProps) => {
const { toolBar, toolbarConfig, topActionSlots } = options
if (toolbarConfig) return
@ -421,7 +419,8 @@ const getCheckboxRecords = () => {
return g.getCheckboxRecords(false)
}
const setProps = (prop: Partial<XTableProps>) => {
innerProps.value = { ...unref(innerProps), ...prop }
// 重新赋值的时候保留旧值，如果有新的值则覆盖
innerProps.value = { ...innerProps.value, ...prop, ...props.options }
}
defineExpose({ reload, Ref: xGrid, getSearchData, deleteData, exportList })

64
src/hooks/web/useAdaptiveXTable.ts Normal file
View File

@ -0,0 +1,64 @@
/**
* 使表格自适应屏幕，铺满可视区域
* @param setPropsFunctions [useXTable中返回的函数setProps],设计为列表是为了兼容一个页面有两个列表的情况
* @param container 包裹XTable的容器名称，默认为ContentWrap
*/
export const useAdaptiveXTable = (setPropsFunctions: Function[], container = 'ContentWrap') => {
// 最终的表格高度
const height = ref(0)
// header区域和tags区域的高度和
const htHeight = ref(126)
// vxe-grid类名
const vxeGridClassName = ref('.vxe-grid')
// 精确计算vxe表格所在cart的可用高度
const getTableHeight = () => {
// 找到vxe(目的获取vex-grid所在el-cart的高度)
const vxeElement = document.querySelector(vxeGridClassName.value)
if (vxeElement) {
// ========== 计算容器可用高度(tag: 不使用元素获取的方式是怕类名有变化) ==========
// 父元素el-card__body(ContentWrap要获取两次parentElement因为还有一层div包裹)
let parent
if ('ContentWrap' === container) {
parent = vxeElement?.parentElement?.parentElement
} else {
parent = vxeElement?.parentElement
}
// 父元素的兄弟元素也就是el-card__header
const previous = parent?.previousElementSibling as HTMLElement
let previousHeight
// 如果有标题获取高度
if (previous) {
previousHeight = previous?.offsetHeight
}
//获取浏览器窗口内容高度
const vh = window.innerHeight
// 计算容器可用高度，如果有标题话减去标题占用的高度, 最后减去header区域和tags区域的高度
height.value = (previousHeight && vh ? vh - previousHeight : vh) - htHeight.value
for (const setProps of setPropsFunctions) {
setProps({ height: height.value })
}
}
}
const initOnresize = () => {
// 监听浏览器窗口变化重新计算高度
window.onresize = () => {
getTableHeight()
}
getTableHeight()
}
onMounted(() => {
initOnresize()
})
//页面卸载之前干掉onresize
onBeforeUnmount(() => {
window.onresize = () => {}
})
// 针对缓存了的页面
onActivated(() => {
// 调用时机为首次挂载
// 以及每次从缓存中被重新插入时,重新更新onresize和计算高度
initOnresize()
})
return { height }
}

2
src/hooks/web/useXTable.ts
View File

@ -27,7 +27,7 @@ export const useXTable = (props: XTableProps): [Function, tableMethod] => {
}
const methods: tableMethod = {
reload: () => getInstance().reload(),
setProps: (props) => getInstance().setProps(props),
setProps: (props) => getInstance()?.setProps(props),
deleteData: (id: string | number) => getInstance().deleteData(id),
deleteBatch: () => getInstance().deleteBatch(),
exportList: (fileName?: string) => getInstance().exportList(fileName),

6
src/types/auto-components.d.ts vendored
View File

@ -23,7 +23,6 @@ declare module '@vue/runtime-core' {
DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
ElBadge: typeof import('element-plus/es')['ElBadge']
ElButton: typeof import('element-plus/es')['ElButton']
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
@ -34,7 +33,6 @@ declare module '@vue/runtime-core' {
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
@ -53,7 +51,6 @@ declare module '@vue/runtime-core' {
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
@ -71,12 +68,9 @@ declare module '@vue/runtime-core' {
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTableV2: typeof import('element-plus/es')['ElTableV2']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElTimeline: typeof import('element-plus/es')['ElTimeline']
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTransfer: typeof import('element-plus/es')['ElTransfer']
ElTree: typeof import('element-plus/es')['ElTree']

1
src/types/auto-imports.d.ts vendored
View File

@ -51,6 +51,7 @@ declare global {
const toRefs: typeof import('vue')['toRefs']
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAdaptiveXTable: typeof import('@/hooks/web/useAdaptiveXTable')['useAdaptiveXTable']
const useAttrs: typeof import('vue')['useAttrs']
const useCrudSchemas: typeof import('@/hooks/web/useCrudSchemas')['useCrudSchemas']
const useCssModule: typeof import('vue')['useCssModule']

4
src/views/bpm/form/index.vue
View File

@ -54,12 +54,12 @@ const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由
// 列表相关的变量
const [registerTable, { deleteData }] = useXTable({
const [registerTable, { deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: FormApi.getFormPageApi,
deleteApi: FormApi.deleteFormApi
})
useAdaptiveXTable([setProps])
// 新增操作
const handleCreate = () => {
push({

3
src/views/bpm/group/index.vue
View File

@ -95,11 +95,12 @@ import { FormExpose } from '@/components/Form'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: UserGroupApi.getUserGroupPageApi,
deleteApi: UserGroupApi.deleteUserGroupApi
})
useAdaptiveXTable([setProps])
// 用户列表
const users = ref<UserVO[]>([])

3
src/views/bpm/model/index.vue
View File

@ -338,10 +338,11 @@ const bpmnControlForm = ref({
prefix: 'flowable'
})
// ========== 列表相关 ==========
const [registerTable, { reload }] = useXTable({
const [registerTable, { reload, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: ModelApi.getModelPageApi
})
useAdaptiveXTable([setProps])
const forms = ref() // 流程表单的下拉框的数据
// 设计流程

4
src/views/bpm/oa/leave/index.vue
View File

@ -35,11 +35,11 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { push } = useRouter() // 路由
const [registerTable, { reload }] = useXTable({
const [registerTable, { reload, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: LeaveApi.getLeavePageApi
})
useAdaptiveXTable([setProps])
// 发起请假
const handleCreate = () => {
push({

3
src/views/bpm/processInstance/index.vue
View File

@ -55,10 +55,11 @@ const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
// ========== 列表相关 ==========
const [registerTable, { reload }] = useXTable({
const [registerTable, { reload, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: ProcessInstanceApi.getMyProcessInstancePageApi
})
useAdaptiveXTable([setProps])
/** 发起流程操作 **/
const handleCreate = () => {

4
src/views/bpm/taskAssignRule/index.vue
View File

@ -173,13 +173,13 @@ const queryParams = reactive({
modelId: modelId,
processDefinitionId: processDefinitionId
})
const [registerTable, { reload }] = useXTable({
const [registerTable, { reload, setProps }] = useXTable({
allSchemas: allSchemas,
params: queryParams,
getListApi: TaskAssignRuleApi.getTaskAssignRuleList,
isList: true
})
useAdaptiveXTable([setProps])
// 翻译规则范围
const getAssignRuleOptionName = (type, option) => {
if (type === 10) {

3
src/views/infra/apiErrorLog/index.vue
View File

@ -60,11 +60,12 @@ const { t } = useI18n() // 国际化
const message = useMessage()
// ========== 列表相关 ==========
const [registerTable, { reload, exportList }] = useXTable({
const [registerTable, { reload, exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: ApiErrorLogApi.getApiErrorLogPageApi,
exportListApi: ApiErrorLogApi.exportApiErrorLogApi
})
useAdaptiveXTable([setProps])
// ========== 详情相关 ==========
const detailData = ref() // 详情 Ref
const dialogVisible = ref(false) // 是否显示弹出层

4
src/views/infra/codegen/index.vue
View File

@ -67,12 +67,12 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { push } = useRouter() // 路由跳转
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: CodegenApi.getCodegenTablePageApi,
deleteApi: CodegenApi.deleteCodegenTableApi
})
useAdaptiveXTable([setProps])
// 导入操作
const importRef = ref()
const openImportTable = () => {

4
src/views/infra/config/index.vue
View File

@ -91,13 +91,13 @@ import { rules, allSchemas } from './config.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: ConfigApi.getConfigPage,
deleteApi: ConfigApi.deleteConfig,
exportListApi: ConfigApi.exportConfigApi
})
useAdaptiveXTable([setProps])
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型

3
src/views/infra/dataSourceConfig/index.vue
View File

@ -74,12 +74,13 @@ import { rules, allSchemas } from './dataSourceConfig.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
isList: true,
getListApi: DataSourceConfiggApi.getDataSourceConfigListApi,
deleteApi: DataSourceConfiggApi.deleteDataSourceConfigApi
})
useAdaptiveXTable([setProps])
// ========== CRUD 相关 ==========
const loading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型

4
src/views/infra/fileConfig/index.vue
View File

@ -167,12 +167,12 @@ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: FileConfigApi.getFileConfigPageApi,
deleteApi: FileConfigApi.deleteFileConfigApi
})
useAdaptiveXTable([setProps])
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型

4
src/views/infra/fileList/index.vue
View File

@ -90,12 +90,12 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: FileApi.getFilePageApi,
deleteApi: FileApi.deleteFileApi
})
useAdaptiveXTable([setProps])
const detailData = ref() // 详情 Ref
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('') // 弹出层标题

3
src/views/infra/job/JobLog.vue
View File

@ -54,11 +54,12 @@ import { allSchemas } from './jobLog.data'
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable, { exportList }] = useXTable({
const [registerTable, { exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: JobLogApi.getJobLogPageApi,
exportListApi: JobLogApi.exportJobLogApi
})
useAdaptiveXTable([setProps])
// ========== CRUD 相关 ==========
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('') // 弹出层标题

4
src/views/infra/job/index.vue
View File

@ -139,13 +139,13 @@ const message = useMessage() // 消息弹窗
const { push } = useRouter()
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: JobApi.getJobPageApi,
deleteApi: JobApi.deleteJobApi,
exportListApi: JobApi.exportJobApi
})
useAdaptiveXTable([setProps])
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型

4
src/views/pay/app/index.vue
View File

@ -84,13 +84,13 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: AppApi.getAppPageApi,
deleteApi: AppApi.deleteAppApi,
exportListApi: AppApi.exportAppApi
})
useAdaptiveXTable([setProps])
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型

4
src/views/pay/merchant/index.vue
View File

@ -82,13 +82,13 @@ import * as MerchantApi from '@/api/pay/merchant'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: MerchantApi.getMerchantPageApi,
deleteApi: MerchantApi.deleteMerchantApi,
exportListApi: MerchantApi.exportMerchantApi
})
useAdaptiveXTable([setProps])
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型

3
src/views/pay/order/index.vue
View File

@ -47,11 +47,12 @@ import * as OrderApi from '@/api/pay/order'
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable, { exportList }] = useXTable({
const [registerTable, { exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: OrderApi.getOrderPageApi,
exportListApi: OrderApi.exportOrderApi
})
useAdaptiveXTable([setProps])
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型

4
src/views/pay/refund/index.vue
View File

@ -40,12 +40,12 @@ import * as RefundApi from '@/api/pay/refund'
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable, { exportList }] = useXTable({
const [registerTable, { exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: RefundApi.getRefundPageApi,
exportListApi: RefundApi.exportRefundApi
})
useAdaptiveXTable([setProps])
// ========== CRUD 相关 ==========
const dialogVisible = ref(false) // 是否显示弹出层
const detailData = ref() // 详情 Ref

8
src/views/system/dept/index.vue
View File

@ -75,7 +75,7 @@
</XModal>
</template>
<script setup lang="ts" name="Dept">
import { handleTree, defaultProps } from '@/utils/tree'
import { defaultProps, handleTree } from '@/utils/tree'
import type { FormExpose } from '@/components/Form'
import { allSchemas, rules } from './dept.data'
import * as DeptApi from '@/api/system/dept'
@ -102,8 +102,7 @@ const deptOptions = ref() // 树形结构
const userOption = ref<UserVO[]>([])
const getUserList = async () => {
const res = await getListSimpleUsersApi()
userOption.value = res
userOption.value = await getListSimpleUsersApi()
}
// 获取下拉框[上级]的数据
const getTree = async () => {
@ -113,12 +112,13 @@ const getTree = async () => {
dept.children = handleTree(res)
deptOptions.value.push(dept)
}
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
treeConfig: treeConfig,
getListApi: DeptApi.getDeptPageApi,
deleteApi: DeptApi.deleteDeptApi
})
useAdaptiveXTable([setProps])
// ========== 新增/修改 ==========
// 设置标题

26
src/views/system/dict/index.vue
View File

@ -133,21 +133,24 @@ import { DictDataVO, DictTypeVO } from '@/api/system/dict/types'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const [registerType, { reload: typeGetList, deleteData: typeDeleteData }] = useXTable({
allSchemas: DictTypeSchemas.allSchemas,
getListApi: DictTypeApi.getDictTypePageApi,
deleteApi: DictTypeApi.deleteDictTypeApi
})
const [registerType, { reload: typeGetList, deleteData: typeDeleteData, setProps: typeSetProps }] =
useXTable({
allSchemas: DictTypeSchemas.allSchemas,
getListApi: DictTypeApi.getDictTypePageApi,
deleteApi: DictTypeApi.deleteDictTypeApi
})
const queryParams = reactive({
dictType: null
})
const [registerData, { reload: dataGetList, deleteData: dataDeleteData }] = useXTable({
allSchemas: DictDataSchemas.allSchemas,
params: queryParams,
getListApi: DictDataApi.getDictDataPageApi,
deleteApi: DictDataApi.deleteDictDataApi
})
const [registerData, { reload: dataGetList, deleteData: dataDeleteData, setProps: dataSetProps }] =
useXTable({
allSchemas: DictDataSchemas.allSchemas,
params: queryParams,
getListApi: DictDataApi.getDictDataPageApi,
deleteApi: DictDataApi.deleteDictDataApi
})
const { height } = useAdaptiveXTable([typeSetProps, dataSetProps], 'Card')
// ========== 字典分类列表相关 ==========
const dictTypeValue = ref('')
// 字典分类修改操作
@ -180,6 +183,7 @@ const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => {
tableTypeSelect.value = true
queryParams.dictType = row['type']
await nextTick()
dataSetProps({ height })
await dataGetList()
parentType.value = row['type']
}

3
src/views/system/errorCode/index.vue
View File

@ -75,11 +75,12 @@ import * as ErrorCodeApi from '@/api/system/errorCode'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: ErrorCodeApi.getErrorCodePageApi,
deleteApi: ErrorCodeApi.deleteErrorCodeApi
})
useAdaptiveXTable([setProps])
// 弹窗相关的变量
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题

4
src/views/system/loginlog/index.vue
View File

@ -34,12 +34,12 @@ import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable, { exportList }] = useXTable({
const [registerTable, { exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: getLoginLogPageApi,
exportListApi: exportLoginLogApi
})
useAdaptiveXTable([setProps])
// 详情操作
const detailData = ref() // 详情 Ref
const dialogVisible = ref(false) // 是否显示弹出层

4
src/views/system/mail/account/index.vue
View File

@ -76,12 +76,12 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: MailAccountApi.getMailAccountPageApi,
deleteApi: MailAccountApi.deleteMailAccountApi
})
useAdaptiveXTable([setProps])
// 弹窗相关的变量
const modelVisible = ref(false) // 是否显示弹出层
const modelTitle = ref('edit') // 弹出层标题

3
src/views/system/mail/template/index.vue
View File

@ -146,12 +146,13 @@ const message = useMessage() // 消息弹窗
const queryParams = reactive({
accountId: null
})
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
params: queryParams,
getListApi: MailTemplateApi.getMailTemplatePageApi,
deleteApi: MailTemplateApi.deleteMailTemplateApi
})
useAdaptiveXTable([setProps])
const accountOptions = ref<any[]>([]) // 账号下拉选项
// 弹窗相关的变量

3
src/views/system/menu/index.vue
View File

@ -222,12 +222,13 @@ const treeConfig = {
parentField: 'parentId',
expandAll: false
}
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
treeConfig: treeConfig,
getListApi: MenuApi.getMenuListApi,
deleteApi: MenuApi.deleteMenuApi
})
useAdaptiveXTable([setProps])
// 弹窗相关的变量
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题

3
src/views/system/notice/index.vue
View File

@ -79,11 +79,12 @@ import { rules, allSchemas } from './notice.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: NoticeApi.getNoticePageApi,
deleteApi: NoticeApi.deleteNoticeApi
})
useAdaptiveXTable([setProps])
// 弹窗相关的变量
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题

4
src/views/system/notify/my/index.vue
View File

@ -29,11 +29,11 @@ import * as NotifyMessageApi from '@/api/system/notify/message'
const message = useMessage() // 消息
// 列表相关的变量
const [registerTable, { reload, getCheckboxRecords }] = useXTable({
const [registerTable, { reload, getCheckboxRecords, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: NotifyMessageApi.getMyNotifyMessagePage
})
useAdaptiveXTable([setProps])
const handleUpdateList = async () => {
const list = getCheckboxRecords() as any as any[]
if (list.length === 0) {

4
src/views/system/notify/template/index.vue
View File

@ -125,12 +125,12 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: NotifyTemplateApi.getNotifyTemplatePageApi,
deleteApi: NotifyTemplateApi.deleteNotifyTemplateApi
})
useAdaptiveXTable([setProps])
// 弹窗相关的变量
const modelVisible = ref(false) // 是否显示弹出层
const modelTitle = ref('edit') // 弹出层标题

3
src/views/system/oauth2/client/index.vue
View File

@ -139,11 +139,12 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: ClientApi.getOAuth2ClientPageApi,
deleteApi: ClientApi.deleteOAuth2ClientApi
})
useAdaptiveXTable([setProps])
// 弹窗相关的变量
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题

4
src/views/system/oauth2/token/index.vue
View File

@ -31,12 +31,12 @@ import * as TokenApi from '@/api/system/oauth2/token'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload }] = useXTable({
const [registerTable, { reload, setProps }] = useXTable({
allSchemas: allSchemas,
topActionSlots: false,
getListApi: TokenApi.getAccessTokenPageApi
})
useAdaptiveXTable([setProps])
// ========== 详情相关 ==========
const detailData = ref() // 详情 Ref
const dialogVisible = ref(false) // 是否显示弹出层

4
src/views/system/operatelog/index.vue
View File

@ -48,12 +48,12 @@ import { allSchemas } from './operatelog.data'
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable, { exportList }] = useXTable({
const [registerTable, { exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: OperateLogApi.getOperateLogPageApi,
exportListApi: OperateLogApi.exportOperateLogApi
})
useAdaptiveXTable([setProps])
// 弹窗相关的变量
const dialogVisible = ref(false) // 是否显示弹出层
const actionLoading = ref(false) // 按钮 Loading

4
src/views/system/post/index.vue
View File

@ -56,13 +56,13 @@ import PostForm from './form.vue'
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
allSchemas: allSchemas, // 列表配置
getListApi: PostApi.getPostPageApi, // 加载列表的 API
deleteApi: PostApi.deletePostApi, // 删除数据的 API
exportListApi: PostApi.exportPostApi // 导出数据的 API
})
useAdaptiveXTable([setProps])
// 表单相关的变量
const modalRef = ref()
const openModal = (type: string, id?: number) => {

13
src/views/system/role/index.vue
View File

@ -137,8 +137,9 @@
empty-text="加载中，请稍后"
/>
</el-card>
</el-form-item> </el-col
></el-row>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 操作按钮 -->
<template #footer>
@ -159,10 +160,10 @@
<script setup lang="ts" name="Role">
import type { ElTree } from 'element-plus'
import type { FormExpose } from '@/components/Form'
import { handleTree, defaultProps } from '@/utils/tree'
import { defaultProps, handleTree } from '@/utils/tree'
import { SystemDataScopeEnum } from '@/utils/constants'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { rules, allSchemas } from './role.data'
import { allSchemas, rules } from './role.data'
import * as RoleApi from '@/api/system/role'
import { listSimpleMenusApi } from '@/api/system/menu'
import { listSimpleDeptApi } from '@/api/system/dept'
@ -171,12 +172,12 @@ import * as PermissionApi from '@/api/system/permission'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: RoleApi.getRolePageApi,
deleteApi: RoleApi.deleteRoleApi
})
useAdaptiveXTable([setProps])
// ========== CRUD 相关 ==========
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型

3
src/views/system/sensitiveWord/index.vue
View File

@ -110,12 +110,13 @@ import { rules, allSchemas } from './sensitiveWord.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: SensitiveWordApi.getSensitiveWordPageApi,
deleteApi: SensitiveWordApi.deleteSensitiveWordApi,
exportListApi: SensitiveWordApi.exportSensitiveWordApi
})
useAdaptiveXTable([setProps])
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层

4
src/views/system/sms/smsChannel/index.vue
View File

@ -77,12 +77,12 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: SmsChannelApi.getSmsChannelPageApi,
deleteApi: SmsChannelApi.deleteSmsChannelApi
})
useAdaptiveXTable([setProps])
// 弹窗相关的变量
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题

4
src/views/system/sms/smsLog/index.vue
View File

@ -36,12 +36,12 @@ import * as SmsLoglApi from '@/api/system/sms/smsLog'
const { t } = useI18n() // 国际化
// 列表相关的变量
const [registerTable, { exportList }] = useXTable({
const [registerTable, { exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: SmsLoglApi.getSmsLogPageApi,
exportListApi: SmsLoglApi.exportSmsLogApi
})
useAdaptiveXTable([setProps])
// 弹窗相关的变量
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref(t('action.detail')) // 弹出层标题

9
src/views/system/sms/smsTemplate/index.vue
View File

@ -112,18 +112,18 @@
import type { FormExpose } from '@/components/Form'
// 业务相关的 import
import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
import { rules, allSchemas } from './sms.template.data'
import { allSchemas, rules } from './sms.template.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: SmsTemplateApi.getSmsTemplatePageApi,
deleteApi: SmsTemplateApi.deleteSmsTemplateApi
})
useAdaptiveXTable([setProps])
// 弹窗相关的变量
const dialogVisible = ref(false) // 是否显示弹出层
const dialogTitle = ref('edit') // 弹出层标题
@ -156,8 +156,7 @@ const handleUpdate = async (rowId: number) => {
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
// 设置数据
const res = await SmsTemplateApi.getSmsTemplateApi(rowId)
detailData.value = res
detailData.value = await SmsTemplateApi.getSmsTemplateApi(rowId)
}
// 提交按钮

4
src/views/system/tenant/index.vue
View File

@ -93,13 +93,13 @@ import { rules, allSchemas, tenantPackageOption } from './tenant.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: TenantApi.getTenantPageApi,
deleteApi: TenantApi.deleteTenantApi,
exportListApi: TenantApi.exportTenantApi
})
useAdaptiveXTable([setProps])
const actionLoading = ref(false) // 遮罩层
const actionType = ref('') // 操作按钮的类型
const dialogVisible = ref(false) // 是否显示弹出层

4
src/views/system/tenantPackage/index.vue
View File

@ -106,12 +106,12 @@ const getTree = async () => {
menuOptions.value = handleTree(res)
}
const [registerTable, { reload, deleteData }] = useXTable({
const [registerTable, { reload, deleteData, setProps }] = useXTable({
allSchemas: allSchemas,
getListApi: TenantPackageApi.getTenantPackageTypePageApi,
deleteApi: TenantPackageApi.deleteTenantPackageTypeApi
})
useAdaptiveXTable([setProps])
// 设置标题
const setDialogTile = (type: string) => {
dialogTitle.value = t('action.' + type)

51
src/views/system/user/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex">
<el-card class="w-1/5 user" :gutter="12" shadow="always">
<el-card class="w-1/5" :gutter="12" shadow="always">
<template #header>
<div class="card-header">
<span>部门列表</span>
@ -8,7 +8,7 @@
</div>
</template>
<el-input v-model="filterText" placeholder="搜索部门" />
<el-scrollbar height="650">
<el-scrollbar>
<el-tree
ref="treeRef"
node-key="id"
@ -22,7 +22,7 @@
/>
</el-scrollbar>
</el-card>
<el-card class="w-4/5 user" style="margin-left: 10px" :gutter="12" shadow="hover">
<el-card class="w-4/5" style="margin-left: 10px" :gutter="12" shadow="hover">
<template #header>
<div class="card-header">
<span>{{ tableTitle }}</span>
@ -147,7 +147,7 @@
v-for="item in postOptions"
:key="item.id"
:label="item.name"
:value="(item.id as unknown as number)"
:value="item.id"
/>
</el-select>
</template>
@ -169,7 +169,7 @@
</template>
</el-tag>
</template>
<template v-else> </template>
<template v-else></template>
</template>
</Descriptions>
<!-- 操作按钮 -->
@ -289,13 +289,14 @@ const queryParams = reactive({
// ========== 列表相关 ==========
const tableTitle = ref('用户列表')
// 列表相关的变量
const [registerTable, { reload, deleteData, exportList }] = useXTable({
const [registerTable, { reload, deleteData, exportList, setProps }] = useXTable({
allSchemas: allSchemas,
params: queryParams,
getListApi: UserApi.getUserPageApi,
deleteApi: UserApi.deleteUserApi,
exportListApi: UserApi.exportUserApi
})
useAdaptiveXTable([setProps], 'Card')
// ========== 创建部门树结构 ==========
const filterText = ref('')
const deptOptions = ref<Tree[]>([]) // 树形结构
@ -332,26 +333,24 @@ const getPostOptions = async () => {
const res = await listSimplePostsApi()
postOptions.value.push(...res)
}
const dataFormater = (val) => {
return deptFormater(deptOptions.value, val)
}
const dataFormater = computed(() => (deptId: number) => deptFormater(deptOptions.value, deptId))
//部门回显
const deptFormater = (ary, val: any) => {
var o = ''
if (ary && val) {
for (const v of ary) {
if (v.id == val) {
o = v.name
if (o) return o
} else if (v.children?.length) {
o = deptFormater(v.children, val)
if (o) return o
const deptFormater = (arr: Tree[], deptId: number) => {
let deptName = ''
if (arr && deptId) {
for (const item of arr) {
if (item.id === deptId) {
deptName = item.name
break
}
if (item.children) {
deptName = deptFormater(item.children, deptId) ?? ''
break
}
}
return o
} else {
return val
}
return deptName
}
// 设置标题
@ -363,7 +362,7 @@ const setDialogTile = async (type: string) => {
// 新增操作
const handleCreate = async () => {
setDialogTile('create')
await setDialogTile('create')
// 重置表单
await nextTick()
if (allSchemas.formSchema[0].field !== 'username') {
@ -388,7 +387,7 @@ const handleCreate = async () => {
// 修改操作
const handleUpdate = async (rowId: number) => {
setDialogTile('update')
await setDialogTile('update')
await nextTick()
unref(formRef)?.delSchema('username')
unref(formRef)?.delSchema('password')
@ -569,10 +568,6 @@ onMounted(async () => {
</script>
<style scoped>
.user {
height: 780px;
max-height: 800px;
}
.card-header {
display: flex;
justify-content: space-between;

4
src/views/system/user/user.data.ts
View File

@ -1,7 +1,7 @@
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
// 国际化
const { t } = useI18n()
const validateMobile = (rule: any, value: any, callback: any) => {
const validateMobile = (_, value: any, callback: any) => {
const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
if (value === '') {
callback(new Error('请输入联系手机'))
@ -13,7 +13,7 @@ const validateMobile = (rule: any, value: any, callback: any) => {
}
}
}
const validatePassword = (rule: any, value: any, callback: any) => {
const validatePassword = (_, value: any, callback: any) => {
const reg = /^(?! +$).+/
if (value === '') {
callback(new Error('请输入用户密码'))