init : 初始化仓库
This commit is contained in:
486
src/views/custom-query/sql/SqlDesign.vue
Normal file
486
src/views/custom-query/sql/SqlDesign.vue
Normal file
@@ -0,0 +1,486 @@
|
||||
<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>
|
||||
351
src/views/custom-query/sql/index.vue
Normal file
351
src/views/custom-query/sql/index.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryForm">
|
||||
<el-form-item label="名称" prop="uqName">
|
||||
<el-input v-model="queryParams.uqName" placeholder="请输入名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否发布" prop="publish">
|
||||
<el-select v-model="queryParams.publish" placeholder="请选择发布类型" clearable filterable>
|
||||
<el-option label="已发布" value="2"/>
|
||||
<el-option label="未发布" value="0"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="query-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus" plain>新增</el-button>
|
||||
<el-button type="danger" :icon="Delete"
|
||||
@click="handleMoreDelete(uqIds)" :disabled="disabled" plain>删除
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="id"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@selection-change="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" width="60" align="center"/>
|
||||
<el-table-column prop="uqName" label="名称" align="center"/>
|
||||
<el-table-column prop="dataSourceId" label="数据源" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag >{{getDataSourceOptionItem(scope.row.dataSourceId)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="publish" label="发布类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="publish_type" :value="scope.row.publish"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="uqDescribe" label="描述" align="center"/>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"/>
|
||||
<el-table-column prop="updateTime" label="更新时间" align="center"/>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.publish == false">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleEdit(scope.row.id)" link>编辑
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleDesign(scope.row)" link>设计
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.uqName" :type="'SQL查询'"
|
||||
@delete="handleDelete(scope.row.id)"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-button type="primary" size="mini" @click="handleDownLine(scope.row)"
|
||||
:icon="Bottom" style="color: red" link>下线
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" size="mini"-->
|
||||
<!-- @click="handleView(scope.row)" :icon="View" link>预览-->
|
||||
<!-- </el-button>-->
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</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"/>
|
||||
<el-dialog v-model="isVisited" :title="title" width="600px">
|
||||
<el-form :model="form" ref="formInstance" :rules="formRules" class="dialog-form">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="数据源" prop="dataSourceId" v-if="title==='新增入Sql查询'">
|
||||
<el-select v-model="form.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="dataSourceId" v-else>
|
||||
<el-text>{{ getDataSourceOptionItem(form.dataSourceId) }}</el-text>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="uqName">
|
||||
<el-input v-model="form.uqName" placeholder="请输入sql查询名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="uqDescribe">
|
||||
<el-input v-model="form.uqDescribe" placeholder="请输入描述"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="11" >-->
|
||||
<!-- <el-form-item label="发布类型" prop="publish">-->
|
||||
<!-- <el-radio-group v-model="form.publish">-->
|
||||
<!-- <el-radio border :label="1">已发布</el-radio>-->
|
||||
<!-- <el-radio border :label="0">未发布</el-radio>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh, Plus, Delete, Edit, Bottom, View} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useRouter} from "vue-router";
|
||||
import {getSqlList, delSql, addSql, editSql, getSqlDetails} from "@/api/custom-query/sql";
|
||||
import {getDataSourceOption} from "@/api/custom-query/datamodel";
|
||||
import {sqlDownLine} from "@/api/custom-query/sql-search";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const router = useRouter()
|
||||
const queryParams = reactive({
|
||||
preview: '',
|
||||
publish: '',
|
||||
type: '',
|
||||
uqName: '',
|
||||
})
|
||||
const dataSourceOption = ref([])
|
||||
const queryForm = ref([])
|
||||
const uqIds = ref([])
|
||||
const uqNameList = ref([])
|
||||
const list = ref([])
|
||||
const total = ref()
|
||||
const loading = ref(true)
|
||||
const disabled = ref(true)
|
||||
const title = ref('')
|
||||
const isVisited = ref(false)
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const form = ref()
|
||||
const formInstance = ref()
|
||||
const formRules = ref({
|
||||
dataSourceId: [{required: true, message: '请选择数据源', trigger: "blur"}],
|
||||
uqName: [{required: true, message: '请输入Sql查询名称', trigger: 'blur'}],
|
||||
uqDescribe: [{required: true, message: '请输入描述', trigger: 'blur'}],
|
||||
})
|
||||
//获取数据源select的option
|
||||
const getOption =async () => {
|
||||
await getDataSourceOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
dataSourceOption.value = res.data
|
||||
// getList();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getDataSourceOptionItem = (dataSourceId) => {
|
||||
for (let item of dataSourceOption.value) {
|
||||
if (item.value === dataSourceId) {
|
||||
return item.label;
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
//获取数据
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getSqlList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data.rows
|
||||
total.value = res.data.total
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//重置from表单
|
||||
const restFrom = () => {
|
||||
form.value = {
|
||||
dataSourceId: null,
|
||||
uqName: null,
|
||||
uqDescribe: null
|
||||
}
|
||||
getOption()
|
||||
}
|
||||
//添加
|
||||
const handleAdd = async () => {
|
||||
formRules.value.dataSourceId[0].required = true
|
||||
restFrom()
|
||||
title.value = "新增入Sql查询"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//修改
|
||||
const handleEdit = async (id) => {
|
||||
restFrom()
|
||||
getSqlDetails(id).then(res => {
|
||||
console.log('详情', res.data)
|
||||
if (res.code === 1000) {
|
||||
formRules.value.dataSourceId[0].required = false
|
||||
form.value = res.data
|
||||
title.value = "编辑入Sql查询"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//设计
|
||||
const handleDesign = (row) => {
|
||||
//sql 设计页面
|
||||
router.push({path: `/custom/query/sql/design/${row.id}`})
|
||||
}
|
||||
//下线
|
||||
const handleDownLine = (row) => {
|
||||
ElMessageBox.confirm(`确认撤销名称为${row.uqName}的数据吗? 撤销后分配的查询权限将全部失效`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
customClass: 'red-warning'
|
||||
}).then(() => {
|
||||
sqlDownLine(row.id).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
//单个删除
|
||||
const handleDelete = async (id) => {
|
||||
delSql(id).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//多删
|
||||
const handleMoreDelete = (uqIds) => {
|
||||
ElMessageBox.confirm(`确认删除名称为${uqNameList}的SQL查询吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
handleDelete(uqIds)
|
||||
})
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restFrom()
|
||||
isVisited.value = false
|
||||
}
|
||||
|
||||
//提交
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
if (title.value === '新增入Sql查询') {
|
||||
addSql(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
editSql(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//勾选table数据行事件
|
||||
const handleSelect = async (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false
|
||||
uqIds.value=selection.map(item => item.id).join()
|
||||
uqNameList.value = selection.map(item => item.uqName).join()
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = async (val) => {
|
||||
pageInfo.pageSize = val
|
||||
await getList()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.pageNum = val
|
||||
await getList()
|
||||
}
|
||||
getOption()
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.red-warning {
|
||||
.el-message-box__content {
|
||||
.el-message-box__container {
|
||||
.el-icon {
|
||||
color: red !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user