462 lines
16 KiB
Plaintext
462 lines
16 KiB
Plaintext
<!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 style="padding-top: 10px; display: inline-block;">部门视图</span>
|
|
<div style="float:right;">
|
|
<div style="float: left;">
|
|
<span style="float: left;line-height: 35px; font-weight:normal; font-size: 14px;">搜索：</span>
|
|
<el-input
|
|
placeholder="输入关键字搜索"
|
|
v-model="filtertreeText">
|
|
<!--<i slot="prefix" class="el-input__icon el-icon-search"></i>-->
|
|
</el-input>
|
|
<el-button type="primary" size="mini" @click="getKeyword()">搜索</el-button>
|
|
</div>
|
|
<div style="float:right">
|
|
<span style="float: left;line-height: 35px; font-weight:normal; font-size: 14px;">文件类型：</span>
|
|
<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>
|
|
<el-button type="primary" size="mini" icon="el-icon-arrow-down" v-if="isExpand==false" @click="expandTree">展开</el-button>
|
|
<el-button type="primary" size="mini" icon="el-icon-arrow-up" v-if="isExpand==true" @click="foldTree">折叠</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="processList" v-loading="g_loading" style="width: 100%; height: 100%" >
|
|
<div class="collspse">
|
|
<el-tree
|
|
:data="options"
|
|
:props="defaultProps1"
|
|
ref="treeNode"
|
|
:filter-node-method="filtertreeNode"
|
|
:default-expand-all="isExpand"
|
|
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 id="rightDiv" ref="rightHeight">
|
|
<div id="rightTop">
|
|
<div id="infoCart">
|
|
<div class="cartTitle" style="margin-bottom:30px">
|
|
<span>基本信息</span>
|
|
</div>
|
|
<div class="cartTab">
|
|
<el-button :class="tab===1?'':'is-plain'" @click="navtab(1)" type="success" size="mini">部门信息</el-button>
|
|
<el-button :class="tab===2?'':'is-plain'" @click="navtab(2)" type="primary" size="mini" icon="el-icon-search">部门查询</el-button>
|
|
<div v-show="tab==1" id="person" v-for="personInfo in personInfos">
|
|
<div class="personInfo leftwidth" style="font-weight:bold">{{ personInfo.title}}</div>
|
|
<div class="personInfo rightwidth">{{ personInfo.text }}</div>
|
|
</div>
|
|
<div v-show="tab==2" id="postSearchCart">
|
|
<div class="search">
|
|
<el-input
|
|
placeholder="输入关键字进行过滤"
|
|
v-model="filterText">
|
|
</el-input>
|
|
</div>
|
|
<div class="" style="height: 400px;overflow-y: auto;overflow-x: hidden;">
|
|
<el-tree
|
|
:data="list"
|
|
show-checkbox
|
|
ref="tree"
|
|
empty-text="该部门下暂无文件"
|
|
node-key="ID"
|
|
:props="defaultProps"
|
|
:filter-node-method="filterNode"
|
|
:default-checked-keys="idjson"
|
|
@check="handleCheckChange"
|
|
>
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
<span :title="node.data.name ">{{ node.data.name }}</span>
|
|
</span>
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="rightBottom">
|
|
<div id="infoCart1">
|
|
<div class="cartTitle">
|
|
<span>部门流程数据统计</span>
|
|
</div>
|
|
<div class="cartTab">
|
|
<div class="postArea">
|
|
<div class="postInfo icon1"><i></i> 制度总数<span> {{ policyFileNum }}</span></div>
|
|
<div class="postInfo icon2"><i></i> 流程总数<span> {{ processFileNum }}</span></div>
|
|
<div class="postInfo icon3"><i></i> 表单模版<span> {{ formFileNum }}</span></div>
|
|
<div class="postInfo icon4"><i></i> 操作指导<span> {{ guideFileNum }}</span></div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<li style="font-size:13px">部门视图默认只展示您所在部门发布的文件，更多其他文件可点击“部门查询”查阅</li>
|
|
</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,
|
|
filtertreeText:'',
|
|
isExpand:false,
|
|
filterText: '',
|
|
selectoptions: [],
|
|
selectvalue: '',
|
|
options: [],
|
|
defaultkey: [],
|
|
defaultProps1: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
tab: 1,
|
|
personInfos: [],
|
|
// 右侧部门树数据
|
|
list: [],
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
selectdept: [],
|
|
filetype: '',
|
|
processFileNum: '',//流程数量
|
|
policyFileNum: '',//制度数量
|
|
guideFileNum: '',//操作指导数量
|
|
formFileNum: '',//表单/模板数量
|
|
treelist: [],
|
|
idjson:[]
|
|
};
|
|
},
|
|
created() {
|
|
this.rightTreedatabind()
|
|
this.leftTreedatabind();
|
|
},
|
|
watch: {
|
|
filtertreeText(val){
|
|
this.$refs.treeNode.filter(val)
|
|
},
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val);
|
|
}
|
|
},
|
|
methods: {
|
|
navtab(e){
|
|
this.tab = e;
|
|
this.selectdept=[]
|
|
this.filetype=''
|
|
this.list=[]
|
|
this.personInfos=[]
|
|
this.selectoptions = []
|
|
this.rightTreedatabind()
|
|
this.leftTreedatabind();
|
|
},
|
|
//展开树
|
|
expandTree(){
|
|
this.isExpand = true
|
|
this.buildData()
|
|
},
|
|
//折叠树
|
|
foldTree(){
|
|
this.isExpand = false
|
|
this.buildData()
|
|
},
|
|
buildData(){
|
|
for(let i=0;i<this.$refs.treeNode.store._getAllNodes().length;i++){
|
|
this.$refs.treeNode.store._getAllNodes()[i].expanded=this.isExpand;
|
|
}
|
|
},
|
|
getKeyword(){
|
|
this.$refs.treeNode.filter(this.filtertreeText);
|
|
},
|
|
//右侧树结构
|
|
rightTreedatabind() {
|
|
let _this = this;
|
|
$.ajax({
|
|
url: api.rightTreeurl,
|
|
data: {},
|
|
dataType: "json",
|
|
type: "post",
|
|
async: true,
|
|
success: function (res) {
|
|
_this.g_loading = false
|
|
_this.list = res.data.deptTree;
|
|
_this.personInfos = res.data.personInfos;
|
|
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.options = []
|
|
let params = {
|
|
dept: _this.selectdept,
|
|
fileType: _this.filetype
|
|
}
|
|
$.ajax({
|
|
url: api.leftTreeurl,
|
|
method: 'post',
|
|
data: qs.stringify(params),
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
}
|
|
})
|
|
.then((res) => {
|
|
_this.g_loading = false
|
|
if (res.data.fileMaps.length > 0) {
|
|
|
|
_this.options = res.data.fileMaps;
|
|
res.data.fileMaps.forEach(element => {
|
|
_this.defaultkey.push(element.ID)
|
|
});
|
|
}
|
|
let count = res.data.filesCount;
|
|
_this.processFileNum = count.processFileNum
|
|
_this.policyFileNum = count.policyFileNum
|
|
_this.guideFileNum = count.guideFileNum
|
|
_this.formFileNum = count.formFileNum
|
|
});
|
|
},
|
|
handleCheckChange(data) {
|
|
this.treelist = this.$refs.tree.getCheckedKeys()
|
|
this.selectdept = JSON.stringify(this.treelist)
|
|
this.options = []
|
|
if (this.treelist.length == 0) {
|
|
this.selectdept = ''
|
|
}
|
|
this.leftTreedatabind()
|
|
},
|
|
selcetchangetype(e) {
|
|
this.filetype = this.selectvalue
|
|
this.options = []
|
|
this.leftTreedatabind()
|
|
},
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.name.indexOf(value) !== -1;
|
|
},
|
|
filtertreeNode(value, data) {
|
|
if (!value) return true;
|
|
return data.name.indexOf(value) !== -1;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
#main {
|
|
margin-top: 20px;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
clear: both;
|
|
overflow: hidden;
|
|
}
|
|
#leftDiv {
|
|
height:100%;
|
|
float: left;
|
|
width: 70%;
|
|
min-height: 810px;
|
|
border-right: 10px solid #eeeeee;
|
|
padding-right: 20px;
|
|
box-sizing: border-box;
|
|
padding-bottom: 30px;
|
|
}
|
|
#leftDiv .cartTitle{
|
|
padding-top: 20px;
|
|
}
|
|
#rightDiv {
|
|
height: 100%;
|
|
width: 29.99%;
|
|
float: left;
|
|
}
|
|
#rightTop {
|
|
border-bottom: 10px solid #eeeeee;
|
|
padding: 20px 0;
|
|
}
|
|
#rightBottom {
|
|
margin-top: 15px;
|
|
padding: 10px 0 20px 0;
|
|
}
|
|
.search{width: 100%; margin-bottom: 10px;}
|
|
.cartTitle {
|
|
text-align: left;
|
|
margin-left: 10px;
|
|
font-weight: bold;
|
|
}
|
|
.cartTitle span {
|
|
font-size: 16px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.cartTab {
|
|
text-align: left;
|
|
margin-top: 10px;
|
|
margin-left: 20px;
|
|
}
|
|
.cartTab span {
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
.active{
|
|
color: rgb(20, 19, 19);
|
|
}
|
|
|
|
.custom-tree-node span:hover {
|
|
color: rgb(39, 127, 244);
|
|
}
|
|
/* 右侧上方信息样式 */
|
|
#person {
|
|
margin-top: 20px;
|
|
height: 30px;
|
|
line-height: 35px;
|
|
padding-right: 20px;
|
|
}
|
|
.personInfo {
|
|
font-size: 12px;
|
|
display: block;
|
|
height: 30px;
|
|
border-bottom: 1px solid gainsboro;
|
|
padding-bottom: 5px;
|
|
text-indent: 10px;
|
|
}
|
|
.leftwidth{width: 20%;float: left;}
|
|
.rightwidth{width: 79%;float: right;}
|
|
#postSearchCart{
|
|
border-radius: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
.getkeyword{
|
|
width: 81px;
|
|
height: 32px;
|
|
padding: inherit;
|
|
padding: 15px 15px;
|
|
}
|
|
.el-input__inner{height: 35px!important;}
|
|
.el-input{width: auto!important;}
|
|
/deep/ .el-input{width: auto!important;}
|
|
.el-input--prefix .el-input__inner{padding-left: 45px; height: 35px;line-height: 35px; width: 90%;}
|
|
.el-input__icon{line-height: 35px;}
|
|
.el-input--suffix .el-input__inner{ height: 35px;line-height: 35px; width: 90%;}
|
|
#postSearchCart .el-input{width: 99%!important;}
|
|
.el-input__suffix{right: 25px;}
|
|
/* 左侧手风琴样式 */
|
|
.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}
|
|
.el-tree-node__content:hover{
|
|
background-color: #cee4ff !important
|
|
}
|
|
.collspse {
|
|
width: 98%;
|
|
margin-left: 1.5%;
|
|
margin-top: 30px;
|
|
}
|
|
.collapseIteamTitle {
|
|
width: 500px;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
display: inline-block;
|
|
margin-left: 20px;
|
|
}
|
|
.collapseIteamMark {
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
color: #92a2b2;
|
|
}
|
|
/deep/ .el-collapse-item__content {
|
|
text-align: left;
|
|
}
|
|
|
|
/* 右侧下方岗位总览区域样式 */
|
|
.postArea {
|
|
margin-top: 20px;padding-left: 5px;
|
|
}
|
|
.postInfo {
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px #d1dbe5;
|
|
padding:10px 10px;
|
|
margin: 0 20px 10px 0;
|
|
float: left;
|
|
width: 40%;
|
|
margin-right: 2%;
|
|
line-height: 30px;
|
|
font-size: 14px;
|
|
}
|
|
.postInfo.icon1 i{display: block; width: 32px;height: 32px; float: left; background: url("../apps/com.awspaas.user.apps.yili.integration/static/icon1.png") no-repeat; background-size: 100%;border-radius: 100%; margin-right: 10px}
|
|
.postInfo span{display:block;color: #639; font-size: 20px;margin-left: 6px}
|
|
.postInfo.icon2 i{display: block; width: 32px;height: 32px; float: left; background: url("../apps/com.awspaas.user.apps.yili.integration/static/icon2.png") no-repeat; background-size: 100%;border-radius: 100%; margin-right: 10px}
|
|
.postInfo.icon3 i{display: block; width: 32px;height: 32px; float: left; background: url("../apps/com.awspaas.user.apps.yili.integration/static/icon3.png") no-repeat; background-size: 100%;border-radius: 100%; margin-right: 10px}
|
|
.postInfo.icon4 i{display: block; width: 32px;height: 32px; float: left; background: url("../apps/com.awspaas.user.apps.yili.integration/static/icon4.png") no-repeat; background-size: 100%;border-radius: 100%; margin-right: 10px}
|
|
|
|
</style>
|
|
</html>
|