Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
E
ETL-admin
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
莫晓莉
ETL-admin
Commits
65b5bc87
Commit
65b5bc87
authored
Mar 11, 2021
by
莫晓莉
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
444
parent
36ad693a
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
90 additions
and
880 deletions
+90
-880
src/api/kettle/link.js
+88
-0
src/main.js
+2
-0
src/views/kettle/index.vue
+0
-880
No files found.
src/api/kettle/link.js
0 → 100644
View file @
65b5bc87
import
request
from
'@/utils/request'
//获取连接类型
export
function
types
(
data
)
{
return
request
({
url
:
'etlweb/repository/types'
,
data
,
method
:
'post'
})
}
//获取历史连接的资源库列表
export
function
getLinkList
(
data
)
{
return
request
({
url
:
'etlweb/repository/list'
,
data
,
method
:
'post'
})
}
//获取连接方式列表
export
function
accessMethod
(
data
)
{
return
request
({
url
:
'etlweb/database/accessMethod'
,
data
,
method
:
'post'
})
}
//获取连接类型
export
function
accessData
(
data
)
{
return
request
({
url
:
'etlweb/database/accessData'
,
data
,
method
:
'post'
})
}
//提交数据
export
function
create
(
data
)
{
return
request
({
url
:
'etlweb/database/create'
,
data
,
method
:
'post'
})
}
//编辑数据库
export
function
check
(
data
)
{
return
request
({
url
:
'etlweb/database/check'
,
data
,
method
:
'post'
})
}
//查询获取已经建立的数据库列表
export
function
listNames
(
data
)
{
return
request
({
url
:
'etlweb/database/listNames'
,
data
,
method
:
'post'
})
}
// 根据数据库名查询已经建立的数据库详情即编辑数据库
export
function
database
(
data
)
{
return
request
({
url
:
'etlweb/repository/database'
,
data
,
method
:
'post'
})
}
//连接资源库
export
function
login
(
data
){
return
request
({
url
:
'etlweb/repository/login'
,
data
,
method
:
'post'
})
}
src/main.js
View file @
65b5bc87
...
...
@@ -33,6 +33,8 @@ import moment from 'moment'
import
jsPlump
from
'jsplumb'
Vue
.
use
(
jsPlump
);
// 引入自定义指令
// import './utils/dialog.js';
Vue
.
use
(
VueHighlightJS
)
Vue
.
use
(
mavonEditor
)
...
...
src/views/kettle/index.vue
deleted
100644 → 0
View file @
36ad693a
<
template
>
<div
class=
"box"
>
<div
class=
"left"
>
<!--
<el-tabs
v-model=
"activeName"
type=
"card"
@
tab-click=
"handleClick"
>
-->
<el-tabs
v-model=
"activeName"
type=
"card"
>
<el-tab-pane
label=
"资源库"
name=
"first"
>
<div
class=
"sel-content"
>
<div
class=
"sel-menu-bar"
>
<el-dropdown
size=
"small"
placement=
"bottom"
>
<span
class=
"sel-btn"
>
新建
<i
class=
"el-icon-caret-bottom el-icon--right"
></i>
</span>
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-item
command=
"password"
>
<template>
<i
style=
"color:red;font-weight:bold;font-size:15px;"
class=
"el-icon-refresh"
></i>
新建转换
</
template
>
</el-dropdown-item>
<el-dropdown-item
command=
"logout"
>
<
template
>
<i
style=
"color:#F99C1C;font-weight:bold;font-size:15px;"
class=
"el-icon-refresh-left"
></i>
新建作业
</
template
>
</el-dropdown-item>
<el-dropdown-item
style=
"text-align:right"
>
新建目录
</el-dropdown-item>
<el-dropdown-item
class=
"text-center"
>
打开
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown
size=
"small"
placement=
"bottom"
>
<span
class=
"sel-btn"
>
资源库管理
<i
class=
"el-icon-caret-bottom el-icon--right"
></i>
</span>
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-item
@
click
.
native=
"showlinkModal()"
>
连接资源库
</el-dropdown-item>
<el-dropdown-item
>
管理资源库
</el-dropdown-item>
<el-dropdown-item
>
断开资源库
</el-dropdown-item>
<el-dropdown-item>
导出资源库
</el-dropdown-item>
<el-dropdown-item>
导入资源库
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown
size=
"small"
placement=
"bottom"
>
<span
class=
"sel-btn"
>
帮组
<i
class=
"el-icon-caret-bottom el-icon--right"
></i>
</span>
<el-dropdown-menu
slot=
"dropdown"
>
<el-dropdown-item>
语言切换
</el-dropdown-item>
<el-dropdown-item
>
关于
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- 文件夹存放区域start-->
<el-tree
:data=
"jobTreeList"
:auto-expand-parent=
"true"
:check-strictly=
"true"
:default-expand-all=
"false"
node-key=
"id"
ref=
"tree"
:props=
"defaultProps"
:highlight-current=
"true"
>
<!-- el-icon-folder -->
<!-- <span class="custom-tree-node" slot-scope="{node,data}">
<span>
<i :class="data.icon"></i>{{ node.label }}
</span>
</span> -->
<span
class=
"custom-tree-node"
slot-scope=
"{node,data}"
>
<span>
<i
class=
"el-icon-folder"
></i>
{{ node.label }}
</span>
</span>
</el-tree>
<!-- 文件夹存放区域end -->
</div>
</el-tab-pane>
<el-tab-pane
label=
"核心对象"
name=
"second"
>
<div
class=
"sel-content"
>
核心对象
</div>
</el-tab-pane>
</el-tabs>
</div>
<div
class=
"resize"
title=
"收缩侧边栏"
>
...
</div>
<div
class=
"mid"
>
gggggg
</div>
<!-- 连接资源库弹窗start -->
<el-dialog
title=
"资源库连接"
:visible
.
sync=
"dialogVisibleOne"
width=
"500px"
:before-close=
"handleClose"
>
<div>
<el-link
@
click
.
native=
"addRepository()"
class=
"btn-pointer"
:underline=
"false"
>
新增资源库
</el-link>
<el-link
class=
"btn-pointer"
:underline=
"false"
>
修改资源库
</el-link>
<el-link
class=
"btn-pointer"
:underline=
"false"
>
删除资源库
</el-link>
</div>
<div
class=
"table-container"
>
<ul
class=
"infinite-list"
style=
"overflow:auto"
>
<li
v-for=
"(item,index) in count"
:key=
"index"
class=
"infinite-list-item"
>
{{ item }}
</li>
</ul>
</div>
<el-form
style=
"margin-top:15px;"
label-position=
"left"
:model=
"ruleForm"
status-icon
ref=
"ruleForm"
label-width=
"100px"
class=
"demo-ruleForm"
>
<el-form-item
label=
"用户名"
prop=
"pass"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"密码"
prop=
"checkPass"
>
<el-input
type=
"password"
v-model=
"ruleForm.checkPass"
autocomplete=
"off"
></el-input>
</el-form-item>
</el-form>
<span
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"dialogVisibleOne = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"dialogVisibleOne = false"
>
确 定
</el-button>
</span>
</el-dialog>
<!-- 连接资源库弹窗end -->
<!-- 新增资源库弹窗start -->
<el-dialog
title=
"选择仓库类型"
:visible
.
sync=
"dialogVisibleTwo"
width=
"650px"
top=
"15%"
:before-close=
"closeRepository"
>
<div
class=
"table-container table-container-repos"
>
<ul
class=
"infinite-list"
style=
"overflow:auto"
>
<li
v-for=
"(item,index) in count"
:key=
"index"
class=
"infinite-list-item"
>
{{ item }}
</li>
</ul>
</div>
<span
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"FileModal = true"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"dialogVisibleThree = true"
>
确 定
</el-button>
</span>
</el-dialog>
<!-- 新增资源库弹窗end -->
<!-- 资源库信息start -->
<el-dialog
title=
"资源库信息"
:visible
.
sync=
"dialogVisibleThree"
width=
"600px"
top=
"19%"
:before-close=
"closeFourth"
>
<el-form
style=
"margin-top:15px;"
:model=
"ruleForm"
status-icon
ref=
"ruleForm"
label-width=
"150px"
class=
"demo-ruleForm"
>
<el-form-item
label=
"选择数据库连接"
>
<el-select
v-model=
"ruleForm.region"
placeholder=
"请选择选择数据库连接"
>
<el-option
label=
"区域一"
value=
"shanghai"
></el-option>
<el-option
label=
"区域二"
value=
"beijing"
></el-option>
</el-select>
<span
style=
"margin-left:15px;"
>
<el-button
@
click=
"dialogVisibleThree = false"
>
编辑
</el-button>
<el-button
@
click=
"dialogVisibleFourth = true"
>
新建
</el-button>
<el-button
@
click=
"dialogVisibleThree = false"
>
删除
</el-button>
</span>
</el-form-item>
<el-form-item
label=
"资源库标识"
prop=
"pass"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"资源库名称"
prop=
"checkPass"
>
<el-input
type=
"password"
v-model=
"ruleForm.checkPass"
autocomplete=
"off"
></el-input>
</el-form-item>
</el-form>
<span
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"dialogVisibleThree = false"
>
确 定
</el-button>
<el-button
@
click=
"dialogVisibleThree = false"
>
创建或更新
</el-button>
<el-button
type=
"primary"
@
click=
"dialogVisibleThree = false"
>
删 除
</el-button>
<el-button
@
click=
"dialogVisibleThree = false"
>
取 消
</el-button>
<!-- <el-button type="primary" @click="dialogVisibleTwo = false">确 定</el-button> -->
</span>
</el-dialog>
<!-- 资源库信息end -->
<!-- 新建数据库连接start -->
<el-dialog
title=
"数据库连接"
:visible
.
sync=
"dialogVisibleFourth"
width=
"800px"
top=
"5%"
:before-close=
"closeFourth"
>
<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.name }}
</li>
</ul>
</div>
<!-- 右边start -->
<el-form
style=
"flex:1;"
label-width=
"80px"
>
<div
v-if=
"nowTypeIndex==0"
>
<el-form-item
label=
"连接名称"
prop=
"pass"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
</el-form-item>
<div
style=
"display:flex;"
>
<div
class=
"choose-container"
>
<div>
<div
class=
"boxtitle"
>
连接类型
</div>
<ul
class=
"leftv scroll-y"
>
<li>
111
</li>
<li>
222
</li>
<li>
333
</li>
<li>
444
</li>
<li>
555
</li>
</ul>
</div>
<div
style=
"margin-top:15px;"
>
<div
class=
"boxtitle"
>
连接方式
</div>
<ul
class=
"rightv scroll-y"
>
<li>
111
</li>
<li>
222
</li>
<li>
333
</li>
<li>
444
</li>
<li>
555
</li>
</ul>
</div>
</div>
<div
class=
"input-container"
>
<div
class=
"input-container-title"
>
设置
</div>
<el-form-item
label=
"主机名称:"
prop=
"pass"
label-width=
"90px"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"数据库名称:"
prop=
"pass"
label-width=
"90px"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"数据表空间:"
prop=
"pass"
label-width=
"90px"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"索引表空间:"
prop=
"pass"
label-width=
"90px"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"端口号:"
prop=
"pass"
label-width=
"90px"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"用户名:"
prop=
"pass"
label-width=
"90px"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"密码:"
prop=
"pass"
label-width=
"90px"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
</el-form-item>
</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=
"dialogVisibleTwo = false"
>
取 消
</el-button>
<el-button
@
click=
"dialogVisibleTwo = false"
>
测 试
</el-button>
<el-button
@
click=
"dialogVisibleTwo = false"
>
特征列表
</el-button>
<el-button
@
click=
"dialogVisibleTwo = false"
>
浏 览
</el-button>
<el-button
@
click=
"dialogVisibleTwo = false"
>
确 定
</el-button>
</span>
</el-dialog>
<!-- 新建数据库连接end -->
<!-- 文件资源库start -->
<el-dialog
title=
"文件资源库设置"
:visible
.
sync=
"FileModal"
width=
"600px"
top=
"19%"
:before-close=
"closeFileModal"
>
<el-form
style=
"margin-top:15px;"
:model=
"ruleForm"
status-icon
ref=
"ruleForm"
label-width=
"150px"
class=
"demo-ruleForm"
>
<el-form-item
label=
"根目录"
prop=
"pass"
>
<div
style=
"display:flex;"
>
<el-input
type=
"password"
v-model=
"ruleForm.pass"
autocomplete=
"off"
></el-input>
<span
style=
"margin-left:15px;"
>
<el-button
@
click=
"FileModalScan = true"
>
浏览
</el-button>
</span>
</div>
</el-form-item>
<el-form-item
label=
"只读资源库?:"
prop=
"checkPass"
>
<el-checkbox
:indeterminate=
"isIndeterminate"
></el-checkbox>
</el-form-item>
<el-form-item
label=
"不显示隐藏文件:"
prop=
"checkPass"
>
<el-checkbox
:indeterminate=
"isIndeterminate"
></el-checkbox>
</el-form-item>
<el-form-item
label=
"资源库标志"
prop=
"checkPass"
>
<el-input
type=
"password"
v-model=
"ruleForm.checkPass"
autocomplete=
"off"
></el-input>
</el-form-item>
<el-form-item
label=
"名称"
prop=
"checkPass"
>
<el-input
type=
"password"
v-model=
"ruleForm.checkPass"
autocomplete=
"off"
></el-input>
</el-form-item>
</el-form>
<span
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"FileModal = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"FileModal = false"
>
确 定
</el-button>
</span>
</el-dialog>
<!-- 文件资源库end -->
<!-- 浏览start -->
<el-dialog
title=
"文件浏览器"
:visible
.
sync=
"FileModalScan"
width=
"450px"
top=
"19%"
:before-close=
"closeFileModalScan"
>
<div
class=
"file-container"
>
<!-- 文件夹存放区域start-->
<el-tree
:data=
"jobTreeList"
:auto-expand-parent=
"true"
:check-strictly=
"true"
:default-expand-all=
"false"
node-key=
"id"
ref=
"tree"
:props=
"defaultProps"
:highlight-current=
"true"
>
<!-- el-icon-folder -->
<!-- <span class="custom-tree-node" slot-scope="{node,data}">
<span>
<i :class="data.icon"></i>{{ node.label }}
</span>
</span> -->
<span
class=
"custom-tree-node"
slot-scope=
"{node,data}"
>
<span>
<i
class=
"el-icon-folder"
></i>
{{ node.label }}
</span>
</span>
</el-tree>
<!-- 文件夹存放区域end -->
</div>
<span
slot=
"footer"
class=
"dialog-footer"
style=
"display:flex;"
>
<el-select
style=
"flex:1;margin-right:25px;"
v-model=
"ruleForm.region"
placeholder=
"请选择选择数据库连接"
>
<el-option
label=
"区域一"
value=
"shanghai"
></el-option>
<el-option
label=
"区域二"
value=
"beijing"
></el-option>
</el-select>
<el-button
@
click=
"FileModalScan = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"FileModalScan = false"
>
确 定
</el-button>
</span>
</el-dialog>
<!-- 浏览end -->
</div>
</template>
<
script
>
import
'@/utils/dialog.js'
;
export
default
{
data
()
{
return
{
checkModel
:[],
visible
:
true
,
dialogDrag
:
false
,
dialog
:
{
// dialog显示隐藏
dialogVisible
:
false
,
dialogDrag
:
true
,
// 可拖拽
dialogChange
:
true
,
// 可拉伸
title
:
'详情'
},
activeName
:
'first'
,
//当前选择的标签
jobTreeList
:[
{
path
:
'f0'
,
id
:
'1'
,
parent
:
'0'
,
lasted
:
false
,
},
{
path
:
'f01'
,
id
:
'2'
,
parent
:
'1'
,
lasted
:
true
,
},
{
path
:
'f02'
,
id
:
'3'
,
parent
:
'1'
,
lasted
:
true
,
},
{
path
:
'f021'
,
id
:
'6'
,
parent
:
'3'
,
lasted
:
false
,
},
{
path
:
'f021'
,
id
:
'7'
,
parent
:
'6'
,
lasted
:
false
,
},
{
path
:
'f40'
,
id
:
'4'
,
parent
:
'0'
,
lasted
:
false
,
},
{
path
:
'f41'
,
id
:
'5'
,
parent
:
'4'
,
lasted
:
true
,
}
],
defaultProps
:
{
label
:
'path'
,
children
:
'children'
,
},
dialogVisibleOne
:
false
,
//链接资源库弹窗
ruleForm
:
{
pass
:
''
,
checkPass
:
''
,
age
:
''
},
dialogVisibleTwo
:
false
,
//新增资源库弹窗
count
:[
'1111111111111111'
,
'2222222222222222'
],
dialogVisibleThree
:
false
,
//资源库信息弹窗
dialogVisibleFourth
:
false
,
linkType
:[
{
id
:
1
,
name
:
'一般'
},
{
id
:
2
,
name
:
'高级'
},
{
id
:
3
,
name
:
'选项'
},
{
id
:
4
,
name
:
'连接池'
},
{
id
:
5
,
name
:
'集群'
}
],
nowTypeIndex
:
0
,
//当前选中数据库类型
FileModal
:
false
,
//文件资源库弹窗
FileModalScan
:
false
,
//浏览弹窗
};
},
// create(){
// this.treeRevert(this.jobTreeList);
// },
mounted
()
{
this
.
dragControllerDiv
();
this
.
treeRevert
(
this
.
jobTreeList
);
},
methods
:
{
// handleClick(tab, event) {
// console.log(tab, event);
// },
// handleCommand(command) {
// if (command == "password"){
// this.changePassword()
// }else {
// this.logout()
// }
// },
// async logout() {
// this.$message("点击退出");
// },
// changePassword(){
// this.$message("点击修改密码");
// },
// load () {
// this.count += 2
// },
dragControllerDiv
:
function
()
{
var
resize
=
document
.
getElementsByClassName
(
'resize'
);
var
left
=
document
.
getElementsByClassName
(
'left'
);
var
mid
=
document
.
getElementsByClassName
(
'mid'
);
var
box
=
document
.
getElementsByClassName
(
'box'
);
for
(
let
i
=
0
;
i
<
resize
.
length
;
i
++
)
{
// 鼠标按下事件
resize
[
i
].
onmousedown
=
function
(
e
)
{
//颜色改变提醒
// resize[i].style.background = '#818181';
var
startX
=
e
.
clientX
;
resize
[
i
].
left
=
resize
[
i
].
offsetLeft
;
// 鼠标拖动事件
document
.
onmousemove
=
function
(
e
)
{
var
endX
=
e
.
clientX
;
var
moveLen
=
resize
[
i
].
left
+
(
endX
-
startX
);
// (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
var
maxT
=
box
[
i
].
clientWidth
-
resize
[
i
].
offsetWidth
;
// 容器宽度 - 左边区域的宽度 = 右边区域的宽度
if
(
moveLen
<
32
)
moveLen
=
32
;
// 左边区域的最小宽度为32px
if
(
moveLen
>
maxT
-
150
)
moveLen
=
maxT
-
150
;
//右边区域最小宽度为150px
resize
[
i
].
style
.
left
=
moveLen
;
// 设置左侧区域的宽度
for
(
let
j
=
0
;
j
<
left
.
length
;
j
++
)
{
left
[
j
].
style
.
width
=
moveLen
+
'px'
;
mid
[
j
].
style
.
width
=
(
box
[
i
].
clientWidth
-
moveLen
-
10
)
+
'px'
;
}
};
// 鼠标松开事件
document
.
onmouseup
=
function
(
evt
)
{
//颜色恢复
// resize[i].style.background = '#d6d6d6';
document
.
onmousemove
=
null
;
document
.
onmouseup
=
null
;
resize
[
i
].
releaseCapture
&&
resize
[
i
].
releaseCapture
();
//当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
};
resize
[
i
].
setCapture
&&
resize
[
i
].
setCapture
();
//该函数在属于当前线程的指定窗口里设置鼠标捕获
return
false
;
};
}
},
//数据转换
treeRevert
(
arrayList
){
console
.
log
(
'传入数据============='
,
arrayList
);
let
formatObj
=
arrayList
.
reduce
((
pre
,
cur
)
=>
{
return
{...
pre
,
[
cur
[
'id'
]]:
cur
}
},
{});
console
.
log
(
formatObj
);
let
formatArray
=
arrayList
.
reduce
((
arr
,
cur
)
=>
{
// let pid = cur.pid ? cur.pid : 0;
let
pid
=
cur
.
parent
?
cur
.
parent
:
0
;
let
parent
=
formatObj
[
pid
];
cur
.
disabled
=
!
cur
.
lasted
;
if
(
parent
)
{
parent
.
children
?
parent
.
children
.
push
(
cur
)
:
parent
.
children
=
[
cur
];
}
else
{
arr
.
push
(
cur
)
}
return
arr
;
},
[]);
console
.
log
(
'树形数据============='
,
formatArray
);
this
.
jobTreeList
=
formatArray
;
},
// 点击链接资源库显示新建资源库弹窗
showlinkModal
(){
this
.
dialogVisibleOne
=
true
;
// this.dialog.dialogVisible=true;
},
handleClose
(){
this
.
dialogVisibleOne
=
false
;
},
//新增资源库
addRepository
(){
this
.
dialogVisibleTwo
=
true
;
// this.dialog.dialogVisible=true;
},
closeRepository
(){
this
.
dialogVisibleTwo
=
false
;
},
//新增资源库
addRepositoryInfo
(){
this
.
dialogVisibleThree
=
true
;
// this.dialog.dialogVisible=true;
},
closeRepositoryInfo
(){
this
.
dialogVisibleThree
=
false
;
},
//新增资源库
addFourth
(){
this
.
dialogVisibleFourth
=
true
;
},
closeFourth
(){
this
.
dialogVisibleFourth
=
false
;
},
chooseType
(
index
){
this
.
nowTypeIndex
=
index
;
},
closeFileModal
(){
this
.
FileModal
=
false
;
},
closeFileModalScan
(){
this
.
FileModalScan
=
false
;
},
}
};
</
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
;
}
/* 拖拽相关样式 */
/*包围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
;
margin-top
:
4vh
;
border
:
1px
solid
#dce3e8
;
}
/* 弹窗样式 */
/* .btn-pointer:hover{
cursor: pointer;
padding:5px 8px;
border:1px soild red;
} */
.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
:
auto
;
height
:
300px
;
}
ul
{
margin
:
0
;
padding
:
0
;
}
ul
li
{
list-style
:
none
;
height
:
30px
;
line-height
:
30px
;
padding
:
0
10px
;
white-space
:
nowrap
;
}
ul
li
:hover
{
cursor
:
pointer
;
background-color
:
#EEEEEE
;
}
.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
;
}
</
style
>
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment