<template>
|
<el-container>
|
<el-aside>
|
<basic-container>
|
<div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
|
<!-- 左侧树 -->
|
<div style="height: calc(100vh - 190px);">
|
<avue-tree v-loading="loading" :data="treeData" :option="treeOption" @node-click="nodeClick">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span>
|
<icon-show :name="data.icon"></icon-show>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container>
|
<avue-crud
|
ref="crud"
|
:data="data"
|
:option="option"
|
:page.sync="page"
|
:table-loading="tableLoading"
|
@size-change="sizeChange"
|
@current-change="currentChange"
|
@selection-change="selectChangeHandler"
|
@search-change="handleSearch"
|
@search-reset="handleReset"
|
@row-click="rowClickHandler">
|
<template slot="menuLeft">
|
<el-button v-if="permissionList.addBtn" class="button-custom-icon" size="small" type="primary"
|
@click="addHandler">
|
<icon-show :name="permissionList.addBtn.source"></icon-show>
|
创建
|
</el-button>
|
<el-button v-if="permissionList.importBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="upLoadClickHandler">
|
<icon-show :name="permissionList.importBtn.source"></icon-show>
|
导入
|
</el-button>
|
<el-button v-if="permissionList.exportBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="exportClickHandler">
|
<icon-show :name="permissionList.exportBtn.source"></icon-show>
|
导出
|
</el-button>
|
<el-button v-if="permissionList.RIGHTBtn" class="button-custom-icon" plain size="small" type="primary"
|
@click="uiAuthorHandler">
|
<icon-show :name="permissionList.RIGHTBtn.source"></icon-show>
|
授权
|
</el-button>
|
</template>
|
<template slot="menu" slot-scope="scope">
|
<el-button v-if="permissionList.editBtn" size="small" type="text"
|
@click="rowEditBtnClick(scope.row)">
|
<icon-show :name="permissionList.editBtn.source"></icon-show>
|
编辑
|
</el-button>
|
<el-button v-if="permissionList.delBtn" size="small" type="text"
|
@click="rowDeleteHandler(scope.row)">
|
<icon-show :name="permissionList.delBtn.source"></icon-show>
|
删除
|
</el-button>
|
<el-button v-if="permissionList.cloneBtn" size="small" type="text"
|
@click="rowCloneHandler(scope.row)">
|
<icon-show :name="permissionList.cloneBtn.source"></icon-show>
|
克隆
|
</el-button>
|
</template>
|
<template slot="plName" slot-scope="{row}">
|
<el-link type="primary" @click="linkClickHandler(row)">{{ row.plName }}</el-link>
|
</template>
|
</avue-crud>
|
<!-- 创建编辑自定义对话框 -->
|
<el-dialog
|
v-dialogDrag
|
v-loading="dialogLoading"
|
:close-on-click-modal="false"
|
:title="dialogType === 'add' ? ' 创建 上下文' : '编辑 上下文'"
|
:visible.sync="dialogVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
width="500px"
|
@close="dialogClose"
|
>
|
<el-form ref="form" :model="form" :rules="rules" label-width="95px" size="small">
|
<el-form-item label="名称：" prop="plName">
|
<el-input v-model="form.plName"></el-input>
|
</el-form-item>
|
<el-form-item label="UI上下文：" prop="plCode">
|
<el-input v-model="form.plCode"></el-input>
|
</el-form-item>
|
<el-form-item label="显示：" prop="plIsShow">
|
<el-checkbox-group v-model="form.plIsShow">
|
<el-checkbox label="导航区"></el-checkbox>
|
<el-checkbox label="控制区"></el-checkbox>
|
<el-checkbox label="操作区"></el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item label="描述：" prop="plDesc">
|
<el-input v-model="form.plDesc" :rows="5" type="textarea"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogClose">取 消</el-button>
|
<el-button type="primary" @click="saveHandler">确 定</el-button>
|
</span>
|
</el-dialog>
|
<!-- 克隆 -->
|
<el-dialog
|
key="cloneDialog"
|
v-dialogDrag
|
:visible.sync="cloneDialogVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="克隆"
|
width="500px"
|
@close="cloneDialogClose"
|
>
|
<avue-form ref="cloneForm" v-model="cloneForm" :option="cloneOption"></avue-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="cloneDialogClose">取 消</el-button>
|
<el-button type="primary" @click="cloneSaveHandler">确 定</el-button>
|
</span>
|
</el-dialog>
|
<!-- 导出 -->
|
<el-dialog
|
key="cloneDialog"
|
v-dialogDrag
|
:visible.sync="expDialogVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="导出"
|
width="500px"
|
@close="expDialogVisible=false"
|
>
|
<div style="height: 70%;min-height: 300px">
|
<avue-tree ref="expTree" :data="expTreeData" :option="expOption"></avue-tree>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="expDialogVisible=false">取 消</el-button>
|
<el-button type="primary" @click="exportData">确 定</el-button>
|
</span>
|
</el-dialog>
|
</basic-container>
|
<!-- 导入 -->
|
<upload-file ref="upload" :fileData="fileData" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList"
|
title="导入"
|
@updata="getTableList" @upfaildata="upFail"></upload-file>
|
<!--页签窗口-->
|
<el-dialog v-dialogDrag
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
:fullscreen="true"
|
:title="dialog.title"
|
:visible.sync="dialog.showDialog"
|
class="avue-dialog"
|
@close="dialog.showDialog=false">
|
<pl-show :uiDefineData="dialog.uiDefineData"></pl-show>
|
</el-dialog>
|
<!--ui授权-->
|
<ui-author ref="uiAuthor"></ui-author>
|
</el-main>
|
|
</el-container>
|
</template>
|
|
<script>
|
import {
|
getBizTree,
|
gridUIContextData,
|
saveUIContextData,
|
updateUIContextData,
|
delUIContextData,
|
cloneUIContextData,
|
getExpContextTree,
|
expUIContextData
|
} from "@/api/UI/uiDefine";
|
import basicOption from "@/util/basic-option";
|
import func from "@/util/func";
|
import plShow from "@/views/modelingMenu/ui/uiDefine/rightRegion/plShow";
|
import uiAuthor from "@/views/authority/ui/uiAuthorization/UIDialog"
|
import {mapGetters} from "vuex";
|
|
export default {
|
name: "index",
|
components: {plShow, uiAuthor},
|
data() {
|
return {
|
loading: false,
|
dialog: {
|
showDialog: false,
|
title: "上下文详情",
|
loading: false,
|
uiDefineData: null
|
},
|
tipList: [],
|
upFileType: ['xls'],
|
fileUrl: 'api/uiManagerController/impUIContextData',
|
fileData: {},
|
lastIndex: null,
|
treeOption: {
|
height: 'auto',
|
defaultExpandAll: true,
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'text',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
nodeRow: {},
|
treeData: [],
|
searchParams: {
|
'conditionMap[txtName]': '',
|
'conditionMap[txtCode]': '',
|
},
|
tableLoading: false,
|
page: {
|
currentPage: 1,
|
pageSize: 50,
|
total: 0,
|
pageSizes: [10, 30, 50, 100],
|
},
|
selectList: [],
|
option: {
|
...basicOption,
|
calcHeight: -50,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
searchMenuSpan: 6,
|
align: 'left',
|
column: [{
|
label: '名称',
|
prop: 'plName',
|
search: true,
|
overHidden:true
|
}, {
|
label: 'UI上下文',
|
prop: 'plCode',
|
search: true,
|
sortable: true,
|
overHidden:true
|
}, {
|
label: '导航区',
|
prop: 'plIsShowNavigator',
|
width: 130,
|
align: 'center',
|
formatter: function (row, value) {
|
if (row.plIsShowNavigator == 0) {
|
return '不显示'
|
} else {
|
return '显示'
|
}
|
}
|
}, {
|
label: '控制区',
|
prop: 'plIsShowForm',
|
width: 130,
|
align: 'center',
|
formatter: function (row, value) {
|
if (row.plIsShowForm == 0) {
|
return '不显示'
|
} else {
|
return '显示'
|
}
|
}
|
}, {
|
label: '操作区',
|
prop: 'plIsShowTab',
|
width: 130,
|
align: 'center',
|
formatter: function (row, value) {
|
if (row.plIsShowTab == 0) {
|
return '不显示'
|
} else {
|
return '显示'
|
}
|
}
|
}]
|
},
|
data: [],
|
dialogLoading: false,
|
dialogVisible: false,
|
dialogType: '',
|
form: {
|
plName: '',
|
plCode: '',
|
plIsShow: [],
|
},
|
rules: {
|
plName: [{
|
required: true,
|
message: '请输入名称',
|
trigger: 'blur'
|
}],
|
plCode: [{
|
required: true,
|
message: '请输入UI上下文',
|
trigger: 'blur'
|
}],
|
plIsShow: [{
|
required: true,
|
message: '请选择显示区域',
|
trigger: 'blur'
|
}]
|
},
|
cloneDialogVisible: false,
|
cloneOption: {
|
submitBtn: false,
|
emptyBtn: false,
|
column: [{
|
label: '克隆目标',
|
prop: 'cloneTargetName',
|
span: 24,
|
type: 'tree',
|
clearable: true,
|
dicData: [],
|
defaultExpandAll: true,
|
rules: [
|
{
|
required: true,
|
message: '请选择克隆目标',
|
trigger: 'blur'
|
}
|
]
|
}, {
|
label: 'UI名称',
|
prop: 'cloneName',
|
span: 24,
|
type: 'input',
|
rules: [
|
{
|
required: true,
|
message: '请输入UI名称',
|
trigger: 'blur'
|
}
|
]
|
}, {
|
label: 'UI上下文',
|
prop: 'cloneContextCode',
|
span: 24,
|
type: 'input',
|
rules: [
|
{
|
required: true,
|
message: '请输入UI上下文',
|
trigger: 'blur'
|
}
|
]
|
}]
|
},
|
cloneForm: {
|
//克隆的源对象的信息
|
sourcePLUILayout: null,
|
cloneTargetName: 'n',
|
cloneName: '',
|
cloneContextCode: ''
|
},
|
expDialogVisible: false,
|
expTreeData: [],
|
expOption: {
|
height: 'auto',
|
filter: false,
|
multiple: true,
|
defaultExpandAll: true,
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'text',
|
value: 'oid',
|
children: 'children'
|
}
|
}
|
}
|
},
|
computed: {
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
|
delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
|
editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
|
exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false),
|
importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false),
|
cloneBtn: this.vaildData(this.permission[this.$route.query.id].CLONE, false),
|
RIGHTBtn: this.vaildData(this.permission[this.$route.query.id].RIGHT, false),
|
};
|
},
|
},
|
created() {
|
this.getTreeList();
|
},
|
methods: {
|
//树表查询
|
getTreeList() {
|
this.loading = true;
|
getBizTree().then(res => {
|
this.treeData = [res.data.obj];
|
const dicData = res.data.obj.children.map(item => {
|
item.label = item.attributes.name;
|
item.value = item.attributes.name;
|
return item;
|
});
|
this.cloneOption.column[0].dicData = [{
|
label: '业务类型树',
|
value: '业务类型树',
|
disabled: true,
|
children: dicData
|
}];
|
this.loading = false;
|
}).catch(error => {
|
this.loading = false;
|
})
|
},
|
// 树点击
|
nodeClick(row) {
|
if (row.oid) {
|
this.nodeRow = row;
|
this.tableLoading = true;
|
this.getTableList();
|
}
|
},
|
getTableList() {
|
const params = Object.assign(this.searchParams, {
|
'conditionMap[btmName]': this.nodeRow.attributes.name,
|
})
|
gridUIContextData(this.page.currentPage, this.page.pageSize, params).then(res => {
|
this.data = res.data.data;
|
this.page.total = res.data.total;
|
this.$refs.crud.clearSelection();
|
this.tableLoading = false;
|
})
|
},
|
linkClickHandler(row) {
|
this.dialog.title = '【' + row.plName + ' - ' + row.plCode + '】详情'
|
this.dialog.uiDefineData = row;
|
this.dialog.showDialog = true;
|
return false;
|
this.$router.push({
|
path: '/UIDefineShow/:' + row.plOId,
|
name: row.plName + '详情'
|
});
|
},
|
sizeChange(val) {
|
this.page.pageSize = val;
|
},
|
// 页码
|
currentChange(val) {
|
this.page.currentPage = val;
|
},
|
// 多选
|
selectChangeHandler(row) {
|
this.selectList = row;
|
},
|
// 搜索
|
handleSearch(params, done) {
|
this.searchParams = {
|
'conditionMap[txtName]': params.plName,
|
'conditionMap[txtCode]': params.plCode,
|
};
|
this.getTableList()
|
done();
|
},
|
|
// 重置搜索条件
|
handleReset() {
|
this.searchParams = {};
|
this.getTableList();
|
},
|
// 行点击
|
rowClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.crud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectList = [row];
|
}
|
);
|
},
|
|
//创建
|
addHandler() {
|
if (this.nodeRow && this.nodeRow.oid) {
|
this.form.plIsShow = [];
|
this.form.plRelatedType = this.nodeRow.attributes.name;
|
this.dialogType = 'add';
|
this.dialogVisible = true;
|
} else {
|
this.$message.error('请选择业务类型');
|
}
|
|
},
|
editHandler() {
|
if (this.selectList.length != 0) {
|
this.rowEditBtnClick(this.selectList[0]);
|
} else {
|
this.$message.error('请选择一条数据进行编辑');
|
}
|
},
|
delHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.error('请至少选择一条数据');
|
return;
|
}
|
const params = {
|
oids: this.selectList.map(item => item.plOId).join(',')
|
}
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
delUIContextData(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('删除成功');
|
this.getTableList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 关闭对话框
|
dialogClose() {
|
this.dialogVisible = false;
|
this.$refs.form.clearValidate();
|
this.form = {
|
plName: '',
|
plCode: '',
|
plDesc: '',
|
plIsShow: [],
|
}
|
},
|
// 保存UI上下文
|
saveHandler() {
|
this.$refs.form.validate((valid, done) => {
|
if (valid) {
|
let params = {
|
...this.form
|
}
|
if (this.form.plIsShow.includes('导航区')) {
|
params.plIsShowNavigator = 1
|
} else {
|
params.plIsShowNavigator = 0
|
}
|
if (this.form.plIsShow.includes('控制区')) {
|
params.plIsShowForm = 1;
|
} else {
|
params.plIsShowForm = 0;
|
}
|
if (this.form.plIsShow.includes('操作区')) {
|
params.plIsShowTab = 1;
|
} else {
|
params.plIsShowTab = 0;
|
}
|
delete params.plIsShow;
|
if (this.dialogType === 'add') {
|
saveUIContextData(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('添加成功');
|
this.dialogClose();
|
this.getTableList();
|
}
|
})
|
} else if (this.dialogType === 'edit') {
|
updateUIContextData(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('修改成功');
|
this.dialogClose()
|
this.getTableList();
|
}
|
})
|
}
|
} else {
|
return false;
|
}
|
});
|
},
|
// 导出
|
exportClickHandler() {
|
if (this.selectList.length <= 0) {
|
this.$message.error('请选择数据');
|
return;
|
}
|
const params = {
|
expDatas: this.selectList.map(item => item.plOId).join(',')
|
}
|
getExpContextTree(params).then(res => {
|
this.expTreeData = [res.data.obj];
|
})
|
this.expDialogVisible = true;
|
},
|
exportData() {
|
const params = {}
|
const checkedDatas = this.$refs.expTree.getCheckedNodes();
|
if (checkedDatas.length <= 0) {
|
this.$message.error('请选择数据');
|
return;
|
}
|
this.selectList.forEach(item => {
|
params[item.plOId] = checkedDatas.filter(checkitem => checkitem.parentId == item.plOId).map(checkitem => checkitem.oid).join(',')
|
})
|
expUIContextData(params).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
this.expDialogVisible = false;
|
});
|
},
|
|
// 导入
|
upLoadClickHandler() {
|
this.fileData = {
|
isCovered: false,
|
selectBtm: this.nodeRow.attributes.name
|
}
|
this.$refs.upload.visible = true;
|
},
|
//导入失败
|
upFail(response) {
|
|
},
|
//ui授权
|
uiAuthorHandler() {
|
if (this.selectList.length != 1) {
|
this.$message.error('请选择一条数据');
|
return;
|
}
|
this.$refs.uiAuthor.openDialog(this.nodeRow.attributes.name, this.selectList[0].plCode);
|
},
|
// 编辑按钮
|
rowEditBtnClick(row) {
|
this.form = {
|
...row,
|
plIsShow: [],
|
};
|
if (row.plIsShowNavigator) {
|
this.form.plIsShow.push('导航区')
|
}
|
if (row.plIsShowForm) {
|
this.form.plIsShow.push('控制区')
|
}
|
if (row.plIsShowTab) {
|
this.form.plIsShow.push('操作区')
|
}
|
this.dialogType = 'edit';
|
this.dialogVisible = true;
|
},
|
// 删除按钮
|
rowDeleteHandler(row) {
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
delUIContextData({oids: row.plOId}).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('删除成功');
|
this.getTableList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
//克隆
|
rowCloneHandler(row) {
|
this.cloneForm = {
|
sourcePLUILayout: row,
|
cloneTargetName: '',
|
cloneName: row.plName + '_copy(0)',
|
cloneContextCode: row.plCode + '_copy(0)',
|
}
|
this.cloneDialogVisible = true;
|
},
|
cloneSaveHandler() {
|
this.$refs.cloneForm.validate((valid, done) => {
|
if (valid) {
|
cloneUIContextData(this.cloneForm).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('克隆成功');
|
this.cloneDialogClose();
|
this.getTableList();
|
}
|
})
|
} else {
|
return false;
|
}
|
});
|
},
|
cloneDialogClose() {
|
this.cloneDialogVisible = false;
|
this.cloneForm = {
|
//克隆的源对象的信息
|
sourcePLUILayout: null,
|
cloneTargetName: '',
|
cloneName: '',
|
cloneContextCode: ''
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
}
|
</style>
|
