<template>
|
<el-container>
|
<el-aside>
|
<basic-container>
|
<div style="max-height: calc(100vh - 170px);overflow: auto">
|
<avue-tree :key="refresh" ref="tree" :data="treeData" :option="treeOption" @node-click="nodeClick">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span style="font-size: 15px">
|
<i class="el-icon-s-promotion"></i>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</basic-container>
|
</el-aside>
|
<el-main>
|
<basic-container>
|
|
<avue-crud
|
ref="crud"
|
:data="configData"
|
:option="nodeRow.id === 'firstNode'? firstOption : configOption"
|
:table-loading="configLoading"
|
@selection-change="selectChange"
|
@row-click="rowClickHandler">
|
<template slot="menuLeft">
|
<el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">增加
|
</el-button>
|
<el-button icon="el-icon-close" plain size="small" type="danger" @click="delClickHandler">删除
|
</el-button>
|
<el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
|
</el-button>
|
</template>
|
|
<template #menu="{row,index,size}">
|
<el-button icon="el-icon-edit" size="small" type="text" @click.stop="rowEditHandler(row,index)">编辑
|
</el-button>
|
<el-button icon="el-icon-delete" size="small" type="text" @click.stop="rowDeleteHandler(row)">删除</el-button>
|
</template>
|
</avue-crud>
|
</basic-container>
|
</el-main>
|
<el-dialog
|
v-dialogDrag
|
:title="nodeRow.id === 'firstNode' ? '配置项分类' : '配置项'"
|
:visible.sync="addVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
width="50%"
|
@close="addVisibleClose">
|
<el-form ref="form" :model="form" label-width="80px">
|
<el-form-item label="名称：">
|
<el-input v-model="form.name"></el-input>
|
</el-form-item>
|
<el-form-item v-if="nodeRow.id !== 'firstNode'" label="key：">
|
<el-input v-model="form.key"></el-input>
|
</el-form-item>
|
<el-form-item v-if="nodeRow.id !== 'firstNode'" label="value：">
|
<el-input v-model="form.value"></el-input>
|
</el-form-item>
|
<el-form-item label="描述：">
|
<el-input v-model="form.desc" type="textarea"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="small" @click="addVisibleClose">取 消</el-button>
|
<el-button size="small" type="primary" @click="addSaveClickHandler">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
<!-- 导出穿梭框 -->
|
<transfer ref="transfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
|
:select-list="selectList" :top-methods-obj="topMethodsObj" :transferTitle="transferTitle" title="导出"
|
@transferSend="exportSendHandler">
|
</transfer>
|
</el-container>
|
</template>
|
|
<script>
|
import {
|
getAppConfigCategoryInfo,
|
getAppConfigDetailsByID,
|
addAppConf,
|
updateAppConf,
|
exportSysConf
|
} from "@/api/systemModel/systemConfig/api"
|
import basicOption from "@/util/basic-option";
|
import func from "@/util/func";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
topMethodsObj: {
|
select: true,
|
all: true,
|
page: false
|
},
|
transferTitle: ['未选择', '已选择'],
|
leftRoleData: [],
|
rightRoleData: [],
|
editStatus: false,
|
form: {
|
name: "",
|
desc: ""
|
},
|
addVisible: false,
|
nodeRow: {},
|
configLoading: false,
|
configData: [],
|
configOption: {
|
...basicOption,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
column: [
|
{
|
label: '名称',
|
prop: 'name',
|
sortable: true
|
},
|
{
|
label: 'key',
|
prop: 'key',
|
sortable: true
|
},
|
{
|
label: 'value',
|
prop: 'value',
|
overHidden: true,
|
sortable: true
|
},
|
{
|
label: '描述',
|
overHidden: true,
|
prop: 'desc',
|
}
|
]
|
},
|
defaultData: [], // 顶层节点新增后赋值数组
|
firstOption: {
|
...basicOption,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
column: [
|
{
|
label: '名称',
|
prop: 'name',
|
sortable: true
|
},
|
{
|
label: '描述',
|
prop: 'desc',
|
}
|
]
|
},
|
refresh: Math.random(),
|
treeOption: {
|
height: 'auto',
|
menu: false,
|
addBtn: false,
|
defaultExpandAll: true,
|
props: {
|
label: 'name',
|
value: 'id',
|
children: 'children',
|
},
|
},
|
treeData: [
|
{
|
name: '系统配置分类',
|
id: 'firstNode',
|
children: []
|
}
|
],
|
selectList: [],
|
lastIndex: null
|
}
|
},
|
created() {
|
this.getTreeList();
|
},
|
methods: {
|
// 左侧树查询
|
getTreeList(val) {
|
getAppConfigCategoryInfo().then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.treeData[0].children = data;
|
if (val === 'save') {
|
this.configData = data;
|
}
|
}
|
})
|
},
|
|
// 树节点点击
|
nodeClick(row) {
|
console.log(row);
|
this.nodeRow = row;
|
if (row.id === 'firstNode') {
|
this.configData = row.children;
|
} else {
|
this.configLoading = true;
|
getAppConfigDetailsByID({clsId: row.id}).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.configData = data;
|
this.configLoading = false;
|
}
|
})
|
}
|
},
|
|
// 增加按钮
|
addClickHandler() {
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请选择一条节点进行添加！')
|
return;
|
}
|
this.addVisible = true;
|
this.editStatus = false;
|
},
|
|
// 新增对话框关闭
|
addVisibleClose() {
|
Object.keys(this.form).forEach(key => {
|
this.form[key] = "";
|
})
|
this.addVisible = false;
|
},
|
|
// 保存
|
addSaveClickHandler() {
|
if (this.nodeRow.id === 'firstNode') {
|
if (!this.form.name) {
|
this.$message.error('名称不能为空！');
|
return;
|
}
|
} else {
|
if (!this.form.name) {
|
this.$message.error('名称不能为空！');
|
return;
|
}
|
if (!this.form.key) {
|
this.$message.error('key值不能为空！');
|
return;
|
}
|
if (!this.form.value) {
|
this.$message.error('value值不能为空！');
|
return;
|
}
|
}
|
|
const params = this.nodeRow.id === 'firstNode' ? {
|
appConfigDetailInfo: {
|
name: this.form.name,
|
desc: this.form.desc,
|
id: this.editStatus ? this.form.id : null
|
},
|
isConfCategorys: true //true表示给顶层添加配置项分类
|
} : {
|
appConfigDetailInfo: {
|
categoryId: this.nodeRow.id,
|
name: this.form.name,
|
desc: this.form.desc,
|
key: this.form.key,
|
value: this.form.value,
|
id: this.editStatus ? this.form.id : null
|
},
|
isConfCategorys: false //true表示给顶层添加配置项分类
|
}
|
const saveApi = this.editStatus ? updateAppConf : addAppConf;
|
saveApi(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.addVisibleClose();
|
if (this.nodeRow.id === 'firstNode') {
|
this.getTreeList('save');
|
} else {
|
this.configLoading = true;
|
getAppConfigDetailsByID({clsId: this.nodeRow.id}).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.configData = data;
|
this.configLoading = false;
|
}
|
})
|
}
|
}
|
})
|
},
|
|
// 编辑按钮
|
rowEditHandler(row) {
|
this.addVisible = true;
|
this.form = {...row};
|
this.editStatus = true;
|
},
|
|
// 行删除
|
rowDeleteHandler(row) {
|
const params = {
|
ids: row.id,
|
isConfCategorys: this.nodeRow.id === 'firstNode' ? true : false
|
}
|
getAppConfigCategoryInfo(params).then(res => {
|
console.log(res)
|
if (res.data.code === 200) {
|
this.$message.success('删除成功');
|
if (this.nodeRow.id === 'firstNode') {
|
this.getTreeList('save');
|
} else {
|
this.configLoading = true;
|
getAppConfigDetailsByID({clsId: this.nodeRow.id}).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.configData = data;
|
this.configLoading = false;
|
}
|
})
|
}
|
}
|
})
|
},
|
|
// 选择框
|
selectChange(row) {
|
this.selectList = row;
|
},
|
|
// 点击行
|
rowClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.crud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectList = [];
|
}
|
);
|
},
|
|
// 多选删除
|
delClickHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.error('请至少选择一条数据');
|
return;
|
}
|
const params = {
|
ids: this.selectList.map(item => {
|
return item.id
|
}).join(','),
|
isConfCategorys: this.nodeRow.id === 'firstNode' ? true : false
|
}
|
getAppConfigCategoryInfo(params).then(res => {
|
console.log(res)
|
if (res.data.code === 200) {
|
this.$message.success('删除成功');
|
if (this.nodeRow.id === 'firstNode') {
|
this.getTreeList('save');
|
} else {
|
this.configLoading = true;
|
getAppConfigDetailsByID({clsId: this.nodeRow.id}).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.configData = data;
|
this.configLoading = false;
|
}
|
})
|
}
|
}
|
})
|
},
|
|
// 导出按钮
|
exportClickHandler() {
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请至少选择一条数据');
|
return;
|
}
|
this.leftRoleData = this.nodeRow.id === 'firstNode' ? [
|
{
|
name: '名称',
|
oid: 'name'
|
},
|
{
|
name: '描述',
|
oid: 'desc'
|
}
|
] : [
|
{
|
name: '名称',
|
oid: 'name'
|
},
|
{
|
name: 'key',
|
oid: 'key'
|
},
|
{
|
name: 'value',
|
oid: 'value'
|
},
|
{
|
name: '描述',
|
oid: 'desc'
|
}
|
]
|
this.$refs.transfer.visible = true;
|
},
|
|
// 导出保存
|
exportSendHandler(row, index) {
|
console.log(row, index);
|
const params = {
|
expType: index === 0 ? 'select' : index === 1 ? 'all' : '',
|
expAttrNames: row,
|
selectDataIdentify: index === 0 ? this.selectList.map(item => {
|
return item.id
|
}) : null,
|
conditionMap: {
|
"isExpAppConfDetail": this.nodeRow.id === 'firstNode' ? false : true,
|
"clsId": this.nodeRow.id !== 'firstNode' ? this.nodeRow.id : null
|
}
|
}
|
exportSysConf(params).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
}).catch(err => {
|
this.$message.error(err);
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
