init : 初始化仓库
This commit is contained in:
220
src/views/auth/index.vue
Normal file
220
src/views/auth/index.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="my">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="10" :xs="24">
|
||||
<el-card class="box-card1">
|
||||
<!-- 标题 -->
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="userDetail">
|
||||
<!-- 头像上传 -->
|
||||
<div class="userImg">
|
||||
<el-image class="avatar" :src="userParams.avatar" fit="fill"/>
|
||||
</div>
|
||||
<div class="userInfo_item">
|
||||
<el-icon>
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
用户呢称: <span>{{ userParams.nickName }}</span>
|
||||
</div>
|
||||
<div class="userInfo_item"><el-icon>
|
||||
<Iphone />
|
||||
</el-icon>电话号码: <span>{{ userParams.phoneNumber }}</span> </div>
|
||||
<div class="userInfo_item"><el-icon>
|
||||
<Message />
|
||||
</el-icon>用户邮箱:<span>{{ userParams.email }}</span> </div>
|
||||
<div class="userInfo_item"><el-icon>
|
||||
<HomeFilled />
|
||||
</el-icon>所属部门: <span>{{ userParams.city }}</span> </div>
|
||||
<div class="userInfo_item"><el-icon>
|
||||
<OfficeBuilding />
|
||||
</el-icon>所属角色: <span>{{ userParams.createBy }}</span> </div>
|
||||
<div class="userInfo_item"><el-icon>
|
||||
<Calendar />
|
||||
</el-icon>创建日期:<span>{{ userParams.loginDate }}</span> </div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="14" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<!-- 标题 -->
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>基本资料</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-tabs class="demo-tabs" v-model="activeName">
|
||||
<el-tab-pane label="基本资料" name="first" >
|
||||
<el-form
|
||||
:model="userParams"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item label="用户昵称" prop="userName" :required="true" style="text-align:left">
|
||||
<el-input v-model="userParams.nickName"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" :required="true" style="text-align:left">
|
||||
<el-input v-model="userParams.phoneNumber"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email" :required="true" style="text-align:left">
|
||||
<el-input v-model="userParams.email"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="userParams.sex">
|
||||
<el-radio label="0">男</el-radio>
|
||||
<el-radio label="1">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
<el-button @click="close">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="修改密码" name="second">
|
||||
<el-form label-width="120px" :model="userPassword">
|
||||
<el-form-item label="旧密码" :required="true" style="text-align:left">
|
||||
<el-input placeholder="请输入旧密码" v-model="userPassword.oldPassWord"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" :required="true" style="text-align:left">
|
||||
<el-input placeholder="请输入新密码" v-model="userPassword.newPassWord"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" :required="true" style="text-align:left">
|
||||
<el-input placeholder="请确认新密码" v-model="userPassword.querenPassWord"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit2">保存</el-button>
|
||||
<el-button @click="close">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {getUserInfo} from '@/api/login';
|
||||
import {ref} from "vue";
|
||||
import {modifyUser} from '@/api/auth/auth'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useTagsView } from '@/stores/tagsview.js'
|
||||
var userParams = ref({})
|
||||
var userPassword=ref({
|
||||
oldPassWord:'',
|
||||
newPassWord:'',
|
||||
querenPassWord:''
|
||||
})
|
||||
const activeName = ref('first')
|
||||
const tagsViewStore = useTagsView()
|
||||
const getuserinfo=async ()=>{
|
||||
await getUserInfo().then(res=>{
|
||||
userParams.value=res.data.user
|
||||
})
|
||||
}
|
||||
|
||||
// 修改资料
|
||||
const submit=async ()=>{
|
||||
await modifyUser({
|
||||
userName:userParams.value.userName,
|
||||
nickName:userParams.value.nickName,
|
||||
phoneNumber:userParams.value.phoneNumber,
|
||||
email:userParams.value.email,
|
||||
sex:userParams.value.sex,
|
||||
userId:userParams.value.userId
|
||||
}).then(res=>{
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
// 修改密码
|
||||
const submit2=async ()=>{
|
||||
await getUserInfo().then( res=>{
|
||||
if(res.data!=''){
|
||||
console.log(res.data.user.password)
|
||||
if (userPassword.value.oldPassWord==res.data.user.password && userPassword.value.newPassWord==userPassword.value.querenPassWord){
|
||||
modifyUser({
|
||||
userName:userParams.value.userName,
|
||||
nickName:userParams.value.nickName,
|
||||
password:userPassword.value.newPassWord,
|
||||
userId:userParams.value.userId
|
||||
}).then(res=>{
|
||||
ElMessage({
|
||||
message: '修改密码成功',
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
}else if(userPassword.value.oldPassWord!=res.data.user.password && userPassword.value.newPassWord==userPassword.value.querenPassWord){
|
||||
ElMessage({
|
||||
message: '旧密码错误',
|
||||
type: 'error',
|
||||
})
|
||||
}else if(userPassword.value.oldPassWord==res.data.user.password && userPassword.value.newPassWord!=userPassword.value.querenPassWord){
|
||||
ElMessage({
|
||||
message: '新密码与确认密码不同',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
}else{
|
||||
ElMessage({
|
||||
message: '请求错误',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
// 关闭
|
||||
const close = () => {
|
||||
tagsViewStore.delVisitedViews({
|
||||
path:"/auth",meta:{hidden: false, title: '个人中心', breadcrumb: true}})
|
||||
}
|
||||
onMounted(()=>{
|
||||
getuserinfo()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
body,div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.my {
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
.userDetail {
|
||||
.userImg {
|
||||
height: 170px;
|
||||
text-align: center;
|
||||
border-bottom-style: solid;
|
||||
border-color: #daddd2;
|
||||
border-width: 1px;
|
||||
.avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.userInfo_item {
|
||||
height: 40px;
|
||||
border-bottom-style: solid;
|
||||
border-color: #daddd2;
|
||||
border-width: 1px;
|
||||
text-align: left;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.userInfo_item > span {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
293
src/views/custom-query/data-adapter/DataAdapterDesign.vue
Normal file
293
src/views/custom-query/data-adapter/DataAdapterDesign.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<el-steps
|
||||
v-if="!isSpecial"
|
||||
style="max-width: 2000px; margin-top: 5px"
|
||||
:active="4"
|
||||
simple
|
||||
align-center
|
||||
>
|
||||
<el-step title="查看数据源" />
|
||||
<el-step title="输入模拟数据作为入参" />
|
||||
<el-step title="执行代码" />
|
||||
<el-step title="下方查看结果" />
|
||||
</el-steps>
|
||||
<el-form ref="queryForm" class="query-form" :model="queryParams">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="16">
|
||||
<div class="code-editor">
|
||||
<java-code-edit
|
||||
v-if="codeType !== 'JAVA_SCRIPT'"
|
||||
v-model="codeData"
|
||||
:editor-placeholder="'请输入Java代码'"
|
||||
:editor-height="500"
|
||||
:tab-size="2"
|
||||
/>
|
||||
<js-code-edit
|
||||
v-else
|
||||
v-model="codeData"
|
||||
:editor-placeholder="'请输入JavaScript代码'"
|
||||
:editor-height="500"
|
||||
:tab-size="2"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-row>
|
||||
<el-col :span="12" v-for="(item, index) in mappings">
|
||||
<el-form-item :label="item.mappingValue + ':'" prop="mappingKey">
|
||||
<el-input
|
||||
placeholder="请输入查询参数"
|
||||
v-model="mappings[index].userInput"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item
|
||||
label="查询结果:"
|
||||
prop="operParam"
|
||||
class="json-viewer-father"
|
||||
v-if="isSpecial"
|
||||
>
|
||||
<span
|
||||
class="expand"
|
||||
@click="
|
||||
isExpandVisible = true;
|
||||
expandData = mockData;
|
||||
"
|
||||
v-if="isExpandBtnVisible"
|
||||
>展开</span
|
||||
>
|
||||
<div class="json-viewer">
|
||||
<json-viewer
|
||||
:value="mockData"
|
||||
:expand-depth="100"
|
||||
style="width: 100%; height: 300px"
|
||||
></json-viewer>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item prop="mockData" v-if="!isSpecial">
|
||||
<el-input
|
||||
v-model="queryParams.mockData"
|
||||
placeholder="请输入模拟数据源"
|
||||
:rows="20"
|
||||
type="textarea"
|
||||
clearable
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button type="primary" @click="handleSave">保存代码</el-button>
|
||||
<el-button type="primary" @click="handleExecute">模拟执行</el-button>
|
||||
<el-button type="primary" @click="handleSourceData" v-if="!isSpecial"
|
||||
>查看数据源</el-button
|
||||
>
|
||||
<el-button type="primary" @click="handleSourceData" v-if="isSpecial"
|
||||
>查询数据源</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col class="preview-bottom">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
输出：
|
||||
<span
|
||||
style="color: #49c4ff; cursor: pointer"
|
||||
@click="
|
||||
isExpandVisible = true;
|
||||
expandData = resPreviewData;
|
||||
"
|
||||
>展开</span
|
||||
>
|
||||
<json-viewer
|
||||
class="bottom-printf"
|
||||
:value="resPreviewData"
|
||||
:expand-depth="105"
|
||||
copyable
|
||||
sort
|
||||
></json-viewer>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
控制台：
|
||||
<el-input
|
||||
v-model="errorPreviewData"
|
||||
:rows="10"
|
||||
style="color: red"
|
||||
disabled
|
||||
type="textarea"
|
||||
clearable
|
||||
>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-dialog title="数据展开" v-model="isExpandVisible">
|
||||
<json-viewer
|
||||
:value="expandData"
|
||||
:expand-depth="100"
|
||||
style="width: 100%"
|
||||
></json-viewer
|
||||
></el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* @author: JimTT
|
||||
* @description: 适配器设计
|
||||
*/
|
||||
|
||||
import JsonViewer from "vue-json-viewer";
|
||||
import JavaCodeEdit from "@/components/codeEdit/JavaCodeEdit.vue";
|
||||
import JsCodeEdit from "@/components/codeEdit/JsCodeEdit.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
getMockData,
|
||||
getSpecialDetail,
|
||||
executeCode,
|
||||
savaCode,
|
||||
} from "@/api/custom-query/adapter";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const isExpandBtnVisible = ref(false);
|
||||
const isExpandVisible = ref(false);
|
||||
const unencryptedPortalId = ref(null);
|
||||
const mockData = ref();
|
||||
const codeData = ref(null);
|
||||
const resPreviewData = ref();
|
||||
const errorPreviewData = ref();
|
||||
const expandData = ref(null);
|
||||
const router = useRouter();
|
||||
const isSpecial = router.currentRoute.value.query.special;
|
||||
const portalId = router.currentRoute.value.query.portalId;
|
||||
const queryParams = ref({});
|
||||
const mappings = ref([]);
|
||||
const codeType = ref(null);
|
||||
|
||||
// 获取专用适配器详情
|
||||
const getSpecialDetails = async () => {
|
||||
const { code, data } = await getSpecialDetail(portalId);
|
||||
if (code === 1000) {
|
||||
mappings.value = data.mappings;
|
||||
unencryptedPortalId.value = data.portalId;
|
||||
codeData.value = data.dataAdapter.code;
|
||||
codeType.value = data.dataAdapter.type;
|
||||
}
|
||||
};
|
||||
getSpecialDetails();
|
||||
|
||||
// 保存
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const { code } = await savaCode({
|
||||
code: codeData.value,
|
||||
portalId: unencryptedPortalId.value,
|
||||
});
|
||||
if (code === 1000) {
|
||||
ElMessage.success("保存成功");
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
// 执行
|
||||
const handleExecute = async () => {
|
||||
let params = [];
|
||||
mappings.value.forEach((item) => {
|
||||
params.push({
|
||||
key: item.mappingKey,
|
||||
value: item.userInput,
|
||||
});
|
||||
});
|
||||
|
||||
let mockParams = {
|
||||
code: codeData.value,
|
||||
params,
|
||||
portalId: unencryptedPortalId.value,
|
||||
};
|
||||
|
||||
try {
|
||||
const { code, data } = await executeCode(mockParams);
|
||||
if (code === 1000) {
|
||||
if (data.success) {
|
||||
resPreviewData.value = data.result;
|
||||
errorPreviewData.value = data.console;
|
||||
} else {
|
||||
errorPreviewData.value = data.console;
|
||||
resPreviewData.value = data.result;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
// 查看资源
|
||||
const handleSourceData = async () => {
|
||||
let params = [];
|
||||
mappings.value.forEach((item) => {
|
||||
params.push({
|
||||
key: item.mappingKey,
|
||||
value: item.userInput,
|
||||
});
|
||||
});
|
||||
const res = await getMockData({
|
||||
params,
|
||||
portalId: unencryptedPortalId.value,
|
||||
});
|
||||
if (res.code === 1000) {
|
||||
isExpandBtnVisible.value = true;
|
||||
mockData.value = res.data;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.data-preview {
|
||||
width: 98%;
|
||||
margin: 10px auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.copy {
|
||||
color: #418dff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.preview-bottom {
|
||||
max-height: 255px;
|
||||
.bottom-preview {
|
||||
max-height: 255px;
|
||||
}
|
||||
.bottom-printf {
|
||||
max-height: 255px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.json-viewer-father {
|
||||
position: relative;
|
||||
|
||||
.json-viewer {
|
||||
height: 305px;
|
||||
overflow: auto;
|
||||
}
|
||||
.expand {
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: #49c4ff;
|
||||
top: 270px;
|
||||
left: -50px;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
::v-deep .v-codemirror .cm-focused {
|
||||
outline: none;
|
||||
}
|
||||
::v-deep .jv-container.jv-light .jv-item.jv-undefined {
|
||||
display: none;
|
||||
}
|
||||
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
||||
color: red;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
384
src/views/custom-query/data-adapter/index.vue
Normal file
384
src/views/custom-query/data-adapter/index.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryForm">
|
||||
<el-form-item label="适配器名称" prop="adapterName">
|
||||
<el-input
|
||||
v-model="queryParams.adapterName"
|
||||
placeholder="请输适配器名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="适配器来源" prop="source">
|
||||
<el-select
|
||||
v-model="queryParams.source"
|
||||
placeholder="请选择适配器来源"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('data_adapter_source')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="代码类型" prop="type">
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
placeholder="请选择数据适配器代码类型"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('data_adapter_type')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</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"
|
||||
v-perm="['query:adapter:add']"
|
||||
@click="handleAdd"
|
||||
:icon="Plus"
|
||||
plain
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
v-perm="['query:adapter:del']"
|
||||
@click="handleMoreDelete(adapterIds)"
|
||||
:disabled="disabled"
|
||||
plain
|
||||
>删除
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
v-perm="['query:adapter:export']"
|
||||
@click="handleExport"
|
||||
:icon="Download"
|
||||
plain
|
||||
>导出
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="adapterId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="序号" type="index" width="60" />
|
||||
<el-table-column prop="adapterName" label="适配器名称" align="center" />
|
||||
<el-table-column prop="type" label="代码类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="data_adapter_type" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="source" label="适配器来源" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="data_adapter_source" :value="scope.row.source" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
v-perm="['query:adapter:edit']"
|
||||
@click="handleEdit(scope.row.adapterId)"
|
||||
link
|
||||
>编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleDesign(scope.row)"
|
||||
link
|
||||
>设计
|
||||
</el-button>
|
||||
<popover-delete
|
||||
:name="scope.row.adapterName"
|
||||
:type="'适配器'"
|
||||
:perm="['query:adapter:del']"
|
||||
@delete="handleDelete(scope.row.adapterId)"
|
||||
/>
|
||||
</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="700px">
|
||||
<el-form :model="form" ref="formInstance" class="dialog-form">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="适配器名称" prop="adapterName">
|
||||
<el-input
|
||||
v-model="form.adapterName"
|
||||
placeholder="请输入适配器名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="数据适配器代码类型" prop="type">
|
||||
<el-select
|
||||
v-model="form.type"
|
||||
placeholder="请选择数据适配器代码类型"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('data_adapter_type')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="适配器来源" prop="source">
|
||||
<el-select
|
||||
v-model="form.source"
|
||||
placeholder="请选择适配器来源"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('data_adapter_source')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11"> </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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getDataAdapterList,
|
||||
getDataAdapterDetails,
|
||||
addDataAdapter,
|
||||
editDataAdapter,
|
||||
delDataAdapter,
|
||||
} from "@/api/custom-query/adapter";
|
||||
import {
|
||||
Search,
|
||||
Refresh,
|
||||
Delete,
|
||||
Plus,
|
||||
Edit,
|
||||
Download,
|
||||
} from "@element-plus/icons-vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import { useCacheStore } from "@/stores/cache";
|
||||
import { useRouter } from "vue-router";
|
||||
import Tag from "@/components/Tag.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const cacheStore = useCacheStore();
|
||||
const queryParams = reactive({
|
||||
adapterName: "",
|
||||
source: "",
|
||||
type: "",
|
||||
});
|
||||
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const list = ref([]);
|
||||
const queryForm = ref([]);
|
||||
const loading = ref(true);
|
||||
const disabled = ref(true);
|
||||
const total = ref();
|
||||
const title = ref("");
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
const formInstance = ref();
|
||||
const adapterIds = ref([]);
|
||||
const adapterNameList = ref([]);
|
||||
|
||||
//获取数据
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo,
|
||||
};
|
||||
loading.value = true;
|
||||
getDataAdapterList(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 = {
|
||||
adapterName: null,
|
||||
source: "CUSTOM",
|
||||
type: null,
|
||||
};
|
||||
};
|
||||
|
||||
//添加
|
||||
const handleAdd = async () => {
|
||||
restFrom();
|
||||
title.value = "新增数据源适配器";
|
||||
isVisited.value = true;
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate();
|
||||
});
|
||||
};
|
||||
|
||||
//修改
|
||||
const handleEdit = async (id) => {
|
||||
restFrom();
|
||||
getDataAdapterDetails(id).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
form.value = res.data;
|
||||
title.value = "编辑数据源适配器";
|
||||
isVisited.value = true;
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate();
|
||||
});
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//设计
|
||||
const handleDesign = (row) => {
|
||||
router.push({ path: `/custom/query/data/adapter/design/${row.adapterId}` });
|
||||
};
|
||||
|
||||
//删除
|
||||
const handleDelete = async (adapterId) => {
|
||||
delDataAdapter(adapterId).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//多删
|
||||
const handleMoreDelete = (adapterIds) => {
|
||||
ElMessageBox.confirm(
|
||||
`确认删除名称为${adapterNameList.value}的适配器吗?`,
|
||||
"系统提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
).then(() => {
|
||||
handleDelete(adapterIds);
|
||||
});
|
||||
};
|
||||
|
||||
//勾选table数据行事件
|
||||
const handleSelect = async (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false;
|
||||
adapterIds.value = selection.map((item) => item.adapterId).join();
|
||||
adapterNameList.value = selection.map((item) => item.adapterName).join();
|
||||
} else {
|
||||
disabled.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restFrom();
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
//提交
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return;
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (title.value === "新增数据源适配器") {
|
||||
addDataAdapter(form.value).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editDataAdapter(form.value).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = async (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
await getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
await getList();
|
||||
};
|
||||
|
||||
//
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
392
src/views/custom-query/datamodel/index.vue
Normal file
392
src/views/custom-query/datamodel/index.vue
Normal file
@@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryForm">
|
||||
<el-form-item label="数据模型名称" prop="dsName">
|
||||
<el-input v-model="queryParams.dsName" placeholder="请输入数据模型名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库名称" prop="dbName">
|
||||
<el-input v-model="queryParams.dbName" placeholder="请输入数据库名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="配置类型" prop="configType">
|
||||
<el-select v-model="queryParams.configType" placeholder="请选择配置类型" clearable filterable>
|
||||
<el-option label="主机" value="1"/>
|
||||
<el-option label="JDBC" value="2"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch" :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" v-perm="['query:source:add']" @click="handleAdd" :icon="Plus" plain>新增</el-button>
|
||||
<el-button type="danger" :icon="Delete" v-perm="['query:source:del']"
|
||||
@click="handleMoreDelete(sourceId,sourceName)" :disabled="disabled" plain>删除
|
||||
</el-button>
|
||||
<el-button type="warning" v-perm="['query:source:export']" @click="handleExport" :icon="Download" plain>导出
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="id"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" width="60" align="center"/>
|
||||
<el-table-column prop="dsName" label="数据模型名称" align="center"/>
|
||||
<el-table-column prop="dbName" label="数据库名称" align="center"/>
|
||||
<el-table-column prop="username" label="数据模型用户名" align="center"/>
|
||||
<el-table-column prop="type" label="数据模型类型" align="center"/>
|
||||
<el-table-column prop="confType" label="数据模型配置类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="data_source_config" :value="scope.row.configType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="url" label="数据模型连接地址" align="center">
|
||||
<template #default="scope">
|
||||
<div class="formatterUrl">{{ scope.row.url }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" v-perm="['query:source:edit']"
|
||||
@click="handleEdit(scope.row.id)" link>编辑
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.dsName" :type="'数据模型'" :perm="['query:source:del']"
|
||||
@delete="handleDelete(scope.row.id)"/>
|
||||
</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="900px">
|
||||
<el-form :model="form" ref="formInstance" :rules="formRules" class="dialog-form" :validate-on-rule-change="false">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="数据模型名称" prop="dsName">
|
||||
<el-input v-model="form.dsName" placeholder="请输入数据模型名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="数据模型用户名" prop="username">
|
||||
<el-input v-model="form.username" placeholder="请输入数据模型用户名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="数据模型密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入数据模型密码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="数据模型类型" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择数据模型类型" filterable @change="handleTypeChange(form.type)">
|
||||
<el-option
|
||||
v-for="typeItem in typeList"
|
||||
:key="typeItem.value"
|
||||
:label="typeItem.label"
|
||||
:value="typeItem.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="配置类型" prop="configType">
|
||||
<el-radio-group v-model="form.configType">
|
||||
<el-radio border :label="1">主机</el-radio>
|
||||
<el-radio border :label="2">JDBC</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2" v-if="form.configType === 1">
|
||||
<el-form-item label="数据模型端口" prop="port">
|
||||
<el-input-number v-model="form.port"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" v-if="form.configType === 1">
|
||||
<el-form-item label="数据模型服务地址" prop="host">
|
||||
<el-input v-model="form.host" placeholder="请输入数据模型服务地址"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="数据库名称" prop="dbName" v-if="form.configType === 1">
|
||||
<el-input v-model="form.dbName" placeholder="请输入数据库名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="form.configType === 2">
|
||||
<el-form-item label="数据模型连接地址" prop="url">
|
||||
<el-input v-model="form.url" :rows="4"
|
||||
type="textarea" placeholder="请输入数据模型连接地址"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="form.configType === 1">
|
||||
<el-form-item label="配置参数" prop="args">
|
||||
<el-input v-model="form.args" :rows="4"
|
||||
type="textarea" placeholder="请输入配置参数"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="服务名称" prop="params.serviceName" v-if="form.type === 'ORACLE' && form.configType===1">
|
||||
<el-input v-model="form.params.serviceName" placeholder="请输入服务名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="命名空间" prop="params.namespace" v-if="form.type === 'POSTGRES' && form.configType===1">
|
||||
<el-input v-model="form.params.namespace" placeholder="请输入命名空间"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getDataSourceManageList,
|
||||
getDataSourceManageDetails,
|
||||
addDataSourceManage,
|
||||
editDataSourceManage,
|
||||
delDataSourceManage,
|
||||
getDataSourceType
|
||||
} from "@/api/custom-query/datamodel";
|
||||
import {Search, Refresh, Delete, Plus, Edit, Download} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
//查询参数
|
||||
const queryParams = reactive({
|
||||
dsName: '',
|
||||
dbName: '',
|
||||
type: '',
|
||||
})
|
||||
//页面信息
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const disabled = ref(true)
|
||||
const typeList = ref([])
|
||||
const list = ref([])
|
||||
const queryForm = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref()
|
||||
const sourceId = ref()
|
||||
const sourceName = ref()
|
||||
const singleTable = ref()
|
||||
const title = ref('')
|
||||
const isVisited = ref(false)
|
||||
const form = ref()
|
||||
const formInstance = ref()
|
||||
const formRules = ref({
|
||||
dsName: [{required: true, message: '请输入数据模型名称', trigger: 'blur'}],
|
||||
username: [{required: true, message: '请输入数据模型用户名', trigger: 'blur'}],
|
||||
password: [{required: true, message: '请输入数据模型密码', trigger: 'blur'}],
|
||||
type: [{required: true, message: '请选择数据模型类型', trigger: 'blur'}],
|
||||
configType: [{required: true, message: '请选择配置类型', trigger: 'blur'}],
|
||||
port: [{required: true, message: '请输入数据模型端口', trigger: 'blur'}],
|
||||
host: [{required: true, message: '请输入数据模型服务地址', trigger: 'blur'}],
|
||||
dbName: [{required: true, message: '请输入数据库名称', trigger: 'blur'}],
|
||||
url: [{required: true, message: '请输入数据模型连接地址', trigger: 'blur'}],
|
||||
params: {
|
||||
serviceName: [{required: true, message: '请输入服务名称', trigger: 'blur'}],
|
||||
namespace: [{required: true, message: '请输入命名空间', trigger: 'blur'}]
|
||||
}
|
||||
})
|
||||
const getTypeOption = () => {
|
||||
getDataSourceType().then(res => {
|
||||
typeList.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
const handleTypeChange = (type) => {
|
||||
if (form.value.configType !== 1) {
|
||||
return;
|
||||
}
|
||||
if (type === 'ORACLE') {
|
||||
form.value.params = {
|
||||
serviceName: ''
|
||||
}
|
||||
}
|
||||
if (type === 'POSTGRES') {
|
||||
form.value.params = {
|
||||
namespace: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//搜索功能
|
||||
const handleSearch = () => {
|
||||
getList()
|
||||
}
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
//获取数据
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getDataSourceManageList(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 = {
|
||||
dsName: null,
|
||||
username: null,
|
||||
password: null,
|
||||
host: null,
|
||||
port: 0,
|
||||
type: null,
|
||||
dbName: null,
|
||||
configType: 1,
|
||||
url: null,
|
||||
args: null,
|
||||
params: {}
|
||||
}
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restFrom()
|
||||
isVisited.value = false
|
||||
}
|
||||
//提交
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
if (title.value === '新增数据模型管理') {
|
||||
addDataSourceManage(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
editDataSourceManage(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//添加
|
||||
const handleAdd = async () => {
|
||||
formRules.value.password[0].required = true
|
||||
restFrom()
|
||||
title.value = "新增数据模型管理"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//修改
|
||||
const handleEdit = async (id) => {
|
||||
restFrom()
|
||||
getDataSourceManageDetails(id).then(res => {
|
||||
if (res.code === 1000) {
|
||||
console.log('res', res.data)
|
||||
formRules.value.password[0].required = false
|
||||
form.value = res.data
|
||||
title.value = "编辑数据模型管理"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//导出excel
|
||||
const handleExport = () => {
|
||||
downLoadExcel('/query/query/source/export', {...queryParams})
|
||||
}
|
||||
|
||||
//勾选table数据行的 Checkbox
|
||||
const handleSelect = async (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false
|
||||
sourceId.value = selection.map(item => item.id).join()
|
||||
sourceName.value = selection.map(item => item.dsName).join()
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = async (val) => {
|
||||
pageInfo.pageSize = val
|
||||
await getList()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.pageNum = val
|
||||
await getList()
|
||||
}
|
||||
//删除
|
||||
const handleDelete = async (id) => {
|
||||
delDataSourceManage(id).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//多删
|
||||
const handleMoreDelete = (sourceId, sourceName) => {
|
||||
ElMessageBox.confirm(`确认删除名称为${sourceName}的数据模型吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
handleDelete(sourceId)
|
||||
})
|
||||
}
|
||||
getTypeOption()
|
||||
getList()
|
||||
</script>
|
||||
<style scoped>
|
||||
.formatterUrl {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
233
src/views/custom-query/echarts-editor/EchartsDesign.vue
Normal file
233
src/views/custom-query/echarts-editor/EchartsDesign.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div>
|
||||
<EchartsEditor :info="initInfo" :line-data="lineChartsItem" :bar-data="barChartsItem" :pie-data="pieChartsItem"
|
||||
:radar-data="radarChartsItem" :radar-indicator="indicator" @getFinalInfo="getFinalInfo"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import EchartsEditor from "./components/EchartsEditor.vue";
|
||||
//入参
|
||||
const lineChartsItem = ref([
|
||||
{
|
||||
id: 1,
|
||||
unit: '年份',
|
||||
type: '',
|
||||
dataType: 'key',
|
||||
color: '',
|
||||
label: '年份',
|
||||
symbol: "",
|
||||
symbolSize: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
shadowColor: '',//阴影颜色
|
||||
shadowBlur: 0,//图形阴影的模糊大小
|
||||
opacity: 1
|
||||
},
|
||||
data: ['2013', '2014', '2015', '2016', '2017', '2018']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
unit: '年销量',
|
||||
type: 'line',
|
||||
dataType: 'value',
|
||||
color: '#9a60b4',//图形颜色
|
||||
label: '华北',
|
||||
symbol: "triangle",//标记的图形circle:圆形,rect:矩形,triangle:三角形,diamond:钻石形,roundRect:圆角矩形,pin:圆钉形,arrow:箭头形,none:不显示标记
|
||||
symbolSize: 8,//标记的大小
|
||||
showSymbol: true,//是否显示标记,如果 false 则只有在 tooltip hover 的时候显示。
|
||||
lineStyle: {
|
||||
shadowColor: '',//阴影颜色
|
||||
shadowBlur: 0,//图形阴影的模糊大小
|
||||
opacity: 1//图形透明度
|
||||
},
|
||||
data: [40, 80, 20, 120, 140, 50]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
unit: '年销量',
|
||||
type: 'line',
|
||||
dataType: 'value',
|
||||
color: '#3ba272',
|
||||
label: '华东',
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
showSymbol: true,
|
||||
lineStyle: {
|
||||
shadowColor: '',//阴影颜色
|
||||
shadowBlur: 0,//图形阴影的模糊大小
|
||||
opacity: 1
|
||||
},
|
||||
data: [140, 180, 120, 40, 50, 150]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
unit: '年销量',
|
||||
type: 'line',
|
||||
dataType: 'value',
|
||||
color: '#5470c6',
|
||||
label: '华南',
|
||||
symbol: "rect",
|
||||
symbolSize: 8,
|
||||
showSymbol: true,
|
||||
lineStyle: {
|
||||
shadowColor: '',//阴影颜色
|
||||
shadowBlur: 0,//图形阴影的模糊大小
|
||||
opacity: 1
|
||||
},
|
||||
data: [110, 143, 68, 90, 120, 130]
|
||||
}
|
||||
])
|
||||
const barChartsItem = ref([
|
||||
{
|
||||
id: 1,
|
||||
unit: '年份',
|
||||
type: '',
|
||||
dataType: 'key',
|
||||
color: '',
|
||||
label: '年份',
|
||||
showBackground: false,
|
||||
backgroundStyle: {
|
||||
color: '',
|
||||
borderWidth: 0,
|
||||
borderColor: '',
|
||||
borderType: 'solid',
|
||||
},
|
||||
data: ['2013', '2014', '2015', '2016', '2017', '2018']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
unit: '销售金额',
|
||||
type: 'bar',
|
||||
dataType: 'value',
|
||||
color: '#9a60b4',//图形颜色
|
||||
label: '王五',
|
||||
showBackground: true,//是否显示柱条的背景色
|
||||
backgroundStyle: {
|
||||
color: '#e5e2e2',//柱条的颜色
|
||||
borderWidth: 0,//柱条的描边宽度，默认不描边。
|
||||
borderColor: '#000',//柱条的描边颜色
|
||||
borderType: 'dotted',//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'
|
||||
},
|
||||
data: [40, 80, 20, 120, 140, 50]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
unit: '销售金额',
|
||||
type: 'bar',
|
||||
dataType: 'value',
|
||||
color: '#3ba272',
|
||||
label: '李四',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: '#e5e2e2',
|
||||
borderWidth: 0,
|
||||
borderColor: '#000',
|
||||
borderType: 'dashed',
|
||||
},
|
||||
data: [140, 180, 120, 40, 50, 150]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
unit: '销售金额',
|
||||
type: 'bar',
|
||||
dataType: 'value',
|
||||
color: '#2644a4',
|
||||
label: '张三',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: '#e5e2e2',
|
||||
borderWidth: 0,
|
||||
borderColor: '#000',
|
||||
borderType: 'solid',
|
||||
},
|
||||
data: [110, 143, 68, 90, 120, 130]
|
||||
}
|
||||
])
|
||||
const pieChartsItem = ref([
|
||||
{id: 1, label: '京东', dataType: 'value', value: 335},
|
||||
{id: 2, label: '菜鸟', dataType: 'value', value: 310},
|
||||
{id: 3, label: '总部', dataType: 'value', value: 234},
|
||||
{id: 4, label: '小电商', dataType: 'value', value: 135},
|
||||
])
|
||||
const radarChartsItem = ref([
|
||||
{label: 'Allocated Budget', dataType: 'value', data: [4200, 3000, 20000, 35000, 50000, 18000]},
|
||||
{label: 'Actual Spending', dataType: 'value', data: [5000, 14000, 28000, 26000, 42000, 21000]},
|
||||
])
|
||||
//定义好echarts的配置数据
|
||||
let initInfo = reactive({
|
||||
xValueAxis: [],
|
||||
yValueAxis: [],
|
||||
//echarts配置数据
|
||||
echartsOptions: {
|
||||
//图例
|
||||
legend: {
|
||||
data: [],
|
||||
selected: {},
|
||||
selectedMode: false
|
||||
},
|
||||
//离容器四侧的距离
|
||||
grid: {
|
||||
left: 40, // 左边距
|
||||
right: 60, // 右边距
|
||||
top: 40, // 顶边距
|
||||
bottom: 20, // 底边距
|
||||
// containLabel: true,
|
||||
},
|
||||
//提示框组件
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis'
|
||||
},
|
||||
//工具栏
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// //重置按钮显示
|
||||
// restore: {
|
||||
// show: true,
|
||||
// title: '重置'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
//X轴
|
||||
xAxis: {
|
||||
name: '',
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
//Y轴
|
||||
yAxis: {
|
||||
name: '',
|
||||
type: 'value',
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
},
|
||||
//配置项
|
||||
series: []
|
||||
}
|
||||
})
|
||||
const indicator= ref([
|
||||
{ name: 'Sales', max: 6500 },
|
||||
{ name: 'Administration', max: 16000 },
|
||||
{ name: 'Information Technology', max: 30000 },
|
||||
{ name: 'Customer Support', max: 38000 },
|
||||
{ name: 'Development', max: 52000 },
|
||||
{ name: 'Marketing', max: 25000 }
|
||||
])
|
||||
//获取到拖拽后的数据
|
||||
const getFinalInfo = (val) => {
|
||||
// console.log('父组件获取最终数据', val)
|
||||
if (val !== undefined) {
|
||||
initInfo = val
|
||||
}
|
||||
}
|
||||
getFinalInfo()
|
||||
</script>
|
||||
538
src/views/custom-query/echarts-editor/components/AxisBox.vue
Normal file
538
src/views/custom-query/echarts-editor/components/AxisBox.vue
Normal file
@@ -0,0 +1,538 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="box-card box-card-h">
|
||||
<el-row justify="space-between" class="x-y-axis">
|
||||
<el-text>值轴/{{ boxName }}</el-text>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="boxName+'，数据类型必须一致！'"
|
||||
placement="bottom"
|
||||
>
|
||||
<el-icon>
|
||||
<Warning/>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
<div class="drag-block">
|
||||
<draggable
|
||||
class="list-group"
|
||||
:list="dragList"
|
||||
itemKey="id"
|
||||
:group="group"
|
||||
@start="startDrag"
|
||||
@change="dragChartItem"
|
||||
>
|
||||
<template #item="{ element,index }">
|
||||
<div :id="element.dataType==='value'?'card_'+index:''" tabindex="1"
|
||||
@click.stop="handleClickValueCard(element,index)">
|
||||
<el-card shadow="hover" class="cards x-y-cards"
|
||||
:style="{borderWidth:1,borderColor:element.dataType==='value'?element.color:'#e4e7ed'}">
|
||||
<el-col :span="3">
|
||||
<div>{{ element.label }}</div>
|
||||
</el-col>
|
||||
<el-col :span="13">
|
||||
<div v-if="element.dataType==='value'" class="update-color">
|
||||
<div class="update-color" @click.stop>
|
||||
<span>图形：</span>
|
||||
<el-color-picker v-model="element.color" :color="element.color"
|
||||
@change="changeEchartsColor($event,index)" @active-change="handleActiveChange"/>
|
||||
</div>
|
||||
<div v-if="currentChart==='line'" class="update-color" @click.stop>
|
||||
<span>阴影：</span>
|
||||
<el-color-picker v-model="element.lineStyle.shadowColor" :color="element.lineStyle.shadowColor"
|
||||
@change="changeShadowColor($event,index)" @active-change="handleActiveChange"/>
|
||||
</div>
|
||||
<div v-if="currentChart==='bar'" class="update-color" @click.stop>
|
||||
<span>背景: </span>
|
||||
<el-color-picker v-model="element.backgroundStyle.color" :color="element.backgroundStyle.color"
|
||||
@change="changeBackgroundColor($event,index)" @active-change="handleActiveChange"/>
|
||||
</div>
|
||||
<div v-if="currentChart==='bar'" class="update-color" @click.stop>
|
||||
<span >描边: </span>
|
||||
<el-color-picker v-model="element.backgroundStyle.borderColor" :color="element.backgroundStyle.borderColor"
|
||||
@change="changeBackgroundBorderColor($event,index)" @active-change="handleActiveChange"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="cards-right">
|
||||
<span>{{ element.dataType }}</span>
|
||||
<el-icon size="20" color="red" @click.stop="handleCancelAxis(element,index)"
|
||||
style="cursor: pointer">
|
||||
<CircleClose/>
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
const emit = defineEmits(["editBasicSettingList"])
|
||||
const props = defineProps({
|
||||
//box名字
|
||||
boxName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//可供拖动的选项列表
|
||||
dragOptions: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//用于拖拽区域存放选项列表
|
||||
dragList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//用于X轴区域存放拖动的选项
|
||||
xAxisList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//用于Y轴区域存放拖动的选项
|
||||
yAxisList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//标记正在拖动选项的数据类型是否value
|
||||
flag: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//获取正在拖动选项的数据类型
|
||||
startDataType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//初始化加载echarts函数
|
||||
initCharts: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
//echarts的配置属性
|
||||
chartOption: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//当前echarts图形
|
||||
currentChart: {
|
||||
type: String,
|
||||
default: 'line'
|
||||
}
|
||||
})
|
||||
//基础设置列表
|
||||
const lineChartBasicSettingList = ref()
|
||||
const barChartBasicSettingList = ref()
|
||||
//选中类型为value的item所处的list列表
|
||||
const valueCardInList = ref([])
|
||||
//简化代码
|
||||
let xList = reactive(props.xAxisList)
|
||||
let yList = reactive(props.yAxisList)
|
||||
let option = reactive(props.chartOption)
|
||||
//路由刷新
|
||||
const reload = inject("reload")
|
||||
//自定义X/Y分组的拖入拖出事件
|
||||
const group = ref({
|
||||
name: 'people',
|
||||
pull: true,
|
||||
put: props.flag === true ? false : (props.boxName === 'X轴' ? () => handleGroupPut(xList, yList) : () => handleGroupPut(yList, xList))
|
||||
})
|
||||
//将改变的数据传到父组件
|
||||
watch(() => lineChartBasicSettingList.value, (newVal) => {
|
||||
emit("getLineChartBasicSettingList", newVal)
|
||||
})
|
||||
//将改变的数据传到父组件
|
||||
watch(() => barChartBasicSettingList.value, (newVal) => {
|
||||
emit("getBarChartBasicSettingList", newVal)
|
||||
})
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', nullBlockClick)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', nullBlockClick)
|
||||
})
|
||||
/**
|
||||
* 设置chart的lineStyle
|
||||
* @param sItem chartItem
|
||||
* @param opacity 透明度
|
||||
*/
|
||||
const handleChangeLineStyle = (sItem, opacity) => {
|
||||
sItem.lineStyle = {
|
||||
shadowColor: sItem.lineStyle.shadowColor,
|
||||
shadowBlur: sItem.lineStyle.shadowBlur,
|
||||
opacity: opacity
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 用于取消charts选中透明度
|
||||
*/
|
||||
const handleChangeOpacity = (type, item) => {
|
||||
if (props.currentChart === 'line') {
|
||||
option.series.forEach((sItem) => {
|
||||
if (type === 'more') {
|
||||
if (sItem.name === item.label) {
|
||||
handleChangeLineStyle(sItem, 1)
|
||||
} else {
|
||||
handleChangeLineStyle(sItem, 0.2)
|
||||
}
|
||||
} else if (type === 'single') {
|
||||
handleChangeLineStyle(sItem, 1)
|
||||
} else {
|
||||
if (sItem.name !== item.label) {
|
||||
handleChangeLineStyle(sItem, 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 点击空白处, 清除选项选中状态
|
||||
*/
|
||||
const nullBlockClick = () => {
|
||||
if (valueCardInList.value.length === 0) return;
|
||||
valueCardInList.value.forEach((aItem, aIndex) => {
|
||||
const card = document.getElementById('card_' + aIndex)
|
||||
card.classList.remove('card-active')
|
||||
})
|
||||
clearBasicSetting()
|
||||
//加载echarts
|
||||
props.initCharts()
|
||||
}
|
||||
/**
|
||||
* 封装自定义X/Y分组的拖入事件
|
||||
* @param aType 传入x/y区域数组
|
||||
* @param bType 传入x/y区域数组
|
||||
* @returns {boolean} 返回 true/false
|
||||
*/
|
||||
const handleGroupPut = (aType, bType) => {
|
||||
let flag = false
|
||||
let aLen = aType.length
|
||||
let bLen = bType.length
|
||||
if (aLen === 0 && bLen === 0) {
|
||||
flag = props.startDataType === 'key';
|
||||
} else if (aLen === 0 && bLen !== 0) {
|
||||
flag = bType[0].dataType === 'key';
|
||||
} else if (aLen !== 0 && bLen !== 0) {
|
||||
const dragType = localStorage.getItem('dragType')
|
||||
flag = props.startDataType === aType[0].dataType;
|
||||
if (dragType === 'key') {
|
||||
flag = aType[0].dataType !== 'value';
|
||||
}
|
||||
}
|
||||
return flag
|
||||
}
|
||||
/**
|
||||
* 封装切换坐标轴数据类型为Category
|
||||
* @param item 拖动的项
|
||||
* @param label 坐标轴名称
|
||||
* @param type 切换x/y轴
|
||||
*/
|
||||
const changeTypeToCategory = (item, label, type) => {
|
||||
let axis
|
||||
if (type === 'xAxis') {
|
||||
axis = option.xAxis
|
||||
} else {
|
||||
axis = option.yAxis
|
||||
}
|
||||
axis.type = 'category'
|
||||
axis.name = label
|
||||
axis.data = item.data
|
||||
}
|
||||
|
||||
/**
|
||||
* 封装清除坐标轴数据
|
||||
* @param type 标志清除x/y轴
|
||||
*/
|
||||
const clearAxisData = (type) => {
|
||||
let axis
|
||||
if (type === 'xAxis') {
|
||||
axis = option.xAxis
|
||||
} else {
|
||||
axis = option.yAxis
|
||||
}
|
||||
axis.name = ''
|
||||
axis.data = []
|
||||
}
|
||||
/**
|
||||
* 封装key拖入左侧时的重置事件
|
||||
* @param aList x/yList
|
||||
* @param type x/yAxis
|
||||
* @param item 选项item
|
||||
* @param label 选项名
|
||||
*/
|
||||
const restoreChart = (aList, type,item,label) => {
|
||||
let axis
|
||||
if (type === 'xAxis') {
|
||||
axis = option.xAxis
|
||||
} else {
|
||||
axis = option.yAxis
|
||||
}
|
||||
if (aList[0].dataType === 'value') {
|
||||
aList.map((item) => {
|
||||
props.dragOptions.unshift(item)
|
||||
option.legend.selected[item.label] = false
|
||||
})
|
||||
aList.splice(0, aList.length)
|
||||
option.legend.data.splice(0, option.legend.data.length)
|
||||
option.series.splice(0, option.series.length)
|
||||
axis.name = ''
|
||||
option.xAxis.type = 'category'
|
||||
option.yAxis.type = 'value'
|
||||
} else {
|
||||
changeTypeToCategory(item, label, type)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 拖拽类型为key的选项事件
|
||||
* @param item 选项item
|
||||
* @param label 选项名
|
||||
*/
|
||||
const dragTypeToKey = (item, label) => {
|
||||
if (xList.length !== 0 && yList.length === 0) {
|
||||
restoreChart(xList, 'xAxis',item,label)
|
||||
clearAxisData('yAxis')
|
||||
} else if (xList.length === 0 && yList.length !== 0) {
|
||||
restoreChart(yList, 'yAxis',item,label)
|
||||
clearAxisData('xAxis')
|
||||
} else if (xList.length === 0 && yList.length === 0) {
|
||||
//移入左侧待选列表
|
||||
clearAxisData('xAxis')
|
||||
clearAxisData('yAxis')
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 拖拽类型为value的选项事件
|
||||
* @param label 选项名
|
||||
*/
|
||||
const dragTypeToValue = (label) => {
|
||||
//删除选中选项的图例
|
||||
const legendIndex = option.legend.data.findIndex(object => object === label);
|
||||
option.legend.data.splice(legendIndex, 1)
|
||||
//删除echarts配置项series中符合该拖拽选项的item
|
||||
const objectIndex = option.series.findIndex(object => object.name === label);
|
||||
option.legend.selected[label] = false
|
||||
option.series.splice(objectIndex, 1)
|
||||
if (xList.length === 0) {
|
||||
option.xAxis.name = ''
|
||||
} else if (yList.length === 0) {
|
||||
option.yAxis.name = ''
|
||||
}
|
||||
clearBasicSetting()
|
||||
handleDeleteClassName(xList, yList)
|
||||
}
|
||||
/**
|
||||
* 封装清空基本设置
|
||||
*/
|
||||
const clearBasicSetting=()=>{
|
||||
if(props.currentChart==='line'){
|
||||
lineChartBasicSettingList.value = []
|
||||
handleChangeOpacity('single')
|
||||
}else if(props.currentChart==='bar'){
|
||||
barChartBasicSettingList.value=[]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始拖拽事件
|
||||
* @param event event事件
|
||||
*/
|
||||
const startDrag = (event) => {
|
||||
localStorage.setItem('dragType', event.item._underlying_vm_.dataType)
|
||||
}
|
||||
|
||||
/**
|
||||
* 从X轴/Y轴区域移动选项到左/右侧结束事件
|
||||
* @param event event事件
|
||||
*/
|
||||
const dragChartItem = (event) => {
|
||||
if (event.removed === undefined) return;
|
||||
let item = event.removed.element
|
||||
let label = item.label
|
||||
//拖动key的选项
|
||||
if (item.dataType === "key") {
|
||||
dragTypeToKey(item, label)
|
||||
} else {
|
||||
dragTypeToValue(label)
|
||||
}
|
||||
props.initCharts()
|
||||
localStorage.removeItem('dragType')
|
||||
}
|
||||
|
||||
/**
|
||||
* 选中数据类型为value的点击事件
|
||||
* @param item 点击的选项item
|
||||
* @param index 点击选项的下标
|
||||
*/
|
||||
const handleClickValueCard = (item, index) => {
|
||||
document.addEventListener('click', nullBlockClick)
|
||||
if (item.dataType === 'value' ) {
|
||||
if(props.currentChart === 'line'){
|
||||
changeCardActive(props.dragList, item)
|
||||
lineChartBasicSettingList.value = [item]
|
||||
}else if(props.currentChart === 'bar'){
|
||||
changeCardActive(props.dragList, item)
|
||||
barChartBasicSettingList.value = [item]
|
||||
}
|
||||
}
|
||||
props.initCharts()
|
||||
}
|
||||
|
||||
/**
|
||||
* 封装选中类型为value的数据高亮
|
||||
* @param list x/y区域list
|
||||
* @param item 点击选项的item
|
||||
*/
|
||||
const changeCardActive = (list, item) => {
|
||||
valueCardInList.value = list
|
||||
emit('getCardActiveList',list)
|
||||
if (list.length !== 0 && list[0].dataType === 'value') {
|
||||
handleChangeOpacity('more', item)
|
||||
list.forEach((aItem, aIndex) => {
|
||||
const card = document.getElementById('card_' + aIndex)
|
||||
if (aItem.label === item.label) {
|
||||
card.classList.add('card-active')
|
||||
} else {
|
||||
card.classList.remove('card-active')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 基础设置: 修改echarts数据颜色
|
||||
* @param val 修改的标记大小
|
||||
* @param index 修改的chart项下标
|
||||
*/
|
||||
const changeEchartsColor = (val, index) => {
|
||||
document.addEventListener('click', nullBlockClick)
|
||||
option.series[index].color = val
|
||||
props.initCharts()
|
||||
}
|
||||
/**
|
||||
* 当选择颜色时移除空白点击事件
|
||||
*/
|
||||
const handleActiveChange = () => {
|
||||
document.removeEventListener('click', nullBlockClick)
|
||||
}
|
||||
|
||||
/**
|
||||
* 基础设置: 修改echarts数据颜色
|
||||
* @param val 修改的标记大小
|
||||
* @param index 修改的chart项下标
|
||||
*/
|
||||
const changeShadowColor = (val, index) => {
|
||||
option.series[index].lineStyle.shadowColor = val
|
||||
props.initCharts()
|
||||
}
|
||||
/**
|
||||
* 基础设置:修改柱条背景颜色
|
||||
* @param val 柱条颜色
|
||||
* @param index 修改的chart项下标
|
||||
*/
|
||||
const changeBackgroundColor = (val, index) => {
|
||||
option.series[index].backgroundStyle.color = val
|
||||
props.initCharts()
|
||||
}
|
||||
/**
|
||||
* 基础设置:修改柱条描边颜色
|
||||
* @param val 柱条描边颜色
|
||||
* @param index 修改的chart项下标
|
||||
*/
|
||||
const changeBackgroundBorderColor = (val, index) => {
|
||||
option.series[index].backgroundStyle.borderColor = val
|
||||
props.initCharts()
|
||||
}
|
||||
/**
|
||||
* 封装从右侧区域拖出事件
|
||||
* @param element 获取点击该拖出的选项事件
|
||||
* @param index 点击该拖出选项的索引
|
||||
* @param aList x/y区域的值
|
||||
* @param bList x/y区域的值
|
||||
* @param aAxis echarts配置项的x/y轴
|
||||
* @param bAxis echarts配置项的x/y轴
|
||||
*/
|
||||
const handleCancel = (element, index, aList, bList, aAxis, bAxis) => {
|
||||
aList.splice(index, 1)
|
||||
props.dragOptions.push(element)
|
||||
if (element.dataType === "key") {
|
||||
aAxis.name = ''
|
||||
aAxis.data = []
|
||||
bAxis.name=''
|
||||
bList.map((item) => {
|
||||
props.dragOptions.unshift(item)
|
||||
option.legend.selected[item.label] = false
|
||||
})
|
||||
bList.splice(0, bList.length)
|
||||
option.legend.data.splice(0, option.legend.data.length)
|
||||
option.series.splice(0, option.series.length)
|
||||
// reload
|
||||
props.initCharts()
|
||||
} else {
|
||||
if (bList.length !== 0 && aList.length === 0) {
|
||||
if (bList[0].dataType === 'key') {
|
||||
aAxis.name = ''
|
||||
} else {
|
||||
bAxis.name = ''
|
||||
}
|
||||
}
|
||||
|
||||
option.legend.data.splice(index, 1)
|
||||
const objectIndex = option.series.findIndex(object => object.name === element.label);
|
||||
option.legend.selected[element.label] = false
|
||||
option.series.splice(objectIndex, 1)
|
||||
props.initCharts()
|
||||
}
|
||||
if(props.currentChart==='line'){
|
||||
handleChangeOpacity('not', element)
|
||||
if (lineChartBasicSettingList.value === undefined) return;
|
||||
lineChartBasicSettingList.value.splice(0, 1)
|
||||
}else if(props.currentChart==='bar'){
|
||||
if (barChartBasicSettingList.value === undefined) return;
|
||||
barChartBasicSettingList.value.splice(0, 1)
|
||||
}
|
||||
// const basicIndex = lineChartBasicSettingList.value.findIndex(object => object.label === element.label)
|
||||
// if (basicIndex !== -1) {
|
||||
// lineChartBasicSettingList.value.splice(basicIndex, 1)
|
||||
// }
|
||||
handleDeleteClassName(aList, bList)
|
||||
props.initCharts()
|
||||
}
|
||||
/**
|
||||
* 拖拽选项后,清除选中选项阴影
|
||||
* @param aList x/y list
|
||||
* @param bList x/y list
|
||||
*/
|
||||
const handleDeleteClassName = (aList, bList) => {
|
||||
let axis = []
|
||||
if (aList.length !== 0 && aList[0].dataType === 'value') {
|
||||
axis = aList
|
||||
} else if (bList.length !== 0 && bList[0].dataType === 'value') {
|
||||
axis = bList
|
||||
}
|
||||
axis.forEach((aItem, aIndex) => {
|
||||
const card = document.getElementById('card_' + aIndex)
|
||||
card.classList.remove('card-active')
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 从右侧x/y轴区域取消选项
|
||||
* @param element 该取消的项
|
||||
* @param index 该取消项的下标
|
||||
*/
|
||||
const handleCancelAxis = (element, index) => {
|
||||
if (props.boxName === 'X轴') {
|
||||
handleCancel(element, index, xList, yList, option.xAxis, option.yAxis)
|
||||
} else {
|
||||
handleCancel(element, index, yList, xList, option.yAxis, option.xAxis)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<div class="drag-block">
|
||||
<draggable
|
||||
class="list-group"
|
||||
:list="dragOptions"
|
||||
itemKey="id"
|
||||
group="people"
|
||||
@start="startDrag"
|
||||
@change="changeChartItem"
|
||||
>
|
||||
<template #item="{element}">
|
||||
<el-card shadow="hover" class="cards">
|
||||
<el-row justify="space-between">
|
||||
<span>{{ element.label }}</span>
|
||||
<span>{{ element.dataType }}</span>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import draggable from 'vuedraggable'
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const emit = defineEmits(["editValueFlag", "editStartDataType"])
|
||||
const props = defineProps({
|
||||
//可供拖动的选项列表
|
||||
dragOptions: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//echarts的配置属性
|
||||
chartOption: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
//初始化加载echarts函数
|
||||
initCharts: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
//用于X轴区域存放拖动的选项
|
||||
xAxisList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//用于Y轴区域存放拖动的选项
|
||||
yAxisList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//当前echarts图形
|
||||
currentChart: {
|
||||
type: String,
|
||||
default: 'line'
|
||||
},
|
||||
//雷达图指示器
|
||||
radarIndicator: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
//简化代码
|
||||
let xList = reactive(props.xAxisList)
|
||||
let yList = reactive(props.yAxisList)
|
||||
let option = reactive(props.chartOption)
|
||||
let chart = reactive(props.currentChart)
|
||||
//获取正在拖动选项的数据类型
|
||||
const startDragType = ref()
|
||||
//标记正在拖动选项的数据类型是否value
|
||||
const flag = ref(false)
|
||||
//将改变的数据传到父组件
|
||||
watch(() => flag.value, (newVal) => {
|
||||
emit("editValueFlag", newVal)
|
||||
})
|
||||
watch(() => props.currentChart, (newVal) => {
|
||||
chart = newVal
|
||||
})
|
||||
watch(() => startDragType.value, (newVal) => {
|
||||
emit("editStartDataType", newVal)
|
||||
})
|
||||
|
||||
/**
|
||||
* 设置修改后的echarts属性
|
||||
* @param item 拖动的项
|
||||
* @param label 拖拽选项的名称
|
||||
* @returns Object
|
||||
*/
|
||||
const settingChartItem = (item, label) => {
|
||||
if (chart === 'line') {
|
||||
return {
|
||||
id: item.id,//组件 ID
|
||||
name: label,
|
||||
// type: echartsValue.value ? echartsValue.value : item.type,
|
||||
type: chart,
|
||||
data: item.data,
|
||||
smooth: true,
|
||||
color: item.color,
|
||||
symbol: item.symbol,
|
||||
symbolSize: item.symbolSize,
|
||||
showSymbol: item.showSymbol,
|
||||
lineStyle: item.lineStyle,
|
||||
// emphasis: item.emphasis
|
||||
}
|
||||
} else if (chart === 'bar') {
|
||||
return {
|
||||
id: item.id,
|
||||
name: label,
|
||||
type: chart,
|
||||
data: item.data,
|
||||
color: item.color,
|
||||
showBackground: item.showBackground,
|
||||
backgroundStyle: item.backgroundStyle
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 封拖拽数据类型为value
|
||||
* @param item 拖动的项
|
||||
* @param label 拖拽选项的名称
|
||||
* @param selectedObj 图例选中状态表
|
||||
*/
|
||||
const dragValue = (item, label, selectedObj) => {
|
||||
dragChart(item, label, 2)
|
||||
option.legend.data.push(label)
|
||||
let chartItem = settingChartItem(item, label)
|
||||
option.series.push(chartItem)
|
||||
for (const propertyName in selectedObj) {
|
||||
if (propertyName === label) {
|
||||
selectedObj[propertyName] = true
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 封装切换坐标轴数据类型为Category
|
||||
* @param item 拖动的项
|
||||
* @param label 坐标轴名称
|
||||
* @param type 切换x/y轴
|
||||
*/
|
||||
const changeTypeToCategory = (item, label, type) => {
|
||||
let axis
|
||||
if (type === 'xAxis') {
|
||||
axis = option.xAxis
|
||||
} else {
|
||||
axis = option.yAxis
|
||||
}
|
||||
axis.type = 'category'
|
||||
axis.name = item.unit
|
||||
axis.data = item.data
|
||||
}
|
||||
/**
|
||||
* 封装切换坐标轴数据类型为Value
|
||||
* @param item 拖动的项item
|
||||
* @param type 切换x/y轴
|
||||
*/
|
||||
const changeTypeToValue = (item, type) => {
|
||||
let axis
|
||||
if (type === 'xAxis') {
|
||||
axis = option.xAxis
|
||||
} else {
|
||||
axis = option.yAxis
|
||||
}
|
||||
axis.type = 'value'
|
||||
axis.name = item.unit
|
||||
}
|
||||
/**
|
||||
* 封装拖拽选项修改echarts属性
|
||||
* @param item 拖动的项
|
||||
* @param label 拖拽选项的名称
|
||||
* @param index 区分拖的选项数据:1是key,2是value
|
||||
*/
|
||||
const dragChart = (item, label, index) => {
|
||||
if (xList.length !== 0 && yList.length === 0) {
|
||||
// console.log('x轴有值')
|
||||
if (index === 1) {
|
||||
changeTypeToCategory(item, label, 'xAxis')
|
||||
} else {
|
||||
changeTypeToValue(item, 'xAxis')
|
||||
option.yAxis.type = 'category'
|
||||
}
|
||||
} else if (xList.length !== 0 && yList.length !== 0) {
|
||||
// console.log('xy有值')
|
||||
if (xList[0].dataType === 'value') {
|
||||
if (index === 1) {
|
||||
changeTypeToCategory(item, label)
|
||||
}
|
||||
changeTypeToValue(item, 'xAxis')
|
||||
} else if (yList[0].dataType === 'value') {
|
||||
if (index === 1) {
|
||||
changeTypeToCategory(item, label, 'xAxis')
|
||||
}
|
||||
changeTypeToValue(item)
|
||||
}
|
||||
} else if (xList.length === 0 && yList.length !== 0) {
|
||||
// console.log('y轴有值')
|
||||
if (index === 1) {
|
||||
changeTypeToCategory(item, label, 'yAxis')
|
||||
} else {
|
||||
option.xAxis.type = 'category'
|
||||
changeTypeToValue(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 从左侧区域移动选项到右侧
|
||||
* @param event 拖拽成功event事件
|
||||
*/
|
||||
const changeChartItem = (event) => {
|
||||
if (event.removed === undefined) return;
|
||||
let item = event.removed.element
|
||||
if (chart === 'line'||chart === 'bar') {
|
||||
let label = item.label
|
||||
let selectedObj = option.legend.selected
|
||||
if (item.dataType === "key") {
|
||||
dragChart(item, label, 1)
|
||||
} else {
|
||||
if (flag.value) return;
|
||||
dragValue(item, label, selectedObj)
|
||||
}
|
||||
} else if (chart === 'pie') {
|
||||
let arr = []
|
||||
xList.forEach(item => {
|
||||
let obj = {
|
||||
name: item.label,
|
||||
value: item.value
|
||||
}
|
||||
arr.push(obj)
|
||||
})
|
||||
for (const propertyName in option.legend.selected) {
|
||||
if (propertyName === item.label) {
|
||||
option.legend.selected[propertyName] = true
|
||||
}
|
||||
}
|
||||
if (item.dataType !== "key") {
|
||||
option.legend.data.push(item.label)
|
||||
}
|
||||
option.series = [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: arr
|
||||
}
|
||||
]
|
||||
} else if (chart === 'radar') {
|
||||
let arr = []
|
||||
xList.forEach(item => {
|
||||
let obj = {
|
||||
name: item.label,
|
||||
value: item.data
|
||||
}
|
||||
arr.push(obj)
|
||||
})
|
||||
console.log('arr',arr)
|
||||
for (const propertyName in option.legend.selected) {
|
||||
if (propertyName === item.label) {
|
||||
option.legend.selected[propertyName] = true
|
||||
}
|
||||
}
|
||||
if (item.dataType !== "key") {
|
||||
option.legend.data.push(item.label)
|
||||
}
|
||||
option.radar={
|
||||
indicator:props.radarIndicator
|
||||
}
|
||||
option.series = [
|
||||
{
|
||||
type: 'radar',
|
||||
data: arr
|
||||
}
|
||||
]
|
||||
}
|
||||
props.initCharts()
|
||||
}
|
||||
|
||||
/**
|
||||
* 左侧区域开始拖拽事件
|
||||
* @param event 开始拖拽的event事件
|
||||
*/
|
||||
const startDrag = (event) => {
|
||||
startDragType.value = event.item._underlying_vm_.dataType
|
||||
if (xList.length === 0 && yList.length === 0) {
|
||||
if (chart === 'line' || chart === 'bar') {
|
||||
if (startDragType.value === "value") {
|
||||
flag.value = true
|
||||
ElMessage({
|
||||
message: '请先拖动数据类型为key的选项到x轴/y轴.',
|
||||
type: 'warning',
|
||||
})
|
||||
} else {
|
||||
flag.value = false
|
||||
}
|
||||
} else if (chart === 'pie') {
|
||||
console.log('拖动饼图')
|
||||
flag.value = false
|
||||
}else if (chart === 'radar') {
|
||||
console.log('拖动雷达')
|
||||
flag.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="6">
|
||||
<el-col :span="6">
|
||||
<el-select v-model="echartsValue" filterable placeholder="请选择图形状" style="width: 100%" size="large"
|
||||
@change="handleChangeEcharts">
|
||||
<el-option v-for="chartItem in chartType"
|
||||
:key="chartItem.value"
|
||||
:label="chartItem.label"
|
||||
:value="chartItem.value"/>
|
||||
</el-select>
|
||||
<!--左侧选项区域-->
|
||||
<charts-options @editValueFlag="editValueFlag" @editStartDataType="editStartDataType"
|
||||
:drag-options="ChartsItem" :chart-option="option" :init-charts="initChart"
|
||||
:x-axis-list="xValueAxis" :y-axis-list="yValueAxis"
|
||||
:current-chart="echartsValue" :radar-indicator="radarIndicator"/>
|
||||
</el-col>
|
||||
<!--X轴区域-->
|
||||
<el-col :span="9" v-if="echartsValue==='bar'||echartsValue==='line'">
|
||||
<axis-box :box-name="'X轴'" :drag-list="xValueAxis" :drag-options="ChartsItem" :x-axis-list="xValueAxis"
|
||||
:y-axis-list="yValueAxis" :flag="valueFlag"
|
||||
:start-data-type="startDataType" :chart-option="option" :init-charts="initChart"
|
||||
@getLineChartBasicSettingList="getLineChartBasicSettingList"
|
||||
@getBarChartBasicSettingList="getBarChartBasicSettingList" :current-chart="echartsValue"/>
|
||||
</el-col>
|
||||
<!--Y轴区域-->
|
||||
<el-col :span="9" v-if="echartsValue==='bar'||echartsValue==='line'">
|
||||
<axis-box :box-name="'Y轴'" :drag-list="yValueAxis" :drag-options="ChartsItem" :x-axis-list="xValueAxis"
|
||||
:y-axis-list="yValueAxis" :flag="valueFlag"
|
||||
:start-data-type="startDataType" :chart-option="option" :init-charts="initChart"
|
||||
@getLineChartBasicSettingList="getLineChartBasicSettingList"
|
||||
@getBarChartBasicSettingList="getBarChartBasicSettingList" :current-chart="echartsValue"/>
|
||||
</el-col>
|
||||
<el-col :span="9" v-if="echartsValue==='pie'">
|
||||
<pie-box :drag-list="xValueAxis" :init-charts="initChart" :chart-option="option"/>
|
||||
</el-col>
|
||||
<el-col :span="9" v-if="echartsValue==='radar'">
|
||||
<radar-box :drag-list="xValueAxis" :init-charts="initChart" :chart-option="option"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-button @click.stop="saveData">保存</el-button>
|
||||
<el-button v-if="echartsValue==='line'" @click.stop="openAdvancedSettings">高级设置</el-button>
|
||||
<el-row :gutter="6">
|
||||
<el-col :span="16">
|
||||
<div id="container" ref="chart" @click.stop></div>
|
||||
</el-col>
|
||||
<!--基础设置-->
|
||||
<el-col :span="8">
|
||||
<!-- 折线图基础设置-->
|
||||
<line-chart-basic-setting v-if="echartsValue==='line'" :basic-list="lineChartBasicSettingList"
|
||||
:init-charts="initChart"
|
||||
:chart-option="option"/>
|
||||
<!-- 柱状图基础设置-->
|
||||
<bar-chart-basic-setting v-if="echartsValue==='bar'" :basic-list="barChartBasicSettingList"
|
||||
:init-charts="initChart"
|
||||
:chart-option="option"/>
|
||||
<!-- 饼图基础设置-->
|
||||
<!-- <pie-chart-basic-setting v-if="echartsValue==='pie'"/>-->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--高级设置-->
|
||||
<!-- 折线图高级设置-->
|
||||
<line-chart-advanced-settings v-if="echartsValue==='line'" ref="advancedSettings" :init-charts="initChart"
|
||||
:chart-option="option"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import draggable from 'vuedraggable'
|
||||
import ChartsOptions from "./ChartsOptions.vue";
|
||||
import AxisBox from "./AxisBox.vue";
|
||||
import LineChartBasicSetting from "./lineChart/BasicSetting.vue";
|
||||
import LineChartAdvancedSettings from "./lineChart/AdvancedSettings.vue";
|
||||
import BarChartBasicSetting from "./barChart/BasicSetting.vue";
|
||||
// import PieChartBasicSetting from "./pieChart/BasicSetting.vue";
|
||||
import PieBox from "./pieChart/PieBox.vue";
|
||||
import RadarBox from "./radarChart/RadarBox.vue";
|
||||
// import BarChartAdvancedSettings from "./barChart/AdvancedSettings.vue";
|
||||
|
||||
const emit = defineEmits(["getFinalInfo"])
|
||||
const props = defineProps({
|
||||
info: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
lineData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
barData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
pieData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
radarData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
radarIndicator: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
//图形: 1:折线图 2.柱状图 3.饼图
|
||||
const chartType = reactive([
|
||||
{
|
||||
value: 'line',
|
||||
label: '折线图',
|
||||
},
|
||||
{
|
||||
value: 'bar',
|
||||
label: '柱状图',
|
||||
},
|
||||
{
|
||||
value: 'pie',
|
||||
label: '饼图',
|
||||
},
|
||||
{
|
||||
value: 'radar',
|
||||
label: '雷达图',
|
||||
}
|
||||
])
|
||||
//基础设置列表
|
||||
const lineChartBasicSettingList = ref([])
|
||||
const barChartBasicSettingList = ref([])
|
||||
const advancedSettings = ref()
|
||||
//获取父组件传来的初始数据
|
||||
const initInfo = reactive(props.info)
|
||||
//从左侧获取拖动的选项的数据类型
|
||||
const startDataType = ref()
|
||||
//标记从左侧拖动选项数据类型是否是value
|
||||
const valueFlag = ref(false)
|
||||
//简化代码
|
||||
let xValueAxis = reactive(initInfo.xValueAxis)
|
||||
let yValueAxis = reactive(initInfo.yValueAxis)
|
||||
const line_data = reactive(props.lineData)
|
||||
const bar_data = reactive(props.barData)
|
||||
const pie_data = reactive(props.pieData)
|
||||
const radar_data = reactive(props.radarData)
|
||||
let option = reactive(initInfo.echartsOptions)
|
||||
|
||||
//页面左上角select选择框绑定数据
|
||||
const echartsValue = ref('line')
|
||||
//可供拖动的选项列表
|
||||
const ChartsItem = ref([])
|
||||
//获取到container容器实例
|
||||
const chart = ref(null);
|
||||
//定义echarts实例
|
||||
let myEcharts = reactive({});
|
||||
onMounted(() => {
|
||||
if (ChartsItem.value.length === 0) {
|
||||
ChartsItem.value = line_data
|
||||
}
|
||||
//初始化echarts(不显示图)
|
||||
let selectLegend = {}
|
||||
ChartsItem.value.forEach(item => {
|
||||
if (item.dataType !== 'key') {
|
||||
selectLegend[item.label] = false
|
||||
}
|
||||
})
|
||||
option.legend.selected = selectLegend
|
||||
if (echartsValue.value === 'pie'||echartsValue.value === 'radar') {
|
||||
isShowAxisLine(false)
|
||||
} else {
|
||||
isShowAxisLine(true)
|
||||
}
|
||||
//加载echarts
|
||||
initChart();
|
||||
})
|
||||
|
||||
/**
|
||||
* 修改valueFlag
|
||||
* @param val 子组件传的动态值
|
||||
*/
|
||||
const editValueFlag = (val) => {
|
||||
valueFlag.value = val
|
||||
}
|
||||
/**
|
||||
* 修改startDataType
|
||||
* @param str 子组件传的动态值
|
||||
*/
|
||||
const editStartDataType = (str) => {
|
||||
startDataType.value = str
|
||||
}
|
||||
/**
|
||||
* 用于其他组件获取基础设置列表
|
||||
* @param str 子组件传的动态值
|
||||
*/
|
||||
const getLineChartBasicSettingList = (str) => {
|
||||
lineChartBasicSettingList.value = str
|
||||
}
|
||||
/**
|
||||
* 修改option
|
||||
* @param str 子组件传的动态值
|
||||
*/
|
||||
const getBarChartBasicSettingList = (str) => {
|
||||
barChartBasicSettingList.value = str
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 切换echarts图类型事件
|
||||
* @param e event事件
|
||||
*/
|
||||
const handleChangeEcharts = (e) => {
|
||||
if (xValueAxis.length !== 0 || yValueAxis.length !== 0) {
|
||||
|
||||
xValueAxis.map((item) => {
|
||||
ChartsItem.value.unshift(item)
|
||||
option.legend.selected[item.label] = false
|
||||
})
|
||||
xValueAxis.splice(0, xValueAxis.length)
|
||||
yValueAxis.map((item) => {
|
||||
ChartsItem.value.unshift(item)
|
||||
option.legend.selected[item.label] = false
|
||||
})
|
||||
yValueAxis.splice(0, yValueAxis.length)
|
||||
option.legend.data.splice(0, option.legend.data.length)
|
||||
option.series.splice(0, option.series.length)
|
||||
option.xAxis.name = ''
|
||||
option.xAxis.data = []
|
||||
option.xAxis.type = 'category'
|
||||
option.yAxis.name = ''
|
||||
option.yAxis.data = []
|
||||
option.yAxis.type = 'value'
|
||||
initChart()
|
||||
}
|
||||
echartsValue.value = e
|
||||
if (e === 'line') {
|
||||
ChartsItem.value = line_data
|
||||
isShowAxisLine(true)
|
||||
option.radar={}
|
||||
} else if (e === 'bar') {
|
||||
ChartsItem.value = bar_data
|
||||
isShowAxisLine(true)
|
||||
option.radar={}
|
||||
} else if (e === 'pie') {
|
||||
ChartsItem.value = pie_data
|
||||
isShowAxisLine(false)
|
||||
option.radar={}
|
||||
}else if (e === 'radar') {
|
||||
ChartsItem.value = radar_data
|
||||
isShowAxisLine(false)
|
||||
option.radar.indicator = props.radarIndicator
|
||||
}
|
||||
let selectLegend = {}
|
||||
ChartsItem.value.forEach(item => {
|
||||
if (item.dataType !== 'key') {
|
||||
selectLegend[item.label] = false
|
||||
}
|
||||
})
|
||||
option.legend.selected = selectLegend
|
||||
initChart()
|
||||
}
|
||||
/**
|
||||
* 是否显示x/y轴线
|
||||
* @param type
|
||||
*/
|
||||
const isShowAxisLine = (type) => {
|
||||
option.xAxis.axisLine.show = type
|
||||
option.yAxis.axisLine.show = type
|
||||
if (type === false) {
|
||||
option.tooltip.trigger = 'item'
|
||||
} else {
|
||||
option.tooltip.trigger = 'axis'
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 初始化echarts实例方法
|
||||
*/
|
||||
const initChart = () => {
|
||||
console.log('initChartoption', option)
|
||||
//3.初始化container容器
|
||||
myEcharts = echarts.init(chart.value);
|
||||
//5.传入数据
|
||||
myEcharts.setOption(option,true);
|
||||
//图表大小自适应窗口大小变化
|
||||
window.onresize = () => {
|
||||
myEcharts.resize();
|
||||
}
|
||||
//点击事件
|
||||
// myEcharts.on('click', function (params) {
|
||||
// console.log('dddd点击事件', params);
|
||||
// });
|
||||
// myEcharts.restore();
|
||||
localStorage.removeItem('dragType')
|
||||
}
|
||||
/**
|
||||
* 保存数据
|
||||
*/
|
||||
const saveData = () => {
|
||||
console.log('最终initInfo', initInfo)
|
||||
emit("getFinalInfo", initInfo)
|
||||
}
|
||||
/**
|
||||
* 打开高级设置弹框
|
||||
*/
|
||||
const openAdvancedSettings = () => {
|
||||
advancedSettings.value.showDrawer()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<el-drawer v-model="drawerVisible" direction="rtl">
|
||||
<template #header>
|
||||
<h4>高级设置</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-form :model="settingsForm" class="advanced-setting">
|
||||
<el-form-item label="是否点击图例改变图显示状态">
|
||||
<el-switch active-text="是" inactive-text="否" v-model="settingsForm.isClickLegendToShow"
|
||||
@change="changeIsClickLegend"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否显示提示框组件">
|
||||
<el-switch active-text="是" inactive-text="否" v-model="settingsForm.isShowTooltip"
|
||||
@change="changeIsShowTooltip"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="cancelSettings">取消</el-button>
|
||||
<el-button type="primary" @click="confirmSettings">确认</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
//初始化加载echarts函数
|
||||
initCharts: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
//echarts的配置属性
|
||||
chartOption: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
})
|
||||
let option = reactive(props.chartOption)
|
||||
//高级设置抽屉是否展开
|
||||
const drawerVisible = ref(false)
|
||||
//高级设置属性
|
||||
const settingsForm = reactive({
|
||||
isClickLegendToShow: option.legend.selectedMode,//打开点击图例改变图显示状态
|
||||
isShowTooltip: option.tooltip.show//是否显示提示框组件
|
||||
})
|
||||
/**
|
||||
* 打开高级设置弹窗
|
||||
*/
|
||||
const showDrawer = () => {
|
||||
drawerVisible.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 高级设置: 取消按钮
|
||||
*/
|
||||
const cancelSettings = () => {
|
||||
drawerVisible.value = false
|
||||
}
|
||||
/**
|
||||
* 高级设置: 确认按钮
|
||||
*/
|
||||
const confirmSettings = () => {
|
||||
drawerVisible.value = false
|
||||
props.initCharts()
|
||||
}
|
||||
|
||||
/**
|
||||
* 高级设置:打开点击图例改变图显示状态
|
||||
* @param val
|
||||
*/
|
||||
const changeIsClickLegend = (val) => {
|
||||
option.legend.selectedMode = val
|
||||
}
|
||||
|
||||
/**
|
||||
* 高级设置:是否显示提示框组件
|
||||
* @param val
|
||||
*/
|
||||
const changeIsShowTooltip = (val) => {
|
||||
option.tooltip.show = val
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
showDrawer
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<el-scrollbar height="450px">
|
||||
<div class="basic-setup" @click.stop>
|
||||
柱状图基本设置
|
||||
</div>
|
||||
<div v-for="(settingItem) in basicList" class="setting" @click.stop>
|
||||
<div class="setting-title">{{ settingItem.label }}</div>
|
||||
<div class="setting-item">
|
||||
<span>显示柱条背景: </span>
|
||||
<el-switch active-text="是" inactive-text="否" v-model="settingItem.showBackground"
|
||||
@change="changeIsShowBackground($event,settingItem)"/>
|
||||
|
||||
</div>
|
||||
<div v-if="settingItem.showBackground!==false">
|
||||
<div class="setting-item">
|
||||
<span>柱条描边宽度: </span>
|
||||
<el-input-number v-model="settingItem.backgroundStyle.borderWidth" :min="0"
|
||||
@change="changeBorderWidth($event,settingItem)"/>
|
||||
</div>
|
||||
|
||||
<!-- <div class="setting-item" v-if="settingItem.backgroundStyle.borderWidth!==0">-->
|
||||
<!-- <span>柱条描边颜色: </span>-->
|
||||
<!-- <el-color-picker v-model="settingItem.backgroundStyle.borderColor"-->
|
||||
<!-- :color="settingItem.backgroundStyle.borderColor"-->
|
||||
<!-- @change="changeBorderColor($event,settingItem)"/>-->
|
||||
<!-- </div>-->
|
||||
<div class="setting-item" v-if="settingItem.backgroundStyle.borderWidth!==0">
|
||||
<span>柱条描边类型: </span>
|
||||
<el-select v-model="settingItem.backgroundStyle.borderType" @change="switchBorderType($event,settingItem)">
|
||||
<el-option
|
||||
v-for="symbolItem in borderTypeList"
|
||||
:key="symbolItem.value"
|
||||
:label="symbolItem.label"
|
||||
:value="symbolItem.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
//基础设置列表
|
||||
basicList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//初始化加载echarts函数
|
||||
initCharts: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
//echarts的配置属性
|
||||
chartOption: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
})
|
||||
let option = reactive(props.chartOption)
|
||||
//图形标记列表
|
||||
const borderTypeList = ref([
|
||||
{value: 'solid', label: '实线'},
|
||||
{value: 'dashed', label: '虚线'},
|
||||
{value: 'dotted', label: '点线'}
|
||||
])
|
||||
/**
|
||||
* 封装基本设置修改echarts属性事件
|
||||
* @param item 修改的项
|
||||
* @param type option.series中的属性名
|
||||
* @param val 获取修改的值
|
||||
*/
|
||||
const changeSingleParams = (item, type, val) => {
|
||||
option.series.forEach((sItem, sIndex) => {
|
||||
if (sItem.name === item.label) {
|
||||
getSeriesParams(type, sIndex, val)
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 根据changeSingleParams方法传的动态type,封装数据修改事件
|
||||
* @param type option.series中的属性名
|
||||
* @param index 修改某项属性的下标
|
||||
* @param val 获取修改的值
|
||||
*/
|
||||
const getSeriesParams = (type, index, val) => {
|
||||
let seriesItem = option.series[index]
|
||||
switch (type) {
|
||||
case 'showBackground':
|
||||
return seriesItem.showBackground = val
|
||||
case 'color':
|
||||
return seriesItem.backgroundStyle.color = val
|
||||
case 'borderWidth':
|
||||
return seriesItem.backgroundStyle.borderWidth = val
|
||||
case 'borderColor':
|
||||
return seriesItem.backgroundStyle.borderColor = val
|
||||
case 'borderType':
|
||||
return seriesItem.backgroundStyle.borderType = val
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 基础设置:修改是否显示柱条背景
|
||||
* @param val 是否显示
|
||||
* @param item 修改的chart项
|
||||
*/
|
||||
const changeIsShowBackground = (val, item) => {
|
||||
changeSingleParams(item, 'showBackground', val)
|
||||
props.initCharts()
|
||||
}
|
||||
|
||||
/**
|
||||
* 基础设置:修改柱条描边宽度
|
||||
* @param val 宽度
|
||||
* @param item 修改的chart项
|
||||
*/
|
||||
const changeBorderWidth = (val, item) => {
|
||||
changeSingleParams(item, 'borderWidth', val)
|
||||
props.initCharts()
|
||||
}
|
||||
/**
|
||||
* 基础设置:修改柱条的描边颜色
|
||||
* @param val 颜色
|
||||
* @param item 修改的chart项
|
||||
*/
|
||||
const changeBorderColor = (val, item) => {
|
||||
changeSingleParams(item, 'borderColor', val)
|
||||
props.initCharts()
|
||||
}
|
||||
/**
|
||||
* 基础设置:修改柱条的描边类型
|
||||
* @param val 类型
|
||||
* @param item 修改的chart项
|
||||
*/
|
||||
const switchBorderType = (val, item) => {
|
||||
changeSingleParams(item, 'borderType', val)
|
||||
props.initCharts()
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<el-drawer v-model="drawerVisible" direction="rtl">
|
||||
<template #header>
|
||||
<h4>高级设置</h4>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-form :model="settingsForm" class="advanced-setting">
|
||||
<el-form-item label="是否点击图例改变图显示状态">
|
||||
<el-switch active-text="是" inactive-text="否" v-model="settingsForm.isClickLegendToShow"
|
||||
@change="changeIsClickLegend"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否显示提示框组件">
|
||||
<el-switch active-text="是" inactive-text="否" v-model="settingsForm.isShowTooltip"
|
||||
@change="changeIsShowTooltip"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="cancelSettings">取消</el-button>
|
||||
<el-button type="primary" @click="confirmSettings">确认</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
//初始化加载echarts函数
|
||||
initCharts: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
//echarts的配置属性
|
||||
chartOption: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
})
|
||||
let option = reactive(props.chartOption)
|
||||
//高级设置抽屉是否展开
|
||||
const drawerVisible = ref(false)
|
||||
//高级设置属性
|
||||
const settingsForm = reactive({
|
||||
isClickLegendToShow: option.legend.selectedMode,//打开点击图例改变图显示状态
|
||||
isShowTooltip: option.tooltip.show//是否显示提示框组件
|
||||
})
|
||||
/**
|
||||
* 打开高级设置弹窗
|
||||
*/
|
||||
const showDrawer = () => {
|
||||
drawerVisible.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 高级设置: 取消按钮
|
||||
*/
|
||||
const cancelSettings = () => {
|
||||
drawerVisible.value = false
|
||||
}
|
||||
/**
|
||||
* 高级设置: 确认按钮
|
||||
*/
|
||||
const confirmSettings = () => {
|
||||
drawerVisible.value = false
|
||||
props.initCharts()
|
||||
}
|
||||
|
||||
/**
|
||||
* 高级设置:打开点击图例改变图显示状态
|
||||
* @param val
|
||||
*/
|
||||
const changeIsClickLegend = (val) => {
|
||||
option.legend.selectedMode = val
|
||||
}
|
||||
|
||||
/**
|
||||
* 高级设置:是否显示提示框组件
|
||||
* @param val
|
||||
*/
|
||||
const changeIsShowTooltip = (val) => {
|
||||
option.tooltip.show = val
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
showDrawer
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<el-scrollbar height="450px">
|
||||
<div class="basic-setup" @click.stop>
|
||||
折线图基本设置
|
||||
</div>
|
||||
<div v-for="(settingItem) in basicList" class="setting" @click.stop>
|
||||
<div class="setting-title">{{ settingItem.label }}</div>
|
||||
<!-- <div class="setting-item">-->
|
||||
<!-- <span>图形: </span>-->
|
||||
<!-- <el-select v-model="settingItem.type" @change="switchChart($event,settingItem)">-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="chartItem in [{value: 'line',label: '折线图'},{value: 'bar',label: '柱状图'}]"-->
|
||||
<!-- :key="chartItem.value"-->
|
||||
<!-- :label="chartItem.label"-->
|
||||
<!-- :value="chartItem.value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </div>-->
|
||||
<div class="setting-item">
|
||||
<span>显示标记: </span>
|
||||
<el-switch active-text="是" inactive-text="否" v-model="settingItem.showSymbol"
|
||||
@change="changeIsShowSymbol($event,settingItem)"/>
|
||||
|
||||
</div>
|
||||
<div class="setting-item" v-if="settingItem.showSymbol===true">
|
||||
<span>标记: </span>
|
||||
<el-select v-model="settingItem.symbol" @change="switchSymbol($event,settingItem)">
|
||||
<el-option
|
||||
v-for="symbolItem in symbolList"
|
||||
:key="symbolItem.value"
|
||||
:label="symbolItem.label"
|
||||
:value="symbolItem.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="setting-item" v-if="settingItem.showSymbol===true">
|
||||
<span>标记大小: </span>
|
||||
<el-input-number v-model="settingItem.symbolSize" :min="1" @change="changeSymbolSize($event,settingItem)"/>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<span>阴影模糊大小: </span>
|
||||
<el-input-number v-model="settingItem.lineStyle.shadowBlur" :min="0" @change="changeShadowBlur($event,settingItem)"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
//基础设置列表
|
||||
basicList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//初始化加载echarts函数
|
||||
initCharts: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
//echarts的配置属性
|
||||
chartOption: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
})
|
||||
//图形标记列表
|
||||
const symbolList = ref([
|
||||
{value: 'none', label: '不显示标记'},
|
||||
{value: 'circle', label: '圆形'},
|
||||
{value: 'rect', label: '矩形'},
|
||||
{value: 'triangle', label: '三角形'},
|
||||
{value: 'diamond', label: '钻石形'},
|
||||
{value: 'roundRect', label: '圆角矩形'},
|
||||
{value: 'pin', label: '圆钉形'},
|
||||
{value: 'arrow', label: '箭头形'},
|
||||
])
|
||||
let option = reactive(props.chartOption)
|
||||
|
||||
/**
|
||||
* 封装基本设置修改echarts属性事件
|
||||
* @param item 修改的项
|
||||
* @param type option.series中的属性名
|
||||
* @param val 获取修改的值
|
||||
*/
|
||||
const changeSingleParams = (item, type, val) => {
|
||||
option.series.forEach((sItem, sIndex) => {
|
||||
if (sItem.name === item.label) {
|
||||
getSeriesParams(type, sIndex, val)
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 根据changeSingleParams方法传的动态type,封装数据修改事件
|
||||
* @param type option.series中的属性名
|
||||
* @param index 修改某项属性的下标
|
||||
* @param val 获取修改的值
|
||||
*/
|
||||
const getSeriesParams = (type, index, val) => {
|
||||
let seriesItem = option.series[index]
|
||||
switch (type) {
|
||||
case 'type':
|
||||
return seriesItem.type = val
|
||||
case 'showSymbol':
|
||||
return seriesItem.showSymbol = val
|
||||
case 'symbol':
|
||||
return seriesItem.symbol = val
|
||||
case 'symbolSize':
|
||||
return seriesItem.symbolSize = val
|
||||
case 'shadowBlur':
|
||||
return seriesItem.lineStyle.shadowBlur = val
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 基础设置:是否显示标记
|
||||
* @param val 修改的标记大小
|
||||
* @param item 修改的chart项
|
||||
*/
|
||||
const changeIsShowSymbol = (val, item) => {
|
||||
changeSingleParams(item, 'showSymbol', val)
|
||||
props.initCharts()
|
||||
}
|
||||
|
||||
/**
|
||||
* 基础设置:切换chart的形状
|
||||
* @param val 修改的标记大小
|
||||
* @param item 修改的chart项
|
||||
*/
|
||||
const switchChart = (val, item) => {
|
||||
changeSingleParams(item, 'type', val)
|
||||
props.initCharts()
|
||||
}
|
||||
/**
|
||||
* 基础设置:修改标记
|
||||
* @param val 修改的标记大小
|
||||
* @param item 修改的chart项
|
||||
*/
|
||||
const switchSymbol = (val, item) => {
|
||||
changeSingleParams(item, 'symbol', val)
|
||||
props.initCharts()
|
||||
}
|
||||
/**
|
||||
* 基础设置:修改标记大小
|
||||
* @param val 修改的标记大小
|
||||
* @param item 修改的chart项
|
||||
*/
|
||||
const changeSymbolSize = (val, item) => {
|
||||
changeSingleParams(item, 'symbolSize', val)
|
||||
props.initCharts()
|
||||
}
|
||||
|
||||
/**
|
||||
* 基础设置:修改图形阴影的模糊大小
|
||||
* @param val 修改的阴影的模糊大小
|
||||
* @param item 修改的chart项
|
||||
*/
|
||||
const changeShadowBlur = (val, item) => {
|
||||
changeSingleParams(item, 'shadowBlur', val)
|
||||
props.initCharts()
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<el-scrollbar height="450px">
|
||||
<div class="basic-setup" @click.stop>
|
||||
饼图基本设置
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BasicSetting"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<el-card class="box-card box-card-h">
|
||||
<el-row justify="space-between" class="x-y-axis">
|
||||
<el-text>饼图数据项</el-text>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="'数据类型必须是数字！'"
|
||||
placement="bottom"
|
||||
>
|
||||
<el-icon>
|
||||
<Warning/>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
<div class="drag-block">
|
||||
<draggable
|
||||
class="list-group"
|
||||
:list="dragList"
|
||||
itemKey="id"
|
||||
group="people"
|
||||
@start="startDrag"
|
||||
@change="dragChartItem"
|
||||
>
|
||||
<template #item="{ element,index }">
|
||||
<div>
|
||||
<el-card shadow="hover" class="cards x-y-cards">
|
||||
<el-col :span="8">
|
||||
<div>{{ element.label }}</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="cards-right">
|
||||
<span>{{ element.dataType }}</span>
|
||||
<!-- <el-icon size="20" color="red" @click.stop="handleCancelAxis(element,index)"-->
|
||||
<!-- style="cursor: pointer">-->
|
||||
<!-- <CircleClose/>-->
|
||||
<!-- </el-icon>-->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import draggable from 'vuedraggable'
|
||||
const props = defineProps({
|
||||
//用于拖拽区域存放选项列表
|
||||
dragList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//初始化加载echarts函数
|
||||
initCharts: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
//echarts的配置属性
|
||||
chartOption: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
})
|
||||
let option = reactive(props.chartOption)
|
||||
/**
|
||||
* 开始拖拽事件
|
||||
* @param event event事件
|
||||
*/
|
||||
const startDrag = (event) => {
|
||||
|
||||
}
|
||||
/**
|
||||
* 从X轴/Y轴区域移动选项到左/右侧结束事件
|
||||
* @param event event事件
|
||||
*/
|
||||
const dragChartItem = (event) => {
|
||||
console.log('dragChartItem',event)
|
||||
if (event.removed === undefined) return;
|
||||
let item = event.removed.element
|
||||
let label = item.label
|
||||
dragTypeToValue(label)
|
||||
props.initCharts()
|
||||
// localStorage.removeItem('dragType')
|
||||
}
|
||||
/**
|
||||
* 拖拽类型为value的选项事件
|
||||
* @param label 选项名
|
||||
*/
|
||||
const dragTypeToValue = (label) => {
|
||||
console.log('dragTypeToValue',label,option)
|
||||
//删除选中选项的图例
|
||||
const legendIndex = option.legend.data.findIndex(object => object === label);
|
||||
option.legend.data.splice(legendIndex, 1)
|
||||
//删除echarts配置项series中符合该拖拽选项的item
|
||||
const objectIndex = option.series[0].data.findIndex(object => object.name === label);
|
||||
option.legend.selected[label] = false
|
||||
option.series[0].data.splice(objectIndex, 1)
|
||||
if(option.series[0].data.length===0){
|
||||
option.series.splice(0,1)
|
||||
}
|
||||
// clearBasicSetting()
|
||||
}
|
||||
const handleCancelAxis = (element, index) => {
|
||||
console.log('拖出xxx')
|
||||
dragTypeToValue(element.label)
|
||||
props.initCharts()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<el-card class="box-card box-card-h">
|
||||
<el-row justify="space-between" class="x-y-axis">
|
||||
<el-text>雷达图数据项</el-text>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="'数据类型必须是数字！'"
|
||||
placement="bottom"
|
||||
>
|
||||
<el-icon>
|
||||
<Warning/>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</el-row>
|
||||
<div class="drag-block">
|
||||
<draggable
|
||||
class="list-group"
|
||||
:list="dragList"
|
||||
itemKey="id"
|
||||
group="people"
|
||||
@start="startDrag"
|
||||
@change="dragChartItem"
|
||||
>
|
||||
<template #item="{ element,index }">
|
||||
<div>
|
||||
<el-card shadow="hover" class="cards x-y-cards">
|
||||
<el-col :span="8">
|
||||
<div>{{ element.label }}</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="cards-right">
|
||||
<span>{{ element.dataType }}</span>
|
||||
<!-- <el-icon size="20" color="red" @click.stop="handleCancelAxis(element,index)"-->
|
||||
<!-- style="cursor: pointer">-->
|
||||
<!-- <CircleClose/>-->
|
||||
<!-- </el-icon>-->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import draggable from 'vuedraggable'
|
||||
const props = defineProps({
|
||||
//用于拖拽区域存放选项列表
|
||||
dragList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//初始化加载echarts函数
|
||||
initCharts: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
//echarts的配置属性
|
||||
chartOption: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
})
|
||||
let option = reactive(props.chartOption)
|
||||
/**
|
||||
* 开始拖拽事件
|
||||
* @param event event事件
|
||||
*/
|
||||
const startDrag = (event) => {
|
||||
|
||||
}
|
||||
/**
|
||||
* 从X轴/Y轴区域移动选项到左/右侧结束事件
|
||||
* @param event event事件
|
||||
*/
|
||||
const dragChartItem = (event) => {
|
||||
console.log('dragChartItem',event)
|
||||
if (event.removed === undefined) return;
|
||||
let item = event.removed.element
|
||||
let label = item.label
|
||||
dragTypeToValue(label)
|
||||
props.initCharts()
|
||||
// localStorage.removeItem('dragType')
|
||||
}
|
||||
/**
|
||||
* 拖拽类型为value的选项事件
|
||||
* @param label 选项名
|
||||
*/
|
||||
const dragTypeToValue = (label) => {
|
||||
//删除选中选项的图例
|
||||
const legendIndex = option.legend.data.findIndex(object => object === label);
|
||||
option.legend.data.splice(legendIndex, 1)
|
||||
//删除echarts配置项series中符合该拖拽选项的item
|
||||
const objectIndex = option.series[0].data.findIndex(object => object.name === label);
|
||||
option.legend.selected[label] = false
|
||||
option.series[0].data.splice(objectIndex, 1)
|
||||
// clearBasicSetting()
|
||||
if(option.series[0].data.length===0){
|
||||
option.series.splice(0,1)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
233
src/views/custom-query/echarts-editor/index.vue
Normal file
233
src/views/custom-query/echarts-editor/index.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div>
|
||||
<EchartsEditor :info="initInfo" :line-data="lineChartsItem" :bar-data="barChartsItem" :pie-data="pieChartsItem"
|
||||
:radar-data="radarChartsItem" :radar-indicator="indicator" @getFinalInfo="getFinalInfo"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import EchartsEditor from "./components/EchartsEditor.vue";
|
||||
//入参
|
||||
const lineChartsItem = ref([
|
||||
{
|
||||
id: 1,
|
||||
unit: '年份',
|
||||
type: '',
|
||||
dataType: 'key',
|
||||
color: '',
|
||||
label: '年份',
|
||||
symbol: "",
|
||||
symbolSize: 0,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
shadowColor: '',//阴影颜色
|
||||
shadowBlur: 0,//图形阴影的模糊大小
|
||||
opacity: 1
|
||||
},
|
||||
data: ['2013', '2014', '2015', '2016', '2017', '2018']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
unit: '年销量',
|
||||
type: 'line',
|
||||
dataType: 'value',
|
||||
color: '#9a60b4',//图形颜色
|
||||
label: '华北',
|
||||
symbol: "triangle",//标记的图形circle:圆形,rect:矩形,triangle:三角形,diamond:钻石形,roundRect:圆角矩形,pin:圆钉形,arrow:箭头形,none:不显示标记
|
||||
symbolSize: 8,//标记的大小
|
||||
showSymbol: true,//是否显示标记,如果 false 则只有在 tooltip hover 的时候显示。
|
||||
lineStyle: {
|
||||
shadowColor: '',//阴影颜色
|
||||
shadowBlur: 0,//图形阴影的模糊大小
|
||||
opacity: 1//图形透明度
|
||||
},
|
||||
data: [40, 80, 20, 120, 140, 50]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
unit: '年销量',
|
||||
type: 'line',
|
||||
dataType: 'value',
|
||||
color: '#3ba272',
|
||||
label: '华东',
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
showSymbol: true,
|
||||
lineStyle: {
|
||||
shadowColor: '',//阴影颜色
|
||||
shadowBlur: 0,//图形阴影的模糊大小
|
||||
opacity: 1
|
||||
},
|
||||
data: [140, 180, 120, 40, 50, 150]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
unit: '年销量',
|
||||
type: 'line',
|
||||
dataType: 'value',
|
||||
color: '#5470c6',
|
||||
label: '华南',
|
||||
symbol: "rect",
|
||||
symbolSize: 8,
|
||||
showSymbol: true,
|
||||
lineStyle: {
|
||||
shadowColor: '',//阴影颜色
|
||||
shadowBlur: 0,//图形阴影的模糊大小
|
||||
opacity: 1
|
||||
},
|
||||
data: [110, 143, 68, 90, 120, 130]
|
||||
}
|
||||
])
|
||||
const barChartsItem = ref([
|
||||
{
|
||||
id: 1,
|
||||
unit: '年份',
|
||||
type: '',
|
||||
dataType: 'key',
|
||||
color: '',
|
||||
label: '年份',
|
||||
showBackground: false,
|
||||
backgroundStyle: {
|
||||
color: '',
|
||||
borderWidth: 0,
|
||||
borderColor: '',
|
||||
borderType: 'solid',
|
||||
},
|
||||
data: ['2013', '2014', '2015', '2016', '2017', '2018']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
unit: '销售金额',
|
||||
type: 'bar',
|
||||
dataType: 'value',
|
||||
color: '#9a60b4',//图形颜色
|
||||
label: '王五',
|
||||
showBackground: true,//是否显示柱条的背景色
|
||||
backgroundStyle: {
|
||||
color: '#e5e2e2',//柱条的颜色
|
||||
borderWidth: 0,//柱条的描边宽度，默认不描边。
|
||||
borderColor: '#000',//柱条的描边颜色
|
||||
borderType: 'dotted',//柱条的描边类型，默认为实线，支持 'dashed', 'dotted'
|
||||
},
|
||||
data: [40, 80, 20, 120, 140, 50]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
unit: '销售金额',
|
||||
type: 'bar',
|
||||
dataType: 'value',
|
||||
color: '#3ba272',
|
||||
label: '李四',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: '#e5e2e2',
|
||||
borderWidth: 0,
|
||||
borderColor: '#000',
|
||||
borderType: 'dashed',
|
||||
},
|
||||
data: [140, 180, 120, 40, 50, 150]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
unit: '销售金额',
|
||||
type: 'bar',
|
||||
dataType: 'value',
|
||||
color: '#2644a4',
|
||||
label: '张三',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: '#e5e2e2',
|
||||
borderWidth: 0,
|
||||
borderColor: '#000',
|
||||
borderType: 'solid',
|
||||
},
|
||||
data: [110, 143, 68, 90, 120, 130]
|
||||
}
|
||||
])
|
||||
const pieChartsItem = ref([
|
||||
{id: 1, label: '京东', dataType: 'value', value: 335},
|
||||
{id: 2, label: '菜鸟', dataType: 'value', value: 310},
|
||||
{id: 3, label: '总部', dataType: 'value', value: 234},
|
||||
{id: 4, label: '小电商', dataType: 'value', value: 135},
|
||||
])
|
||||
const radarChartsItem = ref([
|
||||
{label: 'Allocated Budget', dataType: 'value', data: [4200, 3000, 20000, 35000, 50000, 18000]},
|
||||
{label: 'Actual Spending', dataType: 'value', data: [5000, 14000, 28000, 26000, 42000, 21000]},
|
||||
])
|
||||
//定义好echarts的配置数据
|
||||
let initInfo = reactive({
|
||||
xValueAxis: [],
|
||||
yValueAxis: [],
|
||||
//echarts配置数据
|
||||
echartsOptions: {
|
||||
//图例
|
||||
legend: {
|
||||
data: [],
|
||||
selected: {},
|
||||
selectedMode: false
|
||||
},
|
||||
//离容器四侧的距离
|
||||
grid: {
|
||||
left: 40, // 左边距
|
||||
right: 60, // 右边距
|
||||
top: 40, // 顶边距
|
||||
bottom: 20, // 底边距
|
||||
// containLabel: true,
|
||||
},
|
||||
//提示框组件
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis'
|
||||
},
|
||||
//工具栏
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// //重置按钮显示
|
||||
// restore: {
|
||||
// show: true,
|
||||
// title: '重置'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
//X轴
|
||||
xAxis: {
|
||||
name: '',
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
//Y轴
|
||||
yAxis: {
|
||||
name: '',
|
||||
type: 'value',
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
},
|
||||
//配置项
|
||||
series: []
|
||||
}
|
||||
})
|
||||
const indicator= ref([
|
||||
{ name: 'Sales', max: 6500 },
|
||||
{ name: 'Administration', max: 16000 },
|
||||
{ name: 'Information Technology', max: 30000 },
|
||||
{ name: 'Customer Support', max: 38000 },
|
||||
{ name: 'Development', max: 52000 },
|
||||
{ name: 'Marketing', max: 25000 }
|
||||
])
|
||||
//获取到拖拽后的数据
|
||||
const getFinalInfo = (val) => {
|
||||
// console.log('父组件获取最终数据', val)
|
||||
if (val !== undefined) {
|
||||
initInfo = val
|
||||
}
|
||||
}
|
||||
getFinalInfo()
|
||||
</script>
|
||||
115
src/views/custom-query/portal/ThreeSwitch.vue
Normal file
115
src/views/custom-query/portal/ThreeSwitch.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div
|
||||
class="root"
|
||||
@click="changeStatus"
|
||||
:style="{
|
||||
width: rootWidth + 'em',
|
||||
height: height + 'em',
|
||||
borderRadius: radius + 'em',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="strip"
|
||||
:style="{
|
||||
width: stripWidth + 'em',
|
||||
height: height + 'em',
|
||||
borderRadius: radius + 'em',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="node"
|
||||
:style="{ width: nodeWidth + 'em', height: height + 'em' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<el-tag v-if="checkValue === -1" type="primary">对内提供</el-tag>
|
||||
<el-tag v-if="checkValue === 0" type="info">开发</el-tag>
|
||||
<el-tag v-if="checkValue === 1" type="success">对外提供</el-tag>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* @author: JimTT
|
||||
* @description: 三选项开关Switch组件
|
||||
*/
|
||||
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
const emit = defineEmits(["update-check"]);
|
||||
const props = defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
default: "1",
|
||||
},
|
||||
check: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
});
|
||||
|
||||
let rootWidth = ref(3);
|
||||
let height = ref(1);
|
||||
let stripWidth = ref(1);
|
||||
let nodeWidth = ref(1);
|
||||
let radius = ref(1);
|
||||
let direct = ref(1);
|
||||
let checkValue = ref(-1);
|
||||
|
||||
const changeStatus = () => {
|
||||
if (checkValue.value === 1) direct.value = 0;
|
||||
else if (checkValue.value === -1) direct.value = 1;
|
||||
checkValue.value =
|
||||
direct.value === 1 ? checkValue.value + 1 : checkValue.value - 1;
|
||||
stripWidth.value = (2 + checkValue.value) * Number(props.size);
|
||||
emit("update-check", checkValue);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.check === 1) direct.value = 0;
|
||||
checkValue.value = props.check;
|
||||
stripWidth.value = (2 + checkValue.value) * Number(props.size);
|
||||
rootWidth.value *= Number(props.size);
|
||||
height.value *= Number(props.size);
|
||||
nodeWidth.value *= Number(props.size);
|
||||
radius.value *= Number(props.size);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.check,
|
||||
(newValue) => {
|
||||
if (newValue === 1) direct.value = 0;
|
||||
checkValue.value = newValue;
|
||||
stripWidth.value = (2 + checkValue.value) * Number(props.size);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.root {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: content-box;
|
||||
font-size: 30px;
|
||||
background-color: white;
|
||||
border: 1px solid rgba(221, 221, 221, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1),
|
||||
0 3px 3px 0 rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
|
||||
}
|
||||
|
||||
.strip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(95, 184, 120, 1);
|
||||
transition: width 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
|
||||
}
|
||||
</style>
|
||||
145
src/views/custom-query/portal/fieldTable.vue
Normal file
145
src/views/custom-query/portal/fieldTable.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div class="top-btn">
|
||||
<div>{{ titleType }}参数</div>
|
||||
<div>
|
||||
<span @click="handleAdd">
|
||||
<el-button :disabled="isDisabled" icon="Plus"></el-button>
|
||||
</span>
|
||||
<span @click="handleSub">
|
||||
<el-button :icon="Minus" :disabled="isDisabled" icon="Plus"></el-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:empty-text="emptyText"
|
||||
:data="columnList"
|
||||
row-key="columnId"
|
||||
:lazy="true"
|
||||
:header-cell-style="{ background: '#f5f5f8' }"
|
||||
style="width: 550px; margin-bottom: 15px"
|
||||
ref="topSearchColumn"
|
||||
>
|
||||
<el-table-column label="映射字段" align="center" prop="mapField">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.mappingKey"
|
||||
placeholder="映射字段"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in mapFieldType"
|
||||
:value="item.value + ''"
|
||||
:label="item.label"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询字段" prop="mappingKey" align="center">
|
||||
<template #default="scope">
|
||||
<el-input
|
||||
v-model="scope.row.mappingValue"
|
||||
@change="handleInputChange"
|
||||
placeholder="查询字段"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" prop="inputType" align="center">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.inputType"
|
||||
placeholder="类型"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option value="number" label="number"> </el-option>
|
||||
<el-option value="string" label="string"> </el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="描述" prop="description" align="center">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.description" placeholder="字段描述" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="必填" prop="description" align="center">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.required" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* @author: JimTT
|
||||
* @description: 动态表格组件
|
||||
*/
|
||||
|
||||
import { defineExpose, defineProps, watch } from "vue";
|
||||
import { Minus } from "@element-plus/icons-vue";
|
||||
|
||||
const props = defineProps({
|
||||
titleType: {
|
||||
type: String,
|
||||
default: "Params",
|
||||
},
|
||||
initColumList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
mapFieldType: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const columnList = ref([...props.initColumList]);
|
||||
|
||||
watch(
|
||||
() => props.initColumList,
|
||||
(cur, preCur) => {
|
||||
console.log(cur);
|
||||
console.log("======");
|
||||
console.log(preCur);
|
||||
columnList.value = cur;
|
||||
}
|
||||
);
|
||||
|
||||
const handleAdd = () => {
|
||||
let obj = {
|
||||
mappingValue: null,
|
||||
mappingKey: null,
|
||||
mappingType: 0,
|
||||
};
|
||||
columnList.value.push(obj);
|
||||
};
|
||||
|
||||
const handleSub = () => {
|
||||
columnList.value.pop();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
columnList,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.isPk {
|
||||
position: absolute;
|
||||
color: red;
|
||||
}
|
||||
.top-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
713
src/views/custom-query/portal/index.vue
Normal file
713
src/views/custom-query/portal/index.vue
Normal file
@@ -0,0 +1,713 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryForm">
|
||||
<el-form-item label="接口地址" prop="portalName">
|
||||
<el-input
|
||||
v-model="queryParams.path"
|
||||
placeholder="请输暴露地址"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="接口名称" prop="portalName">
|
||||
<el-input
|
||||
v-model="queryParams.portalName"
|
||||
placeholder="请输入接口名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否匿名" prop="portalName">
|
||||
<el-select
|
||||
v-model="queryParams.anonymity"
|
||||
placeholder="请选择是否匿名"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in permissionType"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="接口类型" prop="type">
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
placeholder="请选择接口类型"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option label="本地接口" value="本地接口" />
|
||||
<el-option label="第三方接口" value="第三方接口" />
|
||||
</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"
|
||||
v-perm="['query:portal:add-custom']"
|
||||
@click="handleAdd('Local')"
|
||||
:icon="Plus"
|
||||
plain
|
||||
>新增本地接口</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Plus"
|
||||
v-perm="['query:portal:add-other']"
|
||||
@click="handleAdd('Third')"
|
||||
plain
|
||||
>导入第三方接口
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="adapterId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="序号" type="index" width="60" />
|
||||
<el-table-column prop="portalName" label="接口名称" align="center" />
|
||||
<el-table-column prop="permissionType" label="是否匿名" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="permission_type" :value="scope.row.permissionType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="接口类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="portal_type" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="path" label="接口url" align="center" />
|
||||
<el-table-column prop="queryName" label="查询名称 " align="center" />
|
||||
<el-table-column prop="queryType" label="查询类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="custom_query_type" :value="scope.row.queryType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="adapterCodeType" label="适配器类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag
|
||||
dict-type="data_adapter_type"
|
||||
:value="scope.row.adapterCodeType"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<ThreeSwitch size="0.7" :check="1" @UpdateCheck="handleUpdateCheck" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" />
|
||||
<el-table-column prop="updateTime" label="更新时间" align="center" />
|
||||
<el-table-column prop="remark" label="备注" align="center">
|
||||
<template #default="scope">
|
||||
{{ scope.row.remark || "--" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="240" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
v-perm="['query:adapter:edit']"
|
||||
@click="handleEdit(scope.row.adapterId)"
|
||||
link
|
||||
>接口详情
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleEdit(scope.row)"
|
||||
link
|
||||
>编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.createDataAdapter"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="handleDesign(scope.row)"
|
||||
link
|
||||
>设计
|
||||
</el-button>
|
||||
<popover-delete
|
||||
:name="scope.row.portalName"
|
||||
:type="'接口'"
|
||||
:perm="['query:adapter:del']"
|
||||
@delete="handleDelete(scope.row.portalId)"
|
||||
/>
|
||||
</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="isModalVisited" :title="title" width="1200px">
|
||||
<div>
|
||||
<el-form
|
||||
label-width="100px"
|
||||
:model="form"
|
||||
:rules="formRules"
|
||||
ref="formInstance"
|
||||
class="dialog-content"
|
||||
>
|
||||
<div class="dialog-content-left">
|
||||
<el-row>
|
||||
<el-col :span="24" v-if="isLocalAdd">
|
||||
<el-form-item label="查询类型" prop="queryType">
|
||||
<el-select
|
||||
v-model="form.queryType"
|
||||
placeholder="请选择查询类型"
|
||||
@change="handleSelectQuery"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('custom_query_type')"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="isLocalAdd">
|
||||
<el-form-item label="查询名称" prop="queryId">
|
||||
<el-select
|
||||
v-model="form.queryId"
|
||||
placeholder="请选择一个自定义查询"
|
||||
@change="handleSelectQueryDetail(form.queryId)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in queryListType"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
<template #empty>请先选择查询类型</template>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="!isLocalAdd">
|
||||
<el-form-item label="三方接口Url" prop="url">
|
||||
<el-input
|
||||
v-model="form.url"
|
||||
placeholder="请输入完整的第三方接口Url"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="接口名称" prop="portalName">
|
||||
<el-input
|
||||
v-model="form.portalName"
|
||||
placeholder="请输入接口名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="是否匿名" prop="permissionType">
|
||||
<el-radio-group v-model="form.permissionType">
|
||||
<el-radio
|
||||
v-for="item in cacheStore.getDict('permission_type')"
|
||||
:label="item.value"
|
||||
>{{ item.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="接口方法" prop="requestMethod">
|
||||
<el-select
|
||||
v-model="form.requestMethod"
|
||||
disabled
|
||||
placeholder="Get"
|
||||
></el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="接口url" prop="path">
|
||||
<el-input
|
||||
v-model="form.path"
|
||||
placeholder="请输入接口url"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="适配器来源" prop="createDataAdapter">
|
||||
<el-radio-group
|
||||
v-model="form.createDataAdapter"
|
||||
@change="handleAdapterRadioChange"
|
||||
>
|
||||
<el-radio :label="true">新增适配器</el-radio>
|
||||
<el-radio :label="false">选择一个适配器</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="form.createDataAdapter">
|
||||
<el-form-item label="适配器语言" prop="adapterCodeType">
|
||||
<el-select
|
||||
v-model="form.adapterCodeType"
|
||||
placeholder="请选择适配器使用的编程语言"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('data_adapter_type')"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="!form.createDataAdapter">
|
||||
<el-form-item label="适配器" prop="adapterId">
|
||||
<el-select
|
||||
v-model="form.adapterId"
|
||||
placeholder="请选择一个适配器"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in adapterListType"
|
||||
:value="item.adapterId"
|
||||
:label="item.adapterName"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
placeholder="请输入备注"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div>
|
||||
<FieldTable
|
||||
ref="fieldTableRef"
|
||||
:init-colum-list="initColumList"
|
||||
title-type="Params"
|
||||
:is-disabled="false"
|
||||
:mapFieldType="mapFieldType"
|
||||
empty-text="空"
|
||||
@fieldTableData="handleFieldTableData"
|
||||
/>
|
||||
<FieldTable title-type="Headers" empty-text="请求方法不支持" />
|
||||
<FieldTable title-type="Body" empty-text="请求方法不支持" />
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)"
|
||||
>确定</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getPortalList,
|
||||
getQueryList,
|
||||
getAdapterList,
|
||||
getMapFields,
|
||||
addPortal,
|
||||
getPortalDetail,
|
||||
updatePortal,
|
||||
deletePortal,
|
||||
} from "@/api/custom-query/portal.js";
|
||||
import Tag from "@/components/Tag.vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { Search, Refresh, Plus } from "@element-plus/icons-vue";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import ThreeSwitch from "./ThreeSwitch.vue";
|
||||
import FieldTable from "./fieldTable.vue";
|
||||
import { useCacheStore } from "@/stores/cache";
|
||||
import { useRouter } from "vue-router";
|
||||
import { nextTick, reactive, watchEffect } from "vue";
|
||||
|
||||
const router = useRouter();
|
||||
const cacheStore = useCacheStore();
|
||||
const queryParams = reactive({
|
||||
anonymity: "",
|
||||
path: "",
|
||||
portalName: "",
|
||||
type: "",
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
queryType: null,
|
||||
queryId: null,
|
||||
url: null,
|
||||
portalName: null,
|
||||
anonymity: true,
|
||||
type: null,
|
||||
path: null,
|
||||
createDataAdapter: false,
|
||||
adapterCodeType: null,
|
||||
dataAdapter: {
|
||||
type: null,
|
||||
},
|
||||
adapterId: null,
|
||||
remark: null,
|
||||
});
|
||||
|
||||
const initColumList = ref([]);
|
||||
//
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const list = ref([]);
|
||||
const queryForm = ref([]);
|
||||
const loading = ref(true);
|
||||
const total = ref();
|
||||
const title = ref("");
|
||||
|
||||
//
|
||||
const isEdit = ref(false);
|
||||
const isLocalAdd = ref(false);
|
||||
const isModalVisited = ref(false);
|
||||
|
||||
//
|
||||
const fieldTableRef = ref(null);
|
||||
const formInstance = ref(null);
|
||||
|
||||
//
|
||||
const queryListType = ref(null);
|
||||
const adapterListType = ref(null);
|
||||
const mapFieldType = ref(null);
|
||||
const permissionType = ref(null);
|
||||
|
||||
//
|
||||
const formRules = ref({
|
||||
queryType: [{ required: true, message: "请选择查询类型", trigger: "blur" }],
|
||||
queryId: [{ required: true, message: "请选择查询名称", trigger: "blur" }],
|
||||
portalName: [{ required: true, message: "请输入接口名称", trigger: "blur" }],
|
||||
anonymity: [{ required: true, message: "请选择是否匿名", trigger: "blur" }],
|
||||
path: [{ required: true, message: "请输入接口路径", trigger: "blur" }],
|
||||
createDataAdapter: [
|
||||
{ required: true, message: "请选择适配器来源", trigger: "blur" },
|
||||
],
|
||||
adapterCodeType: [
|
||||
{ required: true, message: "请选择一个适配器语言", trigger: "blur" },
|
||||
],
|
||||
remark: [{ required: false }],
|
||||
});
|
||||
|
||||
// 获取列表
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo,
|
||||
};
|
||||
loading.value = true;
|
||||
getPortalList(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);
|
||||
}
|
||||
});
|
||||
getAdapterList().then((res) => {
|
||||
if (res.code === 1000) {
|
||||
adapterListType.value = res?.data?.rows;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//重置form表单
|
||||
const restFrom = () => {
|
||||
form.queryType = null;
|
||||
form.queryId = null;
|
||||
form.portalName = null;
|
||||
form.anonymity = null;
|
||||
form.path = null;
|
||||
form.createDataAdapter = null;
|
||||
form.adapterId = null;
|
||||
form.dataAdapter.type = null;
|
||||
form.remark = null;
|
||||
form.type = null;
|
||||
mapFieldType.value = null;
|
||||
};
|
||||
|
||||
// 添加
|
||||
const handleAdd = (type) => {
|
||||
restFrom();
|
||||
isModalVisited.value = true;
|
||||
isEdit.value = false;
|
||||
console.log(isEdit);
|
||||
switch (type) {
|
||||
case "Local": {
|
||||
title.value = "新增本地接口";
|
||||
isLocalAdd.value = true;
|
||||
break;
|
||||
}
|
||||
case "Third": {
|
||||
title.value = "导入三方接口";
|
||||
isLocalAdd.value = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate();
|
||||
});
|
||||
};
|
||||
|
||||
//编辑
|
||||
const handleEdit = async (row) => {
|
||||
isEdit.value = true;
|
||||
try {
|
||||
if (row.type === "LOCAL") {
|
||||
const { code, data } = await getPortalDetail(row.portalId);
|
||||
if (code === 1000) {
|
||||
form.queryType = data.queryType + "";
|
||||
await handleSelectQuery();
|
||||
title.value = "修改本地接口";
|
||||
isLocalAdd.value = true;
|
||||
isModalVisited.value = true;
|
||||
form.queryId = data.queryId;
|
||||
form.portalId = data.portalId;
|
||||
form.portalName = data.portalName;
|
||||
form.anonymity = data.anonymity;
|
||||
form.path = data.path;
|
||||
form.createDataAdapter = data.createDataAdapter;
|
||||
form.adapterCodeType = data.adapterCodeType;
|
||||
form.permissionType = data.permissionType;
|
||||
form.adapterId = data.adapterId;
|
||||
form.remark = data.remark;
|
||||
form.type = data.type;
|
||||
initColumList.value = data.mappings;
|
||||
await handleSelectQueryDetail(data.queryId);
|
||||
}
|
||||
}
|
||||
if (row.type === "EXTERNAL") {
|
||||
const { code, data } = await getPortalDetail(row.portalId);
|
||||
if (code === 1000) {
|
||||
form.queryType = data.queryType + "";
|
||||
await handleSelectQuery();
|
||||
title.value = "修改第三方接口";
|
||||
isLocalAdd.value = false;
|
||||
isModalVisited.value = true;
|
||||
form.queryId = data.queryId;
|
||||
form.portalId = data.portalId;
|
||||
form.portalName = data.portalName;
|
||||
form.anonymity = data.anonymity;
|
||||
form.path = data.path;
|
||||
form.createDataAdapter = data.createDataAdapter;
|
||||
form.adapterCodeType = data.adapterCodeType;
|
||||
form.permissionType = data.permissionType;
|
||||
form.adapterId = data.adapterId;
|
||||
form.remark = data.remark;
|
||||
form.type = data.type;
|
||||
form.url = data.url;
|
||||
initColumList.value = data.mappings;
|
||||
await handleSelectQueryDetail(data.queryId);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
// 设计
|
||||
const handleDesign = (data) => {
|
||||
router.push({
|
||||
path: `/custom/query/data/adapter/design/${data.adapterId}`,
|
||||
query: {
|
||||
special: true,
|
||||
portalId: data.portalId,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
//删除
|
||||
const handleDelete = async (portalId) => {
|
||||
deletePortal(portalId).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restFrom();
|
||||
isModalVisited.value = false;
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate();
|
||||
});
|
||||
};
|
||||
|
||||
// 跳转适配器
|
||||
const routerToAdapter = (adapterId, portalId) => {
|
||||
ElMessageBox.confirm("是否立即去设计你的新增适配器", "Warning", {
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
router.push({
|
||||
path: `/custom/query/data/adapter/design/${adapterId}`,
|
||||
query: {
|
||||
special: true,
|
||||
portalId: portalId,
|
||||
},
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: "info",
|
||||
message: "取消成功",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
//提交
|
||||
const handleSubmit = async (instance) => {
|
||||
await instance.validate((success, fields) => {
|
||||
if (success) {
|
||||
// 本地接口提交
|
||||
if (isLocalAdd.value && !isEdit.value) {
|
||||
addPortal({
|
||||
...form,
|
||||
type: "LOCAL",
|
||||
mappings: fieldTableRef.value.columnList,
|
||||
requestMethod: "GET",
|
||||
}).then((res) => {
|
||||
const { portalId, adapterId } = res.data;
|
||||
isModalVisited.value = false;
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "提交成功",
|
||||
});
|
||||
routerToAdapter(adapterId, portalId);
|
||||
});
|
||||
}
|
||||
|
||||
// 三方接口提交
|
||||
if (!isLocalAdd.value && !isEdit.value) {
|
||||
addPortal({
|
||||
...form,
|
||||
type: "EXTERNAL",
|
||||
mappings: fieldTableRef.value.columnList,
|
||||
interfaceRequestMethod: "GET",
|
||||
contentType: "application/json",
|
||||
requestMethod: "GET",
|
||||
}).then((res) => {
|
||||
const { portalId, adapterId } = res.data;
|
||||
isModalVisited.value = false;
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "提交成功",
|
||||
});
|
||||
routerToAdapter(adapterId, portalId);
|
||||
});
|
||||
}
|
||||
|
||||
// 接口修改
|
||||
if (isEdit.value) {
|
||||
updatePortal({
|
||||
...form,
|
||||
mappings: fieldTableRef.value.columnList,
|
||||
interfaceRequestMethod: "GET",
|
||||
contentType: "application/json",
|
||||
requestMethod: "GET",
|
||||
}).then(() => {
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "提交成功",
|
||||
});
|
||||
getList();
|
||||
});
|
||||
isModalVisited.value = false;
|
||||
}
|
||||
} else {
|
||||
console.log("error submit!", fields);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 查询类型下拉框change事件
|
||||
const handleSelectQuery = async () => {
|
||||
if (form.queryType) {
|
||||
try {
|
||||
const { code, data } = await getQueryList(form.queryType);
|
||||
if (code === 1000) {
|
||||
form.queryId = null;
|
||||
queryListType.value = data;
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 查询具体结果下拉框事件
|
||||
const handleSelectQueryDetail = async (queryId) => {
|
||||
try {
|
||||
const { code, data } = await getMapFields(queryId);
|
||||
if (code === 1000) {
|
||||
mapFieldType.value = data;
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
|
||||
// 适配器来源切换
|
||||
const handleAdapterRadioChange = () => {
|
||||
form.dataAdapter.type = null;
|
||||
};
|
||||
|
||||
// 三选项开关切换事件
|
||||
const handleUpdateCheck = (value) => {
|
||||
// TODO::
|
||||
};
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = async (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
await getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
await getList();
|
||||
};
|
||||
|
||||
//
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dialog-content {
|
||||
display: flex;
|
||||
.dialog-content-left {
|
||||
width: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
.third-dialog-content {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
112
src/views/custom-query/query-page/index.vue
Normal file
112
src/views/custom-query/query-page/index.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<el-form inline class="query-form" ref="queryForm" @submit.prevent="getData">
|
||||
<el-form-item v-for="column in uniCons" :key="column.ucId"
|
||||
:label="column.ucName" :prop="column.ucName">
|
||||
<el-input :placeholder="column.ucDescribe" :type="column.ucType" v-model="column.query" clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getData" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="tableData" v-loading="tableLoading" :max-height="tableHeight" v-tabh>
|
||||
<el-table-column v-for="column in uniColumns" :key="column.prop" :prop="column.prop"
|
||||
:label="column.label" align="center"/>
|
||||
</el-table>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh} from '@element-plus/icons-vue'
|
||||
import {getPageInfo,getPageData} from "@/api/custom-query/query-page";
|
||||
import {reactive} from "vue";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const router = useRouter()
|
||||
let path = router.currentRoute.value.path.split("/")
|
||||
const queryId = reactive(path[path.length-1])
|
||||
const queryForm = ref([])
|
||||
const tableData = ref([])
|
||||
const uniCons = ref([])
|
||||
const uniColumns = ref([])
|
||||
const tableLoading = ref(true)
|
||||
const total = ref()
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px')
|
||||
|
||||
const initPage = () => {
|
||||
tableLoading.value = true
|
||||
getPageInfo(queryId,pageInfo).then(res=>{
|
||||
let data = res.data
|
||||
uniColumns.value = data.uniColumns
|
||||
uniCons.value = data.uniCons
|
||||
let table = data.table
|
||||
tableData.value = table.rows
|
||||
total.value = table.total
|
||||
tableLoading.value = false
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const changeInput = (val,column) => {
|
||||
console.log(val,column)
|
||||
|
||||
}
|
||||
|
||||
const getData = () => {
|
||||
tableLoading.value = true
|
||||
let queryData = []
|
||||
uniCons.value.forEach(con=>{
|
||||
if (con.query){
|
||||
let queryItem = {
|
||||
query:con.query,
|
||||
ucId: con.ucId
|
||||
}
|
||||
queryData.push(queryItem)
|
||||
}
|
||||
})
|
||||
tableLoading.value = true
|
||||
getPageData(pageInfo,{list:queryData,queryId}).then(res=>{
|
||||
if(res.code===1000){
|
||||
let data = res.data
|
||||
tableData.value = data.rows
|
||||
total.value = data.total
|
||||
tableLoading.value = false
|
||||
}else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
uniCons.value.forEach(con=>{
|
||||
con.query=''
|
||||
})
|
||||
getData()
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getData()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getData()
|
||||
}
|
||||
|
||||
initPage()
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
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>
|
||||
378
src/views/custom-query/table-management/editTable.vue
Normal file
378
src/views/custom-query/table-management/editTable.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<el-dialog v-model="isVisited" title="编辑表格" width="1150px">
|
||||
<el-form :model="queryParams" inline label-width="100px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="表名: " prop="table.tableName">
|
||||
<el-text>{{ queryParams.table.tableName }}</el-text>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据源名称: ">
|
||||
<el-text>{{ dataSourceName }}</el-text>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据源类型: " prop="table.dataSourceType">
|
||||
<el-text>{{ queryParams.table.dataSourceType }}</el-text>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色: " prop="roleIds" style="width: 300px">
|
||||
<el-select
|
||||
v-model="queryParams.roleIds"
|
||||
multiple
|
||||
placeholder="请选择角色"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roleList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="表描述: "
|
||||
prop="table.tableComment"
|
||||
style="width: 300px"
|
||||
>
|
||||
<el-input
|
||||
v-model="queryParams.table.tableComment"
|
||||
:rows="2"
|
||||
type="textarea"
|
||||
placeholder="请输入表描述"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleAddRelation" :icon="Plus"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button type="danger" @click="handleDelete" :icon="Delete"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="queryParams.relationMappings"
|
||||
row-key="mainId"
|
||||
v-loading="loading"
|
||||
@selection-change="handleSelectionChange"
|
||||
:header-cell-style="{ background: '#f5f5f8' }"
|
||||
ref="relationalMap"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
align="center"
|
||||
prop="index"
|
||||
/>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
align="center"
|
||||
type="index"
|
||||
width="60"
|
||||
/>
|
||||
<el-table-column label="外键" prop="mainKey" align="center">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.mainKey"
|
||||
placeholder="外键"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in queryParams.columnList"
|
||||
:key="item.id"
|
||||
:label="item.columnName + ':' + item.columnComment"
|
||||
:value="item.columnName"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关联表" prop="childId" align="center">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.childId"
|
||||
placeholder="关联表"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in tableInfoList"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关联字段" prop="childKey" align="center">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.childKey"
|
||||
placeholder="关联字段"
|
||||
@visible-change="
|
||||
handleVisibleChange(
|
||||
scope.row.childId,
|
||||
scope.$index,
|
||||
$event
|
||||
)
|
||||
"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in scope.row.childListColumn"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关联方式" prop="type" align="center">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.type"
|
||||
multiple
|
||||
placeholder="关联方式"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option label="hasOne" value="1" />
|
||||
<el-option label="hasMany" value="2" />
|
||||
<el-option label="belongsTo" value="3" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider content-position="center">ER可视化查询字段信息</el-divider>
|
||||
<el-table
|
||||
:data="queryParams.columnList"
|
||||
row-key="columnId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
:header-cell-style="{ background: '#f5f5f8' }"
|
||||
style="height: 400px"
|
||||
ref="topSearchColumn"
|
||||
>
|
||||
<el-table-column label="序号" align="center" type="index" width="60" />
|
||||
<el-table-column label="列名称" prop="columnName" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.columnName }}</span>
|
||||
<span class="isPk" v-if="scope.row.pk">*</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列描述" prop="columnComment" align="center">
|
||||
<template #default="scope">
|
||||
<el-input
|
||||
v-model="scope.row.columnComment"
|
||||
placeholder="请输入列描述"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列类型" prop="columnType" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.columnType }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否使用" prop="use" align="center">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.use" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<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 { defineExpose, defineProps } from "vue";
|
||||
import { Plus, Delete } from "@element-plus/icons-vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
getTableDetails,
|
||||
editTable,
|
||||
getAssociationFieldOption,
|
||||
getAssociationTableOption,
|
||||
} from "@/api/custom-query/table";
|
||||
import { getRoleOption } from "@/api/role/role";
|
||||
|
||||
const isVisited = ref(false);
|
||||
let queryParams = reactive({
|
||||
table: {
|
||||
dataSourceId: "",
|
||||
dataSourceType: "",
|
||||
tableName: "",
|
||||
tableComment: "",
|
||||
},
|
||||
roleIds: [],
|
||||
relationMappings: [],
|
||||
columnList: [],
|
||||
});
|
||||
const roleList = ref([]);
|
||||
const mainIdArray = ref([]);
|
||||
const loading = ref(true);
|
||||
const tableInfoList = ref([]);
|
||||
const rules = reactive({
|
||||
roleIds: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择角色",
|
||||
trigger: ["blur", "change"],
|
||||
type: "array",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
tableId: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
dataSourceName: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
const restForm = () => {
|
||||
queryParams = {
|
||||
table: {
|
||||
dataSourceId: "",
|
||||
dataSourceType: "",
|
||||
tableName: "",
|
||||
tableComment: "",
|
||||
},
|
||||
roleIds: [],
|
||||
relationMappings: [],
|
||||
columnList: [],
|
||||
};
|
||||
};
|
||||
//获取角色option
|
||||
const getRole = () => {
|
||||
getRoleOption().then((res) => {
|
||||
if (res.code === 1000) {
|
||||
roleList.value = res.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取关联表option
|
||||
const getAssociationOption = async (id) => {
|
||||
getAssociationTableOption(id).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
tableInfoList.value = res.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取对应关联表的关联字段
|
||||
const handleVisibleChange = (id, index, e) => {
|
||||
if (e === true) {
|
||||
getAssociationFieldOption(id).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
queryParams.relationMappings[index].childListColumn = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
//获取表详情
|
||||
const getTableDetail = async () => {
|
||||
loading.value = true;
|
||||
await getTableDetails(props.tableId).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
loading.value = false;
|
||||
if (res.data.roleIds) {
|
||||
queryParams.table = res.data.table;
|
||||
getAssociationOption(res.data.table.dataSourceId);
|
||||
}
|
||||
if (res.data.roleIds) {
|
||||
queryParams.roleIds = res.data.roleIds;
|
||||
}
|
||||
if (res.data.relationMappings) {
|
||||
queryParams.relationMappings = res.data.relationMappings;
|
||||
}
|
||||
if (res.data.roleIds) {
|
||||
queryParams.columnList = res.data.columnList;
|
||||
}
|
||||
isVisited.value = true;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//编辑表格中的selection
|
||||
const handleSelectionChange = (selection) => {
|
||||
console.log("selection", selection);
|
||||
mainIdArray.value = selection.map((item) => item.mainId);
|
||||
};
|
||||
//新增表之间关联关系
|
||||
const handleAddRelation = () => {
|
||||
let obj = {
|
||||
mainId: queryParams.table.tableId,
|
||||
childId: null,
|
||||
mainKey: null,
|
||||
childKey: null,
|
||||
type: [],
|
||||
childListColumn: [],
|
||||
};
|
||||
queryParams.relationMappings.push(obj);
|
||||
};
|
||||
//删除表之间关联关系
|
||||
const handleDelete = () => {
|
||||
queryParams.relationMappings.forEach((item, index) => {
|
||||
mainIdArray.value.forEach((mainId) => {
|
||||
if (item.mainId === mainId) {
|
||||
queryParams.relationMappings.splice(index, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
//提交
|
||||
const handleSubmit = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
};
|
||||
editTable(params).then((res) => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
const show = () => {
|
||||
isVisited.value = true;
|
||||
getTableDetail();
|
||||
getRole();
|
||||
};
|
||||
defineExpose({
|
||||
show,
|
||||
restForm,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.isPk {
|
||||
/*width: 5px;*/
|
||||
/*height: 5px;*/
|
||||
/*border-radius: 4px;*/
|
||||
/*background-color: red;*/
|
||||
position: absolute;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
201
src/views/custom-query/table-management/importTable.vue
Normal file
201
src/views/custom-query/table-management/importTable.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<el-dialog v-model="isVisited" title="导入表格" width="1000px">
|
||||
<el-form :model="queryParams" inline ref="queryForm" class="query-form" style="margin: 0">
|
||||
<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="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</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 label="序号" type="index" width="60" align="center"/>
|
||||
<el-table-column prop="tableName" label="表名称" align="center"/>
|
||||
<el-table-column prop="tableComment" label="表描述" 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'])
|
||||
|
||||
let 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 shortcuts = [
|
||||
{
|
||||
text: "上周",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上月",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "三月前",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
}
|
||||
}
|
||||
];
|
||||
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
|
||||
dateValue.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 => {
|
||||
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>
|
||||
|
||||
249
src/views/custom-query/table-management/index.vue
Normal file
249
src/views/custom-query/table-management/index.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" 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="dateValue">
|
||||
<el-config-provider>
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</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="info" @click="handleImport" :icon="UploadFilled" plain>导入</el-button>
|
||||
<el-button type="warning" :icon="Download" plain>导出</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="tableId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<!-- <el-table-column type="selection" width="55"/>-->
|
||||
<el-table-column label="序号" type="index" width="60" align="center"/>
|
||||
<el-table-column prop="tableName" 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="dataSourceType" label="数据源类型" align="center"/>
|
||||
<el-table-column prop="tableComment" label="表描述" align="center"/>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"/>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleEdit(scope.row.tableId)" link>编辑
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSynchronization(scope.row.tableId)" link>同步
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.tableName" :type="'表格'"
|
||||
@delete="handleDelete(scope.row.tableId)"/>
|
||||
|
||||
</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"/>
|
||||
<import-table ref="importTableRef" :data-source-option="dataSourceOption" @importSuccess="getList"
|
||||
@changeEdit="changeEdit"/>
|
||||
|
||||
<edit-table ref="editTableRef" :data-source-name="dataSourceName" :table-id="editTableId"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ImportTable from './importTable.vue'
|
||||
import EditTable from "./editTable.vue";
|
||||
import {Search, Refresh, Delete, Edit, UploadFilled, Download} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useRouter} from "vue-router";
|
||||
import {getTableInfo, delTable} from "@/api/custom-query/table";
|
||||
import {getDataSourceOption} from "@/api/custom-query/datamodel";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {syncDatabase} from "../../../api/custom-query/table";
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const queryParams = reactive({
|
||||
dataSourceId: '',
|
||||
tableName: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
})
|
||||
const importTableRef = ref(null)
|
||||
const editTableRef = ref(null)
|
||||
const editTableId = ref()
|
||||
const queryForm = ref([])
|
||||
const list = ref([])
|
||||
const dateValue = ref();
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "上周",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上月",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "三月前",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
}
|
||||
}
|
||||
];
|
||||
const dataSourceName = ref()
|
||||
const dataSourceOption = ref()
|
||||
const total = ref()
|
||||
const loading = ref(true)
|
||||
const isVisited = ref(false)
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const formInstance = ref()
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
//获取数据
|
||||
const getList = 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
|
||||
getTableInfo(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)
|
||||
}
|
||||
})
|
||||
}
|
||||
//获取数据源select的option
|
||||
const getOption = () => {
|
||||
getDataSourceOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
dataSourceOption.value = res.data
|
||||
getList();
|
||||
}
|
||||
})
|
||||
}
|
||||
//通过id查询数据源名称
|
||||
const getDataSourceOptionItem = (dataSourceId) => {
|
||||
for (let item of dataSourceOption.value) {
|
||||
if (item.value === dataSourceId) {
|
||||
dataSourceName.value = item.label
|
||||
return item.label;
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
//添加
|
||||
const handleImport = async () => {
|
||||
nextTick(() => {
|
||||
importTableRef.value.show()
|
||||
})
|
||||
}
|
||||
//导入单个表格, 直接进入编辑页面
|
||||
const changeEdit = (data) => {
|
||||
editTableId.value = data
|
||||
nextTick(() => {
|
||||
editTableRef.value.show()
|
||||
})
|
||||
}
|
||||
//修改
|
||||
const handleEdit = async (tableId) => {
|
||||
editTableId.value = tableId
|
||||
nextTick(() => {
|
||||
editTableRef.value.show()
|
||||
})
|
||||
}
|
||||
//同步
|
||||
const handleSynchronization = async (tableId) => {
|
||||
syncDatabase(tableId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//删除
|
||||
const handleDelete = async (tableId) => {
|
||||
delTable(tableId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getList()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getList()
|
||||
}
|
||||
getOption();
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="displayType === 'image'">
|
||||
<el-image :src="columnProp" :style="{width: params.width+'px',height: params.height+'px',borderRadius:params.circle+'%'}">
|
||||
<template #error>
|
||||
<el-image :style="{width: params.width+'px',height: params.height+'px',borderRadius:params.circle+'%'}"
|
||||
:src="avatar"></el-image>
|
||||
</template>
|
||||
</el-image>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import avatar from "@/assets/default_avatar.png"
|
||||
|
||||
const props = defineProps({
|
||||
displayType: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
columnProp: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},params: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
watch(props.params,(val)=>{
|
||||
props.params=val
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="top-dialog">
|
||||
<el-dialog v-model="isSettingImageVisited" title="图片设置" width="700px">
|
||||
<el-form label-width="70px" :model="imageSettingParams">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="设置方式" prop="method">
|
||||
<el-radio-group v-model="imageSettingParams.imgSettingMethod" @change="imgSettingMethodChange">
|
||||
<el-radio-button label="default">默认</el-radio-button>
|
||||
<el-radio-button label="custom">自定义</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<template v-if="imageSettingParams.imgSettingMethod==='custom'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="宽度" prop="width">
|
||||
<el-input-number v-model="imageSettingParams.width" min="20"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="高度" prop="height">
|
||||
<el-input-number v-model="imageSettingParams.height" min="20"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="边框圆角" prop="circle">
|
||||
<el-input-number v-model="imageSettingParams.circle" min="0" max="50"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="示例">
|
||||
<template v-if="imageSettingParams.imgSettingMethod === 'custom'">
|
||||
<el-image :src="defaultAvatar"
|
||||
:style="{height: imageSettingParams.width+'px',height: imageSettingParams.height+'px',borderRadius:imageSettingParams.circle+'%'}"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-image :src="defaultAvatar"/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {reactive} from "vue";
|
||||
|
||||
const imageSettingParams = reactive({
|
||||
imgSettingMethod: "default",
|
||||
width: 150,
|
||||
height: 150,
|
||||
circle:0
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
352
src/views/custom-query/topo/index.vue
Normal file
352
src/views/custom-query/topo/index.vue
Normal file
@@ -0,0 +1,352 @@
|
||||
<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="1"/>
|
||||
<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="操作" align="center">
|
||||
<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="'拓扑图查询'"
|
||||
@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>
|
||||
</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=='新增拓扑'">
|
||||
<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="请输入topo名称"></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 {getTopoList, delTopo, addTopo, editTopo, getTopoDetails} from "@/api/custom-query/topo";
|
||||
import {getDataSourceOption} from "@/api/custom-query/datamodel";
|
||||
import {topoDownLine} from "@/api/custom-query/topo-search";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
const router = useRouter()
|
||||
const queryParams = reactive({
|
||||
preview: '',
|
||||
publish: '',
|
||||
type: '',
|
||||
uqName: '',
|
||||
})
|
||||
const dataSourceOption = ref()
|
||||
const queryForm = ref([])
|
||||
const list = ref([])
|
||||
const uqIds = ref([])
|
||||
const uqNameList = 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: '请输入topo名称', trigger: 'blur'}],
|
||||
uqDescribe: [{required: true, message: '请输入描述', trigger: 'blur'}],
|
||||
})
|
||||
//获取数据源select的option
|
||||
const getOption = () => {
|
||||
console.log('getOpeion')
|
||||
getDataSourceOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
dataSourceOption.value = res.data
|
||||
// getList();
|
||||
}
|
||||
})
|
||||
}
|
||||
const getDataSourceOptionItem = (dataSourceId) => {
|
||||
if(dataSourceOption.value===undefined)return;
|
||||
for (let item of dataSourceOption.value) {
|
||||
if (item.value === dataSourceId) {
|
||||
return item.label;
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
//获取数据
|
||||
const getList = async () => {
|
||||
console.log('getList')
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getTopoList(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
|
||||
}
|
||||
|
||||
}
|
||||
//添加
|
||||
const handleAdd = async () => {
|
||||
formRules.value.dataSourceId[0].required = true
|
||||
restFrom()
|
||||
title.value = "新增拓扑"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//修改
|
||||
const handleEdit = async (id) => {
|
||||
restFrom()
|
||||
getTopoDetails(id).then(res => {
|
||||
console.log('详情', res.data)
|
||||
if (res.code === 1000) {
|
||||
formRules.value.dataSourceId[0].required = false
|
||||
form.value = res.data
|
||||
title.value = "编辑拓扑"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//设计
|
||||
const handleDesign = (row) => {
|
||||
router.push({path: `/topo/design/${row.id}`})
|
||||
}
|
||||
//下线
|
||||
const handleDownLine = (row) => {
|
||||
ElMessageBox.confirm(`确认撤销名称为${row.uqName}的数据吗? 撤销后分配的查询权限将全部失效`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
customClass: 'red-warning'
|
||||
}).then(() => {
|
||||
topoDownLine(row.id).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//查看
|
||||
const handleView=(id)=>{
|
||||
//router.push({path: `/custom/query/page/${id}`})
|
||||
}
|
||||
//单个删除
|
||||
const handleDelete = async (id) => {
|
||||
delTopo(id).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//多删
|
||||
const handleMoreDelete = (uqIds) => {
|
||||
ElMessageBox.confirm(`确认删除名称为${uqNameList.value}的拓扑图查询吗?`, '系统提示', {
|
||||
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 === '新增拓扑') {
|
||||
addTopo(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
editTopo(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>
|
||||
81
src/views/custom-query/topo/top/behavior/click-er-edge.js
Normal file
81
src/views/custom-query/topo/top/behavior/click-er-edge.js
Normal file
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2021/5/14 23:20
|
||||
* @email: clay@hchyun.com
|
||||
* @description: node er图点击事件
|
||||
*/
|
||||
let vm = null;
|
||||
|
||||
const sendThis = (_this) => {
|
||||
vm = _this;
|
||||
};
|
||||
|
||||
export default {
|
||||
sendThis,
|
||||
name: "click-er-edge",
|
||||
options: {
|
||||
getEvents() {
|
||||
return {
|
||||
"edge:click": "onEdgeClick",
|
||||
"edge:contextmenu": "onEdgeRightClick"
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 点击连线函数
|
||||
* @param event
|
||||
*/
|
||||
onEdgeClick(event) {
|
||||
let clickEdge = event.item;
|
||||
clickEdge.setState("selected", !clickEdge.hasState("selected"));
|
||||
this.singleClickEdge(event)
|
||||
// vm.editCurrentFocus("edge")
|
||||
// this.updateVmData(event);
|
||||
},
|
||||
/**
|
||||
* 右键点击线
|
||||
* @param event
|
||||
*/
|
||||
onEdgeRightClick(event) {
|
||||
this.singleClickEdge(event)
|
||||
},
|
||||
singleClickEdge(event) {
|
||||
let graph = vm.getGraph();
|
||||
let clickEdge = event.item;
|
||||
let clickEdgeModel = toRaw(clickEdge.getModel());
|
||||
let selectedEdges = graph.findAllByState("edge", "selected");
|
||||
// 如果当前点击节点不是之前选中的单个节点，才进行下面的处理
|
||||
if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) {
|
||||
// 先取消所有节点的选中状态
|
||||
graph.findAllByState("edge", "selected").forEach(edge => {
|
||||
edge.setState("selected", false);
|
||||
});
|
||||
// 再添加该节点的选中状态
|
||||
clickEdge.setState("selected", true);
|
||||
vm.editCurrentFocus("edge")
|
||||
this.updateVmData(event);
|
||||
}else {
|
||||
vm.editCurrentFocus("edge")
|
||||
this.updateVmData(event);
|
||||
}
|
||||
},
|
||||
updateVmData(event) {
|
||||
// 更新vm的data: selectedEdge 和 selectedEdgeParams
|
||||
let clickEdge = event.item;
|
||||
if (clickEdge.hasState("selected")) {
|
||||
let clickEdgeModel = toRaw(clickEdge.getModel());
|
||||
vm.editSelectedEdge(clickEdge)
|
||||
let edgeAppConfig = { ...vm.getEdgeAppConfig() };
|
||||
Object.keys(edgeAppConfig).forEach(function(key) {
|
||||
edgeAppConfig[key] = "";
|
||||
});
|
||||
vm.editSelectedEdgeParams({
|
||||
label: clickEdgeModel.label || "",
|
||||
relationalItem: clickEdgeModel.relationalItem,
|
||||
sourceColumn: clickEdgeModel.sourceColumn,
|
||||
targetColumn: clickEdgeModel.targetColumn,
|
||||
appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig }
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
157
src/views/custom-query/topo/top/behavior/click-er-node.js
Normal file
157
src/views/custom-query/topo/top/behavior/click-er-node.js
Normal file
@@ -0,0 +1,157 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2021/5/14 23:20
|
||||
* @email: clay@hchyun.com
|
||||
* @description: node er图点击事件
|
||||
*/
|
||||
const isInBBox = (point, bbox) => {
|
||||
const {
|
||||
x,
|
||||
y
|
||||
} = point;
|
||||
const {
|
||||
minX,
|
||||
minY,
|
||||
maxX,
|
||||
maxY
|
||||
} = bbox;
|
||||
|
||||
return x < maxX && x > minX && y > minY && y < maxY;
|
||||
};
|
||||
|
||||
let vm = null;
|
||||
const sendThis = (_this) => {
|
||||
vm = _this;
|
||||
};
|
||||
|
||||
export default {
|
||||
sendThis,
|
||||
name: "click-er-node",
|
||||
options: {
|
||||
getEvents() {
|
||||
return {
|
||||
wheel: "scroll",
|
||||
"node:click": "onNodeClick",
|
||||
"node:contextmenu": "onNodeRightClick",
|
||||
"canvas:click": "onCanvasClick"
|
||||
};
|
||||
},
|
||||
//滚动事件监听
|
||||
scroll(event) {
|
||||
//禁止滚动的默认事件
|
||||
event.preventDefault();
|
||||
let graph = vm.getGraph()
|
||||
// ↓|| vm.getClickCtrlValue() === true
|
||||
if (vm.getClickCtrlValue()) {
|
||||
if (graph && !graph.destroyed) {
|
||||
if (event.deltaY > 0) {
|
||||
graph.zoom(0.8, {x: event.x, y: event.y})
|
||||
} else {
|
||||
graph.zoom(1.2, {x: event.x, y: event.y})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
//graph.getNodes()获取 Combo 中所有子节点
|
||||
const nodes = graph.getNodes().filter((n) => {
|
||||
const bbox = n.getBBox();//获取元素的包围盒。
|
||||
//将 clientX/clientY 坐标系的坐标值转换为 pointX/pointY 的坐标值。
|
||||
return isInBBox(graph.getPointByClient(event.clientX, event.clientY), bbox);
|
||||
});
|
||||
if (nodes) {
|
||||
nodes.forEach((node) => {
|
||||
const model = node.getModel();
|
||||
if (model.columns.length < 9) {
|
||||
return;
|
||||
}
|
||||
const idx = model.startIndex || 0; // 获取model的startIndex属性，如果没有则使用0赋值给变量idx
|
||||
// this.start = idx; // 这里将idx赋值给变量this.start
|
||||
let startX = model.startX || 0.5; // 获取model的startX属性，如果没有则使用0.5赋值给变量startX
|
||||
//正值向下滚动，负值向上滚动
|
||||
let startIndex = idx + event.deltaY * 0.018; // 计算startIndex值，将idx与event的deltaY属性值乘以0.018相加赋值给变量startIndex
|
||||
if ((model.columns.length - idx) < 10 && startIndex > idx) { // 判断条件，判断model的columns数组的长度减去idx的值是否小于10，并且startIndex的值是否大于idx
|
||||
return; // 如果条件满足，则结束函数的执行
|
||||
}
|
||||
startX -= event.deltaX;//deltaX 属性在向右滚动时返回正值，向左滚动时返回负值，否则为 0。
|
||||
|
||||
//对startIndex进行边界检查和调整
|
||||
if (startIndex < 0) {
|
||||
startIndex = 0;
|
||||
}
|
||||
if (startX > 0) {
|
||||
startX = 0;
|
||||
}
|
||||
if (startIndex > model.columns.length - 1) {
|
||||
startIndex = model.columns.length - 1;
|
||||
}
|
||||
|
||||
graph.update(node, {
|
||||
startIndex,
|
||||
startX
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
//节点左键点击监听
|
||||
onNodeClick(event) {
|
||||
if (event) {
|
||||
vm.editCurrentFocus("node")
|
||||
vm.editRightMenuShow(false)
|
||||
this.shrinkage(event);
|
||||
this.updateVmData(event);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* todo 右键打开设置面板
|
||||
* @param event
|
||||
*/
|
||||
onNodeRightClick(event) {
|
||||
this.updateVmData(event);
|
||||
vm.editTableColumnEditOpen(true)
|
||||
},
|
||||
onCanvasClick() {
|
||||
vm.editCurrentFocus("canvas")
|
||||
vm.editRightMenuShow(false)
|
||||
},
|
||||
updateVmData(event) {
|
||||
let clickNode = event.item;
|
||||
clickNode.setState("selected", true);
|
||||
vm.editSelectedNode(clickNode);
|
||||
let clickNodeModel = toRaw(clickNode.getModel());
|
||||
let nodeAppConfig = {...vm.getNodeAppConfig()};
|
||||
Object.keys(nodeAppConfig).forEach(function (key) {
|
||||
nodeAppConfig[key] = "";
|
||||
});
|
||||
vm.editSelectedNodeParams({
|
||||
label: clickNodeModel.label || "",
|
||||
columns: clickNodeModel.columns,
|
||||
appConfig: {...nodeAppConfig, ...clickNodeModel.appConfig}
|
||||
})
|
||||
},
|
||||
shrinkage(e) {
|
||||
if (!e.item) {
|
||||
return;
|
||||
}
|
||||
const graph = vm.getGraph();
|
||||
const name=e.shape.get("name")
|
||||
if (name === "collapse") {
|
||||
graph.updateItem(e.item, {
|
||||
collapsed: true,
|
||||
size: [300, 50],
|
||||
height: 44
|
||||
});
|
||||
setTimeout(() => graph.layout(), 100);
|
||||
} else if (name === "expand") {
|
||||
graph.updateItem(e.item, {
|
||||
collapsed: false,
|
||||
size: [300, 500],
|
||||
height: 316
|
||||
});
|
||||
setTimeout(() => graph.layout(), 100);
|
||||
}
|
||||
// else {
|
||||
// const model = e.item.getModel();
|
||||
// }
|
||||
},
|
||||
}
|
||||
};
|
||||
232
src/views/custom-query/topo/top/behavior/drag-add-edge.js
Normal file
232
src/views/custom-query/topo/top/behavior/drag-add-edge.js
Normal file
@@ -0,0 +1,232 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/16
|
||||
* @description: edit mode: 通过拖拽节点上的锚点添加连线
|
||||
*/
|
||||
import utils from "../../utils";
|
||||
import theme from "../theme";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
// 用来获取调用此js的vue组件实例（this）
|
||||
let vm = null;
|
||||
|
||||
const sendThis = (_this) => {
|
||||
vm = _this;
|
||||
};
|
||||
|
||||
export default {
|
||||
sendThis, // 暴露函数
|
||||
name: "drag-add-edge",
|
||||
options: {
|
||||
getEvents() {
|
||||
return {
|
||||
"node:mousedown": "onNodeMousedown",
|
||||
"node:mouseup": "onNodeMouseup",
|
||||
"edge:mouseup": "onEdgeMouseup",
|
||||
"mousemove": "onMousemove"
|
||||
};
|
||||
},
|
||||
onNodeMousedown(event) {
|
||||
let self = this;
|
||||
// 交互过程中的信息
|
||||
self.evtInfo = {
|
||||
action: null,
|
||||
node: event.item,
|
||||
target: event.target,
|
||||
};
|
||||
if (self.evtInfo.target && self.evtInfo.target.attrs.name) {
|
||||
// todo...未来可能针对锚点增加其它功能(例如拖拽调整大小)
|
||||
switch (self.evtInfo.target.attrs.name) {
|
||||
case "anchor"://点击锚点中间
|
||||
self.evtInfo.action = "drawEdge";
|
||||
break;
|
||||
case "anchorBg"://点击锚点
|
||||
self.evtInfo.action = "drawEdge";
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (self.evtInfo && self.evtInfo.action) {
|
||||
self[self.evtInfo.action].start.call(self, event);
|
||||
}
|
||||
},
|
||||
onNodeMouseup(event) {
|
||||
let self = this;
|
||||
if (self.evtInfo && self.evtInfo.action) {
|
||||
self[self.evtInfo.action].stop.call(self, event);
|
||||
}
|
||||
},
|
||||
onEdgeMouseup(event) {
|
||||
let self = this;
|
||||
if (self.evtInfo && self.evtInfo.action === "drawEdge") {
|
||||
self[self.evtInfo.action].stop.call(self, event);
|
||||
}
|
||||
},
|
||||
onMousemove(event) {
|
||||
let self = this;
|
||||
if (self.evtInfo && self.evtInfo.action) {
|
||||
self[self.evtInfo.action].move.call(self, event);
|
||||
}
|
||||
},
|
||||
drawEdge: {
|
||||
isMoving: false,
|
||||
currentLine: null,
|
||||
start: function (event) {
|
||||
let self = this;
|
||||
let themeStyle = theme.defaultStyle; // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||
|
||||
// ************** 暂存【连线】前的数据状态 start **************
|
||||
let graph = vm.getGraph();
|
||||
self.historyData = JSON.stringify(graph.save());
|
||||
// ************** 暂存【连线】前的数据状态 end **************
|
||||
|
||||
let sourceAnchor = self.evtInfo.node.getAnchorPoints();
|
||||
let sourceNodeModel = toRaw(self.evtInfo.node.getModel());
|
||||
// 锚点数据
|
||||
let anchorPoints = self.evtInfo.node.getAnchorPoints();
|
||||
// 处理线条目标点
|
||||
if (anchorPoints && anchorPoints.length) {
|
||||
// 获取距离指定坐标最近的一个锚点
|
||||
sourceAnchor = self.evtInfo.node.getLinkPoint({
|
||||
x: event.x,
|
||||
y: event.y
|
||||
})
|
||||
}
|
||||
// let relational = vm.getRelationalMap().get(sourceNodeModel.tableId)
|
||||
let relational = vm.getRelationalMap().map(item => {
|
||||
if (item.mainId === sourceNodeModel.tableId) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
//item.columnName+':'+item.columnComment
|
||||
let columns = []
|
||||
sourceNodeModel.columns.forEach(item => {
|
||||
let column = {
|
||||
columnName: item.columnName,
|
||||
columnComment: item.columnComment
|
||||
}
|
||||
columns.push(column)
|
||||
})
|
||||
self.drawEdge.currentLine = self.graph.addItem("edge", {
|
||||
// id: G6.Util.uniqueId(), // 这种生成id的方式有bug，会重复
|
||||
id: utils.generateUUID(),
|
||||
// 起始节点
|
||||
source: sourceNodeModel.id,
|
||||
sourceColumn: columns,
|
||||
sourceAnchor: sourceAnchor ? sourceAnchor.anchorIndex : "",
|
||||
// 终止节点/位置
|
||||
relational: relational,
|
||||
target: {
|
||||
x: event.x,
|
||||
y: event.y
|
||||
},
|
||||
type: self.graph.$C.edge.type || "top-cubic",
|
||||
style: themeStyle.edgeStyle.default || self.graph.$C.edge.style
|
||||
});
|
||||
self.drawEdge.isMoving = true;
|
||||
},
|
||||
move(event) {
|
||||
let self = this;
|
||||
if (self.drawEdge.isMoving && self.drawEdge.currentLine) {
|
||||
self.graph.updateItem(self.drawEdge.currentLine, {
|
||||
target: {
|
||||
x: event.x,
|
||||
y: event.y
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
stop(event) {
|
||||
let self = this;
|
||||
if (self.drawEdge.isMoving) {
|
||||
if (self.drawEdge.currentLine === event.item) {
|
||||
// 画线过程中点击则移除当前画线
|
||||
self.graph.removeItem(event.item);
|
||||
} else {
|
||||
let targetNode = event.item;
|
||||
let targetNodeModel = toRaw(targetNode.getModel());//节点的数据模型
|
||||
let targetAnchor = null;
|
||||
// 锚点数据
|
||||
let anchorPoints = targetNode.getAnchorPoints();
|
||||
// 处理线条目标点
|
||||
let relational = self.drawEdge.currentLine.getModel().relational//边的数据模型，start函数中定义的包含该节点的关联关系
|
||||
let starts = false;
|
||||
let relationalItem = null;
|
||||
if (relational) {
|
||||
relational.map(item => {
|
||||
if (item) {
|
||||
if (item.childId === targetNodeModel.tableId) {
|
||||
starts = true
|
||||
relationalItem = item
|
||||
} else {
|
||||
starts = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// 去掉关系验证
|
||||
// starts = true
|
||||
if (starts) {
|
||||
if (anchorPoints && anchorPoints.length > 0) {
|
||||
// 获取距离指定坐标最近的一个锚点
|
||||
targetAnchor = targetNode.getLinkPoint({
|
||||
x: event.x,
|
||||
y: event.y
|
||||
});
|
||||
}
|
||||
let columns = []
|
||||
targetNodeModel.columns.forEach(item => {
|
||||
let column = {
|
||||
columnName: item.columnName,
|
||||
columnComment: item.columnComment
|
||||
}
|
||||
columns.push(column)
|
||||
})
|
||||
self.graph.updateItem(self.drawEdge.currentLine, {
|
||||
target: targetNodeModel.id,
|
||||
relationalItem: relationalItem,
|
||||
targetAnchor: targetAnchor ? targetAnchor.anchorIndex : "",
|
||||
targetColumn: columns,
|
||||
});
|
||||
|
||||
// ************** 记录historyData的逻辑 start **************
|
||||
if (self.historyData) {
|
||||
let graph = self.graph;
|
||||
// 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
|
||||
// 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
|
||||
if (vm.getUndoCount() > 0) {
|
||||
vm.editHistoryIndex(vm.getHistoryIndex() - vm.getUndoCount()); // 此时的historyIndex应当更新为【撤销】后所在的索引位置
|
||||
for (let i = 1; i <= vm.getUndoCount(); i++) {
|
||||
let key = `graph_history_${vm.getHistoryIndex() + i}`;
|
||||
vm.removeHistoryData(key);
|
||||
}
|
||||
vm.editUndoCount(0)
|
||||
} else {
|
||||
// 正常顺序执行的情况，记录拖拽线 前的数据状态
|
||||
let key = `graph_history_${vm.getHistoryIndex()}`;
|
||||
vm.addHistoryData(key, self.historyData);
|
||||
}
|
||||
// 记录拖线后的数据状态
|
||||
const index = vm.getHistoryIndex() + 1;
|
||||
vm.editHistoryIndex(index);
|
||||
let key = `graph_history_${index}`;
|
||||
let currentData = JSON.stringify(graph.save());
|
||||
vm.addHistoryData(key, currentData);
|
||||
}
|
||||
} else {
|
||||
if (self.evtInfo.node.getModel().tableId === targetNodeModel.tableId) {
|
||||
ElMessage.warning("不可连接自身")
|
||||
} else {
|
||||
ElMessage.warning("两表之间无关联关系")
|
||||
}
|
||||
self.graph.removeItem(self.drawEdge.currentLine);
|
||||
}
|
||||
// ************** 记录historyData的逻辑 end **************
|
||||
}
|
||||
}
|
||||
self.drawEdge.currentLine = null;
|
||||
self.drawEdge.isMoving = false;
|
||||
self.evtInfo = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
57
src/views/custom-query/topo/top/behavior/drag-event-edit.js
Normal file
57
src/views/custom-query/topo/top/behavior/drag-event-edit.js
Normal file
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/16
|
||||
* @description: edit mode: 鼠标拖动节点的交互(记录拖拽前后的数据，用于【撤销】和【重做】)
|
||||
*/
|
||||
|
||||
// 用来获取调用此js的vue组件实例（this）
|
||||
let vm = null
|
||||
let historyData = null
|
||||
|
||||
const sendThis = (_this) => {
|
||||
vm = _this
|
||||
}
|
||||
|
||||
export default {
|
||||
sendThis, // 暴露函数
|
||||
name: 'drag-event-edit',
|
||||
options: {
|
||||
getEvents() {
|
||||
return {
|
||||
'node:dragstart': 'onNodeDragstart',
|
||||
'node:dragend': 'onNodeDragend'
|
||||
}
|
||||
},
|
||||
onNodeDragstart() {
|
||||
let graph = vm.getGraph()
|
||||
if(graph.cfg){
|
||||
historyData = JSON.stringify(graph.save())
|
||||
}
|
||||
},
|
||||
onNodeDragend() {
|
||||
if (historyData) {
|
||||
let graph = vm.getGraph()
|
||||
// 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
|
||||
// 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
|
||||
if (vm.getUndoCount() > 0) {
|
||||
vm.editHistoryIndex( vm.getHistoryIndex() - vm.getUndoCount()) // 此时的historyIndex应当更新为【撤销】后所在的索引位置
|
||||
for (let i = 1; i <= vm.getUndoCount(); i++) {
|
||||
let key = `graph_history_${vm.getHistoryIndex() + i}`
|
||||
vm.removeHistoryData(key)
|
||||
}
|
||||
vm.editUndoCount(0);
|
||||
} else {
|
||||
// 正常顺序执行的情况，记录拖拽前的数据状态
|
||||
let key = `graph_history_${vm.getHistoryIndex()}`
|
||||
vm.addHistoryData(key, historyData)
|
||||
}
|
||||
// 记录拖拽后的数据状态
|
||||
const index=vm.getHistoryIndex()+ 1;
|
||||
vm.editHistoryIndex(index);
|
||||
let key = `graph_history_${index}`
|
||||
let currentData = JSON.stringify(graph.save())
|
||||
vm.addHistoryData(key, currentData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
src/views/custom-query/topo/top/behavior/hover-event-edit.js
Normal file
66
src/views/custom-query/topo/top/behavior/hover-event-edit.js
Normal file
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/16
|
||||
* @description: edit mode: 悬浮交互
|
||||
*/
|
||||
// 用来获取调用此js的vue组件实例（this）
|
||||
let vm = null;
|
||||
let hourItem = null;
|
||||
const sendThis = (topo) => {
|
||||
vm = topo;
|
||||
};
|
||||
export default {
|
||||
sendThis, // 暴露函数
|
||||
name: "hover-event-edit",
|
||||
options: {
|
||||
getEvents() {
|
||||
return {
|
||||
"node:mouseover": "onNodeHover",
|
||||
// "node:mouseout": "onNodeOut",
|
||||
// "mouseleave":"onNodeLeave",
|
||||
};
|
||||
},
|
||||
onNodeHover(event) {
|
||||
let graph = vm.getGraph();
|
||||
let hoverNode = event.item;
|
||||
const name = event.shape.get("name");//todo ??
|
||||
const item = event.item;
|
||||
if (name && name.startsWith("item")) {
|
||||
graph.updateItem(item, {//更新元素，包括更新数据、样式等
|
||||
selectedIndex: Number(name.split("-")[1])
|
||||
});
|
||||
} else {
|
||||
graph.updateItem(item, {
|
||||
selectedIndex: NaN
|
||||
});
|
||||
}
|
||||
if (name && name.startsWith("marker")) {
|
||||
hoverNode.setState("hover", true, graph);
|
||||
hourItem=hoverNode;
|
||||
}else {
|
||||
if (hourItem!=null){
|
||||
hourItem.setState("hover", false)
|
||||
}
|
||||
}
|
||||
},
|
||||
// onNodeOut(event) {
|
||||
// console.log('移出节点')
|
||||
// const name = event.shape.get("name");
|
||||
// let hoverNode = event.item;
|
||||
// console.log('name',name)
|
||||
// if (name && name.startsWith("marker")) {
|
||||
// hoverNode.setState("hover", false);
|
||||
// }
|
||||
// if (hourItem!=null){
|
||||
// hourItem.setState("hover", false)
|
||||
// }
|
||||
// hoverNode.setState("hover", false);
|
||||
// },
|
||||
// onNodeLeave(event) {
|
||||
// console.log('移出节点2')
|
||||
// if (hourItem!=null){
|
||||
// hourItem.setState("hover", false)
|
||||
// }
|
||||
// }
|
||||
}
|
||||
};
|
||||
30
src/views/custom-query/topo/top/behavior/index.js
Normal file
30
src/views/custom-query/topo/top/behavior/index.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/16
|
||||
* @description: register behaviors
|
||||
*/
|
||||
|
||||
import dragAddEdge from './drag-add-edge'
|
||||
import hoverEventEdit from './hover-event-edit'
|
||||
import dragEventEdit from './drag-event-edit'
|
||||
import keyupEventEdit from './keyup-event-edit'
|
||||
import clickErNode from './click-er-node'
|
||||
import clickErEdge from './click-er-edge'
|
||||
|
||||
const obj = {
|
||||
dragAddEdge,
|
||||
hoverEventEdit,
|
||||
dragEventEdit,
|
||||
keyupEventEdit,
|
||||
clickErNode,
|
||||
clickErEdge
|
||||
}
|
||||
|
||||
export default {
|
||||
obj,
|
||||
register(G6) {
|
||||
Object.values(obj).map(item => {
|
||||
G6.registerBehavior(item.name, item.options)
|
||||
})
|
||||
}
|
||||
}
|
||||
67
src/views/custom-query/topo/top/behavior/keyup-event-edit.js
Normal file
67
src/views/custom-query/topo/top/behavior/keyup-event-edit.js
Normal file
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/16
|
||||
* @description: edit mode: 键盘事件的交互，主要是删除节点和连线(记录删除前后的数据，用于【撤销】和【重做】)
|
||||
*/
|
||||
|
||||
// 用来获取调用此js的vue组件实例（this）
|
||||
let vm = null;
|
||||
|
||||
const sendThis = (_this) => {
|
||||
vm = _this;
|
||||
};
|
||||
|
||||
export default {
|
||||
sendThis, // 暴露函数
|
||||
name: "keyup-event-edit",
|
||||
options: {
|
||||
getEvents() {
|
||||
return {
|
||||
"keyup": "onKeyup",
|
||||
"keydown": "onKeydown",
|
||||
};
|
||||
},
|
||||
onKeyup(event) {
|
||||
let graph = vm.getGraph();
|
||||
let selectedNodes = graph.findAllByState("node", "selected");
|
||||
let selectedEdges = graph.findAllByState("edge", "selected");
|
||||
//按住键盘delete-46删除功能
|
||||
if (event.keyCode === 46 && (selectedNodes.length > 0 || selectedEdges.length > 0)) {
|
||||
// ************** 记录【删除】前的数据状态 start **************
|
||||
let historyData = JSON.stringify(graph.save());
|
||||
let key = `graph_history_${vm.getHistoryIndex()}`;
|
||||
vm.addHistoryData(key, historyData);
|
||||
// ************** 记录【删除】前的数据状态 end **************
|
||||
|
||||
// 开始删除
|
||||
selectedNodes.forEach(item=>graph.removeItem(item))
|
||||
selectedEdges.forEach(item=>graph.removeItem(item))
|
||||
// ************** 记录【删除】后的数据状态 start **************
|
||||
// 如果当前点过【撤销】了，拖拽节点后将取消【重做】功能
|
||||
// 重置undoCount，【删除】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
|
||||
if (vm.getUndoCount() > 0) {
|
||||
vm.editHistoryIndex( vm.getHistoryIndex() - vm.getUndoCount()); // 此时的historyIndex应当更新为【撤销】后所在的索引位置
|
||||
for (let i = 1; i <= vm.getUndoCount(); i++) {
|
||||
let key = `graph_history_${vm.getHistoryIndex() + i}`;
|
||||
vm.removeHistoryData(key);
|
||||
}
|
||||
vm.editUndoCount(0);
|
||||
}
|
||||
// 记录【删除】后的数据状态
|
||||
const index=vm.getHistoryIndex()+ 1;
|
||||
vm.editHistoryIndex(index);
|
||||
key = `graph_history_${index}`;
|
||||
let currentData = JSON.stringify(graph.save());
|
||||
vm.addHistoryData(key, currentData);
|
||||
// ************** 记录【删除】后的数据状态 end **************
|
||||
} else if (event.keyCode == 17) {//ctrl键，将状态传给父组件，在clickErNode里面编写功能（按住ctrl，滚动后放大缩小ER图）
|
||||
vm.editClickCtrl(false)//松开则为false
|
||||
}
|
||||
},
|
||||
onKeydown(event) {
|
||||
if (event.keyCode == 17) {//ctrl键
|
||||
vm.editClickCtrl(true)//为true时：一直按着ctrl，以实现滚轮放大缩小功能
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
91
src/views/custom-query/topo/top/components/FooterBar.vue
Normal file
91
src/views/custom-query/topo/top/components/FooterBar.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="footer-bar">
|
||||
<div class="links">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/clay" target="_blank">
|
||||
<i class="iconfont icon-github"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);">
|
||||
<i class="fab fa-weixin"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);">更新日志</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/clay/style-guide" target="_blank">代码规范</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
<ul>
|
||||
<li class="nav-item">
|
||||
<span>ClayTop 0.1.0</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>|</span>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<span>ChainCloud FE</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const home = () => {
|
||||
this.$router.push({
|
||||
path: '/'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer-bar {
|
||||
.links {
|
||||
float: left;
|
||||
|
||||
ul {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
float: right;
|
||||
|
||||
ul {
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
91
src/views/custom-query/topo/top/components/HeaderBar.vue
Normal file
91
src/views/custom-query/topo/top/components/HeaderBar.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="header-bar">
|
||||
<el-row>
|
||||
<el-col :span="8" style="text-align: left">
|
||||
<router-link to="/">
|
||||
<div class="navbar-brand">
|
||||
<img id="logo" src="@/assets/logo.svg" width="38px" height="38px" alt="ClayTop"/>
|
||||
<span> ClayTop </span>
|
||||
</div>
|
||||
</router-link>
|
||||
</el-col>
|
||||
<el-col :span="8" style="text-align: center">
|
||||
<div class="navbar-title"> </div>
|
||||
</el-col>
|
||||
<el-col :span="8" style="text-align: right">
|
||||
<div class="navbar-btns">
|
||||
<el-button type="primary" @click="home" link>首页</el-button>
|
||||
<el-button type="primary" @click="about" link>关于ClayTop</el-button>
|
||||
<el-button type="primary" @click="tutorial" link>使用教程</el-button>
|
||||
<el-button type="primary" @click="$message('敬请期待...')" link>其它</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const home = () => {
|
||||
this.$router.push({
|
||||
path: '/'
|
||||
})
|
||||
}
|
||||
const about = () => {
|
||||
this.$router.push({
|
||||
path: '/about'
|
||||
})
|
||||
}
|
||||
const tutorial = () => {
|
||||
this.$message({
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<div style="text-align: left">时间原因，暂未编写。<br/><br/>目前【开发方式】和【使用方式】可先参考 README.md。 <br/><br/><div style="text-align: right">—— by clay</div></div>',
|
||||
type: 'info',
|
||||
center: true,
|
||||
duration: 5000,
|
||||
showClose: false,
|
||||
offset: 100
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-bar {
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
margin: 0 18px 0 35px;
|
||||
/*padding: 0 0 0 8px;*/
|
||||
line-height: 22px;
|
||||
font-size: 20px;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
/*font-family: "Microsoft YaHei";*/
|
||||
color: #06080A;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.navbar-btns {
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
|
||||
.el-button:last-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.el-button--text {
|
||||
color: #06080A;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
13
src/views/custom-query/topo/top/config/edge.js
Normal file
13
src/views/custom-query/topo/top/config/edge.js
Normal file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/16
|
||||
* @description: 线条的后期设置
|
||||
*/
|
||||
|
||||
export default {
|
||||
type: 'top-cubic',
|
||||
style: {
|
||||
startArrow: false,
|
||||
endArrow: true
|
||||
}
|
||||
}
|
||||
11
src/views/custom-query/topo/top/config/index.js
Normal file
11
src/views/custom-query/topo/top/config/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/16
|
||||
* @description: 配置
|
||||
*/
|
||||
|
||||
import edge from './edge'
|
||||
|
||||
export default {
|
||||
edge
|
||||
}
|
||||
30
src/views/custom-query/topo/top/edge/base.js
Normal file
30
src/views/custom-query/topo/top/edge/base.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* @author: Clay
|
||||
* @data: 2019/07/18
|
||||
* @description: 线公共方法
|
||||
*/
|
||||
|
||||
import utils from '../../utils'
|
||||
|
||||
export default {
|
||||
draw(cfg, group) {
|
||||
const { startPoint, endPoint } = cfg
|
||||
const keyShape = group.addShape('path', {
|
||||
className: 'edge-shape',
|
||||
attrs: {
|
||||
...cfg.style,
|
||||
path: [
|
||||
['M', startPoint.x, startPoint.y],
|
||||
['L', endPoint.x, endPoint.y]
|
||||
]
|
||||
},
|
||||
name: 'edge-shape'
|
||||
})
|
||||
keyShape.attrs.endArrow = true
|
||||
return keyShape
|
||||
},
|
||||
setState(name, value, item) {
|
||||
// 设置边状态
|
||||
utils.edge.setState(name, value, item)
|
||||
}
|
||||
}
|
||||
18
src/views/custom-query/topo/top/edge/index.js
Normal file
18
src/views/custom-query/topo/top/edge/index.js
Normal file
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/18
|
||||
* @description: register edges
|
||||
*/
|
||||
|
||||
|
||||
import topCubic from './top-cubic'
|
||||
|
||||
const obj = {
|
||||
topCubic
|
||||
}
|
||||
|
||||
export default function(G6) {
|
||||
Object.values(obj).map(item => {
|
||||
G6.registerEdge(item.name, item.options, item.extendName)
|
||||
})
|
||||
}
|
||||
14
src/views/custom-query/topo/top/edge/top-cubic.js
Normal file
14
src/views/custom-query/topo/top/edge/top-cubic.js
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @author: Clay
|
||||
* @data: 2019/07/18
|
||||
* @description: 曲线
|
||||
*/
|
||||
|
||||
import base from './base'
|
||||
export default {
|
||||
name: 'top-cubic',
|
||||
extendName: 'cubic',
|
||||
options: {
|
||||
...base
|
||||
}
|
||||
}
|
||||
92
src/views/custom-query/topo/top/elements/button.vue
Normal file
92
src/views/custom-query/topo/top/elements/button.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<button
|
||||
class="cc-button"
|
||||
@click="handleClick"
|
||||
:disabled="buttonDisabled"
|
||||
:class="[
|
||||
type ? 'cc-button--' + type : '',
|
||||
buttonSize ? 'cc-button--' + buttonSize : '',
|
||||
{
|
||||
'is-disabled': buttonDisabled,
|
||||
'is-plain': plain
|
||||
}
|
||||
]"
|
||||
>
|
||||
<span><slot></slot></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {defineProps, computed} from "vue";
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const buttonSize = computed(() => {
|
||||
return props.size
|
||||
})
|
||||
const buttonDisabled = computed(() => {
|
||||
return props.disabled
|
||||
})
|
||||
|
||||
const handleClick = (evt) => {
|
||||
emit('click', evt)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cc-button {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
-webkit-transition: .1s;
|
||||
transition: .1s;
|
||||
font-weight: 500;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cc-button:focus, .cc-button:hover {
|
||||
color: #409eff;
|
||||
border-color: #c6e2ff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.cc-button--mini, .cc-button--mini.is-round {
|
||||
padding: 7px 15px;
|
||||
}
|
||||
|
||||
.cc-button--mini, .cc-button--small {
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
75
src/views/custom-query/topo/top/elements/checkbox.vue
Normal file
75
src/views/custom-query/topo/top/elements/checkbox.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="cc-checkbox" :class="{ 'checkbox-checked': checkVal }">
|
||||
<input
|
||||
id="checkbox"
|
||||
type="checkbox"
|
||||
v-model="checkVal"
|
||||
@change="handleChange"
|
||||
/>
|
||||
<label for="checkbox"></label>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref} from "vue";
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
const checkVal = ref(false);
|
||||
|
||||
const handleChange = () => {
|
||||
emit('change', checkVal.value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cc-checkbox {
|
||||
display: inline-block;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
|
||||
input[type='checkbox'] + label {
|
||||
margin: 0 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='checkbox'] + label::before {
|
||||
content: '\a0';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 2px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 0.9;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
-webkit-transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
|
||||
transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked + label::before {
|
||||
content: '\2714';
|
||||
color: #fff;
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-checked {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
75
src/views/custom-query/topo/top/elements/dropdown.vue
Normal file
75
src/views/custom-query/topo/top/elements/dropdown.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="graph-op">
|
||||
<span v-for="edgeItem in dropdownItems" @click="onItemClick(edgeItem.value, $event)">{{ edgeItem.label }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import $ from 'jquery'
|
||||
import {defineProps, ref, watch} from "vue";
|
||||
|
||||
const emit = defineEmits(['change'])
|
||||
const props = defineProps({
|
||||
dropdownItems: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
defaultIndex: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
})
|
||||
const activeIndex = ref(props.defaultIndex)
|
||||
const timeout = ref(null)
|
||||
//todo 可能有问题
|
||||
watch(() => activeIndex.value, (value) => {
|
||||
emit('change', activeIndex.value)
|
||||
})
|
||||
|
||||
const onItemClick = (index, e) => {
|
||||
let lineList = $('.iconfonts')
|
||||
for (let i = 0; i < lineList.length; i++) {
|
||||
lineList[i].style.backgroundColor = '#ffffff'
|
||||
}
|
||||
// if (e.path[0].style.backgroundColor == 'rgb(255, 255, 255)') {
|
||||
// e.path[0].style.backgroundColor = '#ebeef2'
|
||||
// }
|
||||
if (index !== activeIndex.value) {
|
||||
activeIndex.value = index
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.iconfonts {
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
}
|
||||
|
||||
.graph-op {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
span {
|
||||
width: 120px;
|
||||
margin: 0 6px;
|
||||
color: #a8a8a8;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
border: 1px solid rgba(2, 2, 2, 0);
|
||||
}
|
||||
|
||||
span:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid #E9E9E9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
17
src/views/custom-query/topo/top/elements/index.js
Normal file
17
src/views/custom-query/topo/top/elements/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/11/14
|
||||
* @description: ClayTop内部的通用组件
|
||||
*/
|
||||
|
||||
import Checkbox from './checkbox.vue'
|
||||
import Button from './button.vue'
|
||||
import Dropdown from './dropdown.vue'
|
||||
import Loading from './loading.vue'
|
||||
|
||||
export {
|
||||
Checkbox,
|
||||
Button,
|
||||
Dropdown,
|
||||
Loading
|
||||
}
|
||||
91
src/views/custom-query/topo/top/elements/loading.vue
Normal file
91
src/views/custom-query/topo/top/elements/loading.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="model-overlay">
|
||||
<div class="cc-loading">
|
||||
<svg class="circular" viewBox="0 0 50 50">
|
||||
<circle cx="25" cy="25" r="20" fill="none" stroke="#409EFF" stroke-width="5%" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="loading-text">{{ loadingText }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {defineProps} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '加载中...'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.model-overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
overflow: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cc-loading {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.circular {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
circle {
|
||||
animation: circle-dash 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes circle-dash {
|
||||
0% {
|
||||
stroke-dasharray: 1, 125;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: 100, 125;
|
||||
stroke-dashoffset: -25px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 100, 125;
|
||||
stroke-dashoffset: -125px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
position: absolute;
|
||||
top: calc(45% + 60px);
|
||||
left: calc(50% - 10px);
|
||||
color: #409EFF;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
162
src/views/custom-query/topo/top/graph/index.js
Normal file
162
src/views/custom-query/topo/top/graph/index.js
Normal file
@@ -0,0 +1,162 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/05
|
||||
* @description: 图的布局方式/图的初始化
|
||||
*/
|
||||
|
||||
// import d3 from '../plugins/d3-installer'
|
||||
import * as d3 from 'd3'
|
||||
import theme from '../theme'
|
||||
|
||||
/**
|
||||
* 图的布局方式/图的初始化
|
||||
* @type {{commonGraph: (function(*, *): G6.Graph)}}
|
||||
*/
|
||||
const initGraph = {
|
||||
/**
|
||||
* 一般布局
|
||||
* @param G6
|
||||
* @param options
|
||||
* @returns {G6.Graph}
|
||||
*/
|
||||
commonGraph: function(G6, options) {
|
||||
let graphData = options.graphData
|
||||
let themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||
// 生成G6实例
|
||||
let graph = new G6.Graph({
|
||||
plugins: options.plugins,//向 graph 注册插件
|
||||
container: options.container,//图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
|
||||
width: options.width,//指定画布宽度，单位为 'px'，默认为画布容器宽度。
|
||||
height: options.height,//指定画布高度
|
||||
// layout: {
|
||||
// type: 'random',
|
||||
// width: options.width,
|
||||
// height: options.height
|
||||
// },
|
||||
defaultNode: {//默认状态下节点的配置
|
||||
type: 'dice-er-box',
|
||||
labelCfg: {
|
||||
position: 'bottom'
|
||||
}
|
||||
},
|
||||
defaultEdge: {//默认状态下线的配置
|
||||
type: 'top-cubic',
|
||||
labelCfg: {
|
||||
position: 'center',
|
||||
autoRotate: false
|
||||
}
|
||||
},
|
||||
nodeStateStyles: themeStyle.nodeStyle,//各个状态下节点的样式
|
||||
// nodeStyle: {
|
||||
// selected: {
|
||||
// shadowColor: '#626262',
|
||||
// shadowBlur: 8,
|
||||
// shadowOffsetX: -1,
|
||||
// shadowOffsetY: 3
|
||||
// }
|
||||
// },
|
||||
edgeStateStyles:{
|
||||
edgeStyle: {
|
||||
default: {
|
||||
stroke: '#e2e2e2',
|
||||
lineWidth: 3,
|
||||
lineAppendWidth: 10
|
||||
},
|
||||
selected: {
|
||||
shadowColor: '#626262',
|
||||
shadowBlur: 3
|
||||
}
|
||||
},
|
||||
},//各个状态下边的样式
|
||||
modes: options.modes//设置画布的交互模式
|
||||
})
|
||||
// 将 read 方法分解成 data() 和 render 方法，便于整个生命周期的管理
|
||||
graph.read(graphData)
|
||||
// 渲染图
|
||||
graph.render()
|
||||
// 返回G6实例
|
||||
return graph
|
||||
},
|
||||
/**
|
||||
* 力导布局
|
||||
* @param G6
|
||||
* @param options
|
||||
* @returns {*}
|
||||
*/
|
||||
forceLayoutGraph: function(resolve, G6, options) {
|
||||
let graphData = options.graphData
|
||||
let themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||
// 生成G6实例
|
||||
let graph = new G6.Graph({
|
||||
container: options.container,
|
||||
width: options.width,
|
||||
height: options.height,
|
||||
nodeStateStyles: themeStyle.nodeStyle,
|
||||
edgeStateStyles: themeStyle.edgeStyle
|
||||
})
|
||||
// 初始化力导布局
|
||||
let simulation = d3
|
||||
.forceSimulation()
|
||||
.force(
|
||||
'link',
|
||||
d3
|
||||
.forceLink()
|
||||
.id(function(d) {
|
||||
return d.id
|
||||
})
|
||||
.distance(linkDistance)
|
||||
.strength(0.5)
|
||||
)
|
||||
.force('charge', d3.forceManyBody().strength(-500).distanceMax(500).distanceMin(100))
|
||||
.force('center', d3.forceCenter(options.width / 2, options.height / 2))
|
||||
// 定义节点数据
|
||||
simulation.nodes(graphData.nodes).on('tick', ticked)
|
||||
// 定义连线数据
|
||||
let edges = []
|
||||
for (let i = 0; i < graphData.edges.length; i++) {
|
||||
edges.push({
|
||||
id: graphData.edges[i].id,
|
||||
source: graphData.edges[i].source,
|
||||
target: graphData.edges[i].target
|
||||
})
|
||||
}
|
||||
simulation.force('link').links(edges)
|
||||
graph.data(graphData)
|
||||
graph.render()
|
||||
|
||||
function linkDistance(d) {
|
||||
return 150
|
||||
}
|
||||
|
||||
function ticked() {
|
||||
// protect: planA: 移除事件监听器 planB: 手动停止力模拟
|
||||
if (graph.destroyed) {
|
||||
// simulation.nodes(graphData.nodes).on('tick', null)
|
||||
simulation.stop()
|
||||
return
|
||||
}
|
||||
if (!graph.get('data')) {
|
||||
// 若是第一次渲染，定义数据，渲染
|
||||
graph.data(graphData)
|
||||
graph.render()
|
||||
} else {
|
||||
// 后续渲染，直接刷新所有点和边的位置
|
||||
graph.refreshPositions()
|
||||
}
|
||||
}
|
||||
|
||||
// 控制时间: 只布局10秒
|
||||
let t = setTimeout(function() {
|
||||
simulation.stop()
|
||||
resolve(graph)
|
||||
}, 10000)
|
||||
|
||||
// 判断force-layout结束
|
||||
simulation.on('end', () => {
|
||||
clearTimeout(t)
|
||||
resolve(graph)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default initGraph
|
||||
12
src/views/custom-query/topo/top/index.vue
Normal file
12
src/views/custom-query/topo/top/index.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<el-button @click="handleClick">设计</el-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
const handleClick=()=>{
|
||||
router.push('/top/edit/1')
|
||||
}
|
||||
</script>
|
||||
302
src/views/custom-query/topo/top/node/dice-er-box.js
Normal file
302
src/views/custom-query/topo/top/node/dice-er-box.js
Normal file
@@ -0,0 +1,302 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2021/5/15 0:16
|
||||
* @email: clay@hchyun.com
|
||||
* @description: draw anchor 绘制锚点
|
||||
*/
|
||||
import utils from '../../utils/index'
|
||||
|
||||
const itemHeight = 30;
|
||||
export default {
|
||||
name: 'dice-er-box',
|
||||
options: {
|
||||
/**
|
||||
* 响应节点的状态变化。
|
||||
* 在需要使用动画来响应状态变化时需要被复写
|
||||
* @param {String} name 状态名称
|
||||
* @param {Object} value 状态值
|
||||
* @param {item} item 节点
|
||||
*/
|
||||
setState(name, value, item) {
|
||||
// 设置节点状态
|
||||
utils.node.setState(name, value, item);
|
||||
// 设置锚点状态
|
||||
utils.anchor.setState(name, value, item);
|
||||
},
|
||||
draw(cfg, group) {
|
||||
const width = 250;
|
||||
const height = 316;
|
||||
const itemCount = 10;
|
||||
const boxStyle = {
|
||||
stroke: "#096DD9",
|
||||
radius: 4,
|
||||
};
|
||||
|
||||
const {
|
||||
columns = [],
|
||||
startIndex = 0,
|
||||
selectedIndex,
|
||||
collapsed,
|
||||
icon,
|
||||
} = cfg;
|
||||
const list = columns;
|
||||
const afterList = list.slice(
|
||||
Math.floor(startIndex),
|
||||
Math.floor(startIndex + itemCount - 1)
|
||||
);
|
||||
const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30;
|
||||
|
||||
//设置表名的容器
|
||||
group.addShape("rect", {
|
||||
attrs: {
|
||||
fill: boxStyle.stroke,
|
||||
height: 30,
|
||||
width,
|
||||
radius: [boxStyle.radius, boxStyle.radius, 0, 0],
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
//设置左侧字体的边距
|
||||
let fontLeft = 12;
|
||||
|
||||
// 设置图标
|
||||
if (icon && icon.show !== false) {
|
||||
group.addShape("image", {
|
||||
attrs: {
|
||||
x: 8,
|
||||
y: 8,
|
||||
height: 16,
|
||||
width: 16,
|
||||
...icon,
|
||||
},
|
||||
});
|
||||
fontLeft += 18;
|
||||
}
|
||||
|
||||
//设置表名
|
||||
group.addShape("text", {
|
||||
attrs: {
|
||||
y: 22,
|
||||
x: fontLeft,
|
||||
fill: "#fff",
|
||||
text: cfg.label,
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
},
|
||||
});
|
||||
|
||||
//设置收缩部分的容器
|
||||
group.addShape("rect", {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: collapsed ? 30 : 300,
|
||||
height: 15,
|
||||
width,
|
||||
fill: "#eee",
|
||||
radius: [0, 0, boxStyle.radius, boxStyle.radius],
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: collapsed ? "expand" : "collapse",
|
||||
});
|
||||
|
||||
//设置收缩显示字符
|
||||
group.addShape("text", {
|
||||
attrs: {
|
||||
x: width / 2 - 6,
|
||||
y: (collapsed ? 30 : 300) + 12,
|
||||
text: collapsed ? "+" : "-",
|
||||
width,
|
||||
fill: "#000",
|
||||
radius: [0, 0, boxStyle.radius, boxStyle.radius],
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: collapsed ? "expand" : "collapse",
|
||||
});
|
||||
|
||||
//设置外边框
|
||||
const keyshape = group.addShape("rect", {
|
||||
attrs: {
|
||||
name: 'border',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width,
|
||||
height: collapsed ? 45 : height,
|
||||
...boxStyle,
|
||||
},
|
||||
//是否被允许拖拽
|
||||
draggable: true
|
||||
});
|
||||
|
||||
//如果收缩状态,则返回当前图形
|
||||
if (collapsed) {
|
||||
return keyshape;
|
||||
}
|
||||
//添加空白组
|
||||
const listContainer = group.addGroup({});
|
||||
//todo 设置裁剪对象,字体加粗?
|
||||
listContainer.setClip({
|
||||
type: "rect",
|
||||
attrs: {
|
||||
x: -8,
|
||||
y: 30,
|
||||
width: width + 16,
|
||||
height: 300 - 30,
|
||||
},
|
||||
});
|
||||
listContainer.addShape({
|
||||
type: "rect",
|
||||
attrs: {
|
||||
x: 1,
|
||||
y: 30,
|
||||
width: width - 2,
|
||||
height: 300 - 30,
|
||||
fill: "#fff",
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
//如果list中的column字段超过10个
|
||||
if (list.length > itemCount) {
|
||||
const barStyle = {
|
||||
width: 4,
|
||||
padding: 0,
|
||||
boxStyle: {
|
||||
stroke: "#00000022",
|
||||
},
|
||||
innerStyle: {
|
||||
fill: "#00000022",
|
||||
},
|
||||
};
|
||||
|
||||
listContainer.addShape("rect", {
|
||||
attrs: {
|
||||
y: 30,
|
||||
x: width - barStyle.padding - barStyle.width,
|
||||
width: barStyle.width,
|
||||
height: height - 30,
|
||||
...barStyle.boxStyle,
|
||||
},
|
||||
});
|
||||
|
||||
//设置矩形高度
|
||||
const indexHeight =
|
||||
afterList.length > itemCount ?
|
||||
(afterList.length / list.length) * height :
|
||||
10;
|
||||
|
||||
listContainer.addShape("rect", {
|
||||
attrs: {
|
||||
y: 30 +
|
||||
barStyle.padding +
|
||||
(startIndex / (list.length-8)) * (height - 30),
|
||||
x: width - barStyle.padding - barStyle.width,
|
||||
width: barStyle.width,
|
||||
height: Math.min(height, indexHeight),
|
||||
...barStyle.innerStyle,
|
||||
},
|
||||
});
|
||||
}
|
||||
//渲染显示区域
|
||||
if (afterList) {
|
||||
afterList.forEach((e, i) => {
|
||||
//设置选中的列
|
||||
const isSelected = Math.floor(startIndex) + i === Number(selectedIndex);
|
||||
let {
|
||||
columnName = "", columnType,columnComment
|
||||
} = e;
|
||||
if (columnComment){
|
||||
columnName+= " : " + columnComment
|
||||
}
|
||||
if (columnType) {
|
||||
columnName += " - " + columnType;
|
||||
}
|
||||
const label = columnName.length > 26 ? columnName.slice(0, 24) + "..." : columnName;
|
||||
|
||||
listContainer.addShape("rect", {
|
||||
attrs: {
|
||||
x: 1,
|
||||
y: i * itemHeight - itemHeight / 2 + offsetY,
|
||||
width: width - 4,
|
||||
height: itemHeight,
|
||||
radius: 2,
|
||||
fill:isSelected ? "#ddd" : "#fff",
|
||||
lineWidth: 1,
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: `item-${Math.floor(startIndex) + i}-content`,
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
listContainer.addShape("text", {
|
||||
attrs: {
|
||||
x: 12,
|
||||
y: i * itemHeight + offsetY + 6,
|
||||
text: label,
|
||||
fontSize: 12,
|
||||
fill: "#000",
|
||||
fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
|
||||
full: e,
|
||||
fontWeight: isSelected ? 500 : 100,
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: `item-${Math.floor(startIndex) + i}`,
|
||||
});
|
||||
|
||||
//未来设置字段之间有锚点
|
||||
// if (!cfg.hideDot) {
|
||||
// utils.anchor.erDrawLeft(group, label, 0, i * itemHeight + offsetY)
|
||||
// utils.anchor.erDrawLeft(group,label,width,i * itemHeight + offsetY)
|
||||
// listContainer.addShape("marker", {
|
||||
// attrs: {
|
||||
// x: 0,
|
||||
// y: i * itemHeight + offsetY,
|
||||
// r: 3,
|
||||
// stroke: boxStyle.stroke,
|
||||
// fill: "white",
|
||||
// radius: 2,
|
||||
// lineWidth: 1,
|
||||
// cursor: "crosshair",
|
||||
// },
|
||||
//
|
||||
// name: 'marker-shape'
|
||||
// });
|
||||
// listContainer.addShape("marker", {
|
||||
// attrs: {
|
||||
// x: width,
|
||||
// y: i * itemHeight + offsetY,
|
||||
// r: 3,
|
||||
// stroke: boxStyle.stroke,
|
||||
// fill: "white",
|
||||
// radius: 2,
|
||||
// lineWidth: 1,
|
||||
// cursor: "crosshair",
|
||||
//
|
||||
//
|
||||
// },
|
||||
// name: 'marker-shape'
|
||||
// });
|
||||
// }
|
||||
});
|
||||
}
|
||||
return keyshape;
|
||||
},
|
||||
// getAnchorPoints() {
|
||||
// return [
|
||||
// [0, 0],
|
||||
// [1, 0],
|
||||
// ];
|
||||
// },
|
||||
// 绘制后附加锚点
|
||||
afterDraw(cfg, group) {
|
||||
// 绘制锚点
|
||||
utils.anchor.drawMark(cfg, group)
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
20
src/views/custom-query/topo/top/node/index.js
Normal file
20
src/views/custom-query/topo/top/node/index.js
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/05
|
||||
* @description: register nodes
|
||||
*/
|
||||
|
||||
|
||||
import diceErBox from './dice-er-box'
|
||||
const obj = {
|
||||
diceErBox
|
||||
}
|
||||
|
||||
export default {
|
||||
obj,
|
||||
register(G6) {
|
||||
Object.values(obj).map(item => {
|
||||
G6.registerNode(item.name, item.options, item.extendName)
|
||||
})
|
||||
}
|
||||
}
|
||||
177
src/views/custom-query/topo/top/theme/dark-style.js
Normal file
177
src/views/custom-query/topo/top/theme/dark-style.js
Normal file
@@ -0,0 +1,177 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/11/20
|
||||
* @description: dark style
|
||||
*/
|
||||
|
||||
export default {
|
||||
// 节点样式
|
||||
nodeStyle: {
|
||||
default: {
|
||||
stroke: '#CED4D9',
|
||||
fill: 'transparent',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 4,
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(13, 26, 38, 0.08)',
|
||||
lineWidth: 1,
|
||||
radius: 4,
|
||||
strokeOpacity: 0.7
|
||||
},
|
||||
selected: {
|
||||
shadowColor: '#ff240b',
|
||||
shadowBlur: 4,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0
|
||||
// shadowColor: '#626262',
|
||||
// shadowBlur: 8,
|
||||
// shadowOffsetX: -1,
|
||||
// shadowOffsetY: 3
|
||||
},
|
||||
unselected: {
|
||||
shadowColor: ''
|
||||
}
|
||||
},
|
||||
//todo 节点标签样式??修改不起
|
||||
nodeLabelCfg: {
|
||||
positions: 'center',
|
||||
style: {
|
||||
fill: '#fff'
|
||||
}
|
||||
},
|
||||
// 连线样式
|
||||
edgeStyle: {
|
||||
default: {
|
||||
stroke: '#000000',
|
||||
lineWidth: 2,
|
||||
strokeOpacity: 0.92,
|
||||
lineAppendWidth: 10
|
||||
// endArrow: true
|
||||
},
|
||||
active: {
|
||||
shadowColor: 'red',
|
||||
shadowBlur: 4,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0
|
||||
},
|
||||
inactive: {
|
||||
shadowColor: ''
|
||||
},
|
||||
selected: {
|
||||
shadowColor: '#ff240b',
|
||||
shadowBlur: 4,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0
|
||||
},
|
||||
unselected: {
|
||||
shadowColor: ''
|
||||
}
|
||||
},
|
||||
// 锚点样式
|
||||
anchorStyle: {
|
||||
default: {
|
||||
radius: 3,
|
||||
symbol: 'circle',
|
||||
fill: '#FFFFFF',
|
||||
fillOpacity: 0,
|
||||
stroke: '#1890FF',
|
||||
strokeOpacity: 0,
|
||||
cursor: 'crosshair'
|
||||
},
|
||||
hover: {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1
|
||||
},
|
||||
unhover: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
},
|
||||
active: {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1
|
||||
},
|
||||
inactive: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
}
|
||||
},
|
||||
// 锚点背景样式
|
||||
anchorBgStyle: {
|
||||
default: {
|
||||
radius: 10,
|
||||
symbol: 'circle',
|
||||
fill: '#1890FF',
|
||||
fillOpacity: 0,
|
||||
stroke: '#1890FF',
|
||||
strokeOpacity: 0,
|
||||
cursor: 'crosshair'
|
||||
},
|
||||
hover: {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1
|
||||
},
|
||||
unhover: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
},
|
||||
active: {
|
||||
fillOpacity: 0.3,
|
||||
strokeOpacity: 0.5
|
||||
},
|
||||
inactive: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
nodeActivedOutterStyle: { lineWidth: 0 },
|
||||
groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||
nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||
edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
|
||||
nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
|
||||
groupActivedStyle: { stroke: '#1890FF' },
|
||||
edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
|
||||
nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
|
||||
groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
|
||||
|
||||
groupBackgroundPadding: [40, 10, 10, 10],
|
||||
groupLabelOffsetX: 10,
|
||||
groupLabelOffsetY: 10,
|
||||
edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||
edgeLabelRectPadding: 4,
|
||||
edgeLabelRectStyle: { fill: 'white' },
|
||||
nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||
groupStyle: { stroke: '#CED4D9', radius: 4 },
|
||||
groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
|
||||
multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
|
||||
dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
|
||||
dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
|
||||
anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
|
||||
anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
|
||||
anchorHotsoptActivedStyle: { radius: 14 },
|
||||
anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
|
||||
nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
|
||||
edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
|
||||
nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
|
||||
cursor: {
|
||||
panningCanvas: '-webkit-grabbing',
|
||||
beforePanCanvas: '-webkit-grab',
|
||||
hoverNode: 'move',
|
||||
hoverEffectiveAnchor: 'crosshair',
|
||||
hoverEdge: 'default',
|
||||
hoverGroup: 'move',
|
||||
hoverUnEffectiveAnchor: 'default',
|
||||
hoverEdgeControllPoint: 'crosshair',
|
||||
multiSelect: 'crosshair'
|
||||
},
|
||||
nodeDelegationStyle: {
|
||||
stroke: '#1890FF',
|
||||
fill: '#1890FF',
|
||||
fillOpacity: .08,
|
||||
lineDash: [4, 4],
|
||||
radius: 4,
|
||||
lineWidth: 1
|
||||
},
|
||||
edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
|
||||
}
|
||||
179
src/views/custom-query/topo/top/theme/default-style.js
Normal file
179
src/views/custom-query/topo/top/theme/default-style.js
Normal file
@@ -0,0 +1,179 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: default style
|
||||
*/
|
||||
|
||||
export default {
|
||||
// 节点样式
|
||||
nodeStyle: {
|
||||
default: {
|
||||
stroke: '#CED4D9',
|
||||
fill: 'transparent',
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 4,
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(13, 26, 38, 0.08)',
|
||||
lineWidth: 1,
|
||||
radius: 4,
|
||||
strokeOpacity: 0.7
|
||||
},
|
||||
selected: {
|
||||
shadowColor: '#ff240b',
|
||||
shadowBlur: 2,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowOffsetY: 0,
|
||||
// fontSize:'50'
|
||||
// shadowColor: '#626262',
|
||||
// shadowBlur: 8,
|
||||
// shadowOffsetX: -1,
|
||||
// shadowOffsetY: 3
|
||||
},
|
||||
unselected: {
|
||||
shadowColor: ''
|
||||
}
|
||||
},
|
||||
// 节点标签样式
|
||||
nodeLabelCfg: {
|
||||
positions: 'center',
|
||||
style: {
|
||||
fill: '#000'
|
||||
}
|
||||
},
|
||||
// 连线样式
|
||||
edgeStyle: {
|
||||
default: {
|
||||
stroke: '#A3B1BF',
|
||||
lineWidth: 2,
|
||||
strokeOpacity: 0.92,
|
||||
lineAppendWidth: 10
|
||||
// endArrow: true
|
||||
},
|
||||
active: {
|
||||
shadowColor: 'red',
|
||||
shadowBlur: 4,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0
|
||||
},
|
||||
inactive: {
|
||||
shadowColor: ''
|
||||
},
|
||||
selected: {
|
||||
shadowColor: '#ff240b',
|
||||
shadowBlur: 4,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0
|
||||
},
|
||||
unselected: {
|
||||
shadowColor: ''
|
||||
}
|
||||
},
|
||||
// 锚点样式
|
||||
anchorStyle: {
|
||||
default: {
|
||||
r: 3,
|
||||
symbol: 'circle',
|
||||
lineWidth: 1,
|
||||
fill: '#FFFFFF',
|
||||
fillOpacity: 1,
|
||||
stroke: '#096DD9',
|
||||
strokeOpacity: 1,
|
||||
cursor: 'crosshair'
|
||||
},
|
||||
hover: {
|
||||
fillOpacity: 0.3,
|
||||
strokeOpacity: 0.5
|
||||
},
|
||||
unhover: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
},
|
||||
active: {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1
|
||||
},
|
||||
inactive: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
}
|
||||
},
|
||||
// 锚点背景样式
|
||||
anchorBgStyle: {
|
||||
default: {
|
||||
r: 10,
|
||||
symbol: 'circle',
|
||||
fill: '#1890FF',
|
||||
fillOpacity: 0,
|
||||
stroke: '#1890FF',
|
||||
strokeOpacity: 0,
|
||||
cursor: 'crosshair'
|
||||
},
|
||||
hover: {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1
|
||||
},
|
||||
unhover: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
},
|
||||
active: {
|
||||
fillOpacity: 0.3,
|
||||
strokeOpacity: 0.5
|
||||
},
|
||||
inactive: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
nodeActivedOutterStyle: { lineWidth: 0 },
|
||||
groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||
nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||
edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
|
||||
nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
|
||||
groupActivedStyle: { stroke: '#1890FF' },
|
||||
edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
|
||||
nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
|
||||
groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
|
||||
|
||||
groupBackgroundPadding: [40, 10, 10, 10],
|
||||
groupLabelOffsetX: 10,
|
||||
groupLabelOffsetY: 10,
|
||||
edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||
edgeLabelRectPadding: 4,
|
||||
edgeLabelRectStyle: { fill: 'white' },
|
||||
nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||
groupStyle: { stroke: '#CED4D9', radius: 4 },
|
||||
groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
|
||||
multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
|
||||
dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
|
||||
dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
|
||||
anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
|
||||
anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
|
||||
anchorHotsoptActivedStyle: { radius: 14 },
|
||||
anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
|
||||
nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
|
||||
edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
|
||||
nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
|
||||
cursor: {
|
||||
panningCanvas: '-webkit-grabbing',
|
||||
beforePanCanvas: '-webkit-grab',
|
||||
hoverNode: 'move',
|
||||
hoverEffectiveAnchor: 'crosshair',
|
||||
hoverEdge: 'default',
|
||||
hoverGroup: 'move',
|
||||
hoverUnEffectiveAnchor: 'default',
|
||||
hoverEdgeControllPoint: 'crosshair',
|
||||
multiSelect: 'crosshair'
|
||||
},
|
||||
nodeDelegationStyle: {
|
||||
stroke: '#1890FF',
|
||||
fill: '#1890FF',
|
||||
fillOpacity: .08,
|
||||
lineDash: [4, 4],
|
||||
radius: 4,
|
||||
lineWidth: 1
|
||||
},
|
||||
edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
|
||||
}
|
||||
15
src/views/custom-query/topo/top/theme/index.js
Normal file
15
src/views/custom-query/topo/top/theme/index.js
Normal file
@@ -0,0 +1,15 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: 编辑器主题样式 - 节点、连线的预设样式
|
||||
*/
|
||||
|
||||
import defaultStyle from './default-style'
|
||||
import darkStyle from './dark-style'
|
||||
import officeStyle from './office-style'
|
||||
|
||||
export default {
|
||||
defaultStyle,
|
||||
darkStyle,
|
||||
officeStyle
|
||||
}
|
||||
177
src/views/custom-query/topo/top/theme/office-style.js
Normal file
177
src/views/custom-query/topo/top/theme/office-style.js
Normal file
@@ -0,0 +1,177 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/11/21
|
||||
* @description: office style
|
||||
*/
|
||||
|
||||
export default {
|
||||
// 节点样式
|
||||
nodeStyle: {
|
||||
default: {
|
||||
stroke: '#CED4D9',
|
||||
fill: '#FFFFFF',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 4,
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(13, 26, 38, 0.08)',
|
||||
lineWidth: 1,
|
||||
radius: 4,
|
||||
strokeOpacity: 0.7
|
||||
},
|
||||
selected: {
|
||||
shadowColor: '#ff240b',
|
||||
shadowBlur: 4,
|
||||
shadowOffsetX: 1,
|
||||
shadowOffsetY: 1
|
||||
// shadowColor: '#626262',
|
||||
// shadowBlur: 8,
|
||||
// shadowOffsetX: -1,
|
||||
// shadowOffsetY: 3
|
||||
},
|
||||
unselected: {
|
||||
shadowColor: ''
|
||||
}
|
||||
},
|
||||
// 节点标签样式
|
||||
nodeLabelCfg: {
|
||||
positions: 'center',
|
||||
style: {
|
||||
fill: '#000'
|
||||
}
|
||||
},
|
||||
// 连线样式
|
||||
edgeStyle: {
|
||||
default: {
|
||||
stroke: '#41c23a',
|
||||
lineWidth: 2,
|
||||
strokeOpacity: 0.92,
|
||||
lineAppendWidth: 10
|
||||
// endArrow: true
|
||||
},
|
||||
active: {
|
||||
shadowColor: 'red',
|
||||
shadowBlur: 4,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0
|
||||
},
|
||||
inactive: {
|
||||
shadowColor: ''
|
||||
},
|
||||
selected: {
|
||||
shadowColor: '#ff240b',
|
||||
shadowBlur: 4,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0
|
||||
},
|
||||
unselected: {
|
||||
shadowColor: ''
|
||||
}
|
||||
},
|
||||
// 锚点样式
|
||||
anchorStyle: {
|
||||
default: {
|
||||
radius: 3,
|
||||
symbol: 'circle',
|
||||
fill: '#FFFFFF',
|
||||
fillOpacity: 0,
|
||||
stroke: '#1890FF',
|
||||
strokeOpacity: 0,
|
||||
cursor: 'crosshair'
|
||||
},
|
||||
hover: {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1
|
||||
},
|
||||
unhover: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
},
|
||||
active: {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1
|
||||
},
|
||||
inactive: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
}
|
||||
},
|
||||
// 锚点背景样式
|
||||
anchorBgStyle: {
|
||||
default: {
|
||||
radius: 10,
|
||||
symbol: 'circle',
|
||||
fill: '#1890FF',
|
||||
fillOpacity: 0,
|
||||
stroke: '#1890FF',
|
||||
strokeOpacity: 0,
|
||||
cursor: 'crosshair'
|
||||
},
|
||||
hover: {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1
|
||||
},
|
||||
unhover: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
},
|
||||
active: {
|
||||
fillOpacity: 0.3,
|
||||
strokeOpacity: 0.5
|
||||
},
|
||||
inactive: {
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 0
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
nodeActivedOutterStyle: { lineWidth: 0 },
|
||||
groupSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||
nodeSelectedOutterStyle: { stroke: '#E0F0FF', lineWidth: 2 },
|
||||
edgeActivedStyle: { stroke: '#1890FF', strokeOpacity: .92 },
|
||||
nodeActivedStyle: { fill: '#F3F9FF', stroke: '#1890FF' },
|
||||
groupActivedStyle: { stroke: '#1890FF' },
|
||||
edgeSelectedStyle: { lineWidth: 2, strokeOpacity: .92, stroke: '#A3B1BF' },
|
||||
nodeSelectedStyle: { fill: '#F3F9FF', stroke: '#1890FF', fillOpacity: .4 },
|
||||
groupSelectedStyle: { stroke: '#1890FF', fillOpacity: .92 },
|
||||
|
||||
groupBackgroundPadding: [40, 10, 10, 10],
|
||||
groupLabelOffsetX: 10,
|
||||
groupLabelOffsetY: 10,
|
||||
edgeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||
edgeLabelRectPadding: 4,
|
||||
edgeLabelRectStyle: { fill: 'white' },
|
||||
nodeLabelStyle: { fill: '#666', textAlign: 'center', textBaseline: 'middle' },
|
||||
groupStyle: { stroke: '#CED4D9', radius: 4 },
|
||||
groupLabelStyle: { fill: '#666', textAlign: 'left', textBaseline: 'top' },
|
||||
multiSelectRectStyle: { fill: '#1890FF', fillOpacity: .08, stroke: '#1890FF', opacity: .1 },
|
||||
dragNodeHoverToGroupStyle: { stroke: '#1890FF', lineWidth: 2 },
|
||||
dragNodeLeaveFromGroupStyle: { stroke: '#BAE7FF', lineWidth: 2 },
|
||||
anchorPointStyle: { radius: 3.5, fill: '#fff', stroke: '#1890FF', lineAppendWidth: 12 },
|
||||
anchorHotsoptStyle: { radius: 12, fill: '#1890FF', fillOpacity: .25 },
|
||||
anchorHotsoptActivedStyle: { radius: 14 },
|
||||
anchorPointHoverStyle: { radius: 4, fill: '#1890FF', fillOpacity: 1, stroke: '#1890FF' },
|
||||
nodeControlPointStyle: { radius: 4, fill: '#fff', shadowBlur: 4, shadowColor: '#666' },
|
||||
edgeControlPointStyle: { radius: 6, symbol: 'square', lineAppendWidth: 6, fillOpacity: 0, strokeOpacity: 0 },
|
||||
nodeSelectedBoxStyle: { stroke: '#C2C2C2' },
|
||||
cursor: {
|
||||
panningCanvas: '-webkit-grabbing',
|
||||
beforePanCanvas: '-webkit-grab',
|
||||
hoverNode: 'move',
|
||||
hoverEffectiveAnchor: 'crosshair',
|
||||
hoverEdge: 'default',
|
||||
hoverGroup: 'move',
|
||||
hoverUnEffectiveAnchor: 'default',
|
||||
hoverEdgeControllPoint: 'crosshair',
|
||||
multiSelect: 'crosshair'
|
||||
},
|
||||
nodeDelegationStyle: {
|
||||
stroke: '#1890FF',
|
||||
fill: '#1890FF',
|
||||
fillOpacity: .08,
|
||||
lineDash: [4, 4],
|
||||
radius: 4,
|
||||
lineWidth: 1
|
||||
},
|
||||
edgeDelegationStyle: { stroke: '#1890FF', lineDash: [4, 4], lineWidth: 1 }
|
||||
}
|
||||
217
src/views/custom-query/topo/top/toolbar-edit.vue
Normal file
217
src/views/custom-query/topo/top/toolbar-edit.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="toolbar">
|
||||
<div class="left">
|
||||
<!-- <el-checkbox class="edge-enabled" title="连线模式" @change="$parent.enableEdgeHandler"></el-checkbox>-->
|
||||
<!-- <dropdown-->
|
||||
<!-- class="edge-shape"-->
|
||||
<!-- :dropdown-items="edgeShapeList"-->
|
||||
<!-- @change="changeEdgeShapeHandler"-->
|
||||
<!-- >-->
|
||||
<!-- </dropdown>-->
|
||||
<el-button size="mini" @click="router.push('/custom/query/topo')">返回</el-button>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="graph-ops">
|
||||
<svg-icon name="undo" title="撤回" :class-name="disableUndo ? 'disabled-icon':'er-icon'"
|
||||
@handle="undoHandler(disableUndo)"/>
|
||||
<svg-icon name="redo" title="重做" :class-name="disableRedo ? 'disabled-icon':'er-icon'" @handle="redoHandler"/>
|
||||
<span class="separator"></span>
|
||||
<svg-icon name="copy" title="复制" :class-name="disableCopy ? 'disabled-icon':'er-icon'" @handle="copyHandler"/>
|
||||
<svg-icon name="paste" title="粘贴" :class-name="disablePaste ? 'disabled-icon':'er-icon'"
|
||||
@handle="pasteHandler"/>
|
||||
<svg-icon name="clear" title="删除" :class-name="disableDelete ? 'disabled-icon':'er-icon'"
|
||||
@handle="deleteHandler"/>
|
||||
<span class="separator"></span>
|
||||
<svg-icon name="zoom-in" title="放大" :class-name="'er-icon'" @handle="zoomInHandler"/>
|
||||
<svg-icon name="zoom-out" title="缩小" :class-name="'er-icon'" @handle="zoomOutHandler"/>
|
||||
<svg-icon name="fit" title="适应画布" :class-name="'er-icon'" @handle="autoZoomHandler"/>
|
||||
<svg-icon name="actual_size" title="实际尺寸" :class-name="'er-icon'" @handle="resetZoomHandler"/>
|
||||
<span class="separator"></span>
|
||||
<!--id="multi-select"-->
|
||||
<svg-icon name="selector" title="框选" id="multi-select" :class-name="'er-icon'" @handle="multiSelectHandler"/>
|
||||
|
||||
<!-- <div v-if="graphMode === 'edit'" class="iconfont zx">-->
|
||||
<!-- <dropdown-->
|
||||
<!-- class="edge-shape"-->
|
||||
<!-- :dropdown-items="edgeShapeList"-->
|
||||
<!-- @change="changeEdgeShapeHandler"-->
|
||||
<!-- >-->
|
||||
<!-- </dropdown>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button size="mini" @click="autoLayout">自动布局</el-button>
|
||||
<!--<el-button size="mini" @click="circularLayoutHandler">环形布局</el-button>-->
|
||||
<!--<el-button size="mini" @click="radialLayoutHandler">辐射</el-button>-->
|
||||
<!--<el-button size="mini" @click="mdsLayoutHandler">MDS</el-button>-->
|
||||
<!--<el-button size="mini" @click="dagreLayoutHandler">层次</el-button>-->
|
||||
<!--<el-button size="mini" @click="autoLayoutHandler">自动（old）</el-button>-->
|
||||
<!-- todo 返回到预览模式 -->
|
||||
<el-button size="mini" @click="handlePreview('preview')">预览</el-button>
|
||||
<el-button size="mini" @click="saveDataHandler">保存</el-button>
|
||||
<el-button size="mini" @click="handleTopLine">上线</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SvgIcon from '@/components/svgIcon/index.vue'
|
||||
import Dropdown from './elements/dropdown.vue'
|
||||
import {defineProps} from "vue";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const emit = defineEmits(["autoLayout", "handlePreview", "saveDataHandler",
|
||||
"undoHandler", "redoHandler", "copyHandler", "pasteHandler", "deleteHandler", "zoomInHandler",
|
||||
"zoomOutHandler", "autoZoomHandler", "resetZoomHandler", "multiSelectHandler"]);
|
||||
const props = defineProps({
|
||||
disableUndo: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
disableRedo: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
disableCopy: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
disablePaste: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
disableDelete: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
graphMode: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
edgeShapeList: {
|
||||
type: Array, //参数类型
|
||||
default: [], //默认值
|
||||
}
|
||||
})
|
||||
const autoLayout = () => {
|
||||
emit('autoLayout');
|
||||
}
|
||||
const handlePreview = (graphMode) => {
|
||||
emit('handlePreview', graphMode);
|
||||
}
|
||||
const saveDataHandler = () => {
|
||||
emit('saveDataHandler');
|
||||
}
|
||||
const handleTopLine = () => {
|
||||
emit('handleTopLine');
|
||||
}
|
||||
const undoHandler = (flag) => {
|
||||
if (flag) return
|
||||
emit('undoHandler');
|
||||
}
|
||||
const redoHandler = () => {
|
||||
emit('redoHandler');
|
||||
}
|
||||
const copyHandler = () => {
|
||||
emit('copyHandler');
|
||||
}
|
||||
const pasteHandler = () => {
|
||||
emit('pasteHandler');
|
||||
}
|
||||
const deleteHandler = () => {
|
||||
emit('deleteHandler');
|
||||
}
|
||||
const zoomInHandler = () => {
|
||||
emit('zoomInHandler');
|
||||
}
|
||||
const zoomOutHandler = () => {
|
||||
emit('zoomOutHandler');
|
||||
}
|
||||
const autoZoomHandler = () => {
|
||||
emit('autoZoomHandler');
|
||||
}
|
||||
const resetZoomHandler = () => {
|
||||
emit('resetZoomHandler');
|
||||
}
|
||||
const multiSelectHandler = () => {
|
||||
emit('multiSelectHandler');
|
||||
}
|
||||
const changeEdgeShapeHandler = () => {
|
||||
emit('changeEdgeShapeHandler');
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.zx {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding-right: 10px;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
line-height: 42px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #E9E9E9;
|
||||
box-shadow: 0 8px 12px 0 rgba(0, 52, 107, 0.04);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
||||
.left {
|
||||
display: inline-block;
|
||||
width: 12%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: inline-block;
|
||||
width: 58%;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edge-enabled {
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.edge-shape {
|
||||
width: 100%;
|
||||
/*margin-right: 20px;*/
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
/*border-right: 1px solid #E6E9ED;*/
|
||||
}
|
||||
|
||||
.graph-ops {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
|
||||
.icon-select {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin-right: 5px;
|
||||
border-left: 1px solid #E9E9E9;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
183
src/views/custom-query/topo/top/toolbar-preview.vue
Normal file
183
src/views/custom-query/topo/top/toolbar-preview.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="toolbar">
|
||||
<div class="left">
|
||||
<dropdown
|
||||
class="theme-style"
|
||||
:dropdown-items="themeOptions"
|
||||
@change="toggleThemeChange"
|
||||
>
|
||||
</dropdown>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="graph-ops">
|
||||
<svg-icon name="zoom-in" title="放大" id="zoom-in" @handle="zoomInHandler"/>
|
||||
<svg-icon name="zoom-out" title="缩小" @handle="zoomOutHandler"/>
|
||||
<svg-icon name="fit" title="适应画布" @handle="autoZoomHandler"/>
|
||||
<svg-icon name="actual_size" title="实际尺寸" @handle="resetZoomHandler"/>
|
||||
<span class="separator"></span>
|
||||
<el-checkbox @change="enableMinimapHandler">导航器</el-checkbox>
|
||||
<dropdown :dropdown-items="refreshOptions" @change="toggleAutoRefresh"></dropdown>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button size="mini" @click="manualRefreshHandler">刷新</el-button>
|
||||
<el-button size="mini" @click="handleEdit('edit')">编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SvgIcon from '@/components/svgIcon/index.vue'
|
||||
import Dropdown from './elements/dropdown.vue'
|
||||
import {ref} from "vue";
|
||||
const emit = defineEmits([ "handleEdit","zoomInHandler",
|
||||
"zoomOutHandler","autoZoomHandler","resetZoomHandler","enableMinimapHandler","autoRefreshHandler","manualRefreshHandler"]);
|
||||
|
||||
const themeOptions = ref([
|
||||
{value: 'defaultStyle', label: '默认主题'},
|
||||
{value: 'darkStyle', label: '暗黑风格'},
|
||||
{value: 'officeStyle', label: '办公风格'}
|
||||
])
|
||||
const refreshOptions = ref([
|
||||
{value: -1, label: '不自动刷新'},
|
||||
{value: 10000, label: '10秒自动刷新'},
|
||||
{value: 30000, label: '30秒自动刷新'},
|
||||
{value: 60000, label: '60秒自动刷新'}
|
||||
])
|
||||
|
||||
const toggleThemeChange = (clickItem) => {
|
||||
emit('changeGraphTheme',clickItem);
|
||||
}
|
||||
|
||||
const changeThemeActiveIndex = (index) => {
|
||||
// 给父组件调用（代码触发主题修改）
|
||||
themeOptions.value.activeIndex = index
|
||||
}
|
||||
const zoomInHandler = () => {
|
||||
emit('zoomInHandler');
|
||||
}
|
||||
const zoomOutHandler = () => {
|
||||
emit('zoomOutHandler');
|
||||
}
|
||||
const autoZoomHandler = () => {
|
||||
emit('autoZoomHandler');
|
||||
}
|
||||
const resetZoomHandler = () => {
|
||||
emit('resetZoomHandler');
|
||||
}
|
||||
const enableMinimapHandler = (e) => {
|
||||
emit('enableMinimapHandler',e);
|
||||
}
|
||||
const toggleAutoRefresh = (activeIndex) => {
|
||||
emit('autoRefreshHandler',activeIndex);
|
||||
}
|
||||
const manualRefreshHandler = () => {
|
||||
emit('manualRefreshHandler');
|
||||
}
|
||||
const handleEdit = (graphMode) => {
|
||||
emit('handleEdit', graphMode);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.toolbar {
|
||||
padding-right: 10px;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
line-height: 42px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #E9E9E9;
|
||||
box-shadow: 0 8px 12px 0 rgba(0, 52, 107, 0.04);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
||||
.left {
|
||||
display: inline-block;
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: inline-block;
|
||||
width: 58%;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edge-enabled {
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.edge-type {
|
||||
width: 60%;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.theme-style {
|
||||
width: 100%;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.graph-ops {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
|
||||
i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 6px;
|
||||
line-height: 20px;
|
||||
color: #a8a8a8;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
border: 1px solid rgba(2, 2, 2, 0);
|
||||
}
|
||||
|
||||
i:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid #E9E9E9;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.disabled:hover {
|
||||
cursor: not-allowed;
|
||||
border: 1px solid rgba(2, 2, 2, 0);
|
||||
}
|
||||
|
||||
.icon-select {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 4px;
|
||||
border-left: 1px solid #E9E9E9;
|
||||
}
|
||||
|
||||
.auto-refresh {
|
||||
margin: 0 8px 0 12px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1808
src/views/custom-query/topo/top/topology.vue
Normal file
1808
src/views/custom-query/topo/top/topology.vue
Normal file
File diff suppressed because one or more lines are too long
312
src/views/custom-query/topo/topologyDesign.vue
Normal file
312
src/views/custom-query/topo/topologyDesign.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<topology
|
||||
ref="topologyRef"
|
||||
@handleSave="handleSave"
|
||||
@handlePreview="handlePreview"
|
||||
@handleTopoLine="handleTopoLine"
|
||||
:node-type-list="nodeTypeList"
|
||||
:node-app-config="nodeAppConfig"
|
||||
:edge-app-config="edgeAppConfig"
|
||||
:relational-map="relationalMap"
|
||||
>
|
||||
</topology>
|
||||
<div class="top-dialog">
|
||||
<el-dialog title="预览" width="1500px" v-model="previewShow" @close="closePreview" @submit.prevent="handlePreviewData">
|
||||
<el-form inline class="query-form" ref="queryForm" >
|
||||
<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
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlePreviewData" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table :data="previewTable" v-loading="previewLoading">
|
||||
<el-table-column v-for="column in uniColumns" :key="column.prop" :prop="column.prop"
|
||||
:label="column.label" align="center">
|
||||
<template #default="scope">
|
||||
<template v-if="column.displayType === 'date'">
|
||||
{{ simpleDateMoreFormat(scope.row[column.prop], column.displayParam) }}
|
||||
</template>
|
||||
<template v-if="column.displayType === 'text'">
|
||||
{{ scope.row[column.prop] }}
|
||||
</template>
|
||||
<template v-if="column.displayType === 'image'">
|
||||
<change-image :displayType="'image'" :column-prop="scope.row[column.prop]" :params="imageSettingParams"></change-image>
|
||||
<!-- <el-image :src="scope.row[column.prop]">-->
|
||||
<!-- <template #error>-->
|
||||
<!-- <div class="image-slot">-->
|
||||
<!-- <el-image :src="avatar"></el-image>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-image>-->
|
||||
</template>
|
||||
<template v-if="column.displayType === 'dict'">
|
||||
{{ scope.row[column.prop] }} 字典
|
||||
</template>
|
||||
<template v-if="column.displayType === 'html'">
|
||||
<div v-html="scope.row[column.prop]"></div>
|
||||
超文本标记
|
||||
</template>
|
||||
</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>
|
||||
</div>
|
||||
<div class="top-dialog">
|
||||
<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%;"
|
||||
:filter-node-method="filterNodeMethod" filterable :check-strictly="true"/>
|
||||
</el-form-item>
|
||||
</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 Topology from "@/views/custom-query/topo/top/topology.vue"
|
||||
import {getTopoDragInfo, saveTopo, previewTopo, previewTopologyData, topoToLine} from "@/api/custom-query/topo-search"
|
||||
import {simpleDateMoreFormat} from "./utils/date.js";
|
||||
import {reactive} from "vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {Search, Refresh} from '@element-plus/icons-vue'
|
||||
import {getMenuOpt} from '@/api/system/menuman.js'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import ChangeImage from "./components/changeImage/ChangeImage.vue";
|
||||
const router = useRouter()
|
||||
const params = reactive(router.currentRoute.value.params)
|
||||
const isTopLineVisited = ref(false)
|
||||
const form = ref({
|
||||
parentId: ''
|
||||
})
|
||||
const formRules = ref({
|
||||
parentId: [{required: true, message: '请选择上级菜单', trigger: 'blur'}]
|
||||
})
|
||||
const imageSettingParams = ref({})
|
||||
const formInstance = ref()
|
||||
const menuOpt = ref([])
|
||||
const topologyRef = ref()
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const jsonData = ref()
|
||||
const queryForm = ref([])
|
||||
const queryValue = ref(null)
|
||||
const total = ref(0)
|
||||
const previewLoading = ref(true)
|
||||
const nodeTypeList = ref([])
|
||||
const relationalMap = ref(new Map())
|
||||
const graphDefaultData = ref([])
|
||||
const previewShow = ref(false)
|
||||
const previewTable = ref({})
|
||||
const uniColumns = ref({})
|
||||
const uniCons = ref({})
|
||||
const ucId = ref(null)
|
||||
|
||||
const nodeAppConfig = reactive({
|
||||
// ip: '节点IP',
|
||||
// port: '节点端口',
|
||||
// sysName: '设备名称'
|
||||
})
|
||||
const edgeAppConfig = reactive({
|
||||
associated: "查询方式",
|
||||
sourceColumn: "主表字段",
|
||||
targetColumn: "关联字段"
|
||||
})
|
||||
|
||||
const closePreview = () => {
|
||||
previewShow.value = false
|
||||
}
|
||||
const handleSave = (json) => {
|
||||
// if(JSON.parse(json).edges.length!==JSON.parse(json).nodes.length-1){
|
||||
// ElMessage.warning('图与图之间尚未构成联系, 请检查后保存')
|
||||
// }else {
|
||||
saveTopo({
|
||||
queryId: params.queryId,
|
||||
topJson: json
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
// }
|
||||
}
|
||||
//点击上线按钮弹框
|
||||
const handleTopoLine = (json) => {
|
||||
getMenuOpt().then(res => {
|
||||
menuOpt.value = [{
|
||||
value: 0,
|
||||
label: "一级目录",
|
||||
children: res.data
|
||||
}]
|
||||
})
|
||||
jsonData.value = json
|
||||
isTopLineVisited.value = true
|
||||
}
|
||||
const filterNodeMethod = (value, data) => data.label.includes(value)
|
||||
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
parentId: ''
|
||||
}
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restForm();
|
||||
isTopLineVisited.value = false;
|
||||
};
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid, fields) => {
|
||||
if (!valid) return
|
||||
topoToLine({
|
||||
menuId: form.value.parentId,
|
||||
queryId: params.queryId,
|
||||
topJson: jsonData.value
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
router.push('/custom/query/topo')
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handlePreview = (json) => {
|
||||
imageSettingParams.value=topologyRef.value.imageSettingParams
|
||||
previewLoading.value = true
|
||||
previewTopo({
|
||||
queryId: params.queryId,
|
||||
topJson: json,
|
||||
}).then(res => {
|
||||
console.log('预览', res)
|
||||
if (res.code === 1000) {
|
||||
previewShow.value = true
|
||||
previewTable.value = res.data.table.rows
|
||||
uniColumns.value = res.data.uniColumns
|
||||
uniCons.value = res.data.uniCons
|
||||
total.value = res.data.table.total
|
||||
previewLoading.value = false
|
||||
uniCons.value.forEach(item => {
|
||||
ucId.value = item.ucId
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
uniCons.value.forEach(con => {
|
||||
con.query = ''
|
||||
})
|
||||
handlePreviewData()
|
||||
}
|
||||
|
||||
const handlePreviewData = () => {
|
||||
previewLoading.value = true
|
||||
let queryData = []
|
||||
uniCons.value.forEach(con => {
|
||||
if (con.query) {
|
||||
let queryItem = {
|
||||
query: con.query,
|
||||
ucId: con.ucId
|
||||
}
|
||||
queryData.push(queryItem)
|
||||
}
|
||||
})
|
||||
previewTopologyData({
|
||||
list: queryData,
|
||||
queryId: params.queryId
|
||||
}, pageInfo).then(res => {
|
||||
previewTable.value = res.data.rows
|
||||
total.value = res.data.total
|
||||
previewLoading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const getDragInfo = async () => {
|
||||
let queryId = params.queryId
|
||||
getTopoDragInfo(queryId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
// console.log('拖拽数据', res.data)
|
||||
nodeTypeList.value = res.data.tableList
|
||||
// for (let relationalItem of res.data.relational) {
|
||||
// let item = relationalMap.value.get(relationalItem.mainId)
|
||||
// if (null == item) {
|
||||
// item = [];
|
||||
// }
|
||||
// item.push(relationalItem)
|
||||
// relationalMap.value.set(relationalItem.mainId,item)
|
||||
// }
|
||||
// console.log('res.data.relational', res.data.relational)
|
||||
if (res.data.relational.length === 0) {
|
||||
relationalMap.value = []
|
||||
} else {
|
||||
relationalMap.value = res.data.relational
|
||||
}
|
||||
if (res.data.topJson === null) {
|
||||
let data = {
|
||||
nodes: [],
|
||||
edges: [],
|
||||
combos: [],
|
||||
groups: []
|
||||
}
|
||||
topologyRef.value.initTopo(data);
|
||||
} else {
|
||||
graphDefaultData.value = JSON.parse(res.data.topJson)
|
||||
topologyRef.value.initTopo(graphDefaultData.value);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
handlePreviewData()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
handlePreviewData()
|
||||
}
|
||||
getDragInfo()
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.demo-topology {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
56
src/views/custom-query/topo/utils/anchor/draw_mark.js
Normal file
56
src/views/custom-query/topo/utils/anchor/draw_mark.js
Normal file
@@ -0,0 +1,56 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: 画锚点
|
||||
*/
|
||||
|
||||
import theme from '@/views/custom-query/topo/top/theme'
|
||||
export default function(cfg, group) {
|
||||
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||
let { anchorPoints, width, height, id } = cfg
|
||||
if (anchorPoints && anchorPoints.length) {
|
||||
for (let i = 0, len = anchorPoints.length; i < len; i++) {
|
||||
let [x, y] = anchorPoints[i]
|
||||
// 计算Marker中心点坐标
|
||||
let anchorX = x * width
|
||||
let anchorY = y * height
|
||||
// 添加锚点背景
|
||||
let anchorBgShape = group.addShape('marker', {
|
||||
id: id + '_anchor_bg_' + i,
|
||||
attrs: {
|
||||
name: 'anchorBg',
|
||||
x: anchorX,
|
||||
y: anchorY,
|
||||
// 锚点默认样式
|
||||
...themeStyle.anchorBgStyle.default
|
||||
},
|
||||
draggable: false,
|
||||
name: 'markerBg-shape'
|
||||
})
|
||||
// 添加锚点Marker形状
|
||||
let anchorShape = group.addShape('marker', {
|
||||
id: id + '_anchor_' + i,
|
||||
attrs: {
|
||||
name: 'anchor',
|
||||
x: anchorX,
|
||||
y: anchorY,
|
||||
// 锚点默认样式
|
||||
...themeStyle.anchorStyle.default
|
||||
},
|
||||
draggable: false,
|
||||
name: 'marker-shape'
|
||||
})
|
||||
|
||||
anchorShape.on('mouseenter', function() {
|
||||
anchorBgShape.attr({
|
||||
...themeStyle.anchorBgStyle.active
|
||||
})
|
||||
})
|
||||
anchorShape.on('mouseleave', function() {
|
||||
anchorBgShape.attr({
|
||||
...themeStyle.anchorBgStyle.inactive
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
13
src/views/custom-query/topo/utils/anchor/index.js
Normal file
13
src/views/custom-query/topo/utils/anchor/index.js
Normal file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: anchor
|
||||
*/
|
||||
|
||||
import setState from './set-state'
|
||||
import drawMark from './draw_mark'
|
||||
|
||||
export default {
|
||||
setState,
|
||||
drawMark,
|
||||
}
|
||||
25
src/views/custom-query/topo/utils/anchor/set-state.js
Normal file
25
src/views/custom-query/topo/utils/anchor/set-state.js
Normal file
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: set anchor state
|
||||
*/
|
||||
import theme from '@/views/custom-query/topo/top/theme'
|
||||
|
||||
export default function (name, value, item) {
|
||||
const themeStyle = theme.defaultStyle
|
||||
if (name === 'hover') {
|
||||
let group = item.getContainer()
|
||||
let children = group.get('children')
|
||||
for (let i = 0, len = children.length; i < len; i++) {
|
||||
let child = children[i]
|
||||
// 处理锚点状态
|
||||
if (child.attrs.name === 'anchorBg') {
|
||||
if (value) {
|
||||
child.attr(themeStyle.anchorStyle.hover)
|
||||
} else {
|
||||
child.attr(themeStyle.anchorStyle.unhover)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
31
src/views/custom-query/topo/utils/anchor/update.js
Normal file
31
src/views/custom-query/topo/utils/anchor/update.js
Normal file
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: update anchor
|
||||
*/
|
||||
|
||||
export default function(cfg, group) {
|
||||
let { anchorPoints, width, height, id } = cfg
|
||||
if (anchorPoints && anchorPoints.length) {
|
||||
for (let i = 0, len = anchorPoints.length; i < len; i++) {
|
||||
let [x, y] = anchorPoints[i]
|
||||
// 计算Marker中心点坐标
|
||||
let originX = -width / 2
|
||||
let originY = -height / 2
|
||||
let anchorX = x * width + originX
|
||||
let anchorY = y * height + originY
|
||||
// 锚点背景
|
||||
let anchorBgShape = group.findById(id + '_anchor_bg_' + i)
|
||||
// 锚点
|
||||
let anchorShape = group.findById(id + '_anchor_' + i)
|
||||
anchorBgShape.attr({
|
||||
x: anchorX,
|
||||
y: anchorY
|
||||
})
|
||||
anchorShape.attr({
|
||||
x: anchorX,
|
||||
y: anchorY
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/views/custom-query/topo/utils/collapse/index.js
Normal file
11
src/views/custom-query/topo/utils/collapse/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2021/5/11 17:28
|
||||
* @email: clay@hchyun.com
|
||||
* @description: node
|
||||
*/
|
||||
import setState from './set-state'
|
||||
|
||||
export default {
|
||||
setState
|
||||
}
|
||||
32
src/views/custom-query/topo/utils/collapse/set-state.js
Normal file
32
src/views/custom-query/topo/utils/collapse/set-state.js
Normal file
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2021/5/11 17:28
|
||||
* @email: clay@hchyun.com
|
||||
* @description: node 节点收缩和放大
|
||||
*/
|
||||
export default function(e){
|
||||
const {
|
||||
graph
|
||||
} = this;
|
||||
const item = e.item;
|
||||
const shape = e.shape;
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
|
||||
//收缩
|
||||
if (shape.get("name") === "collapse") {
|
||||
graph.updateItem(item, {
|
||||
collapsed: true,
|
||||
size: [300, 50],
|
||||
});
|
||||
setTimeout(() => graph.layout(), 100);
|
||||
//展开
|
||||
} else if (shape.get("name") === "expand") {
|
||||
graph.updateItem(item, {
|
||||
collapsed: false,
|
||||
size: [300, 500],
|
||||
});
|
||||
setTimeout(() => graph.layout(), 100);
|
||||
}
|
||||
}
|
||||
106
src/views/custom-query/topo/utils/date.js
Normal file
106
src/views/custom-query/topo/utils/date.js
Normal file
@@ -0,0 +1,106 @@
|
||||
//时间转换为String类型
|
||||
const simpleDateFormat=(pattern)=> {
|
||||
const fmt = new Object();
|
||||
fmt.pattern = pattern;
|
||||
fmt.parse = function (source) {
|
||||
try {
|
||||
return new Date(source);
|
||||
} catch (e) {
|
||||
console.log("字符串 " + source + " 转时间格式失败！");
|
||||
return null;
|
||||
}
|
||||
};
|
||||
fmt.format = function (date) {
|
||||
if (typeof (date) == "undefined" || date == null || date == "") {
|
||||
return "";
|
||||
}
|
||||
try {
|
||||
date = new Date(date);
|
||||
} catch (e) {
|
||||
console.log("时间 " + date + " 格式化失败！");
|
||||
return "";
|
||||
}
|
||||
let strTime = this.pattern;//时间表达式的正则
|
||||
|
||||
const o = {
|
||||
"M+": date.getMonth() + 1, //月份
|
||||
"d+": date.getDate(), //日
|
||||
"H+": date.getHours(), //小时
|
||||
"m+": date.getMinutes(), //分
|
||||
"s+": date.getSeconds(), //秒
|
||||
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
|
||||
"S": date.getMilliseconds() //毫秒
|
||||
};
|
||||
if (/(y+)/.test(strTime)) {
|
||||
strTime = strTime
|
||||
.replace(RegExp.$1, (date.getFullYear() + "")
|
||||
.substr(4 - RegExp.$1.length));
|
||||
}
|
||||
for (const k in o) {
|
||||
if (new RegExp("(" + k + ")").test(strTime)) {
|
||||
strTime = strTime.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
}
|
||||
}
|
||||
return strTime;
|
||||
};
|
||||
return fmt;
|
||||
}
|
||||
|
||||
//用于一个函数有多个时间格式转换
|
||||
export const simpleDateMoreFormat=(date, formatStr) =>{
|
||||
console.log(date,formatStr)
|
||||
const fmt = simpleDateFormat(formatStr);
|
||||
date = fmt.parse(date)
|
||||
return fmt.format(date)
|
||||
}
|
||||
|
||||
//时间格式化为yyyy.MM
|
||||
const simpleDateFormatByDot=(date) =>{
|
||||
const fmt = simpleDateFormat("yyyy.MM");
|
||||
date = fmt.parse(date)
|
||||
return fmt.format(date)
|
||||
}
|
||||
|
||||
//时间格式化为yyyy-MM
|
||||
const simpleDateFormatByLine=(date) =>{
|
||||
const fmt = simpleDateFormat("yyyy-MM");
|
||||
date = fmt.parse(date)
|
||||
return fmt.format(date)
|
||||
}
|
||||
|
||||
//时间格式化为yyyy-MM-dd
|
||||
const simpleDateFormatByMoreLine=(date) =>{
|
||||
const fmt = simpleDateFormat("yyyy-MM-dd");
|
||||
date = fmt.parse(date)
|
||||
return fmt.format(date)
|
||||
}
|
||||
|
||||
//用于list表里每条记录中的startDate,endDate,格式化为yyyy.MM
|
||||
const converListDateByDot=(list) =>{
|
||||
for (const item of list) {
|
||||
item.startDate = simpleDateFormatByDot(item.startDate);
|
||||
item.endDate = simpleDateFormatByDot(item.endDate);
|
||||
}
|
||||
}
|
||||
|
||||
//用于data.startDate,data.endDate,格式化为yyyy-MM
|
||||
const converListDateByLine=(date) =>{
|
||||
data.startDate = simpleDateFormatByLine(data.startDate);
|
||||
data.endDate = simpleDateFormatByLine(data.endDate);
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
simpleDateFormat,
|
||||
simpleDateMoreFormat,
|
||||
simpleDateFormatByDot,
|
||||
simpleDateFormatByLine,
|
||||
simpleDateFormatByMoreLine,
|
||||
converListDateByDot,
|
||||
converListDateByLine
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
11
src/views/custom-query/topo/utils/edge/index.js
Normal file
11
src/views/custom-query/topo/utils/edge/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: edge
|
||||
*/
|
||||
|
||||
import setState from './set-state'
|
||||
|
||||
export default {
|
||||
setState
|
||||
}
|
||||
20
src/views/custom-query/topo/utils/edge/set-state.js
Normal file
20
src/views/custom-query/topo/utils/edge/set-state.js
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: set edge state
|
||||
*/
|
||||
|
||||
import theme from '@/views/custom-query/topo/top/theme'
|
||||
|
||||
export default function(name, value, item) {
|
||||
const group = item.getContainer()
|
||||
const shape = group.get('children')[0] // 顺序根据 draw 时确定
|
||||
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||
if (name === 'selected') {
|
||||
if (value) {
|
||||
shape.attr(themeStyle.edgeStyle.selected)
|
||||
} else {
|
||||
shape.attr(themeStyle.edgeStyle.unselected)
|
||||
}
|
||||
}
|
||||
}
|
||||
117
src/views/custom-query/topo/utils/index.js
Normal file
117
src/views/custom-query/topo/utils/index.js
Normal file
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* Created by clay on 2019/10/14
|
||||
* Description: common utils
|
||||
*/
|
||||
|
||||
/**
|
||||
* This is just a simple version of deep copy
|
||||
* Has a lot of edge cases bug
|
||||
* If you want to use a perfect deep copy, use lodash's _.cloneDeep
|
||||
* @param {Object} source
|
||||
* @returns {Object} targetObj
|
||||
*/
|
||||
const deepClone = function(source) {
|
||||
if (!source && typeof source !== 'object') {
|
||||
throw new Error('error arguments: deepClone')
|
||||
}
|
||||
let targetObj = source.constructor === Array ? [] : {}
|
||||
Object.keys(source).forEach(key => {
|
||||
if (source[key] && typeof source[key] === 'object') {
|
||||
targetObj[key] = deepClone(source[key])
|
||||
} else {
|
||||
targetObj[key] = source[key]
|
||||
}
|
||||
})
|
||||
return targetObj
|
||||
}
|
||||
|
||||
/**
|
||||
* Randomly extract one or more elements from an array
|
||||
* If you want to use a perfect solution, use lodash's _.sample or _.sampleSize
|
||||
* @param {Array} arr
|
||||
* @param {number} count
|
||||
* @returns {Array} arr
|
||||
*/
|
||||
const getRandomArrayElements = function(arr, count = 1) {
|
||||
if (count > arr.length) {
|
||||
throw new Error('error arguments: count is greater than length of array')
|
||||
}
|
||||
let shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index
|
||||
while (i-- > min) {
|
||||
index = Math.floor((i + 1) * Math.random())
|
||||
temp = shuffled[index]
|
||||
shuffled[index] = shuffled[i]
|
||||
shuffled[i] = temp
|
||||
}
|
||||
return shuffled.slice(min)
|
||||
}
|
||||
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: graph utils
|
||||
*/
|
||||
|
||||
import node from './node'
|
||||
import anchor from './anchor'
|
||||
import edge from './edge'
|
||||
import collapse from './collapse'
|
||||
|
||||
/**
|
||||
* 比较两个对象的内容是否相同（两个对象的键值都相同）
|
||||
* @param obj1
|
||||
* @param obj2
|
||||
* @returns {*}
|
||||
*/
|
||||
const isObjectValueEqual = function(obj1, obj2) {
|
||||
let o1 = obj1 instanceof Object
|
||||
let o2 = obj2 instanceof Object
|
||||
// 不是对象的情况
|
||||
if (!o1 || !o2) {
|
||||
return obj1 === obj2
|
||||
}
|
||||
// 对象的属性（key值）个数不相等
|
||||
if (Object.keys(obj1).length !== Object.keys(obj2).length) {
|
||||
return false
|
||||
}
|
||||
// 判断每个属性（如果属性值也是对象则需要递归）
|
||||
for (let attr in obj1) {
|
||||
let t1 = obj1[attr] instanceof Object
|
||||
let t2 = obj2[attr] instanceof Object
|
||||
if (t1 && t2) {
|
||||
return isObjectValueEqual(obj1[attr], obj2[attr])
|
||||
} else if (obj1[attr] !== obj2[attr]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 生成uuid算法,碰撞率低于1/2^^122
|
||||
* @returns {string}
|
||||
*/
|
||||
const generateUUID = function() {
|
||||
let d = new Date().getTime()
|
||||
// x 是 0-9 或 a-f 范围内的一个32位十六进制数
|
||||
let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
let r = (d + Math.random() * 16) % 16 | 0
|
||||
d = Math.floor(d / 16)
|
||||
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
|
||||
})
|
||||
return uuid
|
||||
}
|
||||
|
||||
export default {
|
||||
node,
|
||||
anchor,
|
||||
edge,
|
||||
collapse,
|
||||
// 通用工具类函数
|
||||
isObjectValueEqual,
|
||||
generateUUID,
|
||||
deepClone,
|
||||
getRandomArrayElements
|
||||
}
|
||||
|
||||
11
src/views/custom-query/topo/utils/node/index.js
Normal file
11
src/views/custom-query/topo/utils/node/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: node
|
||||
*/
|
||||
|
||||
import setState from './set-state'
|
||||
|
||||
export default {
|
||||
setState
|
||||
}
|
||||
26
src/views/custom-query/topo/utils/node/set-state.js
Normal file
26
src/views/custom-query/topo/utils/node/set-state.js
Normal file
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: set node state
|
||||
*/
|
||||
|
||||
import theme from '@/views/custom-query/topo/top/theme'
|
||||
|
||||
export default function(name, value, item) {
|
||||
const group = item.getContainer()
|
||||
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||
let children = group.get('children')
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
let child = children[i]
|
||||
//判断是否为er图的外围,是则改变样式
|
||||
if (child.attrs.name === 'border') {
|
||||
if (name === 'selected') {
|
||||
if (value) {
|
||||
child.attr(themeStyle.nodeStyle.selected)
|
||||
} else {
|
||||
child.attr(themeStyle.nodeStyle.default)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/views/forbidden/index.vue
Normal file
15
src/views/forbidden/index.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<h2>
|
||||
该ip被拦截, 禁止访问!
|
||||
</h2>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
371
src/views/home/index.vue
Normal file
371
src/views/home/index.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<el-row :gutter="20" class="home-container">
|
||||
<el-col :span="18">
|
||||
<div class="home-top">
|
||||
<el-image :src="homeImage" style="width: 380px"/>
|
||||
<div class="top-right">
|
||||
<div>{{ authStore.userinfo.userName }}，欢迎回来！</div>
|
||||
<div>
|
||||
开源等于互助，开源需要大家一起来支持！欢迎加入我们！缘境后台管理系统是一套基于角色的权限管理系统, 方便用户更好的管理各项数据; 对于开发者而言, 它是一套快速开发框架。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="home-top-right">
|
||||
<el-image :src="coffee" style="height: 100px"/>
|
||||
<span>SmartOpsWeb </span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="statistics">
|
||||
<el-col :span="6" v-for="(item,index) in list" :key="index">
|
||||
<div class="block">
|
||||
<div>{{ item.title }}</div>
|
||||
<div>
|
||||
<el-icon>
|
||||
<User/>
|
||||
</el-icon>
|
||||
<span>{{ item.num }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin-top: 50px">
|
||||
<el-col :span="8">
|
||||
<div class="container">
|
||||
<div id="line" ref="line"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="container">
|
||||
<div id="rose" ref="rose"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="container">
|
||||
<div id="radar" ref="radar"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import homeImage from "@/assets/home/home.png"
|
||||
import coffee from "@/assets/home/coffee.png"
|
||||
import {useAuthStore} from '@/stores/userstore.js'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const list = ref([
|
||||
{
|
||||
title: '在线用户量',
|
||||
num: 21
|
||||
},
|
||||
{
|
||||
title: '用户总数',
|
||||
num: 242
|
||||
},
|
||||
{
|
||||
title: '角色总数',
|
||||
num: 42
|
||||
},
|
||||
{
|
||||
title: '部门总数',
|
||||
num: 14
|
||||
}
|
||||
])
|
||||
const barOption = {
|
||||
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||
title: {
|
||||
text: '用户增长情况'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
// data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
|
||||
},
|
||||
toolbox: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '访问量',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(128, 255, 165)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(1, 191, 236)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250]
|
||||
},
|
||||
{
|
||||
name: '在线量',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(0, 221, 255)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(77, 119, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 282, 111, 234, 220, 340, 310]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
const roseOption = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
title: {
|
||||
text: '系统管理',
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [50, 150],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 8
|
||||
},
|
||||
data: [
|
||||
{value: 40, name: '用户总数'},
|
||||
{value: 38, name: '角色总数'},
|
||||
{value: 32, name: '部门总数'},
|
||||
{value: 30, name: '岗位总数'},
|
||||
{value: 28, name: '字典总数'},
|
||||
{value: 26, name: '公告总数'},
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
const radarOption = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
title: {
|
||||
text: '浏览器比例', subtext: 'Fake Data',
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
bottom: 10,
|
||||
data: (function () {
|
||||
const list = [];
|
||||
for (let i = 1; i <= 28; i++) {
|
||||
list.push(i + 2000 + '');
|
||||
}
|
||||
return list;
|
||||
})()
|
||||
},
|
||||
visualMap: {
|
||||
top: 'middle',
|
||||
right: 10,
|
||||
color: ['red', 'yellow'],
|
||||
calculable: true
|
||||
},
|
||||
radar: {
|
||||
indicator: [
|
||||
{ text: 'IE8-', max: 400 },
|
||||
{ text: 'IE9+', max: 400 },
|
||||
{ text: 'Safari', max: 400 },
|
||||
{ text: 'Firefox', max: 400 },
|
||||
{ text: 'Chrome', max: 400 }
|
||||
]
|
||||
},
|
||||
series: (function () {
|
||||
const series = [];
|
||||
for (let i = 1; i <= 28; i++) {
|
||||
series.push({
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 1
|
||||
},
|
||||
emphasis: {
|
||||
areaStyle: {
|
||||
color: 'rgba(0,250,0,0.3)'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [
|
||||
(40 - i) * 10,
|
||||
(38 - i) * 4 + 60,
|
||||
i * 5 + 10,
|
||||
i * 9,
|
||||
(i * i) / 2
|
||||
],
|
||||
name: i + 2000 + ''
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
return series;
|
||||
})()
|
||||
};
|
||||
|
||||
const data = reactive({
|
||||
barCharts: null,
|
||||
pieCharts: null,
|
||||
radarCharts: null,
|
||||
line: null,
|
||||
rose: null,
|
||||
radar: null,
|
||||
})
|
||||
|
||||
const init = () => {
|
||||
data.barCharts = echarts.init(document.getElementById('line')).setOption(barOption)
|
||||
data.pieCharts = echarts.init(document.getElementById('rose')).setOption(roseOption)
|
||||
data.radarCharts = echarts.init(document.getElementById('radar')).setOption(radarOption)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
data.line = null
|
||||
data.rose = null
|
||||
data.barCharts = null
|
||||
data.pieCharts = null
|
||||
init()
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.home-top {
|
||||
//width: 1000px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
background-color: #e1eaf9;
|
||||
|
||||
.top-right {
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
letter-spacing: 1.5px;
|
||||
|
||||
> div:first-child {
|
||||
color: #557ad2;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-top-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.statistics {
|
||||
//display: flex;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.block {
|
||||
background-color: #e9edf2;
|
||||
border-radius: 4px;
|
||||
padding: 25px;
|
||||
|
||||
> div:first-child {
|
||||
color: #92969a;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
> div:last-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
color: #2c3f5d;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc((100vh / 2) - 150px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
> div {
|
||||
height: 400px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
src/views/login/index.vue
Normal file
136
src/views/login/index.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div class="login-box">
|
||||
<el-form
|
||||
:model="loginForm"
|
||||
ref="formInstance"
|
||||
:rules="rules"
|
||||
label-width="65px"
|
||||
>
|
||||
<h3>SmartOpsWeb</h3>
|
||||
<el-form-item prop="username" label="账号">
|
||||
<el-input v-model="loginForm.username" :prefix-icon="User" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" label="密码">
|
||||
<el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" ></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" label="验证码" >
|
||||
<div class="code">
|
||||
<el-input v-model="loginForm.code" :prefix-icon="key" @keyup.enter.native="handleLogin(formInstance)"></el-input>
|
||||
<img :src="codeImg" alt="" @click="getCode">
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleLogin(formInstance)" type="primary">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getCodeImg } from '../../api/login';
|
||||
import { useAuthStore } from '@/stores/userstore'
|
||||
import { ElLoading } from 'element-plus'
|
||||
import { User,Lock, Key } from '@element-plus/icons-vue'
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const loginForm = reactive({
|
||||
username: 'admin',
|
||||
password: '123456',
|
||||
code: '',
|
||||
uuid: ''
|
||||
})
|
||||
const codeImg = ref('')
|
||||
const formInstance = ref()
|
||||
const rules = reactive({
|
||||
username: [
|
||||
{ required: true, message: '请输入账户名', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
]
|
||||
})
|
||||
|
||||
//获取二维码
|
||||
const getCode = () => {
|
||||
getCodeImg().then(res=>{
|
||||
loginForm.uuid = res.data.uuid
|
||||
codeImg.value = 'data:image/gif;base64,' + res.data.img
|
||||
})
|
||||
}
|
||||
|
||||
const handleLogin = (instance) => {
|
||||
if(!instance) return
|
||||
instance.validate( async (valid, fields)=>{
|
||||
if (!valid) return
|
||||
// 发送请求
|
||||
await authStore.userLogin(loginForm).then(res=>{
|
||||
if (res) {
|
||||
ElLoading.service({
|
||||
lock: true,
|
||||
text: '登录中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
router.push('/')
|
||||
} else {
|
||||
getCode()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
getCode()
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
ElLoading.service({
|
||||
lock: true,
|
||||
text: '登录中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
}).close()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-box {
|
||||
height: 100%;
|
||||
background-color: #4158D0;
|
||||
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.el-form {
|
||||
padding: 12px 15px;
|
||||
border-radius: 12px;
|
||||
width: 25%;
|
||||
background-color: #fff;
|
||||
|
||||
h3 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.code {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
.el-input {
|
||||
// width: ;
|
||||
flex: 2;
|
||||
}
|
||||
img {
|
||||
height: 32px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
13
src/views/monitor/druid/index.vue
Normal file
13
src/views/monitor/druid/index.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
数据监控
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
13
src/views/monitor/job/index.vue
Normal file
13
src/views/monitor/job/index.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
定时任务
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
205
src/views/monitor/logininfor/index.vue
Normal file
205
src/views/monitor/logininfor/index.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="logForm">
|
||||
<el-form-item label="登录地址" prop="ipAddr">
|
||||
<el-input v-model="queryParams.ipAddr" placeholder="请输入登录地址" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="登录状态" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in [{label:'成功',value: '0'},{label:'失败',value: '1'}]"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录时间" prop="dateValue">
|
||||
<el-config-provider>
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</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="danger" :icon="Delete"
|
||||
@click="handleMoreDelete(infoId)" :disabled="disabled" plain>删除
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="infoId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="infoId" label="访问编号" align="center"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="ipddr" label="登录地址" align="center"/>
|
||||
<el-table-column prop="loginLocation" label="登录地点" align="center"/>
|
||||
<el-table-column prop="browser" label="浏览器" align="center"/>
|
||||
<el-table-column prop="os" label="操作系统" align="center"/>
|
||||
<el-table-column prop="state" label="登录状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="common_state" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="msg" label="操作信息" align="center"/>
|
||||
<el-table-column prop="loginTime" label="登录日期" sortable align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<popover-delete :name="scope.row.userName" :type="'日志'"
|
||||
@delete="handleDelete(scope.row.infoId)"/>
|
||||
</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"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh, Delete} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getLoginLogList, deleteLoginLog} from "@/api/log/login";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const dateValue = ref()
|
||||
const queryParams = reactive({
|
||||
ipAddr: '',
|
||||
userName: '',
|
||||
state: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
})
|
||||
const list = ref([])
|
||||
const logForm = ref()
|
||||
const singleTable = ref(null)
|
||||
const loading = ref(true)
|
||||
const pageInfo = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
})
|
||||
const total = ref()
|
||||
const infoId = ref([])
|
||||
const disabled = ref(true)
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '上周',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '上月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '三月前',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
//获取所有登录日志
|
||||
const getList = 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
|
||||
getLoginLogList(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);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//重置功能
|
||||
const handleReset = () => {
|
||||
dateValue.value = []
|
||||
logForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
|
||||
//删除功能
|
||||
const handleDelete = async (infoId) => {
|
||||
deleteLoginLog(infoId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//多删
|
||||
const handleMoreDelete = (infoId) => {
|
||||
ElMessageBox.confirm(`确认删除名称为${infoId}的日志吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
handleDelete(infoId)
|
||||
})
|
||||
}
|
||||
//勾选table数据行的 Checkbox, 多/单选删除功能
|
||||
const handleSelect = async (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false
|
||||
infoId.value = selection.map(item => item.infoId).join()
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getList()
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
136
src/views/monitor/online/index.vue
Normal file
136
src/views/monitor/online/index.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <el-form :model="queryParams" inline class="query-form" ref="form">-->
|
||||
<!-- <el-form-item label="登录地址" prop="place">-->
|
||||
<!-- <el-input v-model="queryParams.place" placeholder="请输入登录地点" clearable></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="用户名称" prop="username">-->
|
||||
<!-- <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable></el-input>-->
|
||||
<!-- </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="danger" @click="handleDelete" :icon="Delete" plain :disabled="disabled">删除</el-button>-->
|
||||
<!-- </div>-->
|
||||
<div class="table" style="margin-top: 15px">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="tokenId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<!-- <el-table-column type="selection" width="55" align="center"/>-->
|
||||
<!-- <el-table-column prop="tokenId" label="会话id" align="center"/>-->
|
||||
<el-table-column prop="username" label="用户名" align="center"/>
|
||||
<el-table-column prop="deptName" label="部门名称" align="center"/>
|
||||
<el-table-column prop="ipAddr" label="登录ip" align="center"/>
|
||||
<el-table-column prop="loginLocation" label="登录地点" align="center"/>
|
||||
<el-table-column prop="browser" label="浏览器类型" align="center"/>
|
||||
<el-table-column prop="os" label="操作系统" align="center"/>
|
||||
<el-table-column prop="loginTime" label="登录时间" sortable align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleForcedOffline(scope.row)" style="color: red" link>强制下线</el-button>
|
||||
</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"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh, Delete} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {deleteOnlineUser, getOnlineList} from "@/api/online/online";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const queryParams = reactive({
|
||||
place: '',
|
||||
username: ''
|
||||
})
|
||||
const list = ref([])
|
||||
const form = ref()
|
||||
const total = ref()
|
||||
const loading = ref(true)
|
||||
const pageInfo = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
})
|
||||
// const tokenId = ref()
|
||||
const singleTable = ref(null)
|
||||
const disabled = ref(true)
|
||||
//获取所有登录日志
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getOnlineList(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);
|
||||
}
|
||||
})
|
||||
}
|
||||
//重置功能
|
||||
const handleReset = () => {
|
||||
form.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
//勾选table数据行的 Checkbox, 单选功能
|
||||
// const handleSelect = async (selection, row) => {
|
||||
// if (selection.length !== 0) {
|
||||
// disabled.value = false
|
||||
// tokenId.value = row.tokenId
|
||||
// if (selection.length > 1) {
|
||||
// const del_row = selection.shift();
|
||||
// singleTable.value.toggleRowSelection(del_row, false);
|
||||
// }
|
||||
// } else {
|
||||
// disabled.value = true
|
||||
// }
|
||||
// }
|
||||
//强制下线
|
||||
const handleForcedOffline = async (row) => {
|
||||
ElMessageBox.confirm(`是否确认强制下线用户名为${row.username}的用户吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteOnlineUser(row.tokenId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getList()
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
337
src/views/monitor/operlog/index.vue
Normal file
337
src/views/monitor/operlog/index.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="logForm">
|
||||
<el-form-item label="服务名" prop="applicationName">
|
||||
<el-input v-model="queryParams.applicationName" placeholder="请输入服务名" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作名称" prop="title">
|
||||
<el-input v-model="queryParams.title" placeholder="请输入操作名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人员" prop="operName">
|
||||
<el-input v-model="queryParams.operName" placeholder="请输入操作人员" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="businessType">
|
||||
<el-select v-model="queryParams.businessType" placeholder="操作类型" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('oper_type')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="操作状态" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in [{label:'成功',value: '0'},{label:'失败',value: '1'}]"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作时间" prop="dateValue">
|
||||
<el-config-provider>
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</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="danger" :icon="Delete"
|
||||
@click="handleMoreDelete(operIds)" :disabled="disabled" plain>删除
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="operId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="50"/>
|
||||
<el-table-column prop="operId" label="日志编号" align="center"/>
|
||||
<el-table-column prop="applicationName" label="服务名称" align="center"/>
|
||||
<el-table-column prop="title" label="操作名称" align="center"/>
|
||||
<el-table-column prop="businessType" label="操作类型" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="oper_type" :value="scope.row.businessType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operName" label="操作人员" align="center"/>
|
||||
<el-table-column prop="operIp" label="操作地址" align="center"/>
|
||||
<el-table-column prop="operLocation" label="操作地点" align="center"/>
|
||||
<el-table-column prop="state" label="操作状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="common_state" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="operTime" label="操作日期" sortable align="center"/>
|
||||
<el-table-column prop="consumeTime" label="消耗时间" sortable align="center">
|
||||
<template #default="scope">
|
||||
{{ scope.row.consumeTime }}ms
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleViewDetails(scope.row.operId)" link>详细</el-button>
|
||||
<popover-delete :name="scope.row.operId" :type="'日志'"
|
||||
@delete="handleDelete(scope.row.operId)"/>
|
||||
</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="操作日志详细" width="1000px">
|
||||
<el-form :model="form">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="服务名称：" prop="title">
|
||||
<el-text>{{ form.applicationName }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="系统模块：" prop="title">
|
||||
<el-text>{{ form.title }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="请求地址：" prop="operUrl">
|
||||
<el-text>{{ form.operUrl }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="登录信息：" prop="title">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>{{ form.operName }}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>{{ form.operIp }}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>{{ form.operLocation }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="请求方式：" prop="requestMethod">
|
||||
<el-text>{{ form.requestMethod }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="操作方法：" prop="method">
|
||||
<el-text>{{ form.method }}</el-text>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求参数：" prop="operParam">
|
||||
<json-viewer :value="form.operParam"
|
||||
:expand-depth=5
|
||||
copyable
|
||||
boxed
|
||||
sort></json-viewer>
|
||||
</el-form-item>
|
||||
<el-form-item label="返回参数：" prop="jsonResult" v-if="form.state ==0">
|
||||
<json-viewer :value="form.jsonResult"
|
||||
:expand-depth=5
|
||||
copyable
|
||||
boxed
|
||||
sort></json-viewer>
|
||||
</el-form-item>
|
||||
<el-form-item label="返回参数：" prop="errorMsg" v-else>
|
||||
<el-text>{{ form.errorMsg }}</el-text>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.errorStackTrace" label="异常栈：" prop="errorMsg">
|
||||
<el-scrollbar height="450px">
|
||||
<div class="nowrap" v-html="form.errorStackTrace"></div>
|
||||
</el-scrollbar>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="操作状态：" prop="state">
|
||||
<tag dict-type="common_state" :value="form.state"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="消耗时间：" prop="consumeTime">
|
||||
<el-text>{{ form.consumeTime }}ms</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="操作时间：" prop="operTime">
|
||||
<el-text>{{ form.operTime }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import JsonViewer from "vue-json-viewer"
|
||||
import {Search, Refresh, Delete, View} from "@element-plus/icons-vue";
|
||||
import {getOperateLog, deleteOperateLog, getOperateLogDetail} from "@/api/log/operation";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
cacheStore.setCacheKey(['oper_type'])
|
||||
import Tag from '@/components/Tag.vue'
|
||||
|
||||
const queryParams = reactive({
|
||||
applicationName:"",
|
||||
title: "",
|
||||
operName: "",
|
||||
businessType: "",
|
||||
state: "",
|
||||
startTime: "",
|
||||
endTime: ""
|
||||
});
|
||||
const form = ref();
|
||||
const list = ref([]);
|
||||
const logForm = ref();
|
||||
const singleTable = ref(null);
|
||||
const loading = ref(true);
|
||||
const dateValue = ref();
|
||||
const total = ref();
|
||||
const operIds = ref([]);
|
||||
const disabled = ref(true);
|
||||
const isVisited = ref(false);
|
||||
const pageInfo = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
});
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "上周",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上月",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "三月前",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const getList = 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
|
||||
getOperateLog(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);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//重置功能
|
||||
const handleReset = () => {
|
||||
dateValue.value = [];
|
||||
logForm.value.resetFields();
|
||||
getList();
|
||||
};
|
||||
//单选删除功能
|
||||
const handleDelete = async (operId) => {
|
||||
deleteOperateLog(operId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//多删
|
||||
const handleMoreDelete = (operIds) => {
|
||||
ElMessageBox.confirm(`确认删除名称为${operIds}的日志吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
handleDelete(operIds)
|
||||
})
|
||||
}
|
||||
//勾选table数据行的 Checkbox, 实现单/多选删除功能
|
||||
const handleSelect = async (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false;
|
||||
operIds.value = selection.map(item => item.operId).join()
|
||||
} else {
|
||||
disabled.value = true;
|
||||
}
|
||||
}
|
||||
//查看详情
|
||||
const handleViewDetails = async (operId) => {
|
||||
getOperateLogDetail(operId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
isVisited.value = true;
|
||||
try {
|
||||
if (res.data.operParam !== null) {
|
||||
res.data.operParam = JSON.parse(res.data.operParam)
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
if (res.data.jsonResult !== null) {
|
||||
res.data.jsonResult = JSON.parse(res.data.jsonResult)
|
||||
}
|
||||
form.value = res.data
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
getList();
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.el-breadcrumb__item){
|
||||
line-height: normal;
|
||||
}
|
||||
</style>
|
||||
13
src/views/monitor/server/index.vue
Normal file
13
src/views/monitor/server/index.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
服务监控
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
67
src/views/rapid/gen/basicInfoForm.vue
Normal file
67
src/views/rapid/gen/basicInfoForm.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表名称" prop="tableName">
|
||||
<el-input placeholder="请输入仓库名称" v-model="info.tableName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="表描述" prop="tableComment">
|
||||
<el-input placeholder="请输入" v-model="info.tableComment"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="实体类名称" prop="className">
|
||||
<el-input placeholder="请输入" v-model="info.className"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="作者" prop="functionAuthor">
|
||||
<el-input placeholder="请输入" v-model="info.functionAuthor"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {defineExpose, defineProps} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
info: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
const basicInfoForm = ref()
|
||||
const rules = ref({
|
||||
tableName: [
|
||||
{required: true, message: "请输入表名称", trigger: "blur"}
|
||||
],
|
||||
tableComment: [
|
||||
{required: true, message: "请输入表描述", trigger: "blur"}
|
||||
],
|
||||
className: [
|
||||
{required: true, message: "请输入实体类名称", trigger: "blur"}
|
||||
],
|
||||
functionAuthor: [
|
||||
{required: true, message: "请输入作者", trigger: "blur"}
|
||||
]
|
||||
})
|
||||
defineExpose({
|
||||
basicInfoForm
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
</style>
|
||||
234
src/views/rapid/gen/editTable.vue
Normal file
234
src/views/rapid/gen/editTable.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<el-card style="margin-top: 15px">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="基本信息" name="info">
|
||||
<basic-info-form :info="info" ref="infoRef"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="字段信息" name="column">
|
||||
<el-table ref="columnRef" :data="columns" row-key="columnId" :max-height="tableHeight">
|
||||
<el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag"/>
|
||||
<el-table-column
|
||||
label="字段列名"
|
||||
prop="columnName"
|
||||
min-width="10%"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="字段描述" min-width="10%">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.columnComment"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="物理类型"
|
||||
prop="columnType"
|
||||
min-width="10%"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="Java类型" min-width="11%">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.javaType" filterable>
|
||||
<el-option label="Long" value="Long"/>
|
||||
<el-option label="String" value="String"/>
|
||||
<el-option label="Integer" value="Integer"/>
|
||||
<el-option label="Double" value="Double"/>
|
||||
<el-option label="BigDecimal" value="BigDecimal"/>
|
||||
<el-option label="Date" value="Date"/>
|
||||
<el-option label="Boolean" value="Boolean"/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="java属性" min-width="10%">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.javaField"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="插入" min-width="5%">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-label="1" false-label="0" v-model="scope.row.isInsert"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="编辑" min-width="5%">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-label="1" false-label="0" v-model="scope.row.isEdit"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列表" min-width="5%">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-label="1" false-label="0" v-model="scope.row.isList"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询" min-width="5%">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-label="1" false-label="0" v-model="scope.row.isQuery"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询方式" min-width="10%">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.queryType" filterable>
|
||||
<el-option label="=" value="EQ"/>
|
||||
<el-option label="!=" value="NE"/>
|
||||
<el-option label=">" value="GT"/>
|
||||
<el-option label=">=" value="GE"/>
|
||||
<el-option label="<" value="LT"/>
|
||||
<el-option label="<=" value="LE"/>
|
||||
<el-option label="LIKE" value="LIKE"/>
|
||||
<el-option label="BETWEEN" value="BETWEEN"/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否正则" min-width="10%">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.isRegular" filterable>
|
||||
<el-option v-for="item in regularOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"/>
|
||||
<span></span>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="必填" min-width="5%">
|
||||
<template #default="scope">
|
||||
<el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="显示类型" min-width="12%">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.htmlType" filterable>
|
||||
<el-option label="文本框" value="input"/>
|
||||
<el-option label="文本域" value="textarea"/>
|
||||
<el-option label="下拉框" value="select"/>
|
||||
<el-option label="单选框" value="radio"/>
|
||||
<el-option label="复选框" value="checkbox"/>
|
||||
<el-option label="日期控件" value="datetime"/>
|
||||
<el-option label="图片上传" value="imageUpload"/>
|
||||
<el-option label="文件上传" value="fileUpload"/>
|
||||
<el-option label="富文本控件" value="editor"/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典类型" min-width="12%">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择" >
|
||||
<el-option
|
||||
v-for="dict in dictOption"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value">
|
||||
<span style="float: left">{{ dict.value }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ dict.label }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="生成信息" name="table">
|
||||
<table-info :table="tables" :info="info" :columns="columns" :option-info="optionInfo" :dict-options="dictOption" ref="tableRef"/>
|
||||
</el-tab-pane>
|
||||
<el-form label-width="100px">
|
||||
<el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
|
||||
<el-button type="primary" @click="submitForm()">提交</el-button>
|
||||
<el-button @click="close()">返回</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getTableDetail, editCodeGen} from "@/api/rapid/code-gen";
|
||||
import {getRegularOpt} from "@/api/rapid/regular";
|
||||
import {getDictOption} from "@/api/system/dict-type";
|
||||
import BasicInfoForm from "./basicInfoForm.vue"
|
||||
import TableInfo from './tableInfo.vue'
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
const router = useRouter()
|
||||
const params = reactive(router.currentRoute.value.params)
|
||||
|
||||
const activeName = ref("column")
|
||||
const columns = ref([])
|
||||
const info = ref([])
|
||||
const regularOptions = ref([])
|
||||
const tables = ref([])
|
||||
const dictOption = ref([])
|
||||
const optionInfo = ref()
|
||||
const tableHeight = ref(document.documentElement.scrollHeight - 245 + 'px')
|
||||
|
||||
const getRegularOption = async () => {
|
||||
getRegularOpt().then(res => {
|
||||
if (res.code === 1000) {
|
||||
let def = [{
|
||||
value: 0,
|
||||
label: "无"
|
||||
}]
|
||||
def.push(...res.data)
|
||||
regularOptions.value = def
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getInfo = async () => {
|
||||
getDictOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
dictOption.value = res.data
|
||||
getDetail()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const submitForm = async () => {
|
||||
const infoData = {...info.value}
|
||||
infoData.optionInfo = {...optionInfo.value}
|
||||
const obj = {
|
||||
...infoData,
|
||||
columns: [...columns.value]
|
||||
}
|
||||
await editCodeGen(obj).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
return
|
||||
}
|
||||
ElMessage.error(res.msg)
|
||||
})
|
||||
}
|
||||
const getDetail = async () => {
|
||||
getTableDetail(params.tableId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
columns.value = res.data.columns
|
||||
info.value = res.data.info
|
||||
tables.value = res.data.tables
|
||||
optionInfo.value = res.data.optionInfo
|
||||
}else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const close = async () => {
|
||||
router.push({
|
||||
path: '/rapid/gen',
|
||||
})
|
||||
}
|
||||
|
||||
const getFormPromise = async (form) => {
|
||||
return new Promise(resolve => {
|
||||
form.validate(res => {
|
||||
resolve(res);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getRegularOption()
|
||||
|
||||
getInfo()
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
185
src/views/rapid/gen/importTable.vue
Normal file
185
src/views/rapid/gen/importTable.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<el-dialog v-model="isVisited" title="导入表" width="1000px">
|
||||
<el-form :model="queryParams" inline class="query-form" ref="dataSourceFrom" style="margin: 0">
|
||||
<el-form-item label="数据源" prop="businessType">
|
||||
<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="title">
|
||||
<el-input v-model="queryParams.tableName" placeholder="请输入表名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="表备注" prop="title">
|
||||
<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="queryParams"
|
||||
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="operId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="80"/>
|
||||
<el-table-column prop="tableName" label="表名称" align="center"/>
|
||||
<el-table-column prop="tableComment" label="表描述" align="center"/>
|
||||
<el-table-column prop="createTime" label="创建时间" sortable align="center"/>
|
||||
<el-table-column prop="updateTime" label="更新时间" sortable align="center"/>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleImport(scope.row)" link>导入</el-button>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getDynamicTable, importTable} from "@/api/rapid/code-gen";
|
||||
import {Search, Refresh, View} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import {defineExpose, defineProps} from "vue";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const emit = defineEmits(['importSuccess'])
|
||||
|
||||
const queryParams = reactive({
|
||||
dataSourceId: null,
|
||||
tableName: '',
|
||||
tableComment: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
})
|
||||
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const list = ref([])
|
||||
const dataSourceIds = ref()
|
||||
const loading = ref(true)
|
||||
const total = ref(0)
|
||||
const isVisited = ref(false)
|
||||
|
||||
const props = defineProps({
|
||||
dataSourceOption: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
queryId: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
})
|
||||
|
||||
const searchTableSearch = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
pageNum: pageInfo.pageNum,
|
||||
pageSize: pageInfo.pageSize
|
||||
}
|
||||
loading.value = true
|
||||
getDynamicTable(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)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const handleImportTable = async (data) => {
|
||||
importTable(data).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
isVisited.value = false
|
||||
emit("importSuccess")
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleImport = (item) => {
|
||||
let data = {
|
||||
dataSourceId: queryParams.dataSourceId,
|
||||
tables: [item.tableName]
|
||||
}
|
||||
handleImportTable(data)
|
||||
}
|
||||
|
||||
|
||||
//勾选table数据行的 Checkbox
|
||||
const handleSelect = async (selection, row) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false
|
||||
if (selection.length > 1) {
|
||||
const del_row = selection.shift();
|
||||
dataSourceIds.value.toggleRowSelection(del_row, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//重置功能
|
||||
const handleReset = () => {
|
||||
queryParams.dataSourceId = props.dataSourceOption[0].value
|
||||
queryParams.tableName = ''
|
||||
queryParams.tableComment = ''
|
||||
queryParams.startTime = ''
|
||||
queryParams.endTime = ''
|
||||
searchTableSearch()
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = async (val) => {
|
||||
pageInfo.pageSize = val
|
||||
await searchTableSearch()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.pageNum = val
|
||||
await searchTableSearch()
|
||||
}
|
||||
|
||||
const show = () => {
|
||||
isVisited.value = true
|
||||
if (props.queryId !== null) {
|
||||
queryParams.dataSourceId = props.queryId
|
||||
} else {
|
||||
queryParams.dataSourceId = props.dataSourceOption[0].value
|
||||
}
|
||||
searchTableSearch()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
</script>
|
||||
362
src/views/rapid/gen/index.vue
Normal file
362
src/views/rapid/gen/index.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="genForm">
|
||||
<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="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</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" plain :icon="UploadFilled" @click="handleImport(queryParams.dataSourceId)">导入
|
||||
</el-button>
|
||||
<el-button type="warning" @click="handleExport" :icon="Download" plain>导出</el-button>
|
||||
<el-button type="danger" :icon="Delete"
|
||||
@click="handleMoreDelete(tableId,tableName)" :disabled="disabled" plain>删除
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="tableName" label="表名称" align="center"/>
|
||||
<el-table-column prop="tableComment" label="表描述" align="center"/>
|
||||
<el-table-column prop="className" label="实体类" align="center"/>
|
||||
<el-table-column prop="dataSourceId" label="数据源" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="getDataSourceOptionItem(scope.row.dataSourceId)!==''">
|
||||
{{ getDataSourceOptionItem(scope.row.dataSourceId) }}
|
||||
</el-tag>
|
||||
<span v-else></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" sortable align="center"/>
|
||||
<el-table-column prop="updateTime" label="更新时间" sortable align="center"/>
|
||||
<el-table-column label="操作" width="260" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handlePreview(scope.row.tableId)" link>预览</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleEdit(scope.row.tableId)" link>编辑</el-button>
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSynchronization(scope.row.tableId)" link>同步
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleDownLoad(scope.row.tableId)" link>下载
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.tableName" :type="'表'"
|
||||
@delete="handleDeleteTable(scope.row.tableId)"/>
|
||||
</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"/>
|
||||
<import-table ref="importTableRef" :data-source-option="dataSourceOption" :query-id="importQueryId"
|
||||
@importSuccess="getList"/>
|
||||
|
||||
<el-dialog v-model="preview.isVisited" title="预览代码" width="1500px">
|
||||
<el-tabs v-model="preview.activeName" class="demo-tabs">
|
||||
<el-tab-pane
|
||||
v-for="(value,key) in preview.code"
|
||||
:label="key" :name="key">
|
||||
<el-link :underline="false" :icon="CopyDocument" @click="clipboardSuccess(value)"
|
||||
style="float:right">复制
|
||||
</el-link>
|
||||
<pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getTableList, deleteTable, deleteMoreTable, previewCode} from "@/api/rapid/code-gen";
|
||||
import {getDataSourceOption} from '@/api/rapid/data-source'
|
||||
import {downLoadZip} from "@/utils/downloadZip";
|
||||
import {Search, Refresh, Delete, Edit, View, Download, CopyDocument, UploadFilled} from '@element-plus/icons-vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import ImportTable from './importTable.vue'
|
||||
import java from 'highlight.js/lib/languages/java'
|
||||
import xml from 'highlight.js/lib/languages/xml'
|
||||
import javascript from 'highlight.js/lib/languages/javascript'
|
||||
import sql from 'highlight.js/lib/languages/sql'
|
||||
import hljs from "highlight.js/lib/highlight";
|
||||
import "highlight.js/styles/github-gist.css";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import useClipboard from "vue-clipboard3"
|
||||
import {syncDatabase} from "@/api/rapid/code-gen";
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
|
||||
hljs.registerLanguage("java", java);
|
||||
hljs.registerLanguage("xml", xml);
|
||||
hljs.registerLanguage("html", xml);
|
||||
hljs.registerLanguage("vue", javascript);
|
||||
hljs.registerLanguage("ts", javascript);
|
||||
hljs.registerLanguage("tsx", javascript);
|
||||
hljs.registerLanguage("js", javascript);
|
||||
hljs.registerLanguage("sql", sql);
|
||||
|
||||
const router = useRouter()
|
||||
const dsId = reactive(router.currentRoute.value.params.dsId)
|
||||
const queryParams = reactive({
|
||||
dataSourceId: null,
|
||||
dataSourceType: '',
|
||||
tableName: '',
|
||||
tableComment: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
})
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
const disabled = ref(true)
|
||||
const importQueryId = ref()
|
||||
const tableId = ref()
|
||||
const tableName = ref()
|
||||
const list = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref()
|
||||
const dateValue = ref()
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "上周",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上月",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "三月前",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
}
|
||||
}
|
||||
];
|
||||
const dataSourceOption = ref()
|
||||
const code = ref()
|
||||
const genForm = ref()
|
||||
const preview = ref({
|
||||
code: null,
|
||||
isVisited: false,
|
||||
activeName: null
|
||||
})
|
||||
const importTableRef = ref(null)
|
||||
const title = ref('')
|
||||
const {toClipboard} = useClipboard()
|
||||
onMounted(() => {
|
||||
if (dsId) {
|
||||
queryParams.dataSourceId = parseInt(dsId)
|
||||
getList()
|
||||
}
|
||||
})
|
||||
const handleExport = () => {
|
||||
downLoadExcel('/code-gen/table/export', {...queryParams})
|
||||
}
|
||||
const clipboardSuccess = (value) => {
|
||||
try {
|
||||
toClipboard(value)
|
||||
ElMessage.success("复制成功")
|
||||
} catch (e) {
|
||||
ElMessage.error("复制失败")
|
||||
}
|
||||
}
|
||||
const getOption = () => {
|
||||
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 handleDownLoad = async (tableId) => {
|
||||
downLoadZip(`/code-gen/table/downloads/${[tableId]}`)
|
||||
}
|
||||
const handleEdit = (tableId) => {
|
||||
router.push({
|
||||
path: `/rapid/gen/edit/${tableId}`,
|
||||
})
|
||||
|
||||
}
|
||||
//同步
|
||||
const handleSynchronization = async (tableId) => {
|
||||
syncDatabase(tableId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
/** 高亮显示 */
|
||||
const highlightedCode = (code, key) => {
|
||||
let language = key.split(".")[1];
|
||||
const result = hljs.highlight(language, code || "", true);
|
||||
// console.log(result.value)
|
||||
return result.value;
|
||||
}
|
||||
|
||||
const getList = 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
|
||||
getTableList(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);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//重置功能
|
||||
const handleReset = () => {
|
||||
genForm.value.resetFields()
|
||||
dateValue.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getList()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getList()
|
||||
}
|
||||
//勾选table数据行的 Checkbox
|
||||
const handleSelect = async (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false
|
||||
tableId.value = selection.map(item => item.tableId).join()
|
||||
tableName.value = selection.map(item => item.tableName).join()
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
}
|
||||
const handleDeleteTable = (tableId) => {
|
||||
deleteTable(tableId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
//多删
|
||||
const handleMoreDelete = (tableId, tableName) => {
|
||||
ElMessageBox.confirm(`确认删除名称为${tableName}的表格吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteMoreTable({
|
||||
tables: tableId
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//预览功能
|
||||
const handlePreview = async (tableId) => {
|
||||
previewCode(tableId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
let code = res.data;
|
||||
preview.value = {
|
||||
isVisited: true,
|
||||
activeName: Object.keys(code)[0],
|
||||
code: code
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleImport = async (val) => {
|
||||
title.value = "导入数据源"
|
||||
importQueryId.value = val
|
||||
nextTick(() => {
|
||||
importTableRef.value.show()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
getOption();
|
||||
</script>
|
||||
210
src/views/rapid/gen/tableInfo.vue
Normal file
210
src/views/rapid/gen/tableInfo.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<el-form ref="tableForm" :model="info" :rules="rules" label-width="130px">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="tplCategory" label="生成模板">
|
||||
<!-- <el-select v-model="info.tplCategory" @change="tplSelectChange" filterable>-->
|
||||
<el-select v-model="info.tplCategory" filterable>
|
||||
<el-option label="单表（增删改查）" value="crud"/>
|
||||
<el-option label="树表（增删改查）" value="tree"/>
|
||||
<el-option label="多表关联（增删改查）" value="rel"/>
|
||||
<el-option label="主子表（增删改查）" value="sub"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item prop="packageName" label="生成包路径">
|
||||
<el-tooltip content="生成在哪个java包下，例如 cn.odliken.system" placement="top">
|
||||
</el-tooltip>
|
||||
<el-input v-model="info.packageName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="tplCategory" label="后端模板">
|
||||
<el-select v-model="info.backTemplate" filterable>
|
||||
<el-option label="Mybatis" value="0"/>
|
||||
<el-option label="Mybatis-Plus" value="1"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item prop="tplCategory" label="前端模板">
|
||||
<el-select v-model="info.frontTemplate" filterable>
|
||||
<el-option label="Vue" value="0"/>
|
||||
<el-option label="React" value="1"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="moduleName" label="生成模块名">
|
||||
<el-tooltip content="可理解为子系统名，例如 system" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
<el-input v-model="info.moduleName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item prop="businessName" label="生成业务名">
|
||||
<el-tooltip content="可理解为功能英文名，例如 user" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
<el-input v-model="info.businessName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="functionName" label="生成功能名">
|
||||
<el-tooltip content="用作类描述，例如 用户" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
<el-input v-model="info.functionName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item prop="parentMenuId" label="上级菜单">
|
||||
<el-tree-select v-model="info.parentMenuId" :data="menus" style="width: 100%;"
|
||||
:filter-node-method="filterNodeMethod"
|
||||
filterable
|
||||
:check-strictly="true"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="serviceName" label="服务名称">
|
||||
<el-tooltip content="用作类描述，例如 用户" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
<el-input v-model="info.serviceName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item prop="optionInfoEnable" label="option接口生成">
|
||||
<el-radio-group v-model="optionInfo.enabled">
|
||||
<el-radio :label="true" border>启用option接口</el-radio>
|
||||
<el-radio :label="false" border>关闭option接口</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" v-if="optionInfo.enabled">
|
||||
<el-form-item prop="optionInfoValueField" label="值映射">
|
||||
<el-select v-model="optionInfo.valueField">
|
||||
<el-option
|
||||
v-for="column in columns"
|
||||
:key="column.id"
|
||||
:label="column.javaField"
|
||||
:value="column.javaField">
|
||||
<span style="float: left">{{ column.javaField }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ column.columnComment }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2" v-if="optionInfo.enabled">
|
||||
<el-form-item prop="optionInfoLabelFiled" label="标签映射">
|
||||
<el-select v-model="optionInfo.labelFiled">
|
||||
<el-option
|
||||
v-for="column in columns"
|
||||
:key="column.id"
|
||||
:label="column.javaField"
|
||||
:value="column.javaField">
|
||||
<span style="float: left">{{ column.javaField }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ column.columnComment }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {defineExpose, defineProps} from "vue";
|
||||
import {getMenuOpt} from '@/api/system/menuman.js'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
info: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
optionInfo: {
|
||||
type: Object,
|
||||
default: {
|
||||
enabled: 0
|
||||
}
|
||||
},
|
||||
tables: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
dictOptions: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
const menus = ref([])
|
||||
const tableForm = ref()
|
||||
const rules = ref({
|
||||
tplCategory: [
|
||||
{required: true, message: "请选择生成模板", trigger: "blur"}
|
||||
],
|
||||
packageName: [
|
||||
{required: true, message: "请输入生成包路径", trigger: "blur"}
|
||||
],
|
||||
moduleName: [
|
||||
{required: true, message: "请输入生成模块名", trigger: "blur"}
|
||||
],
|
||||
businessName: [
|
||||
{required: true, message: "请输入生成业务名", trigger: "blur"}
|
||||
],
|
||||
functionName: [
|
||||
{required: false, message: "请输入生成功能名", trigger: "blur"}
|
||||
],
|
||||
backTemplate: [
|
||||
{required: true, message: "请选择后端模板", trigger: "blur"}
|
||||
],
|
||||
frontTemplate: [
|
||||
{required: true, message: "请选择前端模板", trigger: "blur"}
|
||||
],
|
||||
serviceName: [
|
||||
{required: true, message: "请选输入服务名称", trigger: "blur"}
|
||||
],
|
||||
optionInfoEnable: [
|
||||
{required: true, message: "请选择前端模板", trigger: "blur"}
|
||||
],
|
||||
optionInfoValueField: [
|
||||
{required: true, message: "请选择值映射字段", trigger: "blur"}
|
||||
],
|
||||
optionInfoLabelFiled: [
|
||||
{required: true, message: "请选择前端模板标签映射字段", trigger: "blur"}
|
||||
],
|
||||
})
|
||||
|
||||
const handleSearch = async () => {
|
||||
getMenuOpt().then(res => {
|
||||
if (res.code === 1000) {
|
||||
menus.value = [{
|
||||
value: 0,
|
||||
label: "一级目录",
|
||||
children: res.data
|
||||
}]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const filterNodeMethod = (value, data) => data.label.includes(value)
|
||||
|
||||
|
||||
defineExpose({
|
||||
tableForm
|
||||
})
|
||||
|
||||
|
||||
handleSearch()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
302
src/views/rapid/regular/index.vue
Normal file
302
src/views/rapid/regular/index.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryForm">
|
||||
<el-form-item label="正则名称" prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="请输正则名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="正则内容" prop="regular">
|
||||
<el-input v-model="queryParams.regular" placeholder="请输正则内容" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证内容" prop="validation">
|
||||
<el-input v-model="queryParams.validation" placeholder="请输验证内容" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="enable">
|
||||
<el-select v-model="queryParams.enable" placeholder="请选择是否启用" clearable filterable>
|
||||
<el-option
|
||||
v-for="dict in cacheStore.getDict('regular_enable')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</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" v-perm="['rapid:regular:add']" @click="handleAdd" :icon="Plus" plain>新增</el-button>
|
||||
<el-button type="warning" v-perm="['rapid:regular:export']" @click="handleExport" :icon="Download" plain>导出
|
||||
</el-button>
|
||||
<el-button type="danger" v-perm="['rapid:regular:del']" @click="handleMoreDelete(regularId,regularNameList)" :icon="Delete" plain
|
||||
:disabled="disabled">删除
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="id"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="name" label="正则名称" align="center"/>
|
||||
<el-table-column prop="regular" label="正则内容" align="center"/>
|
||||
<el-table-column prop="enable" label="是否启用" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="regular_enable" :value="scope.row.enable"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"/>
|
||||
<el-table-column prop="updateTime" label="更新时间" align="center"/>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" v-perm="['rapid:regular:edit']"
|
||||
@click="handleEdit(scope.row.id)" link>编辑
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.name" :type="'正则校验'" :perm="['rapid:regular:del']"
|
||||
@delete="handleDelete(scope.row.id)"/>
|
||||
</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="900px">
|
||||
<el-form :model="form" ref="formInstance" :rules="formRules" label-width="100px" class="dialog-form">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="正则名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入正则名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="正则内容" prop="regular">
|
||||
<el-input v-model="form.regular" placeholder="请输入正则内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="验证内容" prop="validation">
|
||||
<el-input v-model="form.validation" placeholder="请输入验证内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="是否启用" prop="enable">
|
||||
<el-select v-model="form.enable" placeholder="请选择是否启用" clearable filterable>
|
||||
<el-option
|
||||
v-for="dict in cacheStore.getDict('regular_enable')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</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 {getRegularList, getRegularDetails, addRegular, editRegular, delRegular} from "@/api/rapid/regular";
|
||||
import {Search, Refresh, Delete, Plus, Edit, Download} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
cacheStore.setCacheKey(['regular_enable'])
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
//查询参数
|
||||
const queryParams = reactive({
|
||||
name: '',
|
||||
regular: '',
|
||||
validation: '',
|
||||
enable: undefined,
|
||||
})
|
||||
//页面信息
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const disabled = ref(true)
|
||||
const list = ref([])
|
||||
const queryForm = ref([])
|
||||
const regularId = ref([])
|
||||
const regularNameList = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref()
|
||||
const singleTable = ref()
|
||||
const title = ref('')
|
||||
const isVisited = ref(false)
|
||||
const form = ref()
|
||||
const formInstance = ref()
|
||||
const formRules = ref({
|
||||
name: [
|
||||
{required: true, message: "正则名称不能为空", trigger: "blur"},
|
||||
],
|
||||
regular: [
|
||||
{required: true, message: "正则内容不能为空", trigger: "blur"},
|
||||
],
|
||||
validation: [
|
||||
{required: true, message: "验证内容不能为空", trigger: "blur"},
|
||||
],
|
||||
enable: [
|
||||
{required: true, message: "是否启用 1:启动 2:关闭不能为空", trigger: "change"},
|
||||
],
|
||||
})
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
//获取数据
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getRegularList(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 = {
|
||||
name: null,
|
||||
regular: null,
|
||||
validation: null,
|
||||
enable: null,
|
||||
}
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restFrom()
|
||||
isVisited.value = false
|
||||
}
|
||||
//提交
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
if (title.value === '新增校验规则表') {
|
||||
addRegular(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
editRegular(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//添加
|
||||
const handleAdd = async () => {
|
||||
restFrom()
|
||||
title.value = "新增校验规则表"
|
||||
isVisited.value = true
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//修改
|
||||
const handleEdit = async (id) => {
|
||||
restFrom()
|
||||
getRegularDetails(id).then(res => {
|
||||
if (res.code === 1000) {
|
||||
form.value = res.data
|
||||
title.value = "编辑校验规则表"
|
||||
isVisited.value = true
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//导出excel
|
||||
const handleExport = () => {
|
||||
downLoadExcel('/code-gen/rapid/regular/export', {...queryParams})
|
||||
}
|
||||
|
||||
//勾选table数据行的 Checkbox
|
||||
const handleSelect = async (selection, row) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false
|
||||
regularId.value = selection.map(item => item.id).join()
|
||||
regularNameList.value = selection.map(item => item.name).join()
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = async (val) => {
|
||||
pageInfo.value.pageSize = val
|
||||
await getList()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.value.pageNum = val
|
||||
await getList()
|
||||
}
|
||||
const handleMoreDelete=(regularId,regularNameList)=>{
|
||||
ElMessageBox.confirm(`确认删除名称为${regularNameList}的校验规则表吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
handleDelete(regularId)
|
||||
})
|
||||
}
|
||||
//删除
|
||||
const handleDelete = async (id) => {
|
||||
delRegular(id).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
380
src/views/rapid/source/index.vue
Normal file
380
src/views/rapid/source/index.vue
Normal file
@@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="sourceForm" @submit.prevent="getList">
|
||||
<el-form-item label="数据源名称" prop="dsName">
|
||||
<el-input v-model="queryParams.dsName" placeholder="请输入数据源名称" clearable></el-input>
|
||||
</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="warning" @click="handleExport" :icon="Download" plain>导出</el-button>
|
||||
<el-button type="danger" @click="handleMoreDelete(sourceId,sourceNameList)" :icon="Delete" plain
|
||||
:disabled="disabled">删除
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="dsId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" width="60" align="center"/>
|
||||
<el-table-column prop="dsName" label="数据源名称" align="center"/>
|
||||
<el-table-column prop="dbName" label="数据库名称" align="center"/>
|
||||
<el-table-column prop="username" label="用户名称" align="center"/>
|
||||
<el-table-column prop="jdbcUrl" label="数据库连接url" align="center" width="140">
|
||||
<template #default="scope">
|
||||
<div class="formatterJdbcUrl">{{ scope.row.jdbcUrl }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="confType" label="数据源配置类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="data_source_config" :value="scope.row.confType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleEdit(scope.row.dsId)" link>编辑</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleAssociatedData(scope.row.dsId)" link>关联数据</el-button>
|
||||
<popover-delete :name="scope.row.dsName" :type="'数据源信息'"
|
||||
@delete="handleDelete(scope.row.dsId)"/>
|
||||
</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="900px">
|
||||
<el-form :model="form" ref="formInstance" :rules="formRules" class="dialog-form">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="form.type" placeholder="请选择数据源类型" filterable @change="handleTypeChange(form.type)">
|
||||
<el-option
|
||||
v-for="typeItem in typeList"
|
||||
:key="typeItem.value"
|
||||
:label="typeItem.label"
|
||||
:value="typeItem.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="数据源名称" prop="dsName">
|
||||
<el-input v-model="form.dsName" placeholder="请输入数据源名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="form.password" placeholder="请输入密码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="配置类型" prop="confType">
|
||||
<el-radio-group v-model="form.confType">
|
||||
<el-radio border :label="1">主机</el-radio>
|
||||
<el-radio border :label="2">JDBC</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2" v-if="form.confType === 1">
|
||||
<el-form-item label="端口" prop="port">
|
||||
<el-input-number v-model="form.port"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" v-if="form.confType === 1">
|
||||
<el-form-item label="主机" prop="host">
|
||||
<el-input v-model="form.host" placeholder="请输入主机"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2" v-if="form.confType === 1">
|
||||
<el-form-item label="数据库名称" prop="dbName">
|
||||
<el-input v-model="form.dbName" placeholder="请输入数据库名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="form.confType === 2">
|
||||
<el-form-item label="连接地址" prop="jdbcUrl">
|
||||
<el-input v-model="form.jdbcUrl"
|
||||
:rows="4"
|
||||
type="textarea" placeholder="请输入连接地址"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="form.confType === 1">
|
||||
<el-form-item label="配置参数" prop="args">
|
||||
<el-input v-model="form.args" :rows="4"
|
||||
type="textarea" placeholder="请输入配置参数"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="服务名称" prop="params.serviceName" v-if="form.type === 'ORACLE' && form.confType===1">
|
||||
<el-input v-model="form.params.serviceName" placeholder="请输入服务名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="命名空间" prop="params.namespace" v-if="form.type === 'POSTGRES' && form.confType===1">
|
||||
<el-input v-model="form.params.namespace" placeholder="请输入命名空间"></el-input>
|
||||
</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 {
|
||||
getDataSourceList,
|
||||
deleteDataSource,
|
||||
getDataSource,
|
||||
addDataSource,
|
||||
editDataSource,
|
||||
getDataSourceOptionType
|
||||
} from "@/api/rapid/data-source";
|
||||
import {Search, Refresh, Delete, Plus, Edit, Download} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
|
||||
const router = useRouter()
|
||||
const queryParams = reactive({
|
||||
dsName: '',
|
||||
})
|
||||
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
|
||||
const disabled = ref(true)
|
||||
const typeList = ref([])
|
||||
const list = ref([])
|
||||
const sourceForm = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref()
|
||||
const title = ref('')
|
||||
const isVisited = ref(false)
|
||||
const sourceId = ref();
|
||||
const sourceNameList = ref();
|
||||
const singleTable = ref();
|
||||
const form = ref()
|
||||
const formInstance = ref()
|
||||
const formRules = ref({
|
||||
type: [{required: true, message: '请输选择数据库类型', trigger: 'blur'}],
|
||||
dsName: [{required: true, message: '请输入数据源名称', trigger: 'blur'}],
|
||||
username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
|
||||
password: [{required: true, message: '请输入密码', trigger: 'blur'}],
|
||||
confType: [{required: true, message: '请输选择配置类型', trigger: 'blur'}],
|
||||
port: [{required: true, message: '请输入服务端口', trigger: 'blur'}],
|
||||
host: [{required: true, message: '请输入主机', trigger: 'blur'}],
|
||||
dbName: [{required: true, message: '请输入数据库名称', trigger: 'blur'}],
|
||||
jdbcUrl: [{required: true, message: '请输入连接地址', trigger: 'blur'}],
|
||||
params: {
|
||||
serviceName: [{required: true, message: '请输入服务名称', trigger: 'blur'}],
|
||||
namespace: [{required: true, message: '请输入命名空间', trigger: 'blur'}]
|
||||
}
|
||||
})
|
||||
|
||||
const handleReset = () => {
|
||||
sourceForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
const getTypeOption = () => {
|
||||
getDataSourceOptionType().then(res => {
|
||||
typeList.value = res.data
|
||||
})
|
||||
}
|
||||
const handleTypeChange = (type) => {
|
||||
if (form.value.confType !== 1) {
|
||||
return;
|
||||
}
|
||||
if (type === 'ORACLE') {
|
||||
form.value.params = {
|
||||
serviceName: ''
|
||||
}
|
||||
}
|
||||
if (type === 'POSTGRES') {
|
||||
form.value.params = {
|
||||
namespace: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getDataSourceList(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)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const restFrom = () => {
|
||||
form.value = {
|
||||
remark: null,
|
||||
dsId: null,
|
||||
dsName: "",
|
||||
username: "",
|
||||
password: "",
|
||||
host: "",
|
||||
port: 0,
|
||||
type: "",
|
||||
dbName: "",
|
||||
jdbcUrl: null,
|
||||
confType: 1,
|
||||
args: null,
|
||||
params: null
|
||||
}
|
||||
getTypeOption()
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
restFrom()
|
||||
isVisited.value = false
|
||||
}
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid, fields) => {
|
||||
if (!valid) return
|
||||
if (title.value === '新增数据源') {
|
||||
console.log('form.value', form.value)
|
||||
addDataSource(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
editDataSource(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
formRules.value.password[0].required = true
|
||||
restFrom()
|
||||
title.value = "新增数据源"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
const handleAssociatedData = (dsId) => {
|
||||
router.push('/rapid/data/' + dsId)
|
||||
}
|
||||
const handleEdit = async (dsId) => {
|
||||
restFrom()
|
||||
getDataSource(dsId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
formRules.value.password[0].required = false
|
||||
form.value = res.data
|
||||
title.value = "编辑数据源"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
downLoadExcel('/code-gen/data-source/export', {...queryParams})
|
||||
}
|
||||
|
||||
//勾选table数据行的 Checkbox
|
||||
const handleSelect = async (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false
|
||||
sourceId.value = selection.map(item => item.dsId).join()
|
||||
sourceNameList.value = selection.map(item => item.dsName).join()
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = async (val) => {
|
||||
pageInfo.value.pageSize = val
|
||||
await getList()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.value.pageNum = val
|
||||
await getList()
|
||||
}
|
||||
const handleMoreDelete = (dsId, sourceNameList) => {
|
||||
ElMessageBox.confirm(`确认删除名称为${sourceNameList}的数据源信息吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
handleDelete(dsId)
|
||||
})
|
||||
}
|
||||
const handleDelete = async (dsId) => {
|
||||
deleteDataSource(dsId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.formatterJdbcUrl {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
304
src/views/system/config/index.vue
Normal file
304
src/views/system/config/index.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryForm">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="queryParams.configName" placeholder="请输参数名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input v-model="queryParams.configKey" placeholder="请输参数键名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="系统内置" prop="configType">
|
||||
<el-select v-model="queryParams.configType" placeholder="请选择系统内置" clearable filterable>
|
||||
<el-option
|
||||
v-for="dict in cacheStore.getDict('yes_no')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</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" v-perm="['admin:config:add']" @click="handleAdd" :icon="Plus" plain>新增</el-button>
|
||||
<el-button type="danger" v-perm="['admin:config:del']" @click="handleMoreDelete(configIds,configNameList)"
|
||||
:icon="Delete" plain
|
||||
:disabled="disabled">删除
|
||||
</el-button>
|
||||
<el-button type="warning" v-perm="['admin:config:export']" @click="handleExport" :icon="Download" plain>导出
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="configId"
|
||||
:lazy="true"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" width="60"/>
|
||||
<el-table-column prop="configName" label="参数名称" align="center"/>
|
||||
<el-table-column prop="configKey" label="参数键名" align="center"/>
|
||||
<el-table-column prop="configValue" label="参数键值" align="center"/>
|
||||
<el-table-column prop="configType" label="系统内置" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="yes_no" :value="scope.row.configType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center"/>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" v-perm="['admin:config:edit']"
|
||||
@click="handleEdit(scope.row.configId)" link>编辑
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.dsName" :type="'参数配置表'" :perm="['admin:config:del']"
|
||||
@delete="handleDelete(scope.row.configId)"/>
|
||||
</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="900px">
|
||||
<el-form :model="form" ref="formInstance" :rules="formRules" label-width="100px" class="dialog-form">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="form.configName" placeholder="请输入参数名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input v-model="form.configKey" placeholder="请输入参数键名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="参数键值" prop="configValue">
|
||||
<el-input v-model="form.configValue" placeholder="请输入参数值"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="系统内置" prop="configType">
|
||||
<el-select v-model="form.configType" placeholder="请选择系统内置" clearable filterable>
|
||||
<el-option
|
||||
v-for="dict in cacheStore.getDict('yes_no')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输备注"></el-input>
|
||||
</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 {getConfigList, getConfigDetails, addConfig, editConfig, delConfig} from "@/api/system/config";
|
||||
import {Search, Refresh, Delete, Plus, Edit, Download} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
//查询参数
|
||||
const queryParams = reactive({
|
||||
configName: '',
|
||||
configKey: '',
|
||||
configType: undefined,
|
||||
})
|
||||
//页面信息
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const disabled = ref(true)
|
||||
const list = ref([])
|
||||
const queryForm = ref([])
|
||||
const configIds = ref([])
|
||||
const configNameList = ref([])
|
||||
const loading = ref(true)
|
||||
const total = ref()
|
||||
const title = ref('')
|
||||
const isVisited = ref(false)
|
||||
const form = ref()
|
||||
const formInstance = ref()
|
||||
const formRules = ref({
|
||||
configName: [
|
||||
{required: true, message: "参数名称不能为空", trigger: "blur"},
|
||||
],
|
||||
configKey: [
|
||||
{required: true, message: "参数键名不能为空", trigger: "blur"},
|
||||
],
|
||||
configValue: [
|
||||
{required: true, message: "参数键值不能为空", trigger: "blur"},
|
||||
],
|
||||
configType: [
|
||||
{required: true, message: "系统内置不能为空", trigger: "change"},
|
||||
],
|
||||
})
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
//获取数据
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
loading.value = true
|
||||
getConfigList(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 = {
|
||||
configName: null,
|
||||
configKey: null,
|
||||
configValue: null,
|
||||
configType: null,
|
||||
remark: null
|
||||
}
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restFrom()
|
||||
isVisited.value = false
|
||||
}
|
||||
//提交
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
if (title.value === '新增参数配置表') {
|
||||
addConfig(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
editConfig(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
//添加
|
||||
const handleAdd = async () => {
|
||||
restFrom()
|
||||
title.value = "新增参数配置表"
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//修改
|
||||
const handleEdit = async (configId) => {
|
||||
restFrom()
|
||||
getConfigDetails(configId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
form.value = res.data
|
||||
title.value = "编辑参数配置表"
|
||||
isVisited.value = true
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//导出excel
|
||||
const handleExport = () => {
|
||||
downLoadExcel('/admin/config/export', {...queryParams})
|
||||
}
|
||||
|
||||
//勾选table数据行的 Checkbox
|
||||
const handleSelect = async (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
disabled.value = false
|
||||
configIds.value = selection.map(item => item.configId).join()
|
||||
configNameList.value = selection.map(item => item.configName).join()
|
||||
} else {
|
||||
disabled.value = true
|
||||
}
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = async (val) => {
|
||||
pageInfo.value.pageSize = val
|
||||
await getList()
|
||||
}
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = async (val) => {
|
||||
pageInfo.value.pageNum = val
|
||||
await getList()
|
||||
}
|
||||
const handleMoreDelete = (configId, configName) => {
|
||||
ElMessageBox.confirm(`确认删除名称为${configName}的参数配置表吗?`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
handleDelete(configId)
|
||||
})
|
||||
}
|
||||
//删除
|
||||
const handleDelete = async (configId) => {
|
||||
delConfig(configId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
330
src/views/system/dept/index.vue
Normal file
330
src/views/system/dept/index.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="部门状态" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('normal_disable')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
<el-button type="info" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="list"
|
||||
ref="tableTree"
|
||||
:default-expand-all="isExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
row-key="deptId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
@expand-change="expandChange"
|
||||
@cell-click="cellClick"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column prop="deptName" label="部门名称"/>
|
||||
<el-table-column prop="orderNum" label="排序" width="60px"/>
|
||||
<el-table-column prop="state" label="状态">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column label="操作" prop="operation">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleAddLine(scope.row.deptId)" link>新增</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleEdit(scope.row.deptId)" link>修改</el-button>
|
||||
<popover-delete v-if="scope.row.parentId!==0" :name="scope.row.deptName" :type="'部门'"
|
||||
@delete="handleDelete(scope.row.deptId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog v-model="isVisited" :title="title" width="700px">
|
||||
<el-form :model="form" ref="formInstance" label-width="90px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="上级部门" prop="parentId">
|
||||
<div v-if="form.parentId==0&&title=='修改部门'">
|
||||
<el-input v-model="form.deptName" placeholder="请输入部门名称" disabled style="width: 560px"></el-input>
|
||||
</div>
|
||||
<el-tree-select
|
||||
v-else
|
||||
ref="treeSelect"
|
||||
v-model="form.parentId"
|
||||
placeholder="请选择上级部门"
|
||||
:data="deptList"
|
||||
:props="deptProps"
|
||||
value-key="value"
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
style="width: 560px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input v-model="form.deptName" placeholder="请输入部门名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示排序" prop="orderNum">
|
||||
<el-input-number v-model="form.orderNum" style="width: 230px"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="负责人" prop="leader">
|
||||
<el-input v-model="form.leader" placeholder="请输入负责人"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系电话" prop="phone">
|
||||
<el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-radio-group v-model="form.state" size="mini">
|
||||
<el-radio v-for="dept in cacheStore.getDict('normal_disable')" :key="dept.value"
|
||||
:label="dept.value">
|
||||
{{ dept.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleDataCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh, Plus, Sort} from "@element-plus/icons-vue";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import {getDeptList, getDeptOption,addDept, deleteDept, editDept, getDeptDetail, getDeptExcludeOption} from "@/api/dept/dept";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
const queryInstance = ref()
|
||||
const queryParams = reactive({
|
||||
deptName: '',
|
||||
state: ''
|
||||
})
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const tableTree = ref()
|
||||
const isExpand = ref(true)
|
||||
const isVisited = ref(false);
|
||||
const title = ref();
|
||||
const form = ref();
|
||||
const formInstance = ref();
|
||||
const rules = reactive({
|
||||
parentId: [
|
||||
{required: true, message: '请选择上级部门', trigger: 'blur'},
|
||||
],
|
||||
deptName: [
|
||||
{required: true, message: '请输入部门名称', trigger: 'blur'},
|
||||
],
|
||||
orderNum: [
|
||||
{required: true, message: '请选择显示顺序', trigger: 'blur'},
|
||||
]
|
||||
})
|
||||
const deptList = ref([]);
|
||||
const deptProps = reactive({
|
||||
value: "value",
|
||||
label: "label"
|
||||
});
|
||||
//获取部门option
|
||||
const getDepartmentList = async () => {
|
||||
//获取部门信息
|
||||
getDeptOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
deptList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取修改时的option
|
||||
const getEditOption = (deptId) => {
|
||||
getDeptExcludeOption(deptId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
deptList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
getDeptList(queryParams).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
const getDetail = (deptId) => {
|
||||
getDeptDetail(deptId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
console.log(res.data)
|
||||
if (title.value == "行内新增部门") {
|
||||
form.value.parentId = res.data.deptId
|
||||
} else {
|
||||
form.value = res.data;
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
leaderId: 0,
|
||||
parentId: '',
|
||||
deptName: null,
|
||||
orderNum: 0,
|
||||
state: '1',
|
||||
leader: null,
|
||||
phone: null,
|
||||
email: null
|
||||
};
|
||||
};
|
||||
|
||||
const cellClick = (row,column) => {
|
||||
if ("operation" !== column.property){
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
|
||||
//添加功能
|
||||
const handleAdd = () => {
|
||||
restForm();
|
||||
getDepartmentList()
|
||||
title.value = "新增部门";
|
||||
isVisited.value = true;
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
};
|
||||
const handleAddLine = (deptId) => {
|
||||
restForm();
|
||||
getDepartmentList()
|
||||
title.value = "行内新增部门";
|
||||
isVisited.value = true;
|
||||
getDetail(deptId)
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
//编辑部门
|
||||
const handleEdit = (deptId) => {
|
||||
restForm();
|
||||
getEditOption(deptId)
|
||||
getDetail(deptId)
|
||||
title.value = "修改部门";
|
||||
isVisited.value = true;
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
expandChange(list.value, isExpand)
|
||||
getList()
|
||||
}
|
||||
//展开收缩封装函数
|
||||
const expandChange = (data, isExpansion) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
tableTree.value.toggleRowExpansion(data[i], isExpansion);
|
||||
if (data[i].children !== null) {
|
||||
expandChange(data[i].children, isExpansion);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//删除功能
|
||||
const handleDelete = (deptId) => {
|
||||
deleteDept(deptId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleDataCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (title.value == "新增部门") {
|
||||
addDept(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editDept(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
362
src/views/system/menu/DistributeRole.vue
Normal file
362
src/views/system/menu/DistributeRole.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="roleForm">
|
||||
<el-form-item label="当前菜单" prop="userName">
|
||||
<el-tag >{{menuName}}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识符" prop="roleKey">
|
||||
<el-input
|
||||
v-model="queryParams.roleKey"
|
||||
placeholder="请输入角色标识符"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchRole" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加角色</el-button>
|
||||
<el-button type="primary" @click="handleBack" :icon="RefreshLeft" plain>返回</el-button>
|
||||
<el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
|
||||
<el-button type="danger" @click="handleMoreCancelAuthorization(cancelRoleIds,roleNames)" :icon="CircleClose" plain :disabled="moreCancelDisabled">批量取消</el-button>
|
||||
<el-button type="danger" @click="handleDeleteMenu" :icon="Delete" plain v-if="showDeleteCurrent">删除当前菜单</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="roleId"
|
||||
:lazy="true"
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="roleName" label="角色名称" align="center"/>
|
||||
<el-table-column prop="roleKey" label="角色标识符" align="center"/>
|
||||
<el-table-column prop="dataScope" label="数据范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="roleSort" label="显示顺序" align="center" width="100px"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<popover-delete :name="scope.row.roleName" :type="'角色'" :btn-text="'取消授权'"
|
||||
@delete="handleCancelAuthorization([scope.row.roleId])"/>
|
||||
</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="830px">
|
||||
<el-form :model="query" class="query-form" inline ref="formInstance">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="query.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识符" prop="roleKey">
|
||||
<el-input
|
||||
v-model="query.roleKey"
|
||||
placeholder="请输入角色标识符"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getExcludeRole" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="roleList"
|
||||
row-key="roleId"
|
||||
:lazy="true"
|
||||
v-loading="dialogLoading"
|
||||
@select="handleDialogSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="roleName" label="角色名称" align="center"/>
|
||||
<el-table-column prop="roleKey" label="角色标识符" align="center"/>
|
||||
<el-table-column prop="dataScope" label="数据范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="roleSort" label="显示顺序" align="center" width="100px"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSubmit(scope.row.roleId)" link>添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>
|
||||
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(roleIds)" :disabled="dialogDisabled">批量添加</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Plus, Search, Refresh, RefreshLeft,CircleClose,Delete} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getRoleInfoByMenuId,getRoleExcludeMenuId,unbindAllRole,cancelAuthorization,bindRoleAndMenu} from "@/api/role/role"
|
||||
import {useRouter} from "vue-router";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {delMenu,getMenuInfo} from "@/api/system/menuman";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
|
||||
const router = useRouter();
|
||||
const tagsViewStore = useTagsView()
|
||||
const menuId = reactive(router.currentRoute.value.params.menuId)
|
||||
const menuName =ref('')
|
||||
const roleForm = ref();
|
||||
const table = ref();
|
||||
const title = ref('添加角色');
|
||||
const list = ref([]);
|
||||
const roleList = ref([]);
|
||||
const total = ref([]);
|
||||
const dialogTotal = ref([]);
|
||||
const moreCancelDisabled = ref(true);
|
||||
const dialogDisabled = ref(true);
|
||||
const loading = ref(true);
|
||||
const dialogLoading = ref(true);
|
||||
const showDeleteCurrent = ref(false);
|
||||
const roleNames = ref([]);
|
||||
const cancelRoleIds = ref([]);
|
||||
const roleIds = ref([]);
|
||||
const queryParams = reactive({
|
||||
roleName: "",
|
||||
roleKey: ""
|
||||
});
|
||||
const query = reactive({
|
||||
roleName: "",
|
||||
roleKey: ""
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
onMounted(()=>{
|
||||
getName()
|
||||
})
|
||||
const getName=()=>{
|
||||
getMenuInfo(menuId).then(res => {
|
||||
menuName.value = res.data.menuName
|
||||
})
|
||||
}
|
||||
//角色搜索重置
|
||||
const handleReset = () => {
|
||||
roleForm.value.resetFields();
|
||||
searchRole();
|
||||
};
|
||||
const handleDialogReset = () => {
|
||||
formInstance.value.resetFields();
|
||||
getExcludeRole();
|
||||
};
|
||||
//根据菜单id获取角色信息
|
||||
const searchRole = async () => {
|
||||
let params = {
|
||||
menuId: menuId,
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getRoleInfoByMenuId(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
showDeleteCurrent.value = res.data.rows.length === 0;
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取添加弹窗的角色
|
||||
const getExcludeRole = async () => {
|
||||
let params = {
|
||||
menuId: menuId,
|
||||
...query,
|
||||
...pageInfo
|
||||
};
|
||||
dialogLoading.value = true;
|
||||
getRoleExcludeMenuId(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
roleList.value = res.data.rows;
|
||||
dialogTotal.value = res.data.total;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//添加角色
|
||||
const handleAdd = () => {
|
||||
getExcludeRole()
|
||||
isVisited.value = true
|
||||
dialogDisabled.value = true
|
||||
}
|
||||
//全部取消授权
|
||||
const handleCancelAll = () => {
|
||||
ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
unbindAllRole(menuId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchRole()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
//取消授权
|
||||
const handleCancelAuthorization = (roleId) => {
|
||||
cancelAuthorization(menuId, roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
moreCancelDisabled.value=true
|
||||
searchRole()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//批量取消授权
|
||||
const handleMoreCancelAuthorization = (cancelUserIds, userName) => {
|
||||
ElMessageBox.confirm(`确认取消授权名称为"${userName}"的角色吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
handleCancelAuthorization(cancelUserIds)
|
||||
})
|
||||
}
|
||||
const handleBack=()=>{
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/menu')
|
||||
}
|
||||
//删除当前菜单
|
||||
const handleDeleteMenu=()=>{
|
||||
ElMessageBox.confirm(`确认删除名称为"${menuName}"的菜单吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
delMenu(menuId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/menu')
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
moreCancelDisabled.value = false;
|
||||
cancelRoleIds.value=selection.map(item=>item.roleId)
|
||||
roleNames.value=selection.map(item=>item.roleName).join()
|
||||
} else {
|
||||
moreCancelDisabled.value = true;
|
||||
}
|
||||
}
|
||||
const handleDialogSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
dialogDisabled.value = false;
|
||||
roleIds.value=selection.map(item=>item.roleId)
|
||||
} else {
|
||||
dialogDisabled.value = true;
|
||||
}
|
||||
}
|
||||
//添加角色
|
||||
const handleSubmit = (roleId) => {
|
||||
bindRoleAndMenu(menuId,roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchRole()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
searchRole();
|
||||
};
|
||||
const handleSizeChangeDialog = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getExcludeRole();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
searchRole();
|
||||
};
|
||||
const handleCurrentChangeDialog = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getExcludeRole();
|
||||
};
|
||||
|
||||
searchRole()
|
||||
</script>
|
||||
417
src/views/system/menu/index.vue
Normal file
417
src/views/system/menu/index.vue
Normal file
@@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" label-width="70px" class="query-form" inline ref="queryInstance">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="queryParams.menuName" placeholder="菜单名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="菜单状态" clearable filterable>
|
||||
<el-option v-for="item in cacheStore.getDict('normal_disable')" :key="item.value" :label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset(queryInstance)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
<el-button type="info" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="list" ref="tableTree" :default-expand-all="isExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="menuId" :lazy="true"
|
||||
@cell-click="cellClick"
|
||||
v-loading="loading" v-tabh>
|
||||
<el-table-column prop="menuName" label="菜单名称"/>
|
||||
<el-table-column prop="icon" label="图标" width="60px">
|
||||
<template #default="scope">
|
||||
<!-- <el-icon>-->
|
||||
<!-- <component :is="scope.row.icon" />-->
|
||||
<!-- </el-icon>-->
|
||||
<svg-icon :name="scope.row.icon" :class-name="'black-icon'"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" width="60px"/>
|
||||
<el-table-column prop="perms" label="权限标识"/>
|
||||
<el-table-column prop="component" label="组件路径"/>
|
||||
<el-table-column prop="state" label="状态" width="80px">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column label="操作" prop="operation">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" v-if="scope.row.menuType!=='B'" @click="handleAdd(scope.row)" link>新增
|
||||
</el-button>
|
||||
<div v-else style="display: inline-block">
|
||||
</div>
|
||||
<el-button type="primary" @click="handleEdit(scope.row.menuId)" link>修改</el-button>
|
||||
<el-button type="primary" @click="handleAssignRoles(scope.row)" link>分配角色</el-button>
|
||||
<popover-delete :name="scope.row.menuName" :type="'菜单'" @delete="handleDel(scope.row.menuId)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-dialog v-model="isVisited" :title="title" width="700px">
|
||||
<el-form :model="form" :rules="formRules" ref="formInstance">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-tree-select v-model="form.parentId" :data="menuOpt" style="width: 100%;"
|
||||
:filter-node-method="filterNodeMethod" clearable filterable :check-strictly="true"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="form.menuType">
|
||||
<el-radio
|
||||
v-for="item in cacheStore.getDict('menu_type')"
|
||||
:label="item.value" :key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单图标">
|
||||
<template #label>
|
||||
<div style="display: flex;align-items: center">
|
||||
<span style="margin-right: 5px">菜单图标</span>
|
||||
<svg-icon v-if="form.icon" :name="form.icon" :class-name="'middle-icon'"/>
|
||||
</div>
|
||||
</template>
|
||||
<icon-select :active-icon="form.icon" @getSelectIcon="getSelectIcon"/>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单名称" prop="menuName" required>
|
||||
<el-input v-model="form.menuName" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1">
|
||||
<el-form-item label="显示顺序" prop="orderNum" required>
|
||||
<el-input-number v-model="form.orderNum" controls-position="right"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否外链">
|
||||
<el-radio-group v-model="form.isFrame">
|
||||
<el-radio v-for="item in cacheStore.getDict('is_frame')"
|
||||
:label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType === 'B'">
|
||||
<el-form-item label="权限字符" prop="perms" required>
|
||||
<el-input v-model="form.perms"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="路由地址" prop="path" required>
|
||||
<el-input v-model="form.path"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.menuType === 'M'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="组件路径" prop="component" required>
|
||||
<el-input v-model="form.component"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="11" :offset="1">
|
||||
<el-form-item label="权限字符" prop="perms" required>
|
||||
<el-input v-model="form.perms"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="form.menuType === 'M'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="路由参数">
|
||||
<el-input v-model="form.pathParams"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="是否缓存页面">
|
||||
<el-radio-group v-model="form.isCache">
|
||||
<el-radio v-for="item in cacheStore.getDict('is_cache')"
|
||||
:label="item.value" :key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="显示状态">
|
||||
<el-radio-group v-model="form.visible">
|
||||
<el-radio v-for="item in cacheStore.getDict('show_hide')" :label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType !== 'B'">
|
||||
<el-form-item label="菜单状态">
|
||||
<el-radio-group v-model="form.state">
|
||||
<el-radio v-for="item in cacheStore.getDict('normal_disable')" :label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">
|
||||
确定
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getMenuList, getMenuInfo, getMenuOpt, addMenu, editMenu, delMenu} from '@/api/system/menuman.js'
|
||||
import {Plus, Sort} from '@element-plus/icons-vue'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import SvgIcon from '@/components/svgIcon/index.vue'
|
||||
import IconSelect from '@/components/iconSelect/index.vue'
|
||||
import PopoverDelete from "@/components/PopoverDelete.vue";
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
const queryParams = reactive({
|
||||
menuName: undefined,
|
||||
state: undefined
|
||||
})
|
||||
const queryInstance = ref()
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const tableTree = ref()
|
||||
const isExpand = ref(true)
|
||||
const isVisited = ref(false)
|
||||
const title = ref('')
|
||||
const form = ref({
|
||||
parentId: '',
|
||||
menuType: 'B',
|
||||
icon: '',
|
||||
menuName: '',
|
||||
orderNum: 0,
|
||||
visible: '0',
|
||||
state: '1',
|
||||
isCache: '0',
|
||||
isFrame: '0', //是否外链
|
||||
perms: '',
|
||||
pathParams: '',
|
||||
path: '',
|
||||
component: ''
|
||||
})
|
||||
const formRules = ref({
|
||||
menuName: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
|
||||
orderNum: [{required: true, message: '请输入显示顺序', trigger: 'blur'}],
|
||||
component: [{required: true, message: '请输入组件路径', trigger: 'blur'}],
|
||||
perms: [{required: true, message: '请输入权限字符', trigger: 'blur'}],
|
||||
path: [{required: true, message: '请输入路由地址', trigger: 'blur'}],
|
||||
})
|
||||
const formInstance = ref()
|
||||
const menuOpt = ref([])
|
||||
const router = useRouter()
|
||||
const getSelectIcon = (val) => {
|
||||
form.value.icon = val
|
||||
}
|
||||
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
getMenuList(queryParams).then(res => {
|
||||
if (res.code === 1000) {
|
||||
list.value = res.data
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const restFrom = () => {
|
||||
form.value = {
|
||||
parentId: '',
|
||||
menuType: 'B',
|
||||
icon: '',
|
||||
menuName: '',
|
||||
orderNum: 0,
|
||||
visible: '1',
|
||||
state: '1',
|
||||
isCache: '0',
|
||||
isFrame: '0', //是否外链
|
||||
perms: '',
|
||||
pathParams: '',
|
||||
path: '',
|
||||
component: ''
|
||||
}
|
||||
}
|
||||
|
||||
const cellClick = (row, column) => {
|
||||
if ("operation" !== column.property) {
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAdd = async (row) => {
|
||||
title.value = '新增菜单'
|
||||
restFrom()
|
||||
if (row.menuId !== undefined) {
|
||||
await getMenuInfo(row.menuId).then(res => {
|
||||
form.value.parentId = res.data.menuId
|
||||
})
|
||||
}
|
||||
await getMenuOpt().then(res => {
|
||||
menuOpt.value = [{
|
||||
value: 0,
|
||||
label: "一级目录",
|
||||
children: res.data
|
||||
}]
|
||||
})
|
||||
isVisited.value = true
|
||||
await nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
const handleExpand = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
expandChange(list.value, isExpand)
|
||||
getList()
|
||||
}
|
||||
//展开收缩封装函数
|
||||
const expandChange = (data, isExpansion) => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
tableTree.value.toggleRowExpansion(data[i], isExpansion);
|
||||
if (data[i].children !== null) {
|
||||
expandChange(data[i].children, isExpansion);
|
||||
}
|
||||
}
|
||||
}
|
||||
//分配角色
|
||||
const handleAssignRoles = (row) => {
|
||||
router.push('/menu-auth/role/' + row.menuId)
|
||||
}
|
||||
const handleEdit = async (menuId) => {
|
||||
title.value = '修改菜单'
|
||||
restFrom()
|
||||
await getMenuInfo(menuId).then(res => {
|
||||
if (res.data.isFrame == false) {
|
||||
res.data.isFrame = '0'
|
||||
} else {
|
||||
res.data.isFrame = '1'
|
||||
}
|
||||
if (res.data.isCache == false) {
|
||||
res.data.isCache = '0'
|
||||
} else {
|
||||
res.data.isCache = '1'
|
||||
}
|
||||
form.value = {...res.data}
|
||||
})
|
||||
await getMenuOpt(menuId).then(res => {
|
||||
menuOpt.value = [{
|
||||
value: 0,
|
||||
label: "一级目录",
|
||||
children: res.data
|
||||
}]
|
||||
})
|
||||
isVisited.value = true
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
|
||||
const handleDel = (menuId) => {
|
||||
delMenu(menuId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (instance) => {
|
||||
if (!instance) return
|
||||
instance.validate(async (valid, fields) => {
|
||||
if (!valid) return
|
||||
form.value.isFrame = form.value.isFrame !== '0';
|
||||
form.value.isCache = form.value.isCache !== '0';
|
||||
if (title.value === '新增菜单') {
|
||||
await addMenu(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
await editMenu(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const filterNodeMethod = (value, data) => data.label.includes(value)
|
||||
|
||||
const handleCancel = () => {
|
||||
form.value = {
|
||||
parentId: '',
|
||||
menuType: 'D',
|
||||
icon: '',
|
||||
menuName: '',
|
||||
orderNum: 0,
|
||||
visible: '0',
|
||||
state: '1',
|
||||
isCache: '0',
|
||||
isFrame: '0', //是否外链
|
||||
perms: '',
|
||||
pathParams: '',
|
||||
path: '',
|
||||
component: ''
|
||||
}
|
||||
isVisited.value = false
|
||||
}
|
||||
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-tree-select {
|
||||
:deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
158
src/views/system/notice/inform/index.vue
Normal file
158
src/views/system/notice/inform/index.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="请选择状态" clearable filterable>
|
||||
<el-option label="未读" value="0"/>
|
||||
<el-option label="已读" value="1"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="noticeId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="noticeTitle" label="公告标题" align="center"/>
|
||||
<el-table-column prop="state" label="阅读状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="read_state" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleViewDetails(scope.row.noticeId)" link>详情
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.noticeTitle" :type="'通知公告'"
|
||||
@delete="handleDelete(scope.row.noticeId)"/>
|
||||
</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="isViewVisited" title="通知公告详情" width="1200px" @close="handleCloseDialog">
|
||||
<el-form :model="viewForm" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="24" class="title-block">
|
||||
<!-- <el-form-item label="公告标题 :" prop="noticeTitle">-->
|
||||
<el-text class="title">{{ viewForm.noticeTitle }}</el-text>
|
||||
<!-- </el-form-item>-->
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<!-- <el-form-item label="公告内容 :" prop="noticeContent">-->
|
||||
<el-text v-if="viewForm.contentType == 'text'">{{ viewForm.noticeContent }}</el-text>
|
||||
<span v-else v-html="viewForm.noticeContent"></span>
|
||||
<!-- </el-form-item>-->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getNotifyList, getNotifyDetail, deleteSingleNotify} from "@/api/notice/notify";
|
||||
import {View, Delete, Search, Refresh} from "@element-plus/icons-vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const queryParams = reactive({
|
||||
state: null
|
||||
})
|
||||
const router = useRouter()
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const total = ref([]);
|
||||
const isViewVisited = ref(false);
|
||||
const viewForm = ref();
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
getList()
|
||||
}
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
cluster: "notice",
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getNotifyList(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);
|
||||
}
|
||||
}).catch(err => {
|
||||
loading.value = false;
|
||||
})
|
||||
};
|
||||
//查看详情
|
||||
const handleViewDetails = (noticeId) => {
|
||||
getNotifyDetail(noticeId).then(res => {
|
||||
// bellSocket.value.searchNotifyList()
|
||||
isViewVisited.value = true
|
||||
viewForm.value = res.data
|
||||
})
|
||||
}
|
||||
//关闭详情弹窗
|
||||
const handleCloseDialog = () => {
|
||||
isViewVisited.value = false
|
||||
}
|
||||
//删除单个消息
|
||||
const handleDelete = (noticeId) => {
|
||||
deleteSingleNotify(noticeId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
};
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
getList()
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.title-block {
|
||||
text-align: center;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.tox-tinymce-aux {
|
||||
z-index: 5000 !important;
|
||||
}
|
||||
</style>
|
||||
430
src/views/system/notice/publish/index.vue
Normal file
430
src/views/system/notice/publish/index.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryInstance">
|
||||
<el-form-item label="公告标题" prop="noticeTitle">
|
||||
<el-input v-model="queryParams.noticeTitle" placeholder="请输入公告标题" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="公告类型" prop="noticeType">
|
||||
<el-select v-model="queryParams.noticeType" placeholder="请选择公告类型" clearable filterable>
|
||||
<el-option label="通知" value="1"/>
|
||||
<el-option label="公告" value="2"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容类型" prop="contentType">
|
||||
<el-select v-model="queryParams.contentType" placeholder="请选择内容类型" clearable filterable>
|
||||
<el-option label="富文本" value="html"/>
|
||||
<el-option label="文本" value="text"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="发送类型" prop="sendType">
|
||||
<el-select v-model="queryParams.sendType" placeholder="请输入发送类型" filterable clearable>
|
||||
<el-option
|
||||
v-for="item in sendTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="noticeId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="noticeTitle" label="公告标题" align="center"/>
|
||||
<el-table-column prop="noticeType" label="公告类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="notice_type" :value="scope.row.noticeType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="contentType" label="内容类型" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="content_type" :value="scope.row.contentType"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sendType" label="发送类型" align="center">
|
||||
<template #default="scope">
|
||||
{{ getSendTypeOptionItem(scope.row.sendType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleViewDetails(scope.row)" link>详情
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.noticeTitle" :type="'公告'"
|
||||
@delete="handleDelete(scope.row.noticeId)"/>
|
||||
</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="新增公告" width="800px">
|
||||
<el-form :model="form" ref="formInstance" label-width="80px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="公告标题" prop="noticeTitle">
|
||||
<el-input v-model="form.noticeTitle" placeholder="请输入公告标题"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="公告类型" prop="noticeType">
|
||||
<el-radio-group v-model="form.noticeType" size="mini">
|
||||
<el-radio v-for="notice in cacheStore.getDict('notice_type')" :key="notice.value"
|
||||
:label="notice.value">
|
||||
{{ notice.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="发送类型" prop="sendType">
|
||||
<el-select v-model="form.sendType" placeholder="发送类型" filterable clearable
|
||||
@change="handleChangeSendType($event)" style="width: 268px">
|
||||
<el-option
|
||||
v-for="item in sendTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2" v-if="form.sendType!=='all'">
|
||||
<el-form-item label="发送对象" prop="senderIds">
|
||||
<el-tree-select
|
||||
v-if="form.sendType==='dept'"
|
||||
ref="treeSelect"
|
||||
v-model="form.senderIds"
|
||||
placeholder="请选择发送对象"
|
||||
:data="deptList"
|
||||
:props="deptProps"
|
||||
value-key="value"
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
style="width: 268px"
|
||||
filterable clearable multiple
|
||||
/>
|
||||
<el-select v-else v-model="form.senderIds" placeholder="请选择发送对象"
|
||||
filterable clearable multiple style="width: 268px">
|
||||
<el-option
|
||||
v-for="item in senderIdsOption"
|
||||
:key="form.sendType==='role'?item.value:item.userId"
|
||||
:label="form.sendType==='role'?item.label:item.userName"
|
||||
:value="form.sendType==='role'?item.value:item.userId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="2">
|
||||
<el-form-item label="内容类型" prop="contentType">
|
||||
<el-radio-group v-model="form.contentType" size="mini">
|
||||
<el-radio label="html">富文本</el-radio>
|
||||
<el-radio label="text">文本</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item v-if="form.contentType=='text'" label="公告内容" prop="noticeContent">
|
||||
<el-input v-model="form.noticeContent" placeholder="请输入公告内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item v-if="form.contentType=='html'" label="公告内容" prop="noticeContent">
|
||||
<Tinymce image-url="/notice/file" file-url="/notice/file" v-model:value="form.noticeContent"/>
|
||||
</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>
|
||||
|
||||
<!--详情弹窗-->
|
||||
<el-dialog v-model="isViewVisited" title="公告详情" width="1200px">
|
||||
<el-form :model="viewForm" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="公告标题 :" prop="noticeTitle">
|
||||
<el-text>{{ viewForm.noticeTitle }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="发送类型 :" prop="sendType">
|
||||
<el-text>{{ getSendTypeOptionItem(viewForm.sendType) }}</el-text>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="发送对象 :" prop="senders">
|
||||
<div v-for="sender in viewForm.senders">
|
||||
<el-text>{{ sender }}</el-text>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="公告类型 :" prop="noticeType">
|
||||
<tag dict-type="notice_type" :value="viewForm.noticeType"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="内容类型 :" prop="contentType">
|
||||
<tag dict-type="content_type" :value="viewForm.contentType"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="公告内容 :" prop="noticeContent">
|
||||
<el-text v-if="viewForm.contentType == 'text'">{{ viewForm.noticeContent }}</el-text>
|
||||
<span v-else v-html="viewForm.noticeContent"></span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh, Plus, View, Delete} from "@element-plus/icons-vue";
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {addNotice, deleteNotice, getNoticeList, getNoticeDetail} from "@/api/notice/notice";
|
||||
import {getRoleOption} from "@/api/role/role";
|
||||
import {getDeptOption} from "@/api/dept/dept";
|
||||
import Tinymce from "@/components/Tinymce.vue";
|
||||
import {getUserList} from "@/api/user/user";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const queryParams = reactive({
|
||||
noticeTitle: '',
|
||||
noticeType: '',
|
||||
contentType: '',
|
||||
sendType: '',
|
||||
state: ''
|
||||
})
|
||||
const queryInstance = ref()
|
||||
const cacheStore = useCacheStore()
|
||||
const loading = ref(true)
|
||||
const sendTypeOption = ref([
|
||||
{
|
||||
name: '用户',
|
||||
value: 'user'
|
||||
},
|
||||
{
|
||||
name: '角色',
|
||||
value: 'role'
|
||||
},
|
||||
{
|
||||
name: '部门',
|
||||
value: 'dept'
|
||||
},
|
||||
{
|
||||
name: '全发',
|
||||
value: 'all'
|
||||
}
|
||||
])
|
||||
const senderIdsOption = ref([])
|
||||
const deptList = ref([]);
|
||||
const deptProps = reactive({
|
||||
value: "value",
|
||||
label: "label"
|
||||
});
|
||||
const list = ref([])
|
||||
const isVisited = ref(false);
|
||||
const isViewVisited = ref(false);
|
||||
const viewForm = ref();
|
||||
const form = ref();
|
||||
const content = ref();
|
||||
const formInstance = ref();
|
||||
const total = ref([]);
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const rules = reactive({
|
||||
noticeTitle: [{required: true, message: '请输入公告标题', trigger: 'blur'}],
|
||||
// noticeContent: [{required: true, message: '请输入公告内容', trigger: 'blur'}],
|
||||
contentType: [{required: true, message: '请输入内容类型', trigger: 'blur'}],
|
||||
noticeType: [{required: true, message: '请选择公告类型', trigger: 'blur'}],
|
||||
sendType: [{required: true, message: '请选择发送类型', trigger: 'blur'}],
|
||||
senderIds: [{required: true, message: '请选择发送对象', trigger: 'blur'}],
|
||||
})
|
||||
|
||||
const handleChangeSendType = (e) => {
|
||||
if (e === 'user') {
|
||||
getUser()
|
||||
} else if (e === 'role') {
|
||||
getRole()
|
||||
} else if (e === 'dept') {
|
||||
getDepartmentOption()
|
||||
} else if (e === 'all') {
|
||||
|
||||
}
|
||||
}
|
||||
//获取用户list
|
||||
const getUser = async () => {
|
||||
getUserList().then(res => {
|
||||
if (res.code === 1000) {
|
||||
senderIdsOption.value = res.data.rows;
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取角色option
|
||||
const getRole = async () => {
|
||||
getRoleOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
senderIdsOption.value = res.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取部门option
|
||||
const getDepartmentOption = async () => {
|
||||
getDeptOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
deptList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
const getSendTypeOptionItem = (sendType) => {
|
||||
for (let item of sendTypeOption.value) {
|
||||
if (item.value === sendType) {
|
||||
return item.name;
|
||||
}
|
||||
}
|
||||
return "";
|
||||
};
|
||||
|
||||
//重置搜索
|
||||
const handleReset = () => {
|
||||
queryInstance.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getNoticeList(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);
|
||||
}
|
||||
}).catch(err => {
|
||||
loading.value = false;
|
||||
})
|
||||
};
|
||||
//查看公告详情
|
||||
const handleViewDetails = async (row) => {
|
||||
getNoticeDetail(row.noticeId).then(res => {
|
||||
isViewVisited.value = true
|
||||
viewForm.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
//删除
|
||||
const handleDelete = async (noticeId) => {
|
||||
// ElMessageBox.confirm(`确认删除名称为${row.noticeTitle}的公告吗?`, '系统提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning'
|
||||
// }).then(() => {
|
||||
deleteNotice(noticeId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
// })
|
||||
}
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
action: 'SEND',
|
||||
noticeTitle: null,
|
||||
noticeContent: null,
|
||||
noticeType: "1",
|
||||
sendType: null,
|
||||
contentType: 'html',
|
||||
state: "1",
|
||||
senderIds: [],
|
||||
cluster: 'notice'
|
||||
};
|
||||
};
|
||||
//新增公告
|
||||
const handleAdd = () => {
|
||||
restForm();
|
||||
isVisited.value = true;
|
||||
nextTick(() => {
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
};
|
||||
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
//提交
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if(form.value.sendType==='all'){
|
||||
form.value.senderIds=['0']
|
||||
}
|
||||
addNotice(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tox-tinymce-aux {
|
||||
z-index: 5000 !important;
|
||||
}
|
||||
</style>
|
||||
356
src/views/system/post/DistributeUser.vue
Normal file
356
src/views/system/post/DistributeUser.vue
Normal file
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="userForm">
|
||||
<el-form-item label="当前岗位" prop="userName">
|
||||
<el-tag >{{postName}}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="queryParams.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加用户</el-button>
|
||||
<el-button type="primary" @click="handleBack" :icon="RefreshLeft" plain>返回</el-button>
|
||||
<el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
|
||||
<el-button type="danger" @click="handleMoreCancelAuthorization(cancelUserIds,userNames)" :icon="CircleClose" plain
|
||||
:disabled="moreCancelDisabled">批量取消
|
||||
</el-button>
|
||||
<el-button type="danger" @click="handleDeletePost" :icon="Delete" plain v-if="showDeleteCurrent">删除当前岗位</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<popover-delete :name="scope.row.userName" :type="'用户'" :btn-text="'取消授权'"
|
||||
@delete="handleCancelAuthorization([scope.row.userId])"/>
|
||||
</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="830px">
|
||||
<el-form :model="query" class="query-form" inline ref="formInstance">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="query.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="query.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getExcludeUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="userList"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="dialogTable"
|
||||
v-loading="dialogLoading"
|
||||
@select="handleDialogSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSubmit([scope.row.userId])" link>添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>
|
||||
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(userIds)" :disabled="dialogDisabled">批量添加</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Plus, Search, Refresh, RefreshLeft, Delete, CircleClose} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {
|
||||
getUserInfoByPostId,
|
||||
cancelPostAndUserAuthorization,
|
||||
unbindAllUserByPost,
|
||||
getUserExcludePostId,
|
||||
postBindUser
|
||||
} from "@/api/user/user";
|
||||
import {useRouter} from "vue-router";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {deletePost,getPostDetail} from "@/api/post/post";
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const router = useRouter();
|
||||
const postId = reactive(router.currentRoute.value.params.postId)
|
||||
const postName =ref('');
|
||||
const userForm = ref();
|
||||
const table = ref();
|
||||
const title = ref('添加用户');
|
||||
const dialogTable = ref();
|
||||
const list = ref([]);
|
||||
const userList = ref([]);
|
||||
const total = ref([]);
|
||||
const dialogTotal = ref([]);
|
||||
const userIds = ref([]);
|
||||
const userNames = ref([]);
|
||||
const cancelUserIds = ref([]);
|
||||
const moreCancelDisabled = ref(true);
|
||||
const dialogDisabled = ref(true);
|
||||
const loading = ref(true);
|
||||
const dialogLoading = ref(true);
|
||||
const showDeleteCurrent = ref(false);
|
||||
const queryParams = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const query = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
onMounted(()=>{
|
||||
getName()
|
||||
})
|
||||
const getName=()=>{
|
||||
getPostDetail(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
postName.value = res.data.postName
|
||||
}
|
||||
})
|
||||
}
|
||||
//用户搜索重置
|
||||
const handleReset = () => {
|
||||
userForm.value.resetFields();
|
||||
searchUser();
|
||||
};
|
||||
const handleDialogReset = () => {
|
||||
formInstance.value.resetFields();
|
||||
getExcludeUser();
|
||||
};
|
||||
//根据角色id获取用户信息
|
||||
const searchUser = async () => {
|
||||
let params = {
|
||||
// postId: postId,
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getUserInfoByPostId(postId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
showDeleteCurrent.value = res.data.rows.length === 0;
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取添加弹窗的用户
|
||||
const getExcludeUser = async () => {
|
||||
let params = {
|
||||
// postId: postId,
|
||||
...query,
|
||||
...pageInfo
|
||||
};
|
||||
dialogLoading.value = true;
|
||||
getUserExcludePostId(postId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
userList.value = res.data.rows;
|
||||
dialogTotal.value = res.data.total;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//添加用户
|
||||
const handleAdd = () => {
|
||||
getExcludeUser()
|
||||
isVisited.value = true
|
||||
dialogDisabled.value = true
|
||||
}
|
||||
const handleBack = () => {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/post')
|
||||
}
|
||||
//全部取消授权
|
||||
const handleCancelAll = () => {
|
||||
ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
unbindAllUserByPost(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
const handleSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
moreCancelDisabled.value = false;
|
||||
cancelUserIds.value = selection.map(item => item.userId)
|
||||
userNames.value = selection.map(item => item.userName).join()
|
||||
} else {
|
||||
moreCancelDisabled.value = true;
|
||||
}
|
||||
}
|
||||
//取消授权
|
||||
const handleCancelAuthorization = (userIds) => {
|
||||
cancelPostAndUserAuthorization(userIds, postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
moreCancelDisabled.value = true
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//批量取消授权
|
||||
const handleMoreCancelAuthorization = (cancelUserIds, userName) => {
|
||||
ElMessageBox.confirm(`确认取消授权名称为"${userName}"的用户吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
handleCancelAuthorization(cancelUserIds)
|
||||
})
|
||||
}
|
||||
//删除当前岗位
|
||||
const handleDeletePost = () => {
|
||||
ElMessageBox.confirm(`确认删除名称为"${postName}"的岗位吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
deletePost(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/post')
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleDialogSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
dialogDisabled.value = false;
|
||||
userIds.value = selection.map(item => item.userId)
|
||||
} else {
|
||||
dialogDisabled.value = true;
|
||||
}
|
||||
}
|
||||
const handleSubmit = (userIds) => {
|
||||
postBindUser(userIds, postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleSizeChangeDialog = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleCurrentChangeDialog = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
searchUser()
|
||||
</script>
|
||||
261
src/views/system/post/index.vue
Normal file
261
src/views/system/post/index.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="queryInstance">
|
||||
<el-form-item label="岗位名称" prop="postName">
|
||||
<el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位编码" prop="postCode">
|
||||
<el-input v-model="queryParams.postCode" placeholder="请输入岗位编码" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="岗位状态" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('normal_disable')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button type="primary" @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
<!-- <el-button type="info" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>-->
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="postId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<el-table-column prop="postName" label="岗位名称"/>
|
||||
<el-table-column prop="postCode" label="岗位编码"/>
|
||||
<el-table-column prop="postSort" label="排序" width="60px"/>
|
||||
<el-table-column prop="state" label="状态">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleEdit(scope.row.postId)" link>修改</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleAssignedUser(scope.row)" link>分配用户
|
||||
</el-button>
|
||||
<popover-delete v-if="scope.row.parentId!==0" :name="scope.row.postName" :type="'岗位'"
|
||||
@delete="handleDelete(scope.row.postId)"/>
|
||||
</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" label-width="100px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="岗位名称" prop="postName">
|
||||
<el-input v-model="form.postName" placeholder="请输入岗位名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="岗位编码" prop="postCode">
|
||||
<el-input v-model="form.postCode" placeholder="请输入岗位编码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="显示顺序" prop="postSort">
|
||||
<el-input-number v-model="form.postSort"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-radio-group v-model="form.state" size="mini">
|
||||
<el-radio v-for="post in cacheStore.getDict('normal_disable')" :key="post.value"
|
||||
:label="post.value">
|
||||
{{ post.label }}
|
||||
</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 {useCacheStore} from '@/stores/cache.js'
|
||||
import {Search, Refresh, Plus} from "@element-plus/icons-vue";
|
||||
import {getPostList, addPost, deletePost, editPost, getPostDetail} from "@/api/post/post";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import {ElMessage} from "element-plus";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
const cacheStore = useCacheStore()
|
||||
const queryInstance = ref()
|
||||
const queryParams = reactive({
|
||||
postName: '',
|
||||
postCode: '',
|
||||
state: ''
|
||||
})
|
||||
const pageInfo = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
})
|
||||
const total = ref()
|
||||
const isVisited = ref(false);
|
||||
const loading = ref(true)
|
||||
const list = ref([])
|
||||
const title = ref();
|
||||
const form = ref();
|
||||
const formInstance = ref();
|
||||
const rules = reactive({
|
||||
postName: [
|
||||
{required: true, message: '请输入岗位名称', trigger: 'blur'},
|
||||
],
|
||||
postCode: [
|
||||
{required: true, message: '请输入岗位编码', trigger: 'blur'},
|
||||
],
|
||||
// postSort: [
|
||||
// {required: true, message: '请选择显示顺序', trigger: 'blur'},
|
||||
// ]
|
||||
})
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
getPostList({
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
res.data.rows = res.data.rows.sort((a, b) => {
|
||||
return a.postSort - b.postSort
|
||||
})
|
||||
total.value = res.data.total;
|
||||
list.value = res.data.rows
|
||||
loading.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleReset = (instance) => {
|
||||
if (!instance) return
|
||||
instance.resetFields()
|
||||
getList()
|
||||
}
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
postName: null,
|
||||
postCode: null,
|
||||
postSort: 0,
|
||||
state: '1'
|
||||
};
|
||||
};
|
||||
//添加功能
|
||||
const handleAdd = () => {
|
||||
restForm();
|
||||
getList()
|
||||
title.value = "新增岗位";
|
||||
isVisited.value = true;
|
||||
};
|
||||
//修改功能
|
||||
const handleEdit = (postId) => {
|
||||
restForm();
|
||||
//查看详情
|
||||
getPostDetail(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
console.log('岗位详情', res.data)
|
||||
form.value = res.data
|
||||
title.value = "修改岗位";
|
||||
isVisited.value = true;
|
||||
}
|
||||
})
|
||||
};
|
||||
//分配用户
|
||||
const handleAssignedUser = (row) => {
|
||||
//路由跳转，携带参数
|
||||
router.push('/post-auth/user/' + row.postId)
|
||||
}
|
||||
//删除功能
|
||||
const handleDelete = (postId) => {
|
||||
// ElMessageBox.confirm(`确认删除名称为${row.postName}的数据吗?`, "系统提示", {
|
||||
// confirmButtonText: "确定",
|
||||
// cancelButtonText: "取消",
|
||||
// type: "warning"
|
||||
// }).then(() => {
|
||||
deletePost(postId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
// });
|
||||
};
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getList()
|
||||
}
|
||||
//取消操作
|
||||
const handleCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (title.value == "新增岗位") {
|
||||
addPost(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editPost(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
getList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
357
src/views/system/role/DistributeUser.vue
Normal file
357
src/views/system/role/DistributeUser.vue
Normal file
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<el-form :model="queryParams" class="query-form" inline ref="userForm">
|
||||
<el-form-item label="当前角色" prop="userName">
|
||||
<el-tag>{{ roleName }}</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="queryParams.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="searchUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">添加用户</el-button>
|
||||
<el-button type="primary" @click="handleBack" :icon="RefreshLeft" plain>返回</el-button>
|
||||
<el-button type="danger" @click="handleCancelAll" :icon="CircleClose" plain>全部取消</el-button>
|
||||
<el-button type="danger" @click="handleMoreCancelAuthorization(cancelUserIds,userNames)" :icon="CircleClose" plain
|
||||
:disabled="moreCancelDisabled">批量取消
|
||||
</el-button>
|
||||
<el-button type="danger" @click="handleDeleteRole" :icon="Delete" plain v-if="showDeleteCurrent">删除当前角色</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
@select="handleSelect"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<popover-delete :name="scope.row.userName" :type="'用户'" :btn-text="'取消授权'"
|
||||
@delete="handleCancelAuthorization([scope.row.userId])"/>
|
||||
</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="830px">
|
||||
<el-form :model="query" class="query-form" inline ref="formInstance">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="query.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="query.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getExcludeUser" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleDialogReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="userList"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
ref="dialogTable"
|
||||
v-loading="dialogLoading"
|
||||
@select="handleDialogSelect"
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="email" label="邮箱" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleSubmit(scope.row.userId)" link>添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
|
||||
:total="dialogTotal" @changeSize="handleSizeChangeDialog" @goPage="handleCurrentChangeDialog"/>
|
||||
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit(userIds)" :disabled="dialogDisabled">批量添加</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Plus, Search, Refresh, RefreshLeft, CircleClose, Delete} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getUserByRoleId, cancelAuthorization, getUserExcludeRoleId, unbindAllUser, roleBindUser} from "@/api/user/user";
|
||||
import {useRouter} from "vue-router";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {deleteRole, getRoleDetail} from "@/api/role/role";
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const router = useRouter();
|
||||
const roleId = reactive(router.currentRoute.value.params.roleId)
|
||||
const roleName = ref('')
|
||||
const userForm = ref();
|
||||
const table = ref();
|
||||
const title = ref('添加用户');
|
||||
const dialogTable = ref();
|
||||
const list = ref([]);
|
||||
const userList = ref([]);
|
||||
const total = ref([]);
|
||||
const dialogTotal = ref([]);
|
||||
const userIds = ref([]);
|
||||
const userNames = ref([]);
|
||||
const cancelUserIds = ref([]);
|
||||
const moreCancelDisabled = ref(true);
|
||||
const dialogDisabled = ref(true);
|
||||
const loading = ref(true);
|
||||
const dialogLoading = ref(true);
|
||||
const showDeleteCurrent = ref(false);
|
||||
const queryParams = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const query = reactive({
|
||||
userName: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const form = ref();
|
||||
onMounted(()=>{
|
||||
getRoleName()
|
||||
})
|
||||
//用户搜索重置
|
||||
const handleReset = () => {
|
||||
userForm.value.resetFields();
|
||||
searchUser();
|
||||
};
|
||||
const handleDialogReset = () => {
|
||||
formInstance.value.resetFields();
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
//获取角色详情
|
||||
const getRoleName = () => {
|
||||
getRoleDetail(roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
roleName.value = res.data.roleName
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//根据角色id获取用户信息
|
||||
const searchUser = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true
|
||||
getUserByRoleId(roleId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
showDeleteCurrent.value = res.data.rows.length === 0;
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取添加弹窗的用户
|
||||
const getExcludeUser = async () => {
|
||||
let params = {
|
||||
// roleId: roleId,
|
||||
...query,
|
||||
...pageInfo
|
||||
};
|
||||
dialogLoading.value = true;
|
||||
getUserExcludeRoleId(roleId, params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
userList.value = res.data.rows;
|
||||
dialogTotal.value = res.data.total;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//添加用户
|
||||
const handleAdd = () => {
|
||||
getExcludeUser()
|
||||
isVisited.value = true
|
||||
dialogDisabled.value = true
|
||||
}
|
||||
const handleBack = () => {
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/role')
|
||||
}
|
||||
//全部取消授权
|
||||
const handleCancelAll = () => {
|
||||
ElMessageBox.confirm(`确认全部取消授权吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
unbindAllUser(roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
const handleSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
moreCancelDisabled.value = false;
|
||||
cancelUserIds.value = selection.map(item => item.userId)
|
||||
userNames.value = selection.map(item => item.userName).join()
|
||||
} else {
|
||||
moreCancelDisabled.value = true;
|
||||
}
|
||||
}
|
||||
//单个取消授权
|
||||
const handleCancelAuthorization = (userIds) => {
|
||||
cancelAuthorization({
|
||||
id: roleId,
|
||||
ids: userIds,
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
moreCancelDisabled.value = true
|
||||
searchUser()
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//批量取消授权
|
||||
const handleMoreCancelAuthorization = (cancelUserIds, userName) => {
|
||||
ElMessageBox.confirm(`确认取消授权名称为"${userName}"的用户吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
handleCancelAuthorization(cancelUserIds)
|
||||
})
|
||||
}
|
||||
const handleDeleteRole = () => {
|
||||
ElMessageBox.confirm(`确认删除名称为"${roleName}"的角色吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
deleteRole(roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg)
|
||||
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
|
||||
router.push('/system/role')
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleDialogSelect = (selection) => {
|
||||
if (selection.length !== 0) {
|
||||
dialogDisabled.value = false;
|
||||
userIds.value = selection.map(item => item.userId)
|
||||
} else {
|
||||
dialogDisabled.value = true;
|
||||
}
|
||||
}
|
||||
const handleSubmit = (userIds) => {
|
||||
roleBindUser({
|
||||
id: roleId,
|
||||
ids: userIds,
|
||||
}).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
searchUser()
|
||||
isVisited.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleSizeChangeDialog = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
searchUser();
|
||||
};
|
||||
const handleCurrentChangeDialog = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getExcludeUser();
|
||||
};
|
||||
|
||||
searchUser()
|
||||
</script>
|
||||
486
src/views/system/role/index.vue
Normal file
486
src/views/system/role/index.vue
Normal file
@@ -0,0 +1,486 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 角色管理 -->
|
||||
<el-form :model="queryParams" class="query-form" inline ref="roleForm">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="权限字符" prop="roleKey">
|
||||
<el-input
|
||||
v-model="queryParams.roleKey"
|
||||
placeholder="请输入权限字符"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select
|
||||
v-model="queryParams.state"
|
||||
placeholder="请选择角色状态"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('normal_disable')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录时间" prop="dateValue">
|
||||
<el-config-provider>
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</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="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
ref="table"
|
||||
row-key="roleId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<!-- <el-table-column prop="roleId" label="角色编号" align="center"/>-->
|
||||
<el-table-column prop="roleName" label="角色名称" align="center"/>
|
||||
<el-table-column prop="roleKey" label="角色权限" align="center"/>
|
||||
<el-table-column prop="dataScope" label="数据范围" align="center">
|
||||
<template #default="scope">
|
||||
<el-text v-if="scope.row.dataScope == '1'">所有数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '2'">自定义数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '3'">本部门数据权限</el-text>
|
||||
<el-text v-if="scope.row.dataScope == '4'">本部门及以下数据权限</el-text>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="roleSort" label="显示顺序" align="center" width="100px"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" @click="handleEdit(scope.row.roleId)" link>修改
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="handleAssignedUser(scope.row)" link>分配用户
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.roleName" :type="'角色'"
|
||||
@delete="handleDel(scope.row.roleId)"/>
|
||||
</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="700px">
|
||||
<el-form :model="form" ref="formInstance" label-width="100px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="角色权限" prop="roleKey">
|
||||
<el-input v-model="form.roleKey" placeholder="请输入角色权限"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="显示顺序" prop="roleSort">
|
||||
<el-input-number v-model="form.roleSort"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="数据范围" prop="dataScope">
|
||||
<el-radio-group v-model="form.dataScope" size="mini">
|
||||
<el-radio
|
||||
v-for="role in [{value:'1',label:'所有数据权限'},{value:'2',label:'自定义数据权限'},{value:'3',label:'本部门数据权限'},{value:'4',label:'本部门及以下数据权限'}]"
|
||||
:key="role.value" :label="role.value">
|
||||
{{ role.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-radio-group v-model="form.state" size="mini">
|
||||
<el-radio v-for="role in cacheStore.getDict('normal_disable')" :key="role.value"
|
||||
:label="role.value">
|
||||
{{ role.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="菜单权限" prop="menuIds">
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<el-checkbox-group v-model="checkList" @change="changeCheckbox">
|
||||
<el-checkbox label="1">{{ isExpand }}</el-checkbox>
|
||||
<el-checkbox label="2">{{ isAllChose }}</el-checkbox>
|
||||
<el-checkbox label="3">父子联动</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<div class="dialog-tree ">
|
||||
<el-tree
|
||||
:data="treeData"
|
||||
:props="treeProps"
|
||||
node-key="menuId"
|
||||
ref="tree"
|
||||
:check-strictly="checkStrictly"
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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 {Plus} from "@element-plus/icons-vue";
|
||||
import {useRouter} from 'vue-router'
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useCacheStore} from "@/stores/cache.js";
|
||||
import {getMenuList} from '@/api/system/menuman.js'
|
||||
import {getRoleList, getRoleDetail, deleteRole, addRole, editRole} from "@/api/role/role";
|
||||
import {Search, Refresh, EditPen, Delete, User} from '@element-plus/icons-vue'
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const router = useRouter()
|
||||
const pageInfo = reactive({
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
})
|
||||
const cacheStore = useCacheStore();
|
||||
const queryParams = reactive({
|
||||
roleName: "",
|
||||
roleKey: "",
|
||||
state: "",
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
});
|
||||
const treeData = ref([])
|
||||
const tree = ref()
|
||||
const isExpand = ref('展开')
|
||||
const isAllChose = ref('全选')
|
||||
const table = ref()
|
||||
const menuIds = ref([])
|
||||
const checkStrictly = ref(false)
|
||||
const rules = reactive({
|
||||
roleName: [
|
||||
{required: true, message: '请输入角色名称', trigger: 'blur'},
|
||||
],
|
||||
roleKey: [
|
||||
{required: true, message: '请输入角色权限', trigger: 'blur'},
|
||||
],
|
||||
roleSort: [
|
||||
{required: true, message: '请选择显示顺序', trigger: 'blur'},
|
||||
]
|
||||
})
|
||||
const checkList = ref(['3'])
|
||||
const treeProps = {
|
||||
value: "menuId",
|
||||
label: 'menuName',
|
||||
children: 'children'
|
||||
}
|
||||
const dateValue = ref()
|
||||
const total = ref()
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '上周',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '上月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '三月前',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
const loading = ref(true);
|
||||
const roleForm = ref();
|
||||
const list = ref([]);
|
||||
const isVisited = ref(false);
|
||||
const title = ref();
|
||||
const form = ref();
|
||||
const formInstance = ref();
|
||||
//重置from表单
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
roleId: '',
|
||||
roleName: null,
|
||||
roleSort: 0,
|
||||
state: '1',
|
||||
roleKey: null,
|
||||
dataScope: '1',
|
||||
menuIds: []
|
||||
};
|
||||
};
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
...queryParams,
|
||||
...pageInfo
|
||||
}
|
||||
let date = dateValue.value
|
||||
if (date !== undefined && date !== null) {
|
||||
params.startTime = date[0]
|
||||
params.endTime = date[1]
|
||||
}
|
||||
loading.value = true
|
||||
getRoleList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
res.data.rows = res.data.rows.sort((a, b) => {
|
||||
return a.roleSort - b.roleSort
|
||||
})
|
||||
list.value = res.data.rows
|
||||
total.value = res.data.total
|
||||
loading.value = false
|
||||
}else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
//重置功能
|
||||
const handleReset = () => {
|
||||
dateValue.value = []
|
||||
roleForm.value.resetFields()
|
||||
getList()
|
||||
}
|
||||
|
||||
//添加功能
|
||||
const handleAdd = () => {
|
||||
if( tree.value!==undefined){
|
||||
tree.value.setCheckedKeys([])
|
||||
}
|
||||
// getMenu()
|
||||
getMenuList().then(res => {
|
||||
treeData.value = res.data
|
||||
})
|
||||
restForm();
|
||||
rules.roleKey[0].required = true
|
||||
title.value = "新增角色";
|
||||
isVisited.value = true;
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
};
|
||||
|
||||
//修改功能
|
||||
const handleEdit = (roleId) => {
|
||||
restForm();
|
||||
//查看详情
|
||||
getRoleDetail(roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
console.log('角色详情', res.data)
|
||||
rules.roleKey[0].required = false
|
||||
menuIds.value = res.data.menuIds
|
||||
form.value = res.data
|
||||
title.value = "修改角色";
|
||||
isVisited.value = true;
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
})
|
||||
getMenu()
|
||||
};
|
||||
//删除功能
|
||||
const handleDel = (roleId) => {
|
||||
// ElMessageBox.confirm(`确认删除角色名称为${row.roleName}的数据吗?`, "系统提示", {
|
||||
// confirmButtonText: "确定",
|
||||
// cancelButtonText: "取消",
|
||||
// type: "warning",
|
||||
// }).then(() => {
|
||||
deleteRole(roleId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
// });
|
||||
};
|
||||
//分配用户
|
||||
const handleAssignedUser = (row) => {
|
||||
//路由跳转，携带参数
|
||||
router.push('/role-auth/user/' + row.roleId)
|
||||
}
|
||||
//获取菜单名称
|
||||
const getMenu = async () => {
|
||||
let params = {
|
||||
...queryParams
|
||||
}
|
||||
getMenuList(params).then(res => {
|
||||
tree.value.setCheckedKeys(menuIds.value)
|
||||
treeData.value = res.data
|
||||
})
|
||||
}
|
||||
//多选框事件
|
||||
const changeCheckbox = (checked) => {
|
||||
//父子联动
|
||||
checkStrictly.value = checked.indexOf("3") === -1;
|
||||
let nodes = tree.value.store.nodesMap;
|
||||
console.log('checked',checked)
|
||||
//展开/折叠
|
||||
if (checked.indexOf("1") === 1) {
|
||||
for (const node in nodes) {
|
||||
nodes[node].expanded = true;
|
||||
}
|
||||
isExpand.value = '折叠'
|
||||
} else {
|
||||
for (const node in nodes) {
|
||||
nodes[node].expanded = false;
|
||||
}
|
||||
isExpand.value = '展开'
|
||||
}
|
||||
//全选/全不选
|
||||
if (checked.indexOf("2") === 1) {
|
||||
tree.value.setCheckedNodes(treeData.value)
|
||||
isAllChose.value = '不全选'
|
||||
} else {
|
||||
tree.value.setCheckedNodes([])
|
||||
isAllChose.value = '全选'
|
||||
}
|
||||
}
|
||||
|
||||
//点击新增/修改弹窗上的tree节点的左边选择框
|
||||
const handleCheckChange = (data) => {
|
||||
form.value.menuIds = tree.value.getCheckedKeys()
|
||||
}
|
||||
|
||||
|
||||
//取消操作
|
||||
const handleCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (title.value == "新增角色") {
|
||||
console.log('新增角色', form.value)
|
||||
addRole(form.value).then(res => {
|
||||
console.log('res', res)
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// form.value.menuIds = tree.value.getCheckedKeys()
|
||||
console.log('form.value修改', form.value)
|
||||
editRole(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
isVisited.value = false;
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val
|
||||
getList()
|
||||
}
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val
|
||||
getList()
|
||||
}
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dialog-tree {
|
||||
border: 1px solid #ad8383;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
.dialog-tree::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
// 滚动条轨道
|
||||
.dialog-tree::-webkit-scrollbar-track {
|
||||
background: rgb(239, 239, 239);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// 小滑块
|
||||
.dialog-tree::-webkit-scrollbar-thumb {
|
||||
background: rgba(80, 81, 82, 0.29);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-tree-select {
|
||||
:deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
541
src/views/system/user/index.vue
Normal file
541
src/views/system/user/index.vue
Normal file
@@ -0,0 +1,541 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="layout-left" style="width: 20%;border:none;">
|
||||
<el-form :model="queryDept" @submit.prevent>
|
||||
<el-form-item prop="dictType">
|
||||
<el-input v-model="queryDept.deptName" placeholder="请输入部门名称" :prefix-icon="Search"
|
||||
clearable @clear="handleSearchDept" @input="handleSearchDept"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="scrollbar-user scrollbar-dict">
|
||||
<el-tree :data="deptList" :props="deptProps" empty-text="" node-key="value" default-expand-all
|
||||
highlight-current :expand-on-click-node="false"
|
||||
@node-click="handle">
|
||||
<template #default="{ node, data }">
|
||||
{{ node.label }}
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-right">
|
||||
<el-form :model="queryParams" class="query-form" inline ref="userForm">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input
|
||||
v-model="queryParams.phoneNumber"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select
|
||||
v-model="queryParams.state"
|
||||
placeholder="用户状态"
|
||||
clearable
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('normal_disable')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="dateValue">
|
||||
<el-config-provider>
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
type="datetimerange"
|
||||
:shortcuts="shortcuts"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-config-provider>
|
||||
</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="table-header-btn">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus">新增</el-button>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="userId"
|
||||
:lazy="true"
|
||||
v-loading="loading"
|
||||
:header-cell-style="{'background':'#f5f5f8'}"
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center" width="60"/>
|
||||
<!-- <el-table-column prop="userId" label="用户编号" align="center"/>-->
|
||||
<el-table-column prop="userName" label="用户名称" align="center"/>
|
||||
<el-table-column prop="nickName" label="用户昵称" align="center"/>
|
||||
<el-table-column prop="deptName" label="部门" align="center"/>
|
||||
<el-table-column prop="phoneNumber" label="手机号码" align="center"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini"
|
||||
@click="handleEdit(scope.row.userId)" link>编辑
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.userName" :type="'用户'"
|
||||
@delete="handleDelete(scope.row.userId)"/>
|
||||
</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="700px">
|
||||
<el-form :model="form" ref="formInstance" label-width="80px" :rules="rules">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="form.userName" placeholder="请输入用户名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户昵称" prop="nickName">
|
||||
<el-input v-model="form.nickName" placeholder="请输入用户昵称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户性别" prop="sex">
|
||||
<el-select v-model="form.sex"
|
||||
placeholder="请选择用户性别"
|
||||
style="width: 250px" filterable>
|
||||
<el-option
|
||||
v-for="item in cacheStore.getDict('user_sex')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户密码" prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="归属部门" prop="deptId">
|
||||
<el-tree-select
|
||||
ref="treeSelect"
|
||||
v-model="form.deptId"
|
||||
:data="deptList"
|
||||
:props="deptProps"
|
||||
value-key="value"
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
@node-click=""
|
||||
style="width: 250px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号码" prop="phoneNumber">
|
||||
<el-input v-model="form.phoneNumber" placeholder="请输入手机号码"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-radio-group v-model="form.state" size="mini">
|
||||
<el-radio v-for="user in cacheStore.getDict('normal_disable')" :key="user.value"
|
||||
:label="user.value">
|
||||
{{ user.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="岗位" prop="postIds">
|
||||
<el-select
|
||||
v-model="form.postIds"
|
||||
multiple
|
||||
placeholder="请选择岗位"
|
||||
style="width: 250px" filterable
|
||||
>
|
||||
<div v-if="title=='新增用户'">
|
||||
<el-option
|
||||
v-for="item in postList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-option
|
||||
v-for="item in form.postList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</div>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色" prop="roleIds">
|
||||
<el-select v-model="form.roleIds"
|
||||
multiple
|
||||
placeholder="请选择角色"
|
||||
style="width: 250px" filterable>
|
||||
<div v-if="title=='新增用户'">
|
||||
<el-option
|
||||
v-for="item in roleList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-option
|
||||
v-for="item in form.roleList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</div>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
maxlength="255"
|
||||
show-word-limit
|
||||
placeholder="请输入内容"
|
||||
v-model="form.remark">
|
||||
</el-input>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Search, Refresh, Plus, Edit, Delete} from "@element-plus/icons-vue";
|
||||
import {defineProps} from "vue";
|
||||
import {getRoleOption} from "@/api/role/role";
|
||||
import {getUserList, getUserDetail, addUser, editUser,deleteUser} from "@/api/user/user";
|
||||
import {getDeptList} from "@/api/dept/dept";
|
||||
import {getSelectOption} from "@/api/post/post";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useCacheStore} from "@/stores/cache.js";
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
|
||||
const cacheStore = useCacheStore();
|
||||
//查询参数
|
||||
const queryDept = reactive({
|
||||
deptName: ""
|
||||
});
|
||||
const queryParams = reactive({
|
||||
deptId: "",
|
||||
userName: "",
|
||||
phoneNumber: "",
|
||||
state: "",
|
||||
startTime: "",
|
||||
endTime: ""
|
||||
});
|
||||
const userForm = ref();
|
||||
const list = ref([]);
|
||||
const total = ref([]);
|
||||
//页面信息
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const loading = ref(true);
|
||||
const treeSelect = ref();
|
||||
const postList = ref([]);
|
||||
const roleList = ref([]);
|
||||
const deptList = ref([]);
|
||||
const deptProps = reactive({
|
||||
value: "deptId",
|
||||
label: "deptName"
|
||||
});
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
});
|
||||
const form = ref({
|
||||
// user: [],
|
||||
// postIds: "",
|
||||
// roleIds: "",
|
||||
roleList: [],
|
||||
postList: []
|
||||
});
|
||||
const formInstance = ref();
|
||||
const isVisited = ref(false);
|
||||
const title = ref("");
|
||||
const rules = reactive({
|
||||
nickName: [
|
||||
{required: true, message: "请输入用户昵称", trigger: "blur"}
|
||||
],
|
||||
userName: [
|
||||
{required: true, message: "请输入用户名称", trigger: "blur"}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: "请输入用户密码", trigger: "blur"}
|
||||
]
|
||||
});
|
||||
const dateValue = ref();
|
||||
const shortcuts = [
|
||||
{
|
||||
text: "上周",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上月",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
return [start, end];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "三月前",
|
||||
value: () => {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
return [start, end];
|
||||
}
|
||||
}
|
||||
];
|
||||
//获取部门数据
|
||||
const getDepartmentList = async () => {
|
||||
let params = {
|
||||
...queryDept
|
||||
};
|
||||
//获取部门信息
|
||||
getDeptList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
deptList.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取用户数据
|
||||
const getList = 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
|
||||
getUserList(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);
|
||||
}
|
||||
});
|
||||
};
|
||||
const getRole = () => {
|
||||
getRoleOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
roleList.value = res.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
const getPost= async () => {
|
||||
getSelectOption().then(res => {
|
||||
if (res.code === 1000) {
|
||||
postList.value = res.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
//搜索部门
|
||||
const handleSearchDept = () => {
|
||||
getDepartmentList();
|
||||
};
|
||||
//点击部门节点筛选数据
|
||||
const handle = (node) => {
|
||||
queryParams.deptId = node.deptId;
|
||||
getList();
|
||||
};
|
||||
|
||||
//用户搜索重置
|
||||
const handleReset = () => {
|
||||
dateValue.value = [];
|
||||
userForm.value.resetFields();
|
||||
getList();
|
||||
};
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
roleList: [],
|
||||
postList: [],
|
||||
userName: null,
|
||||
nickName: null,
|
||||
deptId: null,
|
||||
phoneNumber: null,
|
||||
email: null,
|
||||
password: null,
|
||||
sex: null,
|
||||
state: "1",
|
||||
postIds: [],
|
||||
roleIds: [],
|
||||
remark: null,
|
||||
};
|
||||
};
|
||||
//新增用户
|
||||
const handleAdd = () => {
|
||||
rules.password[0].required = true
|
||||
restForm();
|
||||
getRole();
|
||||
getPost()
|
||||
title.value = "新增用户";
|
||||
isVisited.value = true;
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
};
|
||||
|
||||
//修改用户
|
||||
const handleEdit = (userId) => {
|
||||
restForm();
|
||||
getRole();
|
||||
getPost()
|
||||
//查看详情
|
||||
getUserDetail(userId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
rules.password[0].required = false
|
||||
form.value = res.data.user;
|
||||
form.value.roleIds = res.data.roleIds;
|
||||
form.value.postIds = res.data.postIds;
|
||||
form.value.roleList = res.data.roleList;
|
||||
form.value.postList = res.data.postList;
|
||||
title.value = "修改用户";
|
||||
isVisited.value = true;
|
||||
nextTick(()=>{
|
||||
// 清空校验
|
||||
formInstance.value.clearValidate()
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
//删除功能
|
||||
const handleDelete = (userId) => {
|
||||
// ElMessageBox.confirm(`确认删除用户名称为${row.userName}的数据吗?`, "系统提示", {
|
||||
// confirmButtonText: "确定",
|
||||
// cancelButtonText: "取消",
|
||||
// type: "warning"
|
||||
// }).then(() => {
|
||||
deleteUser(userId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
// });
|
||||
};
|
||||
|
||||
//取消
|
||||
const handleCancel = () => {
|
||||
restForm();
|
||||
isVisited.value = false;
|
||||
};
|
||||
//提交
|
||||
const handleSubmit = async (formInstance) => {
|
||||
if (!formInstance) return;
|
||||
formInstance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (title.value === "新增用户") {
|
||||
addUser(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
editUser(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList();
|
||||
isVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList();
|
||||
};
|
||||
getDepartmentList();
|
||||
getList();
|
||||
</script>
|
||||
218
src/views/tool/componentdemo/index.vue
Normal file
218
src/views/tool/componentdemo/index.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<fvSearchForm ref="form" :searchConfig="data.searchConfig" @search="search"></fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="data.tableConfig" @headBtnClick="headBtnClick"></fvTable>
|
||||
<el-dialog v-model="visible" :title="title" width="400">
|
||||
<fvForm v-if="visible" :schema="data.schema" @getInstance="getInstance" :rules="rules"></fvForm>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button type="primary" @click="handleSubmit(formInstance)">确认</el-button>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {ElMessage, ElMessageBox} from 'element-plus';
|
||||
import { getIPBlackDetail, addIPBlack, editIPBlack, delIPBlack} from '@/api/ipblacklist';
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
|
||||
const tableIns = ref()
|
||||
const data = reactive({
|
||||
form: null,
|
||||
schema: [
|
||||
{
|
||||
label: 'IP地址',
|
||||
component: 'el-input',
|
||||
prop: 'ipAddr',
|
||||
props: {
|
||||
placeholder: '请输入'
|
||||
},
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
],
|
||||
tableConfig: {
|
||||
btns: [
|
||||
{
|
||||
name: '新增',
|
||||
type: 'primary',
|
||||
key: 'add'
|
||||
},
|
||||
{
|
||||
name: '导出',
|
||||
key: 'export'
|
||||
},
|
||||
], //表格头部按钮
|
||||
columns: [
|
||||
{
|
||||
prop: 'ipAddr',
|
||||
label: 'IP地址',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: 'IP类型',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '生成时间',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'remark',
|
||||
label: '备注',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<div>
|
||||
<el-Button type={'primary'} link
|
||||
onClick={()=>handleEdit(row)}
|
||||
>
|
||||
编辑
|
||||
</el-Button>
|
||||
<el-Button type={'danger'} link onClick={()=>handleDel(row)}>删除</el-Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
api: '/admin/ip/back',
|
||||
params: {}
|
||||
},
|
||||
// search
|
||||
searchConfig: [
|
||||
{
|
||||
label: 'IP地址',
|
||||
prop: 'ipAddr',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'IP类型',
|
||||
prop: 'type',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '时间',
|
||||
prop: 'dateValue',
|
||||
component: 'el-date-picker',
|
||||
props: {
|
||||
type: 'datetimerange',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
startPlaceholder: "开始时间",
|
||||
endPlaceholder: "结束时间"
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const rules = {
|
||||
ipAddr: [{required: true, message: '必填', trigger: 'change'}]
|
||||
}
|
||||
|
||||
const visible = ref(false)
|
||||
const title = ref('')
|
||||
const form = ref()
|
||||
|
||||
const getInstance = (instance) => {
|
||||
console.log(instance, 'instance');
|
||||
form.value = instance
|
||||
}
|
||||
|
||||
const headBtnClick = (key) => {
|
||||
console.log(key, 'key');
|
||||
switch(key) {
|
||||
case 'add':
|
||||
handleAdd()
|
||||
break;
|
||||
case 'export':
|
||||
handleExport()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
title.value = '新增'
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = async (row) => {
|
||||
title.value = '修改'
|
||||
const {data, code, msg} = await getIPBlackDetail(row.id)
|
||||
if (code === 1000) {
|
||||
visible.value = true
|
||||
nextTick(()=>{
|
||||
form.value.setValues(data)
|
||||
})
|
||||
return
|
||||
}
|
||||
ElMessage.error(msg)
|
||||
}
|
||||
|
||||
const handleDel = (row) => {
|
||||
ElMessageBox.confirm('确认删除该条数据吗?', '确认删除', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
const {code, msg} = await delIPBlack(row.id)
|
||||
code === 1000 ? ElMessage.success(msg) : ElMessage.error(msg)
|
||||
tableIns.value.refresh()
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
|
||||
const search = (val) => {
|
||||
const params = {...val}
|
||||
if(val.dateValue) {
|
||||
params.startTime = val.dateValue[0]
|
||||
params.endTime = val.dateValue[1]
|
||||
}
|
||||
delete params.dateValue
|
||||
data.tableConfig.params = params
|
||||
tableIns.value.refresh()
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const { isValidate } = await form.value.validate()
|
||||
if(!isValidate) return Promise.reject()
|
||||
const values = form.value.getValues()
|
||||
if(title.value === '新增') {
|
||||
const {code, msg} = await addIPBlack(values)
|
||||
code === 1000 ? ElMessage.success(msg) : ElMessage.error(msg)
|
||||
} else {
|
||||
const {code, msg} = await editIPBlack(values)
|
||||
code === 1000 ? ElMessage.success(msg) : ElMessage.error(msg)
|
||||
}
|
||||
tableIns.value.refresh()
|
||||
handleCancel()
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
const baseQuery = tableIns.value.getQuery()
|
||||
downLoadExcel('/admin/ip/back/export', {...baseQuery, ...data.tableConfig.params})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
582
src/views/tool/dict/index.vue
Normal file
582
src/views/tool/dict/index.vue
Normal file
@@ -0,0 +1,582 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="layout">
|
||||
<div class="layout-left">
|
||||
<div class="query-btn">
|
||||
<el-button type="primary" v-perm="['dict:type:add']" @click="handleAddType" :icon="Plus" plain>新增</el-button>
|
||||
<!-- <el-button type="warning" v-perm="['dict:type:export']" @click="handleExport" :icon="Download" plain>导出-->
|
||||
<!-- </el-button>-->
|
||||
<el-button type="primary" :icon="Edit" v-perm="['dict:type:edit']"
|
||||
@click.stop="handleEditType" plain>修改
|
||||
</el-button>
|
||||
<el-button type="danger" :icon="Delete" v-perm="['dict:type:del']"
|
||||
@click.stop="handleDeleteType" :disabled="disabledDelete" plain>删除
|
||||
</el-button>
|
||||
</div>
|
||||
<el-form :model="queryType">
|
||||
<el-form-item prop="dictType">
|
||||
<el-input v-model="queryType.dictType" placeholder="请输入字典类型" :suffix-icon="Search"
|
||||
clearable @clear="getTreeList" @input="getTreeList"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="scrollbar-dict">
|
||||
<el-tree :data="treeData" ref="tree" :props="defaultProps" highlight-current @current-change="currentChange"
|
||||
@node-click="handleNodeClick">
|
||||
<template #default="{ node, data }">
|
||||
<div class="dict-tree">
|
||||
<div>{{ data.dictName }}</div>
|
||||
<!-- <div style="display: none" :id="'option_'+data.dictId">-->
|
||||
<!-- <el-button type="primary" size="small" :icon="Edit" v-perm="['dict:type:edit']"-->
|
||||
<!-- @click.stop="handleEditType(data.dictId)"/>-->
|
||||
<!-- <el-button type="primary" size="small" :icon="Delete" v-perm="['dict:type:del']"-->
|
||||
<!-- @click.stop="handleDeleteType(data)" :disabled="disabledDelete"/>-->
|
||||
<!-- </div> -->
|
||||
<!-- :id="'type_'+data.dictId"-->
|
||||
<div class="left-type">{{ data.dictType }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-right" style="margin-top: 15px;">
|
||||
<div class="query-btn">
|
||||
<el-button type="primary" v-perm="['dict:data:add']" @click="handleAddData" :icon="Plus" plain>新增</el-button>
|
||||
</div>
|
||||
<el-form :model="queryData">
|
||||
<el-form-item prop="dictLabel">
|
||||
<el-input v-model="queryData.dictLabel" placeholder="请输入字典标签" :suffix-icon="Search"
|
||||
clearable @clear="getList(queryData.dictLabel,typeData)"
|
||||
@input="getList(queryData.dictLabel,typeData)" :disabled="isSearchData"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="dictId"
|
||||
ref="singleTable"
|
||||
v-loading="loading"
|
||||
:header-cell-style="{'background':'#f5f7fa'}"
|
||||
v-tabh
|
||||
>
|
||||
<!-- <el-table-column prop="dictType" label="字典类型" align="center"/>-->
|
||||
<el-table-column prop="dictLabel" label="字典标签" align="center"/>
|
||||
<el-table-column prop="" label="示例" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.isType" :type="scope.row.listClass" :effect="scope.row.theme">
|
||||
{{ scope.row.dictLabel }}
|
||||
</el-tag>
|
||||
<el-tag v-else :color="scope.row.listClass" :effect="scope.row.theme">{{ scope.row.dictLabel }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dictValue" label="字典键值" align="center"/>
|
||||
<el-table-column prop="dictSort" label="排序" align="center" width="60px"/>
|
||||
<el-table-column prop="state" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<tag dict-type="normal_disable" v-if="loadTag" :value="scope.row.state"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" align="center" width="180px"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" v-perm="['dict:data:edit']"
|
||||
@click="handleEditData(scope.row.dictCode)" link>编辑
|
||||
</el-button>
|
||||
<popover-delete :name="scope.row.dictLabel" :type="'字典数据'" :perm="['dict:data:del']"
|
||||
@delete="handleDeleteData(scope.row.dictCode)"/>
|
||||
</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"/>
|
||||
</div>
|
||||
</div>
|
||||
<!--新增/修改字典类型弹窗-->
|
||||
<el-dialog v-model="isTypeVisited" :title="typeTitle" width="700px">
|
||||
<el-form :model="form" ref="formInstance" :rules="formRules" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="字典名称" prop="dictName">
|
||||
<el-input v-model="form.dictName" placeholder="请输入字典名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="字典类型" prop="dictType">
|
||||
<el-input v-model="form.dictType" placeholder="请输入字典类型"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-radio-group v-model="form.state" size="mini">
|
||||
<el-radio v-for="dict in cacheStore.getDict('normal_disable')" :key="dict.value" :label="dict.value">
|
||||
{{ dict.label }}
|
||||
</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="handleDictTypeSubmit(formInstance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!--新增/修改字典数据弹窗-->
|
||||
<el-dialog v-model="isDataVisited" :title="dataTitle" width="700px">
|
||||
<el-form :model="dataForm" ref="instance" :rules="dataRules" label-width="100px">
|
||||
<el-row>
|
||||
<!-- <el-col :span="24">-->
|
||||
<!-- <el-form-item label="字典类型" prop="dictType">-->
|
||||
<!-- <el-input v-model="dataForm.dictType" placeholder="请输入字典类型" disabled></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :span="24">
|
||||
<el-form-item label="字典标签" prop="dictLabel">
|
||||
<el-input v-model="dataForm.dictLabel" placeholder="请输入字典标签"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典键值" prop="dictValue">
|
||||
<el-input v-model="dataForm.dictValue" placeholder="请输入字典键值"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="排序" prop="dictSort">
|
||||
<el-input-number v-model="dataForm.dictSort"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-radio-group v-model="dataForm.state" size="mini">
|
||||
<el-radio v-for="dict in cacheStore.getDict('normal_disable')" :key="dict.value" :label="dict.value">
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label="是否默认" prop="isDefault">-->
|
||||
<!-- <el-radio-group v-model="dataForm.isDefault" size="mini">-->
|
||||
<!-- <el-radio v-for="dict in [{value:0,label:'是'},{value:1,label:'否'}]" :key="dict.value" :label="dict.value">-->
|
||||
<!-- {{ dict.label }}-->
|
||||
<!-- </el-radio>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="标签类型" prop="isType">
|
||||
<el-switch v-model="dataForm.isType" active-text="是" inactive-text="否"
|
||||
@change="switchIsType($event,dataForm)"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="标签主题" prop="theme">
|
||||
<el-select v-model="dataForm.theme" placeholder="请选择显示样式">
|
||||
<el-option
|
||||
v-for="item in tagThemeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="标签样式" prop="listClass">
|
||||
<el-select v-model="dataForm.listClass" placeholder="请选择显示样式" v-if="dataForm.isType">
|
||||
<el-option
|
||||
v-for="item in tagTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-color-picker v-model="dataForm.listClass" v-else/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="示例">
|
||||
<el-tag v-if="dataForm.isType" :type="dataForm.listClass" :effect="dataForm.theme">
|
||||
{{ dataForm.dictLabel }}
|
||||
</el-tag>
|
||||
<el-tag v-else :color="dataForm.listClass" :effect="dataForm.theme">{{ dataForm.dictLabel }}</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleDataCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleDictDataSubmit(instance)">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {getDictTypeList, getDictTypeDetails, addDictType, editDictType, delDictType} from "@/api/system/dict-type";
|
||||
import {getDictDataList, addDictData, delDictData, editDictData, getDictDataDetails} from "@/api/system/dict-data";
|
||||
import {Search, Refresh, Delete, Plus, Edit, Download} from "@element-plus/icons-vue";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {useCacheStore} from "@/stores/cache.js";
|
||||
import Paging from "@/components/pagination/index.vue";
|
||||
import {downLoadExcel} from "@/utils/downloadZip";
|
||||
import Tag from "@/components/Tag.vue";
|
||||
|
||||
const cacheStore = useCacheStore();
|
||||
cacheStore.setCacheKey(["normal_disable"]);
|
||||
//查询参数
|
||||
const queryType = reactive({
|
||||
dictType: ""
|
||||
});
|
||||
//查询参数
|
||||
const queryData = reactive({
|
||||
dictLabel: ""
|
||||
});
|
||||
//页面信息
|
||||
const pageInfo = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
const loadTag = ref(true);
|
||||
const tree = ref();
|
||||
const isSearchData = ref(true);
|
||||
const treeData = ref([]);
|
||||
const defaultProps = {
|
||||
label: "dictName"
|
||||
};
|
||||
const disabled = ref(true);
|
||||
const disabledDelete = ref(false);
|
||||
const list = ref([]);
|
||||
const loading = ref(false);
|
||||
const total = ref();
|
||||
const typeTitle = ref("");
|
||||
const dataTitle = ref("");
|
||||
const isTypeVisited = ref(false);
|
||||
const isDataVisited = ref(false);
|
||||
const singleTable = ref();
|
||||
const form = ref();
|
||||
const typeData = ref();
|
||||
const dataForm = ref();
|
||||
const instance = ref();
|
||||
const formInstance = ref();
|
||||
const formRules = ref({});
|
||||
const dataRules = ref({});
|
||||
const tagTypeList = ref([
|
||||
{
|
||||
value: 'primary',
|
||||
label: 'primary'
|
||||
},
|
||||
{
|
||||
value: 'success',
|
||||
label: 'success'
|
||||
},
|
||||
{
|
||||
value: 'info',
|
||||
label: 'info'
|
||||
},
|
||||
{
|
||||
value: 'warning',
|
||||
label: 'warning'
|
||||
},
|
||||
{
|
||||
value: 'danger',
|
||||
label: 'danger'
|
||||
},
|
||||
]);
|
||||
const tagThemeList = ref([
|
||||
{
|
||||
value: 'dark',
|
||||
label: 'dark'
|
||||
},
|
||||
{
|
||||
value: 'light',
|
||||
label: 'light'
|
||||
},
|
||||
{
|
||||
value: 'plain',
|
||||
label: 'plain'
|
||||
}
|
||||
]);
|
||||
const router = useRouter();
|
||||
|
||||
const switchIsType = (val, dataForm) => {
|
||||
if (val) {
|
||||
dataForm.isType=true
|
||||
dataForm.listClass = 'primary'
|
||||
} else {
|
||||
dataForm.isType=false
|
||||
dataForm.listClass = '#ecf5ff'
|
||||
}
|
||||
}
|
||||
//获取字典类型
|
||||
const getTreeList = async () => {
|
||||
let params = {
|
||||
...queryType,
|
||||
pageNum: 1,
|
||||
pageSize: 50
|
||||
};
|
||||
getDictTypeList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
treeData.value = res.data.rows;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取字典数据
|
||||
const getList = async (dictLabel, dictType) => {
|
||||
if (typeData.value !== undefined) {
|
||||
isSearchData.value = false
|
||||
let params = {
|
||||
dictLabel: dictLabel,
|
||||
dictType: dictType,
|
||||
...pageInfo
|
||||
};
|
||||
loading.value = true;
|
||||
getDictDataList(params).then(res => {
|
||||
if (res.code === 1000) {
|
||||
loadTag.value = false
|
||||
list.value = res.data.rows;
|
||||
total.value = res.data.total;
|
||||
loading.value = false;
|
||||
nextTick(() => {
|
||||
loadTag.value = true
|
||||
})
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
isSearchData.value = true
|
||||
}
|
||||
};
|
||||
//点击字典类型,右侧表格出现字典数据
|
||||
const handleNodeClick = (node) => {
|
||||
typeData.value = node.dictType;
|
||||
if (node.dictType) {
|
||||
getList('', node.dictType);
|
||||
}
|
||||
};
|
||||
|
||||
const currentChange = (Node) => {
|
||||
localStorage.setItem("dictStore", JSON.stringify(Node));
|
||||
};
|
||||
|
||||
|
||||
//重置from表单
|
||||
const restForm = () => {
|
||||
form.value = {
|
||||
dictName: null,
|
||||
dictType: null,
|
||||
state: "1"
|
||||
};
|
||||
};
|
||||
//重置dataFrom表单
|
||||
const restDataForm = () => {
|
||||
dataForm.value = {
|
||||
dictType: typeData.value,
|
||||
dictLabel: null,
|
||||
dictValue: null,
|
||||
dictSort: 0,
|
||||
state: "1",
|
||||
// isDefault:0,
|
||||
isType: true,
|
||||
theme: 'dark',
|
||||
listClass: 'primary',
|
||||
};
|
||||
};
|
||||
//添加字典类型
|
||||
const handleAddType = () => {
|
||||
restForm();
|
||||
typeTitle.value = "新增字典类型表";
|
||||
isTypeVisited.value = true;
|
||||
};
|
||||
//修改字典类型
|
||||
const handleEditType = () => {
|
||||
if (tree.value.currentNode == null) {
|
||||
ElMessageBox.alert("请先在下方选择一个字典类型进行修改数据", "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
type: "warning"
|
||||
});
|
||||
} else {
|
||||
restForm();
|
||||
const dictId = JSON.parse(localStorage.getItem("dictStore")).dictId;
|
||||
//查看详情
|
||||
getDictTypeDetails(dictId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
form.value = res.data;
|
||||
typeTitle.value = "编辑字典类型表";
|
||||
isTypeVisited.value = true;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
//删除字典类型
|
||||
const handleDeleteType = () => {
|
||||
if (tree.value.currentNode == null) {
|
||||
ElMessageBox.alert("请先在下方选择一个字典类型进行删除数据", "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
type: "warning"
|
||||
});
|
||||
} else {
|
||||
const dictId = JSON.parse(localStorage.getItem("dictStore")).dictId;
|
||||
const dictName = JSON.parse(localStorage.getItem("dictStore")).dictName;
|
||||
ElMessageBox.confirm(`确认删除字典名称为${dictName}的字典类型表吗?`, "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(() => {
|
||||
delDictType(dictId).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getTreeList();
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//添加字典数据
|
||||
const handleAddData = () => {
|
||||
if (tree.value.currentNode == null) {
|
||||
ElMessageBox.alert("请先在左边选择一个字典类型进行新增数据", "系统提示", {
|
||||
confirmButtonText: "确定",
|
||||
type: "warning"
|
||||
});
|
||||
} else {
|
||||
restDataForm();
|
||||
dataTitle.value = "新增字典数据表";
|
||||
isDataVisited.value = true;
|
||||
}
|
||||
};
|
||||
//修改字典数据
|
||||
const handleEditData = async (dictCode) => {
|
||||
restDataForm();
|
||||
//查看详情
|
||||
getDictDataDetails(dictCode).then(res => {
|
||||
if (res.code === 1000) {
|
||||
dataForm.value = res.data
|
||||
dataTitle.value = "编辑字典数据表";
|
||||
isDataVisited.value = true;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
//删除字典数据
|
||||
const handleDeleteData = async (row) => {
|
||||
delDictData(row).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList('', typeData.value);
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//取消字典类型操作弹窗
|
||||
const handleCancel = () => {
|
||||
restForm();
|
||||
isTypeVisited.value = false;
|
||||
};
|
||||
//取消字典数据操作弹窗
|
||||
const handleDataCancel = () => {
|
||||
restDataForm();
|
||||
isDataVisited.value = false;
|
||||
};
|
||||
//提交
|
||||
const handleDictTypeSubmit = async (instance) => {
|
||||
if (!instance) return;
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (typeTitle.value === "新增字典类型表") {
|
||||
addDictType(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getTreeList();
|
||||
isTypeVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else if (typeTitle.value === "编辑字典类型表") {
|
||||
// cacheStore.removeDict(form.value.dictType)
|
||||
editDictType(form.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getTreeList();
|
||||
isTypeVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
//提交
|
||||
const handleDictDataSubmit = async (instance) => {
|
||||
if (!instance) return;
|
||||
instance.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
if (dataTitle.value === "新增字典数据表") {
|
||||
addDictData(dataForm.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList('', typeData.value);
|
||||
isDataVisited.value = false;
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
} else if (dataTitle.value === "编辑字典数据表") {
|
||||
if(dataForm.value.isType===null){
|
||||
dataForm.value.isType=false;
|
||||
}
|
||||
editDictData(dataForm.value).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success(res.msg);
|
||||
getList('', typeData.value);
|
||||
isDataVisited.value = false;
|
||||
// router.go(0);
|
||||
} else {
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//导出excel
|
||||
const handleExport = () => {
|
||||
downLoadExcel("/admin/dict/type/export", {...queryType});
|
||||
};
|
||||
|
||||
//切换每页显示条数
|
||||
const handleSizeChange = (val) => {
|
||||
pageInfo.pageSize = val;
|
||||
getList('', typeData.value);
|
||||
};
|
||||
|
||||
//点击页码进行分页功能
|
||||
const handleCurrentChange = (val) => {
|
||||
pageInfo.pageNum = val;
|
||||
getList('', typeData.value);
|
||||
};
|
||||
getTreeList();
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-tag.el-tag--dark) {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user