apps/com.awspaas.user.apps.yili.integration/template/page/Department.html
2024-10-30 14:26:52 +08:00

749 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="../apps/com.awspaas.user.apps.yili.integration/components/icon.css">
<link rel="stylesheet" href="../apps/com.awspaas.user.apps.yili.integration/css/department1.css">
<link rel="stylesheet" href="../apps/com.awspaas.user.apps.gpt_interface/css/gpt.css">
<script>
var sid = '<#sid>';
</script>
</head>
<body>
<div id="app">
<div id="floatingChatIcon" @click="openGptHome" >
<img src="../apps/com.awspaas.user.apps.gpt_interface/img/robot-icon.png" alt="Chat Bot" >
<span style="margin-top: 6px;font-size: 19px;">YL-GPT</span>
<span style="margin-top: 6px;font-size: 11px;">智能文件搜索</span>
<el-dialog
:visible.sync="dialogVisible"
width="80%"
custom-class="custom-dialog"
append-to-body>
<iframe :src="newPageUrl" frameborder="0" style="width: 100%; height: 100%;"></iframe>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialog">关闭</el-button>
</span>
</el-dialog>
</div>
<div id="main">
<div id="leftDiv" ref="searchDiv">
<!-- 筛选区域 -->
<div class="section">
<div>
<div class="cartTitleDiv">
<span class="section-title">筛选发布部门</span>
<el-popover
placement="top-start"
title="请选择发布部门"
width="600"
trigger="hover"
>
<div id="postSearchCart">
<div class="search">
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText" style="width:80%;">
</el-input>
<el-checkbox v-model="checked1" label="全选" border @change="chooseAll"
style="float:right;width:18%"></el-checkbox>
</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>
<i slot="reference" class="ico dropDown"></i>
</el-popover>
</div>
<div class="cartTitleDiv">
<el-button type="primary" size="mini" @click="resetData">重置</el-button>
</div>
<div class="cartTitleDiv">
<span class="section-title">搜索文件名:</span>
<el-input
placeholder="输入关键字搜索"
v-model="filtertreeText"
@keyup.enter.native="search">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="cartTitleDiv">
<span class="section-title">筛选文件类型:</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>
</div>
</div>
</div>
<!-- 部门信息区域 -->
<div class="section" style="font-size: 14px;border: 0px solid #D4F0FF;background-color: #E6F7FF;padding: 2px 0px 4px;margin-left: 7px;">
<div class="deptInfoDiv" style="padding-left: 4px;">
<i style="vertical-align: middle;padding-top: 3px;" slot="reference" class="ico tips"></i>
<span v-if="doesItExist==true" class="limited-text">已选择</span>
<span v-if="doesItExist==false" class="limited-text">暂无发布部门</span>
</div>
<div class="deptInfoDiv">
<el-tooltip class="item" effect="dark" :content="concatenatedNamesTooltip">
<span class="limited-text">{{concatenatedNames}}</span>
</el-tooltip>
<span>发布的文件(制度总数:{{ policyFileNum }} 流程总数:{{ processFileNum
}}</span>
</div>
<div class="deptInfoDiv-button">
<el-checkbox v-model="checkedInfo" label="隐藏架构" @change="" border size="mini"></el-checkbox>
<el-button style="height: 28px;" type="primary" size="mini" icon="el-icon-arrow-down" v-if="isExpand==false && checkedInfo == false" @click="expandTree">展开</el-button>
<el-button style="height: 28px;"type="primary" size="mini" icon="el-icon-arrow-up" v-if="isExpand==true && checkedInfo == false" @click="foldTree">折叠</el-button>
</div>
</div>
<div id="processList" v-loading="g_loading" style="width: 100%;overflow-y:auto;" >
<div class="collspse">
<el-tree
v-if="checkedInfo == false"
: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}}
<!--<em style="font-style:normal;margin-left: 100px;float: right;">发布时间:{{node.data.time}}</em><em style="font-style:normal;margin-left: 100px;float: right;">编制人:{{node.data.people}}</em>-->
</a>
</span>
<span v-else>
{{node.data.name}}
</span>
<label>
{{node.data.desc}}
</label>
</span>
</el-tree>
<el-table v-if="checkedInfo == true"
:show-header ="false"
:data="fitlerNoFrameOptions"
style="width: 100%;height: auto;">
<el-table-column
style="width: 100%;">
<template slot-scope="node">
<a :href="node.row.path" style="color: #2E74B5" target="_blank">
<img src="../apps/com.awspaas.user.apps.yili.integration/static/icon2.png"
v-if="node.row.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.row.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.row.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.row.fileType == 'formFile'"
style="vertical-align: middle; width: 15px;height: 15px;border-radius:100%"/>
{{ node.row.name }}
<!--<em style="font-style:normal;margin-left: 100px;float: right;">发布时间:{{node.data.time}}</em><em style="font-style:normal;margin-left: 100px;float: right;">编制人:{{node.data.people}}</em>-->
</a>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div style="text-align: center;position: absolute;width: 78%;top: 19%;z-index: 1200;background: #ffffff;height: 500px;line-height: 300px;" v-if="loading==true">数据加载中...</div>
</div>
<div id="rightDiv" ref="rightHeight">
<div id="rightBottom">
<div id="infoCart">
<div class="cartTitle" style="text-align: center;">
<img style="width: 60px;height:60px;" id="currentUserPhoto" :src="userPhoto">
</div>
<div class="cartTab">
<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>
<div class="button-content">
<!-- 查询岗位直接相关文件 -->
<el-button @click="openPersionInfo" type="primary" size="small">
查询岗位直接相关文件
</el-button>
</div>
</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 {
dialogVisible: false,
newPageUrl: '', // 新页面的 URL可以是相对路径或绝对路径
param1:"",
loading:true,
g_loading: true,
filtertreeText:'',
isExpand:false,
filterText: '',
selectoptions: [],
selectvalue: '',
options: [],
noFrameOptions:[],
fitlerNoFrameOptions:[],
defaultkey: [],
defaultProps1: {
children: 'children',
label: 'name'
},
tab: 1,
personInfos: [],
userPhoto:'',
departmentId:'',
// 右侧部门树数据
list: [],
defaultProps: {
children: 'children',
label: 'name'
},
selectdept: [],
filetype: '',
processFileNum: '',//流程数量
policyFileNum: '',//制度数量
guideFileNum: '',//操作指导数量
formFileNum: '',//表单/模板数量
treelist: [],
treeListNodes: [],//选择树的中文集合
idjson:[],
checkedInfo:false,
checked1:false,//选中状态
concatenatedNamesTooltip:'暂无发布部门',
doesItExist:false
};
},
mounted(){
this.$nextTick(() => {
debugger;
this.treelist = this.$refs.tree.getCheckedKeys()
this.treeListNodes = this.$refs.tree.getCheckedNodes();
});
},
computed: {
concatenatedNames() {
const filterOutChildren = (nodes) => {
// 创建一个集合来存储需要保留的节点ID
const toKeep = new Set();
// 递归函数,用于检查节点是否应被保留
function shouldKeep(node) {
// 如果节点ID已在toKeep中则无需再次检查
if (toKeep.has(node.ID)) return true;
// 遍历所有节点包括当前节点的子节点检查当前节点是否在其他节点的children中
for (const otherNode of nodes) {
if (otherNode.children && otherNode.children.some(child => child.ID === node.ID)) {
// 如果当前节点是某个节点的子节点,则不保留
return false;
}
}
// 如果节点通过了所有检查则添加到toKeep集合中
toKeep.add(node.ID);
return true;
}
// 遍历所有节点,检查并标记哪些节点应该被保留
for (const node of nodes) {
shouldKeep(node);
}
// 根据toKeep集合过滤出需要保留的节点
const filteredNodes = nodes.filter(node => toKeep.has(node.ID));
filteredNodes.sort((a, b) => a.TLEVEL - b.TLEVEL);
return filteredNodes;
};
if(this.treeListNodes.length === 0){
return '';
}
const processedNodes = filterOutChildren(this.treeListNodes);
let names = processedNodes.map(node => node.name).join(',');
if (names === '') {
names = '';
this.doesItExist = false;
this.concatenatedNamesTooltip = "暂无发布部门";
}else{
this.doesItExist = true;
this.concatenatedNamesTooltip = names;
names +=":";
}
if (names.length > 10) {
// 这里简单地在第10个字符后截断并添加省略号
return names.slice(0, 10) + '...';
}
return names;
}
},
created() {
this.rightTreedatabind();
this.setDefault();
this.leftTreedatabind();
},
watch: {
filtertreeText(val){
if(this.checkedInfo==true){
this.fitlerNoFrameOptions = this.noFrameOptions.filter(option => {
return option.name.toLowerCase().includes(val.toLowerCase());
});
}else{
this.$refs.treeNode.filter(val);
}
},
filterText(val) {
this.$refs.tree.filter(val);
},
},
methods: {
// 全部选中
chooseAll() {
this.roleList = "";
// 判断按钮的状态
if (this.checked1) {
this.loading=true;
// 设置
this.$refs.tree.setCheckedNodes(this.list);
} else {
this.$refs.tree.setCheckedNodes([]);
}
debugger;
this.treelist = this.$refs.tree.getCheckedKeys()
this.selectdept = JSON.stringify(this.treelist)
this.options = []
if (this.treelist.length == 0) {
this.selectdept = []
}
this.leftTreedatabind()
},
//增加键盘回车事件
search(){
// 控制一下,如果用户没输入东西就不去搜索
if(this.filtertreeText == ""){
return
}else{
if(this.checkedInfo==true){
this.fitlerNoFrameOptions = this.noFrameOptions.filter(option => {
return option.name.toLowerCase().includes(this.filtertreeText.toLowerCase());
});
}else{
this.$refs.treeNode.filter(this.filtertreeText);
}
}
},
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;
}
},
//右侧树结构
rightTreedatabind() {
debugger;
let _this = this;
$.ajax({
url: api.rightTreeurl,
data: {},
dataType: "json",
type: "post",
async: false,
success: function (res) {
_this.g_loading = false;
_this.loading=false;
_this.list = res.data.deptTree;
_this.personInfos = res.data.personInfos;
_this.userPhoto = res.data.userPhoto;
_this.departmentId = res.data.departmentId;
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
_this.loading=false;
if(res.data !== undefined){
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
}
//最后搜索一下
this.search();
});
},
leftTreedatabindNew() {
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
_this.loading = false;
if (res.data.fileMaps.length > 0) {
var fileMaps = res.data.fileMaps;
var newMaps =this.filterFileMaps(fileMaps);
//过滤架构的数据
//var newMaps = fileMaps.filter(file => file.nodeType !== 'frame');
_this.noFrameOptions = newMaps;
_this.fitlerNoFrameOptions = newMaps;
res.data.fileMaps.forEach(element => {
_this.defaultkey.push(element.ID)
});
//最后搜索一下
this.search();
}
});
},
handleCheckChange(data) {
this.treelist = this.$refs.tree.getCheckedKeys()
this.treeListNodes = this.$refs.tree.getCheckedNodes();
this.selectdept = JSON.stringify(this.treelist)
this.options = []
if (this.treelist.length == 0) {
this.selectdept = []
} else {
this.loading = true;
}
if(this.checkedInfo==true){
this.leftTreedatabindNew();//隐藏架构的
}else{
this.leftTreedatabind();//不需要隐藏架构
}
},
selcetchangetype(e) {
this.loading=true;
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;
},
openPersionInfo() {
window.open("./w?sid=" + sid + "&cmd=com.awspaas.user.apps.yili.integration.service.ToPageService_toPersonView");
},
showOrHideInfo() {
this.loading = true;
if(this.checkedInfo==true){
this.leftTreedatabindNew();//隐藏架构的
}else{
this.leftTreedatabind();//不需要隐藏架构
}
},
resetData(){
this.idjson=[];
this.idjson.push(this.departmentId);
this.treelist = this.$refs.tree.getCheckedKeys()
var nodeObj =this.$refs.tree.getNode(this.departmentId);
var nodeArry = [];
nodeArry.push(nodeObj.data)
this.$refs.tree.setCheckedNodes(nodeArry);
this.treeListNodes = this.$refs.tree.getCheckedNodes();
this.selectdept = [];
this.processFileNum = '';//流程数量
this.policyFileNum = '';//制度数量
if(this.checkedInfo==true){
this.leftTreedatabindNew();//隐藏架构的
}else{
this.leftTreedatabind();//不需要隐藏架构
}
},
filterFileMaps(items) {
const result = [];
items.forEach(item => {
if (item.nodeType !== 'frame') {
result.push({ ...item }); // 复制对象以避免直接引用原始对象(可选)
}
if (item.children && item.children.length > 0) {
// 递归调用以处理子对象
const childrenResult = this.filterFileMaps(item.children);
result.push(...childrenResult); // 将子对象的结果合并到当前结果中
}
});
return result;
},
setDefault(){
this.treelist.push(this.departmentId);
this.idjson.push(this.departmentId);
},
openGptHome() {
//let url = "https://chatgpt-uat.dcin-test.digitalyili.com/welcome?from=libchat&lib=ef2b50fd79c52577d51222bc58b231d7&priv=1&sid=" + sid ;
//this.fullscreen = window.innerWidth <= 768; // 小屏幕时全屏显示
this.newPageUrl = "https://yiligpt.x.digitalyili.com/libchat?lib=b8e082947190f2aa4fca0d96a5a95ea5&priv=1&sid=" + sid;
document.cookie = "AWSSESSIONID="+sid;
this.param1=sid;
this.dialogVisible = true;
},
closeDialog() {
this.dialogVisible = false;
}
},
});
</script>
<style scoped>
#main {
height: 100%;
background: #FFFFFF;
clear: both;
overflow: hidden;
}
#leftDiv {
height:100%;
float: left;
width: 80%;
min-height: 508px;
border-right: 10px solid #eeeeee;
padding-right: 20px;
box-sizing: border-box;
padding-bottom: 30px;
}
#leftDiv .cartTitle{
padding-top: 20px;
}
#rightDiv {
height: 100%;
width: 19.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;
padding-bottom: 5px;
text-indent: 10px;
}
.leftwidth{width: 20%;float: left;}
.rightwidth{width: 79%;float: right;}
#postSearchCart{
border-radius: 5px;
margin-top: 10px;
}
.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: 100%;}
#postSearchCart .el-input{width: 81%!important;}
.el-input__suffix{right: 25px;}
/* 左侧手风琴样式 */
.el-tree-node__content{ background-color: #f1f5fa!important;padding: 6px 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:4px;
}
.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;
}
.custom-dialog .el-dialog__body {
/* 设置高度为 70%,注意这里可能需要额外的 CSS 来处理滚动条和布局问题 */
height: 70vh; /* 使用视口高度viewport height的 70% */
overflow: auto; /* 允许内容滚动 */
}
.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>