|
@@ -2,21 +2,20 @@
|
|
|
* @Author: fxs bjnsfxs@163.com
|
|
|
* @Date: 2024-08-20 18:16:18
|
|
|
* @LastEditors: fxs bjnsfxs@163.com
|
|
|
- * @LastEditTime: 2024-12-04
|
|
|
+ * @LastEditTime: 2024-12-07
|
|
|
* @Description:
|
|
|
*
|
|
|
-->
|
|
|
<script setup lang="ts">
|
|
|
-import type { PropsParams, TableFieldInfo, TablePaginationSetting } from '@/types/table.ts'
|
|
|
+import type { PropsParams, TablePaginationSetting } from '@/types/table.ts'
|
|
|
import type { ReqConfig } from '@/types/dataAnalysis.ts'
|
|
|
import { FieldSpecialEffectType } from '@/types/tableText.ts'
|
|
|
|
|
|
-import { fuzzySearch, generateRandomFileName, throttleFunc } from '@/utils/common'
|
|
|
+import { fuzzySearch, throttleFunc } from '@/utils/common'
|
|
|
|
|
|
import { useTable } from '@/hooks/useTable.ts'
|
|
|
import { useRequest } from '@/hooks/useRequest.ts'
|
|
|
import { computed, type ComputedRef, onMounted, reactive, ref, toRaw, watch } from 'vue'
|
|
|
-import { downLoadData } from '@/utils/table/table'
|
|
|
|
|
|
import TableFilterForm from '@/components/table/TableFilterForm/TableFilterForm.vue'
|
|
|
import axiosInstance from '@/utils/axios/axiosInstance.ts'
|
|
@@ -51,9 +50,6 @@ const loading = ref(false)
|
|
|
// 表格数据
|
|
|
const tableData: Array<any> = reactive([])
|
|
|
|
|
|
-// 备份表格数据,用于在不分页查询的时候,恢复数据
|
|
|
-const backupTableData: Array<any> = []
|
|
|
-
|
|
|
// 查询表单的数据
|
|
|
const queryFormData = reactive<{ [key: string]: any }>({})
|
|
|
|
|
@@ -72,219 +68,141 @@ const reqConfig = reactive<ReqConfig>({
|
|
|
})
|
|
|
|
|
|
// 一些公用方法
|
|
|
-const { getTableData, setTableData } = useTable(tableData, paginationConfig)
|
|
|
+const {
|
|
|
+ getTableData,
|
|
|
+ setTableData,
|
|
|
+ computedRowIndex,
|
|
|
+ handleCurrentChange,
|
|
|
+ handleSizeChange,
|
|
|
+ insertAverageRow,
|
|
|
+ getDecimalFromRange,
|
|
|
+ resetTableData,
|
|
|
+ initPageConfig,
|
|
|
+ initReqConfig,
|
|
|
+ createRowKey,
|
|
|
+ downLoadTable
|
|
|
+} = useTable(tableData, paginationConfig, props.tableFieldsInfo)
|
|
|
|
|
|
/**
|
|
|
* 本地使用的数据,只有在使用外部数据的情况下使用
|
|
|
*/
|
|
|
let localTableData: ComputedRef | [] = []
|
|
|
if (!props.openRemoteReqData && props.dataList) {
|
|
|
- localTableData = computed<Array<any>>(() => {
|
|
|
- let curPage = paginationConfig.currentPage
|
|
|
- let limit = paginationConfig.limit
|
|
|
- let begin = curPage * limit - limit
|
|
|
- let end = curPage * limit
|
|
|
- console.log(tableData)
|
|
|
- return tableData.slice(begin, end)
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 开启行号功能后,计算行号
|
|
|
- * @param index 当前行索引
|
|
|
- */
|
|
|
-const computedRowIndex = (index: number) => {
|
|
|
- return (paginationConfig.currentPage - 1) * paginationConfig.limit + index + 1
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * @description: 改变页码
|
|
|
- * @param val
|
|
|
- */
|
|
|
-const handleCurrentChange = (val: number) => {
|
|
|
- paginationConfig.currentPage = val
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * @description 改变每页大小
|
|
|
- * @param val
|
|
|
- */
|
|
|
-const handleSizeChange = (val: number) => {
|
|
|
- paginationConfig.limit = val
|
|
|
+ if (Array.isArray(props.dataList)) {
|
|
|
+ localTableData = computed<Array<any>>(() => {
|
|
|
+ let curPage = paginationConfig.currentPage
|
|
|
+ let limit = paginationConfig.limit
|
|
|
+ let begin = curPage * limit - limit
|
|
|
+ let end = curPage * limit
|
|
|
+
|
|
|
+ return tableData.slice(begin, end)
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * @description 加载表格数据
|
|
|
+ * 获取表格数据
|
|
|
+ * @returns [表格数据,数据总数]
|
|
|
*/
|
|
|
-// const loadTableData = async (): Promise<boolean> => {
|
|
|
-// try {
|
|
|
-// // if (!props.openRemoteReqData) {
|
|
|
-// // if (props.dataList) {
|
|
|
-// // tableData.splice(0, tableData.length, ...props.dataList)
|
|
|
-// // if (props.paginationConfig) {
|
|
|
-// // paginationConfig.total = props.paginationConfig.total
|
|
|
-// // }
|
|
|
-// // return true
|
|
|
-// // } else {
|
|
|
-// // console.error('请传入dataList,没有数据源!')
|
|
|
-// // return false
|
|
|
-// // }
|
|
|
-// // }
|
|
|
-//
|
|
|
-// // 如果是直接传入的数据
|
|
|
-// if (props.dataList) {
|
|
|
-// tableData.splice(0, tableData.length, ...props.dataList)
|
|
|
-// if (props.paginationConfig) {
|
|
|
-// paginationConfig.total = props.paginationConfig.total
|
|
|
-// }
|
|
|
-// return true
|
|
|
-// }
|
|
|
-//
|
|
|
-// // 如果需要表格自己请求数据的
|
|
|
-// if (props.requestConfig) {
|
|
|
-// if (props.openRemoteQuery) {
|
|
|
-// reqConfig.otherOptions.offset = (paginationConfig.currentPage - 1) * paginationConfig.limit
|
|
|
-// reqConfig.otherOptions.limit = paginationConfig.limit
|
|
|
-// }
|
|
|
-//
|
|
|
-// await getTableData(reqConfig.url, reqConfig.otherOptions, props.openRemoteQuery)
|
|
|
-// backupTableData.splice(0, backupTableData.length, ...tableData)
|
|
|
-// return true
|
|
|
-// }
|
|
|
-//
|
|
|
-// // 如果 dataList 和 requestConfig 都没有传入,返回 false
|
|
|
-// console.warn('Both dataList and requestConfig are undefined. Returning early.')
|
|
|
-// return false
|
|
|
-// } catch (err) {
|
|
|
-// console.error('Error while loading table data:', err)
|
|
|
-// return false // 确保返回 false 表示失败
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-const loadTableData = async (): Promise<boolean> => {
|
|
|
+const getData = async (): Promise<[Array<any>, number]> => {
|
|
|
try {
|
|
|
// 使用传入数据源
|
|
|
// 如果使用前端查询,则需要传入dataList作为数据源
|
|
|
if (!props.openRemoteReqData) {
|
|
|
if (props.dataList) {
|
|
|
- const backList = JSON.parse(JSON.stringify(props.dataList))
|
|
|
- tableData.splice(0, tableData.length, ...backList)
|
|
|
- backupTableData.splice(0, tableData.length, ...backList)
|
|
|
- console.log('执行1')
|
|
|
- if (props.paginationConfig) {
|
|
|
- paginationConfig.total = backList.length
|
|
|
- }
|
|
|
- return true
|
|
|
+ return [JSON.parse(JSON.stringify(props.dataList)), 0]
|
|
|
} else {
|
|
|
console.error('请传入dataList,没有数据源!')
|
|
|
- return false
|
|
|
+ return [[], 0]
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- // 如果需要表格自己请求数据的
|
|
|
- // 必须要传入requestConfig
|
|
|
- if (props.requestConfig) {
|
|
|
- // 当使用远程请求数据源的时候,默认使用远程查询
|
|
|
- reqConfig.otherOptions.offset = (paginationConfig.currentPage - 1) * paginationConfig.limit
|
|
|
- reqConfig.otherOptions.limit = paginationConfig.limit
|
|
|
- const [tableData, total] = await getTableData(reqConfig.url, reqConfig.otherOptions)
|
|
|
- setTableData(tableData, total, props.openPageQuery)
|
|
|
- backupTableData.splice(0, backupTableData.length, ...tableData)
|
|
|
- return true
|
|
|
} else {
|
|
|
- console.error('缺少请求配置')
|
|
|
- return false
|
|
|
+ // 如果需要表格自己请求数据的
|
|
|
+ // 必须要传入requestConfig
|
|
|
+ if (props.requestConfig) {
|
|
|
+ // 当使用远程请求数据源的时候,默认使用远程查询
|
|
|
+ reqConfig.otherOptions.offset = (paginationConfig.currentPage - 1) * paginationConfig.limit
|
|
|
+ reqConfig.otherOptions.limit = paginationConfig.limit
|
|
|
+ return await getTableData(reqConfig.url, reqConfig.otherOptions)
|
|
|
+ } else {
|
|
|
+ console.error('缺少请求配置')
|
|
|
+ return [[], 0]
|
|
|
+ }
|
|
|
}
|
|
|
} catch (err) {
|
|
|
- console.error('Error while loading table data:', err)
|
|
|
- return false // 确保返回 false 表示失败
|
|
|
+ console.error('请求错误:', err)
|
|
|
+ return [[], 0] // 确保返回 false 表示失败
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 将获取的数据赋值给tableData,同时设置分页数据的总数
|
|
|
+ * @param tableList 表格数据
|
|
|
+ * @param total 数据总数
|
|
|
+ * @returns 设置是否成功
|
|
|
+ */
|
|
|
+const setData = (tableList: Array<any>, total: number): boolean => {
|
|
|
+ try {
|
|
|
+ setTableData(tableList, total, props.openPageQuery, props.openRemoteReqData)
|
|
|
+ insertAverageRow(props.needAverage, props.openRemoteReqData)
|
|
|
+ return true
|
|
|
+ } catch (err) {
|
|
|
+ console.error(err)
|
|
|
+ return false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * @description: 获取数据,如果没有直接传入数据,则去请求数据,有则直接用
|
|
|
+ * 更新表格数据
|
|
|
+ * @returns 设置是否成功
|
|
|
*/
|
|
|
-const getData = async () => {
|
|
|
+const updateTableData = async (): Promise<boolean> => {
|
|
|
try {
|
|
|
loading.value = true
|
|
|
- // 等待数据加载完成
|
|
|
- const loadResult = await loadTableData()
|
|
|
- if (!loadResult) {
|
|
|
- ElMessage.error('获取表格数据失败')
|
|
|
- return false
|
|
|
- }
|
|
|
- // 如果需要平均值字段,则需要在表格头部插入一行计算平均值
|
|
|
- if (props.needAverage) {
|
|
|
- let rowData: any = {}
|
|
|
- let oldList: Array<any> = JSON.parse(JSON.stringify(tableData))
|
|
|
- Object.values(props.tableFieldsInfo).map((item: TableFieldInfo, index: number) => {
|
|
|
- let sum = oldList
|
|
|
- .map((item) => item.count)
|
|
|
- .reduce((accumulator, currentValue) => accumulator + currentValue, 0)
|
|
|
- let averageList = oldList.map((val) => val[item.name]).filter((item) => item !== undefined)
|
|
|
- if (index === 0) rowData[item.name] = '均值'
|
|
|
- else if (item.name === 'count') rowData[item.name] = sum
|
|
|
- else {
|
|
|
- let num =
|
|
|
- averageList.reduce((accumulator, currentValue) => accumulator + currentValue, 0) /
|
|
|
- averageList.length
|
|
|
-
|
|
|
- rowData[item.name] = isNaN(num) ? 0 : num.toFixed(2)
|
|
|
- }
|
|
|
- })
|
|
|
- insertRow(0, rowData)
|
|
|
- }
|
|
|
+ let [tableList, total] = await getData()
|
|
|
+ setData(tableList, total)
|
|
|
return true
|
|
|
} catch (err) {
|
|
|
console.log(err)
|
|
|
return false
|
|
|
} finally {
|
|
|
- loading.value = false // 确保 loading 状态被正确重置
|
|
|
+ loading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 包装一下获取数据
|
|
|
-const throttleGetData = throttleFunc(getData, 1000)
|
|
|
-
|
|
|
-/**
|
|
|
- * 清空表格数据
|
|
|
- */
|
|
|
-const resetTableData = () => {
|
|
|
- tableData.splice(0, tableData.length)
|
|
|
-}
|
|
|
+const throttleGetData = throttleFunc(updateTableData, 1000)
|
|
|
|
|
|
/**
|
|
|
* @description 按条件查询,如果开启了分页查询,那么会直接重新查询数据,否则,会根据现有数据进行查询
|
|
|
*/
|
|
|
const queryTableData = () => {
|
|
|
if (props.openRemoteQuery && props.openRemoteReqData && props.requestConfig) {
|
|
|
- reqConfig.otherOptions = { ...props.requestConfig.otherOptions, ...queryFormData }
|
|
|
+ reqConfig.otherOptions = { ...reqConfig.otherOptions, ...queryFormData }
|
|
|
// 需要在查询前清除掉目前的数据,不然会导致之前缓存的数据混入
|
|
|
// 比如第一页已经缓存了,在第二页重新查询,在切回第一页,还是显示查询前的数据,因为缓存没被清除
|
|
|
tableData.splice(0, tableData.length)
|
|
|
- getData()
|
|
|
+ updateTableData()
|
|
|
} else {
|
|
|
let filteredTable: any[]
|
|
|
// 过滤出来所有符合formData数据的条件
|
|
|
- filteredTable = backupTableData.filter((item) => {
|
|
|
- let state = true
|
|
|
- console.log('aa')
|
|
|
- console.log(queryFormData)
|
|
|
- console.log('bb')
|
|
|
- for (let [k, v] of Object.entries(queryFormData)) {
|
|
|
- // 模糊查询,看值是否跟表格中的数据匹配
|
|
|
- if (!fuzzySearch(v, item[k])) {
|
|
|
- state = false
|
|
|
- break
|
|
|
+ if (props.dataList) {
|
|
|
+ filteredTable = props.dataList.filter((item) => {
|
|
|
+ let state = true
|
|
|
+ for (let [k, v] of Object.entries(queryFormData)) {
|
|
|
+ // 模糊查询,看值是否跟表格中的数据匹配
|
|
|
+ if (!fuzzySearch(v, item[k])) {
|
|
|
+ state = false
|
|
|
+ break
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- return state
|
|
|
- })
|
|
|
-
|
|
|
- paginationConfig.total = filteredTable.length
|
|
|
-
|
|
|
- tableData.splice(0, tableData.length, ...filteredTable)
|
|
|
- // console.log(JSON.parse(JSON.stringify(tableData)))
|
|
|
+ return state
|
|
|
+ })
|
|
|
+ console.log(filteredTable.length)
|
|
|
+ paginationConfig.total = filteredTable.length
|
|
|
+ tableData.splice(0, tableData.length, ...filteredTable)
|
|
|
+ } else {
|
|
|
+ console.error('没有数据源')
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -292,30 +210,6 @@ const queryTableData = () => {
|
|
|
const throttleQueryTableData = throttleFunc(queryTableData, throttleTime)
|
|
|
|
|
|
/**
|
|
|
- * @description: 在获取完数据后,插入均值行
|
|
|
- * @param start 插入的位置
|
|
|
- * @param rowData 插入的数据
|
|
|
- */
|
|
|
-const insertRow = (start: number, rowData: any) => {
|
|
|
- if (props.openRemoteReqData) {
|
|
|
- tableData[start].splice(0, 0, rowData)
|
|
|
- } else {
|
|
|
- tableData.splice(start, 0, rowData)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * @description: 根据计算出来的值去返回对应的颜色深度
|
|
|
- */
|
|
|
-const getDecimalFromRange = (number: number) => {
|
|
|
- if (!number) return 0
|
|
|
- if (number < 25) return 0.25
|
|
|
- else if (number < 50) return 0.5
|
|
|
- else if (number < 75) return 0.75
|
|
|
- else return 1.0 // 如果number >= 75,则直接返回1.00
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
* @description: 单独处理拥有均值行的表格每个单元格的样式,均值字段均加粗,其他需要比较的字段根据自身百分比显示颜色
|
|
|
* 其中使用row-style无效,scope会导致无法覆盖样式
|
|
|
* 同时由于自定义了表格内容,哪里的样式会覆盖row的样式,所以只能单独对单元格设置
|
|
@@ -334,17 +228,18 @@ const tableCellStyle = (info: any) => {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
-
|
|
|
- * @description: 监听limit,currentPage的变化,改变后去重新请求数据
|
|
|
- * 如果是limit的变化,则需要把当前页置为1
|
|
|
-
|
|
|
+ * 监听limit的变化,改变后将页码置为1,同时去重新请求数据
|
|
|
*/
|
|
|
const watchLimit = watch(
|
|
|
() => paginationConfig.limit,
|
|
|
(newLimit, oldLimit) => {
|
|
|
if (newLimit !== oldLimit) {
|
|
|
paginationConfig.currentPage = 1
|
|
|
- filterFormRef.value?.throttleResetQuery()
|
|
|
+ if (props.openFilterQuery) {
|
|
|
+ filterFormRef.value?.throttleResetQuery()
|
|
|
+ } else {
|
|
|
+ throttleQueryTableData()
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
{ deep: true }
|
|
@@ -357,7 +252,7 @@ const watchCurPage = watch(
|
|
|
() => paginationConfig.currentPage,
|
|
|
(newPage, oldPage) => {
|
|
|
if (newPage !== oldPage && !tableData[newPage]) {
|
|
|
- getData()
|
|
|
+ updateTableData()
|
|
|
}
|
|
|
},
|
|
|
{
|
|
@@ -371,71 +266,77 @@ if (!props.openPageQuery) {
|
|
|
watchCurPage()
|
|
|
}
|
|
|
|
|
|
-/**
|
|
|
- * @description: 监听gid的变化,重新请求数据
|
|
|
- * @return {*}
|
|
|
- */
|
|
|
-watch(
|
|
|
- () => props.requestConfig?.otherOptions.gid,
|
|
|
- (newGid, oldGid) => {
|
|
|
- if (newGid != oldGid) {
|
|
|
- filterFormRef.value?.resetFormData()
|
|
|
- reqConfig.otherOptions.gid = newGid
|
|
|
-
|
|
|
- getData()
|
|
|
- }
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
-)
|
|
|
-
|
|
|
-// 监听pf
|
|
|
-const watchPf = watch(
|
|
|
- () => props.requestConfig?.otherOptions.pf,
|
|
|
- (newPf, oldPf) => {
|
|
|
- if (newPf != oldPf) {
|
|
|
- filterFormRef.value?.resetFormData()
|
|
|
- reqConfig.otherOptions.pf = newPf
|
|
|
- getData()
|
|
|
- }
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
-)
|
|
|
-
|
|
|
// 监听传入的datalist的变化,然后去更新数据
|
|
|
const changeDataList = watch(
|
|
|
() => [props.dataList],
|
|
|
() => {
|
|
|
- // console.log('执行')
|
|
|
- getData()
|
|
|
- // filterFormRef.value?.throttleResetQuery()
|
|
|
+ updateTableData()
|
|
|
},
|
|
|
{
|
|
|
deep: true
|
|
|
}
|
|
|
)
|
|
|
|
|
|
-// 监听日期的变化,
|
|
|
-const watchDateChange = watch(
|
|
|
- () => [props.requestConfig?.otherOptions.startTime, props.requestConfig?.otherOptions.endTime],
|
|
|
+/**
|
|
|
+ * 对传入的props进行检查,对错误配置进行提示
|
|
|
+ */
|
|
|
+const checkPropsConfig = () => {
|
|
|
+ const {
|
|
|
+ openFilterQuery,
|
|
|
+ queryInfo,
|
|
|
+ openPageQuery,
|
|
|
+ paginationConfig,
|
|
|
+ openRemoteReqData,
|
|
|
+ requestConfig,
|
|
|
+ openRemoteQuery,
|
|
|
+ dataList
|
|
|
+ } = props
|
|
|
+ if (openFilterQuery && !queryInfo) {
|
|
|
+ console.error('请输入查询的配置信息')
|
|
|
+ }
|
|
|
+ if (openPageQuery && !paginationConfig) {
|
|
|
+ console.error('请输入分页配置信息')
|
|
|
+ }
|
|
|
+ if (openRemoteReqData || openRemoteQuery) {
|
|
|
+ if (!requestConfig) {
|
|
|
+ console.error('请输入请求配置信息')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!openRemoteReqData) {
|
|
|
+ if (!dataList) {
|
|
|
+ console.error('请至少确保一个数据源')
|
|
|
+ }
|
|
|
+ if (openRemoteQuery) {
|
|
|
+ console.error('远程查询无效,请开启数据远程请求')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 监听请求配置的变化,如果开启了查询功能,则需要重置表单后查询
|
|
|
+ * 否则直接请求数据
|
|
|
+ */
|
|
|
+const watchReqConfig = watch(
|
|
|
+ () => props.requestConfig,
|
|
|
() => {
|
|
|
- filterFormRef.value?.throttleResetQuery()
|
|
|
+ Object.assign(reqConfig, props.requestConfig)
|
|
|
+ if (props.openFilterQuery) {
|
|
|
+ filterFormRef.value?.throttleResetQuery()
|
|
|
+ } else {
|
|
|
+ throttleQueryTableData()
|
|
|
+ }
|
|
|
},
|
|
|
- { deep: true }
|
|
|
+ {
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
)
|
|
|
|
|
|
/**
|
|
|
- * @description: 创建row-key优化表格性能
|
|
|
+ * 不使用远程数据,则不用监听请求数据的变化
|
|
|
*/
|
|
|
-const createRowKey = () => {
|
|
|
- return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
|
|
|
-}
|
|
|
-
|
|
|
-// 没有pf取消掉
|
|
|
-if (!props.requestConfig?.otherOptions.pf) watchPf()
|
|
|
-
|
|
|
-// 如果没有日期就取消掉
|
|
|
-if (!props.requestConfig?.otherOptions.startTime && !props.requestConfig?.otherOptions.endTime) {
|
|
|
- watchDateChange()
|
|
|
+if (!props.openRemoteReqData) {
|
|
|
+ watchReqConfig()
|
|
|
}
|
|
|
|
|
|
// 如果是使用远程数据源,则取消监听
|
|
@@ -444,20 +345,6 @@ if (props.openRemoteReqData) {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * @description: 拷贝一份配置文件
|
|
|
- */
|
|
|
-const initPageConfig = () => {
|
|
|
- Object.assign(paginationConfig, props.paginationConfig)
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * @description: 初始化请求配置,用于把拷贝一份新的数据
|
|
|
- */
|
|
|
-const initReqConfig = () => {
|
|
|
- Object.assign(reqConfig, props.requestConfig)
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
* @description: 表格排序
|
|
|
* @param {*} data 获取到的数据
|
|
|
*/
|
|
@@ -481,7 +368,11 @@ const deleteRow = (url: string, fieldsInfo: any) => {
|
|
|
.post(url, { ...fieldsInfo })
|
|
|
.then((data) => {
|
|
|
analysisResCode(data).then(() => {
|
|
|
- filterFormRef.value?.throttleResetQuery()
|
|
|
+ if (props.openFilterQuery) {
|
|
|
+ filterFormRef.value?.throttleResetQuery()
|
|
|
+ } else {
|
|
|
+ throttleQueryTableData()
|
|
|
+ }
|
|
|
})
|
|
|
})
|
|
|
.catch((err) => {
|
|
@@ -490,58 +381,15 @@ const deleteRow = (url: string, fieldsInfo: any) => {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * @description: 下载表格数据
|
|
|
- */
|
|
|
-const downLoadTable = () => {
|
|
|
- downLoadData(generateRandomFileName(), JSON.parse(JSON.stringify(tableData)))
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
* @description: 外部获取数据
|
|
|
*/
|
|
|
const outGetTableData = () => {
|
|
|
return toRaw(tableData).flat()
|
|
|
}
|
|
|
|
|
|
-/**
|
|
|
- * 对传入的props进行检查,对错误配置进行提示
|
|
|
- */
|
|
|
-const checkPropsConfig = () => {
|
|
|
- const {
|
|
|
- openFilterQuery,
|
|
|
- queryInfo,
|
|
|
- openPageQuery,
|
|
|
- paginationConfig,
|
|
|
- openRemoteReqData,
|
|
|
- requestConfig,
|
|
|
- openRemoteQuery,
|
|
|
- dataList
|
|
|
- } = props
|
|
|
- if (openFilterQuery && !queryInfo) {
|
|
|
- console.error('请输入查询的配置信息')
|
|
|
- }
|
|
|
- if (openPageQuery && !paginationConfig) {
|
|
|
- console.error('请输入分页配置信息')
|
|
|
- }
|
|
|
- if (openRemoteReqData || openRemoteQuery) {
|
|
|
- if (!requestConfig) {
|
|
|
- console.error('请输入请求配置信息')
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- if (!openRemoteReqData) {
|
|
|
- if (!dataList) {
|
|
|
- console.error('请至少确保一个数据源')
|
|
|
- }
|
|
|
- if (openRemoteQuery) {
|
|
|
- console.error('远程查询无效,请开启数据远程请求')
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
// 定义暴露出去的方法
|
|
|
defineExpose({
|
|
|
- getData,
|
|
|
+ updateTableData,
|
|
|
resetTableData,
|
|
|
deleteRow,
|
|
|
downLoadTable,
|
|
@@ -549,8 +397,10 @@ defineExpose({
|
|
|
})
|
|
|
|
|
|
onMounted(() => {
|
|
|
- initPageConfig()
|
|
|
- initReqConfig()
|
|
|
+ initPageConfig(props.paginationConfig)
|
|
|
+
|
|
|
+ initReqConfig(reqConfig, props.requestConfig)
|
|
|
+
|
|
|
checkPropsConfig()
|
|
|
})
|
|
|
</script>
|