<template>
|
<el-container>
|
|
<el-aside>
|
<basic-container>
|
<div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
|
<div class="headerCon">
|
<el-button icon="el-icon-plus" plain size="small" type="primary" @click="addTreeClickHandler">创建
|
</el-button>
|
<el-button icon="el-icon-edit" plain size="small" type="primary" @click="editTreeClickHandler">修改
|
</el-button>
|
<el-button icon="el-icon-delete" plain size="small" type="danger" @click="delTreeClickHandler">删除
|
</el-button>
|
<el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
|
</el-button>
|
<el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入
|
</el-button>
|
</div>
|
<!-- 左侧树 -->
|
<div style="height: calc(100vh - 280px);">
|
<avue-tree
|
ref="tree"
|
v-model="treeForm"
|
:data="treeData"
|
:option="treeOption"
|
@save="rowTreeSaveHandler"
|
@update="rowTreeUpdataHandler"
|
@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>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container>
|
<div>
|
<avue-crud
|
ref="crud"
|
v-model="form"
|
:data="data"
|
:option="option"
|
:table-loading="tableLoading"
|
:before-open="beforeOpen"
|
@row-del="rowDelHandler"
|
@row-save="rowSaveHandler"
|
@row-update="rowUpdateHandler"
|
@search-change="handleSearch"
|
@search-reset="handleReset"
|
@refresh-change="handleRefresh"
|
@selection-change="selectChangeHandler"
|
@row-click="rowClickHandler">
|
<template slot="plTypeType" slot-scope="{row}">
|
<el-tag :type="row.plTypeType === 'business' ? '' : 'success'">
|
{{ row.plTypeType === 'business' ? '业务类型' : '链接类型' }}
|
</el-tag>
|
</template>
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button v-if="treeNodeRow.id !== 'root'" icon="el-icon-plus" plain size="small" type="primary"
|
@click="addClickHandler">增加
|
</el-button>
|
<el-button icon="el-icon-download" plain size="small" type="success" @click="downLoadHandler">导出
|
</el-button>
|
</template>
|
</avue-crud>
|
</div>
|
|
<div style="margin-top: 10px">
|
<avue-crud
|
ref="BottomCrud"
|
v-model="bottomForm"
|
:data="bottomData"
|
:option="bottomOption"
|
:table-loading="bottomTableLoading"
|
@row-save="BottomRowSaveHandler"
|
@row-update="BottomRowUpdateHandler"
|
@row-del="BottomRowDelHandler"
|
>
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button icon="el-icon-plus" plain size="small" type="primary" @click="bottomAddClickHandler">增加
|
</el-button>
|
</template>
|
<template slot="menuForm" slot-scope="scope">
|
<el-button type="primary"
|
size="small"
|
icon="el-icon-check"
|
v-if="scope.type === 'add'"
|
@click="handleSaveNext()">保存后继续添加</el-button>
|
</template>
|
</avue-crud>
|
</div>
|
</basic-container>
|
</el-main>
|
|
<transfer ref="transfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
|
:select-list="selectList" :top-methods-obj="topMethodsObj" :transferTitle="transferTitle" title="导出"
|
@transferSend="exportSendHandler">
|
</transfer>
|
|
<transfer ref="actionTransfer" :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 {
|
getActionTree,
|
getActionTableData,
|
saveAction,
|
updateAction,
|
exportAction,
|
deleteAction,
|
getPLActionParam,
|
savePLActionParam,
|
updatePLActionParam,
|
deletePLActionParam,
|
saveActionCls,
|
updateActionCls,
|
deleteActionCls
|
} from '@/api/UI/Action/api'
|
import func from "@/util/func";
|
import basicOption from "@/util/basic-option";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
currenRow: {}, // action当前行信息
|
topMethodsObj: {
|
select: true,
|
all: true,
|
page: false
|
},
|
transferTitle: ['未选择', '已选择'],
|
leftRoleData: [],
|
rightRoleData: [],
|
form: {},
|
bottomTableLoading: false,
|
bottomForm:{},
|
bottomData: [],
|
bottomOption: {
|
...basicOption,
|
addBtn: false,
|
calcHeight: -30,
|
selection: false,
|
refreshBtn: false,
|
dialogWidth:'700',
|
// height:'auto',
|
column: [
|
{
|
label: '参数名称',
|
prop: 'name',
|
rules: [
|
{
|
required: true,
|
message: '请输入参数名称',
|
trigger: 'blur'
|
}
|
]
|
},
|
{
|
label: '默认值',
|
prop: 'defaultValue',
|
},
|
{
|
label: '提示信息',
|
prop: 'description',
|
span: 24,
|
type: 'textarea',
|
rows: 4
|
},
|
],
|
},
|
tableLoading: false,
|
lastIndex: null,
|
selectList: [],
|
data: [],
|
option: {
|
...basicOption,
|
addBtn: false,
|
height: 350,
|
highlightCurrentRow: true,
|
menuWidth:160,
|
span:24,
|
labelWidth:100,
|
dialogWidth:'700',
|
column: [
|
{
|
label: '编号',
|
prop: 'plCode',
|
overHidden: true,
|
search: true,
|
rules: [
|
{
|
required: true,
|
message: '请输入编号',
|
trigger: 'blur'
|
}
|
]
|
},
|
{
|
label: '名称',
|
prop: 'plName',
|
overHidden: true,
|
search: true,
|
rules: [
|
{
|
required: true,
|
message: '请输入名称',
|
trigger: 'blur'
|
}
|
]
|
},
|
{
|
label: '分类',
|
prop: 'plActionCls',
|
type: 'tree',
|
hide: true,
|
props: {
|
label: 'name',
|
value: 'id',
|
children: 'childs'
|
},
|
rules: [
|
{
|
required: true,
|
message: '请选择分类',
|
trigger: 'blur'
|
}
|
],
|
dicData: []
|
},
|
{
|
label: 'C/S类路径',
|
prop: 'plCSClass',
|
search: true,
|
searchLabelWidth:120,
|
overHidden: true,
|
},
|
{
|
label: 'B/S链接地址',
|
prop: 'plBSUrl',
|
search: true,
|
searchLabelWidth:120,
|
overHidden: true,
|
},
|
{
|
label: '类型',
|
prop: 'plTypeType',
|
search: true,
|
type: 'radio',
|
width:100,
|
dicData: [{
|
label: '业务类型',
|
value: 'business'
|
}, {
|
label: '链接类型',
|
value: 'link'
|
}],
|
rules: [
|
{
|
required: true,
|
message: '请选择类型',
|
trigger: 'blur'
|
}
|
]
|
},
|
{
|
label: '描述',
|
prop: 'plDesc',
|
search: true,
|
overHidden: true,
|
type: 'textarea'
|
},
|
]
|
},
|
treeNodeRow: {},
|
treeForm: {},
|
treeOption: {
|
addBtn: false,
|
defaultExpandedKeys: ['root'],
|
props: {
|
label: 'name',
|
value: 'id',
|
children: 'childs'
|
},
|
dialogWidth:'800',
|
dialogMenuPosition: 'right',
|
formOption: {
|
dialogMenuPosition: 'right',
|
column: [
|
{
|
label: '分类名称',
|
prop: 'name',
|
rules: [
|
{
|
required: true,
|
message: '请输入分类名称',
|
trigger: 'blur'
|
}
|
]
|
},
|
{
|
label: '分类序号',
|
prop: 'serialno',
|
rules: [
|
{
|
required: true,
|
message: '请输入分类序号',
|
trigger: 'blur'
|
}
|
]
|
},
|
{
|
label: '创建者',
|
prop: 'creator',
|
disabled: true,
|
},
|
{
|
label: '创建时间',
|
prop: 'createTime',
|
disabled: true,
|
},
|
{
|
label: '父主类',
|
prop: 'pidName',
|
disabled: true,
|
span:24
|
},
|
{
|
label: '备注',
|
prop: 'description',
|
type:'textarea',
|
span:24
|
},
|
],
|
}
|
},
|
treeData: [],
|
}
|
},
|
created() {
|
this.getTreeList();
|
},
|
methods: {
|
// 左侧树请求
|
getTreeList(status) {
|
const params = {
|
isExp: status ? true : false
|
}
|
getActionTree(params).then(res => {
|
const data = res.data.obj;
|
this.treeData = [data];
|
const selectTreeData = this.option.column.find(item => item.prop === 'plActionCls'); // 找到action添加分类树
|
const dicData=[data];
|
dicData[0].disabled=true;//根节点不能选
|
selectTreeData.dicData = dicData;
|
})
|
},
|
|
// 左侧树行点击
|
nodeClick(row) {
|
this.treeNodeRow = row;
|
this.getRightTableList(row);
|
this.bottomData = [];
|
},
|
|
// 头部刷新按钮
|
handleRefresh() {
|
if (func.isEmptyObject(this.treeNodeRow)) {
|
return;
|
}
|
this.getRightTableList(this.treeNodeRow);
|
},
|
|
// 右侧表格信息
|
getRightTableList(row) {
|
this.tableLoading = true;
|
const params = {
|
plactioncls: row.id
|
}
|
getActionTableData(params).then(res => {
|
const data = res.data.data;
|
this.data = data;
|
this.tableLoading = false;
|
})
|
},
|
|
// 表格多选
|
selectChangeHandler(row) {
|
this.selectList = row;
|
},
|
|
// 行点击
|
rowClickHandler(row) {
|
this.currenRow = row;
|
func.rowClickHandler(
|
row,
|
this.$refs.crud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectList = [];
|
}
|
);
|
|
// 请求action下方参数列表数据
|
this.getBottomList(row);
|
},
|
|
// 搜索
|
handleSearch(params, done) {
|
if (func.isEmptyObject(this.treeNodeRow)) {
|
this.$message.error('请先在左侧选择节点后操作');
|
return done();
|
}
|
this.tableLoading = true;
|
const apiParams = {
|
plactioncls: this.treeNodeRow.id === 'root' ? '' : this.treeNodeRow.id,
|
...params
|
}
|
|
getActionTableData(apiParams).then(res => {
|
const data = res.data.data;
|
this.data = data;
|
this.tableLoading = false;
|
})
|
done();
|
},
|
|
// 重置搜索条件
|
handleReset() {
|
if (func.isEmptyObject(this.treeNodeRow)) {
|
this.$message.error('请先在左侧选择节点后操作');
|
return;
|
}
|
this.getRightTableList(this.treeNodeRow);
|
},
|
|
beforeOpen(done, type, loading) {
|
if ([ 'edit'].includes(type)) {
|
// 编辑逻辑
|
this.$set(this.option.column[2],'disabled',false);
|
} else {
|
// 新增逻辑
|
this.$set(this.option.column[2],'disabled',true);
|
}
|
done();
|
console.log(this.option.column)
|
},
|
// action列表增加
|
addClickHandler() {
|
if (func.isEmptyObject(this.treeNodeRow)) {
|
this.$message.error('请先在左侧选择节点后操作');
|
return;
|
}
|
this.$refs.crud.rowAdd();
|
this.form.plActionCls = this.treeNodeRow.id;
|
},
|
|
// action列表增加保存
|
rowSaveHandler(form, done, loading) {
|
saveAction(form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('添加成功');
|
this.getRightTableList(this.treeNodeRow);
|
}
|
done();
|
})
|
loading();
|
},
|
|
// action列表修改保存
|
rowUpdateHandler(row, index, done, loading) {
|
updateAction(row).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('修改成功');
|
this.getRightTableList(this.treeNodeRow);
|
}
|
done();
|
})
|
loading();
|
},
|
|
// 导出按钮
|
downLoadHandler() {
|
if (func.isEmptyObject(this.treeNodeRow)) {
|
this.$message.error('请先在左侧选择节点后操作');
|
return;
|
}
|
|
this.leftRoleData = [{
|
name: '编号',
|
oid: '编号'
|
}, {
|
name: '类路径',
|
oid: '类路径'
|
}, {
|
name: '链接地址',
|
oid: '链接地址'
|
}, {
|
name: '类型',
|
oid: '类型'
|
}, {
|
name: '描述',
|
oid: '描述'
|
},]
|
this.$refs.transfer.visible = true;
|
},
|
|
// 穿梭框保存 index为0是选择 1是全部
|
exportSendHandler(row, index) {
|
const params = {
|
dataType: index,
|
chooseDataOid: index === 0 ? this.selectList.map(item => item.plOId) : [],
|
columnName: row,
|
fileName: 'Action列表数据'
|
}
|
|
exportAction(params).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
}).catch(err => {
|
this.$message.error(err);
|
})
|
},
|
|
// action列表行删除
|
rowDelHandler(row, index) {
|
this.$confirm('您确定要删除当前数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteAction(row).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('删除成功');
|
this.getRightTableList(this.treeNodeRow);
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 参数列表查询
|
getBottomList() {
|
this.bottomTableLoading = true;
|
getPLActionParam({actionOid: this.currenRow.plOId}).then(res => {
|
const data = res.data.data;
|
this.bottomData = data;
|
this.bottomTableLoading = false;
|
})
|
},
|
|
// 参数列表增加按钮
|
bottomAddClickHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.error('清先选择action再进行参数创建');
|
return;
|
}
|
this.$refs.BottomCrud.rowAdd();
|
},
|
|
// 参数列表新增保存
|
BottomRowSaveHandler(form, done, loading) {
|
form.actionOid=this.currenRow.plOId;
|
savePLActionParam(form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('添加成功');
|
this.getBottomList();
|
}
|
done();
|
})
|
loading();
|
},
|
handleSaveNext(){
|
this.$refs.BottomCrud.$refs.dialogForm.$refs.tableForm.$refs.form.validate((valid) => {
|
if (valid) {
|
this.bottomForm.actionOid=this.currenRow.plOId;
|
savePLActionParam(this.bottomForm).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('添加成功');
|
this.bottomForm={};
|
this.getBottomList();
|
this.$refs.BottomCrud.$refs.dialogForm.$refs.tableForm.$refs.form.resetFields()
|
}
|
})
|
} else {
|
return false;
|
}
|
});
|
|
},
|
// 参数列表修改保存
|
BottomRowUpdateHandler(row, index, done, loading) {
|
updatePLActionParam(row).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('修改成功');
|
this.getBottomList();
|
}
|
done();
|
})
|
loading();
|
},
|
|
// 参数列表删除
|
BottomRowDelHandler(row, index) {
|
this.$confirm('您确定要删除当前数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deletePLActionParam({oid: row.oid}).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('删除成功');
|
this.getBottomList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 左侧树创建
|
addTreeClickHandler() {
|
if (func.isEmptyObject(this.treeNodeRow)) {
|
this.$message.error('请选择一条分类进行添加');
|
return;
|
}
|
if (!this.treeNodeRow.id && this.treeNodeRow.name=='未分类') {
|
this.$message.error('未分类下不能创建子分类');
|
return;
|
}
|
const {createTime, creator, name, id, description} = this.treeNodeRow;
|
this.$set(this.treeForm, 'createTime', func.formattedDate(createTime));
|
this.$set(this.treeForm, 'creator', creator);
|
this.$set(this.treeForm, 'pid', id);
|
this.$set(this.treeForm, 'pidName', name);
|
this.$refs.tree.rowAdd();
|
|
},
|
|
// action分类保存
|
rowTreeSaveHandler(node, data, done, loading) {
|
saveActionCls(data).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('分类创建成功');
|
this.getTreeList();
|
}
|
done();
|
})
|
loading();
|
},
|
|
// action分类修改按钮
|
editTreeClickHandler() {
|
if (func.isEmptyObject(this.treeNodeRow)) {
|
this.$message.error('请选择一条数据进行修改');
|
return;
|
}
|
|
if (this.treeNodeRow.id === 'root') {
|
this.$message.error('根节点不能修改');
|
return;
|
}
|
if (!this.treeNodeRow.id && this.treeNodeRow.name=='未分类') {
|
this.$message.error('未分类不能修改');
|
return;
|
}
|
const {name, serialno, creator, createTime, pid, description, id} = this.treeNodeRow;
|
const pidName = this.findObjectNameById(this.treeData, pid);
|
this.$set(this.treeForm, 'name', name);
|
this.$set(this.treeForm, 'id', id);
|
this.$set(this.treeForm, 'serialno', serialno);
|
this.$set(this.treeForm, 'creator', creator);
|
this.$set(this.treeForm, 'createTime', func.formattedDate(createTime));
|
this.$set(this.treeForm, 'pid', pid);
|
this.$set(this.treeForm, 'pidName', pidName);
|
this.$set(this.treeForm, 'description', description);
|
|
this.$refs.tree.rowEdit();
|
},
|
|
// action分类修改保存
|
rowTreeUpdataHandler(node, data, done, loading) {
|
updateActionCls(data).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('修改成功');
|
//this.getBottomList();
|
}
|
done();
|
})
|
loading();
|
},
|
|
// 递归通过pid查找父主类名称
|
findObjectNameById(data, id) {
|
for (let item of data) {
|
if (item.id === id) {
|
return item.name;
|
}
|
if (item.childs && item.childs.length > 0) {
|
const result = this.findObjectNameById(item.childs, id);
|
if (result) {
|
return result;
|
}
|
}
|
}
|
return 'null';
|
},
|
|
// action分类删除
|
delTreeClickHandler() {
|
if (func.isEmptyObject(this.treeNodeRow)) {
|
this.$message.error('请选择一条数据进行删除');
|
return;
|
}
|
|
if (this.treeNodeRow.id === 'root') {
|
this.$message.error('根节点不能删除');
|
return;
|
}
|
|
this.$confirm('您确定要删除当前数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteActionCls(this.treeNodeRow).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('分类删除成功');
|
this.getTreeList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// action分类导出
|
exportClickHandler() {
|
|
},
|
|
// action分类导入
|
uploadClickHandler() {
|
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
.avue-dialog .el-dialog__body .avue-form{
|
margin: 0 auto;
|
}
|
}
|
</style>
|
