初始化
This commit is contained in:
clay
119
ebts-ui/src/views/tool/apiclass/apiclassInfoForm.vue
Normal file
119
ebts-ui/src/views/tool/apiclass/apiclassInfoForm.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<el-form ref="apiclassInfoForm" :model="info" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="类名" prop="cName">
|
||||
<el-input placeholder="请输入类名" v-model="info.packageName" :disabled="true"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="前缀" prop="prefix">
|
||||
<el-input v-model="info.prefix" :disabled="true"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="模块名" prop="cName">
|
||||
<el-select v-model="info.mId" placeholder="请选择模块" @change="transform" clearable>
|
||||
<el-option
|
||||
v-for="item in moduleList"
|
||||
:key="item.id"
|
||||
:label="item.mName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="类名" prop="cName">
|
||||
<el-input placeholder="请输入类名" @input="transform" v-model="info.cName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="作者" prop="author">
|
||||
<el-input placeholder="请输入" v-model="info.author"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="类描述" prop="cDescribe">
|
||||
<el-input placeholder="请输入" v-model="info.cDescribe"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="电子邮件" prop="email">
|
||||
<el-input placeholder="请输入" v-model="info.email"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注">
|
||||
<el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import {queryListModule} from "@/api/tool/module"
|
||||
|
||||
export default {
|
||||
name: "ApiclassInfoForm",
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moduleList: [],
|
||||
rules: {
|
||||
packageName: [
|
||||
{required: true, message: "包名不能为空", trigger: "blur"},
|
||||
],
|
||||
mId: [
|
||||
{required: true, message: "模块不能为空", trigger: "blur"},
|
||||
],
|
||||
cName: [
|
||||
{required: true, message: "类名不能为空", trigger: "blur"},
|
||||
],
|
||||
cDescribe: [
|
||||
{required: true, message: "类描述不能为空", trigger: "blur"},
|
||||
],
|
||||
author: [
|
||||
{required: true, message: "作者不能为空", trigger: "blur"},
|
||||
],
|
||||
email: [
|
||||
{required: true, message: "电子邮件不能为空", trigger: "blur"},
|
||||
{
|
||||
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
|
||||
message: '电子邮件格式有误',
|
||||
trigger: "blur"
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
queryListModule().then(respone => {
|
||||
this.moduleList = respone.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
transform() {
|
||||
var mid = this.info.mId
|
||||
var str = ''
|
||||
var start = true
|
||||
for (let i = 0; i < this.moduleList.length; i++) {
|
||||
if (mid == this.moduleList[i].id) {
|
||||
str = this.moduleList[i].mName
|
||||
start = false
|
||||
}
|
||||
}
|
||||
if (start) {
|
||||
str = ''
|
||||
}
|
||||
this.info.packageName = 'com.ebts.' + str
|
||||
this.info.prefix = str + ":" + this.info.cName.toLowerCase()
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
205
ebts-ui/src/views/tool/apiclass/editTable.vue
Normal file
205
ebts-ui/src/views/tool/apiclass/editTable.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="基本信息" name="basic">
|
||||
<apiclass-info-form ref="apiclassInfo" :info="info"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="接口信息" name="cloum">
|
||||
<el-row class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['tool:module:export']"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table ref="dragTable" :data="cloumns" row-key="columnId" :max-height="tableHeight">
|
||||
<el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag"/>
|
||||
<el-table-column label="接口名称" min-width="10%">
|
||||
<template slot-scope="scope" >
|
||||
<el-input v-model="scope.row.itName"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="接口描述" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.itDescribe"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="请求路径" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.requrl"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="许可" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" false-label="0" v-model="scope.row.isPermission"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="生成" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" false-label="0" v-model="scope.row.isGenerate"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="请求类型" min-width="12%">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.method">
|
||||
<el-option label="Get" value="Get"/>
|
||||
<el-option label="Post" value="Post"/>
|
||||
<el-option label="Put" value="Put"/>
|
||||
<el-option label="Delete" value="Delete"/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.$index,scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="生成信息" name="genInfo">-->
|
||||
<!-- <gen-info-form ref="genInfo" :info="info" :tables="tables" :menus="menus"/>-->
|
||||
<!-- </el-tab-pane>-->
|
||||
</el-tabs>
|
||||
<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-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ApiclassInfoForm from "./apiclassInfoForm";
|
||||
import {listIntertable,updateIntertable} from "@/api/tool/interTable";
|
||||
import {Message} from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "ApiclassEdit",
|
||||
components: {ApiclassInfoForm},
|
||||
data() {
|
||||
return {
|
||||
// 选中选项卡的 name
|
||||
activeName: "cloum",
|
||||
// 表格的高度
|
||||
tableHeight: document.documentElement.scrollHeight - 245 + "px",
|
||||
// 表信息
|
||||
tables: [],
|
||||
// 表列信息
|
||||
cloumns: [],
|
||||
// 字典信息
|
||||
dictOptions: [],
|
||||
// 菜单信息
|
||||
menus: [],
|
||||
regularOptions: [],
|
||||
// 表详细信息
|
||||
info: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const apiclassId = this.$route.params && this.$route.params.apiclassId;
|
||||
if (apiclassId) {
|
||||
let data = {
|
||||
cId: apiclassId,
|
||||
type: 2,
|
||||
}
|
||||
listIntertable(data).then(response => {
|
||||
this.cloumns = response.data.rows
|
||||
this.info = response.data.info
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 删除按钮 */
|
||||
handleDelete(index, row) {
|
||||
this.cloumns.splice(index, 1);
|
||||
},
|
||||
/** 新增按钮 */
|
||||
handleAdd() {
|
||||
let row = {
|
||||
id: null,
|
||||
cId: this.info.id,
|
||||
mId: this.info.mId,
|
||||
isGenerate: '1',
|
||||
isPermission: '1',
|
||||
itDescribe: '',
|
||||
itName: '',
|
||||
method: 'Get',
|
||||
requrl: '',
|
||||
type: 2,
|
||||
}
|
||||
this.cloumns.push(row)
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
const apiclassForm = this.$refs.apiclassInfo.$refs.apiclassInfoForm;
|
||||
Promise.all([apiclassForm].map(this.getFormPromise)).then(res => {
|
||||
const validateResult = res.every(item => !!item);
|
||||
for (let i=0;i<this.cloumns.length;i++){
|
||||
if (this.cloumns[i].itDescribe == ''){
|
||||
Message({
|
||||
message: "序号"+(i+1)+"接口描述不能为空!",
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}else if (this.cloumns[i].itName == ''){
|
||||
Message({
|
||||
message: "序号"+(i+1)+"接口名称不能为空!",
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}else if (this.cloumns[i].requrl == ''){
|
||||
Message({
|
||||
message: "序号"+(i+1)+"请求路径不能为空!",
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
if (validateResult) {
|
||||
const interTableDto = {
|
||||
apiclass: apiclassForm.model,
|
||||
interTables: this.cloumns,
|
||||
};
|
||||
updateIntertable(interTableDto).then(res => {
|
||||
this.msgSuccess(res.msg);
|
||||
if (res.code === 200) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.msgError("表单校验未通过，请重新检查提交内容");
|
||||
}
|
||||
});
|
||||
},
|
||||
getFormPromise(form) {
|
||||
return new Promise(resolve => {
|
||||
form.validate(res => {
|
||||
resolve(res);
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 关闭按钮 */
|
||||
close() {
|
||||
this.$store.dispatch("tagsView/delView", this.$route);
|
||||
this.$router.push({path: "/tool/apiclass", query: {t: Date.now()}})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
463
ebts-ui/src/views/tool/apiclass/index.vue
Normal file
463
ebts-ui/src/views/tool/apiclass/index.vue
Normal file
@@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="模块" prop="mId">
|
||||
<el-select v-model="queryParams.mId" placeholder="请选择模块" v-on:change="handleQuery" clearable size="small">
|
||||
<el-option
|
||||
v-for="item in moduleList"
|
||||
:key="item.id"
|
||||
:label="item.mName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类名" prop="cName">
|
||||
<el-input
|
||||
v-model="queryParams.cName"
|
||||
placeholder="请输入类名"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类描述" prop="cDescribe">
|
||||
<el-input
|
||||
v-model="queryParams.cDescribe"
|
||||
placeholder="请输入类描述"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="daterangeCreateTime"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['tool:apiclass:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['tool:apiclass:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['tool:apiclass:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['tool:apiclass:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="apiclassList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="45" align="center"/>
|
||||
<el-table-column label="包名" width="180" align="center" prop="packageName"/>
|
||||
<el-table-column label="模块" align="center" prop="module.mName"/>
|
||||
<el-table-column label="模块名称" align="center" prop="module.mDescribe"/>
|
||||
<el-table-column label="类名" align="center" prop="cName"/>
|
||||
<el-table-column label="类描述" align="center" prop="cDescribe"/>
|
||||
<el-table-column label="作者" align="center" prop="author"/>
|
||||
<el-table-column label="电子邮件" width="180" align="center" prop="email"/>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="280" label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-view"
|
||||
@click="handlePreview(scope.row.id)"
|
||||
v-hasPermi="['tool:apiclass:preview']"
|
||||
>预览</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['tool:apiclass:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-edit-outline"
|
||||
@click="handleEditTable(scope.row)"
|
||||
v-hasPermi="['tool:apiclass:update']"
|
||||
>接口</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['tool:apiclass:remove']"
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-download"
|
||||
@click="handleGenTable(scope.row)"
|
||||
v-hasPermi="['tool:apiclass:code']"
|
||||
>生成代码</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改接口类名对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="包名" prop="packageName">
|
||||
<el-input v-model="form.packageName" :disabled="true"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="前缀" prop="prefix">
|
||||
<el-input v-model="form.prefix" :disabled="true"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块" prop="mId">
|
||||
<el-select v-model="form.mId" placeholder="请选择模块" @change="transform" clearable>
|
||||
<el-option
|
||||
v-for="item in moduleList"
|
||||
:key="item.id"
|
||||
:label="item.mName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="类名" prop="cName">
|
||||
<el-input v-model="form.cName" @input="transform" placeholder="请输入类名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类描述" prop="cDescribe">
|
||||
<el-input v-model="form.cDescribe" placeholder="请输入类描述"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="作者" prop="author">
|
||||
<el-input v-model="form.author" placeholder="请输入作者"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电子邮件" prop="email">
|
||||
<el-input v-model="form.email" placeholder="请输入电子邮件"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 预览界面 -->
|
||||
<el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body>
|
||||
<el-tabs v-model="preview.activeName">
|
||||
<el-tab-pane
|
||||
v-for="(value, key) in preview.data"
|
||||
:label="key"
|
||||
:name="key"
|
||||
:key="key"
|
||||
>
|
||||
<pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listApiclass, getApiclass, delApiclass, addApiclass, updateApiclass, exportApiclass } from "@/api/tool/apiclass";
|
||||
import {queryListModule} from "@/api/tool/module"
|
||||
import {getClassPreview} from "@/api/tool/interTable"
|
||||
import hljs from "highlight.js/lib/highlight";
|
||||
import "highlight.js/styles/github-gist.css";
|
||||
import {genCode} from "@/api/tool/gen";
|
||||
import {downLoadZip} from "@/utils/zipdownload";
|
||||
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
|
||||
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));
|
||||
export default {
|
||||
name: "Apiclass",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 接口类名表格数据
|
||||
apiclassList: [],
|
||||
// 模块数据列表
|
||||
moduleList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 创建时间时间范围
|
||||
daterangeCreateTime: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
mId: null,
|
||||
cName: null,
|
||||
cDescribe: null,
|
||||
},
|
||||
// 预览参数
|
||||
preview: {
|
||||
open: false,
|
||||
title: "代码预览",
|
||||
data: {},
|
||||
activeName: ""
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
packageName: [
|
||||
{required: true, message: "包名不能为空", trigger: "blur"},
|
||||
],
|
||||
prefix: [
|
||||
{required: true, message: "包名不能为空", trigger: "blur"},
|
||||
],
|
||||
mId: [
|
||||
{required: true, message: "模块不能为空", trigger: "blur"},
|
||||
],
|
||||
cName: [
|
||||
{required: true, message: "类名不能为空", trigger: "blur"},
|
||||
],
|
||||
cDescribe: [
|
||||
{required: true, message: "类描述不能为空", trigger: "blur"},
|
||||
],
|
||||
author: [
|
||||
{required: true, message: "作者不能为空", trigger: "blur"},
|
||||
],
|
||||
email: [
|
||||
{required: true, message: "电子邮件不能为空", trigger: "blur"},
|
||||
{
|
||||
pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
|
||||
message: '电子邮件格式有误',
|
||||
trigger: "blur"
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
queryListModule().then(respone => {
|
||||
this.moduleList = respone.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/** 预览代码 */
|
||||
handlePreview(id){
|
||||
getClassPreview(id).then(res =>{
|
||||
this.preview.data = res.data;
|
||||
this.preview.open = true;
|
||||
var keys = Object.keys(res.data)
|
||||
this.preview.activeName = keys[0]
|
||||
})
|
||||
},
|
||||
/** 生成代码操作 */
|
||||
handleGenTable(row) {
|
||||
downLoadZip("/generator/intertable/classgen/" + row.id, "hchyun");
|
||||
},
|
||||
/** 高亮显示 */
|
||||
highlightedCode(code, key) {
|
||||
const vmName = key;
|
||||
var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
|
||||
const result = hljs.highlight(language, code || "", true);
|
||||
return result.value || ' ';
|
||||
},
|
||||
/** 查询接口类名列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listApiclass(this.addCreateDateRange(this.queryParams, this.daterangeCreateTime)).then(response => {
|
||||
this.apiclassList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
handleEditTable(row){
|
||||
const apiclassId = row.id || this.ids[0];
|
||||
this.$router.push("/apiclass/edit/" + apiclassId);
|
||||
},
|
||||
transform() {
|
||||
var mid = this.form.mId
|
||||
var str = ''
|
||||
var start = true
|
||||
for (let i = 0; i < this.moduleList.length; i++) {
|
||||
if (mid == this.moduleList[i].id) {
|
||||
str = this.moduleList[i].mName
|
||||
start = false
|
||||
}
|
||||
}
|
||||
if (start) {
|
||||
str = ''
|
||||
}
|
||||
this.form.packageName = 'com.ebts.' + str
|
||||
this.form.prefix = str+":"+this.form.cName.toLowerCase()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
mId: null,
|
||||
cName: "",
|
||||
cDescribe: null,
|
||||
packageName: "com.ebts.",
|
||||
author: "binlin",
|
||||
email: "clay@huchyun.com",
|
||||
remark: null,
|
||||
prefix: ""
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.daterangeCreateTime = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加接口类名";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getApiclass(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改接口类名";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateApiclass(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addApiclass(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm('是否确认删除接口类名编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function () {
|
||||
return delApiclass(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有接口类名数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function () {
|
||||
return exportApiclass(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
106
ebts-ui/src/views/tool/build/CodeTypeDialog.vue
Normal file
106
ebts-ui/src/views/tool/build/CodeTypeDialog.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-bind="$attrs"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
:modal-append-to-body="false"
|
||||
v-on="$listeners"
|
||||
@open="onOpen"
|
||||
@close="onClose"
|
||||
>
|
||||
<el-row :gutter="15">
|
||||
<el-form
|
||||
ref="elForm"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
size="medium"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="生成类型" prop="type">
|
||||
<el-radio-group v-model="formData.type">
|
||||
<el-radio-button
|
||||
v-for="(item, index) in typeOptions"
|
||||
:key="index"
|
||||
:label="item.value"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="showFileName" label="文件名" prop="fileName">
|
||||
<el-input v-model="formData.fileName" placeholder="请输入文件名" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<div slot="footer">
|
||||
<el-button @click="close">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handelConfirm">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
props: ['showFileName'],
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
fileName: undefined,
|
||||
type: 'file'
|
||||
},
|
||||
rules: {
|
||||
fileName: [{
|
||||
required: true,
|
||||
message: '请输入文件名',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
type: [{
|
||||
required: true,
|
||||
message: '生成类型不能为空',
|
||||
trigger: 'change'
|
||||
}]
|
||||
},
|
||||
typeOptions: [{
|
||||
label: '页面',
|
||||
value: 'file'
|
||||
}, {
|
||||
label: '弹窗',
|
||||
value: 'dialog'
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onOpen() {
|
||||
if (this.showFileName) {
|
||||
this.formData.fileName = `${+new Date()}.vue`
|
||||
}
|
||||
},
|
||||
onClose() {
|
||||
},
|
||||
close(e) {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
handelConfirm() {
|
||||
this.$refs.elForm.validate(valid => {
|
||||
if (!valid) return
|
||||
this.$emit('confirm', { ...this.formData })
|
||||
this.close()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
100
ebts-ui/src/views/tool/build/DraggableItem.vue
Normal file
100
ebts-ui/src/views/tool/build/DraggableItem.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import render from '@/utils/generator/render'
|
||||
|
||||
const components = {
|
||||
itemBtns(h, element, index, parent) {
|
||||
const { copyItem, deleteItem } = this.$listeners
|
||||
return [
|
||||
<span class="drawing-item-copy" title="复制" onClick={event => {
|
||||
copyItem(element, parent); event.stopPropagation()
|
||||
}}>
|
||||
<i class="el-icon-copy-document" />
|
||||
</span>,
|
||||
<span class="drawing-item-delete" title="删除" onClick={event => {
|
||||
deleteItem(index, parent); event.stopPropagation()
|
||||
}}>
|
||||
<i class="el-icon-delete" />
|
||||
</span>
|
||||
]
|
||||
}
|
||||
}
|
||||
const layouts = {
|
||||
colFormItem(h, element, index, parent) {
|
||||
const { activeItem } = this.$listeners
|
||||
let className = this.activeId === element.formId ? 'drawing-item active-from-item' : 'drawing-item'
|
||||
if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
|
||||
return (
|
||||
<el-col span={element.span} class={className}
|
||||
nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
|
||||
<el-form-item label-width={element.labelWidth ? `${element.labelWidth}px` : null}
|
||||
label={element.label} required={element.required}>
|
||||
<render key={element.renderKey} conf={element} onInput={ event => {
|
||||
this.$set(element, 'defaultValue', event)
|
||||
}} />
|
||||
</el-form-item>
|
||||
{components.itemBtns.apply(this, arguments)}
|
||||
</el-col>
|
||||
)
|
||||
},
|
||||
rowFormItem(h, element, index, parent) {
|
||||
const { activeItem } = this.$listeners
|
||||
const className = this.activeId === element.formId ? 'drawing-row-item active-from-item' : 'drawing-row-item'
|
||||
let child = renderChildren.apply(this, arguments)
|
||||
if (element.type === 'flex') {
|
||||
child = <el-row type={element.type} justify={element.justify} align={element.align}>
|
||||
{child}
|
||||
</el-row>
|
||||
}
|
||||
return (
|
||||
<el-col span={element.span}>
|
||||
<el-row gutter={element.gutter} class={className}
|
||||
nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
|
||||
<span class="component-name">{element.componentName}</span>
|
||||
<draggable list={element.children} animation={340} group="componentsGroup" class="drag-wrapper">
|
||||
{child}
|
||||
</draggable>
|
||||
{components.itemBtns.apply(this, arguments)}
|
||||
</el-row>
|
||||
</el-col>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function renderChildren(h, element, index, parent) {
|
||||
if (!Array.isArray(element.children)) return null
|
||||
return element.children.map((el, i) => {
|
||||
const layout = layouts[el.layout]
|
||||
if (layout) {
|
||||
return layout.call(this, h, el, i, element.children)
|
||||
}
|
||||
return layoutIsNotFound()
|
||||
})
|
||||
}
|
||||
|
||||
function layoutIsNotFound() {
|
||||
throw new Error(`没有与${this.element.layout}匹配的layout`)
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
render,
|
||||
draggable
|
||||
},
|
||||
props: [
|
||||
'element',
|
||||
'index',
|
||||
'drawingList',
|
||||
'activeId',
|
||||
'formConf'
|
||||
],
|
||||
render(h) {
|
||||
const layout = layouts[this.element.layout]
|
||||
|
||||
if (layout) {
|
||||
return layout.call(this, h, this.element, this.index, this.drawingList)
|
||||
}
|
||||
return layoutIsNotFound()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
123
ebts-ui/src/views/tool/build/IconsDialog.vue
Normal file
123
ebts-ui/src/views/tool/build/IconsDialog.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="icon-dialog">
|
||||
<el-dialog
|
||||
v-bind="$attrs"
|
||||
width="980px"
|
||||
:modal-append-to-body="false"
|
||||
v-on="$listeners"
|
||||
@open="onOpen"
|
||||
@close="onClose"
|
||||
>
|
||||
<div slot="title">
|
||||
选择图标
|
||||
<el-input
|
||||
v-model="key"
|
||||
size="mini"
|
||||
:style="{width: '260px'}"
|
||||
placeholder="请输入图标名称"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<ul class="icon-ul">
|
||||
<li
|
||||
v-for="icon in iconList"
|
||||
:key="icon"
|
||||
:class="active===icon?'active-item':''"
|
||||
@click="onSelect(icon)"
|
||||
>
|
||||
<i :class="icon" />
|
||||
<div>{{ icon }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iconList from '@/utils/generator/icon.json'
|
||||
|
||||
const originList = iconList.map(name => `el-icon-${name}`)
|
||||
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
props: ['current'],
|
||||
data() {
|
||||
return {
|
||||
iconList: originList,
|
||||
active: null,
|
||||
key: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
key(val) {
|
||||
if (val) {
|
||||
this.iconList = originList.filter(name => name.indexOf(val) > -1)
|
||||
} else {
|
||||
this.iconList = originList
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen() {
|
||||
this.active = this.current
|
||||
this.key = ''
|
||||
},
|
||||
onClose() {},
|
||||
onSelect(icon) {
|
||||
this.active = icon
|
||||
this.$emit('select', icon)
|
||||
this.$emit('update:visible', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.icon-ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
width: 16.66%;
|
||||
box-sizing: border-box;
|
||||
height: 108px;
|
||||
padding: 15px 6px 6px 6px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
&.active-item{
|
||||
background: #e1f3fb;
|
||||
color: #7a6df0
|
||||
}
|
||||
> i {
|
||||
font-size: 30px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-dialog {
|
||||
::v-deep .el-dialog {
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 4vh !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 92vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
.el-dialog__header {
|
||||
padding-top: 14px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
margin: 0 20px 20px 20px;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
944
ebts-ui/src/views/tool/build/RightPanel.vue
Normal file
944
ebts-ui/src/views/tool/build/RightPanel.vue
Normal file
@@ -0,0 +1,944 @@
|
||||
<template>
|
||||
<div class="right-board">
|
||||
<el-tabs v-model="currentTab" class="center-tabs">
|
||||
<el-tab-pane label="组件属性" name="field" />
|
||||
<el-tab-pane label="表单属性" name="form" />
|
||||
</el-tabs>
|
||||
<div class="field-box">
|
||||
<a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
|
||||
<i class="el-icon-link" />
|
||||
</a>
|
||||
<el-scrollbar class="right-scrollbar">
|
||||
<!-- 组件属性 -->
|
||||
<el-form v-show="currentTab==='field' && showField" size="small" label-width="90px">
|
||||
<el-form-item v-if="activeData.changeTag" label="组件类型">
|
||||
<el-select
|
||||
v-model="activeData.tagIcon"
|
||||
placeholder="请选择组件类型"
|
||||
:style="{width: '100%'}"
|
||||
@change="tagChange"
|
||||
>
|
||||
<el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
|
||||
<el-option
|
||||
v-for="item in group.options"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.tagIcon"
|
||||
>
|
||||
<svg-icon class="node-icon" :icon-class="item.tagIcon" />
|
||||
<span> {{ item.label }}</span>
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.vModel!==undefined" label="字段名">
|
||||
<el-input v-model="activeData.vModel" placeholder="请输入字段名（v-model）" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.componentName!==undefined" label="组件名">
|
||||
{{ activeData.componentName }}
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.label!==undefined" label="标题">
|
||||
<el-input v-model="activeData.label" placeholder="请输入标题" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.placeholder!==undefined" label="占位提示">
|
||||
<el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['start-placeholder']!==undefined" label="开始占位">
|
||||
<el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['end-placeholder']!==undefined" label="结束占位">
|
||||
<el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.span!==undefined" label="表单栅格">
|
||||
<el-slider v-model="activeData.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.layout==='rowFormItem'" label="栅格间隔">
|
||||
<el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.layout==='rowFormItem'" label="布局模式">
|
||||
<el-radio-group v-model="activeData.type">
|
||||
<el-radio-button label="default" />
|
||||
<el-radio-button label="flex" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.justify!==undefined&&activeData.type==='flex'" label="水平排列">
|
||||
<el-select v-model="activeData.justify" placeholder="请选择水平排列" :style="{width: '100%'}">
|
||||
<el-option
|
||||
v-for="(item, index) in justifyOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.align!==undefined&&activeData.type==='flex'" label="垂直排列">
|
||||
<el-radio-group v-model="activeData.align">
|
||||
<el-radio-button label="top" />
|
||||
<el-radio-button label="middle" />
|
||||
<el-radio-button label="bottom" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.labelWidth!==undefined" label="标签宽度">
|
||||
<el-input v-model.number="activeData.labelWidth" type="number" placeholder="请输入标签宽度" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
|
||||
<el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.vModel!==undefined" label="默认值">
|
||||
<el-input
|
||||
:value="setDefaultValue(activeData.defaultValue)"
|
||||
placeholder="请输入默认值"
|
||||
@input="onDefaultValueInput"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag==='el-checkbox-group'" label="至少应选">
|
||||
<el-input-number
|
||||
:value="activeData.min"
|
||||
:min="0"
|
||||
placeholder="至少应选"
|
||||
@input="$set(activeData, 'min', $event?$event:undefined)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag==='el-checkbox-group'" label="最多可选">
|
||||
<el-input-number
|
||||
:value="activeData.max"
|
||||
:min="0"
|
||||
placeholder="最多可选"
|
||||
@input="$set(activeData, 'max', $event?$event:undefined)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.prepend!==undefined" label="前缀">
|
||||
<el-input v-model="activeData.prepend" placeholder="请输入前缀" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.append!==undefined" label="后缀">
|
||||
<el-input v-model="activeData.append" placeholder="请输入后缀" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['prefix-icon']!==undefined" label="前图标">
|
||||
<el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
|
||||
<el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('prefix-icon')">
|
||||
选择
|
||||
</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
|
||||
<el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
|
||||
<el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('suffix-icon')">
|
||||
选择
|
||||
</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag === 'el-cascader'" label="选项分隔符">
|
||||
<el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
|
||||
<el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
|
||||
<el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.min !== undefined" label="最小值">
|
||||
<el-input-number v-model="activeData.min" placeholder="最小值" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.max !== undefined" label="最大值">
|
||||
<el-input-number v-model="activeData.max" placeholder="最大值" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.step !== undefined" label="步长">
|
||||
<el-input-number v-model="activeData.step" placeholder="步数" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag === 'el-input-number'" label="精度">
|
||||
<el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag === 'el-input-number'" label="按钮位置">
|
||||
<el-radio-group v-model="activeData['controls-position']">
|
||||
<el-radio-button label="">
|
||||
默认
|
||||
</el-radio-button>
|
||||
<el-radio-button label="right">
|
||||
右侧
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.maxlength !== undefined" label="最多输入">
|
||||
<el-input v-model="activeData.maxlength" placeholder="请输入字符长度">
|
||||
<template slot="append">
|
||||
个字符
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['active-text'] !== undefined" label="开启提示">
|
||||
<el-input v-model="activeData['active-text']" placeholder="请输入开启提示" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['inactive-text'] !== undefined" label="关闭提示">
|
||||
<el-input v-model="activeData['inactive-text']" placeholder="请输入关闭提示" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['active-value'] !== undefined" label="开启值">
|
||||
<el-input
|
||||
:value="setDefaultValue(activeData['active-value'])"
|
||||
placeholder="请输入开启值"
|
||||
@input="onSwitchValueInput($event, 'active-value')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['inactive-value'] !== undefined" label="关闭值">
|
||||
<el-input
|
||||
:value="setDefaultValue(activeData['inactive-value'])"
|
||||
placeholder="请输入关闭值"
|
||||
@input="onSwitchValueInput($event, 'inactive-value')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="activeData.type !== undefined && 'el-date-picker' === activeData.tag"
|
||||
label="时间类型"
|
||||
>
|
||||
<el-select
|
||||
v-model="activeData.type"
|
||||
placeholder="请选择时间类型"
|
||||
:style="{ width: '100%' }"
|
||||
@change="dateTypeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dateOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.name !== undefined" label="文件字段名">
|
||||
<el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.accept !== undefined" label="文件类型">
|
||||
<el-select
|
||||
v-model="activeData.accept"
|
||||
placeholder="请选择文件类型"
|
||||
:style="{ width: '100%' }"
|
||||
clearable
|
||||
>
|
||||
<el-option label="图片" value="image/*" />
|
||||
<el-option label="视频" value="video/*" />
|
||||
<el-option label="音频" value="audio/*" />
|
||||
<el-option label="excel" value=".xls,.xlsx" />
|
||||
<el-option label="word" value=".doc,.docx" />
|
||||
<el-option label="pdf" value=".pdf" />
|
||||
<el-option label="txt" value=".txt" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.fileSize !== undefined" label="文件大小">
|
||||
<el-input v-model.number="activeData.fileSize" placeholder="请输入文件大小">
|
||||
<el-select slot="append" v-model="activeData.sizeUnit" :style="{ width: '66px' }">
|
||||
<el-option label="KB" value="KB" />
|
||||
<el-option label="MB" value="MB" />
|
||||
<el-option label="GB" value="GB" />
|
||||
</el-select>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.action !== undefined" label="上传地址">
|
||||
<el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
|
||||
<el-radio-group v-model="activeData['list-type']" size="small">
|
||||
<el-radio-button label="text">
|
||||
text
|
||||
</el-radio-button>
|
||||
<el-radio-button label="picture">
|
||||
picture
|
||||
</el-radio-button>
|
||||
<el-radio-button label="picture-card">
|
||||
picture-card
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="activeData.buttonText !== undefined"
|
||||
v-show="'picture-card' !== activeData['list-type']"
|
||||
label="按钮文字"
|
||||
>
|
||||
<el-input v-model="activeData.buttonText" placeholder="请输入按钮文字" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['range-separator'] !== undefined" label="分隔符">
|
||||
<el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
|
||||
<el-input
|
||||
v-model="activeData['picker-options'].selectableRange"
|
||||
placeholder="请输入时间段"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.format !== undefined" label="时间格式">
|
||||
<el-input
|
||||
:value="activeData.format"
|
||||
placeholder="请输入时间格式"
|
||||
@input="setTimeValue($event)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<template v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1">
|
||||
<el-divider>选项</el-divider>
|
||||
<draggable
|
||||
:list="activeData.options"
|
||||
:animation="340"
|
||||
group="selectItem"
|
||||
handle=".option-drag"
|
||||
>
|
||||
<div v-for="(item, index) in activeData.options" :key="index" class="select-item">
|
||||
<div class="select-line-icon option-drag">
|
||||
<i class="el-icon-s-operation" />
|
||||
</div>
|
||||
<el-input v-model="item.label" placeholder="选项名" size="small" />
|
||||
<el-input
|
||||
placeholder="选项值"
|
||||
size="small"
|
||||
:value="item.value"
|
||||
@input="setOptionValue(item, $event)"
|
||||
/>
|
||||
<div class="close-btn select-line-icon" @click="activeData.options.splice(index, 1)">
|
||||
<i class="el-icon-remove-outline" />
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
<div style="margin-left: 20px;">
|
||||
<el-button
|
||||
style="padding-bottom: 0"
|
||||
icon="el-icon-circle-plus-outline"
|
||||
type="text"
|
||||
@click="addSelectItem"
|
||||
>
|
||||
添加选项
|
||||
</el-button>
|
||||
</div>
|
||||
<el-divider />
|
||||
</template>
|
||||
|
||||
<template v-if="['el-cascader'].indexOf(activeData.tag) > -1">
|
||||
<el-divider>选项</el-divider>
|
||||
<el-form-item label="数据类型">
|
||||
<el-radio-group v-model="activeData.dataType" size="small">
|
||||
<el-radio-button label="dynamic">
|
||||
动态数据
|
||||
</el-radio-button>
|
||||
<el-radio-button label="static">
|
||||
静态数据
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<template v-if="activeData.dataType === 'dynamic'">
|
||||
<el-form-item label="标签键名">
|
||||
<el-input v-model="activeData.labelKey" placeholder="请输入标签键名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值键名">
|
||||
<el-input v-model="activeData.valueKey" placeholder="请输入值键名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="子级键名">
|
||||
<el-input v-model="activeData.childrenKey" placeholder="请输入子级键名" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<el-tree
|
||||
v-if="activeData.dataType === 'static'"
|
||||
draggable
|
||||
:data="activeData.options"
|
||||
node-key="id"
|
||||
:expand-on-click-node="false"
|
||||
:render-content="renderContent"
|
||||
/>
|
||||
<div v-if="activeData.dataType === 'static'" style="margin-left: 20px">
|
||||
<el-button
|
||||
style="padding-bottom: 0"
|
||||
icon="el-icon-circle-plus-outline"
|
||||
type="text"
|
||||
@click="addTreeItem"
|
||||
>
|
||||
添加父级
|
||||
</el-button>
|
||||
</div>
|
||||
<el-divider />
|
||||
</template>
|
||||
|
||||
<el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
|
||||
<el-radio-group v-model="activeData.optionType">
|
||||
<el-radio-button label="default">
|
||||
默认
|
||||
</el-radio-button>
|
||||
<el-radio-button label="button">
|
||||
按钮
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['active-color'] !== undefined" label="开启颜色">
|
||||
<el-color-picker v-model="activeData['active-color']" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['inactive-color'] !== undefined" label="关闭颜色">
|
||||
<el-color-picker v-model="activeData['inactive-color']" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
|
||||
<el-switch v-model="activeData['allow-half']" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['show-text'] !== undefined" label="辅助文字">
|
||||
<el-switch v-model="activeData['show-text']" @change="rateTextChange" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['show-score'] !== undefined" label="显示分数">
|
||||
<el-switch v-model="activeData['show-score']" @change="rateScoreChange" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['show-stops'] !== undefined" label="显示间断点">
|
||||
<el-switch v-model="activeData['show-stops']" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.range !== undefined" label="范围选择">
|
||||
<el-switch v-model="activeData.range" @change="rangeChange" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="activeData.border !== undefined && activeData.optionType === 'default'"
|
||||
label="是否带边框"
|
||||
>
|
||||
<el-switch v-model="activeData.border" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag === 'el-color-picker'" label="颜色格式">
|
||||
<el-select
|
||||
v-model="activeData['color-format']"
|
||||
placeholder="请选择颜色格式"
|
||||
:style="{ width: '100%' }"
|
||||
@change="colorFormatChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in colorFormatOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="activeData.size !== undefined &&
|
||||
(activeData.optionType === 'button' ||
|
||||
activeData.border ||
|
||||
activeData.tag === 'el-color-picker')"
|
||||
label="选项尺寸"
|
||||
>
|
||||
<el-radio-group v-model="activeData.size">
|
||||
<el-radio-button label="medium">
|
||||
中等
|
||||
</el-radio-button>
|
||||
<el-radio-button label="small">
|
||||
较小
|
||||
</el-radio-button>
|
||||
<el-radio-button label="mini">
|
||||
迷你
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['show-word-limit'] !== undefined" label="输入统计">
|
||||
<el-switch v-model="activeData['show-word-limit']" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag === 'el-input-number'" label="严格步数">
|
||||
<el-switch v-model="activeData['step-strictly']" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag === 'el-cascader'" label="是否多选">
|
||||
<el-switch v-model="activeData.props.props.multiple" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag === 'el-cascader'" label="展示全路径">
|
||||
<el-switch v-model="activeData['show-all-levels']" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag === 'el-cascader'" label="可否筛选">
|
||||
<el-switch v-model="activeData.filterable" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
|
||||
<el-switch v-model="activeData.clearable" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.showTip !== undefined" label="显示提示">
|
||||
<el-switch v-model="activeData.showTip" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.multiple !== undefined" label="多选文件">
|
||||
<el-switch v-model="activeData.multiple" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData['auto-upload'] !== undefined" label="自动上传">
|
||||
<el-switch v-model="activeData['auto-upload']" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
|
||||
<el-switch v-model="activeData.readonly" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
|
||||
<el-switch v-model="activeData.disabled" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag === 'el-select'" label="是否可搜索">
|
||||
<el-switch v-model="activeData.filterable" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.tag === 'el-select'" label="是否多选">
|
||||
<el-switch v-model="activeData.multiple" @change="multipleChange" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="activeData.required !== undefined" label="是否必填">
|
||||
<el-switch v-model="activeData.required" />
|
||||
</el-form-item>
|
||||
|
||||
<template v-if="activeData.layoutTree">
|
||||
<el-divider>布局结构树</el-divider>
|
||||
<el-tree
|
||||
:data="[activeData]"
|
||||
:props="layoutTreeProps"
|
||||
node-key="renderKey"
|
||||
default-expand-all
|
||||
draggable
|
||||
>
|
||||
<span slot-scope="{ node, data }">
|
||||
<span class="node-label">
|
||||
<svg-icon class="node-icon" :icon-class="data.tagIcon" />
|
||||
{{ node.label }}
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</template>
|
||||
|
||||
<template v-if="activeData.layout === 'colFormItem'">
|
||||
<el-divider>正则校验</el-divider>
|
||||
<div
|
||||
v-for="(item, index) in activeData.regList"
|
||||
:key="index"
|
||||
class="reg-item"
|
||||
>
|
||||
<span class="close-btn" @click="activeData.regList.splice(index, 1)">
|
||||
<i class="el-icon-close" />
|
||||
</span>
|
||||
<el-form-item label="表达式">
|
||||
<el-input v-model="item.pattern" placeholder="请输入正则" />
|
||||
</el-form-item>
|
||||
<el-form-item label="错误提示" style="margin-bottom:0">
|
||||
<el-input v-model="item.message" placeholder="请输入错误提示" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="margin-left: 20px">
|
||||
<el-button icon="el-icon-circle-plus-outline" type="text" @click="addReg">
|
||||
添加规则
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-form>
|
||||
<!-- 表单属性 -->
|
||||
<el-form v-show="currentTab === 'form'" size="small" label-width="90px">
|
||||
<el-form-item label="表单名">
|
||||
<el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" />
|
||||
</el-form-item>
|
||||
<el-form-item label="表单模型">
|
||||
<el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="校验模型">
|
||||
<el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="表单尺寸">
|
||||
<el-radio-group v-model="formConf.size">
|
||||
<el-radio-button label="medium">
|
||||
中等
|
||||
</el-radio-button>
|
||||
<el-radio-button label="small">
|
||||
较小
|
||||
</el-radio-button>
|
||||
<el-radio-button label="mini">
|
||||
迷你
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签对齐">
|
||||
<el-radio-group v-model="formConf.labelPosition">
|
||||
<el-radio-button label="left">
|
||||
左对齐
|
||||
</el-radio-button>
|
||||
<el-radio-button label="right">
|
||||
右对齐
|
||||
</el-radio-button>
|
||||
<el-radio-button label="top">
|
||||
顶部对齐
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签宽度">
|
||||
<el-input-number v-model="formConf.labelWidth" placeholder="标签宽度" />
|
||||
</el-form-item>
|
||||
<el-form-item label="栅格间隔">
|
||||
<el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
|
||||
</el-form-item>
|
||||
<el-form-item label="禁用表单">
|
||||
<el-switch v-model="formConf.disabled" />
|
||||
</el-form-item>
|
||||
<el-form-item label="表单按钮">
|
||||
<el-switch v-model="formConf.formBtns" />
|
||||
</el-form-item>
|
||||
<el-form-item label="显示未选中组件边框">
|
||||
<el-switch v-model="formConf.unFocusedComponentBorder" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" />
|
||||
<icons-dialog :visible.sync="iconsVisible" :current="activeData[currentIconModel]" @select="setIcon" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isArray } from 'util'
|
||||
import TreeNodeDialog from './TreeNodeDialog'
|
||||
import { isNumberStr } from '@/utils/index'
|
||||
import IconsDialog from './IconsDialog'
|
||||
import {
|
||||
inputComponents,
|
||||
selectComponents,
|
||||
layoutComponents
|
||||
} from '@/utils/generator/config'
|
||||
|
||||
const dateTimeFormat = {
|
||||
date: 'yyyy-MM-dd',
|
||||
week: 'yyyy 第 WW 周',
|
||||
month: 'yyyy-MM',
|
||||
year: 'yyyy',
|
||||
datetime: 'yyyy-MM-dd HH:mm:ss',
|
||||
daterange: 'yyyy-MM-dd',
|
||||
monthrange: 'yyyy-MM',
|
||||
datetimerange: 'yyyy-MM-dd HH:mm:ss'
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TreeNodeDialog,
|
||||
IconsDialog
|
||||
},
|
||||
props: ['showField', 'activeData', 'formConf'],
|
||||
data() {
|
||||
return {
|
||||
currentTab: 'field',
|
||||
currentNode: null,
|
||||
dialogVisible: false,
|
||||
iconsVisible: false,
|
||||
currentIconModel: null,
|
||||
dateTypeOptions: [
|
||||
{
|
||||
label: '日(date)',
|
||||
value: 'date'
|
||||
},
|
||||
{
|
||||
label: '周(week)',
|
||||
value: 'week'
|
||||
},
|
||||
{
|
||||
label: '月(month)',
|
||||
value: 'month'
|
||||
},
|
||||
{
|
||||
label: '年(year)',
|
||||
value: 'year'
|
||||
},
|
||||
{
|
||||
label: '日期时间(datetime)',
|
||||
value: 'datetime'
|
||||
}
|
||||
],
|
||||
dateRangeTypeOptions: [
|
||||
{
|
||||
label: '日期范围(daterange)',
|
||||
value: 'daterange'
|
||||
},
|
||||
{
|
||||
label: '月范围(monthrange)',
|
||||
value: 'monthrange'
|
||||
},
|
||||
{
|
||||
label: '日期时间范围(datetimerange)',
|
||||
value: 'datetimerange'
|
||||
}
|
||||
],
|
||||
colorFormatOptions: [
|
||||
{
|
||||
label: 'hex',
|
||||
value: 'hex'
|
||||
},
|
||||
{
|
||||
label: 'rgb',
|
||||
value: 'rgb'
|
||||
},
|
||||
{
|
||||
label: 'rgba',
|
||||
value: 'rgba'
|
||||
},
|
||||
{
|
||||
label: 'hsv',
|
||||
value: 'hsv'
|
||||
},
|
||||
{
|
||||
label: 'hsl',
|
||||
value: 'hsl'
|
||||
}
|
||||
],
|
||||
justifyOptions: [
|
||||
{
|
||||
label: 'start',
|
||||
value: 'start'
|
||||
},
|
||||
{
|
||||
label: 'end',
|
||||
value: 'end'
|
||||
},
|
||||
{
|
||||
label: 'center',
|
||||
value: 'center'
|
||||
},
|
||||
{
|
||||
label: 'space-around',
|
||||
value: 'space-around'
|
||||
},
|
||||
{
|
||||
label: 'space-between',
|
||||
value: 'space-between'
|
||||
}
|
||||
],
|
||||
layoutTreeProps: {
|
||||
label(data, node) {
|
||||
return data.componentName || `${data.label}: ${data.vModel}`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
documentLink() {
|
||||
return (
|
||||
this.activeData.document
|
||||
|| 'https://element.eleme.cn/#/zh-CN/component/installation'
|
||||
)
|
||||
},
|
||||
dateOptions() {
|
||||
if (
|
||||
this.activeData.type !== undefined
|
||||
&& this.activeData.tag === 'el-date-picker'
|
||||
) {
|
||||
if (this.activeData['start-placeholder'] === undefined) {
|
||||
return this.dateTypeOptions
|
||||
}
|
||||
return this.dateRangeTypeOptions
|
||||
}
|
||||
return []
|
||||
},
|
||||
tagList() {
|
||||
return [
|
||||
{
|
||||
label: '输入型组件',
|
||||
options: inputComponents
|
||||
},
|
||||
{
|
||||
label: '选择型组件',
|
||||
options: selectComponents
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addReg() {
|
||||
this.activeData.regList.push({
|
||||
pattern: '',
|
||||
message: ''
|
||||
})
|
||||
},
|
||||
addSelectItem() {
|
||||
this.activeData.options.push({
|
||||
label: '',
|
||||
value: ''
|
||||
})
|
||||
},
|
||||
addTreeItem() {
|
||||
++this.idGlobal
|
||||
this.dialogVisible = true
|
||||
this.currentNode = this.activeData.options
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
return (
|
||||
<div class="custom-tree-node">
|
||||
<span>{node.label}</span>
|
||||
<span class="node-operation">
|
||||
<i on-click={() => this.append(data)}
|
||||
class="el-icon-plus"
|
||||
title="添加"
|
||||
></i>
|
||||
<i on-click={() => this.remove(node, data)}
|
||||
class="el-icon-delete"
|
||||
title="删除"
|
||||
></i>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
append(data) {
|
||||
if (!data.children) {
|
||||
this.$set(data, 'children', [])
|
||||
}
|
||||
this.dialogVisible = true
|
||||
this.currentNode = data.children
|
||||
},
|
||||
remove(node, data) {
|
||||
const { parent } = node
|
||||
const children = parent.data.children || parent.data
|
||||
const index = children.findIndex(d => d.id === data.id)
|
||||
children.splice(index, 1)
|
||||
},
|
||||
addNode(data) {
|
||||
this.currentNode.push(data)
|
||||
},
|
||||
setOptionValue(item, val) {
|
||||
item.value = isNumberStr(val) ? +val : val
|
||||
},
|
||||
setDefaultValue(val) {
|
||||
if (Array.isArray(val)) {
|
||||
return val.join(',')
|
||||
}
|
||||
if (['string', 'number'].indexOf(val) > -1) {
|
||||
return val
|
||||
}
|
||||
if (typeof val === 'boolean') {
|
||||
return `${val}`
|
||||
}
|
||||
return val
|
||||
},
|
||||
onDefaultValueInput(str) {
|
||||
if (isArray(this.activeData.defaultValue)) {
|
||||
// 数组
|
||||
this.$set(
|
||||
this.activeData,
|
||||
'defaultValue',
|
||||
str.split(',').map(val => (isNumberStr(val) ? +val : val))
|
||||
)
|
||||
} else if (['true', 'false'].indexOf(str) > -1) {
|
||||
// 布尔
|
||||
this.$set(this.activeData, 'defaultValue', JSON.parse(str))
|
||||
} else {
|
||||
// 字符串和数字
|
||||
this.$set(
|
||||
this.activeData,
|
||||
'defaultValue',
|
||||
isNumberStr(str) ? +str : str
|
||||
)
|
||||
}
|
||||
},
|
||||
onSwitchValueInput(val, name) {
|
||||
if (['true', 'false'].indexOf(val) > -1) {
|
||||
this.$set(this.activeData, name, JSON.parse(val))
|
||||
} else {
|
||||
this.$set(this.activeData, name, isNumberStr(val) ? +val : val)
|
||||
}
|
||||
},
|
||||
setTimeValue(val, type) {
|
||||
const valueFormat = type === 'week' ? dateTimeFormat.date : val
|
||||
this.$set(this.activeData, 'defaultValue', null)
|
||||
this.$set(this.activeData, 'value-format', valueFormat)
|
||||
this.$set(this.activeData, 'format', val)
|
||||
},
|
||||
spanChange(val) {
|
||||
this.formConf.span = val
|
||||
},
|
||||
multipleChange(val) {
|
||||
this.$set(this.activeData, 'defaultValue', val ? [] : '')
|
||||
},
|
||||
dateTypeChange(val) {
|
||||
this.setTimeValue(dateTimeFormat[val], val)
|
||||
},
|
||||
rangeChange(val) {
|
||||
this.$set(
|
||||
this.activeData,
|
||||
'defaultValue',
|
||||
val ? [this.activeData.min, this.activeData.max] : this.activeData.min
|
||||
)
|
||||
},
|
||||
rateTextChange(val) {
|
||||
if (val) this.activeData['show-score'] = false
|
||||
},
|
||||
rateScoreChange(val) {
|
||||
if (val) this.activeData['show-text'] = false
|
||||
},
|
||||
colorFormatChange(val) {
|
||||
this.activeData.defaultValue = null
|
||||
this.activeData['show-alpha'] = val.indexOf('a') > -1
|
||||
this.activeData.renderKey = +new Date() // 更新renderKey,重新渲染该组件
|
||||
},
|
||||
openIconsDialog(model) {
|
||||
this.iconsVisible = true
|
||||
this.currentIconModel = model
|
||||
},
|
||||
setIcon(val) {
|
||||
this.activeData[this.currentIconModel] = val
|
||||
},
|
||||
tagChange(tagIcon) {
|
||||
let target = inputComponents.find(item => item.tagIcon === tagIcon)
|
||||
if (!target) target = selectComponents.find(item => item.tagIcon === tagIcon)
|
||||
this.$emit('tag-change', target)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.right-board {
|
||||
width: 350px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding-top: 3px;
|
||||
.field-box {
|
||||
position: relative;
|
||||
height: calc(100vh - 42px);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.select-item {
|
||||
display: flex;
|
||||
border: 1px dashed #fff;
|
||||
box-sizing: border-box;
|
||||
& .close-btn {
|
||||
cursor: pointer;
|
||||
color: #f56c6c;
|
||||
}
|
||||
& .el-input + .el-input {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
.select-item + .select-item {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.select-item.sortable-chosen {
|
||||
border: 1px dashed #409eff;
|
||||
}
|
||||
.select-line-icon {
|
||||
line-height: 32px;
|
||||
font-size: 22px;
|
||||
padding: 0 4px;
|
||||
color: #777;
|
||||
}
|
||||
.option-drag {
|
||||
cursor: move;
|
||||
}
|
||||
.time-range {
|
||||
.el-date-editor {
|
||||
width: 227px;
|
||||
}
|
||||
::v-deep .el-icon-time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.document-link {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
background: #409eff;
|
||||
z-index: 1;
|
||||
border-radius: 0 0 6px 0;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.node-label{
|
||||
font-size: 14px;
|
||||
}
|
||||
.node-icon{
|
||||
color: #bebfc3;
|
||||
}
|
||||
</style>
|
||||
149
ebts-ui/src/views/tool/build/TreeNodeDialog.vue
Normal file
149
ebts-ui/src/views/tool/build/TreeNodeDialog.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-bind="$attrs"
|
||||
:close-on-click-modal="false"
|
||||
:modal-append-to-body="false"
|
||||
v-on="$listeners"
|
||||
@open="onOpen"
|
||||
@close="onClose"
|
||||
>
|
||||
<el-row :gutter="0">
|
||||
<el-form
|
||||
ref="elForm"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
size="small"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="选项名"
|
||||
prop="label"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.label"
|
||||
placeholder="请输入选项名"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item
|
||||
label="选项值"
|
||||
prop="value"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.value"
|
||||
placeholder="请输入选项值"
|
||||
clearable
|
||||
>
|
||||
<el-select
|
||||
slot="append"
|
||||
v-model="dataType"
|
||||
:style="{width: '100px'}"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dataTypeOptions"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</el-select>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div slot="footer">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handelConfirm"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
<el-button @click="close">
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { isNumberStr } from '@/utils/index'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
inheritAttrs: false,
|
||||
props: [],
|
||||
data() {
|
||||
return {
|
||||
id: 100,
|
||||
formData: {
|
||||
label: undefined,
|
||||
value: undefined
|
||||
},
|
||||
rules: {
|
||||
label: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入选项名',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
value: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入选项值',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
dataType: 'string',
|
||||
dataTypeOptions: [
|
||||
{
|
||||
label: '字符串',
|
||||
value: 'string'
|
||||
},
|
||||
{
|
||||
label: '数字',
|
||||
value: 'number'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
// eslint-disable-next-line func-names
|
||||
'formData.value': function (val) {
|
||||
this.dataType = isNumberStr(val) ? 'number' : 'string'
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onOpen() {
|
||||
this.formData = {
|
||||
label: undefined,
|
||||
value: undefined
|
||||
}
|
||||
},
|
||||
onClose() {},
|
||||
close() {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
handelConfirm() {
|
||||
this.$refs.elForm.validate(valid => {
|
||||
if (!valid) return
|
||||
if (this.dataType === 'number') {
|
||||
this.formData.value = parseFloat(this.formData.value)
|
||||
}
|
||||
this.formData.id = this.id++
|
||||
this.$emit('commit', this.formData)
|
||||
this.close()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
789
ebts-ui/src/views/tool/build/index.vue
Normal file
789
ebts-ui/src/views/tool/build/index.vue
Normal file
@@ -0,0 +1,789 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="left-board">
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo">
|
||||
<img :src="logo" alt="logo"> Form Generator
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar class="left-scrollbar">
|
||||
<div class="components-list">
|
||||
<div class="components-title">
|
||||
<svg-icon icon-class="component" />输入型组件
|
||||
</div>
|
||||
<draggable
|
||||
class="components-draggable"
|
||||
:list="inputComponents"
|
||||
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
|
||||
:clone="cloneComponent"
|
||||
draggable=".components-item"
|
||||
:sort="false"
|
||||
@end="onEnd"
|
||||
>
|
||||
<div
|
||||
v-for="(element, index) in inputComponents" :key="index" class="components-item"
|
||||
@click="addComponent(element)"
|
||||
>
|
||||
<div class="components-body">
|
||||
<svg-icon :icon-class="element.tagIcon" />
|
||||
{{ element.label }}
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
<div class="components-title">
|
||||
<svg-icon icon-class="component" />选择型组件
|
||||
</div>
|
||||
<draggable
|
||||
class="components-draggable"
|
||||
:list="selectComponents"
|
||||
:group="{ name: 'componentsGroup', pull: 'clone', put: false }"
|
||||
:clone="cloneComponent"
|
||||
draggable=".components-item"
|
||||
:sort="false"
|
||||
@end="onEnd"
|
||||
>
|
||||
<div
|
||||
v-for="(element, index) in selectComponents"
|
||||
:key="index"
|
||||
class="components-item"
|
||||
@click="addComponent(element)"
|
||||
>
|
||||
<div class="components-body">
|
||||
<svg-icon :icon-class="element.tagIcon" />
|
||||
{{ element.label }}
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
<div class="components-title">
|
||||
<svg-icon icon-class="component" /> 布局型组件
|
||||
</div>
|
||||
<draggable
|
||||
class="components-draggable" :list="layoutComponents"
|
||||
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent"
|
||||
draggable=".components-item" :sort="false" @end="onEnd"
|
||||
>
|
||||
<div
|
||||
v-for="(element, index) in layoutComponents" :key="index" class="components-item"
|
||||
@click="addComponent(element)"
|
||||
>
|
||||
<div class="components-body">
|
||||
<svg-icon :icon-class="element.tagIcon" />
|
||||
{{ element.label }}
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<div class="center-board">
|
||||
<div class="action-bar">
|
||||
<el-button icon="el-icon-download" type="text" @click="download">
|
||||
导出vue文件
|
||||
</el-button>
|
||||
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
|
||||
复制代码
|
||||
</el-button>
|
||||
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
|
||||
清空
|
||||
</el-button>
|
||||
</div>
|
||||
<el-scrollbar class="center-scrollbar">
|
||||
<el-row class="center-board-row" :gutter="formConf.gutter">
|
||||
<el-form
|
||||
:size="formConf.size"
|
||||
:label-position="formConf.labelPosition"
|
||||
:disabled="formConf.disabled"
|
||||
:label-width="formConf.labelWidth + 'px'"
|
||||
>
|
||||
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
|
||||
<draggable-item
|
||||
v-for="(element, index) in drawingList"
|
||||
:key="element.renderKey"
|
||||
:drawing-list="drawingList"
|
||||
:element="element"
|
||||
:index="index"
|
||||
:active-id="activeId"
|
||||
:form-conf="formConf"
|
||||
@activeItem="activeFormItem"
|
||||
@copyItem="drawingItemCopy"
|
||||
@deleteItem="drawingItemDelete"
|
||||
/>
|
||||
</draggable>
|
||||
<div v-show="!drawingList.length" class="empty-info">
|
||||
从左侧拖入或点选组件进行表单设计
|
||||
</div>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<right-panel
|
||||
:active-data="activeData"
|
||||
:form-conf="formConf"
|
||||
:show-field="!!drawingList.length"
|
||||
@tag-change="tagChange"
|
||||
/>
|
||||
|
||||
<code-type-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
title="选择生成类型"
|
||||
:show-file-name="showFileName"
|
||||
@confirm="generate"
|
||||
/>
|
||||
<input id="copyNode" type="hidden">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
import { saveAs } from 'file-saver'
|
||||
import beautifier from 'js-beautify'
|
||||
import ClipboardJS from 'clipboard'
|
||||
import render from '@/utils/generator/render'
|
||||
import RightPanel from './RightPanel'
|
||||
import {
|
||||
inputComponents,
|
||||
selectComponents,
|
||||
layoutComponents,
|
||||
formConf
|
||||
} from '@/utils/generator/config'
|
||||
import {
|
||||
exportDefault, beautifierConf, isNumberStr, titleCase
|
||||
} from '@/utils/index'
|
||||
import {
|
||||
makeUpHtml, vueTemplate, vueScript, cssStyle
|
||||
} from '@/utils/generator/html'
|
||||
import { makeUpJs } from '@/utils/generator/js'
|
||||
import { makeUpCss } from '@/utils/generator/css'
|
||||
import drawingDefalut from '@/utils/generator/drawingDefalut'
|
||||
import logo from '@/assets/logo/logo.png'
|
||||
import CodeTypeDialog from './CodeTypeDialog'
|
||||
import DraggableItem from './DraggableItem'
|
||||
|
||||
const emptyActiveData = { style: {}, autosize: {} }
|
||||
let oldActiveId
|
||||
let tempActiveData
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
render,
|
||||
RightPanel,
|
||||
CodeTypeDialog,
|
||||
DraggableItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logo,
|
||||
idGlobal: 100,
|
||||
formConf,
|
||||
inputComponents,
|
||||
selectComponents,
|
||||
layoutComponents,
|
||||
labelWidth: 100,
|
||||
drawingList: drawingDefalut,
|
||||
drawingData: {},
|
||||
activeId: drawingDefalut[0].formId,
|
||||
drawerVisible: false,
|
||||
formData: {},
|
||||
dialogVisible: false,
|
||||
generateConf: null,
|
||||
showFileName: false,
|
||||
activeData: drawingDefalut[0]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
watch: {
|
||||
// eslint-disable-next-line func-names
|
||||
'activeData.label': function (val, oldVal) {
|
||||
if (
|
||||
this.activeData.placeholder === undefined
|
||||
|| !this.activeData.tag
|
||||
|| oldActiveId !== this.activeId
|
||||
) {
|
||||
return
|
||||
}
|
||||
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val
|
||||
},
|
||||
activeId: {
|
||||
handler(val) {
|
||||
oldActiveId = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const clipboard = new ClipboardJS('#copyNode', {
|
||||
text: trigger => {
|
||||
const codeStr = this.generateCode()
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: '代码已复制到剪切板，可粘贴。',
|
||||
type: 'success'
|
||||
})
|
||||
return codeStr
|
||||
}
|
||||
})
|
||||
clipboard.on('error', e => {
|
||||
this.$message.error('代码复制失败')
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
activeFormItem(element) {
|
||||
this.activeData = element
|
||||
this.activeId = element.formId
|
||||
},
|
||||
onEnd(obj, a) {
|
||||
if (obj.from !== obj.to) {
|
||||
this.activeData = tempActiveData
|
||||
this.activeId = this.idGlobal
|
||||
}
|
||||
},
|
||||
addComponent(item) {
|
||||
const clone = this.cloneComponent(item)
|
||||
this.drawingList.push(clone)
|
||||
this.activeFormItem(clone)
|
||||
},
|
||||
cloneComponent(origin) {
|
||||
const clone = JSON.parse(JSON.stringify(origin))
|
||||
clone.formId = ++this.idGlobal
|
||||
clone.span = formConf.span
|
||||
clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
|
||||
if (!clone.layout) clone.layout = 'colFormItem'
|
||||
if (clone.layout === 'colFormItem') {
|
||||
clone.vModel = `field${this.idGlobal}`
|
||||
clone.placeholder !== undefined && (clone.placeholder += clone.label)
|
||||
tempActiveData = clone
|
||||
} else if (clone.layout === 'rowFormItem') {
|
||||
delete clone.label
|
||||
clone.componentName = `row${this.idGlobal}`
|
||||
clone.gutter = this.formConf.gutter
|
||||
tempActiveData = clone
|
||||
}
|
||||
return tempActiveData
|
||||
},
|
||||
AssembleFormData() {
|
||||
this.formData = {
|
||||
fields: JSON.parse(JSON.stringify(this.drawingList)),
|
||||
...this.formConf
|
||||
}
|
||||
},
|
||||
generate(data) {
|
||||
const func = this[`exec${titleCase(this.operationType)}`]
|
||||
this.generateConf = data
|
||||
func && func(data)
|
||||
},
|
||||
execRun(data) {
|
||||
this.AssembleFormData()
|
||||
this.drawerVisible = true
|
||||
},
|
||||
execDownload(data) {
|
||||
const codeStr = this.generateCode()
|
||||
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
|
||||
saveAs(blob, data.fileName)
|
||||
},
|
||||
execCopy(data) {
|
||||
document.getElementById('copyNode').click()
|
||||
},
|
||||
empty() {
|
||||
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(
|
||||
() => {
|
||||
this.drawingList = []
|
||||
}
|
||||
)
|
||||
},
|
||||
drawingItemCopy(item, parent) {
|
||||
let clone = JSON.parse(JSON.stringify(item))
|
||||
clone = this.createIdAndKey(clone)
|
||||
parent.push(clone)
|
||||
this.activeFormItem(clone)
|
||||
},
|
||||
createIdAndKey(item) {
|
||||
item.formId = ++this.idGlobal
|
||||
item.renderKey = +new Date()
|
||||
if (item.layout === 'colFormItem') {
|
||||
item.vModel = `field${this.idGlobal}`
|
||||
} else if (item.layout === 'rowFormItem') {
|
||||
item.componentName = `row${this.idGlobal}`
|
||||
}
|
||||
if (Array.isArray(item.children)) {
|
||||
item.children = item.children.map(childItem => this.createIdAndKey(childItem))
|
||||
}
|
||||
return item
|
||||
},
|
||||
drawingItemDelete(index, parent) {
|
||||
parent.splice(index, 1)
|
||||
this.$nextTick(() => {
|
||||
const len = this.drawingList.length
|
||||
if (len) {
|
||||
this.activeFormItem(this.drawingList[len - 1])
|
||||
}
|
||||
})
|
||||
},
|
||||
generateCode() {
|
||||
const { type } = this.generateConf
|
||||
this.AssembleFormData()
|
||||
const script = vueScript(makeUpJs(this.formData, type))
|
||||
const html = vueTemplate(makeUpHtml(this.formData, type))
|
||||
const css = cssStyle(makeUpCss(this.formData))
|
||||
return beautifier.html(html + script + css, beautifierConf.html)
|
||||
},
|
||||
download() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = true
|
||||
this.operationType = 'download'
|
||||
},
|
||||
run() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = false
|
||||
this.operationType = 'run'
|
||||
},
|
||||
copy() {
|
||||
this.dialogVisible = true
|
||||
this.showFileName = false
|
||||
this.operationType = 'copy'
|
||||
},
|
||||
tagChange(newTag) {
|
||||
newTag = this.cloneComponent(newTag)
|
||||
newTag.vModel = this.activeData.vModel
|
||||
newTag.formId = this.activeId
|
||||
newTag.span = this.activeData.span
|
||||
delete this.activeData.tag
|
||||
delete this.activeData.tagIcon
|
||||
delete this.activeData.document
|
||||
Object.keys(newTag).forEach(key => {
|
||||
if (this.activeData[key] !== undefined
|
||||
&& typeof this.activeData[key] === typeof newTag[key]) {
|
||||
newTag[key] = this.activeData[key]
|
||||
}
|
||||
})
|
||||
this.activeData = newTag
|
||||
this.updateDrawingList(newTag, this.drawingList)
|
||||
},
|
||||
updateDrawingList(newTag, list) {
|
||||
const index = list.findIndex(item => item.formId === this.activeId)
|
||||
if (index > -1) {
|
||||
list.splice(index, 1, newTag)
|
||||
} else {
|
||||
list.forEach(item => {
|
||||
if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
body, html{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
|
||||
}
|
||||
|
||||
input, textarea{
|
||||
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
|
||||
}
|
||||
|
||||
.editor-tabs{
|
||||
background: #121315;
|
||||
.el-tabs__header{
|
||||
margin: 0;
|
||||
border-bottom-color: #121315;
|
||||
.el-tabs__nav{
|
||||
border-color: #121315;
|
||||
}
|
||||
}
|
||||
.el-tabs__item{
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #888a8e;
|
||||
border-left: 1px solid #121315 !important;
|
||||
background: #363636;
|
||||
margin-right: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
.el-tabs__item.is-active{
|
||||
background: #1e1e1e;
|
||||
border-bottom-color: #1e1e1e!important;
|
||||
color: #fff;
|
||||
}
|
||||
.el-icon-edit{
|
||||
color: #f1fa8c;
|
||||
}
|
||||
.el-icon-document{
|
||||
color: #a95812;
|
||||
}
|
||||
}
|
||||
|
||||
// home
|
||||
.right-scrollbar {
|
||||
.el-scrollbar__view {
|
||||
padding: 12px 18px 15px 15px;
|
||||
}
|
||||
}
|
||||
.left-scrollbar .el-scrollbar__wrap {
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.center-tabs{
|
||||
.el-tabs__header{
|
||||
margin-bottom: 0!important;
|
||||
}
|
||||
.el-tabs__item{
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
.el-tabs__nav{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.reg-item{
|
||||
padding: 12px 6px;
|
||||
background: #f8f8f8;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
.close-btn{
|
||||
position: absolute;
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
&:hover{
|
||||
background: rgba(210, 23, 23, 0.5)
|
||||
}
|
||||
}
|
||||
& + .reg-item{
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
.action-bar{
|
||||
& .el-button+.el-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
& i {
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node{
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
.node-operation{
|
||||
float: right;
|
||||
}
|
||||
i[class*="el-icon"] + i[class*="el-icon"]{
|
||||
margin-left: 6px;
|
||||
}
|
||||
.el-icon-plus{
|
||||
color: #409EFF;
|
||||
}
|
||||
.el-icon-delete{
|
||||
color: #157a0c;
|
||||
}
|
||||
}
|
||||
|
||||
.left-scrollbar .el-scrollbar__view{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.el-rate{
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.el-upload__tip{
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
$selectedColor: #f6f7ff;
|
||||
$lighterBlue: #409EFF;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.components-list {
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
.components-item {
|
||||
display: inline-block;
|
||||
width: 48%;
|
||||
margin: 1%;
|
||||
transition: transform 0ms !important;
|
||||
}
|
||||
}
|
||||
.components-draggable{
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.components-title{
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
margin: 6px 2px;
|
||||
.svg-icon{
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.components-body {
|
||||
padding: 8px 10px;
|
||||
background: $selectedColor;
|
||||
font-size: 12px;
|
||||
cursor: move;
|
||||
border: 1px dashed $selectedColor;
|
||||
border-radius: 3px;
|
||||
.svg-icon{
|
||||
color: #777;
|
||||
font-size: 15px;
|
||||
}
|
||||
&:hover {
|
||||
border: 1px dashed #787be8;
|
||||
color: #787be8;
|
||||
.svg-icon {
|
||||
color: #787be8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-board {
|
||||
width: 260px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
.left-scrollbar{
|
||||
height: calc(100vh - 42px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.center-scrollbar {
|
||||
height: calc(100vh - 42px);
|
||||
overflow: hidden;
|
||||
border-left: 1px solid #f1e8e8;
|
||||
border-right: 1px solid #f1e8e8;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.center-board {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
margin: 0 350px 0 260px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.empty-info{
|
||||
position: absolute;
|
||||
top: 46%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #ccb1ea;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
.action-bar{
|
||||
position: relative;
|
||||
height: 42px;
|
||||
text-align: right;
|
||||
padding: 0 15px;
|
||||
box-sizing: border-box;;
|
||||
border: 1px solid #f1e8e8;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
.delete-btn{
|
||||
color: #F56C6C;
|
||||
}
|
||||
}
|
||||
.logo-wrapper{
|
||||
position: relative;
|
||||
height: 42px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f1e8e8;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.logo{
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 6px;
|
||||
line-height: 30px;
|
||||
color: #00afff;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
white-space: nowrap;
|
||||
> img{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.github{
|
||||
display: inline-block;
|
||||
vertical-align: sub;
|
||||
margin-left: 15px;
|
||||
> img{
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-board-row {
|
||||
padding: 12px 12px 15px 12px;
|
||||
box-sizing: border-box;
|
||||
& > .el-form {
|
||||
// 69 = 12+15+42
|
||||
height: calc(100vh - 69px);
|
||||
}
|
||||
}
|
||||
.drawing-board {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.components-body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
.sortable-ghost {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
&::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 3px;
|
||||
background: rgb(89, 89, 223);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.components-item.sortable-ghost {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: $selectedColor;
|
||||
}
|
||||
.active-from-item {
|
||||
& > .el-form-item{
|
||||
background: $selectedColor;
|
||||
border-radius: 6px;
|
||||
}
|
||||
& > .drawing-item-copy, & > .drawing-item-delete{
|
||||
display: initial;
|
||||
}
|
||||
& > .component-name{
|
||||
color: $lighterBlue;
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.drawing-item{
|
||||
position: relative;
|
||||
cursor: move;
|
||||
&.unfocus-bordered:not(.activeFromItem) > div:first-child {
|
||||
border: 1px dashed #ccc;
|
||||
}
|
||||
.el-form-item{
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
.drawing-row-item{
|
||||
position: relative;
|
||||
cursor: move;
|
||||
box-sizing: border-box;
|
||||
border: 1px dashed #ccc;
|
||||
border-radius: 3px;
|
||||
padding: 0 2px;
|
||||
margin-bottom: 15px;
|
||||
.drawing-row-item {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.el-col{
|
||||
margin-top: 22px;
|
||||
}
|
||||
.el-form-item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.drag-wrapper{
|
||||
min-height: 80px;
|
||||
}
|
||||
&.active-from-item{
|
||||
border: 1px dashed $lighterBlue;
|
||||
}
|
||||
.component-name{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
.drawing-item, .drawing-row-item{
|
||||
&:hover {
|
||||
& > .el-form-item{
|
||||
background: $selectedColor;
|
||||
border-radius: 6px;
|
||||
}
|
||||
& > .drawing-item-copy, & > .drawing-item-delete{
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
& > .drawing-item-copy, & > .drawing-item-delete{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
& > .drawing-item-copy{
|
||||
right: 56px;
|
||||
border-color: $lighterBlue;
|
||||
color: $lighterBlue;
|
||||
background: #fff;
|
||||
&:hover{
|
||||
background: $lighterBlue;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
& > .drawing-item-delete{
|
||||
right: 24px;
|
||||
border-color: #F56C6C;
|
||||
color: #F56C6C;
|
||||
background: #fff;
|
||||
&:hover{
|
||||
background: #F56C6C;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
61
ebts-ui/src/views/tool/gen/basicInfoForm.vue
Normal file
61
ebts-ui/src/views/tool/gen/basicInfoForm.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<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>
|
||||
export default {
|
||||
name: "BasicInfoForm",
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rules: {
|
||||
tableName: [
|
||||
{required: true, message: "请输入表名称", trigger: "blur"}
|
||||
],
|
||||
tableComment: [
|
||||
{required: true, message: "请输入表描述", trigger: "blur"}
|
||||
],
|
||||
className: [
|
||||
{required: true, message: "请输入实体类名称", trigger: "blur"}
|
||||
],
|
||||
functionAuthor: [
|
||||
{required: true, message: "请输入作者", trigger: "blur"}
|
||||
]
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
291
ebts-ui/src/views/tool/gen/editTable.vue
Normal file
291
ebts-ui/src/views/tool/gen/editTable.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="基本信息" name="basic">
|
||||
<basic-info-form ref="basicInfo" :info="info" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="字段信息" name="cloum">
|
||||
<el-table ref="dragTable" :data="cloumns" 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 slot-scope="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 slot-scope="scope">
|
||||
<el-select v-model="scope.row.javaType">
|
||||
<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-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="java属性" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.javaField"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="插入" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isInsert"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="编辑" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isEdit"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列表" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询方式" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.queryType">
|
||||
<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="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isRequired"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否正则" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.isRegular">
|
||||
<el-option v-for="item in regularOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id" />
|
||||
<span></span>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="显示类型" min-width="12%">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.htmlType">
|
||||
<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 slot-scope="scope">
|
||||
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="dict in dictOptions"
|
||||
:key="dict.dictType"
|
||||
:label="dict.dictName"
|
||||
:value="dict.dictType">
|
||||
<span style="float: left">{{ dict.dictName }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="生成信息" name="genInfo">
|
||||
<gen-info-form ref="genInfo" :info="info" :tables="tables" :menus="menus" :dict-options="dictOptions"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<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-card>
|
||||
</template>
|
||||
<script>
|
||||
import { getGenTable, updateGenTable } from "@/api/tool/gen";
|
||||
import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
|
||||
import { listMenu as getMenuTreeselect } from "@/api/system/menu";
|
||||
import basicInfoForm from "./basicInfoForm";
|
||||
import genInfoForm from "./genInfoForm";
|
||||
import Sortable from 'sortablejs'
|
||||
import {listRegular} from "../../../api/tool/regular";
|
||||
import {Message} from "element-ui";
|
||||
|
||||
export default {
|
||||
name: "GenEdit",
|
||||
components: {
|
||||
basicInfoForm,
|
||||
genInfoForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 选中选项卡的 name
|
||||
activeName: "cloum",
|
||||
// 表格的高度
|
||||
tableHeight: document.documentElement.scrollHeight - 245 + "px",
|
||||
// 表信息
|
||||
tables: [],
|
||||
// 表列信息
|
||||
cloumns: [],
|
||||
// 字典信息
|
||||
dictOptions: [],
|
||||
// 菜单信息
|
||||
menus: [],
|
||||
regularOptions:[],
|
||||
// 表详细信息
|
||||
info: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getRegularList()
|
||||
const tableId = this.$route.params && this.$route.params.tableId;
|
||||
if (tableId) {
|
||||
// 获取表详细信息
|
||||
getGenTable(tableId).then(res => {
|
||||
this.cloumns = res.data.rows;
|
||||
this.info = res.data.info;
|
||||
this.tables = res.data.tables;
|
||||
});
|
||||
/** 查询字典下拉列表 */
|
||||
getDictOptionselect().then(response => {
|
||||
this.dictOptions = response.data;
|
||||
});
|
||||
/** 查询菜单下拉列表 */
|
||||
getMenuTreeselect().then(response => {
|
||||
this.menus = this.handleTree(response.data, "menuId");
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 获取正则校验列表*/
|
||||
getRegularList() {
|
||||
let params = {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
enable: 1,
|
||||
}
|
||||
listRegular(params).then(response => {
|
||||
this.regularOptions = response.rows
|
||||
});
|
||||
},
|
||||
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
const basicForm = this.$refs.basicInfo.$refs.basicInfoForm;
|
||||
const genForm = this.$refs.genInfo.$refs.genInfoForm;
|
||||
const relTables = this.$refs.genInfo.relTables;
|
||||
for (let i=0;i<relTables.length;i++){
|
||||
if (relTables[i].tableName===null){
|
||||
Message({
|
||||
message: "关联父表不能为空!",
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (relTables[i].tableColumn===null){
|
||||
Message({
|
||||
message: "关联父表字段不能为空!",
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (relTables[i].relName===null){
|
||||
Message({
|
||||
message: "关联子表不能为空!",
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (relTables[i].relColumn===null){
|
||||
Message({
|
||||
message: "关联子表字段不能为空!",
|
||||
type: 'error'
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
Promise.all([basicForm, genForm].map(this.getFormPromise)).then(res => {
|
||||
const validateResult = res.every(item => !!item);
|
||||
if (validateResult) {
|
||||
const genTable = Object.assign({}, basicForm.model, genForm.model);
|
||||
genTable.columns = this.cloumns;
|
||||
genTable.relTables = relTables
|
||||
genTable.params = {
|
||||
treeCode: genTable.treeCode,
|
||||
treeName: genTable.treeName,
|
||||
treeParentCode: genTable.treeParentCode,
|
||||
parentMenuId: genTable.parentMenuId
|
||||
};
|
||||
updateGenTable(genTable).then(res => {
|
||||
this.msgSuccess(res.msg);
|
||||
if (res.code === 200) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.msgError("表单校验未通过，请重新检查提交内容");
|
||||
}
|
||||
});
|
||||
},
|
||||
getFormPromise(form) {
|
||||
return new Promise(resolve => {
|
||||
form.validate(res => {
|
||||
resolve(res);
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 关闭按钮 */
|
||||
close() {
|
||||
this.$store.dispatch("tagsView/delView", this.$route);
|
||||
this.$router.push({ path: "/tool/gen", query: { t: Date.now()}})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
|
||||
const sortable = Sortable.create(el, {
|
||||
handle: ".allowDrag",
|
||||
onEnd: evt => {
|
||||
const targetRow = this.cloumns.splice(evt.oldIndex, 1)[0];
|
||||
this.cloumns.splice(evt.newIndex, 0, targetRow);
|
||||
for (let index in this.cloumns) {
|
||||
this.cloumns[index].sort = parseInt(index) + 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
659
ebts-ui/src/views/tool/gen/genInfoForm.vue
Normal file
659
ebts-ui/src/views/tool/gen/genInfoForm.vue
Normal file
@@ -0,0 +1,659 @@
|
||||
<template>
|
||||
<el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="tplCategory">
|
||||
<span slot="label">生成模板</span>
|
||||
<el-select v-model="info.tplCategory" @change="tplSelectChange">
|
||||
<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="12">
|
||||
<el-form-item prop="packageName">
|
||||
<span slot="label">
|
||||
生成包路径
|
||||
<el-tooltip content="生成在哪个java包下，例如 com.ebts.system" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="info.packageName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="moduleName">
|
||||
<span slot="label">
|
||||
生成模块名
|
||||
<el-tooltip content="可理解为子系统名，例如 system" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="info.moduleName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="businessName">
|
||||
<span slot="label">
|
||||
生成业务名
|
||||
<el-tooltip content="可理解为功能英文名，例如 user" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="info.businessName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="functionName">
|
||||
<span slot="label">
|
||||
生成功能名
|
||||
<el-tooltip content="用作类描述，例如 用户" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="info.functionName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
上级菜单
|
||||
<el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<treeselect
|
||||
:append-to-body="true"
|
||||
v-model="info.parentMenuId"
|
||||
:options="menus"
|
||||
:normalizer="normalizer"
|
||||
:show-count="true"
|
||||
placeholder="请选择系统菜单"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="genType">
|
||||
<span slot="label">
|
||||
生成代码方式
|
||||
<el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
|
||||
<el-radio v-model="info.genType" label="1">自定义路径</el-radio>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" v-if="info.genType == '1'">
|
||||
<el-form-item prop="genPath">
|
||||
<span slot="label">
|
||||
自定义路径
|
||||
<el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-input v-model="info.genPath">
|
||||
<el-dropdown slot="append">
|
||||
<el-button type="primary">
|
||||
最近路径快速选择
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--树表配置-->
|
||||
<el-row v-show="info.tplCategory == 'tree'">
|
||||
<h4 class="form-header">其他信息</h4>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
树编码字段
|
||||
<el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="info.treeCode" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(column, index) in info.columns"
|
||||
:key="index"
|
||||
:label="column.columnName + '：' + column.columnComment"
|
||||
:value="column.columnName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
树父编码字段
|
||||
<el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="info.treeParentCode" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(column, index) in info.columns"
|
||||
:key="index"
|
||||
:label="column.columnName + '：' + column.columnComment"
|
||||
:value="column.columnName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
树名称字段
|
||||
<el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="info.treeName" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(column, index) in info.columns"
|
||||
:key="index"
|
||||
:label="column.columnName + '：' + column.columnComment"
|
||||
:value="column.columnName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--主子表配置-->
|
||||
<el-row v-show="info.tplCategory == 'sub'">
|
||||
<h4 class="form-header">关联信息</h4>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
关联子表的表名
|
||||
<el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
|
||||
<el-option
|
||||
v-for="(table, index) in tables"
|
||||
:key="index"
|
||||
:label="table.tableName + '：' + table.tableComment"
|
||||
:value="table.tableName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
子表关联的外键名
|
||||
<el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="info.subTableFkName" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="(column, index) in subColumns"
|
||||
:key="index"
|
||||
:label="column.columnName + '：' + column.columnComment"
|
||||
:value="column.columnName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--多表关联配置-->
|
||||
<div v-if="info.tplCategory == 'rel'">
|
||||
<el-row class="form-header">
|
||||
<el-col :span="4">
|
||||
<div style="font-size: 15px;color:#6379bb;font-weight: bold;">多表关联关系</div>
|
||||
</el-col>
|
||||
<el-col :offset="18" :span="2">
|
||||
<el-button
|
||||
clearable
|
||||
@click="addRelTable"
|
||||
>添加表
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-for="(table,index) in relTables">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="95px">
|
||||
<span slot="label">
|
||||
关联父表
|
||||
<el-tooltip content="父表名称， 如：sys_table" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="table.tableName" @change="tableChange(table.tableName,index)"
|
||||
placeholder="请选择关联主表">
|
||||
<el-option
|
||||
v-for="(item , index) in tableList"
|
||||
:key="index"
|
||||
:label="item.tableName"
|
||||
:value="item.tableName"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="80px">
|
||||
<span slot="label">
|
||||
父表id
|
||||
<el-tooltip content="父表id， 如：table_id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="table.tableColumn" placeholder="请选择字段">
|
||||
<el-option
|
||||
v-for="(column , index) in table.tableColumns"
|
||||
:key="index"
|
||||
:label="column.column_name+':'+column.column_comment"
|
||||
:value="column.column_name"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="110px">
|
||||
<span slot="label">
|
||||
关联表表名
|
||||
<el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="table.relName" @change="relNameChang(index,table.relName)" placeholder="请选择表名">
|
||||
<el-option
|
||||
v-for="(table , index) in tableInfo"
|
||||
:key="index"
|
||||
:label="table.table_name + ':'+table.table_comment"
|
||||
:value="table.table_name"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="110px">
|
||||
<span slot="label">
|
||||
关联表字段
|
||||
<el-tooltip content="关联子表的关联字段， 如：user_id" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="table.relColumn" placeholder="请选择表名">
|
||||
<el-option
|
||||
v-for="(cloumn , index) in table.relColumns"
|
||||
:key="index"
|
||||
:label="cloumn.columnName + ':'+cloumn.columnComment"
|
||||
:value="cloumn.columnName"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="125px">
|
||||
<span slot="label">
|
||||
关联查询方式
|
||||
<el-tooltip content="关联子表的查询方式， 如：inner join" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-select v-model="table.queryType" placeholder="请选择查询方式">
|
||||
<el-option label="inner join" value="inner"/>
|
||||
<el-option label="left join" value="left"/>
|
||||
<el-option label="right join" value="right"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-form-item label-width="20px">
|
||||
<div style="margin-right: 20px">
|
||||
<el-select v-model="table.sort" placeholder="请选择关联查询级别">
|
||||
<el-option label="一级关联" :value="1"/>
|
||||
<el-option label="二级关联" :value="2"/>
|
||||
<el-option label="三级关联" :value="3"/>
|
||||
<el-option label="四级关联" :value="4"/>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
<el-button @click="removeRelTable(index)">删除</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table :ref="'relColumns'+index" :data="table.relColumns" 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 slot-scope="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 slot-scope="scope">
|
||||
<el-select v-model="scope.row.javaType">
|
||||
<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-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="java属性" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.javaField"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列表" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isList"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" v-model="scope.row.isQuery"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="查询方式" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.queryType">
|
||||
<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 slot-scope="scope">
|
||||
<el-select v-model="scope.row.htmlType">
|
||||
<el-option label="文本框" value="input"/>
|
||||
<el-option label="下拉框" value="select"/>
|
||||
<el-option label="单选框" value="radio"/>
|
||||
<el-option label="复选框" value="checkbox"/>
|
||||
<el-option label="日期控件" value="datetime"/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="字典类型" min-width="12%">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
|
||||
<el-option
|
||||
v-for="dict in dictOptions"
|
||||
:key="dict.dictType"
|
||||
:label="dict.dictName"
|
||||
:value="dict.dictType">
|
||||
<span style="float: left">{{ dict.dictName }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {getRelId, getRelColumns, getTableInfos, getTableColumns, getRelColumnInfos} from '@/api/tool/relApi'
|
||||
|
||||
export default {
|
||||
name: "BasicInfoForm",
|
||||
components: {Treeselect},
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
tables: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
menus: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
dictOptions: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
subColumns: [],
|
||||
// 表格的高度
|
||||
tableHeight: document.documentElement.scrollHeight - 245 + "px",
|
||||
tableId: null,
|
||||
relTables: [],
|
||||
tableInfo: [],
|
||||
tableList: [],
|
||||
rules: {
|
||||
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"}
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.relTables = []
|
||||
this.tableId = this.$route.params && this.$route.params.tableId;
|
||||
getTableInfos().then(res => {
|
||||
this.tableInfo = res.data
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
'info.subTableName': function (val) {
|
||||
this.setSubTableColumns(val);
|
||||
},
|
||||
'info': function (val) {
|
||||
if (val.tplCategory === 'rel') {
|
||||
let table = {
|
||||
tableName: val.tableName
|
||||
}
|
||||
this.tableList.unshift(table)
|
||||
getRelColumnInfos(this.tableId).then(res => {
|
||||
if (res.data.length === 0) {
|
||||
getRelId().then(res => {
|
||||
let relTable = {
|
||||
id: res.data,
|
||||
tableId: this.tableId,
|
||||
tableName: null,
|
||||
relName: null,
|
||||
relComment: null,
|
||||
relColumn: null,
|
||||
tableColumn: null,
|
||||
queryType: 'left',
|
||||
sort: 1,
|
||||
tableColumns: [],
|
||||
relColumns: [],
|
||||
}
|
||||
this.relTables.push(relTable);
|
||||
})
|
||||
} else {
|
||||
this.relTables = []
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
let table = {
|
||||
tableName: res.data[i].relName,
|
||||
}
|
||||
let tableData = res.data[i]
|
||||
getTableColumns(tableData.tableName).then(res => {
|
||||
tableData.tableColumns = res.data
|
||||
})
|
||||
this.relTables.push(tableData)
|
||||
this.tableList.push(table)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 关联父表改变 */
|
||||
tableChange(tableName, index) {
|
||||
this.relTables[index].tableColumns = []
|
||||
getTableColumns(tableName).then(res => {
|
||||
this.relTables[index].tableColumns = res.data
|
||||
this.$forceUpdate()
|
||||
})
|
||||
},
|
||||
/** 删除关子联表 */
|
||||
removeRelTable(index) {
|
||||
let tableDate = this.relTables[index]
|
||||
if (tableDate.relName !== null || tableDate.relName !== '') {
|
||||
for (let i=0;i<this.tableList.length;i++){
|
||||
if (tableDate.relName === this.tableList[i].tableName){
|
||||
this.tableList.splice(i,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.relTables.splice(index, 1)
|
||||
},
|
||||
/** 关联子表改变 */
|
||||
relNameChang(index, relName) {
|
||||
let start = true;
|
||||
for (let i = 0; i < this.tableList.length; i++) {
|
||||
if (relName === this.tableList[i].tableName) {
|
||||
start = false
|
||||
break
|
||||
}
|
||||
}
|
||||
if (start) {
|
||||
let table = {
|
||||
tableName: relName,
|
||||
}
|
||||
this.tableList.push(table)
|
||||
}
|
||||
getRelColumns(relName, this.relTables[index].id).then(res => {
|
||||
for (let i = 0; i < this.tableInfo.length; i++) {
|
||||
if (this.tableInfo[i].table_name === relName) {
|
||||
this.relTables[index].relComment = this.tableInfo[i].table_comment
|
||||
break
|
||||
}
|
||||
}
|
||||
this.relTables[index].relColumns = res.data
|
||||
})
|
||||
},
|
||||
/** 添加关联表 */
|
||||
addRelTable() {
|
||||
getRelId().then(res => {
|
||||
let relTable = {
|
||||
id: res.data,
|
||||
tableId: this.tableId,
|
||||
tableName: null,
|
||||
relName: null,
|
||||
relComment: null,
|
||||
relColumn: null,
|
||||
tableColumn: null,
|
||||
queryType: 'left',
|
||||
sort: 1,
|
||||
tableColumns: [],
|
||||
relColumns: [],
|
||||
}
|
||||
this.relTables.push(relTable)
|
||||
})
|
||||
},
|
||||
/** 转换菜单数据结构 */
|
||||
normalizer(node) {
|
||||
if (node.children && !node.children.length) {
|
||||
delete node.children;
|
||||
}
|
||||
return {
|
||||
id: node.menuId,
|
||||
label: node.menuName,
|
||||
children: node.children
|
||||
};
|
||||
},
|
||||
/** 选择子表名触发 */
|
||||
subSelectChange() {
|
||||
this.info.subTableFkName = '';
|
||||
},
|
||||
/** 选择生成模板触发 */
|
||||
tplSelectChange(value) {
|
||||
if (value === 'rel') {
|
||||
this.tableList = []
|
||||
let table = {
|
||||
tableName: this.info.tableName,
|
||||
}
|
||||
this.tableList.push(table)
|
||||
getRelId().then(res => {
|
||||
let relTable = {
|
||||
id: res.data,
|
||||
tableId: this.tableId,
|
||||
tableName: null,
|
||||
relName: null,
|
||||
relComment: null,
|
||||
relColumn: null,
|
||||
tableColumn: null,
|
||||
queryType: 'left',
|
||||
sort: 1,
|
||||
tableColumns: [],
|
||||
relColumns: [],
|
||||
}
|
||||
this.relTables.push(relTable);
|
||||
})
|
||||
} else if (value !== 'sub') {
|
||||
this.info.subTableName = '';
|
||||
this.info.subTableFkName = '';
|
||||
this.relTables = []
|
||||
} else {
|
||||
this.relTables = []
|
||||
}
|
||||
},
|
||||
/** 设置关联外键 */
|
||||
setSubTableColumns(value) {
|
||||
for (var item in this.tables) {
|
||||
const name = this.tables[item].tableName;
|
||||
if (value === name) {
|
||||
this.subColumns = this.tables[item].columns;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-table {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
</style>
|
||||
117
ebts-ui/src/views/tool/gen/importTable.vue
Normal file
117
ebts-ui/src/views/tool/gen/importTable.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<!-- 导入表 -->
|
||||
<el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true">
|
||||
<el-form-item label="表名称" prop="tableName">
|
||||
<el-input
|
||||
v-model="queryParams.tableName"
|
||||
placeholder="请输入表名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表描述" prop="tableComment">
|
||||
<el-input
|
||||
v-model="queryParams.tableComment"
|
||||
placeholder="请输入表描述"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
||||
<!-- <el-table-column prop="updateTime" label="更新时间"></el-table-column>-->
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-row>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="handleImportTable">确 定</el-button>
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listDbTable, importTable } from "@/api/tool/gen";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
visible: false,
|
||||
// 选中数组值
|
||||
tables: [],
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表数据
|
||||
dbTableList: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tableName: undefined,
|
||||
tableComment: undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 显示弹框
|
||||
show() {
|
||||
this.getList();
|
||||
this.visible = true;
|
||||
},
|
||||
clickRow(row) {
|
||||
this.$refs.table.toggleRowSelection(row);
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.tables = selection.map(item => item.tableName);
|
||||
},
|
||||
// 查询表数据
|
||||
getList() {
|
||||
listDbTable(this.queryParams).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.dbTableList = res.rows;
|
||||
this.total = res.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImportTable() {
|
||||
importTable({ tables: this.tables.join(",") }).then(res => {
|
||||
this.msgSuccess(res.msg);
|
||||
if (res.code === 200) {
|
||||
this.visible = false;
|
||||
this.$emit("ok");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
345
ebts-ui/src/views/tool/gen/index.vue
Normal file
345
ebts-ui/src/views/tool/gen/index.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="表名称" prop="tableName">
|
||||
<el-input
|
||||
v-model="queryParams.tableName"
|
||||
placeholder="请输入表名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表描述" prop="tableComment">
|
||||
<el-input
|
||||
v-model="queryParams.tableComment"
|
||||
placeholder="请输入表描述"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleGenTable"
|
||||
v-hasPermi="['tool:gen:code']"
|
||||
>生成</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-upload"
|
||||
size="mini"
|
||||
@click="openImportTable"
|
||||
v-hasPermi="['tool:gen:import']"
|
||||
>导入</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleEditTable"
|
||||
v-hasPermi="['tool:gen:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['tool:gen:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" align="center" width="55"></el-table-column>
|
||||
<el-table-column label="序号" type="index" width="50" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="表名称"
|
||||
align="center"
|
||||
prop="tableName"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
label="表描述"
|
||||
align="center"
|
||||
prop="tableComment"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
label="实体"
|
||||
align="center"
|
||||
prop="className"
|
||||
:show-overflow-tooltip="true"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="160" />
|
||||
<el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-view"
|
||||
@click="handlePreview(scope.row)"
|
||||
v-hasPermi="['tool:gen:preview']"
|
||||
>预览</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEditTable(scope.row)"
|
||||
v-hasPermi="['tool:gen:edit']"
|
||||
>编辑</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['tool:gen:remove']"
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-refresh"
|
||||
@click="handleSynchDb(scope.row)"
|
||||
v-hasPermi="['tool:gen:edit']"
|
||||
>同步</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-download"
|
||||
@click="handleGenTable(scope.row)"
|
||||
v-hasPermi="['tool:gen:code']"
|
||||
>生成代码</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
<!-- 预览界面 -->
|
||||
<el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body>
|
||||
<el-tabs v-model="preview.activeName">
|
||||
<el-tab-pane
|
||||
v-for="(value, key) in preview.data"
|
||||
:label="key"
|
||||
:name="key"
|
||||
:key="key"
|
||||
>
|
||||
<pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
<import-table ref="import" @ok="handleQuery" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listTable, previewTable, delTable, genCode, synchDb, downloadCode } from "@/api/tool/gen";
|
||||
import importTable from "./importTable";
|
||||
import { downLoadZip } from "@/utils/zipdownload";
|
||||
import hljs from "highlight.js/lib/highlight";
|
||||
import "highlight.js/styles/github-gist.css";
|
||||
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
|
||||
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
|
||||
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
|
||||
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
|
||||
hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
|
||||
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));
|
||||
|
||||
export default {
|
||||
name: "Gen",
|
||||
components: { importTable },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 唯一标识符
|
||||
uniqueId: "",
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 选中表数组
|
||||
tableNames: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表数据
|
||||
tableList: [],
|
||||
// 日期范围
|
||||
dateRange: "",
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tableName: undefined,
|
||||
tableComment: undefined
|
||||
},
|
||||
// 预览参数
|
||||
preview: {
|
||||
open: false,
|
||||
title: "代码预览",
|
||||
data: {},
|
||||
activeName: "domain.java"
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
activated() {
|
||||
const time = this.$route.query.t;
|
||||
if (time != null && time != this.uniqueId) {
|
||||
this.uniqueId = time;
|
||||
this.resetQuery();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 查询表集合 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listTable(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
||||
this.tableList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 生成代码操作 */
|
||||
handleGenTable(row) {
|
||||
const tableNames = row.tableName || this.tableNames;
|
||||
if (tableNames == "") {
|
||||
this.msgError("请选择要生成的数据");
|
||||
return;
|
||||
}
|
||||
if(row.genType === "1") {
|
||||
genCode(row.tableName).then(response => {
|
||||
this.msgSuccess("成功生成到自定义路径：" + row.genPath);
|
||||
});
|
||||
} else {
|
||||
// downloadCode(tableNames).then(res =>{
|
||||
// this.download(res.msg);
|
||||
// })
|
||||
// // todo
|
||||
downLoadZip("/tool/gen/batchGenCode?tables=" + tableNames, "hchyun");
|
||||
}
|
||||
},
|
||||
/** 同步数据库操作 */
|
||||
handleSynchDb(row) {
|
||||
const tableName = row.tableName;
|
||||
this.$confirm('确认要强制同步"' + tableName + '"表结构吗？', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return synchDb(tableName);
|
||||
}).then(() => {
|
||||
this.msgSuccess("同步成功");
|
||||
})
|
||||
},
|
||||
/** 打开导入表弹窗 */
|
||||
openImportTable() {
|
||||
this.$refs.import.show();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 预览按钮 */
|
||||
handlePreview(row) {
|
||||
previewTable(row.tableId).then(response => {
|
||||
this.preview.data = response.data;
|
||||
this.preview.open = true;
|
||||
});
|
||||
},
|
||||
/** 高亮显示 */
|
||||
highlightedCode(code, key) {
|
||||
const vmName = key;
|
||||
var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
|
||||
const result = hljs.highlight(language, code || "", true);
|
||||
return result.value || ' ';
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.tableId);
|
||||
this.tableNames = selection.map(item => item.tableName);
|
||||
this.single = selection.length != 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleEditTable(row) {
|
||||
const tableId = row.tableId || this.ids[0];
|
||||
this.$router.push("/gen/edit/" + tableId);
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const tableIds = row.tableId || this.ids;
|
||||
const tableName = row.tableName;
|
||||
this.$confirm('是否确认删除表"' + tableName + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delTable(tableIds);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
198
ebts-ui/src/views/tool/module/editTable.vue
Normal file
198
ebts-ui/src/views/tool/module/editTable.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="基本信息" name="basic">
|
||||
<module-info-form ref="moduleInfo" :info="info"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="字段信息" name="cloum">
|
||||
<el-row class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['tool:module:export']"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table ref="dragTable" :data="cloumns" row-key="columnId" :max-height="tableHeight">
|
||||
<el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag"/>
|
||||
<el-table-column label="接口类" min-width="12%">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.cId" placeholder="请选择类">
|
||||
<el-option
|
||||
v-for="item in apiclassOptions"
|
||||
:key="item.id"
|
||||
:label="item.cName"
|
||||
:value="item.id"/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="接口名称" min-width="10%">
|
||||
<template slot-scope="scope" >
|
||||
<el-input v-model="scope.row.itName"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="接口描述" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.itDescribe"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="请求路径" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.requrl"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="许可" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" false-label="0" v-model="scope.row.isPermission"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="生成" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox true-label="1" false-label="0" v-model="scope.row.isGenerate"></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="请求类型" min-width="12%">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.method">
|
||||
<el-option label="Get" value="Get"/>
|
||||
<el-option label="Post" value="Post"/>
|
||||
<el-option label="Put" value="Put"/>
|
||||
<el-option label="Delete" value="Delete"/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.$index,scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="生成信息" name="genInfo">-->
|
||||
<!-- <gen-info-form ref="genInfo" :info="info" :tables="tables" :menus="menus"/>-->
|
||||
<!-- </el-tab-pane>-->
|
||||
</el-tabs>
|
||||
<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-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {queryListApiclass} from "@/api/tool/apiclass";
|
||||
import ModuleInfoForm from "@/views/tool/module/moduleInfoForm";
|
||||
import {listIntertable,updateIntertable} from "@/api/tool/interTable";
|
||||
export default {
|
||||
name: "ModuleEdit",
|
||||
components: {ModuleInfoForm},
|
||||
data(){
|
||||
return{
|
||||
// 选中选项卡的 name
|
||||
activeName: "cloum",
|
||||
// 表格的高度
|
||||
tableHeight: document.documentElement.scrollHeight - 245 + "px",
|
||||
// 表信息
|
||||
tables: [],
|
||||
// 表列信息
|
||||
cloumns: [],
|
||||
// 字典信息
|
||||
dictOptions: [],
|
||||
// 接口类信息
|
||||
apiclassOptions: [],
|
||||
// 菜单信息
|
||||
menus: [],
|
||||
regularOptions: [],
|
||||
// 表详细信息
|
||||
info: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const moduleId = this.$route.params && this.$route.params.moduleId;
|
||||
if (moduleId){
|
||||
let data = {
|
||||
mId : moduleId,
|
||||
type : 1,
|
||||
}
|
||||
listIntertable(data).then(response => {
|
||||
this.cloumns = response.data.rows
|
||||
this.info = response.data.info
|
||||
})
|
||||
queryListApiclass().then(res => {
|
||||
this.apiclassOptions = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
methods:{ /** 删除按钮 */
|
||||
handleDelete(index, row) {
|
||||
this.cloumns.splice(index, 1);
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
const moduleForm = this.$refs.moduleInfo.$refs.moduleInfoForm;
|
||||
Promise.all([moduleForm].map(this.getFormPromise)).then(res => {
|
||||
const validateResult = res.every(item => !!item);
|
||||
if (validateResult) {
|
||||
const interTableDto = {
|
||||
module : moduleForm.model,
|
||||
interTables : this.cloumns,
|
||||
};
|
||||
updateIntertable(interTableDto).then(res => {
|
||||
this.msgSuccess(res.msg);
|
||||
if (res.code === 200) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.msgError("表单校验未通过，请重新检查提交内容");
|
||||
}
|
||||
});
|
||||
}, /** 新增按钮 */
|
||||
handleAdd() {
|
||||
let row = {
|
||||
id: null,
|
||||
cId: null,
|
||||
mId: this.info.id,
|
||||
isGenerate: '1',
|
||||
isPermission: '1',
|
||||
itDescribe: '',
|
||||
itName: '',
|
||||
method: 'Get',
|
||||
requrl: '',
|
||||
type: 1,
|
||||
}
|
||||
this.cloumns.push(row)
|
||||
},
|
||||
getFormPromise(form) {
|
||||
return new Promise(resolve => {
|
||||
form.validate(res => {
|
||||
resolve(res);
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 关闭按钮 */
|
||||
close() {
|
||||
this.$store.dispatch("tagsView/delView", this.$route);
|
||||
this.$router.push({ path: "/tool/module", query: { t: Date.now()}})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
379
ebts-ui/src/views/tool/module/index.vue
Normal file
379
ebts-ui/src/views/tool/module/index.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="模块名称" prop="mName">
|
||||
<el-input
|
||||
v-model="queryParams.mName"
|
||||
placeholder="请输入模块名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模块描述" prop="mDescribe">
|
||||
<el-input
|
||||
v-model="queryParams.mDescribe"
|
||||
placeholder="请输入模块描述"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="daterangeCreateTime"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['tool:module:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['tool:module:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['tool:module:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['tool:module:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="moduleList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="模块名称" align="center" prop="mName" />
|
||||
<el-table-column label="模块描述" align="center" prop="mDescribe" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-view"
|
||||
@click="handlePreview(scope.row.id)"
|
||||
v-hasPermi="['tool:apiclass:preview']"
|
||||
>预览</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['tool:apiclass:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-edit-outline"
|
||||
@click="handleEditTable(scope.row)"
|
||||
v-hasPermi="['tool:apiclass:update']"
|
||||
>接口</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['tool:module:remove']"
|
||||
>删除</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-download"
|
||||
@click="handleGenTable(scope.row)"
|
||||
v-hasPermi="['tool:apiclass:code']"
|
||||
>生成代码</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改模块管理对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="模块名称" prop="mName">
|
||||
<el-input v-model="form.mName" placeholder="请输入模块名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模块描述" prop="mDescribe">
|
||||
<el-input v-model="form.mDescribe" placeholder="请输入模块描述" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 预览界面 -->
|
||||
<el-dialog :title="preview.title" :visible.sync="preview.open" width="80%" top="5vh" append-to-body>
|
||||
<el-tabs v-model="preview.activeName">
|
||||
<el-tab-pane
|
||||
v-for="(value, key) in preview.data"
|
||||
:label="key"
|
||||
:name="key"
|
||||
:key="key"
|
||||
>
|
||||
<pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listModule, getModule, delModule, addModule, updateModule, exportModule } from "@/api/tool/module";
|
||||
import { getModulePreview } from '@/api/tool/interTable'
|
||||
import hljs from "highlight.js/lib/highlight";
|
||||
import "highlight.js/styles/github-gist.css";
|
||||
import {downLoadZip} from "@/utils/zipdownload";
|
||||
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
|
||||
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));
|
||||
export default {
|
||||
name: "Module",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 模块管理表格数据
|
||||
moduleList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 创建时间时间范围
|
||||
daterangeCreateTime: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
mName: null,
|
||||
mDescribe: null,
|
||||
},
|
||||
// 预览参数
|
||||
preview: {
|
||||
open: false,
|
||||
title: "代码预览",
|
||||
data: {},
|
||||
activeName: ""
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
mName: [
|
||||
{ required: true, message: "模块名称不能为空}", trigger: "blur" },
|
||||
],
|
||||
mDescribe: [
|
||||
{ required: true, message: "模块描述不能为空}", trigger: "blur" },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 预览代码 */
|
||||
handlePreview(id){
|
||||
getModulePreview(id).then(res=>{
|
||||
this.preview.data = res.data;
|
||||
this.preview.open = true;
|
||||
var keys = Object.keys(res.data)
|
||||
this.preview.activeName = keys[0]
|
||||
})
|
||||
},
|
||||
/** 生成代码操作 */
|
||||
handleGenTable(row) {
|
||||
downLoadZip("/generator/intertable/moudlegen/" + row.id, "hchyun");
|
||||
},
|
||||
/** 高亮显示 */
|
||||
highlightedCode(code, key) {
|
||||
const vmName = key;
|
||||
var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
|
||||
const result = hljs.highlight(language, code || "", true);
|
||||
return result.value || ' ';
|
||||
},
|
||||
/** 查询模块管理列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listModule(this.addCreateDateRange(this.queryParams,this.daterangeCreateTime)).then(response =>{
|
||||
this.moduleList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
mName: null,
|
||||
mDescribe: null,
|
||||
remark: null,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.daterangeCreateTime = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加模块管理";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getModule(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改模块管理";
|
||||
});
|
||||
},
|
||||
handleEditTable(row){
|
||||
const moduleId = row.id || this.ids[0];
|
||||
this.$router.push("/module/edit/" + moduleId);
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateModule(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addModule(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm('是否确认删除模块管理编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delModule(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有模块管理数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return exportModule(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
68
ebts-ui/src/views/tool/module/moduleInfoForm.vue
Normal file
68
ebts-ui/src/views/tool/module/moduleInfoForm.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<el-form ref="moduleInfoForm" :model="info" :rules="rules" label-width="150px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="模块名称" prop="mDescribe">
|
||||
<el-input placeholder="请输入类名" v-model="info.mDescribe"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="模块描述" prop="mName">
|
||||
<el-input placeholder="请输入类名" v-model="info.mName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注">
|
||||
<el-input type="textarea" :rows="3" v-model="info.remark"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import {queryListModule} from "@/api/tool/module"
|
||||
export default {
|
||||
name: "ModuleInfoForm",
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moduleList:[],
|
||||
rules: {
|
||||
mName: [
|
||||
{ required: true, message: "模块名称不能为空}", trigger: "blur" },
|
||||
],
|
||||
mDescribe: [
|
||||
{ required: true, message: "模块描述不能为空}", trigger: "blur" },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
queryListModule().then(respone => {
|
||||
this.moduleList = respone.data
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
transform() {
|
||||
var mid = this.info.mId
|
||||
var str = ''
|
||||
var start = true
|
||||
for (let i = 0; i < this.moduleList.length; i++) {
|
||||
if (mid == this.moduleList[i].id) {
|
||||
str = this.moduleList[i].mName
|
||||
start = false
|
||||
}
|
||||
}
|
||||
if (start) {
|
||||
str = ''
|
||||
}
|
||||
this.info.packageName = 'com.ebts.' + str
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
321
ebts-ui/src/views/tool/query/index.vue
Normal file
321
ebts-ui/src/views/tool/query/index.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="uqName">
|
||||
<el-input
|
||||
v-model="queryParams.uqName"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="uqDescribe">
|
||||
<el-input
|
||||
v-model="queryParams.uqDescribe"
|
||||
placeholder="请输入描述"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="daterangeCreateTime"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['tool:query:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['tool:query:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['tool:query:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['tool:query:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="queryList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" width="50"></el-table-column>
|
||||
<el-table-column label="名称" align="center" prop="uqName" />
|
||||
<el-table-column label="描述" align="center" prop="uqDescribe" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updateTime">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['tool:query:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-edit-outline"
|
||||
@click="handleEditTable(scope.row)"
|
||||
v-hasPermi="['tool:query:update']"
|
||||
>编辑</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['tool:query:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改万能查询对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="uqName">
|
||||
<el-input v-model="form.uqName" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="sql语句" prop="uqSql">
|
||||
<el-input v-model="form.uqSql" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="uqDescribe">
|
||||
<el-input v-model="form.uqDescribe" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listQuery, getQuery, delQuery, addQuery, updateQuery, exportQuery } from "@/api/tool/query";
|
||||
|
||||
export default {
|
||||
name: "Query",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 万能查询表格数据
|
||||
queryList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 创建时间时间范围
|
||||
daterangeCreateTime: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
uqName: null,
|
||||
uqDescribe: null,
|
||||
type:1
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
uqName: [
|
||||
{ required: true, message: "名称不能为空}", trigger: "blur" },
|
||||
],
|
||||
uqDescribe: [
|
||||
{ required: true, message: "描述不能为空}", trigger: "blur" },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询万能查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listQuery(this.addCreateDateRange(this.queryParams,this.daterangeCreateTime)).then(response =>{
|
||||
this.queryList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
uqName: null,
|
||||
uqSql: null,
|
||||
uqDescribe: null,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
handleEditTable(row){
|
||||
this.$router.push("/query/edit/" + row.id);
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.daterangeCreateTime = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加万能查询";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getQuery(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改万能查询";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
this.form.type = 1
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateQuery(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addQuery(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm('是否确认删除万能查询编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delQuery(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有万能查询数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return exportQuery(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
456
ebts-ui/src/views/tool/query/uniQuery.vue
Normal file
456
ebts-ui/src/views/tool/query/uniQuery.vue
Normal file
@@ -0,0 +1,456 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="form-header">
|
||||
<el-row :gutter="15">
|
||||
<el-form ref="elForm" :model="info" :rules="rules" size="medium" label-width="100px">
|
||||
<el-col :span="18">
|
||||
<el-form-item label-width="1px" label="">
|
||||
<textarea ref="textarea" type="textarea" @change="sqlChang" placeholder="请输入sql"
|
||||
:autosize="{minRows: 7, maxRows: 7}" :style="{width: '100%'}"></textarea>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label-width="55px" label="名称" prop="uqName">
|
||||
<el-input v-model="info.uqName" placeholder="请输入名称" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label-width="55px" label="描述" prop="uqDescribe">
|
||||
<el-input v-model="info.uqDescribe" placeholder="请输入描述" clearable :style="{width: '100%'}">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button type="text" icon="el-icon-upload" size="medium" @click="submitForm">提交</el-button>
|
||||
<el-button type="text" icon="el-icon-view" size="medium" @click="previewQuery">预览</el-button>
|
||||
<el-button type="text" icon="el-icon-plus" size="medium" @click="handleAdd" >新增</el-button>
|
||||
<el-button type="text" icon="el-icon-download" size="medium" @click="handleExport">导出</el-button>
|
||||
<el-button v-if="info.isRelease == 2" type="text" icon="el-icon-success" size="medium" @click="handRelease(1)">发布</el-button>
|
||||
<el-button v-if="info.isRelease == 1" type="text" icon="el-icon-error" size="medium" @click="handRelease(2)">撤销</el-button>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-table ref="dragTable" :data="cloumns" row-key="columnId" :max-height="tableHeight">
|
||||
<el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag"/>
|
||||
<el-table-column label="查询名称" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.ucName"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="条件描述" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.ucDescribe"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="key" min-width="10%">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.ucKey"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="条件" min-width="10%">
|
||||
<template slot-scope="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 slot-scope="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="10%">
|
||||
<template slot-scope="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="操作" align="center" min-width="5%">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.$index,scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="el-table">
|
||||
<el-table v-show="previewDate.open" :data="previewDate.data">
|
||||
<el-table-column v-for="item in previewDate.header"
|
||||
:label="item"
|
||||
align="center"
|
||||
:key="item"
|
||||
:prop="item"/>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="previewQuery"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入全局实例
|
||||
import CodeMirror from 'codemirror'
|
||||
// 核心样式
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
// 引入主题后还需要在 options 中指定主题才会生效
|
||||
import 'codemirror/theme/idea.css'
|
||||
|
||||
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
|
||||
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
|
||||
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
|
||||
import 'codemirror/mode/sql/sql.js'
|
||||
|
||||
//代码补全提示
|
||||
import 'codemirror/addon/hint/show-hint.css';
|
||||
import 'codemirror/addon/hint/show-hint.js';
|
||||
import 'codemirror/addon/hint/sql-hint.js';
|
||||
import {getQueryInfo, editQueryInfo, previewQueryData, Release, exportMock} from '@/api/tool/query'
|
||||
import {Message} from "element-ui";
|
||||
|
||||
|
||||
function JSONString(list) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
|
||||
if (list[i].type == 2) {
|
||||
list[i].ucMock = JSON.stringify(list[i].ucMock)
|
||||
} else if (list[i].type == 4) {
|
||||
let time = {
|
||||
startTime: list[i].ucMock[0],
|
||||
endTime: list[i].ucMock[1],
|
||||
}
|
||||
list[i].ucMock = JSON.stringify(time)
|
||||
}
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
function JSONparse(list) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].type == 2) {
|
||||
list[i].ucMock = JSON.parse(list[i].ucMock)
|
||||
} else if (list[i].type == 4) {
|
||||
let time = JSON.parse(list[i].ucMock)
|
||||
list[i].ucMock = [time.startTime, time.endTime]
|
||||
}
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: [],
|
||||
data() {
|
||||
return {
|
||||
tableHeight: document.documentElement.scrollHeight - 245 + "px",
|
||||
// 表列信息
|
||||
cloumns: [],
|
||||
sqlconfig: {
|
||||
// 默认的语法类型
|
||||
mode: 'sql',
|
||||
// 编辑器实例
|
||||
coder: null,
|
||||
// 默认配置
|
||||
options: {
|
||||
// 缩进格式
|
||||
tabSize: 4,
|
||||
// 主题，对应主题库 JS 需要提前引入
|
||||
theme: 'idea',
|
||||
spellcheck: true,
|
||||
cursorHeight: 0.85,
|
||||
// 显示行号
|
||||
lineNumbers: true,
|
||||
line: true,
|
||||
extraKeys: {"Tab": "autocomplete"},
|
||||
lineWrapping: true,//代码折叠
|
||||
matchBrackets: true,//括号匹配
|
||||
},
|
||||
},
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
queryId: null,
|
||||
info: {
|
||||
uqSql: '',
|
||||
uqName: null,
|
||||
uqDescribe: null,
|
||||
},
|
||||
|
||||
previewDate: {
|
||||
open: false,
|
||||
data: [],
|
||||
header: [],
|
||||
},
|
||||
rules: {
|
||||
uqName: [{required: true, message: '请输入名称', trigger: 'blur'}],
|
||||
uqDescribe: [{required: true, message: '请输入描述', trigger: 'blur'}],
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {
|
||||
this.queryId = this.$route.params && this.$route.params.queryId;
|
||||
getQueryInfo(this.queryId).then(res => {
|
||||
this.cloumns = []
|
||||
this.info = res.data.info
|
||||
this.cloumns = JSONparse(res.data.list)
|
||||
this.sqlconfig.coder.setValue(this.info.uqSql)
|
||||
})
|
||||
this.$nextTick(function () {
|
||||
this.initialize();
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changUniCon(list) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].ucName == "") {
|
||||
Message({
|
||||
message: "序号" + i + "查询名称不能为空!",
|
||||
type: 'error'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
if (list[i].ucDescribe == "") {
|
||||
Message({
|
||||
message: "序号" + i + "描述不能为空!",
|
||||
type: 'error'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
if (list[i].ucKey == "") {
|
||||
Message({
|
||||
message: "序号" + i + "key不能为空!",
|
||||
type: 'error'
|
||||
})
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true
|
||||
},
|
||||
/** 发布与撤销 */
|
||||
handRelease(release){
|
||||
let data = {
|
||||
id: this.queryId,
|
||||
isRelease: release,
|
||||
}
|
||||
Release(data).then(res=>{
|
||||
this.info.isRelease = (this.info.isRelease==1)?2:1
|
||||
Message({
|
||||
message:res.msg,
|
||||
type:"success"
|
||||
})
|
||||
})
|
||||
},
|
||||
/** 预览 */
|
||||
previewQuery() {
|
||||
this.$refs['elForm'].validate(valid => {
|
||||
if (valid) {
|
||||
let list = JSONString(this.cloumns)
|
||||
let data = this.info
|
||||
if (list.length > 0) {
|
||||
if (this.changUniCon(list)) {
|
||||
data.uniCons = list
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
data.pageNum = this.queryParams.pageNum
|
||||
data.pageSize = this.queryParams.pageSize
|
||||
previewQueryData(data).then(res => {
|
||||
this.previewDate.data = res.rows
|
||||
this.total = res.total
|
||||
this.previewDate.header = []
|
||||
for (var key in this.previewDate.data[0]) {
|
||||
this.previewDate.header.push(key)
|
||||
}
|
||||
this.previewDate.open = true
|
||||
this.cloumns = JSONparse(list)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
sqlChang() {
|
||||
console.log(this.sqlconfig.coder.getValue())
|
||||
},
|
||||
initialize() {
|
||||
// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
|
||||
this.sqlconfig.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.sqlconfig.options)
|
||||
// 编辑器赋值
|
||||
this.sqlconfig.coder.setValue(this.info.uqSql)
|
||||
// 支持双向绑定
|
||||
this.sqlconfig.coder.on('change', (coder) => {
|
||||
this.info.uqSql = coder.getValue()
|
||||
if (this.$emit) {
|
||||
this.$emit('input', this.info.uqSql)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
/** 删除按钮 */
|
||||
handleDelete(index) {
|
||||
this.cloumns.splice(index, 1);
|
||||
},
|
||||
ucTypeChang(index, row) {
|
||||
if (row.ucType == 'input' && row.ucCon != 'BETWEEN') {
|
||||
this.cloumns[index].type = 1
|
||||
if (typeof (this.cloumns[index].ucMock) != 'string') {
|
||||
this.cloumns[index].ucMock = ''
|
||||
}
|
||||
} else if (row.ucType == 'input' && row.ucCon == 'BETWEEN') {
|
||||
this.cloumns[index].type = 2
|
||||
this.cloumns[index].ucMock = {begin: '', end: ''}
|
||||
} else if (row.ucType == 'datetime' && row.ucCon != 'BETWEEN') {
|
||||
this.cloumns[index].type = 3
|
||||
this.cloumns[index].ucMock = ''
|
||||
} else if (row.ucType == 'datetime' && row.ucCon == 'BETWEEN') {
|
||||
this.cloumns[index].type = 4
|
||||
this.cloumns[index].ucMock = []
|
||||
}
|
||||
},
|
||||
/** 添加 */
|
||||
handleAdd() {
|
||||
let row = {
|
||||
id: null,
|
||||
uqId: this.queryId,
|
||||
ucName: '',
|
||||
ucCon: 'EQ',
|
||||
ucDescribe: '',
|
||||
ucKey: '',
|
||||
ucMock: '',
|
||||
ucType: 'input',
|
||||
type: 1,
|
||||
}
|
||||
this.cloumns.push(row)
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs['elForm'].validate(valid => {
|
||||
if (valid) {
|
||||
let list = JSONString(this.cloumns)
|
||||
let data = this.info
|
||||
if (list.length > 0) {
|
||||
data.uniCons = list
|
||||
}
|
||||
editQueryInfo(data).then(res => {
|
||||
this.cloumns = JSONparse(list)
|
||||
Message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
var that = this
|
||||
let list = JSONString(that.cloumns)
|
||||
let data = that.info
|
||||
this.$confirm('是否确认导出查询数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function () {
|
||||
if (list.length > 0) {
|
||||
if (that.changUniCon(list)) {
|
||||
data.uniCons = list
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
return exportMock(data)
|
||||
}).then(response => {
|
||||
that.cloumns = JSONparse(list)
|
||||
this.download(response.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.CodeMirror {
|
||||
border: 1px solid #DCDFE6;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.CodeMirror-line {
|
||||
height: 20px;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
height: 20px;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.form-header {
|
||||
margin: 18px 10px 0px 10px !important;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
342
ebts-ui/src/views/tool/regular/index.vue
Normal file
342
ebts-ui/src/views/tool/regular/index.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="正则名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入正则名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="正则内容" prop="regular">
|
||||
<el-input
|
||||
v-model="queryParams.regular"
|
||||
placeholder="请输入正则内容"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证内容" prop="validation">
|
||||
<el-input
|
||||
v-model="queryParams.validation"
|
||||
placeholder="请输入验证内容"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用" prop="enable">
|
||||
<el-select v-model="queryParams.enable" placeholder="请选择是否启用" v-on:change="handleQuery" clearable size="small">
|
||||
<el-option
|
||||
v-for="dict in enableOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="cyan" icon="el-icon-search" size="mini" v-on:click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" v-on:click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
v-on:click="handleAdd"
|
||||
v-hasPermi="['system:regular:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
icon="el-icon-edit"
|
||||
plain
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
v-on:click="handleUpdate"
|
||||
v-hasPermi="['system:regular:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
v-on:click="handleDelete"
|
||||
v-hasPermi="['system:regular:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
v-on:click="handleExport"
|
||||
v-hasPermi="['system:regular:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="regularList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<!-- <el-table-column label="id" align="center" prop="id" />-->
|
||||
<el-table-column label="正则名称" align="center" prop="name" />
|
||||
<el-table-column label="正则内容" align="center" prop="regular" />
|
||||
<el-table-column label="验证内容" align="center" prop="validation" />
|
||||
<el-table-column label="是否启用" align="center" prop="enable" :formatter="enableFormat" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
v-on:click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:regular:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
v-on:click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:regular:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改校验规则对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="正则名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入正则名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="正则内容" prop="regular">
|
||||
<el-input v-model="form.regular" placeholder="请输入正则内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="验证内容" prop="validation">
|
||||
<el-input v-model="form.validation" placeholder="请输入验证内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用">
|
||||
<el-radio-group v-model="form.enable">
|
||||
<el-radio
|
||||
v-for="dict in enableOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="parseInt(dict.dictValue)"
|
||||
>{{dict.dictLabel}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" v-on:click="submitForm">确 定</el-button>
|
||||
<el-button v-on:click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listRegular, getRegular, delRegular, addRegular, updateRegular, exportRegular } from "@/api/tool/regular";
|
||||
|
||||
export default {
|
||||
name: "Regular",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 校验规则表格数据
|
||||
regularList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否启用 1:启动 2:关闭字典
|
||||
enableOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
regular: null,
|
||||
validation: null,
|
||||
enable: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "正则名称不能为空", trigger: "blur" }
|
||||
],
|
||||
regular: [
|
||||
{ required: true, message: "正则内容不能为空", trigger: "blur" }
|
||||
],
|
||||
validation: [
|
||||
{ required: true, message: "验证内容不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDicts("sys_regular_enable").then(response => {
|
||||
this.enableOptions = response.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 查询校验规则列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listRegular(this.queryParams).then(response => {
|
||||
this.regularList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 是否启用 1:启动 2:关闭字典翻译
|
||||
enableFormat(row, column) {
|
||||
return this.selectDictLabel(this.enableOptions, row.enable);
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
name: null,
|
||||
regular: null,
|
||||
validation: null,
|
||||
enable: 0,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加校验规则";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getRegular(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改校验规则";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateRegular(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addRegular(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm('是否确认删除校验规则编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delRegular(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有校验规则数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return exportRegular(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
26
ebts-ui/src/views/tool/swagger/index.vue
Normal file
26
ebts-ui/src/views/tool/swagger/index.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div v-loading="loading" :style="'height:'+ height">
|
||||
<iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Swagger",
|
||||
data() {
|
||||
return {
|
||||
src: process.env.VUE_APP_BASE_API + "/swagger-ui.html",
|
||||
height: document.documentElement.clientHeight - 94.5 + "px;",
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
mounted: function() {
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 230);
|
||||
const that = this;
|
||||
window.onresize = function temp() {
|
||||
that.height = document.documentElement.clientHeight - 94.5 + "px;";
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
118
ebts-ui/src/views/tool/table/importTopTable.vue
Normal file
118
ebts-ui/src/views/tool/table/importTopTable.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<!-- 导入表 -->
|
||||
<el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh" append-to-body>
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true">
|
||||
<el-form-item label="表名称" prop="tableName">
|
||||
<el-input
|
||||
v-model="queryParams.tableName"
|
||||
placeholder="请输入表名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="表描述" prop="tableComment">
|
||||
<el-input
|
||||
v-model="queryParams.tableComment"
|
||||
placeholder="请输入表描述"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="table_name" label="表名称" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="table_comment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
|
||||
<el-table-column prop="create_time" label="创建时间"></el-table-column>
|
||||
<!-- <el-table-column prop="update_time" label="更新时间"></el-table-column>-->
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-row>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="handleImportTopTable">确 定</el-button>
|
||||
<el-button @click="visible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {importTopTable,listDbTable} from '../../../api/tool/table'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
visible: false,
|
||||
// 选中数组值
|
||||
tables: [],
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表数据
|
||||
dbTableList: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tableName: undefined,
|
||||
tableComment: undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 显示弹框
|
||||
show() {
|
||||
this.getList();
|
||||
this.visible = true;
|
||||
},
|
||||
clickRow(row) {
|
||||
this.$refs.table.toggleRowSelection(row);
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.tables = selection.map(item => item.table_name);
|
||||
},
|
||||
// 查询表数据
|
||||
getList() {
|
||||
listDbTable(this.queryParams).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.dbTableList = res.rows;
|
||||
this.total = res.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 导入按钮操作 */
|
||||
handleImportTopTable() {
|
||||
importTopTable({ tables: this.tables.join(",") }).then(res => {
|
||||
this.msgSuccess(res.msg);
|
||||
if (res.code === 200) {
|
||||
this.visible = false;
|
||||
this.$emit("ok");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
549
ebts-ui/src/views/tool/table/index.vue
Normal file
549
ebts-ui/src/views/tool/table/index.vue
Normal file
@@ -0,0 +1,549 @@
|
||||
<script src="../../../api/tool/table.js"></script>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="表名" prop="tableName">
|
||||
<el-input
|
||||
v-model="queryParams.tableName"
|
||||
placeholder="请输入表名"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="daterangeCreateTime"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="更新时间">
|
||||
<el-date-picker
|
||||
v-model="daterangeUpdateTime"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['tool:table:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['tool:table:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-upload"
|
||||
size="mini"
|
||||
@click="openImportTable"
|
||||
>导入</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['tool:table:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="序号" type="index" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ ((queryParams.pageInfo.pageNum - 1) * queryParams.pageInfo.pageSize + scope.$index + 1)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表名" align="center" prop="tableName" />
|
||||
<el-table-column label="表描述" align="center" prop="tableComment" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['tool:table:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['tool:table:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageInfo.pageNum"
|
||||
:limit.sync="queryParams.pageInfo.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改top万能查询主对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="表名:" prop="tableName">
|
||||
<span>{{form.tableName}}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色">
|
||||
<el-select v-model="form.roleIds" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.roleId"
|
||||
:label="item.roleName"
|
||||
:value="item.roleId"
|
||||
:disabled="item.status == 1"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="表描述" prop="tableComment">
|
||||
<el-input v-model="form.tableComment" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddTopSearchColumn">添加</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteTopSearchColumn">删除</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table :data="relationalMapList" :row-class-name="rowRelationalMapIndex" @selection-change="handleRelationalMapSelectionChange" ref="relationalMap">
|
||||
<el-table-column type="selection" width="50" align="center" prop="index" />
|
||||
<el-table-column label="序号" align="center" prop="index" width="50"/>
|
||||
<el-table-column label="外键" prop="mainKey">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.mainKey" placeholder="外键">
|
||||
<el-option
|
||||
v-for="item in topSearchColumnList"
|
||||
: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">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.childId" @change="changeChildList(scope.row.childId,scope.$index)" placeholder="关联表">
|
||||
<el-option
|
||||
v-for="(item,index) in tableInfoList"
|
||||
:key="index"
|
||||
:label="item.tableName+':'+item.tableComment"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关联字段" prop="childKey">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.childKey" placeholder="关联表">
|
||||
<el-option
|
||||
v-for="(item,index) in scope.row.childListColumn"
|
||||
:key="index"
|
||||
:label="item.columnName+':'+item.columnComment"
|
||||
:value="item.columnName">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关联方式" prop="types">
|
||||
<template slot-scope="scope">
|
||||
<el-select v-model="scope.row.types" multiple placeholder="关联方式">
|
||||
<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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider content-position="center">top万能查询字段信息</el-divider>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<!-- <el-col :span="1.5">-->
|
||||
<!-- <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddTopSearchColumn">添加</el-button>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="1.5">-->
|
||||
<!-- <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteTopSearchColumn">删除</el-button>-->
|
||||
<!-- </el-col>-->
|
||||
</el-row>
|
||||
<el-table :data="topSearchColumnList" :row-class-name="rowTopSearchColumnIndex" ref="topSearchColumn">
|
||||
<el-table-column label="序号" align="center" prop="index" width="50"/>
|
||||
<el-table-column label="列名称" prop="columnName">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.columnName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列描述" prop="columnComment">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.columnComment" placeholder="请输入列描述" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="列类型" prop="columnType">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.columnType}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否使用" prop="isUse" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox :false-label="0" :true-label="1" v-model="scope.row.isUse"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.createTime}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="更新时间" prop="updateTime">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <span>{{scope.row.updateTime}}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
</el-table>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<import-top-table ref="import" @ok="handleQuery" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listTable,columns, getTable, delTable, addTable, updateTable, exportTable, listInfoTable } from "@/api/tool/table";
|
||||
import {listRole} from '../../../api/system/role'
|
||||
import importTopTable from "./importTopTable";
|
||||
export default {
|
||||
name: "Table",
|
||||
components: { importTopTable },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 子表选中数据
|
||||
checkedRelationalMapList: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// top万能查询主表格数据
|
||||
tableList: [],
|
||||
// 角色选项
|
||||
roleOptions: [],
|
||||
// top万能查询字段表格数据
|
||||
topSearchColumnList: [],
|
||||
relationalMapList: [],
|
||||
tableInfoList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 创建时间时间范围
|
||||
daterangeCreateTime: [],
|
||||
// 更新时间时间范围
|
||||
daterangeUpdateTime: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageInfo:{
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
params:{},
|
||||
tableName: null,
|
||||
tableComment: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getRoleList();
|
||||
},
|
||||
methods: {
|
||||
getRoleList(){
|
||||
listRole().then(res=>{
|
||||
this.roleOptions = res.rows
|
||||
})
|
||||
},
|
||||
|
||||
/** 查询top万能查询主列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
this.queryParams.params={}
|
||||
if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
|
||||
this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
|
||||
this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
|
||||
}
|
||||
this.queryParams.params={}
|
||||
if (null != this.daterangeUpdateTime && '' != this.daterangeUpdateTime) {
|
||||
this.queryParams.params["beginUpdateTime"] = this.daterangeUpdateTime[0];
|
||||
this.queryParams.params["endUpdateTime"] = this.daterangeUpdateTime[1];
|
||||
}
|
||||
listTable(this.queryParams).then(response => {
|
||||
this.tableList = response.rows;
|
||||
if(response.total!==undefined){
|
||||
this.total = response.total;
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
tableName: null,
|
||||
tableComment: null,
|
||||
remark: null,
|
||||
roleIds:[],
|
||||
};
|
||||
this.topSearchColumnList = [];
|
||||
this.relationalMapList = [];
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 打开导入表弹窗 */
|
||||
openImportTable() {
|
||||
this.$refs.import.show();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.daterangeCreateTime = [];
|
||||
this.queryParams.params={}
|
||||
this.daterangeUpdateTime = [];
|
||||
this.queryParams.params={}
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加top万能查询主";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
listInfoTable().then( res=>{
|
||||
this.tableInfoList = res.rows
|
||||
})
|
||||
getTable(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.topSearchColumnList = response.data.topSearchColumnList;
|
||||
let relList = response.data.relationalMapList;
|
||||
for (let i = 0; i < relList.length; i++) {
|
||||
let item = {
|
||||
mainId:relList[i].mainId,
|
||||
childId:relList[i].childId,
|
||||
mainKey:relList[i].mainKey,
|
||||
childKey:relList[i].childKey,
|
||||
type:relList[i].type,
|
||||
types:[],
|
||||
}
|
||||
let list = relList[i].type.split(",");
|
||||
for (const listKey in list) {
|
||||
item.types.push(parseInt(list[listKey]))
|
||||
}
|
||||
this.relationalMapList.push(item)
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "修改top万能查询主";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.form.topSearchColumnList = this.topSearchColumnList;
|
||||
for (let i = 0; i < this.relationalMapList.length; i++) {
|
||||
this.relationalMapList[i].type = ""
|
||||
for (let j = 0; j < this.relationalMapList[i].types.length; j++) {
|
||||
if (j===this.relationalMapList[i].types.length-1){
|
||||
this.relationalMapList[i].type+=this.relationalMapList[i].types[j]
|
||||
}else {
|
||||
this.relationalMapList[i].type+=(this.relationalMapList[i].types[j]+',')
|
||||
}
|
||||
}
|
||||
}
|
||||
this.form.relationalMapList = this.relationalMapList;
|
||||
this.form.relationalMapList = this.relationalMapList
|
||||
if (this.form.id != null) {
|
||||
updateTable(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addTable(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm('是否确认删除top万能查询主编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delTable(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
},
|
||||
/** top万能查询字段序号 */
|
||||
rowTopSearchColumnIndex({ row, rowIndex }) {
|
||||
row.index = rowIndex + 1;
|
||||
},
|
||||
/** top万能查询字段序号 */
|
||||
rowRelationalMapIndex({ row, rowIndex }) {
|
||||
row.index = rowIndex + 1;
|
||||
},
|
||||
/** top万能查询字段添加按钮操作 */
|
||||
handleAddTopSearchColumn() {
|
||||
let obj = {
|
||||
mainId : this.form.id,
|
||||
childId : null,
|
||||
mainKey : null,
|
||||
childKey : null,
|
||||
type : null,
|
||||
types : [],
|
||||
childListColumn:[],
|
||||
};
|
||||
this.relationalMapList.push(obj);
|
||||
},
|
||||
/** top万能查询字段删除按钮操作 */
|
||||
handleDeleteTopSearchColumn() {
|
||||
if (this.checkedRelationalMapList.length == 0) {
|
||||
this.$alert("请先选择要删除的top万能查询字段数据", "提示", { confirmButtonText: "确定", });
|
||||
} else {
|
||||
this.relationalMapList.splice(this.checkedRelationalMapList[0].index - 1, 1);
|
||||
}
|
||||
},
|
||||
changeChildList(id,index){
|
||||
//todo 获取到该表字段信息
|
||||
columns(id).then(res=>{
|
||||
this.relationalMapList[index].childListColumn = res.data
|
||||
})
|
||||
},
|
||||
/** 单选框选中数据 */
|
||||
handleRelationalMapSelectionChange(selection) {
|
||||
if (selection.length > 1) {
|
||||
this.$refs.relationalMap.clearSelection();
|
||||
this.$refs.relationalMap.toggleRowSelection(selection.pop());
|
||||
} else {
|
||||
this.checkedRelationalMapList = selection;
|
||||
}
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有top万能查询主数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return exportTable(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
318
ebts-ui/src/views/tool/top/index.vue
Normal file
318
ebts-ui/src/views/tool/top/index.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="uqName">
|
||||
<el-input
|
||||
v-model="queryParams.uqName"
|
||||
placeholder="请输入名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="uqDescribe">
|
||||
<el-input
|
||||
v-model="queryParams.uqDescribe"
|
||||
placeholder="请输入描述"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="daterangeCreateTime"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['tool:query:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['tool:query:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['tool:query:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['tool:query:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="queryList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" width="50"></el-table-column>
|
||||
<el-table-column label="名称" align="center" prop="uqName" />
|
||||
<el-table-column label="描述" align="center" prop="uqDescribe" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" align="center" prop="updateTime">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['tool:query:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
icon="el-icon-edit-outline"
|
||||
@click="handleEditTable(scope.row)"
|
||||
v-hasPermi="['top:edit']"
|
||||
>编辑</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['tool:query:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改万能查询对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="名称" prop="uqName">
|
||||
<el-input v-model="form.uqName" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="uqDescribe">
|
||||
<el-input v-model="form.uqDescribe" placeholder="请输入描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listQuery, getQuery, delQuery, addQuery, updateQuery, exportQuery } from "@/api/tool/query";
|
||||
|
||||
export default {
|
||||
name: "Query",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 万能查询表格数据
|
||||
queryList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 创建时间时间范围
|
||||
daterangeCreateTime: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
uqName: null,
|
||||
uqDescribe: null,
|
||||
type:2
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
uqName: [
|
||||
{ required: true, message: "名称不能为空}", trigger: "blur" },
|
||||
],
|
||||
uqDescribe: [
|
||||
{ required: true, message: "描述不能为空}", trigger: "blur" },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询万能查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listQuery(this.addCreateDateRange(this.queryParams,this.daterangeCreateTime)).then(response =>{
|
||||
this.queryList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
uqName: null,
|
||||
uqSql: null,
|
||||
uqDescribe: null,
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
handleEditTable(row){
|
||||
this.$router.push("/top/edit/" + row.id);
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.daterangeCreateTime = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加万能查询";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getQuery(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改万能查询";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
this.form.type = 2
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateQuery(this.form).then(response => {
|
||||
this.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addQuery(this.form).then(response => {
|
||||
this.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$confirm('是否确认删除万能查询编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delQuery(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有万能查询数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return exportQuery(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
109
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.css
Normal file
109
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.css
Normal file
@@ -0,0 +1,109 @@
|
||||
@font-face {font-family: "iconfont";
|
||||
src: url('iconfont.eot?t=1568972645985'); /* IE9 */
|
||||
src: url('iconfont.eot?t=1568972645985#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAA1MAAsAAAAAGkgAAAz/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCGNAqiNJtOATYCJANgCzIABCAFhG0Hgggb6BVRlHJWSbKvBuyGeKPMp/UYzGar17rEgTXbq2lrenLOOiJE8OITJy7o6fe+23NLTyvVJoAwKGwrQsbFosAJPEZ3+Ytm/BseN+3fS0glCVCTCasY3VadGPyVrtxu0utIModSm3RSUfZHsjncObIyr8P0tHWYOJ0iZ73RM+2Zsj9df+4zw/JNJ9NJdwqhRklfCGc8j+3e58ZmgnVRSEKWoklKoPcrmZk0P0/vAQIBvH8/VamVDeUAJF3vd7MA0gtNCSshGl4/et+X5y2na8nOGlLHnKxoLUA8VuZibvEGsDHrBry0BQQUMFyDQ83xaxAyVtWrb5F0j+khUKzKBLeXr99Kh8NzCehMY1nptPycxS7JGwzDFukbmNR8MRW+5qXXb00Cw7fwgs+PZ125e8B32V4da2Ma5KA/HXgZDiw4BnAwk3GbBmxJj3OtmP7ceP4B7BPhSU/MEskVU6nwQu9EH7xRxVXS/eHM0Zd9YXi589MDTvXcO37+eLIvQ1Rn/RceIJoTYFwonswTIykqqxkxasyMKBHChAPqQO8G0MJa5oAekKsR0YOqCaYACYBEIOMAOZAJQDEQB1AByYAKIB7wAhABTmA1DPpgNRL6UUgBxAGpgBIgFnAPSAM4gYwAxoCMAu5jNcYwjGwkh2ggs4AyINOAC0AmAZexF1MAMJ8Ocw7woOJvQKg4+840uwPrToBSd7dEvK4t7vqaNfFFG7BPmh1xcj7mKetK4OMad2POjc62lYVVQ4stLy8tV6JEg9uc643L1cHTEs84tW63xsev5q0SacLNnHdans+TeT+TrS6PO/hylgoKhZfDejUj72RllMIEPrGHm0p736c9zytc+yj3BEMZ9dHRZi5qp4djvHrKzSpcOprmAxJqQnihShgQFtgigBsqGECffqJ/xD7UPdYg7DAu0I3GYcftqU4L4glRlYKRUFU0s8SmS1tESc5xGkAAAm7ElR8XPFOMjRcQBNI2kszvscejltEUsnOY4iPkLjIwa8BJnQliXA9BFAKCriRUMfJCIKnrBDzWSPBb6Gte6PHQLpfC7aa83tWd1s9xOzW718uYXK4NbC+OAyXobBDiAneOIKCgtwJQ79PgPByT4zv5KF/Y92Q6ZrrO4NDiScE7XTEARi9rJUIn+WZtahwSYBfad216u2fZdZfo5JVk5C3HlLPuwlvexFNXN+sHLrDn+5O6Rzn7JqTSj7DDGr0xEjH0TsV6Lprpps/7Sb+SM2alSWeIQIxWgq9fzM7u+jwf/31KUweVzqfWmaJwzqTW9QJQdH1JTujN0YTZDCFna8A9pMQNBgAerfpzEBLd7FVtijSZcDfnUJ0zbeiwo6d6u6fOdj/NmM1ROVV74VQPMRoJSgFaGsyo6jHvpNCToRTqUjXzLgmK97XbNS8D8TofjPO1BlfB3s4aI5/kEfqaTZWlCjXlMX0LoaAJyHmWut1K4mB9uFwXBglAnG2NW33VZWW7AQ5wKKiiTrIZ8CHN148AsMnayEdByNnX6oaGtt3FN8dkMQiBcgQfEDx2Hd8CIQ42V07YBTvlUUD9dA0sMPRGIKw1Wag/F4+abNVguU3AEAUJY7Q5GkKCyjOZInQRc8IwGiP1XUoSydvSOnFdiskC5xq7oueAvDDkpSAltu7iQO54T09kzwClyzCd4k5Hn8vXpxvb2BMRhk5a5yL0XgbgNJF9mmEdQ6EkpVgLgY8qaLWA8Glmw0AkwlCat1xTInCMPOWZs+JtZ9Lc8OZGEzz+SXf+JtB1GWzsvshd2ky9DcULNNDzOY07IyTWyxh4ywXONieV2OFZjrfqbKdOn+t72wqOnW/QXdxUB2bPbz/9ZC4fWmwpuO2+zpm25ewZw2uzJhPKLuvul4w7V0Egx3qTyG7bIYI7F22zMv236iMpowbruQS3/s66/hiBZRCf313YC8m8zvNzubN+KF7YNkDM687cxc16I2vYlnzmZqU0vJuLtgYBJtwEWrtNKRu8vBJLZADg0cjwAblWZ3U1I8xjKEjIpzqH2RG9nRtV+D+aAzI9Vqpz8jLdOfPOcc68UStaWSVTUUUdEkeGPQwLbTW3IAU/FxQ59ziXgoUqwcSHG2vx2KrttdXihK+uFY9rW0U4v5b5eNwaZ5Udjbc8+ZPe8APhNzA/eJiygtlM/GF/VljBPMQBWKD1qymweYiDZe2SAEm/Vmp/GkSVwAzmPro+Ep8bPyTN+BCee2ZkiX2EJ6LG70gld/45dGjePGz2ZTpzMLDt4KHBxFyQ+SSu8MiRwjHZ96p2rNDmP2Kr95dZSMphcVBkHlk6xcKswO6nSX+7LRciJ4WCiV+GHG8PPiPRsA2tz/zlkDocMwRC8qClYBJY9DL/x5/2ZbT+D+1419uu7KjXy7d73x1HAWgRB/z0470ZbTPSr+9FensQYt/b2xtFenprc09PRkpYUxhNoynpcLY8FXY46UgYxR9Jak5LhzWD7Fp5tHylnJXjXiG3qHGrY5bDiquR9p19ny+eWZA46ZykSWYu/rzYKXZGVUY9b1YDZ5xICHKGjgg2oGhhYVYWuwfK2/Zfc7CSFeGIKHkGFD1sWtQ09SemsL9wsGRfMj4WXMkP5Vfi4xGVe/cuWfHm2q2Ag2P/X7At+ULQB31oM7hbKVtbWVEJ0qZWRoyYDmiVDiGYBoRnzmSL4MC4gkB8vfJT4eBBebGYIxzJkjSoYLhfYLG+XB7Z1mbowXyY1nZlF8vlGCZZcT4s8GfKrXgFWVshU+bJB4LLGtm8L1s3H5uQST6TabGgO1htbPNa8nYPKbGJghwySZvy3L3cgAnZweY1xJ/vSVYU/iR5tnqFMwebWHOwpYT89vPn31RhtPLwihSFeA8oIlXgPYkyxC3BX+GIV8/HXskLtlzwe1h1bEv7LtxZvP3pF2vXYT/KMknZqrwDRY2FmeI/35u/oq4krNTskLd7ger5N8RXUPHl4j3lK1M36YHELuVrwUrP6teP+NwmkbBSNkGtBB67sgKpXwKmJkyVSmd+9nbDOMH89rFWbeM3062+VqJ0fmmI8M1vJwxpkoPCkO3zK4Ua38Hvf+nuOTHLr8UZ0eTcozrVzWuTqcLIEEY0GtKAREqYFdTBWP+879ekSFVDFkRentU7c4H47/ZYAS8KzbmaS1BfHJn7oiCK1oqmKTueELpFq38KZHOroqOq1B3qn5v7Po8mD+xq/SlHsfNcmuDigdR953ZVpOwcfSn1wOg3/4admg5ak6fBVve00aQiLTt9dNbS3dXA/nSor0wtFjHKN+2otm+orCxTpGTsb2pRItdHRPHA3JAzD4ty/gIDvti/5Lm+3auWNRYtojdt35iTCwbGo/+W509eea6YJOUoV8DTSHbyeDIbZIXc9pVfAMyfPGbl3eUL7vGsf73++zVDazv6rhdtt13KK5odWLiqqZ5e5O7O3lgAsz4WhV11FB8L4IvDAidvfhQ7me0XE50EEqHw+8mQl1Fb1lnyVfmr5NksG3qm1e2h5IcsWxqi+79/aKM+I6dqCnmofkefLCcdDjJifP/+cTAfrNhS1BEjaPLFLKjfUr8gxtckiOko0jHz3ratio2zykRVKPiHp8jbPS/z0Gxvs3Pp247AI4GXpTN/1SWHi6XFc8sMdwVP1z3HH1zxNS0RoWmbJ9ng2YNXecA5XeWz2XoDwS+ZgX/7mxlGNINJqR/suoLv1N1gRyW5+IYr6BzxliF0qfg5CxonajlQqWjjQWmR9QXKft6jadDZAIADSAsxLItK/XxbfGTQpNJtHRvw0cwaG7fzGT5U5f+b6QjKsmZNQaBsLIUyR0wneoFtRRY/bMkE/v9em6kULvo1iLgrs/OnzSGACqr6KRvGSAzeqB4pD1KwDCy2P9zfLh6YL58nUNJxBs/U9Fi6v0OPYFKjLZnXKc4woIhL4CHKpkkf9YnNODseKbGZmhjRCrGSbc5VHhOvuiZBckeKI0UjV1Nq1alk4NBBQmTcJWKM+kGscWMSJFSOE2/WdyQYjyXFi8zHWe3mc++RQDJoEe1EqtCZJMS9ou83xMFKarpy4R/IpzvFyeHxYNsrOCAfA/h1fMpshCEsxAuZGViLoiTMQPFhwlzeHh0Z04CHCotKzzMESJyuqAlqu7pbKcgxd2Y9bfG/gVhgSWQ54lfdf4B46csL2WbJcuBeNed0xL5Y66zFTtVT3RByf4IKwjKqAyviSNhtTpcBCju0ZQyjdGs2PVOlq3YYnxXbhMbad1Re/PkYWTl5BUUlZRVVNY1oVGMa14QmNaVpzWhWc5rXAia948ZZlLqzRywOMHAzLWQMndU2NdAp96TiIK1P99BQWO7aLglS11QWJHUNCmwObOqgQaCxEZyy1E3KHcaDpas7bhdJI6nyHmF64MH+TrCReXQ9E6z1igBcKyLMYWLmQGtoltJzuldMGMp2cPmWkSSKsFUTlj31VSo=') format('woff2'),
|
||||
url('iconfont.woff?t=1568972645985') format('woff'),
|
||||
url('iconfont.ttf?t=1568972645985') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('iconfont.svg?t=1568972645985#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-download:before {
|
||||
content: "\e68d";
|
||||
}
|
||||
|
||||
.icon-zoom-out:before {
|
||||
content: "\e69c";
|
||||
}
|
||||
|
||||
.icon-image:before {
|
||||
content: "\e752";
|
||||
}
|
||||
|
||||
.icon-iconedit:before {
|
||||
content: "\e650";
|
||||
}
|
||||
|
||||
.icon-actualsize:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.icon-copy:before {
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.icon-zoom-in:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-clear:before {
|
||||
content: "\e700";
|
||||
}
|
||||
|
||||
.icon-flow-line:before {
|
||||
content: "\e660";
|
||||
}
|
||||
|
||||
.icon-redo:before {
|
||||
content: "\e716";
|
||||
}
|
||||
|
||||
.icon-undo:before {
|
||||
content: "\e71a";
|
||||
}
|
||||
|
||||
.icon-fit:before {
|
||||
content: "\e7cb";
|
||||
}
|
||||
|
||||
.icon-to-front:before {
|
||||
content: "\e7cc";
|
||||
}
|
||||
|
||||
.icon-to-back:before {
|
||||
content: "\e7cd";
|
||||
}
|
||||
|
||||
.icon-roi-select:before {
|
||||
content: "\e7ce";
|
||||
}
|
||||
|
||||
.icon-json:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.icon-fullscreen:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.icon-broken:before {
|
||||
content: "\e9ad";
|
||||
}
|
||||
|
||||
.icon-curve:before {
|
||||
content: "\e9b0";
|
||||
}
|
||||
|
||||
.icon-paste:before {
|
||||
content: "\e963";
|
||||
}
|
||||
|
||||
.icon-group:before {
|
||||
content: "\e915";
|
||||
}
|
||||
|
||||
.icon-ungroup:before {
|
||||
content: "\e917";
|
||||
}
|
||||
|
||||
.icon-arrow-dropdown:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
BIN
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.eot
Normal file
BIN
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.eot
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -0,0 +1,95 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<!--
|
||||
2013-9-30: Created.
|
||||
-->
|
||||
<svg>
|
||||
<metadata>
|
||||
Created by iconfont
|
||||
</metadata>
|
||||
<defs>
|
||||
|
||||
<font id="iconfont" horiz-adv-x="1024" >
|
||||
<font-face
|
||||
font-family="iconfont"
|
||||
font-weight="500"
|
||||
font-stretch="normal"
|
||||
units-per-em="1024"
|
||||
ascent="896"
|
||||
descent="-128"
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="download" unicode="" d="M135.377782 555.885765l277.111319 0L412.4891 830.342628l207.41905 0 0-274.457886 272.656867 0L513.970376 147.641851 135.377782 555.885765 135.377782 555.885765zM892.268258 145.226848l0-66.952878L136.666124 78.27397l0 66.952878L65.878918 145.226848l0-204.12912L136.666124-58.902272l755.603157 0 65.849754 0 0 204.12912L892.268258 145.226848 892.268258 145.226848zM892.268258 145.226848" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="zoom-out" unicode="" d="M950.075-14.436l-225.921 221.773c123.199 146.698 115.857 366.528-22.075 504.482-145.758 145.751-382.898 145.751-528.647 0-145.752-145.745-145.752-382.87 0-528.615 135.794-135.787 350.91-145.037 497.546-27.789l227.045-222.879c13.304-13.055 34.675-12.864 47.736 0.447l4.758 4.84c13.057 13.306 12.86 34.681-0.442 47.741l0 0zM226.091 235.862c-116.713 116.708-116.713 306.595 0 423.301 116.712 116.713 306.604 116.713 423.323 0 116.68-116.706 116.68-306.593 0-423.289-116.72-116.72-306.611-116.72-423.323-0.012l0 0zM214.441 484.734l446.604 0 0-74.435-446.604 0 0 74.435zM214.441 484.734z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="image" unicode="" d="M896 704 128 704 128 64 896 64 896 704ZM1024 832 1024 832 1024-64 0-64 0 832 1024 832ZM832 128 192 128 192 256 384 576 647.008 256 832 384 832 320ZM640 544A3 3 2520 1 0 832 544 3 3 2520 1 0 640 544z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="iconedit" unicode="" d="M893.46655 451.99051l0-444.912046c0-35.100426-28.426423-63.558571-63.557548-63.558571L130.761648-56.480106c-35.068703 0-63.558571 28.459169-63.558571 63.558571L67.203076 706.225819c0 35.132148 28.489868 63.558571 63.558571 63.558571l444.911022 0 0-61.540611L128.77541 708.243779l0-701.165314 701.133591 0L829.909002 451.99051 893.46655 451.99051zM487.78397 229.659843l-201.912639-64.520479 64.490803 201.909569L487.78397 229.659843zM398.007271 412.085662l134.848221-134.808312 313.198212 313.199235L711.194226 725.274664 398.007271 412.085662zM935.921477 770.251018l-44.936445 44.938492c-24.827455 24.827455-65.049528 24.827455-89.876983 0l-43.530422-43.532469 134.808312-134.849244 43.535539 43.535539C960.752002 705.17079 960.752002 745.42254 935.921477 770.251018z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="actualsize" unicode="" d="M716.8 793.6L716.8 725.33333333 853.33333333 725.33333333 853.33333333 588.8 921.6 588.8 921.6 725.33333333 921.6 793.6ZM853.33333333 42.66666667000004L716.8 42.66666667000004 716.8-25.600000000000023 921.6-25.600000000000023 921.6 42.66666667000004 921.6 179.20000000000005 853.33333333 179.20000000000005ZM170.66666667 179.20000000000005L102.4 179.20000000000005 102.4 42.66666667000004 102.4-25.600000000000023 307.2-25.600000000000023 307.2 42.66666667000004 170.66666667 42.66666667000004ZM170.66666667 725.33333333L307.2 725.33333333 307.2 793.6 102.4 793.6 102.4 725.33333333 102.4 588.8 170.66666667 588.8ZM238.93333333 589.0047999999999l0-410.0096C238.93333333 141.85813333 269.38026667 110.93333332999998 306.9952 110.93333332999998l410.0096 0C754.14186667 110.93333332999998 785.06666667 141.38026666999997 785.06666667 178.99519999999995L785.06666667 589.0047999999999C785.06666667 626.14186667 754.61973333 657.06666667 717.0048 657.06666667L306.9952 657.06666667C269.85813333 657.06666667 238.93333333 626.6197333299999 238.93333333 589.0047999999999zM307.2 588.8l409.6 0 0-409.6L307.2 179.20000000000005 307.2 588.8z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="copy" unicode="" d="M704 256h256v-355.968c0-15.424-12.608-28.032-28.032-28.032h-455.936c-15.424 0-28.032 12.608-28.032 28.032v583.936c0 15.424 12.608 28.032 31.168 28.032h224.832v-256zM768 506.624v-186.624h192l-182.464 186.624h-9.536zM448 826.624v-122.624h128l-118.464 122.624h-9.536zM384 576h192v64h-192v192h-288.832c-18.56 0-31.168-12.608-31.168-28.032v-644.8c0-15.424 12.608-28.032 28.032-28.032h291.968v444.864z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="zoom-in" unicode="" d="M968.842667-12.501333L726.698667 229.642667A382.293333 382.293333 0 0 1 810.666667 469.333333C810.666667 681.408 638.752 853.333333 426.666667 853.333333 214.592 853.333333 42.666667 681.408 42.666667 469.333333s171.925333-384 384-384c90.666667 0 173.994667 31.413333 239.690666 83.978667l242.144-242.144a42.666667 42.666667 0 0 1 60.341334 60.330667zM426.666667 170.666667c-164.949333 0-298.666667 133.717333-298.666667 298.666666s133.717333 298.666667 298.666667 298.666667c164.96 0 298.666667-133.717333 298.666666-298.666667S591.626667 170.666667 426.666667 170.666667z m170.666666 298.666666a42.666667 42.666667 0 0 0-42.666666-42.666666h-85.333334v-85.333334a42.666667 42.666667 0 0 0-85.333333 0v85.333334h-85.333333a42.666667 42.666667 0 0 0 0 85.333333h85.333333v85.333333a42.666667 42.666667 0 0 0 85.333333 0v-85.333333h85.333334a42.666667 42.666667 0 0 0 42.666666-42.666667z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="clear" unicode="" d="M791.04 583.68H768V0h-76.8V583.68h-128V0h-76.8V583.68h-128V0h-76.8V583.68H128V-25.6c0-56.32 46.08-102.4 104.96-102.4h558.08c58.88 0 104.96 46.08 104.96 102.4V583.68c0 5.12-46.08 0-104.96 0M947.2 768h-230.4V829.44C716.8 867.84 652.8 896 614.4 896h-204.8c-38.4 0-102.4-28.16-102.4-66.56V768H76.8c-28.16 0-51.2-23.04-51.2-51.2s23.04-51.2 51.2-51.2h870.4c28.16 0 51.2 23.04 51.2 51.2s-23.04 51.2-51.2 51.2M614.4 768h-204.8V793.6h204.8v-25.6m0 0z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="flow-line" unicode="" d="M563.2 188.2112V579.7888A122.624 122.624 0 0 1 634.88 691.2a122.88 122.88 0 1 1-245.76 0c0-49.5104 29.4912-91.9552 71.68-111.4112v-391.6288A122.5216 122.5216 0 0 1 389.12 76.8a122.88 122.88 0 1 1 245.76 0c0 49.5104-29.44 91.9552-71.68 111.4112zM512 762.112a70.8608 70.8608 0 1 0 0-141.7216 70.8608 70.8608 0 0 0 0 141.7216z m0-756.224a70.912 70.912 0 1 0 0 141.824 70.912 70.912 0 0 0 0-141.824z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="redo" unicode="" d="M999.551 549.05c13.299 0 24-10.8 24.1-24v-358c0-17.7-14.301-32-32-32h-358.1c-6.4 0-12.5 2.5-17 7-9.4 9.3-9.4 24.5 0 33.9l127 127c-82.201 101.8-208 167-349.001 167-170.3 0-318.4-95-394.2-235 45.7 227 246.2 398 486.7 398 160.101 0 302.399-75.7 393.2-193.3l102.301 102.4c4.5 4.5 10.599 7 17 7z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="undo" unicode="" d="M41.353 542.029a23.998 23.998 0 0 1-16.97 7.029c-13.255 0-24-10.744-24-24V167c0-17.673 14.327-32 32-32h358.06a24 24 0 0 1 16.969 7.029c9.373 9.373 9.373 24.568 0 33.941L280.418 302.965C362.539 404.832 488.35 470 629.383 470c170.332 0 318.462-95.059 394.234-235.02C977.931 462.016 777.375 633 536.883 633c-160.045 0-302.403-75.725-393.2-193.3L41.353 542.029z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="fit" unicode="" d="M640 608V800c0 19.2 12.8 32 32 32s32-12.8 32-32v-160h160c19.2 0 32-12.8 32-32s-12.8-32-32-32h-192c-6.4 0-12.8 0-19.2 6.4h-6.4c0 12.8-6.4 19.2-6.4 25.6zM288 832c-19.2 0-32-12.8-32-32v-160H96c-19.2 0-32-12.8-32-32s12.8-32 32-32h192c6.4 0 12.8 0 19.2 6.4h6.4c6.4 6.4 6.4 12.8 6.4 19.2v192C320 819.2 307.2 832 288 832z m576-576h-192c-6.4 0-12.8 0-19.2-6.4h-6.4c-6.4-6.4-6.4-12.8-6.4-19.2v-192c0-19.2 12.8-32 32-32s32 12.8 32 32V192h160c19.2 0 32 12.8 32 32s-12.8 32-32 32z m-550.4-12.8c-6.4 6.4-6.4 6.4 0 0-12.8 6.4-19.2 12.8-25.6 12.8H96c-19.2 0-32-12.8-32-32s12.8-32 32-32h160v-160c0-19.2 12.8-32 32-32s32 12.8 32 32v192c0 6.4-6.4 12.8-6.4 19.2zM480 544c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="to-front" unicode="" d="M768 300.8c-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2l-102.4 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6-6.4 12.8-12.8 19.2-25.6 19.2L358.4 697.6c-6.4 0-19.2 0-25.6-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l115.2-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l390.4-96c6.4 0 19.2 0 25.6 6.4l307.2 268.8c25.6 6.4 25.6 19.2 25.6 25.6zM217.6 377.6l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8L416 224 96 300.8l121.6 76.8z m204.8-320l-320 76.8 108.8 76.8L416 160c6.4 0 19.2 0 25.6 6.4L576 288l83.2-12.8-236.8-217.6z m473.6 448l140.8-179.2h-96c-6.4-115.2-76.8-211.2-179.2-262.4 51.2 70.4 83.2 153.6 83.2 249.6v12.8h-96l147.2 179.2z" horiz-adv-x="1036" />
|
||||
|
||||
|
||||
<glyph glyph-name="to-back" unicode="" d="M729.6 320l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2l-96 12.8 115.2 102.4c6.4 6.4 12.8 19.2 6.4 25.6 0 12.8-12.8 19.2-25.6 19.2L364.8 697.6c-6.4 0-12.8 0-19.2-6.4l-320-230.4c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6s12.8-19.2 19.2-19.2l108.8-25.6-121.6-89.6c-6.4-6.4-12.8-19.2-12.8-25.6 0-12.8 12.8-19.2 19.2-19.2l384-89.6c6.4 0 19.2 0 25.6 6.4l300.8 268.8c6.4 6.4 12.8 19.2 6.4 25.6 12.8 6.4 6.4 12.8-6.4 12.8zM364.8 646.4l300.8-44.8L416 384l-313.6 76.8 262.4 185.6z m-147.2-268.8l204.8-51.2c6.4 0 19.2 0 25.6 6.4l134.4 121.6 83.2-12.8L416 224l-313.6 76.8 115.2 76.8z m723.2-134.4h96L896 64l-140.8 179.2h96V256c0 96-32 179.2-83.2 249.6 102.4-51.2 172.8-153.6 172.8-262.4z" horiz-adv-x="1036" />
|
||||
|
||||
|
||||
<glyph glyph-name="roi-select" unicode="" d="M64 704h64v-64H64V704z m0-128h64v-64H64v64z m0-128h64v-64H64v64z m0-128h64v-64H64v64z m0-128h64v-64H64v64zM64 768V832h64v-64H64z m128 0V832h64v-64H192z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 0V832h64v-64h-64z m128 64h64v-64h-64V832z m0-128h64v-64h-64V704z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64z m0-128h64v-64h-64v64zM64 0v64h64v-64H64z m128 0v64h64v-64H192z m128 0v64h64v-64h-64z m128 0v64h64v-64h-64z m384 64v128h64v-128h128v-64h-128v-128h-64v128h-128v64h128z m-256-64v64h64v-64h-64z m-128 576v-64h256v64h-256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64h-256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64zM256 320v-64h256v64H256z m0 64h256c38.4 0 64-25.6 64-64v-64c0-38.4-25.6-64-64-64H256c-38.4 0-64 25.6-64 64v64c0 38.4 25.6 64 64 64z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="json" unicode="" d="M921.6 716.8L798.72 844.8c-30.72 30.72-76.8 51.2-117.76 51.2H256c-40.96 0-71.68-35.84-71.68-71.68v-353.28h56.32V824.32c0 10.24 5.12 15.36 15.36 15.36h435.2v-235.52h225.28v-660.48c0-10.24-5.12-15.36-15.36-15.36H256c-10.24 0-15.36 5.12-15.36 15.36v107.52H184.32v-102.4c0-40.96 30.72-76.8 71.68-76.8h645.12c40.96 0 71.68 35.84 71.68 71.68V568.32c-5.12 51.2-20.48 102.4-51.2 148.48z m-174.08-61.44V803.84c5.12 0 5.12-5.12 10.24-10.24l128-128 10.24-10.24h-148.48zM798.72 455.68H92.16c-20.48 0-35.84-20.48-35.84-40.96v-276.48c0-20.48 15.36-40.96 40.96-40.96h701.44c20.48 0 40.96 15.36 40.96 40.96V414.72c-5.12 20.48-20.48 40.96-40.96 40.96zM225.28 368.64v-133.12c0-15.36-5.12-30.72-15.36-40.96-10.24-10.24-25.6-15.36-40.96-15.36-10.24 0-20.48 0-30.72 5.12v35.84h20.48c5.12 0 10.24 0 15.36 5.12 5.12 0 5.12 5.12 5.12 5.12v143.36h46.08z m168.96-40.96l-35.84-10.24c-5.12 15.36-15.36 25.6-30.72 20.48-15.36 0-25.6-5.12-25.6-15.36 0-5.12 0-10.24 5.12-10.24 5.12-5.12 15.36-5.12 20.48-10.24 15.36 0 30.72-5.12 40.96-10.24 10.24-5.12 15.36-10.24 20.48-20.48 5.12-10.24 10.24-20.48 10.24-30.72 0-15.36-5.12-30.72-20.48-46.08-15.36-10.24-35.84-15.36-56.32-15.36-20.48 0-35.84 5.12-51.2 15.36-15.36 5.12-25.6 20.48-25.6 35.84l40.96 10.24c5.12-15.36 20.48-30.72 40.96-25.6 10.24 0 15.36 0 20.48 5.12 5.12 5.12 5.12 10.24 5.12 15.36 0 5.12 0 10.24-5.12 15.36-10.24 5.12-15.36 5.12-25.6 10.24-20.48 5.12-35.84 10.24-51.2 20.48-10.24 5.12-15.36 15.36-15.36 30.72s5.12 30.72 20.48 40.96c15.36 10.24 30.72 20.48 51.2 15.36 25.6 5.12 56.32-10.24 66.56-40.96z m102.4-148.48c-25.6 0-46.08 10.24-56.32 30.72-15.36 20.48-20.48 46.08-20.48 71.68 0 25.6 5.12 51.2 20.48 66.56 15.36 20.48 35.84 30.72 61.44 25.6 25.6 0 46.08-10.24 61.44-30.72 15.36-20.48 20.48-40.96 20.48-66.56s-5.12-51.2-20.48-71.68c-20.48-15.36-40.96-25.6-66.56-25.6z m0 158.72c-20.48 0-30.72-20.48-30.72-61.44s10.24-61.44 35.84-61.44c20.48 0 30.72 20.48 30.72 61.44s-10.24 61.44-35.84 61.44z m250.88 30.72V179.2h-35.84l-71.68 128V179.2h-30.72v189.44h46.08l66.56-112.64v107.52l25.6 5.12z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="fullscreen" unicode="" d="M704 480l188.2 184.4 99.8-99.8V864H704l88.4-96-180.4-192 92-96z m-96-288l184.4-188.2-100-99.8H992V192l-96-88.4-192 180.4-96-92z m-288 96l-188.2-184.4-99.8 100V-96h288l-88.4 96 180.4 192-92 96z m96 288l-184.4 188.2 100 99.8H32v-288l96 88.4 192-180.4 96 92z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="broken" unicode="" d="M880.71104 160a144.096 144.096 0 0 1-134.08-95.008L746.31104 64h-185.6V800H279.75104c-20.352 56.416-73.44 96-135.776 96A144 144 0 1 1 279.43104 703.008L279.75104 704h184.96v-732.8h279.68c19.424-58.08 73.344-99.2 136.864-99.2a144 144 0 0 1 0 288h-0.576 0.032zM144.71104 694.4a57.6 57.6 0 1 0 57.6 57.6 57.6 57.6 0 0 0-57.6-57.6z m736-736a57.6 57.6 0 1 0 57.6 57.6 57.6 57.6 0 0 0-57.6-57.6z" horiz-adv-x="1025" />
|
||||
|
||||
|
||||
<glyph glyph-name="curve" unicode="" d="M927.488273 152.021587V320.758959c0 264.73871-214.628824 479.367534-479.367534 479.367534H279.383367c-20.325183 56.341664-73.343233 95.873507-135.597097 95.873507A143.81026 143.81026 0 1 1 279.063788 703.262293L279.383367 704.252986H448.120739c211.784577 0 383.494028-171.709451 383.494027-383.494027v-169.376529c-56.341664-20.325183-95.873507-73.343233-95.873506-135.597097a143.81026 143.81026 0 1 1 192.737706 135.277518L927.488273 151.38243zM144.5213 694.665636a57.524104 57.524104 0 1 0 57.524104 57.524104 57.524104 57.524104 0 0 0-57.524104-57.524104z m735.03022-735.03022a57.524104 57.524104 0 1 0 57.524104 57.524104 57.524104 57.524104 0 0 0-57.524104-57.524104z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="paste" unicode="" d="M320 528c0 61.758 50.244 112 112 112h272V784c0 26.51-21.49 48-48 48h-161.22C472.612 870.22 431.274 896 384 896s-88.612-25.78-110.78-64H112C85.49 832 64 810.51 64 784v-672c0-26.51 21.49-48 48-48h208V528z m64 288c26.51 0 48-21.49 48-48s-21.49-48-48-48-48 21.49-48 48 21.49 48 48 48z m368-496h208v-400c0-26.51-21.49-48-48-48H432c-26.51 0-48 21.49-48 48V528c0 26.51 21.49 48 48 48h272v-208c0-26.4 21.6-48 48-48z m208 76.118V384h-192v192h12.118a48 48 0 0 0 33.94-14.058l131.882-131.882a48.004 48.004 0 0 0 14.06-33.942z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="group" unicode="" d="M912 75.9V692.1c28 9.9 48 36.6 48 67.9 0 39.8-32.2 72-72 72-31.3 0-58-20-67.9-48H203.9C194 812 167.3 832 136 832c-39.8 0-72-32.2-72-72 0-31.3 20-58 48-67.9v-616.2C84 66 64 39.3 64 8c0-39.8 32.2-72 72-72 31.3 0 58 20 67.9 48h616.2c9.9-28 36.6-48 67.9-48 39.8 0 72 32.2 72 72 0 31.3-20 58-48 67.9zM888 784c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM136-16c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z m0 752c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z m704-680H184V712h656v-656z m48-72c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM288 422h448c8.8 0 16 7.2 16 16V614c0 8.8-7.2 16-16 16H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16z m56 136h336v-64H344v64zM288 138h448c8.8 0 16 7.2 16 16V330c0 8.8-7.2 16-16 16H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16z m56 136h336v-64H344v64z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="ungroup" unicode="" d="M736 346H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16h448c8.8 0 16 7.2 16 16V330c0 8.8-7.2 16-16 16z m-56-136H344v64h336v-64zM888 80c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM736 630H288c-8.8 0-16-7.2-16-16v-176c0-8.8 7.2-16 16-16h448c8.8 0 16 7.2 16 16V614c0 8.8-7.2 16-16 16z m-56-136H344v64h336v-64zM888 688c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72z m0 96c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM136 832c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM136 80c-39.8 0-72-32.2-72-72s32.2-72 72-72 72 32.2 72 72-32.2 72-72 72z m0-96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="arrow-dropdown" unicode="" d="M512 107.51958124999999l-377.06160075 377.06160074L222.88801761 572.5308003600001 512 283.41881802 801.11198239 572.5308003600001 889.06160075 484.58118199z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
BIN
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.ttf
Normal file
BIN
ebts-ui/src/views/tool/top/packages/assets/iconfont/iconfont.ttf
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
ebts-ui/src/views/tool/top/packages/assets/images/client.png
Normal file
BIN
ebts-ui/src/views/tool/top/packages/assets/images/client.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
ebts-ui/src/views/tool/top/packages/assets/images/database.png
Normal file
BIN
ebts-ui/src/views/tool/top/packages/assets/images/database.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
ebts-ui/src/views/tool/top/packages/assets/images/firewall.png
Normal file
BIN
ebts-ui/src/views/tool/top/packages/assets/images/firewall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
ebts-ui/src/views/tool/top/packages/assets/images/server.png
Normal file
BIN
ebts-ui/src/views/tool/top/packages/assets/images/server.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
ebts-ui/src/views/tool/top/packages/assets/logo.png
Normal file
BIN
ebts-ui/src/views/tool/top/packages/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
93
ebts-ui/src/views/tool/top/packages/elements/button.vue
Normal file
93
ebts-ui/src/views/tool/top/packages/elements/button.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<button
|
||||
class="top-button"
|
||||
@click="handleClick"
|
||||
:disabled="buttonDisabled"
|
||||
:class="[
|
||||
type ? 'top-button--' + type : '',
|
||||
buttonSize ? 'top-button--' + buttonSize : '',
|
||||
{
|
||||
'is-disabled': buttonDisabled,
|
||||
'is-plain': plain
|
||||
}
|
||||
]"
|
||||
>
|
||||
<span><slot></slot></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TopButton',
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
buttonSize() {
|
||||
return this.size
|
||||
},
|
||||
buttonDisabled() {
|
||||
return this.disabled
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(evt) {
|
||||
this.$emit('click', evt)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-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;
|
||||
}
|
||||
|
||||
.top-button:focus, .top-button:hover {
|
||||
color: #409eff;
|
||||
border-color: #c6e2ff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.top-button--mini, .top-button--mini.is-round {
|
||||
padding: 7px 15px;
|
||||
}
|
||||
|
||||
.top-button--mini, .top-button--small {
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
79
ebts-ui/src/views/tool/top/packages/elements/checkbox.vue
Normal file
79
ebts-ui/src/views/tool/top/packages/elements/checkbox.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<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>
|
||||
export default {
|
||||
name: 'CcCheckbox',
|
||||
data() {
|
||||
return {
|
||||
checkVal: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange() {
|
||||
this.$emit('change', this.checkVal)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
228
ebts-ui/src/views/tool/top/packages/elements/dropdown.vue
Normal file
228
ebts-ui/src/views/tool/top/packages/elements/dropdown.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="graph-op">
|
||||
<i v-for="edgeItem in dropdownItems " :class="edgeItem.class" v-on:title="edgeItem.label" style="width: 120px;"
|
||||
@click="onItemClick(edgeItem.guid, $event)"> {{edgeItem.label}}</i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
export default {
|
||||
name: 'CCDropdownList',
|
||||
props: {
|
||||
dropdownItems: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [
|
||||
]
|
||||
}
|
||||
},
|
||||
defaultIndex: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeIndex: this.defaultIndex,
|
||||
timeout: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeIndex() {
|
||||
this.$emit('change', this.activeIndex)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// $('.iconfonts')[0].style.backgroundColor = '#ebeef2'
|
||||
},
|
||||
methods: {
|
||||
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 !== this.activeIndex) {
|
||||
this.activeIndex = 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;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.cc-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
z-index: 2;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: all .2s ease-in;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
|
||||
span a:after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border-bottom: solid 6px #000;
|
||||
border-left: solid 4px transparent;
|
||||
border-right: solid 4px transparent;
|
||||
vertical-align: 3px;
|
||||
margin-left: 10px;
|
||||
-webkit-transition: all .2s ease-in;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-dropdown-menu {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
z-index: 1;
|
||||
|
||||
/* 一个很重要的三角形*/
|
||||
li:first-child:before {
|
||||
display: block; /* 独占一行 */
|
||||
content: " ";
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
margin: 0 auto; /* 居中 */
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /* 配合整体一样的投影 */
|
||||
background-color: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg); /* 一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来 */
|
||||
position: relative;
|
||||
top: -5px; /* 露出上半部分*/
|
||||
z-index: 1; /* 隐藏下半部分 */
|
||||
-webkit-transition: all .2s ease-in;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
|
||||
li a {
|
||||
color: #888;
|
||||
line-height: 46px;
|
||||
border-bottom: solid 1px #eee;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
background-color: #fff; /* 要有背景色才能盖住呀*/
|
||||
position: relative;
|
||||
z-index: 2; /* 这里很重要 要挡住三角形的下半部分*/
|
||||
-webkit-transition: all .2s ease-in;
|
||||
transition: all .2s ease-in;
|
||||
}
|
||||
|
||||
/* 以下两块：控制第一个和最后一个li要圆角，因为最外边的div没有overflow 也不可以overflow*/
|
||||
li:first-child a {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
li:last-child a {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/*hover事件给了li，先改变三角 再改变a*/
|
||||
li:hover:before {
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
li:hover a {
|
||||
background-color: #ecf5ff;
|
||||
color: #66b1ff;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-dropdown:hover span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cc-dropdown:hover span a:after {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
17
ebts-ui/src/views/tool/top/packages/elements/index.js
Normal file
17
ebts-ui/src/views/tool/top/packages/elements/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/11/14
|
||||
* @description: ClayTop内部的通用组件
|
||||
*/
|
||||
|
||||
import Checkbox from './checkbox'
|
||||
import Button from './button'
|
||||
import Dropdown from './dropdown'
|
||||
import Loading from './loading'
|
||||
|
||||
export {
|
||||
Checkbox,
|
||||
Button,
|
||||
Dropdown,
|
||||
Loading
|
||||
}
|
||||
92
ebts-ui/src/views/tool/top/packages/elements/loading.vue
Normal file
92
ebts-ui/src/views/tool/top/packages/elements/loading.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<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>
|
||||
export default {
|
||||
name: 'CcLoading',
|
||||
props: {
|
||||
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>
|
||||
@@ -0,0 +1,249 @@
|
||||
import utils from '../utils'
|
||||
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2021/5/14 23:20
|
||||
* @email: clay@hchyun.com
|
||||
* @description: node
|
||||
*/
|
||||
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: 'dice-er-node',
|
||||
options: {
|
||||
getDefaultCfg() {
|
||||
return {
|
||||
multiple: true,
|
||||
start:0,
|
||||
};
|
||||
},
|
||||
getEvents() {
|
||||
return {
|
||||
itemHeight: 50,
|
||||
wheel: "scroll",
|
||||
"node:click": "onNodeClick",
|
||||
"edge:click": "onEdgeClick",
|
||||
"node:contextmenu": "onNodeRightClick",
|
||||
"edge:contextmenu": "onEdgeRightClick",
|
||||
"canvas:click": "onCanvasClick",
|
||||
};
|
||||
},
|
||||
scroll(e) {
|
||||
e.preventDefault()
|
||||
const {
|
||||
graph
|
||||
} = this;
|
||||
const nodes = graph.getNodes().filter((n) => {
|
||||
const bbox = n.getBBox();
|
||||
|
||||
return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox);
|
||||
});
|
||||
if (nodes) {
|
||||
nodes.forEach((node) => {
|
||||
const model = node.getModel();
|
||||
if (model.columns.length < 9 ) {
|
||||
return;
|
||||
}
|
||||
const idx = model.startIndex || 0;
|
||||
this.start=idx
|
||||
let startX = model.startX || 0.5;
|
||||
let startIndex = idx + e.deltaY * 0.02;
|
||||
if ((model.columns.length-idx)<10 && startIndex > idx){
|
||||
return;
|
||||
}
|
||||
startX -= e.deltaX;
|
||||
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) {
|
||||
this.shrinkage(event)
|
||||
vm.currentFocus = "node";
|
||||
vm.rightMenuShow = false;
|
||||
this.updateVmData(event);
|
||||
},
|
||||
/**
|
||||
* 点击连线
|
||||
* @param event
|
||||
*/
|
||||
onEdgeClick(event) {
|
||||
let clickEdge = event.item;
|
||||
clickEdge.setState("selected", !clickEdge.hasState("selected"));
|
||||
vm.currentFocus = "edge";
|
||||
|
||||
this.updateVmData(event);
|
||||
},
|
||||
onNodeRightClick(event) {
|
||||
let graph = vm.graph;
|
||||
let clickNode = event.item;
|
||||
let clickNodeModel = clickNode.getModel();
|
||||
let selectedNodes = graph.findAllByState("node", "selected");
|
||||
let selectedNodeIds = selectedNodes.map(item => {
|
||||
return item.getModel().id;
|
||||
});
|
||||
vm.selectedNode = clickNode;
|
||||
// 如果当前点击节点是之前选中的某个节点，就进行下面的处理
|
||||
if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) {
|
||||
vm.rightMenuShow = true;
|
||||
let rightMenu = vm.$refs.rightMenu;
|
||||
rightMenu.style.left = event.clientX + "px";
|
||||
rightMenu.style.top = event.clientY + "px";
|
||||
} else {
|
||||
// 隐藏右键菜单
|
||||
vm.rightMenuShow = false;
|
||||
// 先取消所有节点的选中状态
|
||||
selectedNodes.forEach(node => {
|
||||
node.setState("selected", false);
|
||||
});
|
||||
// 再添加该节点的选中状态
|
||||
clickNode.setState("selected", true);
|
||||
vm.currentFocus = "node";
|
||||
this.updateVmData(event);
|
||||
}
|
||||
graph.paint();
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param event
|
||||
*/
|
||||
onEdgeRightClick(event) {
|
||||
let graph = vm.graph;
|
||||
let clickEdge = event.item;
|
||||
let clickEdgeModel = 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.currentFocus = "edge";
|
||||
this.updateVmData(event);
|
||||
}
|
||||
let point = { x: event.x, y: event.y };
|
||||
},
|
||||
onCanvasClick() {
|
||||
vm.currentFocus = "canvas";
|
||||
vm.rightMenuShow = false;
|
||||
},
|
||||
updateVmData(event) {
|
||||
if (event.item._cfg.type === "node") {
|
||||
let clickNode = event.item;
|
||||
if (clickNode.hasState("selected")) {
|
||||
let clickNodeModel = clickNode.getModel();
|
||||
vm.selectedNode = clickNode;
|
||||
let nodeAppConfig = { ...vm.nodeAppConfig };
|
||||
Object.keys(nodeAppConfig).forEach(function(key) {
|
||||
nodeAppConfig[key] = "";
|
||||
});
|
||||
vm.selectedNodeParams = {
|
||||
label: clickNodeModel.label || "",
|
||||
columns:clickNodeModel.columns,
|
||||
appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig }
|
||||
};
|
||||
}
|
||||
} else if (event.item._cfg.type === "edge") {
|
||||
// 更新vm的data: selectedEdge 和 selectedEdgeParams
|
||||
let clickEdge = event.item;
|
||||
if (clickEdge.hasState("selected")) {
|
||||
let clickEdgeModel = clickEdge.getModel();
|
||||
vm.selectedEdge = clickEdge;
|
||||
let edgeAppConfig = { ...vm.edgeAppConfig };
|
||||
Object.keys(edgeAppConfig).forEach(function(key) {
|
||||
edgeAppConfig[key] = "";
|
||||
});
|
||||
vm.selectedEdgeParams = {
|
||||
label: clickEdgeModel.label || "",
|
||||
relationalItem: clickEdgeModel.relationalItem,
|
||||
sourceColumn:clickEdgeModel.sourceColumn,
|
||||
targetColumn:clickEdgeModel.targetColumn,
|
||||
appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig }
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
shrinkage(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],
|
||||
height:44,
|
||||
});
|
||||
setTimeout(() => graph.layout(), 100);
|
||||
} else if (shape.get("name") === "expand") {
|
||||
let updateGraph = graph.updateItem(item, {
|
||||
collapsed: false,
|
||||
size: [300, 500],
|
||||
height:316,
|
||||
});
|
||||
// utils.anchor.update({height:100,}, graph)
|
||||
setTimeout(() => graph.layout(), 100);
|
||||
}else {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const model = item.getModel();
|
||||
// console.log(JSON.stringify(model));
|
||||
// console.log(model.style.default.fill = '#4eb922');
|
||||
// console.log(model.style.selected.shadowColor = '#4eb922');
|
||||
}
|
||||
},
|
||||
moves(e) {
|
||||
const name = e.shape.get("name");
|
||||
const item = e.item;
|
||||
if (!name.startsWith("marker")){
|
||||
if (name && name.startsWith("item")) {
|
||||
this.graph.updateItem(item, {
|
||||
selectedIndex: Number(name.split("-")[1]),
|
||||
});
|
||||
} else {
|
||||
this.graph.updateItem(item, {
|
||||
selectedIndex: NaN,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/16
|
||||
* @description: edit mode: 通过拖拽节点上的锚点添加连线
|
||||
*/
|
||||
import utils from "../utils";
|
||||
|
||||
// 用来获取调用此js的vue组件实例（this）
|
||||
let vm = null;
|
||||
|
||||
const sendThis = (_this) => {
|
||||
vm = _this;
|
||||
};
|
||||
|
||||
import G6 from "@antv/g6";
|
||||
import theme from "../theme";
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
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.graph;
|
||||
self.historyData = JSON.stringify(graph.save());
|
||||
// ************** 暂存【连线】前的数据状态 end **************
|
||||
|
||||
let sourceAnchor = self.evtInfo.node.getAnchorPoints();
|
||||
let sourceNodeModel = 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.relationalMap.map(item => {
|
||||
if (item.mainId === sourceNodeModel.tableId) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
//item.columnName+':'+item.columnComment
|
||||
let columns = []
|
||||
for (let i = 0; i < sourceNodeModel.columns.length; i++) {
|
||||
let column = {
|
||||
columnName:sourceNodeModel.columns[i].columnName,
|
||||
columnComment:sourceNodeModel.columns[i].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 = targetNode.getModel();
|
||||
let targetAnchor = null;
|
||||
// 锚点数据
|
||||
let anchorPoints = targetNode.getAnchorPoints();
|
||||
// 处理线条目标点
|
||||
let relational = self.drawEdge.currentLine.getModel().relational
|
||||
let starts = false;
|
||||
let relationalItem = null;
|
||||
relational.map(item => {
|
||||
if (item){
|
||||
if (item.childId === targetNodeModel.tableId) {
|
||||
starts = true
|
||||
relationalItem = item
|
||||
}
|
||||
}
|
||||
})
|
||||
if (starts) {
|
||||
if (anchorPoints && anchorPoints.length) {
|
||||
// 获取距离指定坐标最近的一个锚点
|
||||
targetAnchor = targetNode.getLinkPoint({
|
||||
x: event.x,
|
||||
y: event.y
|
||||
});
|
||||
}
|
||||
let columns = []
|
||||
for (let i = 0; i < targetNodeModel.columns.length; i++) {
|
||||
let column = {
|
||||
columnName:targetNodeModel.columns[i].columnName,
|
||||
columnComment:targetNodeModel.columns[i].columnComment
|
||||
}
|
||||
columns.push(column)
|
||||
}
|
||||
self.graph.updateItem(self.drawEdge.currentLine, {
|
||||
target: targetNodeModel.id,
|
||||
relationalItem:relationalItem,
|
||||
targetAnchor: targetAnchor ? targetAnchor.anchorIndex : "",
|
||||
targetColumn: columns,
|
||||
});
|
||||
|
||||
// ************** 记录historyData的逻辑 start **************
|
||||
if (this.historyData) {
|
||||
let graph = this.graph;
|
||||
// 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
|
||||
// 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
|
||||
if (vm.undoCount > 0) {
|
||||
vm.historyIndex = vm.historyIndex - vm.undoCount; // 此时的historyIndex应当更新为【撤销】后所在的索引位置
|
||||
for (let i = 1; i <= vm.undoCount; i++) {
|
||||
let key = `graph_history_${vm.historyIndex + i}`;
|
||||
vm.removeHistoryData(key);
|
||||
}
|
||||
vm.undoCount = 0;
|
||||
} else {
|
||||
// 正常顺序执行的情况，记录拖拽前的数据状态
|
||||
let key = `graph_history_${vm.historyIndex}`;
|
||||
vm.addHistoryData(key, this.historyData);
|
||||
}
|
||||
// 记录拖拽后的数据状态
|
||||
vm.historyIndex += 1;
|
||||
let key = `graph_history_${vm.historyIndex}`;
|
||||
let currentData = JSON.stringify(graph.save());
|
||||
vm.addHistoryData(key, currentData);
|
||||
}
|
||||
}else {
|
||||
self.graph.removeItem(self.drawEdge.currentLine);
|
||||
vm.msgError("两表之间无关联关系")
|
||||
}
|
||||
// ************** 记录historyData的逻辑 end **************
|
||||
}
|
||||
}
|
||||
self.drawEdge.currentLine = null;
|
||||
self.drawEdge.isMoving = false;
|
||||
self.evtInfo = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/16
|
||||
* @description: edit mode: 鼠标拖动节点的交互(记录拖拽前后的数据，用于【撤销】和【重做】)
|
||||
*/
|
||||
|
||||
// 用来获取调用此js的vue组件实例（this）
|
||||
let vm = 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.graph
|
||||
this.historyData = JSON.stringify(graph.save())
|
||||
},
|
||||
onNodeDragend() {
|
||||
if (this.historyData) {
|
||||
let graph = this.graph
|
||||
// 如果当前点过【撤销】了，拖拽节点后没有【重做】功能
|
||||
// 重置undoCount，拖拽后的数据给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
|
||||
if (vm.undoCount > 0) {
|
||||
vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
|
||||
for (let i = 1; i <= vm.undoCount; i++) {
|
||||
let key = `graph_history_${vm.historyIndex + i}`
|
||||
vm.removeHistoryData(key)
|
||||
}
|
||||
vm.undoCount = 0
|
||||
} else {
|
||||
// 正常顺序执行的情况，记录拖拽前的数据状态
|
||||
let key = `graph_history_${vm.historyIndex}`
|
||||
vm.addHistoryData(key, this.historyData)
|
||||
}
|
||||
// 记录拖拽后的数据状态
|
||||
vm.historyIndex += 1
|
||||
let key = `graph_history_${vm.historyIndex}`
|
||||
let currentData = JSON.stringify(graph.save())
|
||||
vm.addHistoryData(key, currentData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/16
|
||||
* @description: edit mode: 悬浮交互
|
||||
*/
|
||||
// 用来获取调用此js的vue组件实例（this）
|
||||
let vm = null;
|
||||
var hourItem = null;
|
||||
const sendThis = (_this) => {
|
||||
vm = _this;
|
||||
};
|
||||
export default {
|
||||
sendThis, // 暴露函数
|
||||
name: "hover-event-edit",
|
||||
options: {
|
||||
getEvents() {
|
||||
return {
|
||||
"node:mouseover": "onNodeHover",
|
||||
"node:mouseout": "onNodeOut",
|
||||
"node:mouseleave":"onNodeLeave",
|
||||
};
|
||||
},
|
||||
onNodeHover(event) {
|
||||
let graph = vm.graph;
|
||||
let hoverNode = event.item;
|
||||
|
||||
const name = event.shape.get("name");
|
||||
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){
|
||||
try {
|
||||
hourItem.setState("hover", false)
|
||||
}catch (e){
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onNodeOut(event) {
|
||||
const name = event.shape.get("name");
|
||||
let hoverNode = event.item;
|
||||
if (name && name.startsWith("marker")) {
|
||||
hoverNode.setState("hover", false);
|
||||
}
|
||||
if (hourItem!=null&&hourItem.destroyed){
|
||||
try {
|
||||
hourItem.setState("hover", false)
|
||||
}catch (e){
|
||||
}
|
||||
}
|
||||
hoverNode.setState("hover", false);
|
||||
},
|
||||
onNodeLeave(event) {
|
||||
if (hourItem!=null){
|
||||
try {
|
||||
hourItem.setState("hover", false)
|
||||
}catch (e){
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @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 diceErNode from './dice-er-node'
|
||||
|
||||
const obj = {
|
||||
dragAddEdge,
|
||||
hoverEventEdit,
|
||||
dragEventEdit,
|
||||
keyupEventEdit,
|
||||
diceErNode,
|
||||
}
|
||||
|
||||
export default {
|
||||
obj,
|
||||
register(G6) {
|
||||
Object.values(obj).map(item => {
|
||||
G6.registerBehavior(item.name, item.options)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* @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'
|
||||
}
|
||||
},
|
||||
onKeyup(event) {
|
||||
let graph = this.graph
|
||||
let selectedNodes = graph.findAllByState('node', 'selected')
|
||||
let selectedEdges = graph.findAllByState('edge', 'selected')
|
||||
if (event.keyCode === 46 && (selectedNodes.length > 0 || selectedEdges.length > 0)) {
|
||||
|
||||
// ************** 记录【删除】前的数据状态 start **************
|
||||
let historyData = JSON.stringify(graph.save())
|
||||
let key = `graph_history_${vm.historyIndex}`
|
||||
vm.addHistoryData(key, historyData)
|
||||
// ************** 记录【删除】前的数据状态 end **************
|
||||
|
||||
// 开始删除
|
||||
for (let i = 0; i < selectedNodes.length; i++) {
|
||||
graph.removeItem(selectedNodes[i])
|
||||
}
|
||||
for (let i = 0; i < selectedEdges.length; i++) {
|
||||
graph.removeItem(selectedEdges[i])
|
||||
}
|
||||
|
||||
// ************** 记录【删除】后的数据状态 start **************
|
||||
// 如果当前点过【撤销】了，拖拽节点后将取消【重做】功能
|
||||
// 重置undoCount，【删除】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
|
||||
if (vm.undoCount > 0) {
|
||||
vm.historyIndex = vm.historyIndex - vm.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
|
||||
for (let i = 1; i <= vm.undoCount; i++) {
|
||||
let key = `graph_history_${vm.historyIndex + i}`
|
||||
vm.removeHistoryData(key)
|
||||
}
|
||||
vm.undoCount = 0
|
||||
}
|
||||
// 记录【删除】后的数据状态
|
||||
vm.historyIndex += 1
|
||||
key = `graph_history_${vm.historyIndex}`
|
||||
let currentData = JSON.stringify(graph.save())
|
||||
vm.addHistoryData(key, currentData)
|
||||
// ************** 记录【删除】后的数据状态 end **************
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/16
|
||||
* @description: 线条的后期设置
|
||||
*/
|
||||
|
||||
export default {
|
||||
type: 'top-cubic',
|
||||
style: {
|
||||
startArrow: false,
|
||||
endArrow: true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/16
|
||||
* @description: 配置
|
||||
*/
|
||||
|
||||
import edge from './edge'
|
||||
|
||||
export default {
|
||||
edge
|
||||
}
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @author: Clay
|
||||
* @data: 2019/07/18
|
||||
* @description: 曲线
|
||||
*/
|
||||
|
||||
import base from './base'
|
||||
export default {
|
||||
name: 'top-cubic',
|
||||
extendName: 'cubic',
|
||||
options: {
|
||||
...base
|
||||
}
|
||||
}
|
||||
160
ebts-ui/src/views/tool/top/packages/topology/src/graph/index.js
Normal file
160
ebts-ui/src/views/tool/top/packages/topology/src/graph/index.js
Normal file
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/05
|
||||
* @description: 图的布局方式/图的初始化
|
||||
*/
|
||||
|
||||
import d3 from '../plugins/d3-installer'
|
||||
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,
|
||||
container: options.container,
|
||||
width: options.width,
|
||||
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
|
||||
@@ -0,0 +1,286 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2021/5/15 0:16
|
||||
* @email: clay@hchyun.com
|
||||
* @description: node
|
||||
*/
|
||||
import utils from '../utils/index'
|
||||
|
||||
let vm = null;
|
||||
const sendThis = (_this) => {
|
||||
vm = _this;
|
||||
};
|
||||
const itemHeight = 30;
|
||||
export default {
|
||||
sendThis,
|
||||
name: 'dice-er-box',
|
||||
options: {
|
||||
setState(name, value, item) {
|
||||
// 设置节点状态
|
||||
utils.node.setState(name, value, item)
|
||||
// 设置锚点状态
|
||||
// if (vm.graphMode === 'edit') {
|
||||
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: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width,
|
||||
height: collapsed ? 45 : height,
|
||||
...boxStyle,
|
||||
},
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (collapsed) {
|
||||
return keyshape;
|
||||
}
|
||||
|
||||
const listContainer = group.addGroup({});
|
||||
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,
|
||||
});
|
||||
|
||||
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,
|
||||
lineWidth: 1,
|
||||
cursor: "pointer",
|
||||
},
|
||||
name: `item-${Math.floor(startIndex) + i}-content`,
|
||||
draggable: true,
|
||||
});
|
||||
//未来设置字段之间有锚点
|
||||
// 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'
|
||||
// });
|
||||
// }
|
||||
|
||||
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}`,
|
||||
});
|
||||
});
|
||||
}
|
||||
return keyshape;
|
||||
},
|
||||
// getAnchorPoints() {
|
||||
// return [
|
||||
// [0, 0],
|
||||
// [1, 0],
|
||||
// ];
|
||||
// },
|
||||
// 绘制后附加锚点
|
||||
afterDraw(cfg, group) {
|
||||
// 绘制锚点
|
||||
utils.anchor.drawMark(cfg, group)
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
9
ebts-ui/src/views/tool/top/packages/topology/src/plugins/d3-installer.js
vendored
Normal file
9
ebts-ui/src/views/tool/top/packages/topology/src/plugins/d3-installer.js
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/07/05
|
||||
* @description: install 3rd plugins
|
||||
*/
|
||||
|
||||
import * as d3 from 'd3-force/dist/d3-force'
|
||||
|
||||
export default d3
|
||||
@@ -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: ''
|
||||
}
|
||||
},
|
||||
// 节点标签样式
|
||||
nodeLabelCfg: {
|
||||
positions: 'center',
|
||||
style: {
|
||||
fill: '#FFF'
|
||||
}
|
||||
},
|
||||
// 连线样式
|
||||
edgeStyle: {
|
||||
default: {
|
||||
stroke: '#53da3a',
|
||||
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 }
|
||||
}
|
||||
@@ -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 }
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -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 }
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="toolbar">
|
||||
<div class="left">
|
||||
<!--<el-checkbox class="edge-enabled" title="连线模式" @change="$parent.enableEdgeHandler"></el-checkbox>-->
|
||||
<!-- <top-dropdown-->
|
||||
<!-- class="edge-shape"-->
|
||||
<!-- :dropdown-items="$parent.edgeShapeList"-->
|
||||
<!-- @change="$parent.changeEdgeShapeHandler"-->
|
||||
<!-- >-->
|
||||
<!-- </top-dropdown>-->
|
||||
<top-button size="mini" @click="$parent.reBack">返回</top-button>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="graph-ops">
|
||||
<i class="iconfont icon-undo" title="撤销" :class="$parent.disableUndo ? 'disabled':''"
|
||||
@click="$parent.undoHandler"></i>
|
||||
<i class="iconfont icon-redo" title="重做" :class="$parent.disableRedo ? 'disabled':''"
|
||||
@click="$parent.redoHandler"></i>
|
||||
<span class="separator"></span>
|
||||
<i class="iconfont icon-copy" title="复制" :class="$parent.disableCopy ? 'disabled':''"
|
||||
@click="$parent.copyHandler"></i>
|
||||
<i class="iconfont icon-paste" title="粘贴" :class="$parent.disablePaste ? 'disabled':''"
|
||||
@click="$parent.pasteHandler"></i>
|
||||
<i class="iconfont icon-clear" title="删除" :class="$parent.disableDelete ? 'disabled':''"
|
||||
@click="$parent.deleteHandler"></i>
|
||||
<span class="separator"></span>
|
||||
<i class="iconfont icon-zoom-in" id="zoom-in" title="放大" @click="$parent.zoomInHandler"></i>
|
||||
<i class="iconfont icon-zoom-out" title="缩小" @click="$parent.zoomOutHandler"></i>
|
||||
<i class="iconfont icon-fit" title="适应画布" @click="$parent.autoZoomHandler"></i>
|
||||
<i class="iconfont icon-actualsize" title="实际尺寸" @click="$parent.resetZoomHandler"></i>
|
||||
<span class="separator"></span>
|
||||
<i class="iconfont icon-roi-select" id="multi-select" title="框选" @click="$parent.multiSelectHandler"></i>
|
||||
|
||||
|
||||
<div v-if="$parent.$data.graphMode === 'edit'" class="iconfont zx">
|
||||
<top-dropdown
|
||||
class="edge-shape"
|
||||
:dropdown-items="$parent.edgeShapeList"
|
||||
@change="$parent.changeEdgeShapeHandler">
|
||||
</top-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<top-button size="mini" @click="$parent.forceLayoutHandler">自动布局</top-button>
|
||||
<!--<el-button size="mini" @click="$parent.circularLayoutHandler">环形布局</el-button>-->
|
||||
<!--<el-button size="mini" @click="$parent.radialLayoutHandler">辐射</el-button>-->
|
||||
<!--<el-button size="mini" @click="$parent.mdsLayoutHandler">MDS</el-button>-->
|
||||
<!--<el-button size="mini" @click="$parent.dagreLayoutHandler">层次</el-button>-->
|
||||
<!--<el-button size="mini" @click="$parent.autoLayoutHandler">自动（old）</el-button>-->
|
||||
<el-button size="mini" v-hasPermi="['top:preview']" @click="$parent.searchPreview">预览</el-button>
|
||||
<el-button size="mini" v-hasPermi="['top:online']" @click="$parent.searchOnLine">上线</el-button>
|
||||
<!-- 返回到预览模式 -->
|
||||
<!-- <top-button size="mini" @click="$parent.changeModeHandler('preview')">返回</top-button>-->
|
||||
<top-button size="mini" v-hasPermi="['top:edit']" @click="$parent.saveDataHandler">保存</top-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Dropdown } from '../../elements';
|
||||
|
||||
export default {
|
||||
name: "ToolbarEdit",
|
||||
components: {
|
||||
"top-button": Button,
|
||||
"top-dropdown": Dropdown
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.zx{
|
||||
float: right;
|
||||
}
|
||||
.toolbar {
|
||||
/*z-index: 3;*/
|
||||
/*width: 100%;*/
|
||||
/*height: 42px;*/
|
||||
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%;
|
||||
padding-right: 10px;
|
||||
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;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.top-button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="toolbar">
|
||||
<div class="left">
|
||||
<cc-dropdown
|
||||
class="theme-style"
|
||||
ref="themeOptions"
|
||||
:dropdown-items="themeOptions"
|
||||
@change="toggleThemeChange"
|
||||
>
|
||||
</cc-dropdown>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="graph-ops">
|
||||
<i class="iconfont icon-zoom-in" id="zoom-in" title="放大" @click="$parent.zoomInHandler"></i>
|
||||
<i class="iconfont icon-zoom-out" title="缩小" @click="$parent.zoomOutHandler"></i>
|
||||
<i class="iconfont icon-fit" title="适应画布" @click="$parent.autoZoomHandler"></i>
|
||||
<i class="iconfont icon-actualsize" title="实际尺寸" @click="$parent.resetZoomHandler"></i>
|
||||
<span class="separator"></span>
|
||||
<cc-checkbox @change="$parent.enableMinimapHandler">导航器</cc-checkbox>
|
||||
<cc-dropdown :dropdown-items="refreshOptions" @change="toggleAutoRefresh"></cc-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<cc-button size="mini" @click="$parent.manualRefreshHandler">刷新</cc-button>
|
||||
<cc-button size="mini" @click="$parent.changeModeHandler('edit')">编辑</cc-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Checkbox, Button, Dropdown } from '../../elements'
|
||||
|
||||
export default {
|
||||
name: 'ToolbarEdit',
|
||||
components: {
|
||||
'cc-checkbox': Checkbox,
|
||||
'cc-button': Button,
|
||||
'cc-dropdown': Dropdown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
themeOptions: [
|
||||
{ value: 'defaultStyle', label: '默认主题' },
|
||||
{ value: 'darkStyle', label: '暗黑风格' },
|
||||
{ value: 'officeStyle', label: '办公风格' }
|
||||
],
|
||||
refreshOptions: [
|
||||
{ value: -1, label: '不自动刷新' },
|
||||
{ value: 10000, label: '10秒自动刷新' },
|
||||
{ value: 30000, label: '30秒自动刷新' },
|
||||
{ value: 60000, label: '60秒自动刷新' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleThemeChange(clickItem) {
|
||||
this.$parent.changeGraphTheme(clickItem.value)
|
||||
},
|
||||
toggleAutoRefresh(clickItem) {
|
||||
this.$parent.autoRefreshHandler(clickItem.value)
|
||||
},
|
||||
// 给父组件调用（代码触发主题修改）
|
||||
changeThemeActiveIndex(index) {
|
||||
this.$refs.themeOptions.activeIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.toolbar {
|
||||
/*height: 42px;*/
|
||||
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;
|
||||
}
|
||||
|
||||
.cc-checkbox {
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1639
ebts-ui/src/views/tool/top/packages/topology/src/topology.vue
Normal file
1639
ebts-ui/src/views/tool/top/packages/topology/src/topology.vue
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,57 @@
|
||||
|
||||
|
||||
|
||||
|
||||
import theme from '../../theme'
|
||||
export default function(cfg, group) {
|
||||
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||
// console.log("cfg",cfg)
|
||||
let { anchorPoints, width, height, id } = cfg
|
||||
// console.log("基础信息",anchorPoints,"宽",width,"高",height,"节点id",id)
|
||||
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形状
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
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
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import theme from '../../theme'
|
||||
|
||||
|
||||
|
||||
|
||||
export default function(group,label,x,y,i) {
|
||||
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||
let anchorBgShape = group.addShape('marker', {
|
||||
id: label+ '_anchor_bg_lift_' + i,
|
||||
attrs: {
|
||||
name: 'anchorBg',
|
||||
x: x,
|
||||
y: y,
|
||||
...themeStyle.anchorBgStyle.default
|
||||
},
|
||||
draggable: false,
|
||||
name: 'markerBg-shape'
|
||||
})
|
||||
|
||||
let anchorShape = group.addShape('marker', {
|
||||
id: label+ '_anchor_bg_lift_' + i,
|
||||
attrs: {
|
||||
name: 'anchor',
|
||||
x: x,
|
||||
y: y,
|
||||
...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
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: anchor
|
||||
*/
|
||||
|
||||
import erDrawLeft from './er-draw-left'
|
||||
import setState from './set-state'
|
||||
import drawMark from './draw_mark'
|
||||
import update from './update'
|
||||
|
||||
export default {
|
||||
setState,
|
||||
erDrawLeft,
|
||||
drawMark,
|
||||
update
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: set anchor state
|
||||
*/
|
||||
import theme from '../../theme'
|
||||
|
||||
export default function(name, value, item) {
|
||||
|
||||
const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
|
||||
if (name === 'hover') {
|
||||
// console.log(item)
|
||||
let group = item.getContainer()
|
||||
let children = group.get('children')
|
||||
for (let i = 0, len = children.length; i < len; i++) {
|
||||
let child = children[i]
|
||||
// 处理锚点状态
|
||||
// console.log(child.attrs.name)
|
||||
if (child.attrs.name === 'anchorBg') {
|
||||
if (value) {
|
||||
child.attr(themeStyle.anchorStyle.hover)
|
||||
} else {
|
||||
child.attr(themeStyle.anchorStyle.unhover)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2021/5/11 17:28
|
||||
* @email: clay@hchyun.com
|
||||
* @description: node
|
||||
*/
|
||||
export default function(e){
|
||||
const {
|
||||
graph
|
||||
} = this;
|
||||
const {
|
||||
y
|
||||
} = e;
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: edge
|
||||
*/
|
||||
|
||||
import setState from './set-state'
|
||||
|
||||
export default {
|
||||
setState
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: set edge state
|
||||
*/
|
||||
|
||||
import theme from '../../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 === 'active') {
|
||||
if (value) {
|
||||
shape.attr(themeStyle.edgeStyle.active)
|
||||
} else {
|
||||
shape.attr(themeStyle.edgeStyle.inactive)
|
||||
}
|
||||
} else if (name === 'selected') {
|
||||
if (value) {
|
||||
shape.attr(themeStyle.edgeStyle.selected)
|
||||
} else {
|
||||
shape.attr(themeStyle.edgeStyle.unselected)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* @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
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: node
|
||||
*/
|
||||
|
||||
import setState from './set-state'
|
||||
|
||||
export default {
|
||||
setState
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* @author: clay
|
||||
* @data: 2019/08/15
|
||||
* @description: set node state
|
||||
*/
|
||||
|
||||
import theme from '../../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 === 'active') {
|
||||
if (value) {
|
||||
shape.attr(themeStyle.nodeStyle.active)
|
||||
} else {
|
||||
shape.attr(themeStyle.nodeStyle.inactive)
|
||||
}
|
||||
} else if (name === 'selected') {
|
||||
if (value) {
|
||||
group.attr(themeStyle.nodeStyle.selected)
|
||||
} else {
|
||||
group.attr(themeStyle.nodeStyle.default)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
300
ebts-ui/src/views/tool/top/topology.vue
Normal file
300
ebts-ui/src/views/tool/top/topology.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<div class="demo-topology">
|
||||
<topology
|
||||
ref="topology"
|
||||
:graph-data="graphData"
|
||||
:node-app-config="nodeAppConfig"
|
||||
:edge-app-config="edgeAppConfig"
|
||||
:node-type-list="nodeTypeList"
|
||||
:relational-map="relationalMap"
|
||||
@doAutoRefresh="doAutoRefresh"
|
||||
@doManualRefresh="doManualRefresh"
|
||||
@doChangeMode="doChangeMode"
|
||||
@doSaveData="doSaveData"
|
||||
@doPreview="doPreview"
|
||||
@doOnLine="doOnLine"
|
||||
>
|
||||
</topology>
|
||||
<el-dialog :title="previewDate.title" width="1400px" :visible.sync="previewDate.open">
|
||||
<el-form ref="ucon" :inline="true" v-show="previewDate.showSearch" label-width="68px">
|
||||
<el-form-item v-for="item in previewDate.uconList"
|
||||
:key="item.id"
|
||||
:label="item.ucName">
|
||||
|
||||
<el-input v-if="item.type == 1" v-model="item.ucReal"
|
||||
clearable
|
||||
:placeholder="outPlaceholder(item)"
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
<div style="width: 200px" v-else-if="item.type == 2">
|
||||
<el-row :gutter="15">
|
||||
<el-col :span="12">
|
||||
<el-input size="small" placeholder="开始值" v-model="item.ucReal.begin"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-input size="small" placeholder="结束值" v-model="item.ucReal.end"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-date-picker
|
||||
v-else-if="item.type ==3"
|
||||
v-model="item.ucReal"
|
||||
type="date"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择日期时间">
|
||||
</el-date-picker>
|
||||
<el-date-picker v-else-if="item.type ==4"
|
||||
v-model="item.ucReal"
|
||||
size="small"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['tool:query:export']"
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="previewDate.showSearch" @queryTable="handleQuery"></right-toolbar>
|
||||
</el-row>
|
||||
<el-table :data="previewDate.data">
|
||||
<el-table-column v-for="item in previewDate.header"
|
||||
:label="item"
|
||||
align="center"
|
||||
:key="item"
|
||||
:prop="item"/>
|
||||
</el-table>
|
||||
<pagination
|
||||
v-show="previewDate.total>0"
|
||||
:total="previewDate.total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* 局部注册 */
|
||||
import Topology from './packages/topology/src/topology'
|
||||
import { deepClone } from './utils/index'
|
||||
import {getQuery,getTables,updateQuery,preview} from '@/api/tool/top'
|
||||
import {RealData} from "@/api/system/data"
|
||||
import { exportReal } from '../../../api/system/data'
|
||||
export default {
|
||||
name: 'DemoTopology',
|
||||
components: {
|
||||
'topology': Topology
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
baseData:null,
|
||||
previewDate:{
|
||||
open:false,
|
||||
title:"预览",
|
||||
data:[],
|
||||
header:[],
|
||||
total:0,
|
||||
uconList:[],
|
||||
showSearch:false,
|
||||
},
|
||||
graphData: {
|
||||
// "nodes":[{"id":"305bfbdd-31cc-4028-b2b1-2f504968356d","x":304.8223042174235,"y":131.0267312661499,"label":"客户端","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":0},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":0},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"depth":0},{"id":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","x":-94.51187075489108,"y":127.35469287559994,"label":"防火墙","table":"test_table","type":"dice-er-box","attrs":[{"key":"id","type":"number(6)","comment":"主键id","isUse":0},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":0},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":0},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"size":[55,55],"width":250,"height":316,"anchorPoints":[[0.5,0],[1,0.5],[0.5,1],[0,0.5]],"appState":{"alert":false},"labelCfg":{"position":"bottom"},"style":{"default":{"stroke":"#CED4D9","fill":"transparent","shadowBlur":10,"shadowColor":"rgba(13, 26, 38, 0.08)","lineWidth":1,"radius":4,"strokeOpacity":0.7},"selected":{"shadowColor":"#ff240b","shadowBlur":2},"unselected":{"shadowColor":""}},"selectedIndex":null,"appConfig":{},"startIndex":0,"startX":0,"depth":0}],"edges":[{"id":"8bc0249e-ee5d-4dd7-84e0-e4e32c217f2a","source":"be9b52e5-9c2f-4e5c-990a-afbf19dcfeed","sourceColumn":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"sourceAnchor":1,"target":"305bfbdd-31cc-4028-b2b1-2f504968356d","type":"top-cubic","style":{"active":{"stroke":"rgb(95, 149, 255)","lineWidth":1},"selected":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"shadowColor":"rgb(95, 149, 255)","shadowBlur":10,"text-shape":{"fontWeight":500}},"highlight":{"stroke":"rgb(95, 149, 255)","lineWidth":2,"text-shape":{"fontWeight":500}},"inactive":{"stroke":"rgb(234, 234, 234)","lineWidth":1},"disable":{"stroke":"rgb(245, 245, 245)","lineWidth":1},"edgeStyle":{"default":{"stroke":"#e2e2e2","lineWidth":3,"lineAppendWidth":10},"selected":{"shadowColor":"#626262","shadowBlur":3}},"stroke":"#A3B1BF","lineWidth":2,"strokeOpacity":0.92,"lineAppendWidth":10},"labelCfg":{"position":"center","autoRotate":false},"startPoint":{"x":155.98812924510892,"y":285.35469287559994,"anchorIndex":1},"endPoint":{"x":304.3223042174235,"y":289.0267312661499,"anchorIndex":3},"curveOffset":[-20,20],"curvePosition":[0.5,0.5],"targetAnchor":3,"targetColumn":[{"key":"id","type":"number(6)","comment":"主键id","isUse":1},{"key":"key","type":"varchar(255)","comment":"关键字","isUse":1},{"key":"gender","type":"enum(M, F)","comment":"gender","isUse":1},{"key":"birthday","type":"date","comment":"生日","isUse":1},{"key":"hometown","type":"varchar(255)","comment":"家乡","isUse":1},{"key":"country","type":"varchar(255)","comment":"国家","isUse":1},{"key":"nation","type":"varchar(255)","comment":"nation","isUse":1},{"key":"jobId","type":"number(3)","comment":"工作id","isUse":1},{"key":"phone","type":"varchar(255)","comment":"电话","isUse":1}],"depth":0}],"combos":[]},
|
||||
},
|
||||
nodeTypeList: [
|
||||
// { guid: "blue", label: "蓝色", imgSrc: require("../../assets/images/blue.svg") },
|
||||
// { guid: "green", label: "绿色", imgSrc: require("@/assets/images/green.svg") },
|
||||
// { guid: "purple", label: "紫色", imgSrc: require("@/assets/images/purple.svg") }
|
||||
],
|
||||
relationalMap: [],
|
||||
// 节点配置
|
||||
nodeAppConfig: {
|
||||
// ip: '节点IP',
|
||||
// port: '节点端口',
|
||||
// sysName: '设备名称'
|
||||
},
|
||||
edgeAppConfig: {
|
||||
associated: '查询方式',
|
||||
tableComment: '主表字段',
|
||||
relComment: '关联字段'
|
||||
},
|
||||
autoRefreshTimer: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.topId = this.$route.params && this.$route.params.topId;
|
||||
getQuery(this.topId).then(res =>{
|
||||
this.baseData = res.data
|
||||
if (res.data.topJson){
|
||||
this.graphData = JSON.parse(res.data.topJson)
|
||||
}else {
|
||||
this.graphData ={
|
||||
nodes:[],
|
||||
edges:[]
|
||||
}
|
||||
}
|
||||
let graphData = deepClone(this.graphData)
|
||||
this.$refs.topology.initTopo(graphData)
|
||||
this.randomChange()
|
||||
})
|
||||
getTables().then(res =>{
|
||||
this.nodeTypeList = res.data.tables
|
||||
this.relationalMap = res.data.relationalMap
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
resetQuery() {
|
||||
for (let i = 0; this.previewDate.uconList.length; i++) {
|
||||
this.previewDate.uconList[i].ucReal = null
|
||||
}
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
var that = this
|
||||
this.$confirm('是否确认导出查询数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function () {
|
||||
let data = {
|
||||
id:that.topId,
|
||||
uniCons:that.previewDate.uconList,
|
||||
}
|
||||
return exportReal(data)
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
})
|
||||
},
|
||||
handleQuery() {
|
||||
let data = {
|
||||
id: this.topId,
|
||||
pageNum: this.queryParams.pageNum,
|
||||
pageSize: this.queryParams.pageSize,
|
||||
}
|
||||
data.uniCons = this.previewDate.uconList
|
||||
RealData(data).then(res => {
|
||||
this.previewDate.data = res.rows
|
||||
this.total = res.total
|
||||
this.previewDate.header = []
|
||||
for (const key in this.previewDate.data[0]) {
|
||||
this.previewDate.header.push(key)
|
||||
}
|
||||
})
|
||||
},
|
||||
outPlaceholder(item) {
|
||||
return "请输入" + item.ucName
|
||||
},
|
||||
doAutoRefresh(interval) {
|
||||
if (interval === -1) {
|
||||
clearInterval(this.autoRefreshTimer)
|
||||
} else {
|
||||
clearInterval(this.autoRefreshTimer)
|
||||
this.autoRefreshTimer = setInterval(() => {
|
||||
this.randomChange()
|
||||
}, interval)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
clearInterval(this.autoRefreshTimer)
|
||||
})
|
||||
}
|
||||
},
|
||||
doChangeMode(graphMode) {
|
||||
clearInterval(this.autoRefreshTimer)
|
||||
let graphData = deepClone(this.graphData)
|
||||
this.$refs.topology.changeGraphMode(graphData, graphMode)
|
||||
},
|
||||
doManualRefresh() {
|
||||
this.randomChange()
|
||||
},
|
||||
doSaveData(graphData) {
|
||||
let data = {
|
||||
id : this.topId,
|
||||
topJson:JSON.stringify(graphData)
|
||||
}
|
||||
//todo 入库完成
|
||||
updateQuery(data).then(res =>{
|
||||
this.msgSuccess(res.msg)
|
||||
})
|
||||
},
|
||||
doOnLine(){
|
||||
this.$confirm('请确认top图结构无误并预览结果无误后上线?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function () {
|
||||
|
||||
})
|
||||
},
|
||||
//预览
|
||||
doPreview(graphData){
|
||||
if (graphData.nodes&&graphData.nodes.length>0){
|
||||
let data = {
|
||||
jsonData:JSON.stringify(graphData),
|
||||
id:this.topId
|
||||
}
|
||||
preview(data).then(res=>{
|
||||
this.previewDate.data = res.rows
|
||||
this.previewDate.total = res.total
|
||||
this.previewDate.uconList = res.uconList
|
||||
if (this.previewDate.uconList.length>0){
|
||||
this.previewDate.showSearch = true
|
||||
}
|
||||
this.previewDate.header = []
|
||||
for (const key in this.previewDate.data[0]) {
|
||||
this.previewDate.header.push(key)
|
||||
}
|
||||
this.previewDate.title = this.baseData.uqName + "数据预览"
|
||||
this.previewDate.open = true
|
||||
})
|
||||
}else {
|
||||
this.msgError("top数据有误,请再次检查")
|
||||
}
|
||||
},
|
||||
randomChange() {
|
||||
let graphData = deepClone(this.$refs.topology.getGraphData())
|
||||
let { nodes } = graphData
|
||||
this.$refs.topology.changeGraphData(graphData)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-topology {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
</style>
|
||||
47
ebts-ui/src/views/tool/top/utils/index.js
Normal file
47
ebts-ui/src/views/tool/top/utils/index.js
Normal file
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
export function deepClone(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
|
||||
*/
|
||||
export function getRandomArrayElements(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)
|
||||
}
|
||||
Reference in New Issue
Block a user