<template>
|
<basic-container>
|
<avue-crud ref="crud" :data="data" :option="option" :page.sync="page" :permission="permissionList"
|
: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 v-if="permissionList.delBtn" 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 v-if="permissionList.empower" #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" @click="resetting">重 置</el-button>
|
</div>
|
</el-dialog>
|
</basic-container>
|
</template>
|
<script>
|
import {
|
getSysInfoList,
|
sysInfoAdd,
|
sysInfoEdit,
|
sysInfoDel,
|
sysInfoTree,
|
batchAddSave
|
} from '@/api/integration/sysInfo.js'
|
import {mapGetters} from "vuex";
|
|
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: [],
|
|
}
|
},
|
created() {
|
},
|
computed: {
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission.systemInfo.systemInfo_add, false),
|
editBtn: this.vaildData(this.permission.systemInfo.systemInfo_edit, false),
|
delBtn: this.vaildData(this.permission.systemInfo.systemInfo_delete, false),
|
empower: this.vaildData(this.permission.systemInfo.systemInfo_empower, false),
|
}
|
},
|
option() {
|
return {
|
height: "auto",
|
calcHeight: 20,
|
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'
|
}
|
]
|
}
|
}
|
},
|
methods: {
|
//重置
|
resetting() {
|
this.$refs.tree.setCheckedKeys([])
|
// console.log(this.ParentList)
|
},
|
empower() {
|
batchAddSave(this.checkAll.oid, this.checkAll.id, this.ParentList).then(res => {
|
// console.log(res.data)
|
if (res.data.code === 200) {
|
this.$message.success(res.data.msg)
|
this.dialogVisible = false;
|
}
|
})
|
},
|
//分类授权多选回调
|
checkChange(row, checked) {
|
if (checked) {
|
this.addAllChildren(row.children);
|
this.addToParentList(row);
|
// 勾选行时将所有节点添加到ParentList中
|
} else {
|
this.removeAllChildren(row.children);
|
this.removeFromParentList(row);
|
// 取消勾选将所有节点添加从ParentList中移除
|
}
|
// console.table(this.ParentList);
|
},
|
//子节点添加
|
addAllChildren(children) {
|
for (let child of children) {
|
this.addToParentList(child);
|
// 将子节点添加到 ParentList 中
|
if (child.children && child.children.length > 0) {
|
this.addAllChildren(child.children);
|
}
|
}
|
},
|
//子节点移除
|
removeAllChildren(children) {
|
for (let child of children) {
|
this.removeFromParentList(child);
|
// 将子节点从 ParentList 中移除
|
if (child.children && child.children.length > 0) {
|
this.removeAllChildren(child.children);
|
}
|
}
|
},
|
//当前父节点添加
|
addToParentList(item) {
|
const classifyOid = item.attributes.classifyOid;
|
if (!this.isClassifyOidExists(classifyOid)) {
|
const record = {
|
oid: item.oid,
|
classifyId: item.attributes.classifyId,
|
classifyOid: classifyOid,
|
};
|
this.ParentList.push(record);
|
}
|
},
|
//当前父节点移除
|
removeFromParentList(item) {
|
const classifyOid = item.attributes.classifyOid;
|
if (this.isClassifyOidExists(classifyOid)) {
|
const index = this.findIndexByClassifyOid(classifyOid);
|
if (index !== -1) {
|
this.ParentList.splice(index, 1);
|
}
|
}
|
},
|
//判重-ParentList
|
isClassifyOidExists(classifyOid) {
|
return this.ParentList.some(item => item.classifyOid === classifyOid);
|
},
|
//查找index位置
|
findIndexByClassifyOid(classifyOid) {
|
return this.ParentList.findIndex(item => item.classifyOid === classifyOid);
|
},
|
//分类授权
|
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;
|
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)
|
await this.getDataList();
|
// 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)
|
}
|
await this.getDataList();
|
} 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: '删除成功!'
|
});
|
await 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>
|
