init

src/views/custom-query/query-page/index.vue

@@ -0,0 +1,107 @@
+<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>