init : 初始化

src/views/custom-query/table-management/importTable.vue

@@ -0,0 +1,168 @@
+<template>
+  <el-dialog v-model="isVisited" title="导入表格" width="1000px">
+    <el-form :model="queryParams" inline ref="queryForm">
+      <el-form-item label="数据源" prop="dataSourceId">
+        <el-select v-model="queryParams.dataSourceId" placeholder="数据源" clearable  filterable>
+          <el-option
+              v-for="item in dataSourceOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="表名称" prop="tableName">
+        <el-input v-model="queryParams.tableName" placeholder="请输入表名称" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input v-model="queryParams.tableComment" placeholder="请输入表描述" clearable></el-input>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="dateValue">
+        <el-config-provider>
+          <el-date-picker
+              v-model="dateValue"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="YYYY-MM-DD"
+          />
+        </el-config-provider>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="searchTableSearch" :icon="Search">搜索</el-button>
+        <el-button @click="handleReset" :icon="Refresh">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="table">
+      <el-table
+          :data="list"
+          row-key="tableId"
+          :lazy="true"
+          v-loading="loading"
+          @selection-change="handleSelect"
+      >
+        <el-table-column type="selection" width="55"/>
+        <el-table-column prop="tableName" label="表名称" align="center"/>
+        <el-table-column prop="tableComment" label="表描述" sortable align="center"/>
+        <el-table-column prop="createTime" label="创建时间" sortable align="center"/>
+        <el-table-column prop="updateTime" label="更新时间" sortable align="center"/>
+      </el-table>
+    </div>
+    <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
+            :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
+    <template #footer>
+      <span>
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleSubmit">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {Search, Refresh} from '@element-plus/icons-vue'
+import {defineExpose, defineProps} from "vue";
+import {getDynamicTableList} from "@/api/custom-query/table";
+import {ElMessage} from "element-plus";
+import {addTableInfo} from "@/api/custom-query/table";
+import Paging from "@/components/pagination/index.vue";
+
+const emit = defineEmits(['importSuccess','changeEdit'])
+
+const queryParams = reactive({
+  dataSourceId: '',
+  tableName: '',
+  tableComment: ''
+})
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+const list = ref([])
+const tableNameArray = ref([])
+const queryForm = ref([])
+const loading = ref(true)
+const dateValue = ref();
+const total = ref(0)
+const isVisited = ref(false)
+const props = defineProps({
+  dataSourceOption: {
+    type: Array,
+    default: []
+  }
+})
+const show = () => {
+  isVisited.value = true
+  queryParams.dataSourceId = props.dataSourceOption[0].value
+  searchTableSearch()
+}
+const searchTableSearch = async () => {
+  let params = {
+    ...queryParams,
+    ...pageInfo
+  }
+  const date = dateValue.value;
+  if (date !== undefined && date !== null) {
+    params.startTime = date[0];
+    params.endTime = date[1];
+  }
+  getDynamicTableList(params).then(res => {
+    console.log('searchTableSearch',res)
+    if (res.code === 1000) {
+      list.value = res.data.rows
+      total.value = res.data.total
+      loading.value = false
+    } else {
+      list.value = []
+      ElMessage.error(res.msg)
+    }
+  })
+}
+//确定
+const handleSubmit =async () => {
+  addTableInfo({
+    dataSourceId: queryParams.dataSourceId,
+    tables: tableNameArray.value
+  }).then(res => {
+    if (res.code === 1000) {
+      ElMessage.success(res.msg)
+      isVisited.value = false
+      emit("importSuccess")
+      if (tableNameArray.value.length === 1) {
+        if(res.data){
+          emit("changeEdit",res.data)
+        }
+      }
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
+//勾选table数据行事件
+const handleSelect = (selection) => {
+  tableNameArray.value=selection.map(item => item.tableName)
+}
+//重置功能
+const handleReset = () => {
+  queryParams.dataSourceId = props.dataSourceOption[0].value
+  queryForm.value.resetFields()
+  dateValue.value = []
+  searchTableSearch()
+}
+//切换每页显示条数
+const handleSizeChange =  (val) => {
+  pageInfo.pageSize = val
+   searchTableSearch()
+}
+
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = val
+   searchTableSearch()
+}
+
+defineExpose({
+  show
+})
+</script>
+