108 lines
2.8 KiB
Vue
108 lines
2.8 KiB
Vue
<template>
|
|
<el-form inline class="query-form" ref="queryForm" @submit.prevent="getData">
|
|
<el-form-item v-for="column in uniCons" :key="column.ucId"
|
|
:label="column.ucName" :prop="column.ucName">
|
|
<el-input :placeholder="column.ucDescribe" :type="column.ucType" v-model="column.query" clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="getData" :icon="Search">搜索</el-button>
|
|
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table :data="tableData" v-loading="tableLoading" :max-height="tableHeight" v-tabh>
|
|
<el-table-column v-for="column in uniColumns" :key="column.prop" :prop="column.prop"
|
|
:label="column.label" align="center"/>
|
|
</el-table>
|
|
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
|
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {Search, Refresh} from '@element-plus/icons-vue'
|
|
import {getPageInfo,getPageData} from "@/api/custom-query/query-page";
|
|
import {reactive} from "vue";
|
|
import Paging from "@/components/pagination/index.vue";
|
|
|
|
const router = useRouter()
|
|
let path = router.currentRoute.value.path.split("/")
|
|
const queryId = reactive(path[path.length-1])
|
|
const queryForm = ref([])
|
|
const tableData = ref([])
|
|
const uniCons = ref([])
|
|
const uniColumns = ref([])
|
|
const tableLoading = ref(true)
|
|
const total = ref()
|
|
const pageInfo = reactive({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
})
|
|
const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px')
|
|
|
|
const initPage = () => {
|
|
tableLoading.value = true
|
|
getPageInfo(queryId,pageInfo).then(res=>{
|
|
let data = res.data
|
|
uniColumns.value = data.uniColumns
|
|
uniCons.value = data.uniCons
|
|
let table = data.table
|
|
tableData.value = table.rows
|
|
total.value = table.total
|
|
tableLoading.value = false
|
|
|
|
})
|
|
}
|
|
|
|
|
|
const changeInput = (val,column) => {
|
|
console.log(val,column)
|
|
|
|
}
|
|
|
|
const getData = () => {
|
|
tableLoading.value = true
|
|
let queryData = []
|
|
uniCons.value.forEach(con=>{
|
|
if (con.query){
|
|
let queryItem = {
|
|
query:con.query,
|
|
ucId: con.ucId
|
|
}
|
|
queryData.push(queryItem)
|
|
}
|
|
})
|
|
tableLoading.value = true
|
|
getPageData(pageInfo,{list:queryData,queryId}).then(res=>{
|
|
let data = res.data
|
|
tableData.value = data.rows
|
|
total.value = data.total
|
|
tableLoading.value = false
|
|
})
|
|
}
|
|
//重置搜索
|
|
const handleReset = () => {
|
|
uniCons.value.forEach(con=>{
|
|
con.query=''
|
|
})
|
|
getData()
|
|
}
|
|
//切换每页显示条数
|
|
const handleSizeChange = (val) => {
|
|
pageInfo.pageSize = val
|
|
getData()
|
|
}
|
|
|
|
//点击页码进行分页功能
|
|
const handleCurrentChange = (val) => {
|
|
pageInfo.pageNum = val
|
|
getData()
|
|
}
|
|
|
|
initPage()
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|