monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by xwx
Commit 6ca88a2372fe7443ac3e8e168531449c3d229bb2 2 parents eaec8f46 d01fcf8a master ... master-joke master-prod master-prod-lushangqing master-prod-xwx master-prod-xwx2 master-v32-lushangqing master-v32-lzc master-v32-xwx master-v32-ztq master-yuanjinpeng mater-ztq wangfeng

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-v32-xwx

Inline Side-by-side
Showing 31 changed files with 3343 additions and 505 deletions
... ... @@ -880,21 +880,30 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'view', 'se
}
//获取选中的数据
function getCheckData() {
debugger
if(mode){
//获取改变的值
var str='';
var $tr=$('#bustype-table').next().find('tbody tr');
$.each($tr,function (i,v) {
var $btn=$(this).find('.btn-bustype-unbind');
var showType=$(this).find('.resourceType_showType') && $(this).find('.resourceType_showType').eq(0) && $(this).find('.resourceType_showType').eq(0).val() ? $(this).find('.resourceType_showType').eq(0).val():'<';
if(!$btn.hasClass('hide')){
str += $btn.attr("data-id")+'_'+showType+',';
let arr = [];
$.each($('[data-type="checkbox"] input'),function (i,v) {
var that = $(this);
if(that.is(':checked')){
arr.push(that.val());
}
});
if(str!=''){
str=str.substring(0,str.length-1);
}
return str;
})
return arr.join(',');
// //获取改变的值
// var str='';
// var $tr=$('#bustype-table').next().find('tbody tr');
// $.each($tr,function (i,v) {
// var $btn=$(this).find('.btn-bustype-unbind');
// var showType=$(this).find('.resourceType_showType') && $(this).find('.resourceType_showType').eq(0) && $(this).find('.resourceType_showType').eq(0).val() ? $(this).find('.resourceType_showType').eq(0).val():'<';
// if(!$btn.hasClass('hide')){
// str += $btn.attr("data-id")+'_'+showType+',';
// }
// });
// if(str!=''){
// str=str.substring(0,str.length-1);
// }
// return str;
}else{
return busTypeTable.checkStatus(false);
}
... ... @@ -903,4 +912,4 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'view', 'se
return {getData: getCheckData};
});
});
\ No newline at end of file
});
... ...
... ... @@ -191,10 +191,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'upload', 'common', 'sessions',
}
},
{
title: '操作', fixed: 'right', align: 'center',minWidth: 230,
title: '操作', fixed: 'right', align: 'center',minWidth: 280,
templet: '<div>' +
//lsq 新增变更按钮 2022-05-30
'<button data-username="{{d.username}}" lay-tips="人员相关业务变更" type="button" class="layui-btn layui-btn-xs layui-btn-normal user_batch_change_leaders_btn"><i class="layui-icon layui-icon-edit"></i></button>'+
'<button data-username="{{d.username}}" data-nickname="{{d.nickname}}" lay-tips="人员相关业务变更" type="button" class="layui-btn layui-btn-xs layui-btn-normal user_batch_change_leaders_btn"><i class="layui-icon layui-icon-edit"></i></button>'+
'<button data-id="{{d.id}}" lay-tips="删除" type="button" class="layui-btn layui-btn-xs layui-btn-normal user_delete_btn"><i class="layui-icon layui-icon-delete"></i></button>'+
'<button data-id="{{d.id}}" data-username="{{d.username}}" lay-tips="重置密码" type="button" class="layui-btn layui-btn-xs layui-btn-normal user_pass_btn"><i class="layui-icon layui-icon-password"></i></button>'+
... ... @@ -288,10 +288,10 @@ layui.define(['table', 'form', 'admin', 'layer', 'upload', 'common', 'sessions',
}
//start lsq 人员相关业务批量变更 2022-05-30
$('.user_batch_change_leaders_btn').unbind().on('click',function () {
if ($.inArray('back:user:impower',permissionList) == -1) {
layer.msg('暂无权限',{icon: 7,time:3000})
return false;
}
// if ($.inArray('back:user:impower',permissionList) == -1) {
// layer.msg('暂无权限',{icon: 7,time:3000})
// return false;
// }
let param = {
username: $(this).data('username'),
resName: ''
... ... @@ -302,14 +302,22 @@ layui.define(['table', 'form', 'admin', 'layer', 'upload', 'common', 'sessions',
urlParams+=key+'='+param[key]+'&'
}
}
urlParams=urlParams.substr(0,urlParams.length-1)
urlParams=urlParams.substr(0,urlParams.length-1);
let title=`
<div style="display: flex;justify-content: space-between; align-items: center;">
<span>"`+$(this).data('nickname')+`"相关业务批量变更</span>
<!-- <button id="exportBtn" type="button" class="layui-btn layui-btn-sm layui-btn-normal exportBtn">导出</button>-->
</div>
`;
layer.open({
title: ['相关业务批量变更', 'font-size:18px;'],
title: [title, 'font-size:18px;'],
type: 2,
area: ['80%', '90%'],
shadeClose: true,//开启遮罩层
id: 'kpi_line_chart_div',
id: 'batch_change_leaders',
content: ['/vue3/index.html#/vue3/batchChangeLeaders?'+urlParams, 'no'],
success:function (layero,index){
},
cancel: function () {
// clearTimeout(obj.lineTimer);
}
... ... @@ -1048,6 +1056,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'upload', 'common', 'sessions',
btn: ['完成'],
content: laytpl(res.body).render(JSON.stringify({username:usernames})),
yes: function (index, layero) {//保存业务授权
debugger
var busType = layui.bustype({username:usernames[0], mode: 'bind'});
var busTypeData = busType.getData();
var loding = layer.load(2);
... ... @@ -1311,4 +1320,4 @@ layui.define(['table', 'form', 'admin', 'layer', 'upload', 'common', 'sessions',
});
}
})
})
\ No newline at end of file
})
... ...
... ... @@ -16,8 +16,9 @@
<div id="LAY_app"></div>
<script src="/start/layui/layui.js"></script>
<script>
layui.use(['jquery'], function () {
layui.use(['jquery','pageTips'], function () {
var $ = layui.jquery;
let pageTips = layui.pageTips;
// 读取配置文件
$.when(
$.ajax({
... ...
... ... @@ -158,4 +158,11 @@ custom-class="config-dialog"
box-shadow: 0 0 20px red, inset 0 0 10px red, 0 0px 5px red;
}
}
.tree-table .el-table td.el-table__cell div{
display: flex;
align-items: center;
}
.tree-table .el-table .el-table__cell.is-center div{
justify-content: center;
}
... ...
<div >
<!-- 表格-->
<el-table :border="showBorder" v-loading="loading" :size="size" ref="multipleTable" @selection-change="handleSelectionChange" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height"
style="width: 100%;margin: 0px 0px; font-size:13.5px;">
style="width: 100%;margin: 0px 0px; font-size:13.5px;" :row-key="getRowKeys" :expand-row-keys="expands" :default-expand-all="defaultExpand"
@select="handleSelect" @select-all="handleSelectAll"
>
<el-table-column type="expand" v-if="showExpand">
<template #default="scope">
<slot name="expand" :scope="scope" >
</slot>
</template>
</el-table-column>
<el-table-column v-if="showSelection && columns.length > 0" align="center" type="selection" width="55" />
<el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/>
... ...
... ... @@ -87,6 +87,26 @@ export default {
multipleSelection:{
type:Array,
default:[]
},
//展开行
showExpand:{
type: Boolean,
default: false
},
//行数据的key
getRowKeys:{
type: String,
default: 'id'
},
//默认展开哪行
expands:{
type: Array,
default: []
},
//是否默认展开所有行
defaultExpand:{
type:Boolean,
default:false
}
},
data() {
... ... @@ -135,6 +155,7 @@ export default {
let params = {
page: currentPage.value, limit: pageSize.value
}
proxy.$refs.multipleTable.clearSelection();
emit('loaddata', params)
}
... ... @@ -209,6 +230,49 @@ export default {
return val;
}
//设置父节点选中后children也选中
let setChecked=(row)=>{
let arr=[];
if(row.children){
row.children.map(j=>{
arr.push(j)
setChecked(j)
})
}
toggleSelection(arr)
}
//勾选数据行的Checkbox事件
let handleSelect=(selection, row)=>{
/* if(selection.some(el=>{ return row[props.getRowKeys] ===el[props.getRowKeys]})){
setChecked(row);
}else{
setChecked(row);
}*/
setChecked(row);
emit('handleSelect',selection)
}
//勾选全选checkbox事件
let handleSelectAll=(selection)=>{
const isSelect=selection.some(el=>{
const tableDataIds=props.dataList.map(j=>j[props.getRowKeys])
return tableDataIds.includes(el.id)
})
const isCancel=!props.dataList.every(el=>{
const selectIds=selection.map(j=>j[props.getRowKeys])
return selectIds.includes(el.id)
})
if(isSelect){
setChecked(selection);
}
if(isCancel){
props.dataList.map(el=>{
setChecked(el);
})
}
emit('handleSelectAll',selection)
}
// 挂载完
Vue.onMounted(() => {
//callback();
... ... @@ -225,6 +289,8 @@ export default {
})
return {
handleSelect,
handleSelectAll,
toggleSelection,
handleSelectionChange,
// multipleSelection,
... ...
... ... @@ -14,7 +14,11 @@ let http = {
window.top.location.reload();
//window.top.location.href = localStorage.getItem('loginUrl');
} else {
__global.showMsg("服务异常，请联系管理员！","error");
let text='服务异常，请联系管理员！';
if(xhr.responseJSON.resp_msg){
text=xhr.responseJSON.resp_msg
}
__global.showMsg(text,"error");
}
}catch (e){
}
... ...
<el-row>
<el-col :span="24" class="search">
<div class="condition" style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;width: 300px">
<el-input v-model="data.searchParams.keywords" placeholder="关键字支持：名称、负责人、业务描述"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getList">查询</el-button>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button type="primary" @click="removeRel">取消</el-button>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button type="primary" @click="changeUser">变更</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="data.columns"
:dataList="data.tableData"
:treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
:total="data.count"
:pageSize="pageSize"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
</template>
</cm-table-page>
</el-col>
</el-row>
<ChangeUsersList :show="data.userDialogFlag" @hideDialog="showUserDialog" @savebtn="saveRel"></ChangeUsersList>
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
'ChangeUsersList': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/changeUsersList/index')
),
},
data() {
},
props: {},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//列表高度
let height = Vue.ref(window.innerHeight);
let data = Vue.ref({
searchParams: {
"page": 1,
"limit": 50,
"keywords": "",
"userName": proxy.$route.query.username,
"subId": ""
},
userDialogFlag : false,
count: 0,
columns: [{
prop: "subName",
label: "订阅名称",
width: "250",
sortable: true,
align: 'center'
}, {
prop: "subType",
label: "订阅类型",
width: "120",
sortable: true,
align: 'center',
render: function (row) {
switch (row.subType) {
case '1':
return '告警订阅'
break;
case '2':
return '报表订阅'
break;
case '3':
return '系统通知订阅'
break;
case '4':
return '采集器异常订阅'
break;
}
}
}, {
prop: "subWay",
label: "通知类型",
width: "200",
sortable: true,
align: 'center',
render: function (row) {
switch (row.subWay){
case 'wechat':
return '<div class="small-icon small-icon-wechat"></div>'
break;
case 'email':
return '<div class="small-icon small-icon-email"></div>'
break;
case 'message':
return '<div class="small-icon small-icon-msg"></div>'
break;
}
}
}, {
prop: "alarmTempTotal",
label: "订阅对象",
sortable: true,
align: 'center',
// render: (row) => {
// switch (row.alarmTempTotal) {
// case 0:
// return '否';
// case 1:
// return '是';
// default:
// return '';
// }
// }
}, {
prop: "tempType",
label: "通知说明",
sortable: true,
align: 'center',
render: (row) => {
switch (row.tempType) {
case 'wechat':
return '微信'
case 'email':
return '邮箱';
case 'msg':
return '短信';
}
}
}, {
prop: "userTotal",
label: "订阅人数",
sortable: true,
align: 'center'
}, {
prop: "times",
label: "允许通知时间段",
sortable: true,
align: 'center'
}, {
prop: "syncFlag",
label: "同步状态",
sortable: true,
align: 'center',
render: (row) => {
switch (row.syncFlag) {
case '0':
return '未同步'
case '1':
return '已同步';
}
}
}],
tableData: [],
// 表格选中
checkArr:[]
})
const getList = () => {
proxy.$http.post(`/api-web/personnelChange/getList/alarmSubPer`, data.value.searchParams, function (res) {
if (res && res.success) {
let dataVal = data.value;
let list = res.data;
let count = res.count;
dataVal.tableData = list;
dataVal.count = count;
}
})
}
// 展示用户选择
let showUserDialog = (flg) =>{
data.value.userDialogFlag = flg;
}
let saveRel = (obj) =>{
// 获取选中
let arr = data.value.checkArr;
if(arr.length == 0){
proxy.$global.showMsg('请至少选择一项','warning');
return;
}
let params = {
targetUserName: obj.selectModel.join(''),
"userName": proxy.$route.query.username,
"busId": arr.join(',')
}
if(params.targetUserName == params.userName){
proxy.$global.showMsg('变更用户不能与变更前用户一致，请修改！','warning');
return;
}
proxy.$http.post(`/api-web/personnelChange/update/alarmSubPer`,params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('变更成功！');
showUserDialog(false);
// 刷新表格
getList();
}
})
}
// 变更
let changeUser = () =>{
// 获取选中
let arr = data.value.checkArr;
if(arr.length == 0){
proxy.$global.showMsg('请至少选择一项','warning');
return;
}
showUserDialog(true);
}
/**
* 取消
*/
let removeRel = () =>{
let arr = data.value.checkArr;
if(arr.length == 0){
proxy.$global.showMsg('请至少选择一项','warning');
return;
}
data.value.searchParams.subId = arr.join(',')
proxy.$global.confirm("确定取消相关资源？", function () {
proxy.$global.showMsg('取消成功！');
proxy.$http.post(`/api-web/personnelChange/remove/alarmSubPer`, data.value.searchParams , function (res) {
if (res && res.success) {
proxy.$global.showMsg('取消成功！');
getList()
}
})
});
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
let dataVal = data.value;
dataVal.page = page;
dataVal.limit = limit;
getList();
}
// 表格全选事件
let selectionChange = (val) => {
let checkArr = [];
val.map(item => {
checkArr.push(item.subId)
})
data.value.checkArr = checkArr;
let isCheck = (list, checkArr) => {
list.forEach((v, i) => {
v.checked = checkArr.includes(v.subId);
if (v.children) {
isCheck(v.children, checkArr);
}
});
}
isCheck(data.value.tableData, checkArr);
}
// 挂载完
Vue.onMounted(() => {
getList();
})
return {
height,
data,
getList,
changeUser,
showUserDialog,
removeRel,
loadTableDataList,
selectionChange,
saveRel
}
}
}
... ...
<el-row>
<el-col :span="24" class="search">
<div class="condition" style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;width: 300px">
<el-input v-model="data.searchParams.keywords" placeholder="关键字支持：名称、负责人、业务描述"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getList">查询</el-button>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button type="primary" @click="removeRel">取消</el-button>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button type="primary" @click="changeUser">变更</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="data.columns"
:dataList="data.tableData"
:treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
:total="data.count"
:pageSize="pageSize"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
</template>
</cm-table-page>
</el-col>
</el-row>
<ChangeUsersList :show="data.userDialogFlag" @hideDialog="showUserDialog" @savebtn="saveRel"></ChangeUsersList>
... ...
export default {
name: 'autoPatrolPortPer',
template: '',
components: {
'ChangeUsersList': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/changeUsersList/index')
),
},
data() {
},
props: {},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//列表高度
let height = Vue.ref(window.innerHeight);
let data = Vue.ref({
searchParams: {
"page": 1,
"limit": 50,
"keywords": "",
"userName": proxy.$route.query.username,
"reportId": ""
},
userDialogFlag: false,
count: 0,
columns: [{
prop: "docName",
label: "文档名称",
width: "350",
sortable: true,
align: 'center'
}, {
prop: "frequency",
label: "CRON表达式",
width: "170",
sortable: true,
align: 'center'
},{
prop: "handleHour",
label: "处理时常（时）",
width: "150",
sortable: true,
align: 'center'
}, {
prop: "inspectionType",
label: "巡检类型",
width: "100",
sortable: true,
align: 'center',
render: (row) => {
switch (row.important) {
case '0':
return '自动巡检';
case '1':
return '人工巡检';
default:
return '';
}
}
}, {
prop: "templatePath",
label: "文档地址",
sortable: true,
align: 'left'
}],
tableData: [],
// 表格选中
checkArr: []
})
const getList = () => {
proxy.$http.post(`/api-web/personnelChange/getList/autoPatrolPortPer`, data.value.searchParams, function (res) {
if (res && res.data) {
let dataVal = data.value;
let list = res.data;
let count = res.count;
dataVal.tableData = list;
dataVal.count = count;
}
})
}
// 展示用户选择
let showUserDialog = (flg) => {
data.value.userDialogFlag = flg;
}
let saveRel = (obj) => {
// 获取选中
let arr = data.value.checkArr;
if (arr.length == 0) {
proxy.$global.showMsg('请至少选择一项', 'warning');
return;
}
let params = {
targetUserName: obj.selectModel.join(''),
"userName": proxy.$route.query.username,
"reportId": arr.join(',')
}
if (params.targetUserName == params.userName) {
proxy.$global.showMsg('变更用户不能与变更前用户一致，请修改！', 'warning');
return;
}
proxy.$http.post(`/api-web/personnelChange/update/autoPatrolPortPer`, params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('变更成功！');
showUserDialog(false);
// 刷新表格
getList();
}
})
}
// 变更
let changeUser = () => {
// 获取选中
let arr = data.value.checkArr;
if (arr.length == 0) {
proxy.$global.showMsg('请至少选择一项', 'warning');
return;
}
showUserDialog(true);
}
/**
* 取消
*/
let removeRel = () => {
let arr = data.value.checkArr;
if (arr.length == 0) {
proxy.$global.showMsg('请至少选择一项', 'warning');
return;
}
data.value.searchParams.reportId = arr.join(',')
proxy.$global.confirm("确定取消相关资源？", function () {
proxy.$global.showMsg('取消成功！');
proxy.$http.post(`/api-web/personnelChange/remove/autoPatrolPortPer`, data.value.searchParams, function (res) {
if (res && res.success) {
proxy.$global.showMsg('取消成功！');
getList()
}
})
});
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
let dataVal = data.value;
dataVal.page = page;
dataVal.limit = limit;
getList();
}
// 表格全选事件
let selectionChange = (val) => {
let checkArr = [];
val.map(item => {
checkArr.push(item.id)
})
data.value.checkArr = checkArr;
let isCheck = (list, checkArr) => {
list.forEach((v, i) => {
v.checked = checkArr.includes(v.id);
if (v.children) {
isCheck(v.children, checkArr);
}
});
}
isCheck(data.value.tableData, checkArr);
}
// 挂载完
Vue.onMounted(() => {
getList();
})
return {
height,
data,
getList,
changeUser,
showUserDialog,
removeRel,
loadTableDataList,
selectionChange,
saveRel
}
}
}
... ...
<el-row>
<el-col :span="24" class="search">
<div class="condition" >
<el-form ref=“form” style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-input v-model="search.keyword" placeholder="请输入业务名称"></el-input>
</el-form-item>
<!--<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-select filterable clearable v-model="search.resType" placeholder="请选择资源类型">
<el-option
v-for="item in resTypeOptions"
:key="item.resTypeCode"
:label="item.resTypeName"
:value="item.resTypeCode">
</el-option>
</el-select>
</el-form-item>-->
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getListData" type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
<el-row style="margin-bottom: 10px;">
<div class="flex-div-start">
<!-- <el-button type="primary" @click="changeCancel()" size="small">取消</el-button>-->
<el-button type="primary" @click="changeAdmin()" size="small" style="margin-left: 6px">变更</el-button>
</div>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns"
:dataList="resourceData"
:total="count"
:layout="'total, prev,pager,next,sizes, jumper'"
:pageSize="search.limit"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
<div v-if="prop == 'showType'">
<el-select v-if="row.resType == 'HOST_X86SERVER'" v-model="row.showType" placeholder="">
<el-option
v-for="item in showTypeList"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
</cm-table-page>
</el-col>
</el-row>
<ChangeUsersList :show="show" :isTwoGroup="isTwoGroup" :isMulti="isMulti" @hideDialog="hideDialog" @savebtn="savebtn"></ChangeUsersList>
... ...
export default {
name: 'bizLeader',
template: '',
components: {
'ChangeUsersList': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/changeUsersList/index')
),
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//接收从用户列表中选中的用户
let userName=Vue.ref(proxy.$route.query.username);
//变更人员弹框
let show=Vue.ref(false);
//变更人员列表是否多选
let isMulti=Vue.ref(false);
//变更人员列表是否是两组
let isTwoGroup=Vue.ref(false);
//配置列表总数
let count = Vue.ref(0);
//列表高度
let height = Vue.ref(window.innerHeight);
//列表分页
let limit = Vue.ref(400);
//加载
let loading = Vue.ref(true);
//选中数据
let pitch = Vue.ref([]);
let showTypeList=Vue.ref([]);
let search = Vue.ref({
resType: '',
keyword: '',
page: 1,
limit: 20,
});
let resTypeOptions=Vue.ref([])
const columns = [
{
prop: 'busTypeName',
label: '业务类型名称',
sortable: true,
align: 'center',
},
{
prop: 'admin',
label: '负责人',
sortable: true,
align: 'center',
},
{
prop: 'busTypeDesc',
label: '业务类型描述',
sortable: true,
align: 'center',
},
{
prop: 'isUse',
label: '是否使用',
sortable: true,
align: 'center',
render: function (row) {
switch (row.isUse) {
case 0:
return '否';
case 1:
return '是';
default:
return '';
}
}
},
{
prop: 'important',
label: '重要程度',
sortable: true,
align: 'center',
render: function (row) {
switch (row.important) {
case 1:
return '核心';
case 2:
return '重要';
case 3:
return '一般';
case 9:
return '虚拟业务';
default:
return '';
}
}
},
{
prop: 'sort',
label: '排序',
sortable: true,
align: 'center',
},
{
prop: 'showType',
label: '展示类型',
sortable: true,
align: 'center',
/* render: function (row) {
}*/
}
];
//列表数据
let resourceData = Vue.ref([]);
//获取列表数据
const getListData = () => {
resourceData.value=[];
loading.value = true;
//定义列表参数
let getParams = {
resType:search.value.resType,
keywords:search.value.keyword,
userName:userName.value,
page: search.value.page,
limit: search.value.limit
};
proxy.$http.post("/api-web/personnelChange/getList/bizLeader", getParams, function (res) {
if (res && res.data) {
resourceData.value = res.data ? res.data : [];
count.value = res.count;
loading.value = false;
}
})
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
search.value.page=page;
search.value.limit=limit;
getListData();
}
let busIds=Vue.ref('');//选中的ids
//表格全选事件
let selectionChange = (val) => {
pitch.value = val;
let arr=[];
pitch.value.map(item=>{
arr.push(item.busId)
})
busIds.value=arr.join(",");//选中的值
}
//获取资源类型数据
let getResourceTypoe=()=>{
proxy.$http.get(`/api-web/manage/restype/list`, {}, function (res) {
if (res && res.data) {
resTypeOptions.value=res.data
}
})
}
//获取展示类型的字典数据
let initShowType=()=>{
proxy.$http.post("/api-web/manage/ddic/findSucDdics/DETAILS_POWER", {}, function (res) {
if (res && res.data) {
let arr=res.data;
if(arr && arr.length>0){
arr.map(v=>{
showTypeList.value.push({
name: v.ddicName
,value: v.ddicCode.substring(v.ddicCode.lastIndexOf("_")+1,v.ddicCode.length)
});
})
}
}
})
}
//批量取消相关资源
let changeCancel = () => {
if(pitch.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
}else{
proxy.$global.confirm("确定取消相关资源？", function () {
let parmas={
userName:userName.value,
busId:busIds.value
}
proxy.$http.post(`/api-web/personnelChange/remove/bizLeader`, parmas, function (res) {
if (res && res.success) {
proxy.$global.showMsg('取消成功！');
getListData()
}
})
});
}
}
//变更负责人
let changeAdmin = () => {
if(pitch.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
}else{
show.value=true;
}
}
//变更人员的弹框关闭后
let hideDialog =(flag)=>{
show.value=flag;
}
//变更人员的弹框保存后
let savebtn =(obj)=>{
show.value=false;
//obj.selectModel 选中的用户组（一个/主负责人) obj.selectModelSecond 辅负责人，都是数组
let targetUserName='';
if(obj.selectModel){
targetUserName=obj.selectModel.join(',')
}
let params={
busId:busIds.value,
targetUserName:targetUserName,
userName:userName.value,
}
proxy.$http.post(`/api-web/personnelChange/update/bizLeader`, params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('变更成功！');
getListData()
}
})
}
// 挂载完
Vue.onMounted(() => {
initShowType();
getResourceTypoe();
getListData();
})
return {
isMulti,
isTwoGroup,
show,
initShowType,
showTypeList,
search,
resTypeOptions,
changeCancel,
count,
hideDialog,
savebtn,
changeAdmin,
getResourceTypoe,
resourceData,
columns,
height,
loading,
selectionChange,
getListData,
loadTableDataList,
userName
}
}
}
\ No newline at end of file
... ...
<el-row>
<el-col :span="24" class="search">
<div class="condition" style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;width: 300px">
<el-input v-model="data.searchParams.keywords" placeholder="关键字支持：名称、负责人、业务描述"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getList">查询</el-button>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button type="primary" @click="removeRel">取消</el-button>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button type="primary" @click="changeUser">变更</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="data.columns"
:dataList="data.tableData"
:treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
:total="data.count"
:pageSize="pageSize"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
</template>
</cm-table-page>
</el-col>
</el-row>
<ChangeUsersList :show="data.userDialogFlag" @hideDialog="showUserDialog" @savebtn="saveRel"></ChangeUsersList>
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
'ChangeUsersList': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/changeUsersList/index')
),
},
data() {
},
props: {},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//列表高度
let height = Vue.ref(window.innerHeight);
let data = Vue.ref({
searchParams: {
"page": 1,
"limit": 50,
"keywords": "",
"userName": proxy.$route.query.username,
"busId": ""
},
userDialogFlag : false,
count: 0,
columns: [{
prop: "busTypeName",
label: "名称",
width: "250",
sortable: true,
align: 'center'
}, {
prop: "nickname",
label: "负责人",
width: "120",
sortable: true,
align: 'center'
}, {
prop: "busTypeDesc",
label: "业务描述",
width: "200",
sortable: true,
align: 'center'
}, {
prop: "isUse",
label: "是否使用",
sortable: true,
align: 'center',
render: (row) => {
switch (row.isUse) {
case 0:
return '否';
case 1:
return '是';
default:
return '';
}
}
}, {
prop: "important",
label: "重要程度",
sortable: true,
align: 'center',
render: (row) => {
switch (row.important) {
case 1:
return '核心';
case 2:
return '重要';
case 3:
return '一般';
case 9:
return '虚拟业务';
default:
return '';
}
}
}, {
prop: "sort",
label: "排序",
sortable: true,
align: 'center'
}],
tableData: [],
// 表格选中
checkArr:[]
})
const getList = () => {
proxy.$http.post(`/api-web/personnelChange/getList/bizPer`, data.value.searchParams, function (res) {
if (res && res.data) {
let dataVal = data.value;
let list = res.data;
let count = res.count;
let tableData = list.filter(function (v) {
if (v.parentId == '0') {
// 获取子节点
let childs = list.filter(function (v1) {
if (v1.parentId != '0' && v1.parentId == v.busId) {
// 获取子节点
return v1;
}
}).sort(function (a, b) {
return a.sort - b.sort
})
v.children = childs;
return v;
}
}).sort(function (a, b) {
return a.sort - b.sort
})
dataVal.tableData = tableData;
dataVal.count = count;
}
})
}
// 展示用户选择
let showUserDialog = (flg) =>{
data.value.userDialogFlag = flg;
}
let saveRel = (obj) =>{
// 获取选中
let arr = data.value.checkArr;
if(arr.length == 0){
proxy.$global.showMsg('请至少选择一项','warning');
return;
}
let params = {
targetUserName: obj.selectModel.join(''),
"userName": proxy.$route.query.username,
"busId": arr.join(',')
}
if(params.targetUserName == params.userName){
proxy.$global.showMsg('变更用户不能与变更前用户一致，请修改！','warning');
return;
}
proxy.$http.post(`/api-web/personnelChange/update/bizPer`,params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('变更成功！');
showUserDialog(false);
// 刷新表格
getList();
}
})
}
// 变更
let changeUser = () =>{
// 获取选中
let arr = data.value.checkArr;
if(arr.length == 0){
proxy.$global.showMsg('请至少选择一项','warning');
return;
}
showUserDialog(true);
}
/**
* 取消
*/
let removeRel = () =>{
let arr = data.value.checkArr;
if(arr.length == 0){
proxy.$global.showMsg('请至少选择一项','warning');
return;
}
data.value.searchParams.busId = arr.join(',')
proxy.$global.confirm("确定取消相关资源？", function () {
proxy.$global.showMsg('取消成功！');
proxy.$http.post(`/api-web/personnelChange/remove/bizPer`, data.value.searchParams , function (res) {
if (res && res.success) {
proxy.$global.showMsg('取消成功！');
getList()
}
})
});
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
let dataVal = data.value;
dataVal.page = page;
dataVal.limit = limit;
getList();
}
// 表格全选事件
let selectionChange = (val) => {
let checkArr = [];
val.map(item => {
checkArr.push(item.busId)
})
data.value.checkArr = checkArr;
let isCheck = (list, checkArr) => {
list.forEach((v, i) => {
v.checked = checkArr.includes(v.busId);
if (v.children) {
isCheck(v.children, checkArr);
}
});
}
isCheck(data.value.tableData, checkArr);
}
// 挂载完
Vue.onMounted(() => {
getList();
})
return {
height,
data,
getList,
changeUser,
showUserDialog,
removeRel,
loadTableDataList,
selectionChange,
saveRel
}
}
}
... ...
<cm-dialog :title="title" width="500px" :showDialogVisible="show" @hidedialog="hidedialog" @okfunc="getUser">
<template v-slot>
<el-row >
<el-col :span="24" class="table-height">
<span v-if="isTwoGroup">主负责人：</span>
<el-select
v-model="selectModel"
:multiple="isMulti"
placeholder="请选择用户"
style="width:80%"
clearable
filterable
>
<el-option
v-for="item in userList"
:key="item.username"
:label="item.nickname"
:value="item.username"
>
<div >
<span>{{item.orgName}}/{{item.nickname}}</span>
</div>
</el-option>
</el-select>
</el-col>
</el-row>
<el-row v-if="isTwoGroup" style="margin-top:10px;">
<el-col :span="24">
<span>辅负责人：</span>
<el-select
v-model="selectModelSecond"
multiple
placeholder="请选择用户"
style="width:80%"
clearable
filterable
>
<el-option
v-for="item in userListSecond"
:key="item.username"
:label="item.nickname"
:value="item.username"
>
<div >
<span>{{item.orgName}}/{{item.nickname}}</span>
</div>
</el-option>
</el-select>
</el-col>
</el-row>
</template>
</cm-dialog>
\ No newline at end of file
... ...
export default {
name: 'changeUsersList',
template: '',
components: {
},
data() {
},
props: {
title: {
type: String,
default: '用户列表'
},
show:{
type:Boolean,
default: false
},
//是否为多选
isMulti:{
type:Boolean,
default:false
},
//如果是主/辅负责人时为true
isTwoGroup:{
type:Boolean,
default:false
}
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
let height=Vue.ref(window.innerHeight);
let selectModel=Vue.ref([]);
let selectModelSecond=Vue.ref([]);
let hidedialog = () => {
emit('hideDialog', false);
}
let getUser = () =>{
let obj={}
let arr=[];
if(props.isMulti){
arr=selectModel.value
}else{
arr=[selectModel.value];
}
if(props.isTwoGroup){
obj={
selectModel: arr,
selectModelSecond: selectModelSecond.value
}
}else{
obj={
selectModel: arr,
}
}
emit('savebtn', obj);
}
let search=Vue.ref({
username:'',
nickname:'',
enabled:'',
orgId:'',
roles:'',
limit:999999,
page:1
})
let userList=Vue.ref([]);
let userListSecond=Vue.ref([]);
let count=Vue.ref(0);
//获取所有用户
let getAllUser = () =>{
proxy.$http.get('/api-user/users', search.value, function (res) {
if (res && res.data) {
userList.value=res.data;
userListSecond.value=res.data;
count.value=res.count;
}
})
}
// 挂载完
Vue.onMounted(() => {
getAllUser();
})
return {
selectModel,
height,
selectModelSecond,
getAllUser,
userList,
userListSecond,
count,
hidedialog,
getUser,
search
}
}
}
\ No newline at end of file
... ...
<el-row>
<el-col :span="24" class="search">
<div class="condition" style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;width: 300px">
<el-input v-model="data.searchParams.keywords" placeholder="关键字支持：名称、负责人、业务描述"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getList">查询</el-button>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button type="primary" @click="removeRel">取消</el-button>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button type="primary" @click="changeUser">变更</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="data.columns"
:dataList="data.tableData"
:treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
:total="data.count"
:pageSize="pageSize"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
</template>
</cm-table-page>
</el-col>
</el-row>
<ChangeUsersList :show="data.userDialogFlag" @hideDialog="showUserDialog" @savebtn="saveRel"></ChangeUsersList>
... ...
export default {
name: 'fileManagePer',
template: '',
components: {
'ChangeUsersList': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/changeUsersList/index')
),
},
data() {
},
props: {},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//列表高度
let height = Vue.ref(window.innerHeight);
let data = Vue.ref({
searchParams: {
"page": 1,
"limit": 50,
"keywords": "",
"userName": proxy.$route.query.username,
"docId": ""
},
userDialogFlag: false,
count: 0,
columns: [{
prop: "name",
label: "名称",
width: "350",
sortable: true,
align: 'center'
}, {
prop: "docNo",
label: "文档编号",
width: "100",
sortable: true,
align: 'center'
}, {
prop: "createUserName",
label: "创建用户",
width: "100",
sortable: true,
align: 'center'
}, {
prop: "localPath",
label: "文档地址",
sortable: true,
align: 'left'
}],
tableData: [],
// 表格选中
checkArr: []
})
const getList = () => {
proxy.$http.post(`/api-web/personnelChange/getList/fileManagePer`, data.value.searchParams, function (res) {
if (res && res.data) {
let dataVal = data.value;
let list = res.data;
let count = res.count;
dataVal.tableData = list;
dataVal.count = count;
}
})
}
// 展示用户选择
let showUserDialog = (flg) => {
data.value.userDialogFlag = flg;
}
let saveRel = (obj) => {
// 获取选中
let arr = data.value.checkArr;
if (arr.length == 0) {
proxy.$global.showMsg('请至少选择一项', 'warning');
return;
}
let params = {
targetUserName: obj.selectModel.join(''),
"userName": proxy.$route.query.username,
"docId": arr.join(',')
}
if (params.targetUserName == params.userName) {
proxy.$global.showMsg('变更用户不能与变更前用户一致，请修改！', 'warning');
return;
}
proxy.$http.post(`/api-web/personnelChange/update/fileManagePer`, params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('变更成功！');
showUserDialog(false);
// 刷新表格
getList();
}
})
}
// 变更
let changeUser = () => {
// 获取选中
let arr = data.value.checkArr;
if (arr.length == 0) {
proxy.$global.showMsg('请至少选择一项', 'warning');
return;
}
showUserDialog(true);
}
/**
* 取消
*/
let removeRel = () => {
let arr = data.value.checkArr;
if (arr.length == 0) {
proxy.$global.showMsg('请至少选择一项', 'warning');
return;
}
data.value.searchParams.docId = arr.join(',')
proxy.$global.confirm("确定取消相关资源？", function () {
proxy.$global.showMsg('取消成功！');
proxy.$http.post(`/api-web/personnelChange/remove/fileManagePer`, data.value.searchParams, function (res) {
if (res && res.success) {
proxy.$global.showMsg('取消成功！');
getList()
}
})
});
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
let dataVal = data.value;
dataVal.page = page;
dataVal.limit = limit;
getList();
}
// 表格全选事件
let selectionChange = (val) => {
let checkArr = [];
val.map(item => {
checkArr.push(item.id)
})
data.value.checkArr = checkArr;
let isCheck = (list, checkArr) => {
list.forEach((v, i) => {
v.checked = checkArr.includes(v.id);
if (v.children) {
isCheck(v.children, checkArr);
}
});
}
isCheck(data.value.tableData, checkArr);
}
// 挂载完
Vue.onMounted(() => {
getList();
})
return {
height,
data,
getList,
changeUser,
showUserDialog,
removeRel,
loadTableDataList,
selectionChange,
saveRel
}
}
}
... ...
<div class="batchChange-container" style="padding:10px;">
<el-row >
<el-col :span="24">
<el-col :span="22">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane v-for="(item,index) in tabData" :key="index" :label="item.name" :name="item.code">
<el-tab-pane v-for="(item,index) in tabData" :key="index" :label="item.ddicName" :name="item.ddicCode">
<div class="table-container" v-if="item.code=='resourcePer'">
<!--<div class="table-container" v-if="item.ddicCode=='resourcePer'">
<el-row>
<el-col :span="24" class="search">
<div class="condition" style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-input v-model="search.keyword" placeholder="请输入关键字"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-select clearable multiple v-model="search.resType" placeholder="请选择资源类型">
<el-option
v-for="item in resTypeOptions"
:key="item.kpiId"
:label="item.kpiName"
:value="item.kpiId">
<span style="float: left">{{ item.kpiId }}</span>
<span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.kpiName }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getListData">查询</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row style="margin-bottom: 10px;">
<div class="flex-div-start">
<el-button type="primary" @click="save()" size="small">取消</el-button>
<el-button type="primary" @click="conserve()" size="small" style="margin-left: 6px">变更</el-button>
<el-button type="primary" @click="conserve()" size="small" style="margin-left: 6px">导出</el-button>
</div>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns"
:dataList="portSenseConfigData"
:total="count"
:pageSize="pageSize"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
<!-- <div v-if="prop == 'protocolType'">
<el-select placeholder="请选择" size="small" style="width: 100%"
@change="changePortSense(row,prop,column)" v-model="row.protocolType"
:multiple="false"
collapse-tags clearable filterable placeholder="请选择">
<el-option label="TCP协议" :value="'tcp-port'"></el-option>
<el-option label="UDP协议" :value="'udp-port'"></el-option>
</el-select>
</div>
<div v-else>
<el-input @blur="changePortSense(row,prop,column)"
:type="prop == intervalTime ? 'number' : 'text'"
size="small" placeholder="请填写"v-model="row[prop]">
<template #suffix>
<i class="el-icon-edit-outline"/>
</template>
</el-input>
</div>-->
</template>
<!-- <template #tools="{scope}">
<el-button type="text" size="small" @click.prevent="deleteItem(scope.row,scope.$index)">
<i class="el-icon-delete"/>
</el-button>
</template>-->
</cm-table-page>
</el-col>
</el-row>
<ResourcePer></ResourcePer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='resourceLeader'">
<ResourceLeader></ResourceLeader>
</div>
<div class="table-container" v-else-if="item.ddicCode=='resourceTypePer'">
<ResourceTypePer></ResourceTypePer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='bizPer'">
<BizPer></BizPer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='bizLeader'">
<BizLeader></BizLeader>
</div>
<div class="table-container" v-else-if="item.ddicCode=='alarmSubPer'">
<AlarmSubPer></AlarmSubPer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='rolePer'">
<RolePer></RolePer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='topoPer'">
<TopoPer></TopoPer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='autoPatrolPortPer'">
<AutoPatrolPortPer></AutoPatrolPortPer>
</div>
<div class="table-container" v-else-if="item.ddicCode=='fileManagePer'">
<FileManagePer></FileManagePer>
</div>
<div class="table-container" v-else>{{item.name}}</div>
<div class="table-container" v-else>暂无数据</div>-->
</el-tab-pane>
</el-tabs>
</el-col>
<el-col :span="2">
<div style="padding:0 10px 6px;border-bottom: 2px solid var(--el-border-color-light);">
<el-button type="primary" @click="exportClick()" size="small" style="margin-left: 6px">导出</el-button>
</div>
</el-col>
</el-row>
</div>
\ No newline at end of file
<el-row>
<el-col :span="24">
<component :is="activeName" ref="roomDetail" />
</el-col>
</el-row>
</div>
<cm-dialog :title="title" width="500px" :showDialogVisible="show" @hidedialog="hidedialog" @okfunc="okExport">
<template v-slot>
<el-row>
<el-col :span="24">
<el-radio-group v-model="isAll">
<el-radio :label="1">导出全部</el-radio>
<el-radio :label="0">导出部分</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row v-if="isAll==0">
<el-col :span="24" class="table-height">
<!-- <span style="margin-right:6px;"><el-button type="primary" @click="clickAll">全部</el-button></span>-->
<el-select
v-model="selectModel"
placeholder="请选择需要导出的页签"
multiple
style="width:80%"
clearable
filterable
>
<el-option
v-for="item in tabData"
:key="item.ddicCode"
:label="item.ddicName"
:value="item.ddicCode"
/>
</el-select>
</el-col>
</el-row>
</template>
</cm-dialog>
\ No newline at end of file
... ...
export default {
name: 'portSense',
name: 'batchChangeLeaders',
template: '',
components: {
//资源下拉框
'port-sense-select': Vue.defineAsyncComponent(
() => myImport('views/portSenseSelect/index')
//选项卡组件
'resourcePer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/resourcePer/index')
),
'resourceLeader': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/resourceLeader/index')
),
'resourceTypePer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/resourceTypePer/index')
),
'bizPer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/bizPer/index')
),
'bizLeader': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/bizLeader/index')
),
'alarmSubPer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/alarmSubPer/index')
),
'rolePer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/rolePer/index')
),
'topoPer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/topoPer/index')
),
'autoPatrolPortPer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/autoPatrolPortPer/index')
),
'fileManagePer': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/fileManagePer/index')
),
},
data() {
},
props: {
parameter: {
type: Array,
default: []
}
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
const tabData=Vue.ref([
{name:'资源权限',code:'resourcePer'},
{name:'资源负责人',code:'resourceLeader'},
{name:'资源类型权限',code:'resourceTypePer'},
{name:'业务（乙方运维）权限',code:'bizPer'},
{name:'业务负责人',code:'bizLeader'},
{name:'告警订阅权限',code:'alarmSubPer'},
{name:'角色权限',code:'rolePer'},
{name:'拓扑负责人',code:'topoPer'},
{name:'自动化巡检报表权限',code:'autoPatrolPortPer'},
{name:'文档管理权限',code:'fileManagePer'}
])
const activeName = Vue.ref(tabData.value[0].code)
const tabData=Vue.ref();//页签列表数据
const activeName = Vue.ref('');//标签页显示的页签名称
let selectModel=Vue.ref([]);//导出列表选中的数据
let title=Vue.ref('导出列表');//导出列表弹框名称
let show=Vue.ref(false);//导出列表弹框是否显示
let isAll=Vue.ref(1);//导出全部或者部分
//页签点击事件
const handleClick = (tab, event) => {
console.log(tab, event)
}
let showTypeList=Vue.ref([]);
let search = Vue.ref({
resType: '',
keyword: '',
page: 1,
limit: 20,
});
let resTypeOptions=Vue.ref([])
const columns = [
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
},
{
prop: 'ip',
label: 'IP地址',
sortable: true,
align: 'center',
},
{
prop: 'port',
label: '端口号',
sortable: true,
align: 'center',
},
{
prop: 'admin',
label: '负责人',
sortable: true,
align: 'center',
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
prop: 'state',
label: '资源状态',
sortable: true,
align: 'center',
render: function (row) {
switch (row.state) {
case "new" :
return '<button type="button" class="layui-btn layui-btn-warm layui-bg-gray layui-btn-radius layui-btn-xs p-0-15">未监控</button>'
case "monitor" :
return '<button type="button" class="layui-btn layui-btn-radius layui-bg-green layui-btn-xs p-0-15" style="background-color: #0BAC33 !important;">监控中</button>'
case "stop" :
return '<button type="button" class="layui-btn layui-btn-warm layui-bg-red layui-btn-radius layui-btn-xs p-0-15">暂停</button>'
default :
return '<button type="button" class="layui-btn layui-btn-warm layui-bg-gray layui-btn-radius layui-btn-xs p-0-15">未监控</button>'
}
}
},
{
prop: 'paramDesc',
label: '展示类型',
sortable: true,
align: 'center',
render: function (row) {
if(row.resType == 'HOST_X86SERVER'){
//初始化select内容
/* var html='<div><select data-resId="'+d.resId+'" data-username="'+username+'" data-index="99" name="showType" class="layui-input user_showType" style="min-width: 150px;display: inline">';
showTypeList.value.map((v,i)=>{
if(d.showType == v.value){
html += '<option value="' + v.value + '" selected>' + v.name + '</option> '
}else{
html += '<option value="' + v.value + '">' + v.name + '</option> '
}
})
html+='</select></div>';
return html;*/
}else{
return '';
}
}
}
];
//配置列表总数
let count = Vue.ref(0);
//列表数据
let portSenseConfigData = Vue.ref([]);
//数据库的数据
let portSenseConfigList = Vue.ref([]);
//资源数据
let resIdArr = Vue.ref([]);
//列表高度
let height = Vue.ref(window.innerHeight);
//列表分页
let pageSize = Vue.ref(400);
//加载
let loading = Vue.ref(true);
//选中数据
let pitch = Vue.ref([]);
//下拉框数据
let portSenseSelectData = Vue.ref([]);
//获取列表数据
const getListData = ({page, limit}) => {
//获取传递过来的参数
resIdArr.value = JSON.parse(JSON.stringify(props.parameter));
//传递参数赋值给下拉框
portSenseSelectData.value = resIdArr.value;
let username=proxy.$route.query.username;
let resName=proxy.$route.query.resName;
//定义列表参数
let getParams = {
resIds: resIdArr.value.join(','),
resName: resName,
userId: username,
page: page,
limit: limit
};
proxy.$http.get("/api-web/manage/resource/getAllResByUser", getParams, function (res) {
if (res && res.success) {
portSenseConfigData.value = res.data ? res.data : [];
count.value = res.count;
loading.value = false;
portSenseConfigList.value = res.data ? JSON.parse(JSON.stringify(res.data)) : [];
}
})
}
//表格全选事件
let selectionChange = (val) => {
pitch.value = val;
proxy.portSenseConfigData.map((v, i) => {
v.checked = false;
});
let selectData = val;
if (selectData.length > 0) {
selectData.map((item, index) => {
proxy.portSenseConfigData.map((v, i) => {
if (item.id == v.id) {
v.checked = true;
}
})
})
} else {
proxy.portSenseConfigData.map((v, i) => {
v.checked = false;
})
}
//导出点击事件
const exportClick=()=>{
show.value=true;
}
//删除单个数据
let deleteItem = (row, index) => {
proxy.$global.confirm("确认删除吗？", function () {
deleteItems(row, index);
//导出全部按钮点击事件
const clickAll=()=>{
let arr=[];
tabData.value.map(item=>{
arr.push(item.ddicCode)
})
selectModel.value=arr;
}
//删除多个或单个
let deleteItems = (row, index) => {
//新添加未保存的
let sign = deleteNotSave(row, index);
if (sign) {
return false;
}
proxy.$http.post('/api-web/bResourceExtendParam/deleteConfig', row, function (res) {
if (res && res.success) {
proxy.$global.showMsg('删除成功');
loadTableDataList({page: 1, limit: pageSize.value});
}
})
//导出弹框关闭事件
let hidedialog=(flag)=>{
show.value=flag;
}
//删除新添加但未保存的
let deleteNotSave = (row, index) => {
let sign = false;
let list = portSenseConfigData.value;
if(row.id === ""){
portSenseConfigData.value = list.filter((item, i, array) => index !== i);
//导出弹框确认事件
let okExport=()=>{
let params={
userName:proxy.$route.query.username,
}
if (list.length > portSenseConfigData.value.length) {
proxy.$global.showMsg('删除成功');
sign = true;
}
return sign;
}
//新增 添加一行数据
let save = () => {
let data = {
id: "",
intervalTime: null,
paramCode: "",
paramDesc: "",
paramValue: "",
port: "",
portDesc: "",
protocolType: "",
resId: "",
resIdList: resIdArr.value,
}
portSenseConfigData.value.push(data);
}
//下拉框值改变事件
let changePortSense = () => {
}
//保存
let conserve = () => {
//数据验证
let msg = verifyData();
if (msg !== "") {
proxy.$global.showMsg(msg, "warning");
return false;
}
//逻辑验证
let identifying = isSave();
if (identifying !== "") {
proxy.$global.showMsg(identifying, "warning");
return false;
}
proxy.$http.post("/api-web/bResourceExtendParam/conserve", portSenseConfigData.value, function (res) {
if (res && res.success) {
proxy.$global.showMsg("保存成功！");
loadTableDataList({page: 1, limit: pageSize.value});
if(isAll.value==0){
if(selectModel.value && selectModel.value.length>0){
params.code=selectModel.value.join(',');
}else{
proxy.$global.showMsg('请选择导出所需列表','warning');
return;
}
})
}
//保存表单验证
let verifyData = () => {
let msg = "";
//协议类型不能为空，端口备注不能为空,端口号请输入数字，间隔时长请输入数字，
let list = portSenseConfigData.value;
let li = columns.filter(item => "paramDesc" !== item.prop);
list.forEach(function (item, index, arr) {
li.forEach(function (e, i, array) {
if (item[e.prop] == null || item[e.prop] === '') {
msg = e.label + '不能为空';
} else {
if (['protocolType', 'portDesc'].indexOf(e.prop) === -1 && !/^\d+$/.test(item[e.prop])) {
msg = e.label + '请输入数字';
}else{
if(['protocolType', 'portDesc'].indexOf(e.prop) === -1 && item[e.prop].length>=8){
msg = e.label + '不能超过8位';
}else{
if(['protocolType', 'portDesc'].indexOf(e.prop) === -1 && item[e.prop]<=0){
msg = e.label + '只能大于零';
}
}
}
}
})
})
return msg
}
//是否可以保存
let isSave = () => {
let msg = "";
//零个资源不用判断
if (resIdArr.value.length === 0) {
return "必须选中资源";
}
//单个资源不用判断
if (resIdArr.value.length === 1) {
return msg;
}
//多个资源时，如果当前已选资源中存在列表新增加的协议类型和端口号对应的数据时，提示不允许进行保存，提示信息中必须包含资源名称+端口类型、端口号，
let list = [];
let arr = [];
portSenseConfigData.value.forEach(item => {
item.resIdList.forEach(map => {
let obj = Object.assign({}, item);
obj["resId"] = map;
obj["resIdList"] = [map];
list.push(obj);
})
});
//查看当前页面数据是否重复
groupByCount(list, arr);
if (arr.length > 0) {
return arr.join(',');
}else{
params.code='';
}
//查看当前页面数据跟数据库是否重复
let presentArray = [];
//过滤不是新增的数据
list = list.filter(item => item.id === "");
resIdArr.value.forEach(item => {
let li = [];
let getParams = {
resIds: item,
page: 1,
limit: 9999
};
proxy.$http.get("/api-web/bResourceExtendParam/portSensePage", getParams, function (res) {
if (res && res.success) {
li = res.data ? res.data : [];
list.forEach(e => {
li.forEach(map => {
if (map.resId === e.resId && map.paramCode === e.protocolType && map.port === e.port) {
let obj = Object.assign({}, e);
obj["resName"] = map.resName;
presentArray.push(obj);
}
});
});
}
}, null, null, null, false);
});
presentArray.forEach(item => {
let str = item.resName + "的" + item.paramCode.split("-")[0] + "协议" + "侦测的" + item.port + "端口号已侦测";
arr.push(str);
})
msg = arr.join(',');
return msg;
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
getListData({page, limit});
}
//修改父组件的值
let selectRes = (item) => {
portSenseConfigData.value = item;
}
//数组查找重复数据并统计行数
let groupByCount = (arr, array) => {
let list = [];
arr.sort((a, b) => {
if (a.resId !== b.resId) {
return a.resId < b.resId ? -1 : 1;
} else {
return a.name < b.name ? -1 : 1;
}
});
for (let i = 0; i < arr.length;) {
let count = 0;
for (let j = i; j < arr.length; j++) {
if (arr[i].resId === arr[j].resId && arr[i].protocolType === arr[j].protocolType && arr[i].port === arr[j].port) {
count++;
}
}
list.push({array: arr[i], count: count});
i += count;
}
list.forEach(item => {
if (item.count > 1) {
let str = item.array.resName + "的" + item.array.paramCode.split("-")[0] + "协议" + "侦测的" + item.array.port + "端口号已侦测";
array.push(str);
}
})
}
//获取展示类型的字典数据
let initShowType=()=>{
proxy.$http.get("/api-web/manage/resource/getAllResByUser", getParams, function (res) {
if (res && res.success) {
let arr=res.data;
if(arr && arr.length>0){
arr.map(v=>{
showTypeList.value.push({
name: v.ddicName
,value: v.ddicCode.substring(v.ddicCode.lastIndexOf("_")+1,v.ddicCode.length)
});
})
}
proxy.$http.downloadFile("/api-web/personnelChange/export", params);
}
//获取需变更的选项卡数据
let getBatchChangeData=()=>{
proxy.$http.post("/api-web/manage/ddic/findSucDdics/batch_change_leaders", {}, function (res) {
if (res && res.data && res.data.length>0) {
tabData.value = res.data.sort((a,b)=>a.ddicSort-b.ddicSort);
activeName.value=tabData.value[0].ddicCode;
}
})
}
// 挂载完
Vue.onMounted(() => {
getListData({page: 1, limit: pageSize.value});
getBatchChangeData();
})
return {
getBatchChangeData,
activeName,
handleClick,
tabData,
initShowType,
showTypeList,
search,
resTypeOptions,
count,
portSenseConfigData,
columns,
height,
pageSize,
loading,
selectionChange,
deleteItem,
save,
getListData,
loadTableDataList,
changePortSense,
conserve,
selectRes,
portSenseSelectData
selectModel,
title,
show,
exportClick,
hidedialog,
okExport,
clickAll,
isAll
}
}
}
\ No newline at end of file
... ...
<el-row>
<el-col :span="24" class="search">
<div class="condition" >
<el-form ref=“form” style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-input v-model="search.keyword" placeholder="请输入资源名称/ip"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-select filterable clearable v-model="search.resType" placeholder="请选择资源类型">
<el-option
v-for="item in resTypeOptions"
:key="item.resTypeCode"
:label="item.resTypeName"
:value="item.resTypeCode">
</el-option>
</el-select>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getListData" type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
<el-row style="margin-bottom: 10px;">
<div class="flex-div-start">
<el-button type="primary" @click="changeCancel()" size="small">取消</el-button>
<el-button type="primary" @click="changeAdmin()" size="small" style="margin-left: 6px">变更</el-button>
</div>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns"
:dataList="resourceData"
:total="count"
:layout="'total, prev,pager,next,sizes, jumper'"
:pageSize="search.limit"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
<div v-if="prop == 'paramDesc'">
<el-select v-if="row.resType == 'HOST_X86SERVER'" v-model="row.showType" placeholder="">
<el-option
v-for="item in showTypeList"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
</cm-table-page>
</el-col>
</el-row>
<ChangeUsersList :show="show" :isTwoGroup="isTwoGroup" :isMulti="isMulti" @hideDialog="hideDialog" @savebtn="savebtn"></ChangeUsersList>
... ...
export default {
name: 'resourceLeader',
template: '',
components: {
'ChangeUsersList': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/changeUsersList/index')
),
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//接收从用户列表中选中的用户
let userName=Vue.ref(proxy.$route.query.username);
//变更人员弹框
let show=Vue.ref(false);
//变更人员列表是否多选
let isMulti=Vue.ref(false);
//变更人员列表是否是两组
let isTwoGroup=Vue.ref(false);
//配置列表总数
let count = Vue.ref(0);
//列表高度
let height = Vue.ref(window.innerHeight);
//列表分页
let limit = Vue.ref(400);
//加载
let loading = Vue.ref(true);
//选中数据
let pitch = Vue.ref([]);
let showTypeList=Vue.ref([]);
let search = Vue.ref({
resType: '',
keyword: '',
page: 1,
limit: 20,
});
let resTypeOptions=Vue.ref([])
const columns = [
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
},
{
prop: 'ip',
label: 'IP地址',
sortable: true,
align: 'center',
},
{
prop: 'port',
label: '端口号',
sortable: true,
align: 'center',
},
{
prop: 'resMainAdmin',
label: '主负责人',
sortable: true,
align: 'center',
},
{
prop: 'resAuxiliaryAdmin',
label: '辅负责人',
sortable: true,
align: 'center',
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
prop: 'state',
label: '资源状态',
sortable: true,
align: 'center',
render: function (row) {
switch (row.state) {
case "new" :
return '<span style="background-color: #eee;color:#666;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">未监控</span>'
case "monitor" :
return '<span style="background-color: #0BAC33;color:#fff;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">监控中</span>'
case "stop" :
return '<span style="background-color: #d81e06;color:#fff;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">暂停</span>'
default :
return '<span style="background-color: #eee;color:#666;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">未监控</span>'
}
}
},
{
prop: 'paramDesc',
label: '展示类型',
sortable: true,
align: 'center',
/* render: function (row) {
}*/
}
];
//列表数据
let resourceData = Vue.ref([]);
//获取列表数据
const getListData = () => {
loading.value = true;
//定义列表参数
let getParams = {
resType:search.value.resType,
keywords:search.value.keyword,
userName:userName.value,
page: search.value.page,
limit: search.value.limit
};
proxy.$http.post("/api-web/personnelChange/getList/resourceLeader", getParams, function (res) {
if (res && res.data) {
resourceData.value = res.data ? res.data : [];
count.value = res.count;
loading.value = false;
}
})
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
search.value.page=page;
search.value.limit=limit;
getListData();
}
let resIds=Vue.ref('');//选中的ids
//表格全选事件
let selectionChange = (val) => {
pitch.value = val;
let arr=[];
pitch.value.map(item=>{
arr.push(item.resId)
})
resIds.value=arr.join(",");//选中的值
/*proxy.resourceData.map((v, i) => {
v.checked = false;
});
let selectData = val;
if (selectData.length > 0) {
selectData.map((item, index) => {
proxy.resourceData.map((v, i) => {
if (item.id == v.id) {
v.checked = true;
}
})
})
} else {
proxy.resourceData.map((v, i) => {
v.checked = false;
})
}*/
}
//获取资源类型数据
let getResourceTypoe=()=>{
proxy.$http.get(`/api-web/manage/restype/list`, {}, function (res) {
if (res && res.data) {
resTypeOptions.value=res.data
}
})
}
//获取展示类型的字典数据
let initShowType=()=>{
proxy.$http.post("/api-web/manage/ddic/findSucDdics/DETAILS_POWER", {}, function (res) {
if (res && res.data) {
let arr=res.data;
if(arr && arr.length>0){
arr.map(v=>{
showTypeList.value.push({
name: v.ddicName
,value: v.ddicCode.substring(v.ddicCode.lastIndexOf("_")+1,v.ddicCode.length)
});
})
}
}
})
}
//批量取消相关资源
let changeCancel = () => {
if(pitch.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
}else{
proxy.$global.confirm("确定取消相关资源？", function () {
let parmas={
userName:userName.value,
resId:resIds.value
}
proxy.$http.post(`/api-web/personnelChange/remove/resourceLeader`, parmas, function (res) {
if (res && res.success) {
proxy.$global.showMsg('取消成功！');
getListData()
}
})
});
}
}
//变更负责人
let changeAdmin = () => {
if(pitch.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
}else{
show.value=true;
}
}
//变更人员的弹框关闭后
let hideDialog =(flag)=>{
show.value=flag;
}
//变更人员的弹框保存后
let savebtn =(obj)=>{
show.value=false;
//obj.selectModel 选中的用户组（一个/主负责人) obj.selectModelSecond 辅负责人，都是数组
let targetUserName='';
if(obj.selectModel){
targetUserName=obj.selectModel.join(',')
}
let params={
resId:resIds.value,
targetUserName:targetUserName,
userName:userName.value,
}
proxy.$http.post(`/api-web/personnelChange/update/resourceLeader`, params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('变更成功！');
getListData()
}
})
}
// 挂载完
Vue.onMounted(() => {
initShowType();
getResourceTypoe();
getListData();
})
return {
isMulti,
isTwoGroup,
show,
initShowType,
showTypeList,
search,
resTypeOptions,
changeCancel,
count,
hideDialog,
savebtn,
changeAdmin,
getResourceTypoe,
resourceData,
columns,
height,
loading,
selectionChange,
getListData,
loadTableDataList,
userName
}
}
}
\ No newline at end of file
... ...
<el-row>
<el-col :span="24" class="search">
<div class="condition" >
<el-form ref=“form” style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-input v-model="search.keyword" placeholder="请输入资源名称/ip"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-select filterable clearable v-model="search.resType" placeholder="请选择资源类型">
<el-option
v-for="item in resTypeOptions"
:key="item.resTypeCode"
:label="item.resTypeName"
:value="item.resTypeCode">
</el-option>
</el-select>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getListData" type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
<el-row style="margin-bottom: 10px;">
<div class="flex-div-start">
<el-button type="primary" @click="changeCancel()" size="small">取消</el-button>
<el-button type="primary" @click="changeAdmin()" size="small" style="margin-left: 6px">变更</el-button>
</div>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns"
:dataList="resourceData"
:total="count"
:layout="'total, prev,pager,next,sizes, jumper'"
:pageSize="search.limit"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
<div v-if="prop == 'paramDesc'">
<el-select v-if="row.resType == 'HOST_X86SERVER'" v-model="row.showType" placeholder="">
<el-option
v-for="item in showTypeList"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
</cm-table-page>
</el-col>
</el-row>
<ChangeUsersList :show="show" :isTwoGroup="isTwoGroup" :isMulti="isMulti" @hideDialog="hideDialog" @savebtn="savebtn"></ChangeUsersList>
... ...
export default {
name: 'resourcePer',
template: '',
components: {
'ChangeUsersList': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/changeUsersList/index')
),
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//接收从用户列表中选中的用户
let userName=Vue.ref(proxy.$route.query.username);
//变更人员弹框
let show=Vue.ref(false);
//变更人员列表是否多选
let isMulti=Vue.ref(false);
//变更人员列表是否是两组
let isTwoGroup=Vue.ref(false);
//配置列表总数
let count = Vue.ref(0);
//列表高度
let height = Vue.ref(window.innerHeight);
//列表分页
let limit = Vue.ref(400);
//加载
let loading = Vue.ref(true);
//选中数据
let pitch = Vue.ref([]);
let showTypeList=Vue.ref([]);
let search = Vue.ref({
resType: '',
keyword: '',
page: 1,
limit: 20,
});
let resTypeOptions=Vue.ref([])
const columns = [
{
prop: 'resName',
label: '资源名称',
sortable: true,
align: 'center',
},
{
prop: 'ip',
label: 'IP地址',
sortable: true,
align: 'center',
},
{
prop: 'port',
label: '端口号',
sortable: true,
align: 'center',
},
{
prop: 'admin',
label: '负责人',
sortable: true,
align: 'center',
},
{
prop: 'resTypeName',
label: '资源类型',
sortable: true,
align: 'center',
},
{
prop: 'state',
label: '资源状态',
sortable: true,
align: 'center',
render: function (row) {
switch (row.state) {
case "new" :
return '<span style="background-color: #eee;color:#666;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">未监控</span>'
case "monitor" :
return '<span style="background-color: #0BAC33;color:#fff;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">监控中</span>'
case "stop" :
return '<span style="background-color: #d81e06;color:#fff;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">暂停</span>'
default :
return '<span style="background-color: #eee;color:#666;border-radius: 100px;padding:0 8px;display: inline-block;height:24px;line-height: 24px;">未监控</span>'
}
}
},
{
prop: 'paramDesc',
label: '展示类型',
sortable: true,
align: 'center',
/* render: function (row) {
}*/
}
];
//列表数据
let resourceData = Vue.ref([]);
//获取列表数据
const getListData = () => {
// resourceData.value=[];
loading.value = true;
//定义列表参数
let getParams = {
resType:search.value.resType,
keywords:search.value.keyword,
userName:userName.value,
page: search.value.page,
limit: search.value.limit
};
proxy.$http.post("/api-web/personnelChange/getList/resourcePer", getParams, function (res) {
if (res && res.data) {
resourceData.value = res.data ? res.data : [];
count.value = res.count;
loading.value = false;
}
})
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
search.value.page=page;
search.value.limit=limit;
getListData();
}
let resIds=Vue.ref('');//选中的ids
//表格全选事件
let selectionChange = (val) => {
pitch.value = val;
let arr=[];
pitch.value.map(item=>{
arr.push(item.resId)
})
resIds.value=arr.join(",");//选中的值
/*proxy.resourceData.map((v, i) => {
v.checked = false;
});
let selectData = val;
if (selectData.length > 0) {
selectData.map((item, index) => {
proxy.resourceData.map((v, i) => {
if (item.id == v.id) {
v.checked = true;
}
})
})
} else {
proxy.resourceData.map((v, i) => {
v.checked = false;
})
}*/
}
//获取资源类型数据
let getResourceTypoe=()=>{
proxy.$http.get(`/api-web/manage/restype/list`, {}, function (res) {
if (res && res.data) {
resTypeOptions.value=res.data
}
})
}
//获取展示类型的字典数据
let initShowType=()=>{
proxy.$http.post("/api-web/manage/ddic/findSucDdics/DETAILS_POWER", {}, function (res) {
if (res && res.data) {
let arr=res.data;
if(arr && arr.length>0){
arr.map(v=>{
showTypeList.value.push({
name: v.ddicName
,value: v.ddicCode.substring(v.ddicCode.lastIndexOf("_")+1,v.ddicCode.length)
});
})
}
}
})
}
//批量取消相关资源
let changeCancel = () => {
if(pitch.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
}else{
proxy.$global.confirm("确定取消相关资源？", function () {
let parmas={
userName:userName.value,
resId:resIds.value
}
proxy.$http.post(`/api-web/personnelChange/remove/resourcePer`, parmas, function (res) {
if (res && res.success) {
proxy.$global.showMsg('取消成功！');
getListData()
}
})
});
}
}
//变更负责人
let changeAdmin = () => {
if(pitch.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
}else{
show.value=true;
}
}
//变更人员的弹框关闭后
let hideDialog =(flag)=>{
show.value=flag;
}
//变更人员的弹框保存后
let savebtn =(obj)=>{
show.value=false;
//obj.selectModel 选中的用户组（一个/主负责人) obj.selectModelSecond 辅负责人，都是数组
let targetUserName='';
if(obj.selectModel){
targetUserName=obj.selectModel.join(',')
}
let params={
resId:resIds.value,
targetUserName:targetUserName,
userName:userName.value,
}
proxy.$http.post(`/api-web/personnelChange/update/resourcePer`, params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('变更成功！');
getListData()
}
})
}
// 挂载完
Vue.onMounted(() => {
initShowType();
getResourceTypoe();
getListData();
})
return {
isMulti,
isTwoGroup,
show,
initShowType,
showTypeList,
search,
resTypeOptions,
changeCancel,
count,
hideDialog,
savebtn,
changeAdmin,
getResourceTypoe,
resourceData,
columns,
height,
loading,
selectionChange,
getListData,
loadTableDataList,
userName
}
}
}
\ No newline at end of file
... ...
<el-row>
<el-col :span="24" class="search">
<div class="condition" >
<el-form ref=“form” style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-input v-model="search.keyword" placeholder="请输入资源类型"></el-input>
</el-form-item>
<!-- <el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-select filterable clearable v-model="search.resType" placeholder="请选择资源类型">
<el-option
v-for="item in resTypeOptions"
:key="item.resTypeCode"
:label="item.resTypeName"
:value="item.resTypeCode">
</el-option>
</el-select>
</el-form-item>-->
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getListData" type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
<el-row style="margin-bottom: 10px;">
<div class="flex-div-start">
<el-button type="primary" @click="changeCancel()" size="small">取消</el-button>
<el-button type="primary" @click="changeAdmin()" size="small" style="margin-left: 6px">变更</el-button>
</div>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height tree-table">
<cm-table-page :columns="columns"
:dataList="resourceData"
:total="count"
:layout="'total, prev,pager,next,sizes, jumper'"
:pageSize="search.limit"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:getRowKeys="'resTypeId'"
:defaultExpand="true"
:height="(height - 200)">
<template #default="{row,prop,column}">
<div v-if="prop == 'showType'">
<el-select v-if="row.resType == 'HOST_X86SERVER'" v-model="row.showType" placeholder="">
<el-option
v-for="item in showTypeList"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
</cm-table-page>
</el-col>
</el-row>
<ChangeUsersList :show="show" :isTwoGroup="isTwoGroup" :isMulti="isMulti" @hideDialog="hideDialog" @savebtn="savebtn"></ChangeUsersList>
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
'ChangeUsersList': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/changeUsersList/index')
),
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//接收从用户列表中选中的用户
let userName=Vue.ref(proxy.$route.query.username);
//变更人员弹框
let show=Vue.ref(false);
//变更人员列表是否多选
let isMulti=Vue.ref(false);
//变更人员列表是否是两组
let isTwoGroup=Vue.ref(false);
//配置列表总数
let count = Vue.ref(0);
//列表高度
let height = Vue.ref(window.innerHeight);
//列表分页
let limit = Vue.ref(400);
//加载
let loading = Vue.ref(true);
//选中数据
let pitch = Vue.ref([]);
//展示类型
let showTypeList=Vue.ref([]);
//采集类型
let ddicCollType = Vue.ref([]);
let search = Vue.ref({
resType: '',
keyword: '',
page: 1,
limit: 20,
});
let resTypeOptions=Vue.ref([])
const columns = [
{
prop: 'resTypeName',
label: '资源类型名称',
sortable: true,
align: 'center',
},
{
prop: 'resTypeCode',
label: '编码',
sortable: true,
align: 'center',
},
{
prop: 'resTypeDesc',
label: '类别',
sortable: true,
align: 'center',
},
{
prop: 'collType',
label: '采集类型',
sortable: true,
align: 'center',
render: function (row) {
let collType='';
ddicCollType.value.map(item=>{
if(row.collType==item.value){
collType=item.name
}
})
return collType;
}
},
{
prop: 'forbidden',
label: '是否启用',
sortable: true,
align: 'center',
render: function (row) {
let str='';
if(row.forbidden==0){
str='启用';
}else{
str='禁用';
}
return str;
}
},
{
prop: 'showType',
label: '展示类型',
sortable: true,
align: 'center',
/* render: function (row) {
}*/
},
{
prop: 'createTime',
label: '创建时间',
align: 'center'
},
];
//列表数据
let resourceData = Vue.ref([]);
//获取列表数据
const getListData = () => {
// resourceData.value=[];
loading.value = true;
//定义列表参数
let getParams = {
resType:search.value.resType,
keywords:search.value.keyword,
userName: userName.value,
page: search.value.page,
limit: search.value.limit
};
proxy.$http.post("/api-web/personnelChange/getList/resourceTypePer", getParams, function (res) {
if (res && res.data) {
resourceData.value = handleTree(res.data, 'resTypeCode', 'parentId')
count.value = res.count;
loading.value = false;
}else{
resourceData.value=[];
}
})
}
//组装树结构
let handleTree=(data, id, parentId, children)=> {
let config = {
id: id || 'id',
parentId: parentId || 'parentId',
childrenList: children || 'children'
};
var childrenListMap = {};
var nodeIds = {};
var tree = [];
for (let d of data) {
let parentId = d[config.parentId];
if (childrenListMap[parentId] == null) {
childrenListMap[parentId] = [];
}
nodeIds[d[config.id]] = d;
childrenListMap[parentId].push(d);
}
for (let d of data) {
let parentId = d[config.parentId];
if (nodeIds[parentId] == null) {
tree.push(d);
}
}
for (let t of tree) {
adaptToChildrenList(t);
}
function adaptToChildrenList(o) {
if (childrenListMap[o[config.id]] !== null) {
o[config.childrenList] = childrenListMap[o[config.id]];
}
if (o[config.childrenList]) {
for (let c of o[config.childrenList]) {
adaptToChildrenList(c);
}
}
}
return tree;
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
search.value.page=page;
search.value.limit=limit;
selectionChange([])
getListData();
}
let resTypeId=Vue.ref('');//选中的ids
//表格全选事件
let selectionChange = (val) => {
pitch.value = val;
let arr=[];
pitch.value.map(item=>{
arr.push(item.resTypeId)
})
resTypeId.value=arr.join(",");//选中的值
}
//获取资源类型数据
let getResourceTypoe=()=>{
proxy.$http.get(`/api-web/manage/restype/list`, {}, function (res) {
if (res && res.data) {
resTypeOptions.value=res.data
}
})
}
//获取展示类型的字典数据
let initShowType=()=>{
proxy.$http.post("/api-web/manage/ddic/findSucDdics/DETAILS_POWER", {}, function (res) {
if (res && res.data) {
let arr=res.data;
if(arr && arr.length>0){
arr.map(v=>{
showTypeList.value.push({
name: v.ddicName
,value: v.ddicCode.substring(v.ddicCode.lastIndexOf("_")+1,v.ddicCode.length)
});
})
}
}
})
}
//获取采集类型的字典数据
let initCollType=()=>{
proxy.$http.post("/api-web/manage/ddic/findSucDdics/collType", {}, function (res) {
if (res && res.data) {
let arr=res.data;
if(arr && arr.length>0){
arr.map(v=>{
ddicCollType.value.push({
name: v.ddicName
,value: v.ddicCode
});
})
}
}
})
}
//批量取消负责的相关资源
let changeCancel = () => {
if(pitch.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
}else{
proxy.$global.confirm("确定取消负责的相关资源？", function () {
let parmas={
userName:userName.value,
resTypeId:resTypeId.value
}
proxy.$http.post(`/api-web/personnelChange/remove/resourceTypePer`, parmas, function (res) {
if (res && res.success) {
proxy.$global.showMsg('取消成功！');
getListData()
}
})
});
}
}
//变更负责人
let changeAdmin = () => {
if(pitch.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
}else{
show.value=true;
}
}
//变更人员的弹框关闭后
let hideDialog =(flag)=>{
show.value=flag;
}
//变更人员的弹框保存后
let savebtn =(obj)=>{
show.value=false;
//obj.selectModel 选中的用户组（一个/主负责人) obj.selectModelSecond 辅负责人，都是数组
let targetUserName='';
if(obj.selectModel){
targetUserName=obj.selectModel.join(',')
}
let params={
resTypeId:resTypeId.value,
targetUserName:targetUserName,
userName:userName.value,
}
proxy.$http.post(`/api-web/personnelChange/update/resourceTypePer`, params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('变更成功！');
getListData()
}
})
}
// 挂载完
Vue.onMounted(() => {
initShowType();
initCollType();
getResourceTypoe();
getListData();
})
return {
isMulti,
isTwoGroup,
show,
initShowType,
initCollType,
showTypeList,
ddicCollType,
search,
resTypeOptions,
changeCancel,
count,
hideDialog,
savebtn,
changeAdmin,
getResourceTypoe,
resourceData,
columns,
height,
loading,
selectionChange,
getListData,
loadTableDataList,
}
}
}
\ No newline at end of file
... ...
<!--<el-row>
<el-col :span="24" class="search">
<div class="condition" >
<el-form ref=“form” style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-input v-model="search.keyword" placeholder="请输入角色名称"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getListData" type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>-->
<el-row style="margin-bottom: 10px;">
<div class="flex-div-start">
<el-button type="primary" @click="changeCancel()" size="small">取消</el-button>
<!-- <el-button type="primary" @click="changeAdmin()" size="small" style="margin-left: 6px">变更</el-button>-->
</div>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="columns"
:dataList="resourceData"
:total="count"
:layout="'total, prev,pager,next,sizes, jumper'"
:pageSize="search.limit"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
</template>
</cm-table-page>
</el-col>
</el-row>
<ChangeUsersList :show="show" :isTwoGroup="isTwoGroup" :isMulti="isMulti" @hideDialog="hideDialog" @savebtn="savebtn"></ChangeUsersList>
... ...
export default {
name: 'rolePer',
template: '',
components: {
'ChangeUsersList': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/changeUsersList/index')
),
},
data() {
},
props: {
},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//接收从用户列表中选中的用户
let userName=Vue.ref(proxy.$route.query.username);
//变更人员弹框
let show=Vue.ref(false);
//变更人员列表是否多选
let isMulti=Vue.ref(false);
//变更人员列表是否是两组
let isTwoGroup=Vue.ref(false);
//配置列表总数
let count = Vue.ref(0);
//列表高度
let height = Vue.ref(window.innerHeight);
//列表分页
let limit = Vue.ref(400);
//加载
let loading = Vue.ref(true);
//选中数据
let pitch = Vue.ref([]);
let search = Vue.ref({
resType: '',
keyword: '',
page: 1,
limit: 20,
});
const columns = [
{
prop: 'name',
label: '角色名称',
sortable: true,
align: 'center',
}
];
//列表数据
let resourceData = Vue.ref([]);
//获取列表数据
const getListData = () => {
resourceData.value=[];
loading.value = true;
//定义列表参数
let getParams = {
resType:search.value.resType,
keywords:search.value.keyword,
userName:userName.value,
page: search.value.page,
limit: search.value.limit
};
proxy.$http.post("/api-web/personnelChange/getList/rolePer", getParams, function (res) {
if (res && res.data) {
resourceData.value = res.data ? res.data : [];
count.value = res.count;
loading.value = false;
}
})
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
search.value.page=page;
search.value.limit=limit;
getListData();
}
let roleIds=Vue.ref('');//选中的ids
//表格全选事件
let selectionChange = (val) => {
pitch.value = val;
let arr=[];
pitch.value.map(item=>{
arr.push(item.id)
})
roleIds.value=arr.join(",");//选中的值
}
//批量取消相关资源
let changeCancel = () => {
if(pitch.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
}else{
proxy.$global.confirm("确定取消相关资源？", function () {
let parmas={
userName:userName.value,
roleId:roleIds.value
}
proxy.$http.post(`/api-web/personnelChange/remove/rolePer`, parmas, function (res) {
if (res && res.success) {
proxy.$global.showMsg('取消成功！');
getListData()
}
})
});
}
}
//变更负责人
let changeAdmin = () => {
if(pitch.value.length<1){
proxy.$global.showMsg('请至少选择一项','warning');
}else{
show.value=true;
}
}
//变更人员的弹框关闭后
let hideDialog =(flag)=>{
show.value=flag;
}
//变更人员的弹框保存后
let savebtn =(obj)=>{
show.value=false;
//obj.selectModel 选中的用户组（一个/主负责人) obj.selectModelSecond 辅负责人，都是数组
let targetUserName='';
if(obj.selectModel){
targetUserName=obj.selectModel.join(',')
}
let params={
roleId:roleIds.value,
targetUserName:targetUserName,
userName:userName.value,
}
proxy.$http.post(`/api-web/personnelChange/update/rolePer`, params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('变更成功！');
getListData()
}
})
}
// 挂载完
Vue.onMounted(() => {
getListData();
})
return {
isMulti,
isTwoGroup,
show,
search,
changeCancel,
count,
hideDialog,
savebtn,
changeAdmin,
resourceData,
columns,
height,
loading,
selectionChange,
getListData,
loadTableDataList,
userName
}
}
}
\ No newline at end of file
... ...
<el-row>
<el-col :span="24" class="search">
<div class="condition" style="display: flex;">
<el-form-item style="margin-right: 6px;margin-bottom: 10px;width: 300px">
<el-input v-model="data.searchParams.keywords" placeholder="关键字支持：名称、负责人、业务描述"></el-input>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button @click="getList">查询</el-button>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button type="primary" @click="removeRel">取消</el-button>
</el-form-item>
<el-form-item style="margin-right: 6px;margin-bottom: 10px;">
<el-button type="primary" @click="changeUser">变更</el-button>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row class="margin-bottom-50" style="margin-top: 3px">
<el-col :span="24" class="table-height">
<cm-table-page :columns="data.columns"
:dataList="data.tableData"
:treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
:total="data.count"
:pageSize="pageSize"
@loaddata="loadTableDataList"
@selectionChange="selectionChange"
:showIndex="true"
:showSelection="true"
:showBorder="true"
:loading="loading"
:showPage="true"
:showTools="false"
:height="(height - 200)">
<template #default="{row,prop,column}">
</template>
</cm-table-page>
</el-col>
</el-row>
<ChangeUsersList :show="data.userDialogFlag" @hideDialog="showUserDialog" @savebtn="saveRel"></ChangeUsersList>
... ...
export default {
name: 'resourceTypePer',
template: '',
components: {
'ChangeUsersList': Vue.defineAsyncComponent(
() => myImport('views/batchChangeLeaders/changeUsersList/index')
),
},
data() {
},
props: {},
setup: function (props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
//列表高度
let height = Vue.ref(window.innerHeight);
let data = Vue.ref({
searchParams: {
"page": 1,
"limit": 50,
"keywords": "",
"userName": proxy.$route.query.username,
"busId": ""
},
userDialogFlag : false,
count: 0,
columns: [{
prop: "busTypeName",
label: "名称",
width: "250",
sortable: true,
align: 'center'
}, {
prop: "nickname",
label: "负责人",
width: "120",
sortable: true,
align: 'center'
}, {
prop: "busTypeDesc",
label: "业务描述",
width: "200",
sortable: true,
align: 'center'
}, {
prop: "isUse",
label: "是否使用",
sortable: true,
align: 'center',
render: (row) => {
switch (row.isUse) {
case 0:
return '否';
case 1:
return '是';
default:
return '';
}
}
}, {
prop: "important",
label: "重要程度",
sortable: true,
align: 'center',
render: (row) => {
switch (row.important) {
case 1:
return '核心';
case 2:
return '重要';
case 3:
return '一般';
case 9:
return '虚拟业务';
default:
return '';
}
}
}, {
prop: "sort",
label: "排序",
sortable: true,
align: 'center'
}],
tableData: [],
// 表格选中
checkArr:[]
})
const getList = () => {
proxy.$http.post(`/api-web/personnelChange/getList/topoPer`, data.value.searchParams, function (res) {
if (res && res.data) {
let dataVal = data.value;
let list = res.data;
let count = res.count;
let tableData = list.filter(function (v) {
if (v.parentId == '0') {
// 获取子节点
let childs = list.filter(function (v1) {
if (v1.parentId != '0' && v1.parentId == v.busId) {
// 获取子节点
return v1;
}
}).sort(function (a, b) {
return a.sort - b.sort
})
v.children = childs;
return v;
}
}).sort(function (a, b) {
return a.sort - b.sort
})
dataVal.tableData = tableData;
dataVal.count = count;
}
})
}
// 展示用户选择
let showUserDialog = (flg) =>{
data.value.userDialogFlag = flg;
}
let saveRel = (obj) =>{
// 获取选中
let arr = data.value.checkArr;
if(arr.length == 0){
proxy.$global.showMsg('请至少选择一项','warning');
return;
}
let params = {
targetUserName: obj.selectModel.join(''),
"userName": proxy.$route.query.username,
"busId": arr.join(',')
}
if(params.targetUserName == params.userName){
proxy.$global.showMsg('变更用户不能与变更前用户一致，请修改！','warning');
return;
}
proxy.$http.post(`/api-web/personnelChange/update/topoPer`,params, function (res) {
if (res && res.success) {
proxy.$global.showMsg('变更成功！');
showUserDialog(false);
// 刷新表格
getList();
}
})
}
// 变更
let changeUser = () =>{
// 获取选中
let arr = data.value.checkArr;
if(arr.length == 0){
proxy.$global.showMsg('请至少选择一项','warning');
return;
}
showUserDialog(true);
}
/**
* 取消
*/
let removeRel = () =>{
let arr = data.value.checkArr;
if(arr.length == 0){
proxy.$global.showMsg('请至少选择一项','warning');
return;
}
data.value.searchParams.busId = arr.join(',')
proxy.$global.confirm("确定取消相关资源？", function () {
proxy.$global.showMsg('取消成功！');
proxy.$http.post(`/api-web/personnelChange/remove/topoPer`, data.value.searchParams , function (res) {
if (res && res.success) {
proxy.$global.showMsg('取消成功！');
getList()
}
})
});
}
//重新加载表格数据
let loadTableDataList = ({page, limit}) => {
let dataVal = data.value;
dataVal.page = page;
dataVal.limit = limit;
getList();
}
// 表格全选事件
let selectionChange = (val) => {
let checkArr = [];
val.map(item => {
checkArr.push(item.busId)
})
data.value.checkArr = checkArr;
let isCheck = (list, checkArr) => {
list.forEach((v, i) => {
v.checked = checkArr.includes(v.busId);
if (v.children) {
isCheck(v.children, checkArr);
}
});
}
isCheck(data.value.tableData, checkArr);
}
// 挂载完
Vue.onMounted(() => {
getList();
})
return {
height,
data,
getList,
changeUser,
showUserDialog,
removeRel,
loadTableDataList,
selectionChange,
saveRel
}
}
}
... ...