|
@@ -2,8 +2,8 @@
|
|
|
* @Author: fxs bjnsfxs@163.com
|
|
|
* @Date: 2024-08-20 18:16:18
|
|
|
* @LastEditors: fxs bjnsfxs@163.com
|
|
|
- * @LastEditTime: 2024-11-26
|
|
|
- * @FilePath: \SqueezeTheBus c:\Users\NINGMEI\Desktop\Manage\Game-Backstage-Management-System\src\components\Table.vue
|
|
|
+ * @LastEditTime: 2024-11-27
|
|
|
+ * @FilePath: \SqueezeTheBusc:\Users\NINGMEI\Desktop\Manage\Game-Backstage-Management-System\src\components\Table.vue
|
|
|
* @Description:
|
|
|
*
|
|
|
-->
|
|
@@ -174,6 +174,7 @@ const loadTableData = async (): Promise<boolean> => {
|
|
|
console.trace()
|
|
|
return new Promise(async (resolve, reject) => {
|
|
|
loading.value = true
|
|
|
+ // 如果是直接传入的数据
|
|
|
if (props.dataList) {
|
|
|
tableData.splice(0, tableData.length, ...props.dataList)
|
|
|
|
|
@@ -182,6 +183,7 @@ const loadTableData = async (): Promise<boolean> => {
|
|
|
|
|
|
resolve(true)
|
|
|
} else {
|
|
|
+ // 如果是需要表格自己请求数据的
|
|
|
if (props.requestConfig) {
|
|
|
try {
|
|
|
// 如果开启了分页查询,那么要计算出需要展示的页码位置所对应的偏移量
|
|
@@ -193,6 +195,7 @@ const loadTableData = async (): Promise<boolean> => {
|
|
|
}
|
|
|
// console.log(reqconfig.otherOptions)
|
|
|
await getTableData(reqconfig.url, reqconfig.otherOptions, props.openPageQuery)
|
|
|
+
|
|
|
backupTableData.splice(0, backupTableData.length, ...tableData)
|
|
|
resolve(true)
|
|
|
} catch (err) {
|
|
@@ -284,6 +287,9 @@ const queryTableData = () => {
|
|
|
// console.log(props.requestConfig.otherOptions, queryFormData)
|
|
|
// console.log('-----------')
|
|
|
reqconfig.otherOptions = { ...props.requestConfig.otherOptions, ...queryFormData }
|
|
|
+ // 需要在查询前清除掉目前的数据,不然会导致之前缓存的数据混入
|
|
|
+ // 比如第一页已经缓存了,在第二页重新查询,在切回第一页,还是显示查询前的数据,因为缓存没被清除
|
|
|
+ tableData.splice(0, tableData.length)
|
|
|
getData()
|
|
|
} else {
|
|
|
let filteredTable: any[]
|
|
@@ -299,7 +305,7 @@ const queryTableData = () => {
|
|
|
}
|
|
|
return state
|
|
|
})
|
|
|
-
|
|
|
+ paginationConfig.total = filteredTable.length
|
|
|
tableData.splice(0, tableData.length, ...filteredTable)
|
|
|
}
|
|
|
}
|
|
@@ -308,24 +314,24 @@ const queryTableData = () => {
|
|
|
const throttleQueryTableData = throttleFunc(queryTableData, throttleTime)
|
|
|
|
|
|
/**
|
|
|
- * @description: 重置整个查询表单,重置后,再请求一次全部表格
|
|
|
- * @param needQuery 是否需要重新查询,默认为true,如果为false,则不重新查询
|
|
|
+ * 重置查询表单参数
|
|
|
*/
|
|
|
-const resetQueryForm = (needQuery: boolean = true) => {
|
|
|
- // 重置自定义筛选字段的值
|
|
|
- initCustomFilterInfo(customFieldsList)
|
|
|
- // 使用函数返回保存的备份信息,这样可以正确的给queryformdata赋值
|
|
|
- // JSON.stringify()第二个参数可以用来处理undefined的情况,第一个参数设置为_可以避免ts检查
|
|
|
- function resetFormData() {
|
|
|
- return JSON.parse(
|
|
|
- JSON.stringify(backupQueryFormData, (_, v) => (typeof v === 'undefined' ? '' : v))
|
|
|
- )
|
|
|
- }
|
|
|
-
|
|
|
- Object.assign(queryFormData, resetFormData())
|
|
|
+const resetQueryFormData = () => {
|
|
|
+ let data = JSON.parse(
|
|
|
+ JSON.stringify(backupQueryFormData, (_, v) => (typeof v === 'undefined' ? '' : v))
|
|
|
+ )
|
|
|
+ Object.assign(queryFormData, data)
|
|
|
reqconfig.otherOptions = backupReqOtherOptions // 要把请求的参数也重置一次,不然切换平台等操作,会带着原来的查询参数请求
|
|
|
+}
|
|
|
|
|
|
- if (needQuery) queryTableData()
|
|
|
+/**
|
|
|
+ * @description: 重置整个查询表单,重置后,再请求一次全部表格
|
|
|
+ * @param {*} formEl 表单对象
|
|
|
+ * @return {*}
|
|
|
+ */
|
|
|
+const resetQueryForm = () => {
|
|
|
+ resetQueryFormData()
|
|
|
+ queryTableData()
|
|
|
}
|
|
|
|
|
|
// 把重置方法包装一下,节流
|
|
@@ -388,37 +394,56 @@ const tableCellStyle = (info: any) => {
|
|
|
* 如果是limit的变化,则需要把当前页置为1
|
|
|
|
|
|
*/
|
|
|
-watch(
|
|
|
- () => [paginationConfig.limit, paginationConfig.currentPage],
|
|
|
- ([newLimit], [oldLimit]) => {
|
|
|
- resetQueryForm(false)
|
|
|
+const watchLimit = watch(
|
|
|
+ () => paginationConfig.limit,
|
|
|
+ (newLimit, oldLimit) => {
|
|
|
+ // resetQueryForm(false)
|
|
|
|
|
|
- if (newLimit != oldLimit) {
|
|
|
+ if (newLimit !== oldLimit) {
|
|
|
+ resetQueryFormData()
|
|
|
// 需要给分页按钮加上:current-page.sync="current_page" 配置,不然不生效
|
|
|
// 当改变每页大小时把之前的缓存全部清除,重新开始
|
|
|
- paginationConfig.currentPage = 1 // 不应该在这儿改
|
|
|
+ if (paginationConfig.currentPage !== 1) {
|
|
|
+ paginationConfig.currentPage = 1
|
|
|
+ } else {
|
|
|
+ getData()
|
|
|
+ }
|
|
|
}
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+)
|
|
|
|
|
|
- // 开启分页查询的情况下,改变limit或者没有这页的缓存的情况下,重新请求
|
|
|
- if (
|
|
|
- props.openPageQuery &&
|
|
|
- (newLimit !== oldLimit || !tableData[paginationConfig.currentPage])
|
|
|
- ) {
|
|
|
+/**
|
|
|
+ * 监听currentpage的变化,如果开启了分页查询,并且当前页发生变化,并且当前页的数据不存在,则重新请求数据
|
|
|
+ */
|
|
|
+const watchCurPage = watch(
|
|
|
+ () => paginationConfig.currentPage,
|
|
|
+ (newPage, oldPage) => {
|
|
|
+ if (newPage !== oldPage && !tableData[newPage]) {
|
|
|
getData()
|
|
|
}
|
|
|
},
|
|
|
- { deep: true }
|
|
|
+ {
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
)
|
|
|
|
|
|
+// 如果没有开启分页查询,直接关闭这两个监听
|
|
|
+if (!props.openPageQuery) {
|
|
|
+ watchLimit()
|
|
|
+ watchCurPage()
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
- * @description: 监听gid的变化,重新请求数据,这里很奇怪,跟上面的limit和page放到一起不起作用
|
|
|
+ * @description: 监听gid的变化,重新请求数据
|
|
|
* @return {*}
|
|
|
*/
|
|
|
watch(
|
|
|
() => props.requestConfig?.otherOptions.gid,
|
|
|
(newGid, oldGid) => {
|
|
|
if (newGid != oldGid) {
|
|
|
- resetQueryForm(false)
|
|
|
+ // resetQueryForm(false)
|
|
|
+ resetQueryFormData()
|
|
|
reqconfig.otherOptions.gid = newGid
|
|
|
|
|
|
getData()
|
|
@@ -432,7 +457,8 @@ const watchPf = watch(
|
|
|
() => props.requestConfig?.otherOptions.pf,
|
|
|
(newPf, oldPf) => {
|
|
|
if (newPf != oldPf) {
|
|
|
- resetQueryForm(false)
|
|
|
+ // resetQueryForm(false)
|
|
|
+ resetQueryFormData()
|
|
|
reqconfig.otherOptions.pf = newPf
|
|
|
getData()
|
|
|
}
|
|
@@ -444,7 +470,8 @@ const watchPf = watch(
|
|
|
const changeDataList = watch(
|
|
|
() => [props.dataList],
|
|
|
() => {
|
|
|
- resetQueryForm(false)
|
|
|
+ // resetQueryForm(false)
|
|
|
+ resetQueryFormData()
|
|
|
getData()
|
|
|
},
|
|
|
{
|
|
@@ -456,7 +483,8 @@ const changeDataList = watch(
|
|
|
const watchDateChange = watch(
|
|
|
() => [props.requestConfig?.otherOptions.startTime, props.requestConfig?.otherOptions.endTime],
|
|
|
() => {
|
|
|
- resetQueryForm(false)
|
|
|
+ // resetQueryForm(false)
|
|
|
+ resetQueryFormData()
|
|
|
getData()
|
|
|
},
|
|
|
{ deep: true }
|
|
@@ -513,7 +541,8 @@ const initFormData = () => {
|
|
|
* @param {*} data 获取到的数据
|
|
|
*/
|
|
|
const tableSortChange = (data: { column: any; prop: string; order: any }) => {
|
|
|
- resetQueryForm(false)
|
|
|
+ // resetQueryForm(false)
|
|
|
+ resetQueryFormData()
|
|
|
let { order } = { ...data }
|
|
|
if (order === 'ascending') order = 'asc'
|
|
|
else if (order === 'descending') order = 'desc'
|
|
@@ -532,7 +561,8 @@ const deleteRow = (url: string, fieldsInfo: any) => {
|
|
|
.post(url, { ...fieldsInfo })
|
|
|
.then((data) => {
|
|
|
analysisResCode(data).then(() => {
|
|
|
- resetQueryForm(false)
|
|
|
+ // resetQueryForm(false)
|
|
|
+ resetQueryFormData()
|
|
|
getData()
|
|
|
})
|
|
|
})
|
|
@@ -623,8 +653,8 @@ onMounted(() => {
|
|
|
class="filterItem"
|
|
|
>
|
|
|
<el-input
|
|
|
- :placeholder="item.placeholder"
|
|
|
clearable
|
|
|
+ :placeholder="item.placeholder"
|
|
|
v-model="queryFormData[item.name]"
|
|
|
/>
|
|
|
</el-form-item>
|
|
@@ -639,6 +669,7 @@ onMounted(() => {
|
|
|
:placeholder="item.placeholder"
|
|
|
v-model="queryFormData[item.name]"
|
|
|
@input="numberInput(item.name)"
|
|
|
+ :placeholder="item.placeholder"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</template>
|