192 lines
6.2 KiB
HTML
192 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<!-- import CSS -->
|
|
<link rel="stylesheet" href="../apps/com.awspaas.user.apps.yili.integration/components/icon.css">
|
|
|
|
<script>
|
|
var sid = '<#sid>';
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="main">
|
|
<div id="leftDiv" ref="searchDiv">
|
|
<div class="cartTitle">
|
|
<span class="title">架构视图</span>
|
|
<div style="float:right; font-size: 14px;">
|
|
文件类型：
|
|
<el-select v-model="selectvalue" placeholder="请选择" @change="selcetchangetype" >
|
|
<el-option
|
|
v-for="item in selectoptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value" >
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div id="processList" v-loading="g_loading" style="width: 100%; height: 100%" >
|
|
<div class="collspse">
|
|
<el-tree
|
|
:data="options"
|
|
:props="defaultProps1"
|
|
node-key="ID"
|
|
:default-expanded-keys="defaultkey">
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
<span v-if="node.data.path">
|
|
<a :href="node.data.path" style="color: #2E74B5" target="_blank">
|
|
<img src="../apps/com.awspaas.user.apps.yili.integration/static/icon2.png" v-if="node.data.fileType == 'processFile'" style="vertical-align: middle; width: 15px;height: 15px;border-radius:100%" />
|
|
<img src="../apps/com.awspaas.user.apps.yili.integration/static/icon1.png" v-if="node.data.fileType == 'policyFile'" style="vertical-align: middle; width: 15px;height: 15px;border-radius:100%" />
|
|
<img src="../apps/com.awspaas.user.apps.yili.integration/static/icon4.png" v-if="node.data.fileType == 'guideFile'" style="vertical-align: middle; width: 15px;height: 15px;border-radius:100%" />
|
|
<img src="../apps/com.awspaas.user.apps.yili.integration/static/icon3.png" v-if="node.data.fileType == 'formFile'" style="vertical-align: middle; width: 15px;height: 15px;border-radius:100%" />
|
|
{{node.data.name}}
|
|
</a>
|
|
</span>
|
|
<span v-else>
|
|
{{node.data.name}}
|
|
</span>
|
|
<label>
|
|
{{node.data.desc}}
|
|
</label>
|
|
</span>
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<!-- import Vue before Element -->
|
|
<script src="../apps/com.awspaas.user.apps.yili.integration/components/vue.js"></script>
|
|
<script src="../apps/com.awspaas.user.apps.yili.integration/components/jquery.js"></script>
|
|
<!-- import JavaScript -->
|
|
<script src="../apps/com.awspaas.user.apps.yili.integration/components/index.js"></script>
|
|
<script src="../apps/com.awspaas.user.apps.yili.integration/components/js.js"></script>
|
|
<script src="../apps/com.awspaas.user.apps.yili.integration/components/qs.js"></script>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
name: "Department",
|
|
data() {
|
|
return {
|
|
g_loading: true,
|
|
filterText: '',
|
|
selectoptions: [],
|
|
selectvalue: '',
|
|
options: [],
|
|
defaultkey: [],
|
|
defaultProps1: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
filetype: '',
|
|
list:[],
|
|
};
|
|
},
|
|
created() {
|
|
this.filebind()
|
|
this.leftTreedatabind();
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val);
|
|
}
|
|
},
|
|
methods: {
|
|
filebind(){
|
|
let _this = this;
|
|
$.ajax({
|
|
url:api.listviewselect,
|
|
data: {},
|
|
dataType: "json",
|
|
type: "post",
|
|
async: true,
|
|
success: function (res) {
|
|
_this.g_loading = false
|
|
if(res.data.fileTypes.length > 0) {
|
|
for (let i = 0; i < res.data.fileTypes.length; i++) {
|
|
let obj = {
|
|
value: res.data.fileTypes[i].termsKey,
|
|
label: res.data.fileTypes[i].termsVal
|
|
}
|
|
_this.selectoptions.push(obj)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
leftTreedatabind() {
|
|
let _this = this;
|
|
let qs = Qs;
|
|
_this.g_loading = false
|
|
let params = {
|
|
fileType: _this.filetype
|
|
}
|
|
$.ajax({
|
|
url:api.listviewright,
|
|
data: qs.stringify(params),
|
|
dataType: "json",
|
|
type: "post",
|
|
async: true,
|
|
success: function (res) {
|
|
_this.g_loading = false
|
|
_this.list = res.data.fileMaps;
|
|
if (_this.list.length > 0) {
|
|
_this.options = _this.list;
|
|
_this.list.forEach(element => {
|
|
_this.defaultkey.push(element.ID)
|
|
});
|
|
|
|
}
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
selcetchangetype(e) {
|
|
this.filetype = this.selectvalue
|
|
this.options = []
|
|
this.leftTreedatabind()
|
|
},
|
|
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
#main {
|
|
margin-top: 20px;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
#leftDiv {
|
|
height:100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 20px 30px;
|
|
}
|
|
#leftDiv .cartTitle{
|
|
padding-bottom:20px;
|
|
}
|
|
.el-input--suffix .el-input__inner{ height: 35px;line-height: 35px; width: 90%;}
|
|
.el-input__suffix{right: 25px;}
|
|
#leftDiv .cartTitle .title{ font-size: 16px; margin-top: 10px; display: inline-block;}
|
|
/* 左侧手风琴样式 */
|
|
.el-tree-node{margin-bottom: 5px}
|
|
.el-tree-node__content{ background-color: #f1f5fa!important;padding: 4px 10px!important;}
|
|
.el-tree-node__children{margin:0 10px; background: #FFFFFF;}
|
|
.el-tree-node__children .el-tree-node__content{background: #FFFFFF!important; border-bottom: 1px solid #eceff5}
|
|
.custom-tree-node{display: block; width: 100%}
|
|
.custom-tree-node label{position: absolute;right: 40px; font-size: 12px; color: #999999}
|
|
.custom-tree-node a{color: #606266}
|
|
.custom-tree-node{display: block; width: 100%}
|
|
.custom-tree-node label{position: absolute;right: 40px; font-size: 12px; color: #999999}
|
|
.custom-tree-node a{color: #606266}
|
|
|
|
</style>
|
|
</html>
|