487 lines
16 KiB
Vue
487 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<el-form ref="queryForm" class="query-form" :model="sqlQueryParams">
|
|
<el-row :gutter="20">
|
|
<el-col :span="18">
|
|
<div class="code-editor" v-if="editLoading">
|
|
<sql-code-edit v-model:value="sqlQueryParams.uniSql" :editor-placeholder="'请输入sql语句进行查询'"
|
|
:editor-height="300" :tab-size="2" @change="changeSqlCode"/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label-width="55px" label="名称" prop="uqName">
|
|
<el-input v-model="sqlQueryParams.uqName" placeholder="请输入名称" clearable :style="{width: '100%'}">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label-width="55px" label="描述" prop="uqDescribe">
|
|
<el-input v-model="sqlQueryParams.uqDescribe" placeholder="请输入描述" clearable :style="{width: '100%'}">
|
|
</el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item v-for="column in uniCons" :key="column.ucId"-->
|
|
<!-- :label="column.ucName">-->
|
|
<!-- <el-input :placeholder="column.ucDescribe" :type="column.ucType" v-model="column.query" clearable-->
|
|
<!-- @input="changeInput($event)"></el-input>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-button type="primary" @click="getSqlQueryInfo" link>搜索</el-button>-->
|
|
<el-button type="primary" @click="handleReset" link>重置</el-button>
|
|
<el-button type="primary" @click="handleAdd" link>新增</el-button>
|
|
<el-button type="primary" @click="previewSqlHandle" link>预览</el-button>
|
|
<el-button type="primary" @click="submitForm" link>保存</el-button>
|
|
<el-button type="primary" @click="handleTopLine" link>上线</el-button>
|
|
<el-button v-if="previewTable.length!==0" type="primary" @click="handleGetParams" link>字段提取</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div class="table">
|
|
<el-table :data="columns" row-key="columnId" :max-height="tableHeight"
|
|
:header-cell-style="{'background':'#f5f7fa'}" >
|
|
<el-table-column label="序号" type="index" min-width="5%"/>
|
|
<el-table-column label="查询名称" min-width="10%">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.ucName"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="条件描述" min-width="10%">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.ucDescribe"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="key" min-width="10%">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.ucKey"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="条件" min-width="10%">
|
|
<template #default="scope">
|
|
<el-select v-model="scope.row.ucCon" @change="ucTypeChang(scope.$index,scope.row)">
|
|
<el-option label="=" value="EQ"/>
|
|
<el-option label="!=" value="NE"/>
|
|
<el-option label=">" value="GT"/>
|
|
<el-option label=">=" value="GTE"/>
|
|
<el-option label="<" value="LT"/>
|
|
<el-option label="<=" value="LTE"/>
|
|
<el-option label="LIKE" value="LIKE"/>
|
|
<el-option label="BETWEEN" value="BETWEEN"/>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="显示类型" min-width="12%">
|
|
<template #default="scope">
|
|
<el-select v-model="scope.row.ucType" @change="ucTypeChang(scope.$index,scope.row)">
|
|
<el-option label="文本框" value="input"/>
|
|
<el-option label="日期控件" value="datetime"/>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="模拟数据" min-width="18%">
|
|
<template #default="scope">
|
|
<el-input v-if="scope.row.type == 1" placeholder="请输入模拟数据" v-model="scope.row.ucMock"></el-input>
|
|
<div v-else-if="scope.row.type == 2">
|
|
<el-row :gutter="15">
|
|
<el-col :span="12">
|
|
<el-input placeholder="开始值" v-model="scope.row.ucMock.begin"></el-input>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-input placeholder="结束值" v-model="scope.row.ucMock.end"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<el-date-picker
|
|
v-else-if="scope.row.type ==3"
|
|
v-model="scope.row.ucMock"
|
|
type="date"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
placeholder="选择日期时间"
|
|
>
|
|
</el-date-picker>
|
|
<el-date-picker v-else-if="scope.row.type ==4"
|
|
v-model="scope.row.ucMock"
|
|
size="small"
|
|
style="width: 240px"
|
|
value-format="yyyy-MM-dd"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
></el-date-picker>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" min-width="10%">
|
|
<template #default="scope">
|
|
<el-button type="primary" size="mini" @click="handleDelete(scope.$index,scope.row)" link>删除</el-button>
|
|
<el-button type="primary" @click="submitForm" link>提交</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div v-if="previewVisible">
|
|
<div class="table">
|
|
<el-table :data="previewTable" v-loading="previewLoading" :max-height="tableHeight"
|
|
:header-cell-style="{'background':'#f5f7fa'}">
|
|
<el-table-column label="序号" type="index" min-width="6%"/>
|
|
<el-table-column v-for="column in uniColumns" :key="column.prop" :prop="column.prop"
|
|
:label="column.label" align="center" min-width="10%"/>
|
|
</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"/>
|
|
</div>
|
|
|
|
<el-dialog v-model="isTopLineVisited" title="上线" width="700px">
|
|
<el-form :model="form" :rules="formRules" class="query-form" ref="formInstance">
|
|
<el-form-item label="上级菜单">
|
|
<el-tree-select v-model="form.parentId" :data="menuOpt" style="width: 100%;"
|
|
filterable :check-strictly="true"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit(formInstance)">
|
|
确定
|
|
</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<el-dialog v-model="isFieldVisited" title="字段提取" width="800px">
|
|
<el-button type="primary" @click="handleAddField">新增字段</el-button>
|
|
<el-table :data="uniColumns" row-key="columnId" :max-height="tableHeight"
|
|
:header-cell-style="{'background':'#f5f7fa'}">
|
|
<el-table-column label="字段名称" type="index" width="120px">
|
|
<template #default="scope">
|
|
{{ scope.row.prop }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="字段别名" >
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.label"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="显示类型" >
|
|
<template #default="scope">
|
|
<el-select v-model="scope.row.displayType" placeholder="请选择显示类型" clearable filterable @change="displayTypeChange(scope.$index,scope.row)">
|
|
<el-option
|
|
v-for="item in cacheStore.getDict('display_type')"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="显示参数" >
|
|
<template #default="scope">
|
|
<el-select v-if="scope.row.displayType == 'date'" v-model="scope.row.displayParam" placeholder="请选择显示参数" clearable filterable>
|
|
<el-option
|
|
v-for="item in cacheStore.getDict('date_format')"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
<el-select v-if="scope.row.displayType == 'dict'" v-model="scope.row.displayParam" placeholder="请选择显示参数" clearable filterable>
|
|
<el-option
|
|
v-for="item in dictOption"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" >
|
|
<template #default="scope">
|
|
<el-button type="primary" size="mini" @click="handleFieldDelete(scope.$index,scope.row)" link>删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<template #footer>
|
|
<el-button @click="handleFieldCancel">取消</el-button>
|
|
<el-button type="primary" @click="handleFieldSubmit">
|
|
确定
|
|
</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
<el-dialog v-model="isAddFieldVisited" title="新增字段" width="400px">
|
|
<el-form ref="queryForm" :model="addFieldParams" :rules="rules">
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item label="字段名称" prop="prop">
|
|
<el-input v-model="addFieldParams.prop" placeholder="请输入字段名称" clearable >
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="字段别名" prop="label">
|
|
<el-input v-model="addFieldParams.label" placeholder="请输入字段别名" clearable >
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SqlCodeEdit from "@/components/codeEdit/SqlCodeEdit.vue";
|
|
import {useRouter} from "vue-router";
|
|
import {getSqlInfo, previewSql, saveSqlQueryParams, sqlToLine} from "@/api/custom-query/sql-search";
|
|
import {getMenuOpt} from '@/api/system/menuman.js'
|
|
import {ElMessage} from "element-plus";
|
|
import {reactive} from "vue";
|
|
import Paging from "@/components/pagination/index.vue";
|
|
import {useCacheStore} from "@/stores/cache";
|
|
import {getDictOption} from "@/api/system/dict-type";
|
|
const cacheStore = useCacheStore()
|
|
const previewTable = ref([])
|
|
const uniColumns = ref([])
|
|
const previewLoading = ref(false)
|
|
const queryForm = ref()
|
|
const dictOption = ref([])
|
|
const menuOpt = ref([])
|
|
const previewVisible = ref(false)
|
|
const isTopLineVisited = ref(false)
|
|
const isAddFieldVisited = ref(false)
|
|
const isFieldVisited = ref(false)
|
|
const form = ref({
|
|
parentId: ''
|
|
})
|
|
const total = ref(0)
|
|
const pageInfo = reactive({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
})
|
|
const formInstance = ref()
|
|
const formRules = ref({
|
|
parentId: [{required: true, message: '请选择上级菜单', trigger: 'blur'}]
|
|
})
|
|
const router = useRouter();
|
|
const queryId = reactive(router.currentRoute.value.params.queryId)
|
|
const addFieldParams=reactive({
|
|
prop:'',
|
|
label:''
|
|
})
|
|
const sqlQueryParams = reactive({
|
|
uniSql: '',
|
|
uqName: null,
|
|
uqDescribe: null,
|
|
// columnList: []
|
|
})
|
|
const editLoading = ref(true)
|
|
const loading = ref(false)
|
|
const rules = ref({
|
|
uqName: [{required: true, message: '请输入名称', trigger: 'blur'}],
|
|
uqDescribe: [{required: true, message: '请输入描述', trigger: 'blur'}]
|
|
})
|
|
const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px')
|
|
const list = ref([])
|
|
const columns = ref([])
|
|
const uniCons = ref([])
|
|
const getDictInfo= async () => {
|
|
getDictOption().then(res => {
|
|
if (res.code === 1000) {
|
|
dictOption.value = res.data
|
|
}
|
|
})
|
|
}
|
|
const ucTypeChang = (index, row) => {
|
|
if (row.ucType == 'input' && row.ucCon != 'BETWEEN') {
|
|
if (typeof (row.ucMock) != 'string') {
|
|
row.ucMock = ''
|
|
}
|
|
row.type = 1
|
|
} else if (row.ucType == 'input' && row.ucCon == 'BETWEEN') {
|
|
row.type = 2
|
|
row.ucMock = {begin: '', end: ''}
|
|
} else if (row.ucType == 'datetime' && row.ucCon != 'BETWEEN') {
|
|
row.type = 3
|
|
row.ucMock = ''
|
|
} else if (row.ucType == 'datetime' && row.ucCon == 'BETWEEN') {
|
|
row.type = 4
|
|
row.ucMock = []
|
|
}
|
|
}
|
|
const displayTypeChange=(index, row)=>{
|
|
if(row.displayType=='dict'){
|
|
|
|
}else if(row.displayType=='date'){
|
|
|
|
}
|
|
}
|
|
const getSqlQueryInfo = () => {
|
|
getSqlInfo(queryId).then(res => {
|
|
if (res.code === 1000) {
|
|
columns.value = res.data.uniCons
|
|
sqlQueryParams.uniSql=res.data.uniSql
|
|
sqlQueryParams.uqName=res.data.uqName
|
|
sqlQueryParams.uqDescribe=res.data.uqDescribe
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
})
|
|
}
|
|
//重置搜索
|
|
const handleReset = () => {
|
|
sqlQueryParams.uniSql = ' '
|
|
queryForm.value.resetFields()
|
|
}
|
|
const handleAdd = () => {
|
|
let row = {
|
|
id: null,
|
|
uqId: queryId,
|
|
ucName: '',
|
|
ucCon: '',
|
|
ucDescribe: '',
|
|
ucKey: '',
|
|
ucMock: '',
|
|
ucType: '',
|
|
type: 1
|
|
}
|
|
columns.value.push(row)
|
|
}
|
|
const handleAddField=()=>{
|
|
// isAddFieldVisited.value=true
|
|
let row={
|
|
prop:'',
|
|
label:''
|
|
}
|
|
uniColumns.value.push(row)
|
|
}
|
|
const handleDelete = (index, row) => {
|
|
columns.value.splice(index, 1)
|
|
}
|
|
const submitForm = () => {
|
|
let data = {
|
|
queryId: queryId,
|
|
uniSql: sqlQueryParams.uniSql,
|
|
uniCons: columns.value,
|
|
uniColumns: uniColumns.value
|
|
}
|
|
editLoading.value = false;
|
|
saveSqlQueryParams(data).then(res => {
|
|
if (res.code === 1000) {
|
|
nextTick(() => {
|
|
editLoading.value = true;
|
|
})
|
|
ElMessage.success(res.msg)
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
})
|
|
}
|
|
//实时获取sql语句
|
|
const changeSqlCode = (val) => {
|
|
sqlQueryParams.uniSql = val
|
|
}
|
|
|
|
const previewSqlHandle = () => {
|
|
if (sqlQueryParams.uniSql == '') {
|
|
ElMessage({
|
|
message: '请先输入sql语句再进行预览!',
|
|
type: 'warning',
|
|
})
|
|
return;
|
|
}
|
|
previewLoading.value = true
|
|
let data = {
|
|
queryId: queryId,
|
|
uniSql: sqlQueryParams.uniSql,
|
|
uniCons: columns.value,
|
|
uniColumns: uniColumns.value
|
|
}
|
|
previewSql(data, pageInfo).then(res => {
|
|
if (res.code === 1000) {
|
|
ElMessage.success(res.msg)
|
|
previewLoading.value = false
|
|
previewVisible.value = true
|
|
previewTable.value = res.data.table.rows
|
|
total.value = res.data.table.total
|
|
let keyList = []
|
|
for (let key in res.data.table.rows[0]) {
|
|
let keyObject = {
|
|
label: key,
|
|
prop: key,
|
|
}
|
|
keyList.push(keyObject)
|
|
}
|
|
uniColumns.value = keyList
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
})
|
|
}
|
|
//切换每页显示条数
|
|
const handleSizeChange = (val) => {
|
|
pageInfo.pageSize = val
|
|
previewSqlHandle()
|
|
}
|
|
|
|
//点击页码进行分页功能
|
|
const handleCurrentChange = (val) => {
|
|
pageInfo.pageNum = val
|
|
previewSqlHandle()
|
|
}
|
|
//点击上线按钮弹出选择菜单框
|
|
const handleTopLine = () => {
|
|
getMenuOpt().then(res => {
|
|
menuOpt.value = [{
|
|
value: 0,
|
|
label: "一级目录",
|
|
children: res.data
|
|
}]
|
|
})
|
|
isTopLineVisited.value = true
|
|
}
|
|
//提取字段
|
|
const handleGetParams = () => {
|
|
isFieldVisited.value = true
|
|
}
|
|
const restForm = () => {
|
|
form.value = {
|
|
parentId: ''
|
|
}
|
|
}
|
|
//取消
|
|
const handleCancel = () => {
|
|
restForm();
|
|
isTopLineVisited.value = false;
|
|
};
|
|
const handleFieldCancel = () => {
|
|
isFieldVisited.value = false;
|
|
};
|
|
const handleFieldSubmit = () => {
|
|
isFieldVisited.value = false;
|
|
}
|
|
const handleSubmit = async (instance) => {
|
|
if (!instance) return
|
|
instance.validate(async (valid, fields) => {
|
|
if (!valid) return
|
|
let data = {
|
|
menuId: form.value.parentId,
|
|
queryId: queryId,
|
|
uniSql: sqlQueryParams.uniSql,
|
|
uniCons: columns.value,
|
|
uniColumns: uniColumns.value
|
|
}
|
|
sqlToLine(data).then(res => {
|
|
if (res.code === 1000) {
|
|
ElMessage.success(res.msg)
|
|
router.push({path: `/custom/query/sql`})
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
getDictInfo()
|
|
getSqlQueryInfo()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.code-editor {
|
|
border: 1px solid #b3b3b3;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|