Skip to content

E
ETL-admin
Commit 04b2c4ee by 莫晓莉
Options

mxl全局组件

parent 79d1c545
Showing with 1285 additions and 399 deletions
src/api/kettle/file.js
......@@ -62,9 +62,16 @@ export function checkInit(data) {
}
// 数据库浏览
// export function dataBaseScan(data) {
// return request({
// url: 'etlweb/database/explorer',
// data,
// method: 'post'
// })
// }
export function dataBaseScan(data) {
return request({
url: 'etlweb/database/explorer',
url: 'etlweb/database/explorer2',
data,
method: 'post'
})
......
src/assets/styles/index.scss
......@@ -581,9 +581,9 @@ aside {
//
// $svgUrl:'http://192.168.0.2:9888/ETLWEB-SERVER/etlweb';
$svgUrl:'http://192.168.0.2:9888/ETLWEB-SERVER/etlweb';
// $svgUrl:'http://192.168.0.44:9888/ETLWEB-SERVER/etlweb';
$svgUrl:'http://192.168.0.44:9882/ETLWEB-SERVER/etlweb';
// $svgUrl:'http://192.168.0.44:9882/ETLWEB-SERVER/etlweb';
// .schema { background-image: url($svgUrl/ui/images/schema.svg?scale=16) !important;}
.preview { background-image: url($svgUrl+'/ui/images/preview.svg?scale=16') !important;}
......
src/main.js
......@@ -36,6 +36,9 @@ Vue.use(jsPlump);
// 引入自定义指令
// import './utils/dialog.js';
// 引入全局组件
import './views/dialogs-components/global'
Vue.use(VueHighlightJS)
Vue.use(mavonEditor)
Vue.use(permission)
......
src/views/dialogs-components/dialog-remind.vue
......@@ -98,11 +98,12 @@
if (res) {
this.$message.success('删除成功!');
// 关闭弹窗
this.dialogVisibleOne=false;
// this.dialogVisibleOne=false;
this.$emit("update:dialogVisibleOne", false);
this.dialogVisibleTwo=false;
}else {
this.$message.error(res.errMsg)
this.$message.error(res.message)
}
})
}
......
src/views/dialogs-components/global/establish/index.js 0 → 100644
import main from './main.vue'
export default main
\ No newline at end of file
src/views/dialogs-components/global/establish/main.vue 0 → 100644
<template>
<div>
<el-dialog
title="数据库连接"
:visible.sync="dialogVisibleFourth"
width="800px"
top="5%"
:before-close="handleCloseFourth">
<div style="display:flex;">
<div class="left-container" >
<ul class="infinite-list">
<li @click="chooseType(index)" :class="[index==nowTypeIndex?'type-checked':'']" v-for="(item,index) in linkType" :key="index" >{{ item.text }}</li>
</ul>
</div>
<!-- 右边start -->
<el-form style="flex:1;" label-width="100px" :model="createModel" ref="createFrom" >
<div v-if="nowTypeIndex==0">
<el-form-item label="连接名称" prop="name" >
<el-input v-model="createModel.name" ></el-input>
</el-form-item>
<div style="display:flex;">
<div class="choose-container" >
<div>
<div class="boxtitle">连接类型</div>
<ul class="leftv scroll-y">
<li class="btn" @mouseenter="linkHoverIdx = idx" @mouseleave="linkHoverIdx = -1" @click="chooseLinkType(item,idx)" :class="{'hover': linkHoverIdx == idx,'checked': linkCheckedIdx == idx}" v-for="(item,idx) in accessDataList" :key="idx" >
{{ item.text }}
</li>
</ul>
</div>
<div style="margin-top:15px;">
<div class="boxtitle">连接方式</div>
<ul class="rightv scroll-y">
<li class="btn" @mouseenter="methodHoverIdx = idx" @mouseleave="methodHoverIdx = -1" @click="chooseAccess(item,idx)" :class="{'hover': methodHoverIdx == idx,'checked': methodCheckedIdx == idx}" v-for="(item,idx) in accessMethods" :key="idx" >
{{ item.text }}
</li>
</ul>
</div>
</div>
<div class="input-container">
<div class="input-container-title">设置</div>
<!-- 仅仅实现mysql -->
<!-- 判断连接方式Native(JDBC) -->
<div v-if="methodCheckedText=='Native (JDBC)'">
<el-form-item label="主机名称:" prop="hostname" label-width="100px">
<el-input v-model="createModel.hostname"></el-input>
</el-form-item>
<el-form-item label="数据库名称:" prop="databaseName" label-width="100px">
<el-input v-model="createModel.databaseName" ></el-input>
</el-form-item>
<el-form-item label="端口号:" prop="port" label-width="100px">
<el-input v-model="createModel.port"></el-input>
</el-form-item>
</div>
<!-- 判断连接方式odbc -->
<el-form-item v-if="methodCheckedText=='ODBC'" label="ODBC DSN源名称:" prop="databaseName" label-width="100px">
<el-input v-model="createModel.databaseName"></el-input>
</el-form-item>
<div v-if="methodCheckedText=='JNDI'">
<el-form-item label="JNDI名称：" prop="port" label-width="100px">
<el-input v-model="createModel.databaseName"></el-input>
</el-form-item>
</div>
<div v-if="methodCheckedText=='OCI'">
<el-form-item label="SID：" prop="port" label-width="100px">
<el-input v-model="createModel.databaseName"></el-input>
</el-form-item>
<el-form-item label="用户名:" prop="username" label-width="100px">
<el-input v-model="createModel.username"></el-input>
</el-form-item>
<el-form-item label="密码:" prop="password" label-width="100px">
<el-input v-model="createModel.password"></el-input>
</el-form-item>
</div>
<el-form-item v-if="createModel.type=='ORACLE'" label="数据表空间:" prop="dataTablespace" label-width="90px">
<el-input v-model="createModel.dataTablespace" ></el-input>
</el-form-item>
<el-form-item v-if="createModel.type=='ORACLE'" label="索引表空间:" prop="indexTablespace" label-width="90px">
<el-input v-model="createModel.indexTablespace"></el-input>
</el-form-item>
<div v-if="methodCheckedText=='Native (JDBC)' || methodCheckedText=='ODBC'">
<el-form-item label="用户名:" prop="username" label-width="100px">
<el-input v-model="createModel.username"></el-input>
</el-form-item>
<el-form-item label="密码:" prop="password" label-width="100px">
<el-input v-model="createModel.password"></el-input>
</el-form-item>
</div>
<!-- 判断连接方式JNDY -->
</div>
</div>
</div>
<div v-if="nowTypeIndex==1">
<!-- 高级 -->
<el-checkbox-group class="check-group" v-model="checkModel">
<el-checkbox class="checkbox-sty" label="美食/餐厅线上活动" name="type1"></el-checkbox>
<el-checkbox class="checkbox-sty" label="地推活动" name="type2"></el-checkbox>
<el-checkbox class="checkbox-sty" label="线下主题活动" name="type3"></el-checkbox>
<el-checkbox class="checkbox-sty" label="单纯品牌曝光" name="type4"></el-checkbox>
</el-checkbox-group>
<div>
<div style="padding:10px ;">默认模式名称，在没有其他模式时候使用</div>
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</div>
<div>
<div style="padding:10px ;">请输入连接成功后要执行的SQL语句，用分号(;)隔开</div>
<el-input type="textarea" ></el-input>
</div>
</div>
<div v-if="nowTypeIndex==2">
选项
</div>
<div v-if="nowTypeIndex==3">
连接池
</div>
<div v-if="nowTypeIndex==4">
集群
</div>
</el-form>
<!-- 右边end -->
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCloseFourth">取 消</el-button>
<el-button @click="testDialogueOpen()">测 试</el-button>
<el-button @click="featureDialogOpen()">特征列表</el-button>
<el-button @click="scanDialogOpen()">浏 览</el-button>
<el-button @click="comfirmCreate('createFrom')">确 定</el-button>
</span>
</el-dialog>
<!--数据库连接start -->
<el-dialog
title="数据库连接测试"
encodeURIComponent
:visible.sync="testDialogueFlag"
width="650px"
top="15%"
:close-on-click-modal="false"
:before-close="handleCloseTest"
>
<div class="table-container table-container-repos" style="height:42vh;">
{{linkInfo}}
</div>
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="handleClose">取 消</el-button> -->
<el-button type="primary" @click="handleCloseTest">确 定</el-button>
</span>
</el-dialog>
<!-- 数据库连接测试end -->
<!-- 特征列表 -->
<el-dialog
title="特征列表"
encodeURIComponent
:visible.sync="featureDialogVisible"
width="700px"
top="7%"
:close-on-click-modal="false"
:before-close="handleCloseFeature"
>
<el-table height="500" border :data="tableData" style="width: 100%;">
<el-table-column v-for="(col,index) in cols" :key="index" :prop="col.prop" :label="col.label" >
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="handleCloseFeature">取 消</el-button>
<el-button type="primary" @click="handleCloseFeature">确 定</el-button>
</span>
</el-dialog>
<!-- 特征列表 -->
<!-- 浏览 -->
<el-dialog
title="数据库浏览"
encodeURIComponent
:visible.sync="scanDialogVisible"
width="650px"
top="15%"
:close-on-click-modal="false"
:before-close="handleCloseScan"
v-if="scanFlag"
>
<!-- 文件夹存放区域start-->
<el-tree
:data="scanfileTreeList"
lazy
:load="loadDataTree"
:auto-expand-parent="true"
:check-strictly="true"
:default-expand-all="false"
node-key="id"
ref="tree"
:props="defaultProps"
:highlight-current="true"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span style="display:flex;align:center;">
<div :class="data.iconCls" style="display:inline-block;width:20px;height:20px;background-repeat:no-repeat;background-position:center;" width="" alt=""></div>
{{ node.label }}
</span>
</span>
</el-tree>
<!-- 文件夹存放区域end -->
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="handleClose">取 消</el-button> -->
<el-button type="primary" @click="handleCloseScan">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {
accessMethod,//获取连接方式列表
accessData,//获取连接类型
database,
test,
check,//编辑数据库
create
} from "@/api/kettle/link";
import {
features,
dataBaseScan
} from "@/api/kettle/file";
export default{
name:'estab-dialog',
data(){
return {
linkType:[
{value: 0, text: '一般'},
{value: 1, text: '高级'},
{value: 2, text: '选项'},
{value: 3, text: '连接池'},
{value: 4, text: '集群'}
],
nowTypeIndex:0,//当前选中数据库类型
createModel:{
name:'',
type:'',
access:'',
hostname:'',
databaseName:'',
port:'',
username:'',
password:'',
stramingReasults:'',
supportBooleanDataType:'',
supportTimestampDataType:'',
preserveReservedCaseCheck:'',
extraOptions:[],
usingConnectionPool:'N',
initialPoolSize:'5',
maximumPoolSize:'10',
partitioned:'N',
partitionInfo:[]
},//创建数据库
dataBaseDetail:{},//数据库详情
linkHoverIdx: -1,//鼠标移动到连接类型
linkCheckedIdx: -2 ,//当前选择连接类型列表
accessDataList:[],//连接类型
accessMethods:[],//连接方式列表
methodHoverIdx:0,//鼠标移动到连接方式
methodCheckedIdx: 0,//当前选择连接方式列表
methodCheckedText:'Native (JDBC)',//当前选择的连接方式test
linkInfo:'',
testDialogueFlag:false,//测试弹弹窗
tableData:[],
cols:[],
featureList:[],
scanDialogVisible:false,
// scanfileTreeList:[
// { text:'',
// nodeId:'root',
// children:[]}
// ],
scanfileTreeList:[
// { id: "85f90417f6374c589108830f27a1b867", text: "", iconCls: "imageFolder" }
],
featureDialogVisible:false,
defaultProps: {
label: "text",
children: "children",
},
nodeId:'',
text:'root',
node:'xnode-4528',
scanFlag:false,//浏览弹窗
}
},
props:{
dialogVisibleFourth:Boolean,
listNames:Function,//父传过来的方法
},
created(){
// this.accessData();
},
methods:{
//获取数据库详情
database(name){
let data = new FormData();
data.append('name', name);
database(data).then(res=>{
if (res) {
console.log('数据库详情：',res);
this.dataBaseDetail=res;
// this.createModel=res;
// 选出需要传到后台的参数集合
this.chooseParams(this.dataBaseDetail);
}else {
this.$message.error(res.errMsg)
}
})
},
//选出要传给后台的参数集合便于编辑方法 check
chooseParams(objParams){
var newObject={};
for(var key in this.createModel){
console.log(key,this.createModel[key])
newObject[key]=objParams[key];
}
console.log('新的对象====',newObject);
this.createModel=newObject;
console.log('编辑赋值当前对象====',this.createModel);
this.accessData();//获取连接类型
},
// 关闭弹窗
handleCloseFourth(){
this.$emit("getSonValue", false);//组件要传回父组件的值,关闭弹窗
},
chooseType(index){
this.nowTypeIndex=index;
},
chooseLinkType(item,idx){
console.log('选择连接类型：',item);
this.linkCheckedIdx=idx;
this.accessMethod();//切换连接方式
this.methodHoverIdx=-1;
this.methodCheckedIdx=-2;
this.createModel.type=item.value;
console.log('选择连接类型赋值表单：',this.createModel);
},
// 获取连接方式
chooseAccess(item,idx){
console.log('选择连接方式：',item);
this.methodCheckedIdx=idx;
this.methodCheckedText=item.text;//当前选择的连接方式
this.createModel.access=item.value;
console.log('选择连接方式赋值表单：',this.createModel);
},
// 获取连接方式
accessMethod(){
var accessData=this.accessDataList[this.linkCheckedIdx].value;
var params={accessData:accessData};
let data = new FormData();
data.append('accessData', params.accessData)
console.log('参数==',params);
// accessMethod(JSON.stringify(params)).then(res=>{
accessMethod(data).then(res=>{
if (res) {
console.log('获取连接方式：',res);
console.log('获取连接方式当前编辑对象：',this.createModel);
this.accessMethods=res;
if( this.createModel.name==''){//如果是新增就默认
this.createModel.access=res[0].value;
this.methodCheckedText=res[0].text;//当前选择的连接方式
}else{
for(var i =0;i< this.accessMethods.length;i++){
if(this.accessMethods[i].value==this.createModel.access){
this.methodCheckedIdx=i;
this.methodCheckedText=this.accessMethods[i].text;//当前选择的连接方式
}
}
}
console.log('表单赋值连接方式：',this.createModel);
}else {
this.$message.error(res.errMsg)
}
})
},
//获取连接类型
accessData(){
console.log('进入组件====');
accessData().then(res=>{
if (res) {
console.log('获取连接类型：',res);
var data=res;
if(data){
if(this.createModel.name==''){
console.log('新建获取连接类型===========：',this.createModel.type);
console.log('新建获取连接类型对象===========：',this.createModel);
// 设置初始化连接类型
for(var i =0;i<data.length;i++){
if(data[i].value=='ORACLE'){
console.log('-----------------');
this.linkCheckedIdx=i;
this.initlinkTypeIdx=i;//初始化默认选择oracle
this.methodHoverIdx=0;
this.createModel.type='ORACLE';
console.log('表单赋值连接类型：',this.createModel);
}
}
}else{
console.log('编辑获取连接类型=======：',this.createModel.type);
console.log('编辑获取连接类型对象=======：',this.createModel);
for(var i =0;i<data.length;i++){
if(data[i].value==this.createModel.type){
console.log('-----------------');
this.linkCheckedIdx=i;
this.initlinkTypeIdx=i;//初始化默认选择oracle
// this.methodHoverIdx=0;
// this.createModel.type='ORACLE';
console.log('表单赋值连接类型：',this.createModel);
}
}
}
}
this.accessDataList=data;
this.accessMethod();
}else {
this.$message.error(res.errMsg)
}
})
},
comfirmCreate(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
// JSON对象转成formData对象
var params=this.createModel;
// 由于高级选项连接池集群页面没有画完，保存默认参数
params.supportBooleanDataType=true;
params.supportTimestampDataType=true;
params.preserveReservedCaseCheck=true;
params.extraOptions = [];
params.usingConnectionPool='N';
params.initialPoolSize='5';
params.maximumPoolSize='10';
params.partitioned='N';
params.partitionInfo=[];
var formData = new FormData();
formData.append('databaseInfo', JSON.stringify(params));
console.log('表单提交参数==',params);
// 判断新增还是编辑start===============
console.log('编辑表单提交参数==',formData);
check(formData).then(res=>{
console.log('提交数据：',res);
if (res.success) {
// this.$message.success('成功!');
// this.dialogVisibleFourth=false;//关闭弹窗
// this.linkCheckedIdx=this.initlinkTypeIdx;//关闭弹窗后初始化选择的数据
// this.listNames();//刷新已经创建的数据库列表
// this.addFlag=true;//更改新增或者编辑变量
create(formData).then(res=>{
console.log('提交数据：',res);
if (res.success) {
this.$message.success('成功!');
// this.dialogVisibleFourth=false;//关闭弹窗
this.$emit("getSonValue", false);//组件要传回父组件的值,关闭弹窗
this.linkCheckedIdx=this.initlinkTypeIdx;//关闭弹窗后初始化选择的数据
this.listNames();//刷新已经创建的数据库列表
}else {
this.$message.error(res.message)
}
})
}else {
this.$message.error(res.message)
}
})
}
// 判断新增还是编辑end===============
});
},
testDialogueOpen(){
// JSON对象转成formData对象
var params=this.createModel;
// 由于高级选项连接池集群页面没有画完，保存默认参数
params.supportBooleanDataType=true;
params.supportTimestampDataType=true;
params.preserveReservedCaseCheck=true;
params.extraOptions = [];
params.usingConnectionPool='N';
params.initialPoolSize='5';
params.maximumPoolSize='10';
params.partitioned='N';
params.partitionInfo=[];
var formData = new FormData();
formData.append('databaseInfo', JSON.stringify(params));
console.log('表单提交参数==',params);
this.test(formData);
this.testDialogueFlag = true;
},
// 测试连接
test(params){
test(params).then(res=>{
if (res) {
console.log('测试：');
// this.linkInfo=res.message;
// var test2=decodeURI(res.message);
var test2=decodeURIComponent(res.message);
console.log('解码====：',test2);
this.linkInfo=test2;
}else {
this.$message.error(res.errMsg)
}
})
},
handleCloseTest(){
this.testDialogueFlag = false;
},
featureDialogOpen(){
// JSON对象转成formData对象
var params=this.createModel;
// 由于高级选项连接池集群页面没有画完，保存默认参数
params.supportBooleanDataType=true;
params.supportTimestampDataType=true;
params.preserveReservedCaseCheck=true;
params.extraOptions = [];
params.usingConnectionPool='N';
params.initialPoolSize='5';
params.maximumPoolSize='10';
params.partitioned='N';
params.partitionInfo=[];
var formData = new FormData();
formData.append('databaseInfo', JSON.stringify(params));
console.log('表单提交参数==',params);
this.feature(formData);
this.featureDialogVisible = true;
},
// 测试连接
feature(params){
features(params).then(res=>{
if (res) {
console.log('特征列表：',res);
this.featureList=res;
var newCols=[];
res.columns.forEach(element => {
var obj={};
obj.prop=element.header;
obj.label=element.header;
newCols.push(obj);
});
this.cols=newCols;
this.tableData=res.firstRecords;
console.log('特征列表this.cols：',this.cols);
console.log('特征列表this.tableData：',this.tableData);
}else {
this.$message.error(res.errMsg)
}
})
},
handleCloseFeature(){
this.featureDialogVisible = false;
},
// 资源库浏览
scanDialogOpen(){
var params=this.createModel;
// 由于高级选项连接池集群页面没有画完，保存默认参数
params.supportBooleanDataType=true;
params.supportTimestampDataType=true;
params.preserveReservedCaseCheck=true;
params.extraOptions = [];
params.usingConnectionPool='N';
params.initialPoolSize='5';
params.maximumPoolSize='10';
params.partitioned='N';
params.partitionInfo=[];
var formData = new FormData();
formData.append('databaseInfo', JSON.stringify(params));
formData.append('includeElement', 15);
formData.append('nodeId', this.nodeId);
formData.append('text', this.text);
formData.append('node', this.node);
// var node={
// text: 'root',
// iconCls: 'imageFolder',
// }
// if(showFlag){
// formData.append('nodeId', '');
// formData.append('text', 'root');
// formData.append('node', 'xnode-3620');
// }else{
// formData.append('nodeId', '');
// formData.append('text', 'root');
// formData.append('node', 'xnode-3620');
// }
// 当前编辑的项目的id
// formData.append('node', 'xnode-3620');
// formData.append('nodeId', 'root');
// formData.append('text', '');
// formData.append('nodeId', '');
// formData.append('text', 'root');
// formData.append('node', 'xnode-2984');
// this.dataBaseScan(formData);
// this.getDataBaseScan();
this.scanFlag=true;
this.scanDialogVisible = true;
},
// 浏览
dataBaseScan(params){
dataBaseScan(params).then(res=>{
if (res) {
console.log('浏览列表：',res);
if(res.length==1){
this.nodeId='root';
this.text=res[0].text;
this.node=res[0].id;
this.scanDialogOpen();
}
// this.nodeId=res[0].id;
// this.scanfileTreeList.children.push(res);
// this.$refs["tree"].updateKeyChildren(this.node, res);
// this.$set(this.scanfileTreeList, 'children', res);
var node={ id: "85f90417f6374c589108830f27a1b867", text: "", iconCls: "imageFolder" }
node.doCreateChildren([res]);
}else {
this.$message.error(res.errMsg)
}
})
},
// loadDataTree(node, resolve) {
// console.log('node====',node)
// },
// 浏览
getDataBaseScan(){
var params=this.createModel;
// 由于高级选项连接池集群页面没有画完，保存默认参数
params.supportBooleanDataType=true;
params.supportTimestampDataType=true;
params.preserveReservedCaseCheck=true;
params.extraOptions = [];
params.usingConnectionPool='N';
params.initialPoolSize='5';
params.maximumPoolSize='10';
params.partitioned='N';
params.partitionInfo=[];
var formData = new FormData();
formData.append('databaseInfo', JSON.stringify(params));
formData.append('includeElement', 15);
formData.append('nodeId', this.nodeId);
formData.append('text', this.text);
formData.append('node', this.node);
dataBaseScan(formData).then(res=>{
if (res) {
console.log('浏览列表：',res);
if(res.length==1){
this.nodeId='root';
this.text=res[0].text;
this.node=res[0].id;
// this.getDataBaseScan();
}
// this.nodeId=res[0].id;
// this.scanfileTreeList.children.push(res);
// this.$refs["tree"].updateKeyChildren(this.node, res);
// this.$set(this.scanfileTreeList, 'children', res);
// var node={ id: "85f90417f6374c589108830f27a1b867", text: "", iconCls: "imageFolder" }
// node.doCreateChildren([res]);
this.scanfileTreeList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
loadDataTree(node, resolve) {
console.log('node====',node,'resolve-----------',resolve)
if (node.level === 0) {
this.getDataBaseScan();
// return resolve([{ id: "85f90417f6374c589108830f27a1b867", text: "", iconCls: "imageFolder" }]);
return resolve(this.scanfileTreeList);
}else{
// formData.append('nodeId', this.nodeId);
// formData.append('text', this.text);
// formData.append('node', this.node);
this.nodeId=node.data.nodeId;
this.text=node.data.text;
this.node=node.data.id;
var params=this.createModel;
// 由于高级选项连接池集群页面没有画完，保存默认参数
params.supportBooleanDataType=true;
params.supportTimestampDataType=true;
params.preserveReservedCaseCheck=true;
params.extraOptions = [];
params.usingConnectionPool='N';
params.initialPoolSize='5';
params.maximumPoolSize='10';
params.partitioned='N';
params.partitionInfo=[];
var formData = new FormData();
formData.append('databaseInfo', JSON.stringify(params));
formData.append('includeElement', 15);
formData.append('nodeId', this.nodeId);
formData.append('text', this.text);
formData.append('node', this.node);
dataBaseScan(formData).then(res=>{
if (res) {
console.log('获取列表-------',res);
if(res.length>0){
resolve(res);
}else if(!res.success){
let data = []
resolve(data);
}
}else {
this.$message.error(res.errMsg)
}
})
}
// this.getDataBaseScan();
// let rootChildren = this.scanfileTreeList;
// if (resolve) {
// resolve(rootChildren); //动态加载时
// } else {
// //更新节点时：
// node.childNodes = [];
// node.doCreateChildren(rootChildren);
// }
// }
},
// dataBaseScan(formData).then(res=>{
// let rootChildren = [];
// rootChildren=res;
// if (res) {
// if (resolve) {
// resolve(rootChildren); //动态加载时
// } else {
// //更新节点时：
// node.childNodes = [];
// node.doCreateChildren(rootChildren);
// }
// }
// })
handleCloseScan(){
this.scanDialogVisible = false;
this.scanFlag=false;
this.scanfileTreeList=[];
this.nodeId='',
this.text='root',
this.node='xnode-4528'
},
}
}
</script>
<style>
.type-checked{
background-color:#8888FF;
color: #fff;
}
</style>
\ No newline at end of file
src/views/dialogs-components/global/index.js 0 → 100644
import Vue from 'vue'
const componentsContext =require.context('./', true, /\.js$/);
// 遍历出每个组件的路径
componentsContext.keys().forEach(component => {
const componentConfig =componentsContext(component);
//兼容important export和require module.export两种规范
const ctrl = componentConfig.default || componentConfig;
// 加载全局组件
if(ctrl && ctrl.name){
Vue.component(ctrl.name, ctrl);
}
})
\ No newline at end of file
src/views/kettle/home.vue
......@@ -94,7 +94,7 @@
<div class="mid">
<el-tabs v-if="tabShowFlag" style="margin-top:-5vh;margin-bottom:0;" v-model="picName" type="card" closable @tab-remove="removeTab">
<el-tab-pane label="数据库名称" >
<flow-designer ref="pic" ></flow-designer>
<flow-designer ref="pic" :dialogVisibleFourth.sync="dialogVisibleFourth"></flow-designer>
</el-tab-pane>
</el-tabs>
......@@ -102,7 +102,7 @@
</div>
<!-- 弹窗1start -->
<el-dialog
......@@ -213,7 +213,8 @@
<!-- 弹窗4start -->
<el-dialog
<estab-dialog ref="establishDia" :dialogVisibleFourth.sync='dialogVisibleFourth' @getSonValue="getSonValue" :listNames="listNames"></estab-dialog>
<!-- <el-dialog
title="数据库连接"
:visible.sync="dialogVisibleFourth"
width="800px"
......@@ -226,7 +227,7 @@
<li @click="chooseType(index)" :class="[index==nowTypeIndex?'type-checked':'']" v-for="(item,index) in linkType" :key="index" >{{ item.text }}</li>
</ul>
</div>
<!-- 右边start -->
<el-form style="flex:1;" label-width="100px" :model="createModel" ref="createFrom" >
<div v-if="nowTypeIndex==0">
<el-form-item label="连接名称" prop="name" >
......@@ -254,8 +255,7 @@
<div class="input-container">
<div class="input-container-title">设置</div>
<!-- 仅仅实现mysql -->
<!-- 判断连接方式Native(JDBC) -->
<div v-if="methodCheckedText=='Native (JDBC)'">
<el-form-item label="主机名称:" prop="hostname" label-width="100px">
<el-input v-model="createModel.hostname"></el-input>
......@@ -265,19 +265,14 @@
<el-input v-model="createModel.databaseName" ></el-input>
</el-form-item>
<!-- <el-form-item v-if="createModel.type=='ORACLE'" label="数据表空间:" prop="dataTablespace" label-width="90px">
<el-input v-model="createModel.dataTablespace" ></el-input>
</el-form-item>
<el-form-item v-if="createModel.type=='ORACLE'" label="索引表空间:" prop="indexTablespace" label-width="90px">
<el-input v-model="createModel.indexTablespace"></el-input>
</el-form-item> -->
<el-form-item label="端口号:" prop="port" label-width="100px">
<el-input v-model="createModel.port"></el-input>
</el-form-item>
</div>
<!-- 判断连接方式odbc -->
<el-form-item v-if="methodCheckedText=='ODBC'" label="ODBC DSN源名称:" prop="databaseName" label-width="100px">
<el-input v-model="createModel.databaseName"></el-input>
</el-form-item>
......@@ -321,7 +316,7 @@
</div>
<!-- 判断连接方式JNDY -->
</div>
......@@ -329,7 +324,7 @@
</div>
<div v-if="nowTypeIndex==1">
<!-- 高级 -->
<el-checkbox-group class="check-group" v-model="checkModel">
<el-checkbox class="checkbox-sty" label="美食/餐厅线上活动" name="type1"></el-checkbox>
<el-checkbox class="checkbox-sty" label="地推活动" name="type2"></el-checkbox>
......@@ -364,7 +359,7 @@
</el-form>
<!-- 右边end -->
</div>
<span slot="footer" class="dialog-footer">
......@@ -374,7 +369,7 @@
<el-button @click="scanDialogOpen()">浏 览</el-button>
<el-button @click="comfirmCreate('createFrom')">确 定</el-button>
</span>
</el-dialog>
</el-dialog> -->
<!-- 弹窗4end -->
......@@ -516,6 +511,7 @@ import {
loginRepository,//连接数据库
addRepository,//资源库信息
} from "@/api/kettle/link";
// import Establish from '../dialogs-components/establish.vue'
// import Scan from '../dialogs-components/scan.vue'
......@@ -529,7 +525,8 @@ export default {
dialogRemind,////删除提示弹窗
scanDialog,
feature,//特征列表
establishDialog,//新建转换，新建作业，新建目录弹窗
establishDialog,
// Establish,//新建转换，新建作业，新建目录弹窗
},
data() {
......@@ -557,10 +554,10 @@ export default {
listHoverIdx: -1,//鼠标移动到历史创建数据库列表
listCheckedIdx: -2 ,//当前选择历史创建数据库列表
accessMethods:[],//连接方式列表
linkHoverIdx: -1,//鼠标移动到连接类型
linkCheckedIdx: -2 ,//当前选择连接类型列表
methodHoverIdx:0,//鼠标移动到连接方式
methodCheckedIdx: 0,//当前选择连接方式列表
// linkHoverIdx: -1,//鼠标移动到连接类型
// linkCheckedIdx: -2 ,//当前选择连接类型列表
// methodHoverIdx:0,//鼠标移动到连接方式
// methodCheckedIdx: 0,//当前选择连接方式列表
initlinkTypeIdx:0,//初始化默认选择oracle
namesList:[],//已经创建的数据库列表
createModel:{
......@@ -600,7 +597,7 @@ export default {
name:'',
description:''
},//资源库信息
methodCheckedText:'Native (JDBC)',//当前选择的连接方式test
// methodCheckedText:'Native (JDBC)',//当前选择的连接方式test
rulesOne:{
name:[
{required:true,message:'请输入名称',trigger:'blur'}
......@@ -779,14 +776,14 @@ export default {
],
dialogVisibleThree:false,//资源库信息弹窗
dialogVisibleFourth:false,
linkType:[
{value: 0, text: '一般'},
{value: 1, text: '高级'},
{value: 2, text: '选项'},
{value: 3, text: '连接池'},
{value: 4, text: '集群'}
],
nowTypeIndex:0,//当前选中数据库类型
// linkType:[
// {value: 0, text: '一般'},
// {value: 1, text: '高级'},
// {value: 2, text: '选项'},
// {value: 3, text: '连接池'},
// {value: 4, text: '集群'}
// ],
// nowTypeIndex:0,//当前选中数据库类型
FileModal:false,//文件资源库弹窗
FileModalScan:false,//浏览弹窗
......@@ -797,8 +794,22 @@ export default {
mounted () {
this.dragControllerDiv();//左右窗体调整宽度
// this.treeRevert(this.jobTreeList);
this.accessData();//页面一加载就获取连接类型
// this.accessData();//页面一加载就获取连接类型
this.explorer('');//获取文件夹列表
// console.log(this.$refs.establishDia.linkType,'55555555555555555')
this.$nextTick(function () {
console.log(this.$refs.establishDia,'========')
// this.$refs.establishDia.accessData();//页面一加载就获取连接类型
this.$refs.establishDia.accessData();//页面一加载就获取连接类型
})
// this.dialogVisibleFourth=true
// this.$refs.scanDialog.dataBaseScan(formData);
},
......@@ -944,21 +955,29 @@ export default {
// 新增数据库
showModalFourth(){
this.dialogVisibleFourth=true;
this.database();
this.$refs.establishDia.database();
// this.accessData();//获取连接类型
this.accessMethod();//获取连接方式
console.log('this.methodHoverIdx==',this.methodHoverIdx);
console.log('this.methodCheckedIdx==',this.methodCheckedIdx);
this.$refs.establishDia.accessMethod();//获取连接方式
// console.log('this.methodHoverIdx==',this.methodHoverIdx);
// console.log('this.methodCheckedIdx==',this.methodCheckedIdx);
},
handleCloseFourth(){
this.dialogVisibleFourth=false;
//获取新建弹窗返回来的值
getSonValue(res){
this.dialogVisibleFourth=res;
this.linkCheckedIdx=this.initlinkTypeIdx;//关闭弹窗后初始化选择oracle数据
this.methodHoverIdx=0;//关闭弹窗后初始化选择oracle数据对应第一条
this.methodCheckedIdx=0;//关闭弹窗后初始化选择oracle数据对应第一条
this.addFlag=true;//增减变量改为编辑变量
// this.addFlag=true;//增减变量改为编辑变量
},
// handleCloseFourth(){
// this.dialogVisibleFourth=false;
// this.linkCheckedIdx=this.initlinkTypeIdx;//关闭弹窗后初始化选择oracle数据
// this.methodHoverIdx=0;//关闭弹窗后初始化选择oracle数据对应第一条
// this.methodCheckedIdx=0;//关闭弹窗后初始化选择oracle数据对应第一条
// this.addFlag=true;//增减变量改为编辑变量
// },
closeFileModal(){
this.FileModal=false;
......@@ -968,9 +987,9 @@ export default {
},
chooseType(index){
this.nowTypeIndex=index;
},
// chooseType(index){
// this.nowTypeIndex=index;
// },
// 获取资源库连接类型
types(){
......@@ -995,106 +1014,106 @@ export default {
})
},
chooseLinkType(item,idx){
console.log('选择连接类型：',item);
this.linkCheckedIdx=idx;
this.accessMethod();//切换连接方式
this.methodHoverIdx=-1;
this.methodCheckedIdx=-2;
this.createModel.type=item.value;
console.log('选择连接类型赋值表单：',this.createModel);
// chooseLinkType(item,idx){
// console.log('选择连接类型：',item);
// this.linkCheckedIdx=idx;
// this.accessMethod();//切换连接方式
// this.methodHoverIdx=-1;
// this.methodCheckedIdx=-2;
// this.createModel.type=item.value;
// console.log('选择连接类型赋值表单：',this.createModel);
},
// },
// 获取连接方式
chooseAccess(item,idx){
console.log('选择连接方式：',item);
this.methodCheckedIdx=idx;
this.methodCheckedText=item.text;//当前选择的连接方式
this.createModel.access=item.value;
console.log('选择连接方式赋值表单：',this.createModel);
},
// chooseAccess(item,idx){
// console.log('选择连接方式：',item);
// this.methodCheckedIdx=idx;
// this.methodCheckedText=item.text;//当前选择的连接方式
// this.createModel.access=item.value;
// console.log('选择连接方式赋值表单：',this.createModel);
// },
// 获取连接方式
accessMethod(){
var accessData=this.accessDataList[this.linkCheckedIdx].value;
var params={accessData:accessData};
let data = new FormData();
data.append('accessData', params.accessData)
console.log('参数==',params);
// accessMethod(JSON.stringify(params)).then(res=>{
accessMethod(data).then(res=>{
if (res) {
console.log('获取连接方式：',res);
console.log('获取连接方式当前编辑对象：',this.createModel);
this.accessMethods=res;
if( this.createModel.name==''){//如果是新增就默认
this.createModel.access=res[0].value;
this.methodCheckedText=res[0].text;//当前选择的连接方式
}else{
for(var i =0;i< this.accessMethods.length;i++){
if(this.accessMethods[i].value==this.createModel.access){
this.methodCheckedIdx=i;
this.methodCheckedText=this.accessMethods[i].text;//当前选择的连接方式
// // 获取连接方式
// accessMethod(){
// var accessData=this.accessDataList[this.linkCheckedIdx].value;
// var params={accessData:accessData};
// let data = new FormData();
// data.append('accessData', params.accessData)
// console.log('参数==',params);
// // accessMethod(JSON.stringify(params)).then(res=>{
// accessMethod(data).then(res=>{
// if (res) {
// console.log('获取连接方式：',res);
// console.log('获取连接方式当前编辑对象：',this.createModel);
// this.accessMethods=res;
// if( this.createModel.name==''){//如果是新增就默认
// this.createModel.access=res[0].value;
// this.methodCheckedText=res[0].text;//当前选择的连接方式
// }else{
// for(var i =0;i< this.accessMethods.length;i++){
// if(this.accessMethods[i].value==this.createModel.access){
// this.methodCheckedIdx=i;
// this.methodCheckedText=this.accessMethods[i].text;//当前选择的连接方式
}
}
}
// }
// }
// }
console.log('表单赋值连接方式：',this.createModel);
}else {
this.$message.error(res.errMsg)
}
})
},
//获取连接类型
accessData(){
accessData().then(res=>{
if (res) {
console.log('获取连接类型：',res);
var data=res;
if(data){
if(this.createModel.name==''){
console.log('新建获取连接类型===========：',this.createModel.type);
console.log('新建获取连接类型对象===========：',this.createModel);
// 设置初始化连接类型
for(var i =0;i<data.length;i++){
if(data[i].value=='ORACLE'){
console.log('-----------------');
this.linkCheckedIdx=i;
this.initlinkTypeIdx=i;//初始化默认选择oracle
this.methodHoverIdx=0;
this.createModel.type='ORACLE';
console.log('表单赋值连接类型：',this.createModel);
}
}
}else{
console.log('编辑获取连接类型=======：',this.createModel.type);
console.log('编辑获取连接类型对象=======：',this.createModel);
for(var i =0;i<data.length;i++){
if(data[i].value==this.createModel.type){
console.log('-----------------');
this.linkCheckedIdx=i;
this.initlinkTypeIdx=i;//初始化默认选择oracle
// this.methodHoverIdx=0;
// this.createModel.type='ORACLE';
console.log('表单赋值连接类型：',this.createModel);
}
}
}
// console.log('表单赋值连接方式：',this.createModel);
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
// //获取连接类型
// accessData(){
// accessData().then(res=>{
// if (res) {
// console.log('获取连接类型：',res);
// var data=res;
// if(data){
// if(this.createModel.name==''){
// console.log('新建获取连接类型===========：',this.createModel.type);
// console.log('新建获取连接类型对象===========：',this.createModel);
// // 设置初始化连接类型
// for(var i =0;i<data.length;i++){
// if(data[i].value=='ORACLE'){
// console.log('-----------------');
// this.linkCheckedIdx=i;
// this.initlinkTypeIdx=i;//初始化默认选择oracle
// this.methodHoverIdx=0;
// this.createModel.type='ORACLE';
// console.log('表单赋值连接类型：',this.createModel);
// }
// }
// }else{
// console.log('编辑获取连接类型=======：',this.createModel.type);
// console.log('编辑获取连接类型对象=======：',this.createModel);
// for(var i =0;i<data.length;i++){
// if(data[i].value==this.createModel.type){
// console.log('-----------------');
// this.linkCheckedIdx=i;
// this.initlinkTypeIdx=i;//初始化默认选择oracle
// // this.methodHoverIdx=0;
// // this.createModel.type='ORACLE';
// console.log('表单赋值连接类型：',this.createModel);
// }
// }
// }
}
// }
this.accessDataList=data;
this.accessMethod();
}else {
this.$message.error(res.errMsg)
}
})
},
// this.accessDataList=data;
// this.accessMethod();
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
......@@ -1201,32 +1220,31 @@ export default {
},
editDataBaseModal(){
if(this.selectName){
this.dialogVisibleFourth=true;
this.addFlag=false;//增减变量改为编辑变量
this.dialogVisibleFourth=true;
// this.addFlag=false;//增减变量改为编辑变量
}
this.database(this.selectName);
this.accessMethod();//获取连接方式
this.$refs.establishDia.database(this.selectName);
this.$refs.establishDia.accessMethod();//获取连接方式
// console.log('this.methodHoverIdx==',this.methodHoverIdx);
// console.log('this.methodCheckedIdx==',this.methodCheckedIdx);
},
//获取数据库详情
database(name){
let data = new FormData();
data.append('name', name);
database(data).then(res=>{
if (res) {
console.log('数据库详情：',res);
this.dataBaseDetail=res;
// this.createModel=res;
// 选出需要传到后台的参数集合
this.chooseParams(this.dataBaseDetail);
}else {
this.$message.error(res.errMsg)
}
})
},
// database(name){
// let data = new FormData();
// data.append('name', name);
// database(data).then(res=>{
// if (res) {
// console.log('数据库详情：',res);
// this.dataBaseDetail=res;
// // this.createModel=res;
// // 选出需要传到后台的参数集合
// this.chooseParams(this.dataBaseDetail);
// }else {
// this.$message.error(res.errMsg)
// }
// })
// },
// 测试
// test(){
......@@ -1251,7 +1269,9 @@ export default {
console.log('返回数据：',res);
if (res.success) {
this.$message.success('连接成功!');
this.explorer('');
this.handleCloseOne();//关闭弹窗
// this.linkCheckedIdx=this.initlinkTypeIdx;//关闭弹窗后初始化选择的数据
}else {
this.$message.error(res.errMsg)
......@@ -1348,17 +1368,17 @@ export default {
removeTab(){},
//选出要传给后台的参数集合便于编辑方法 check
chooseParams(objParams){
var newObject={};
for(var key in this.createModel){
console.log(key,this.createModel[key])
newObject[key]=objParams[key];
}
console.log('新的对象====',newObject);
this.createModel=newObject;
console.log('编辑赋值当前对象====',this.createModel);
this.accessData();//获取连接类型
},
// chooseParams(objParams){
// var newObject={};
// for(var key in this.createModel){
// console.log(key,this.createModel[key])
// newObject[key]=objParams[key];
// }
// console.log('新的对象====',newObject);
// this.createModel=newObject;
// console.log('编辑赋值当前对象====',this.createModel);
// this.accessData();//获取连接类型
// },
// 资源库信息确定新建
repositoryInfoConfirm(formName){
this.$refs[formName].validate((valid) => {
......@@ -1571,229 +1591,6 @@ export default {
</script>
<style>
.content{
direction: flex;
}
.ef-left-box{
flex:1
}
.el-tabs--card >.el-tabs__header {
margin: 0 !important;
}
.el-tabs--card>.el-tabs__header {
margin: 0;
}
.el-tabs__item {
background-color:#DEECFD;
color:#1567A9;
}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
border-bottom: 1px solid #dce3e8;
}
.el-tabs__item.is-active {
color: #FFDEAD;
}
.el-tabs--card>.el-tabs__header {
border-bottom: 1px solid #E4E7ED;
}
.sel-content{
min-height: 81vh;
border: 1px solid #dce3e8;
}
.sel-menu-bar{
background-color: #D6E3F2;
}
.sel-btn{
display: inline-block;
padding: 7px 15px;
font-size: 12px;
border-radius: 3px;
}
.text-center{
text-align:center;
}
.drop-item{
padding:10px 5px;
}
.space-gap{
margin-right:5px;
}
.rg{
text-align: right;
}
.el-tabs__item.is-active{
color:#4074AF;
font-weight:bold;
}
/* 拖拽相关样式start-------------------- */
/*包围div样式*/
.box {
width: 100%;
height: 100%;
margin: 1% 0px;
overflow: hidden;
padding:0 15px;
min-height: 86vh;
display: flex;
}
/*左侧div样式*/
.left {
/*左侧初始化宽度*/
width:350px; /*左侧初始化宽度*/
height: 100%;
background: #FFFFFF;
float: left;
min-height: 86vh;
}
/*拖拽区div样式*/
.resize {
cursor: col-resize;
background-color: #d6d6d6;
border-radius: 5px;
margin-top: -10px;
width: 5px;
background-size: cover;
background-position: center;
font-size: 32px;
color: white;
background-color:white;
min-height: 86vh;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
color: #444444;
}
/*右侧div'样式*/
.mid {
flex:1;
/*右侧初始化宽度*/
height: 100%;
background: #fff;
/* box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11); */
/* min-height: 81vh; */
min-height: 79vh;
/* margin-top:4vh; */
margin-top:5vh;
border: 1px solid #dce3e8;
}
/* 拖拽相关样式end-------------------- */
.el-dialog__header{
background-color:#D2E0F1;
}
.el-dialog__body{
padding:15px 15px;
}
.btn-pointer{
padding:5px;
border-radius:5px;
}
.btn-pointer:hover {
border:1px solid #AAC8F1;
box-shadow: 2px 2px 2px 2px #AAC8F1;
}
.table-container{
margin-top:15px;
border:1px solid #D2E0F1;
overflow-y: scroll;
height:300px;
}
.box ul{
margin:0;
padding:0;
}
.box ul li{
list-style: none;
height:30px;
line-height:30px;
padding:0 10px;
white-space: nowrap;
}
.table-container-repos{
height:100px;
margin-top:0;
}
.choose-container{
width:200px;
display:flex;
flex-direction:column;
margin-right:10px;
}
.left-container{
width:180px;
border:1px solid #D2E0F1;
overflow-y:scroll;
height:520px;
margin-right:10px;
}
.leftv{
border:1px solid #D2E0F1;
height:250px;
}
.rightv{
border:1px solid #D2E0F1;
height:150px;
}
.input-container{
flex:1;
border:1px solid #D2E0F1;
position: relative;
padding:15px;
}
.input-container-title{
background-color:white;
padding:0 5px;
position:absolute;
top:-8px;
left: 15px;
font-weight:bold;
color: #15428B;
}
.boxtitle{
padding:5px 10px;
background-color:#CFDFF3;
}
.scroll-y{
overflow-y: scroll;
}
.type-checked{
background-color:#8888FF;
color: #fff;
}
.check-group{
padding:5px;
background-color: #D1DDEF;
}
.checkbox-sty{
display: block;
padding:5px 0;
}
.file-container{
height:400px;
border:1px solid #D2E0F1;
}
.btn.hover{
cursor: pointer;
background-color: #EEEEEE;
}
.hover{
cursor: pointer;
background-color: #EEEEEE;
}
.btn.checked{
background-color:#8888FF;
color: #fff;
}
@import url(./kettle.css);
</style>
\ No newline at end of file
src/views/kettle/kettle.css
/* .trans { background-image: url(/web/ui/images/spoongraph.svg?scale=16) !important;} */
\ No newline at end of file
.content{
direction: flex;
}
.ef-left-box{
flex:1
}
.el-tabs--card >.el-tabs__header {
margin: 0 !important;
}
.el-tabs--card>.el-tabs__header {
margin: 0;
}
.el-tabs__item {
background-color:#DEECFD;
color:#1567A9;
}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
border-bottom: 1px solid #dce3e8;
}
.el-tabs__item.is-active {
color: #FFDEAD;
}
.el-tabs--card>.el-tabs__header {
border-bottom: 1px solid #E4E7ED;
}
.sel-content{
min-height: 81vh;
border: 1px solid #dce3e8;
}
.sel-menu-bar{
background-color: #D6E3F2;
}
.sel-btn{
display: inline-block;
padding: 7px 15px;
font-size: 12px;
border-radius: 3px;
}
.text-center{
text-align:center;
}
.drop-item{
padding:10px 5px;
}
.space-gap{
margin-right:5px;
}
.rg{
text-align: right;
}
.el-tabs__item.is-active{
color:#4074AF;
font-weight:bold;
}
/* 拖拽相关样式start-------------------- */
/*包围div样式*/
.box {
width: 100%;
height: 100%;
margin: 1% 0px;
overflow: hidden;
padding:0 15px;
min-height: 86vh;
display: flex;
}
/*左侧div样式*/
.left {
/*左侧初始化宽度*/
width:350px; /*左侧初始化宽度*/
height: 100%;
background: #FFFFFF;
float: left;
min-height: 86vh;
}
/*拖拽区div样式*/
.resize {
cursor: col-resize;
background-color: #d6d6d6;
border-radius: 5px;
margin-top: -10px;
width: 5px;
background-size: cover;
background-position: center;
font-size: 32px;
color: white;
background-color:white;
min-height: 86vh;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
color: #444444;
}
/*右侧div'样式*/
.mid {
flex:1;
/*右侧初始化宽度*/
height: 100%;
background: #fff;
/* box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11); */
/* min-height: 81vh; */
min-height: 79vh;
/* margin-top:4vh; */
margin-top:5vh;
border: 1px solid #dce3e8;
}
/* 拖拽相关样式end-------------------- */
.el-dialog__header{
background-color:#D2E0F1;
}
.el-dialog__body{
padding:15px 15px;
}
.btn-pointer{
padding:5px;
border-radius:5px;
}
.btn-pointer:hover {
border:1px solid #AAC8F1;
box-shadow: 2px 2px 2px 2px #AAC8F1;
}
.table-container{
margin-top:15px;
border:1px solid #D2E0F1;
overflow-y: scroll;
height:300px;
}
.box ul{
margin:0;
padding:0;
}
.box ul li{
list-style: none;
height:30px;
line-height:30px;
padding:0 10px;
white-space: nowrap;
}
.table-container-repos{
height:100px;
margin-top:0;
}
.choose-container{
width:200px;
display:flex;
flex-direction:column;
margin-right:10px;
}
.left-container{
width:180px;
border:1px solid #D2E0F1;
overflow-y:scroll;
height:520px;
margin-right:10px;
}
.leftv{
border:1px solid #D2E0F1;
height:250px;
}
.rightv{
border:1px solid #D2E0F1;
height:150px;
}
.input-container{
flex:1;
border:1px solid #D2E0F1;
position: relative;
padding:15px;
}
.input-container-title{
background-color:white;
padding:0 5px;
position:absolute;
top:-8px;
left: 15px;
font-weight:bold;
color: #15428B;
}
.boxtitle{
padding:5px 10px;
background-color:#CFDFF3;
}
.scroll-y{
overflow-y: scroll;
}
/* .type-checked{
background-color:#8888FF;
color: #fff;
} */
.check-group{
padding:5px;
background-color: #D1DDEF;
}
.checkbox-sty{
display: block;
padding:5px 0;
}
.file-container{
height:400px;
border:1px solid #D2E0F1;
}
.btn.hover{
cursor: pointer;
background-color: #EEEEEE;
}
.hover{
cursor: pointer;
background-color: #EEEEEE;
}
.btn.checked{
background-color:#8888FF;
color: #fff;
}
\ No newline at end of file
src/views/output-dialog/table-out.vue
......@@ -16,7 +16,6 @@
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="基本配置" name="content">
<el-form ref="form" :model="form" label-width="200px">
<el-form-item label="数据库连接:">
......@@ -31,7 +30,7 @@
<el-button size="mini">编辑</el-button></el-col
>
<el-col class="line" :span="3">
<el-button size="mini">新建</el-button></el-col
<el-button size="mini" @click="newAdd">新建</el-button></el-col
>
<el-col class="line" :span="3">
<el-button size="mini">向导</el-button></el-col
......@@ -272,6 +271,10 @@ export default ({
handleClose(){
this.$emit("update:tableOutPutVisible", false);
},
newAdd(){
console.log('新建弹窗');
this.$emit("fathertrans", true);//表输出组件要传回父组件的值
},
confirm(){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment