tunnel-cloud-front/src/views/custom-query/table-management/importTable.vue

<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];
  }
  loading.value = true
  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>