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

build/vite/index.ts

@@ -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}`
+    })
   ]
 }

package.json

@@ -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"

src/components/XTable/src/XTable.vue

@@ -1,11 +1,11 @@
 <template>
-  <VxeGrid v-bind="getProps" ref="xGrid" :class="`${prefixCls}`" class="xtable-scrollbar">
+  <VxeGrid ref="xGrid" :class="`${prefixCls}`" class="xtable-scrollbar" v-bind="getProps">
-    <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
+    <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 })

src/hooks/web/useAdaptiveXTable.ts

@@ -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 }
+}

src/hooks/web/useXTable.ts

@@ -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),

src/types/auto-components.d.ts

@@ -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']

src/types/auto-imports.d.ts

@@ -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']

src/views/bpm/form/index.vue

@@ -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({

src/views/bpm/group/index.vue

@@ -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[]>([])
 

src/views/bpm/model/index.vue

@@ -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() // 流程表单的下拉框的数据
 
 // 设计流程

src/views/bpm/oa/leave/index.vue

@@ -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({

src/views/bpm/processInstance/index.vue

@@ -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 = () => {

src/views/bpm/taskAssignRule/index.vue

@@ -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) {

src/views/infra/apiErrorLog/index.vue

@@ -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) // 是否显示弹出层

src/views/infra/codegen/index.vue

@@ -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 = () => {

src/views/infra/config/index.vue

@@ -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('') // 操作按钮的类型

src/views/infra/dataSourceConfig/index.vue

@@ -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('') // 操作按钮的类型

src/views/infra/fileConfig/index.vue

@@ -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('') // 操作按钮的类型

src/views/infra/fileList/index.vue

@@ -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('') // 弹出层标题

src/views/infra/job/JobLog.vue

@@ -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('') // 弹出层标题

src/views/infra/job/index.vue

@@ -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('') // 操作按钮的类型

src/views/pay/app/index.vue

@@ -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('') // 操作按钮的类型

src/views/pay/merchant/index.vue

@@ -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('') // 操作按钮的类型

src/views/pay/order/index.vue

@@ -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('') // 操作按钮的类型

src/views/pay/refund/index.vue

@@ -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

src/views/system/dept/index.vue

@@ -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 = await getListSimpleUsersApi()
-  userOption.value = res
 }
 // 获取下拉框[上级]的数据
 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])
 // ========== 新增/修改 ==========
 
 // 设置标题

src/views/system/dict/index.vue

@@ -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({
+const [registerType, { reload: typeGetList, deleteData: typeDeleteData, setProps: typeSetProps }] =
-  allSchemas: DictTypeSchemas.allSchemas,
+  useXTable({
-  getListApi: DictTypeApi.getDictTypePageApi,
+    allSchemas: DictTypeSchemas.allSchemas,
-  deleteApi: DictTypeApi.deleteDictTypeApi
+    getListApi: DictTypeApi.getDictTypePageApi,
-})
+    deleteApi: DictTypeApi.deleteDictTypeApi
+  })
 
 const queryParams = reactive({
   dictType: null
 })
-const [registerData, { reload: dataGetList, deleteData: dataDeleteData }] = useXTable({
+const [registerData, { reload: dataGetList, deleteData: dataDeleteData, setProps: dataSetProps }] =
-  allSchemas: DictDataSchemas.allSchemas,
+  useXTable({
-  params: queryParams,
+    allSchemas: DictDataSchemas.allSchemas,
-  getListApi: DictDataApi.getDictDataPageApi,
+    params: queryParams,
-  deleteApi: DictDataApi.deleteDictDataApi
+    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']
 }

src/views/system/errorCode/index.vue

@@ -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') // 弹出层标题

src/views/system/loginlog/index.vue

@@ -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) // 是否显示弹出层

src/views/system/mail/account/index.vue

@@ -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') // 弹出层标题

src/views/system/mail/template/index.vue

@@ -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[]>([]) // 账号下拉选项
 
 // 弹窗相关的变量

src/views/system/menu/index.vue

@@ -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') // 弹出层标题

src/views/system/notice/index.vue

@@ -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') // 弹出层标题

src/views/system/notify/my/index.vue

@@ -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) {

src/views/system/notify/template/index.vue

@@ -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') // 弹出层标题

src/views/system/oauth2/client/index.vue

@@ -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') // 弹出层标题

src/views/system/oauth2/token/index.vue

@@ -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) // 是否显示弹出层

src/views/system/operatelog/index.vue

@@ -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

src/views/system/post/index.vue

@@ -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) => {

src/views/system/role/index.vue

@@ -137,8 +137,9 @@
                 empty-text="加载中，请稍后"
               />
             </el-card>
-          </el-form-item> </el-col
+          </el-form-item>
-      ></el-row>
+        </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('') // 操作按钮的类型

src/views/system/sensitiveWord/index.vue

@@ -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) // 是否显示弹出层

src/views/system/sms/smsChannel/index.vue

@@ -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') // 弹出层标题

src/views/system/sms/smsLog/index.vue

@@ -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')) // 弹出层标题

src/views/system/sms/smsTemplate/index.vue

@@ -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 = await SmsTemplateApi.getSmsTemplateApi(rowId)
-  detailData.value = res
 }
 
 // 提交按钮

src/views/system/tenant/index.vue

@@ -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) // 是否显示弹出层

src/views/system/tenantPackage/index.vue

@@ -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)

src/views/system/user/index.vue

@@ -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) => {
+const dataFormater = computed(() => (deptId: number) => deptFormater(deptOptions.value, deptId))
-  return deptFormater(deptOptions.value, val)
+
-}
 //部门回显
-const deptFormater = (ary, val: any) => {
+const deptFormater = (arr: Tree[], deptId: number) => {
-  var o = ''
+  let deptName = ''
-  if (ary && val) {
+  if (arr && deptId) {
-    for (const v of ary) {
+    for (const item of arr) {
-      if (v.id == val) {
+      if (item.id === deptId) {
-        o = v.name
+        deptName = item.name
-        if (o) return o
+        break
-      } else if (v.children?.length) {
+      }
-        o = deptFormater(v.children, val)
+      if (item.children) {
-        if (o) return o
+        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;

src/views/system/user/user.data.ts

@@ -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('请输入用户密码'))