<template>
|
<basic-container>
|
<avue-crud ref="crud" :data="data" :option="option" :page.sync="page" :search.sync="search" :table-loading="loading"
|
@on-load="getDataList" @row-save="handleSave" @row-del="handleDelete" @row-update="handleEdit"
|
@refresh-change="handleRefresh" @size-change="handleSizePage" @current-change="handleCurrentPage"
|
@selection-change="selectionChange" @row-click="handleRowClick">
|
<template slot="menuLeft">
|
<!-- <el-button icon="el-icon-search" size="small" type="primary" @click="handleStatus">查 询
|
</el-button> -->
|
<el-button icon="el-icon-delete" size="small" type="danger" @click="handleDeleteByIds">删 除
|
</el-button>
|
</template>
|
<template slot="search" slot-scope="{row,size}">
|
<el-select v-model="selectValue" size="small" @change="handleSelect">
|
<el-option v-for="item in selectOption" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
<el-input v-model="search[selectValue]" :placeholder="`请输入${selectValue === 'id' ? '系统编号' : '系统名称'}并按回车查询`"
|
:size="size" clearable style="width:300px;margin-left: 10px;"
|
@clear="handleClear" @keyup.enter.native="handleEnter"></el-input>
|
</template>
|
<template #menu="{row,index,size}">
|
<el-button icon="el-icon-menu" size="small" type="text" @click="classifyHandler(row)">分类授权</el-button>
|
|
</template>
|
</avue-crud>
|
<el-dialog :visible.sync="dialogVisible" append-to-body class="avue-dialog avue-dialog--top" title="分类授权"
|
top="-50px">
|
|
<el-row>
|
<el-col :span="10">
|
<avue-tree ref="tree"
|
v-model="TreeForm"
|
:data="TreeData"
|
:option="TreeOption"
|
@check-change="checkChange">
|
</avue-tree>
|
</el-col>
|
</el-row>
|
|
<div slot="footer" class="dialog-footer" style="height: 50px;line-height: 50px">
|
<el-button icon="el-icon-plus" size="small" type="primary" @click="empower">授 权</el-button>
|
<el-button icon="el-icon-close" size="small" type="danger">重 置</el-button>
|
</div>
|
</el-dialog>
|
</basic-container>
|
</template>
|
<script>
|
import {
|
getSysInfoList,
|
sysInfoAdd,
|
sysInfoEdit,
|
sysInfoDel,
|
sysInfoTree,
|
batchAddSave
|
} from '@/api/integration/sysInfo.js'
|
|
export default {
|
data() {
|
return {
|
checkAll: {},
|
ParentList: [],
|
ParentRemoveList: [],
|
//避免缓存
|
reload: Math.random(),
|
TreeLoading: false,
|
TreeOption: {
|
defaultExpandAll: false,
|
multiple: true,
|
addBtn: false,
|
filter: false
|
},
|
TreeData: [],
|
TreeForm: {},
|
loading: false,
|
dialogVisible: false,
|
page: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
selectOption: [{
|
value: 'id',
|
label: '系统编号'
|
}, {
|
value: 'name',
|
label: '系统名称'
|
}],
|
selectValue: 'id',
|
search: {},
|
delIds: [],
|
data: [],
|
option: {
|
height: "auto",
|
tip: false,
|
border: true,
|
align: 'center',
|
menuAlign: 'center',
|
index: true,
|
searchMenuSpan: 8,
|
searchBtn: false,
|
emptyBtn: false,
|
columnBtn: false,
|
defaultSort: {
|
prop: 'id,name',
|
order: 'descending'
|
},
|
selection: true,
|
column: [
|
{
|
label: '系统编号',
|
prop: 'id',
|
sortable: true,
|
rules: [{
|
required: true,
|
message: '系统编号不能为空',
|
trigger: 'blur'
|
}],
|
// maxlength: 30, //字数限制
|
}, {
|
label: '系统名称',
|
prop: 'name',
|
sortable: true,
|
rules: [{
|
required: true,
|
message: '系统名称不能为空',
|
trigger: 'blur'
|
}],
|
// maxlength: 30, //字数限制
|
},
|
{
|
label: '系统描述',
|
prop: 'description',
|
type: 'textarea'
|
}
|
]
|
},
|
}
|
},
|
created() {
|
},
|
methods: {
|
empower() {
|
batchAddSave(this.checkAll.oid, this.checkAll.id, this.ParentList).then(res => {
|
console.log(res)
|
if(res.data.data.code === 200){
|
this.$message.success(res.data.data.msg)
|
this.dialogVisible=false;
|
}
|
})
|
},
|
//分类授权多选回调
|
checkChange(row, checked) {
|
console.log('row',row)
|
if (checked) {
|
if (!row.parentId) {
|
const parentRecord = {
|
oid: row.oid,
|
classifyId: row.attributes.classifyId,
|
classifyOid: row.attributes.classifyOid,
|
classParentOid: row.parentId,
|
};
|
this.ParentList.push(parentRecord);
|
// 如果row的children不为空 继续循环children中的每个对象
|
if (row.children && row.children.length > 0) {
|
for (let child of row.children) {
|
const childRecord = {
|
oid: child.oid,
|
classifyId: child.attributes.classifyId,
|
classifyOid: child.attributes.classifyOid,
|
classParentOid: child.parentId,
|
};
|
this.ParentList.push(childRecord);
|
// 如果子对象的children不为空 继续循环获取数据
|
if (child.children && child.children.length > 0) {
|
for (let subChild of child.children) {
|
const subRecord = {
|
oid: subChild.oid,
|
classifyId: subChild.attributes.classifyId,
|
classifyOid: subChild.attributes.classifyOid,
|
classParentOid: subChild.parentId,
|
};
|
this.ParentList.push(subRecord);
|
}
|
}
|
}
|
}
|
}
|
} else {
|
// 取消勾选的节点是父节点
|
if (!row.parentId) {
|
// 找到父节点在ParentList中的索引
|
const parentIndex = this.ParentList.findIndex(item => item.oid === row.oid);
|
if (parentIndex !== -1) {
|
const parentOid = this.ParentList[parentIndex].classifyOid;
|
|
// 查找所有需要删除的子节点的索引
|
const childIndexes = this.ParentList.reduce((indexes, item, index) => {
|
if (item.classParentOid === parentOid && item.classifyOid !== parentOid) {
|
indexes.push(index);
|
}
|
return indexes;
|
}, []);
|
|
// 从后往前删除子节点的数据，保证索引的正确性
|
for (let i = childIndexes.length - 1; i >= 0; i--) {
|
this.ParentList.splice(childIndexes[i], 1);
|
}
|
|
// 删除父节点的数据
|
this.ParentList.splice(parentIndex, 1);
|
}
|
} else {
|
// 取消勾选的节点是子节点
|
const childIndex = this.ParentList.findIndex(item => item.oid === row.oid);
|
if (childIndex !== -1) {
|
// 删除子节点的数据
|
this.ParentList.splice(childIndex, 1);
|
}
|
}
|
}
|
console.log(this.ParentList);
|
},
|
//分类授权
|
classifyHandler(row) {
|
this.loading = true;
|
this.checkAll = row
|
sysInfoTree({systemOid: row.oid, systemId: row.id}).then(res => {
|
let List = [];
|
let value = 0;
|
let NumberList= [];
|
function traverse(obj, parent) {
|
//重新构建一次选中当前row的数据
|
const record = {
|
label: obj.text,
|
oid: obj.oid,
|
attributes:{
|
classifyId: obj.attributes.classifyId,
|
classifyOid: obj.attributes.classifyOid,
|
selected:obj.attributes.selected
|
},
|
classParentOid: obj.parentId,
|
value: value,
|
children: []
|
};
|
//当前已选择数据回填
|
if (record.attributes.selected == 'true') {
|
NumberList.push(record.value);
|
}
|
if (parent) {
|
const stingChild = parent.children.find(child => child.label === record.label);
|
if (stingChild) {
|
record.value = stingChild.value; // 使用已存在的子节点的value值
|
} else {
|
parent.children.push(record);
|
value++;
|
}
|
} else {
|
const stingRecord = List.find(item => item.label === record.label);
|
if (stingRecord) {
|
record.value = stingRecord.value; // 使用已存在的顶层节点的value值
|
} else {
|
List.push(record);
|
value++;
|
}
|
}
|
if (obj.children && obj.children.length > 0) {
|
for (let child of obj.children) {
|
traverse(child, record);
|
}
|
}
|
}
|
for (let item of res.data) {
|
traverse(item, null);
|
}
|
console.log('list', List);
|
this.TreeData = List;
|
// this.ModifyProperties(this.TreeData, 'text', 'label');
|
// 根据this.TreeData的长度计算延迟时间
|
const delayTime = this.TreeData.length * 1;
|
setTimeout(() => {
|
this.loading = false;
|
this.reload = Math.random();
|
this.dialogVisible = true;
|
|
this.$nextTick(() => {
|
if (this.$refs.tree) {
|
this.$refs.tree.setCheckedKeys(NumberList);
|
}
|
});
|
}, delayTime);
|
});
|
},
|
//定义一个修改数据属性名的方法
|
ModifyProperties(obj, oldName, newName) {
|
for (let key in obj) {
|
if (key === oldName) {
|
obj[newName] = obj[key];
|
delete obj[key];
|
}
|
if (typeof obj[key] === 'object') {
|
this.ModifyProperties(obj[key], oldName, newName);
|
}
|
}
|
},
|
async getDataList() {
|
this.loading = true;
|
console.log(this.search);
|
const {pageSize, currentPage} = this.page;
|
const conditions = {};
|
if (Object.keys(this.search).length > 0) {
|
for (const key in this.search) {
|
if (this.search[key]) {
|
conditions[`conditionMap[${key}_like]`] = this.search[key];
|
}
|
}
|
}
|
const response = await getSysInfoList(pageSize, currentPage, conditions);
|
if (response.status === 200) {
|
console.log(response);
|
this.loading = false;
|
const data = response.data.data;
|
this.data = data.records;
|
this.page.total = data.total;
|
} else {
|
this.loading = false;
|
}
|
},
|
// 新增
|
async handleSave(row, done, loading) {
|
try {
|
const response = await sysInfoAdd(row)
|
if (response.status === 200) {
|
this.$message({
|
type: 'success',
|
message: '新增数据成功！'
|
})
|
done(row)
|
// this.$refs.crud.refreshTable()
|
// this.getDataList()
|
}
|
} catch {
|
loading()
|
}
|
},
|
// 编辑
|
async handleEdit(row, index, done, loading) {
|
try {
|
const {oid, id, name, description} = row
|
const response = await sysInfoEdit({oid, id, name, description})
|
if (response.status === 200) {
|
loading()
|
this.$message({
|
type: 'success',
|
message: '修改数据成功！'
|
})
|
done(row)
|
}
|
} catch {
|
loading()
|
}
|
},
|
// 删除单条
|
handleDelete(row) {
|
const {oid} = row
|
this.deleteSysInfo({oids: oid})
|
},
|
// 多条数据删除
|
handleDeleteByIds() {
|
const {oids} = this.delIds
|
if (this.$utilFunc.isEmpty(oids)) {
|
this.$message({
|
type: "error",
|
message: "请至少选择一条数据!"
|
})
|
} else {
|
this.deleteSysInfo(this.delIds)
|
}
|
},
|
// 删除接口
|
deleteSysInfo(param) {
|
this.$confirm('是否确定删除选择的集成系统?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
const response = await sysInfoDel(param)
|
if (response.status === 200) {
|
console.log(response)
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
this.getDataList()
|
}
|
})
|
},
|
// 选择框内容选择后
|
handleSelect(event) {
|
this.selectValue = event
|
if (this.selectValue === 'id') {
|
this.search['name'] = ''
|
delete this.search['name']
|
} else {
|
this.search['id'] = ''
|
delete this.search['id']
|
}
|
},
|
// enter搜索
|
handleEnter() {
|
this.getDataList()
|
},
|
// 输入框清空
|
handleClear() {
|
this.search = {}
|
this.getDataList()
|
},
|
// 刷新按钮
|
handleRefresh() {
|
this.getDataList()
|
},
|
handleSizePage(event) {
|
this.page.pageSize = event
|
},
|
handleCurrentPage(event) {
|
this.page.currentPage = event
|
},
|
// 点击选择
|
handleRowClick(row) {
|
this.$refs.crud.toggleRowSelection(row, true)
|
},
|
// 多选
|
selectionChange(list) {
|
let newData = list.map(item => {
|
const {oid} = item
|
return oid
|
})
|
this.delIds = {oids: newData.toString()}
|
// console.log(this.delIds)
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
::v-deep(.avue-crud .el-select) {
|
width: 100px !important;
|
}
|
</style>
|
