|
@@ -3,7 +3,6 @@
|
|
|
* @Date: 2024-08-20 18:16:18
|
|
|
* @LastEditors: fxs bjnsfxs@163.com
|
|
|
* @LastEditTime: 2024-11-27
|
|
|
- * @FilePath: \SqueezeTheBusc:\Users\NINGMEI\Desktop\Manage\Game-Backstage-Management-System\src\components\Table.vue
|
|
|
* @Description:
|
|
|
*
|
|
|
-->
|
|
@@ -14,19 +13,19 @@ import type { FormInstance } from 'element-plus'
|
|
|
import { FilterType } from '@/types/table'
|
|
|
import { FieldSpecialEffectType } from '@/types/tableText'
|
|
|
|
|
|
-import { initLoadResouce } from '@/utils/resource'
|
|
|
+import { initLoadResource } from '@/utils/resource'
|
|
|
import { fuzzySearch, throttleFunc } from '@/utils/common'
|
|
|
-import { computed, onMounted, reactive, ref, toRaw, watch } from 'vue'
|
|
|
+import { useCustomFilter } from '@/hooks/useCustomFilter.ts'
|
|
|
import { useTable } from '@/hooks/useTable'
|
|
|
import { useRequest } from '@/hooks/useRequest'
|
|
|
+import { computed, onMounted, reactive, ref, toRaw, watch } from 'vue'
|
|
|
import { Filter } from '@element-plus/icons-vue'
|
|
|
-import { useCustomFilter } from '@/hooks/useCustomFilter.ts'
|
|
|
|
|
|
import CustomFilter from './form/CustomFilter.vue'
|
|
|
import FilterPopover from './toolsBtn/FilterPopover.vue'
|
|
|
import RefreshBtn from './toolsBtn/RefreshBtn.vue'
|
|
|
-import axiosInstance from '@/utils/axios/axiosInstance'
|
|
|
import TableFieldText from './table/TableFieldText.vue'
|
|
|
+import axiosInstance from '@/utils/axios/axiosInstance'
|
|
|
|
|
|
type CustomFilterRef = InstanceType<typeof CustomFilter>
|
|
|
|
|
@@ -64,7 +63,7 @@ const props = withDefaults(defineProps<PropsParams>(), {
|
|
|
openPageQuery: false,
|
|
|
needUpload: false,
|
|
|
needDownLoad: false,
|
|
|
- openRemoteinquiry: false
|
|
|
+ openRemoteQuery: false
|
|
|
})
|
|
|
|
|
|
// 父组件触发的方法
|
|
@@ -93,11 +92,11 @@ const paginationConfig = reactive<TablePaginationSetting>({
|
|
|
currentPage: 1,
|
|
|
limit: 0,
|
|
|
total: 0,
|
|
|
- pagesizeList: []
|
|
|
+ pageSizeList: []
|
|
|
})
|
|
|
|
|
|
// 请求配置
|
|
|
-const reqconfig = reactive<ReqConfig>({
|
|
|
+const reqConfig = reactive<ReqConfig>({
|
|
|
url: '',
|
|
|
otherOptions: {}
|
|
|
})
|
|
@@ -188,13 +187,14 @@ const loadTableData = async (): Promise<boolean> => {
|
|
|
try {
|
|
|
// 如果开启了分页查询,那么要计算出需要展示的页码位置所对应的偏移量
|
|
|
// 同时要将查询的条数改为对应的用户选择的展示条数
|
|
|
+
|
|
|
if (props.openPageQuery) {
|
|
|
- reqconfig.otherOptions.offset =
|
|
|
+ reqConfig.otherOptions.offset =
|
|
|
(paginationConfig.currentPage - 1) * paginationConfig.limit
|
|
|
- reqconfig.otherOptions.limit = paginationConfig.limit
|
|
|
+ reqConfig.otherOptions.limit = paginationConfig.limit
|
|
|
}
|
|
|
- // console.log(reqconfig.otherOptions)
|
|
|
- await getTableData(reqconfig.url, reqconfig.otherOptions, props.openPageQuery)
|
|
|
+ // console.log(reqConfig.otherOptions)
|
|
|
+ await getTableData(reqConfig.url, reqConfig.otherOptions, props.openPageQuery)
|
|
|
|
|
|
backupTableData.splice(0, backupTableData.length, ...tableData)
|
|
|
resolve(true)
|
|
@@ -281,15 +281,13 @@ const resetTableData = () => {
|
|
|
* @description: 按条件查询,如果开启了分页查询,那么会直接重新查询数据,否则,会根据现有数据进行查询
|
|
|
*/
|
|
|
const queryTableData = () => {
|
|
|
- if (props.openRemoteinquiry && props.requestConfig) {
|
|
|
- // delUnusedCustomFilter()
|
|
|
- // console.log('--------')
|
|
|
- // console.log(props.requestConfig.otherOptions, queryFormData)
|
|
|
- // console.log('-----------')
|
|
|
- reqconfig.otherOptions = { ...props.requestConfig.otherOptions, ...queryFormData }
|
|
|
+ console.log(props.openRemoteQuery, props.requestConfig)
|
|
|
+ if (props.openRemoteQuery && props.requestConfig) {
|
|
|
+ reqConfig.otherOptions = { ...props.requestConfig.otherOptions, ...queryFormData }
|
|
|
// 需要在查询前清除掉目前的数据,不然会导致之前缓存的数据混入
|
|
|
// 比如第一页已经缓存了,在第二页重新查询,在切回第一页,还是显示查询前的数据,因为缓存没被清除
|
|
|
tableData.splice(0, tableData.length)
|
|
|
+ console.log('执行')
|
|
|
getData()
|
|
|
} else {
|
|
|
let filteredTable: any[]
|
|
@@ -321,13 +319,11 @@ const resetQueryFormData = () => {
|
|
|
JSON.stringify(backupQueryFormData, (_, v) => (typeof v === 'undefined' ? '' : v))
|
|
|
)
|
|
|
Object.assign(queryFormData, data)
|
|
|
- reqconfig.otherOptions = backupReqOtherOptions // 要把请求的参数也重置一次,不然切换平台等操作,会带着原来的查询参数请求
|
|
|
+ reqConfig.otherOptions = backupReqOtherOptions // 要把请求的参数也重置一次,不然切换平台等操作,会带着原来的查询参数请求
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* @description: 重置整个查询表单,重置后,再请求一次全部表格
|
|
|
- * @param {*} formEl 表单对象
|
|
|
- * @return {*}
|
|
|
*/
|
|
|
const resetQueryForm = () => {
|
|
|
resetQueryFormData()
|
|
@@ -380,17 +376,8 @@ const tableCellStyle = (info: any) => {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- *
|
|
|
- *
|
|
|
- *
|
|
|
- * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!严重BUG!!!!!!!!!!!!!!!!
|
|
|
- *
|
|
|
- *
|
|
|
- *
|
|
|
- *
|
|
|
- *
|
|
|
- *
|
|
|
- * @description: 监听litmit,currentpage的变化,改变后去重新请求数据
|
|
|
+
|
|
|
+ * @description: 监听limit,currentPage的变化,改变后去重新请求数据
|
|
|
* 如果是limit的变化,则需要把当前页置为1
|
|
|
|
|
|
*/
|
|
@@ -414,7 +401,7 @@ const watchLimit = watch(
|
|
|
)
|
|
|
|
|
|
/**
|
|
|
- * 监听currentpage的变化,如果开启了分页查询,并且当前页发生变化,并且当前页的数据不存在,则重新请求数据
|
|
|
+ * 监听currentPage的变化,如果开启了分页查询,并且当前页发生变化,并且当前页的数据不存在,则重新请求数据
|
|
|
*/
|
|
|
const watchCurPage = watch(
|
|
|
() => paginationConfig.currentPage,
|
|
@@ -444,7 +431,7 @@ watch(
|
|
|
if (newGid != oldGid) {
|
|
|
// resetQueryForm(false)
|
|
|
resetQueryFormData()
|
|
|
- reqconfig.otherOptions.gid = newGid
|
|
|
+ reqConfig.otherOptions.gid = newGid
|
|
|
|
|
|
getData()
|
|
|
}
|
|
@@ -459,7 +446,7 @@ const watchPf = watch(
|
|
|
if (newPf != oldPf) {
|
|
|
// resetQueryForm(false)
|
|
|
resetQueryFormData()
|
|
|
- reqconfig.otherOptions.pf = newPf
|
|
|
+ reqConfig.otherOptions.pf = newPf
|
|
|
getData()
|
|
|
}
|
|
|
},
|
|
@@ -513,7 +500,7 @@ if (!props.dataList) {
|
|
|
/**
|
|
|
* @description: 拷贝一份配置文件
|
|
|
*/
|
|
|
-const initpageConfig = () => {
|
|
|
+const initPageConfig = () => {
|
|
|
Object.assign(paginationConfig, props.paginationConfig)
|
|
|
}
|
|
|
|
|
@@ -521,7 +508,7 @@ const initpageConfig = () => {
|
|
|
* @description: 初始化请求配置,用于把拷贝一份新的数据
|
|
|
*/
|
|
|
const initReqConfig = () => {
|
|
|
- Object.assign(reqconfig, props.requestConfig)
|
|
|
+ Object.assign(reqConfig, props.requestConfig)
|
|
|
}
|
|
|
|
|
|
/**
|
|
@@ -547,7 +534,7 @@ const tableSortChange = (data: { column: any; prop: string; order: any }) => {
|
|
|
if (order === 'ascending') order = 'asc'
|
|
|
else if (order === 'descending') order = 'desc'
|
|
|
else order = ''
|
|
|
- reqconfig.otherOptions.order = order
|
|
|
+ reqConfig.otherOptions.order = order
|
|
|
getData()
|
|
|
}
|
|
|
|
|
@@ -610,11 +597,11 @@ defineExpose({
|
|
|
})
|
|
|
|
|
|
onMounted(() => {
|
|
|
- initpageConfig()
|
|
|
+ initPageConfig()
|
|
|
initReqConfig()
|
|
|
initFormData()
|
|
|
initCustomFilterInfo(customFieldsList)
|
|
|
- backupReqOtherOptions = reqconfig.otherOptions // 备份一份请求参数
|
|
|
+ backupReqOtherOptions = reqConfig.otherOptions // 备份一份请求参数
|
|
|
// registerWatchProps()
|
|
|
if (props.loadingState !== undefined) {
|
|
|
loading.value = props.loadingState
|
|
@@ -623,7 +610,7 @@ onMounted(() => {
|
|
|
// 但是这里又必须请求一次,因为有的页面数据是没有变化的
|
|
|
getData()
|
|
|
// 去加载所有需要的资源
|
|
|
- initLoadResouce(resourceInfo).then((data) => {
|
|
|
+ initLoadResource(resourceInfo).then((data) => {
|
|
|
Object.assign(blobUrlInfo, data)
|
|
|
})
|
|
|
})
|
|
@@ -818,7 +805,7 @@ onMounted(() => {
|
|
|
align="center"
|
|
|
show-overflow-tooltip
|
|
|
v-if="item.isShow"
|
|
|
- :sortable="item.needSort ? 'custorm' : false"
|
|
|
+ :sortable="item.needSort ? 'custom' : false"
|
|
|
>
|
|
|
<template v-slot="scope">
|
|
|
<!-- 头像类 -->
|
|
@@ -887,7 +874,7 @@ onMounted(() => {
|
|
|
class="userTablePagination"
|
|
|
background
|
|
|
:page-size="paginationConfig.limit"
|
|
|
- :page-sizes="paginationConfig.pagesizeList"
|
|
|
+ :page-sizes="paginationConfig.pageSizeList"
|
|
|
table-layout="fixed"
|
|
|
layout="prev, pager, next ,jumper ,sizes,total,"
|
|
|
:total="paginationConfig.total"
|