邓洁 : 修改页面细节

This commit is contained in:
邓洁
2023-11-06 21:54:59 +08:00
parent b91a7e4f0d
commit 5d9c841728
6 changed files with 141 additions and 104 deletions

View File

@@ -30,9 +30,9 @@
</el-form> </el-form>
<div class="query-btn"> <div class="query-btn">
<el-button type="primary" v-perm="['query:adapter:add']" @click="handleAdd" :icon="Plus" plain>新增</el-button> <el-button type="primary" v-perm="['query:adapter:add']" @click="handleAdd" :icon="Plus" plain>新增</el-button>
<popover-delete :name="adapterNameList" btn-type="danger" :type="'菜单'" :perm="['query:adapter:del']" <el-button type="danger" :icon="Delete" v-perm="['query:adapter:del']"
:is-disabled="disabled" :is-plain="true" :btn-icon="Delete" @click="handleMoreDelete(adapterIds)" :disabled="disabled" plain>删除
@delete="handleDelete(adapterIds)"/> </el-button>
<el-button type="warning" v-perm="['query:adapter:export']" @click="handleExport" :icon="Download" plain>导出 <el-button type="warning" v-perm="['query:adapter:export']" @click="handleExport" :icon="Download" plain>导出
</el-button> </el-button>
</div> </div>
@@ -223,6 +223,16 @@ const handleDelete = async (adapterId) => {
} }
}) })
} }
//多删
const handleMoreDelete=(adapterIds)=>{
ElMessageBox.confirm(`确认删除名称为${adapterNameList}的适配器吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
handleDelete(adapterIds)
})
}
//勾选table数据行事件 //勾选table数据行事件
const handleSelect = async (selection) => { const handleSelect = async (selection) => {
if (selection.length !== 0) { if (selection.length !== 0) {

View File

@@ -20,8 +20,9 @@
</el-form> </el-form>
<div class="query-btn"> <div class="query-btn">
<el-button type="primary" v-perm="['query:source:add']" @click="handleAdd" :icon="Plus" plain>新增</el-button> <el-button type="primary" v-perm="['query:source:add']" @click="handleAdd" :icon="Plus" plain>新增</el-button>
<popover-delete :name="sourceName" btn-type="danger" :type="'数据模型'" :is-plain="true" :btn-icon="Delete" :is-disabled="disabled" :perm="['query:source:del']" <el-button type="danger" :icon="Delete" v-perm="['query:source:del']"
@delete="handleDelete(sourceId)"/> @click="handleMoreDelete(sourceId)" :disabled="disabled" plain>删除
</el-button>
<el-button type="warning" v-perm="['query:source:export']" @click="handleExport" :icon="Download" plain>导出 <el-button type="warning" v-perm="['query:source:export']" @click="handleExport" :icon="Download" plain>导出
</el-button> </el-button>
</div> </div>
@@ -42,14 +43,14 @@
<el-table-column prop="type" label="数据模型类型" align="center"/> <el-table-column prop="type" label="数据模型类型" align="center"/>
<el-table-column prop="confType" label="数据模型配置类型" align="center"> <el-table-column prop="confType" label="数据模型配置类型" align="center">
<template #default="scope"> <template #default="scope">
<tag dict-type="data_source_config" :value="scope.row.configType"/> <tag dict-type="data_source_config" :value="scope.row.configType"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="url" label="数据模型连接地址" align="center"/> <el-table-column prop="url" label="数据模型连接地址" align="center"/>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button type="text" size="mini" v-perm="['query:source:edit']" <el-button type="text" size="mini" v-perm="['query:source:edit']"
@click="handleEdit(scope.row.id)" >编辑 @click="handleEdit(scope.row.id)">编辑
</el-button> </el-button>
<popover-delete :name="scope.row.dsName" :type="'数据模型'" :perm="['query:source:del']" <popover-delete :name="scope.row.dsName" :type="'数据模型'" :perm="['query:source:del']"
@delete="handleDelete(scope.row.id)"/> @delete="handleDelete(scope.row.id)"/>
@@ -192,27 +193,27 @@ const formRules = ref({
host: [{required: true, message: '请输入数据模型服务地址', trigger: 'blur'}], host: [{required: true, message: '请输入数据模型服务地址', trigger: 'blur'}],
dbName: [{required: true, message: '请输入数据库名称', trigger: 'blur'}], dbName: [{required: true, message: '请输入数据库名称', trigger: 'blur'}],
url: [{required: true, message: '请输入数据模型连接地址', trigger: 'blur'}], url: [{required: true, message: '请输入数据模型连接地址', trigger: 'blur'}],
params:{ params: {
serviceName: [{required: true, message: '请输入服务名称', trigger: 'blur'}], serviceName: [{required: true, message: '请输入服务名称', trigger: 'blur'}],
namespace: [{required: true, message: '请输入命名空间', trigger: 'blur'}] namespace: [{required: true, message: '请输入命名空间', trigger: 'blur'}]
} }
}) })
const getTypeOption=()=>{ const getTypeOption = () => {
getDataSourceType().then(res=>{ getDataSourceType().then(res => {
typeList.value=res.data typeList.value = res.data
}) })
} }
const handleTypeChange = (type) => { const handleTypeChange = (type) => {
if (form.value.configType !== 1){ if (form.value.configType !== 1) {
return; return;
} }
if (type === 'ORACLE'){ if (type === 'ORACLE') {
form.value.params = { form.value.params = {
serviceName: '' serviceName: ''
} }
} }
if (type === 'POSTGRES'){ if (type === 'POSTGRES') {
form.value.params = { form.value.params = {
namespace: '' namespace: ''
} }
@@ -301,7 +302,7 @@ const handleAdd = async () => {
restFrom() restFrom()
title.value = "新增数据模型管理" title.value = "新增数据模型管理"
isVisited.value = true isVisited.value = true
nextTick(()=>{ nextTick(() => {
// 清空校验 // 清空校验
formInstance.value.clearValidate() formInstance.value.clearValidate()
}) })
@@ -316,7 +317,7 @@ const handleEdit = async (id) => {
form.value = res.data form.value = res.data
title.value = "编辑数据模型管理" title.value = "编辑数据模型管理"
isVisited.value = true isVisited.value = true
nextTick(()=>{ nextTick(() => {
// 清空校验 // 清空校验
formInstance.value.clearValidate() formInstance.value.clearValidate()
}) })
@@ -358,16 +359,25 @@ const handleCurrentChange = async (val) => {
} }
//删除 //删除
const handleDelete = async (id) => { const handleDelete = async (id) => {
delDataSourceManage(id).then(res => { delDataSourceManage(id).then(res => {
if (res.code === 1000) { if (res.code === 1000) {
ElMessage.success(res.msg) ElMessage.success(res.msg)
getList() getList()
} else { } else {
ElMessage.error(res.msg) ElMessage.error(res.msg)
} }
}) })
}
//多删
const handleMoreDelete = (sourceId) => {
ElMessageBox.confirm(`确认删除名称为${sourceName}的数据模型吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
handleDelete(sourceId)
})
} }
getTypeOption() getTypeOption()
getList() getList()
</script> </script>

View File

@@ -17,9 +17,9 @@
</el-form> </el-form>
<div class="query-btn"> <div class="query-btn">
<el-button type="primary" @click="handleAdd" :icon="Plus" plain>新增</el-button> <el-button type="primary" @click="handleAdd" :icon="Plus" plain>新增</el-button>
<popover-delete :name="uqNameList" btn-type="danger" :type="'SQL查询'" <el-button type="danger" :icon="Delete"
:is-disabled="disabled" :is-plain="true" :btn-icon="Delete" @click="handleMoreDelete(uqIds)" :disabled="disabled" plain>删除
@delete="handleDelete(uqIds)"/> </el-button>
</div> </div>
<div class="table"> <div class="table">
<el-table <el-table
@@ -34,8 +34,8 @@
<el-table-column label="序号" type="index" width="60" align="center"/> <el-table-column label="序号" type="index" width="60" align="center"/>
<el-table-column prop="uqName" label="名称" align="center"/> <el-table-column prop="uqName" label="名称" align="center"/>
<el-table-column prop="dataSourceId" label="数据源" align="center"> <el-table-column prop="dataSourceId" label="数据源" align="center">
<template #default="scope"> <template #default="scope">
<el-tag >{{getDataSourceOptionItem(scope.row.dataSourceId)}}</el-tag> <el-tag>{{ getDataSourceOptionItem(scope.row.dataSourceId) }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="publish" label="发布类型" align="center"> <el-table-column prop="publish" label="发布类型" align="center">
@@ -50,12 +50,12 @@
<template #default="scope"> <template #default="scope">
<div v-if="scope.row.publish == false"> <div v-if="scope.row.publish == false">
<el-button type="text" size="mini" <el-button type="text" size="mini"
@click="handleEdit(scope.row.id)" >编辑 @click="handleEdit(scope.row.id)">编辑
</el-button> </el-button>
<el-button type="text" size="mini" <el-button type="text" size="mini"
@click="handleDesign(scope.row)" >设计 @click="handleDesign(scope.row)">设计
</el-button> </el-button>
<popover-delete :name="scope.row.uqName" :type="'SQL查询'" <popover-delete :name="scope.row.uqName" :type="'SQL查询'"
@delete="handleDelete(scope.row.id)"/> @delete="handleDelete(scope.row.id)"/>
</div> </div>
<div v-else> <div v-else>
@@ -154,13 +154,13 @@ const formRules = ref({
uqDescribe: [{required: true, message: '请输入描述', trigger: 'blur'}], uqDescribe: [{required: true, message: '请输入描述', trigger: 'blur'}],
}) })
//获取数据源select的option //获取数据源select的option
const getOption =async () => { const getOption = async () => {
await getDataSourceOption().then(res => { await getDataSourceOption().then(res => {
if (res.code === 1000) { if (res.code === 1000) {
dataSourceOption.value = res.data dataSourceOption.value = res.data
// getList(); // getList();
} }
}) })
} }
const getDataSourceOptionItem = (dataSourceId) => { const getDataSourceOptionItem = (dataSourceId) => {
@@ -258,22 +258,24 @@ const handleDownLine = (row) => {
//单个删除 //单个删除
const handleDelete = async (id) => { const handleDelete = async (id) => {
// let list = [] delSql(id).then(res => {
// list.push(row.id) if (res.code === 1000) {
// ElMessageBox.confirm(`确认删除名称为${row.uqName}的数据吗?`, '系统提示', { ElMessage.success(res.msg)
// confirmButtonText: '确定', getList()
// cancelButtonText: '取消', } else {
// type: 'warning' ElMessage.error(res.msg)
// }).then(() => { }
delSql(id).then(res => { })
if (res.code === 1000) { }
ElMessage.success(res.msg) //多删
getList() const handleMoreDelete = (uqIds) => {
} else { ElMessageBox.confirm(`确认删除名称为${uqNameList}的SQL查询吗?`, '系统提示', {
ElMessage.error(res.msg) confirmButtonText: '确定',
} cancelButtonText: '取消',
}) type: 'warning'
// }) }).then(() => {
handleDelete(uqIds)
})
} }
//取消 //取消
const handleCancel = () => { const handleCancel = () => {
@@ -314,7 +316,7 @@ const handleSubmit = async (instance) => {
const handleSelect = async (selection) => { const handleSelect = async (selection) => {
if (selection.length !== 0) { if (selection.length !== 0) {
disabled.value = false disabled.value = false
uqIds.value=selection.map(item => item.id).join() uqIds.value = selection.map(item => item.id).join()
uqNameList.value = selection.map(item => item.uqName).join() uqNameList.value = selection.map(item => item.uqName).join()
} else { } else {
disabled.value = true disabled.value = true

View File

@@ -17,9 +17,9 @@
</el-form> </el-form>
<div class="query-btn"> <div class="query-btn">
<el-button type="primary" @click="handleAdd" :icon="Plus" plain>新增</el-button> <el-button type="primary" @click="handleAdd" :icon="Plus" plain>新增</el-button>
<popover-delete :name="uqNameList" btn-type="danger" :type="'拓扑图查询'" <el-button type="danger" :icon="Delete"
:is-disabled="disabled" :is-plain="true" :btn-icon="Delete" @click="handleMoreDelete(uqIds)" :disabled="disabled" plain>删除
@delete="handleDelete(uqIds)"/> </el-button>
</div> </div>
<div class="table"> <div class="table">
<el-table <el-table
@@ -34,8 +34,8 @@
<el-table-column label="序号" type="index" width="60" align="center"/> <el-table-column label="序号" type="index" width="60" align="center"/>
<el-table-column prop="uqName" label="名称" align="center"/> <el-table-column prop="uqName" label="名称" align="center"/>
<el-table-column prop="dataSourceId" label="数据源" align="center"> <el-table-column prop="dataSourceId" label="数据源" align="center">
<template #default="scope"> <template #default="scope">
<el-tag >{{getDataSourceOptionItem(scope.row.dataSourceId)}}</el-tag> <el-tag>{{ getDataSourceOptionItem(scope.row.dataSourceId) }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="publish" label="发布类型" align="center"> <el-table-column prop="publish" label="发布类型" align="center">
@@ -50,12 +50,12 @@
<template #default="scope"> <template #default="scope">
<div v-if="scope.row.publish == false"> <div v-if="scope.row.publish == false">
<el-button type="text" size="mini" <el-button type="text" size="mini"
@click="handleEdit(scope.row.id)" >编辑 @click="handleEdit(scope.row.id)">编辑
</el-button> </el-button>
<el-button type="text" size="mini" <el-button type="text" size="mini"
@click="handleDesign(scope.row)" >设计 @click="handleDesign(scope.row)">设计
</el-button> </el-button>
<popover-delete :name="scope.row.uqName" :type="'拓扑图查询'" <popover-delete :name="scope.row.uqName" :type="'拓扑图查询'"
@delete="handleDelete(scope.row.id)"/> @delete="handleDelete(scope.row.id)"/>
</div> </div>
<div v-else> <div v-else>
@@ -117,7 +117,7 @@
</template> </template>
<script setup> <script setup>
import {Search, Refresh, Plus, Delete, Edit,Bottom,View} from '@element-plus/icons-vue' import {Search, Refresh, Plus, Delete, Edit, Bottom, View} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router"; import {useRouter} from "vue-router";
import {getTopoList, delTopo, addTopo, editTopo, getTopoDetails} from "@/api/custom-query/topo"; import {getTopoList, delTopo, addTopo, editTopo, getTopoDetails} from "@/api/custom-query/topo";
@@ -164,7 +164,7 @@ const getOption = () => {
}) })
} }
const getDataSourceOptionItem = (dataSourceId) => { const getDataSourceOptionItem = (dataSourceId) => {
if(dataSourceOption.value===undefined)return; if (dataSourceOption.value === undefined) return;
for (let item of dataSourceOption.value) { for (let item of dataSourceOption.value) {
if (item.value === dataSourceId) { if (item.value === dataSourceId) {
return item.label; return item.label;
@@ -257,32 +257,29 @@ const handleDownLine = (row) => {
}) })
} }
//查看 //查看
const handleView=(id)=>{ const handleView = (id) => {
//router.push({path: `/custom/query/page/${id}`}) //router.push({path: `/custom/query/page/${id}`})
} }
//单个删除 //单个删除
const handleDelete = async (id) => { const handleDelete = async (id) => {
// let list = [] delTopo(id).then(res => {
// if(Array.isArray(id)){ if (res.code === 1000) {
// list=Object.values(id) ElMessage.success(res.msg)
// }else { getList()
// list.push(id) } else {
// } ElMessage.error(res.msg)
// console.log(list,'list') }
// ElMessageBox.confirm(`确认删除名称为${row.uqName}的拓扑图吗?`, '系统提示', { })
// confirmButtonText: '确定', }
// cancelButtonText: '取消', //多删
// type: 'warning' const handleMoreDelete = (uqIds) => {
// }).then(() => { ElMessageBox.confirm(`确认删除名称为${uqNameList}的拓扑图查询吗?`, '系统提示', {
delTopo(id).then(res => { confirmButtonText: '确定',
if (res.code === 1000) { cancelButtonText: '取消',
ElMessage.success(res.msg) type: 'warning'
getList() }).then(() => {
} else { handleDelete(uqIds)
ElMessage.error(res.msg) })
}
})
// })
} }
//取消 //取消
const handleCancel = () => { const handleCancel = () => {
@@ -322,7 +319,7 @@ const handleSubmit = async (instance) => {
const handleSelect = async (selection) => { const handleSelect = async (selection) => {
if (selection.length !== 0) { if (selection.length !== 0) {
disabled.value = false disabled.value = false
uqIds.value=selection.map(item => item.id).join() uqIds.value = selection.map(item => item.id).join()
uqNameList.value = selection.map(item => item.uqName).join() uqNameList.value = selection.map(item => item.uqName).join()
} else { } else {
disabled.value = true disabled.value = true
@@ -343,11 +340,11 @@ getOption()
getList() getList()
</script> </script>
<style lang="scss"> <style lang="scss">
.red-warning{ .red-warning {
.el-message-box__content{ .el-message-box__content {
.el-message-box__container{ .el-message-box__container {
.el-icon{ .el-icon {
color: red !important; color: red !important;
} }
} }

View File

@@ -35,9 +35,9 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="query-btn"> <div class="query-btn">
<popover-delete :name="infoId" btn-type="danger" :type="'日志'" <el-button type="danger" :icon="Delete"
:is-disabled="disabled" :is-plain="true" :btn-icon="Delete" @click="handleMoreDelete(infoId)" :disabled="disabled" plain>删除
@delete="handleDelete(infoId)"/> </el-button>
</div> </div>
<div class="table"> <div class="table">
<el-table <el-table
@@ -169,7 +169,16 @@ const handleDelete = async (infoId) => {
} }
}) })
} }
//多删
const handleMoreDelete = (infoId) => {
ElMessageBox.confirm(`确认删除名称为${infoId}的日志吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
handleDelete(infoId)
})
}
//勾选table数据行的 Checkbox, 多/单选删除功能 //勾选table数据行的 Checkbox, 多/单选删除功能
const handleSelect = async (selection) => { const handleSelect = async (selection) => {
if (selection.length !== 0) { if (selection.length !== 0) {

View File

@@ -45,9 +45,9 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="query-btn"> <div class="query-btn">
<popover-delete :name="operIds" btn-type="danger" :type="'日志'" <el-button type="danger" :icon="Delete"
:is-disabled="disabled" :is-plain="true" :btn-icon="Delete" @click="handleMoreDelete(operIds)" :disabled="disabled" plain>删除
@delete="handleDelete(operIds)"/> </el-button>
</div> </div>
<div class="table"> <div class="table">
<el-table <el-table
@@ -83,7 +83,7 @@
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button type="text" size="mini" @click="handleViewDetails(scope.row.operId)" >详细</el-button> <el-button type="text" size="mini" @click="handleViewDetails(scope.row.operId)" >详细</el-button>
<popover-delete :name="operIds" :type="'日志'" <popover-delete :name="scope.row.operId" :type="'日志'"
@delete="handleDelete(scope.row.operId)"/> @delete="handleDelete(scope.row.operId)"/>
</template> </template>
</el-table-column> </el-table-column>
@@ -267,7 +267,16 @@ const handleDelete = async (operId) => {
} }
}); });
}; };
//多删
const handleMoreDelete = (operIds) => {
ElMessageBox.confirm(`确认删除名称为${operIds}的日志吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
handleDelete(operIds)
})
}
//勾选table数据行的 Checkbox, 实现单/多选删除功能 //勾选table数据行的 Checkbox, 实现单/多选删除功能
const handleSelect = async (selection) => { const handleSelect = async (selection) => {
if (selection.length !== 0) { if (selection.length !== 0) {