<template>
|
<el-dialog v-dialogDrag
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
:title="dialog.title"
|
:visible.sync="dialog.showDialog"
|
class="avue-dialog"
|
width="1400px"
|
@close="cancelDialog">
|
<el-container style="height: 580px;">
|
<el-aside>
|
<basic-container style="height: 560px;">
|
<!-- 左侧树 -->
|
<div style="height: 520px;">
|
<avue-tree
|
ref="tree"
|
v-model="treeForm"
|
:data="treeData"
|
:option="treeOption"
|
@node-click="nodeClick">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span>
|
<i class="el-icon-s-promotion"></i>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container style="height: 560px;">
|
<div>
|
<avue-crud
|
ref="crud"
|
:data="data"
|
:option="option"
|
:page.sync="page"
|
:table-loading="tableLoading"
|
@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="plImage" slot-scope="{row}">
|
<span class="avue-icon">
|
<icon-show :name="row.plImage"></icon-show>
|
</span>
|
</template>
|
</avue-crud>
|
</div>
|
</basic-container>
|
</el-main>
|
</el-container>
|
<div slot="footer" class="dialog-footer avue-dialog__footer">
|
<el-button size="small" type="primary" @click="submitDialog">确 定</el-button>
|
<el-button size="small" @click="cancelDialog">取 消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { getActionTree, getActionTableData} from '@/api/UI/Action/api'
|
import func from "@/util/func";
|
import basicOption from "@/util/basic-option";
|
|
export default {
|
name: "index",
|
props:['isMuti'],
|
data() {
|
return {
|
dialog: {
|
showDialog: false,
|
title: "选择Action",
|
loading: false,
|
type: "add",
|
},
|
currenRow: {}, // action当前行信息
|
tableLoading: false,
|
lastIndex: null,
|
selectList: [],
|
data: [],
|
option: {
|
...basicOption,
|
addBtn: false,
|
height: 420,
|
highlightCurrentRow: true,
|
menu:false,
|
column: [
|
{
|
label: '编号',
|
prop: 'plCode',
|
overHidden: true,
|
search: true
|
},
|
{
|
label: '名称',
|
prop: 'plName',
|
overHidden: true,
|
search: true
|
},
|
{
|
label: '图标',
|
prop: 'plImage',
|
search: true,
|
searchLabelWidth:120,
|
overHidden: true,
|
},
|
{
|
label: 'B/S链接地址',
|
prop: 'plBSUrl',
|
search: true,
|
searchLabelWidth:120,
|
overHidden: true,
|
},
|
{
|
label: '类型',
|
prop: 'plTypeType',
|
search: true,
|
type: 'select',
|
width:100,
|
dicData: [{
|
label: '业务类型',
|
value: 'business'
|
}, {
|
label: '链接类型',
|
value: 'link'
|
}]
|
},
|
{
|
label: '描述',
|
prop: 'plDesc',
|
search: true,
|
overHidden: true,
|
},
|
]
|
},
|
treeNodeRow: {},
|
treeForm: {},
|
treeOption: {
|
addBtn: false,
|
defaultExpandedKeys: ['root'],
|
props: {
|
label: 'name',
|
value: 'id',
|
children: 'childs'
|
}
|
},
|
treeData: [],
|
}
|
},
|
created() {
|
},
|
methods: {
|
openDialog() {
|
this.dialog.showDialog = true;
|
this.getTreeList()
|
this.data = [];
|
},
|
cancelDialog() {
|
this.dialog.loading = false;
|
this.dialog.showDialog = false;
|
this.$refs.tree.setCurrentKey(null);
|
this.$emit('cancelAction',null);
|
},
|
submitDialog() {
|
if (this.selectList.length==0) {
|
this.$message.error('请选择Action');
|
return;
|
}
|
if(this.isMuti){
|
this.$emit('updataAction', this.selectList);
|
}else {
|
if(this.selectList.length>1){
|
this.$message.error('请选择一条Action');
|
return;
|
}
|
this.$emit('updataAction', this.selectList[0]);
|
}
|
|
this.dialog.loading = false;
|
this.dialog.showDialog = false;
|
this.$refs.tree.setCurrentKey(null);
|
},
|
// 左侧树请求
|
getTreeList(status) {
|
const params = {
|
isExp: status ? true : false
|
}
|
getActionTree(params).then(res => {
|
const data = res.data.obj;
|
this.treeData = [data];
|
})
|
},
|
|
// 左侧树行点击
|
nodeClick(row) {
|
this.treeNodeRow = row;
|
this.getRightTableList(row);
|
},
|
|
// 头部刷新按钮
|
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;
|
|
this.$nextTick(function (){
|
this.$refs.crud.doLayout()
|
})
|
})
|
},
|
|
// 表格多选
|
selectChangeHandler(row) {
|
this.selectList = row;
|
},
|
|
// 行点击
|
rowClickHandler(row) {
|
this.currenRow = row;
|
func.rowClickHandler(
|
row,
|
this.$refs.crud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectList = [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);
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
}
|
</style>
|
