<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-03-26 10:28:33
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-11-01 14:56:47
|
* @FilePath: /smart-web/src/views/master/person/main/index.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<div class="aposcope-main">
|
<div class="aposcope-left">
|
<div class="left-title">业务列表</div>
|
<el-tree :data="tableData" node-key="id" default-expand-all :expand-on-click-node="false" :props="defalutProps" @node-click="handleNodeClick" ref="treeRef" highlight-current>
|
<template #default="{ node, data }">
|
<span>{{ node.label }}( {{ data.startCount }} )</span>
|
</template>
|
</el-tree>
|
</div>
|
<div class="aposcope-right">
|
<div class="right-top">
|
业务描述：-
|
</div>
|
<div class="right-content">
|
<div class="content-title">
|
<span class="ct-span">通知方式</span>
|
<el-icon @click="gojob"><Setting /></el-icon>
|
</div>
|
<el-row class="template-content-box">
|
<el-col :span="8" v-for="(item,index) in contentData">
|
<el-checkbox v-model="item.checked" label="选择" size="large" @change="checkboxChange($event,index,item)"/>
|
<div class="box-top">
|
<div class="box-top-name">{{item.notifyName}}</div>
|
<div class="box-top-title">{{item.notifyTemplateName}}</div>
|
<div class="box-top-btn">
|
<span @click="table_edit(item, index)"><el-icon><EditPen /></el-icon>编辑</span>
|
<span><el-icon><Delete /></el-icon>删除</span>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div class="content-title">
|
<span class="ct-span">默认对象</span>
|
</div>
|
<div class="template-content-box">
|
<el-radio-group v-model="radio1" @change="radio1Change">
|
<el-radio :label="1">部门</el-radio>
|
<el-radio :label="2">员工</el-radio>
|
</el-radio-group>
|
<div class="content">
|
<el-button type="primary" plain @click="addOrganization" v-show="isaddOrganization">点击添加+</el-button>
|
<!-- 部门选择 -->
|
<span v-if="radio1 == 1" v-for="(item,index) in organizationLi" class="tagItem">{{item.name}}<el-icon @click="delOrganizationLi(index)" style="cursor: pointer;"><Close /></el-icon></span>
|
<el-select v-if="radio1 == 1" v-show="!isaddOrganization" v-model="organization" style="width: 20%" @change="organizationChange">
|
<el-option v-for="item in organizationList" :key="item.parentId" :label="item.name" :value="item.parentId"/>
|
</el-select>
|
<!-- 员工选择 -->
|
<span v-if="radio1 == 2" v-for="(item,index) in employeeLi" class="tagItem">{{item.name}}<el-icon @click="delEmployeeLi(index)" style="cursor: pointer;"><Close /></el-icon></span>
|
<el-select v-if="radio1 == 2" v-show="!isaddOrganization" v-model="employee" style="width: 20%" @change="employeeChange">
|
<el-option v-for="item in employeeList" :key="item.id" :label="item.organizationName + '-' + item.name" :value="item.id"/>
|
</el-select>
|
</div>
|
<div class="bottom-btn">
|
<el-button @click="resetData">重置</el-button>
|
<el-button type="primary" :loading="isSaveing" @click="saveSubmit">保存</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<save-dialog v-if="dialog.save" ref="saveDialog" @success="addbusinessSuccess" @closed="dialog.save=false"></save-dialog>
|
</template>
|
<script>
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
import saveDialog from './editbusiness'
|
export default {
|
name: "business",
|
data(){
|
return {
|
businessKey: "",
|
isSaveing: false,
|
employeeLi: [],
|
organizationLi: [],
|
isaddOrganization: true,
|
organizationList: [],
|
employeeList: [],
|
organization: "",
|
employee: "",
|
radio1: 1,
|
checked1: true,
|
tableData: [],
|
contentData: [],
|
dialog: {
|
save: false
|
},
|
defalutProps: {
|
label: 'label',
|
children: 'children',
|
isLeaf: 'hasChildren',
|
disabled: 'disabled'
|
},
|
lastLevelId: "",
|
current: "1",
|
size: "15",
|
}
|
},
|
created(){
|
|
},
|
mounted(){
|
this.getTreeList();
|
this.getgroupType();
|
this.getEmployeeList();
|
},
|
components: {
|
...ElementPlusIconsVue,saveDialog
|
},
|
methods: {
|
gojob() {
|
window.open('http://116.63.148.72:8080/xxl-job-admin');
|
},
|
checkboxChange(e,index,item) {
|
var obj = {
|
businessKey: item.businessKey,
|
notifyType: item.notifyType,
|
status: e?"1":"0"
|
}
|
this.$HTTP.put("/api/blade-notify/business-notify/changeStatus",obj).then(res=> {
|
if(res.code == 200) {
|
this.getbusiness(); //刷新列表
|
}
|
})
|
},
|
saveSubmit() {
|
var empIds = [];
|
var orgIds = [];
|
this.employeeLi.forEach(item=> {
|
empIds.push(item.id);
|
})
|
this.organizationLi.forEach(item=> {
|
orgIds.push(item.id);
|
})
|
var obj = {
|
businessKey: this.businessKey,empIds,orgIds
|
}
|
this.$HTTP.post("/api/blade-notify/business-notify",obj).then(res=> {
|
if(res.code == 200) {
|
this.$message.success("保存成功");
|
}
|
})
|
},
|
resetData() {
|
this.employeeLi = [];
|
this.organizationLi = [];
|
},
|
radio1Change(val) {
|
if(val == 1) {
|
this.getgroupType();
|
}else if(val == 2) {
|
this.getEmployeeList();
|
}
|
},
|
addOrganization() {
|
this.isaddOrganization = false;
|
},
|
organizationChange(val) {
|
var flag = this.organizationLi.some(function(item) {
|
return item.parentId === val;
|
});
|
this.organizationList.forEach(item=> {
|
if(item.parentId == val && !flag) {
|
this.organizationLi.push(item);
|
}
|
})
|
},
|
employeeChange(val) {
|
var flag = this.employeeLi.some(function(item) {
|
return item.id === val;
|
});
|
this.employeeList.forEach(item=> {
|
if(item.id == val && !flag) {
|
this.employeeLi.push(item);
|
}
|
})
|
},
|
delOrganizationLi(index) {
|
this.organizationLi.splice(index,1);
|
},
|
delEmployeeLi(index) {
|
this.employeeLi.splice(index,1);
|
},
|
getgroupType() {
|
this.$HTTP.get("/api/smis/organization/list?groupType=group_organization&groupCategory=1").then(res=> {
|
if(res.code == 200) {
|
this.organizationList = res.data;
|
}
|
})
|
},
|
getEmployeeList() {
|
this.$HTTP.get("/api/smis/employee/get/list?organizationCode=00001&status=1").then(res=> {
|
if(res.code == 200) {
|
this.employeeList = res.data;
|
}
|
})
|
},
|
table_edit(row){
|
if(row.notifyName == "钉钉") {
|
var url = `/api/blade-notify/notifier/template/dingTalk/dingTalkMessage/config/metadata`;
|
}else if(row.notifyName == "企业微信") {
|
var url = `/api/blade-notify/notifier/template/weiXinQY/qyTextMessage/config/metadata`;
|
}else if(row.notifyName == "站内信") {
|
var url = `/api/blade-notify/notifier/template/internalMessage/systemDefault/config/metadata`;
|
}else if(row.notifyName == "邮件") {
|
var url = `/api/blade-notify/notifier/template/email/embedded/config/metadata`;
|
}
|
this.dialog.save = true
|
this.$HTTP.get(url).then(res=> {
|
if(res.code == 200) {
|
this.dialog.save = true;
|
this.$nextTick(() => {
|
var obj = Object.assign(row,res.data);
|
this.$refs.saveDialog.open('edit').setData(obj);
|
})
|
}
|
})
|
},
|
getbusiness() {
|
this.$HTTP.get(`/api/blade-notify/business-notify?businessKey=${this.businessKey}`).then(res=> {
|
if(res.code == 200) {
|
res.data.businessNotifyDTOList.forEach(item=> {
|
item.checked = (item.status == '0'?false: true);
|
})
|
this.contentData = res.data.businessNotifyDTOList;
|
this.employeeLi = res.data.defaultObject.empList || []; //部门反显
|
this.organizationLi = res.data.defaultObject.orgList || []; //员工反显
|
if(this.organizationLi != null ) {
|
this.isaddOrganization = false;
|
}
|
}
|
})
|
},
|
handleNodeClick(data) {
|
if(data.businessKey) {
|
this.businessKey = data.businessKey;
|
this.getbusiness();
|
}
|
},
|
getLastLevelIds(tree) {
|
if (tree.length === 0) return ""; // 如果没有根节点，返回空
|
const lastLevelIds = [];
|
const lastLevelCodes = [];
|
function traverseTree(node) {
|
if(!node.children) {
|
lastLevelCodes.push(node);
|
}
|
if (node.children) {
|
node.children.forEach(traverseTree); // 递归遍历子节点
|
} else {
|
lastLevelIds.push(node.id);
|
}
|
}
|
// 只遍历第一个根节点
|
traverseTree(tree[0]);
|
return {lastLevelCodes,lastLevelId:lastLevelIds[0]}; // 返回lastLevelCodes：没有code的数组。lastLevelId：有code的第一个id
|
},
|
getTreeList() {
|
this.$HTTP.get("/api/blade-notify/business-notify/tree").then(res=> {
|
if(res.code == 200) {
|
this.tableData = res.data;
|
this.lastLevelId = this.getLastLevelIds(this.tableData).lastLevelId;
|
this.$nextTick(()=>{
|
this.$refs.treeRef.setCurrentKey(this.lastLevelId); //第一个节点的第一个子节点最后一级默认选中
|
})
|
this.businessKey = this.getLastLevelIds(this.tableData).lastLevelCodes[0].businessKey;
|
this.getbusiness();
|
}
|
})
|
},
|
addbusinessSuccess() {
|
this.getbusiness();
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.aposcope-main {
|
display: flex;
|
min-height: 100%;
|
margin: 8px;
|
}
|
.aposcope-left {
|
width: 240px;
|
margin-right: 8px;
|
padding: 4px;
|
background-color: #fff;
|
}
|
.aposcope-right {
|
flex: 1;
|
padding: 8px;
|
background-color: #fff;
|
}
|
.left-title {
|
font-size: 16px;
|
text-align: center;
|
height: 38px;
|
line-height: 38px;
|
border-bottom: 1px solid #e2e2e2;
|
background-color: #409eff;
|
color: #fff;
|
border-radius: 2px 2px 0 0;
|
}
|
.right-content {
|
text-align: centefter;
|
}
|
.right-top {
|
width: 100%;
|
padding: 8px 16px;
|
background-color: #409eff;
|
color: #fff;
|
font-size: 13px;
|
line-height: 18px;
|
}
|
.content-title {
|
display: flex;
|
justify-content: space-between;
|
margin: 24px 0 0 0;
|
padding: 0 20px 0 10px;
|
border-left: 6px solid #409eff;
|
}
|
.ct-span {
|
color: #101010;
|
font-size: 13px;
|
font-weight: 700;
|
}
|
.content-title i {
|
font-size: 20px;
|
color: #409eff;
|
cursor: pointer;
|
}
|
.template-content-box {
|
padding: 12px 0px 24px 20px;
|
}
|
.box-top {
|
height: 117px;
|
border-radius: 2px;
|
background: #fff;
|
margin-right: 20px;
|
box-shadow: 0 1px 3px rgba(0,0,0,.16);
|
position: relative;
|
}
|
.content {
|
padding: 10px;
|
border: 1px solid #409eff;
|
width: 500px;
|
height: 200px;
|
overflow: auto;
|
}
|
.box-top-name {
|
font-weight: 700;
|
font-size: 18px;
|
text-align: left;
|
color: #333;
|
display: block;
|
margin-top: -30px;
|
margin-left: 56px;
|
}
|
.box-top-title {
|
font-size: 14px;
|
text-align: left;
|
color: #333;
|
display: block;
|
margin-top: -30px;
|
margin-left: 56px;
|
padding: 0 20px 0 33px;
|
margin: 20px 0 10px 24px;
|
}
|
.box-top-btn {
|
position: absolute;
|
font-size: 14px;
|
right: 12px;
|
bottom: 12px;
|
cursor: pointer;
|
}
|
.box-top-btn span:nth-child(1) {
|
margin-right: 12px;
|
}
|
.tagItem {
|
margin: 10px 10px 10px 0;
|
background-color: #409eff;
|
color: #fff;
|
border-color: #409eff;
|
display: inline-block;
|
font-size: 12px;
|
padding: 4px 10px;
|
border-radius: 4px;
|
}
|
.bottom-btn {
|
margin-top: 20px;
|
text-align: center;
|
}
|
</style>
|
