<template>
|
<el-container v-loading="createdLoading">
|
<el-aside>
|
<basic-container>
|
<div style="max-height: calc(100vh - 150px);overflow: auto">
|
<avue-tree :key="refresh" ref="tree" :data="treeData" :option="treeOption" node-key="id"
|
@node-click="nodeClick">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span style="display: flex">
|
<icon-show v-if="data.iconType=='svg'" :name="data.icon"></icon-show>
|
<i v-else :class="data.icon"></i>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container>
|
<div v-if="(form.childType || form.childType === 0) && !addStatus && !editStatus && form.category !== 1"
|
class="btnBox">
|
<el-button :disabled="(mangeShowBtn || form.childType === 0) ? false : !childTypeBtn" icon="el-icon-plus"
|
plain
|
size="small"
|
type="primary" @click="addClickHandler">增加
|
</el-button>
|
<el-button :disabled="mangeShowBtn" icon="el-icon-edit" plain size="small" type="primary"
|
@click="editClickHandler">修改
|
</el-button>
|
<el-button :disabled="mangeShowBtn" icon="el-icon-close" plain size="small" type="danger"
|
@click="delClickHandler">删除
|
</el-button>
|
<el-button :disabled="mangeShowBtn ? true : childTypeBtn" icon="el-icon-circle-plus-outline" plain
|
size="small"
|
type="primary" @click="addMethodsClickHandler">增加操作类型
|
</el-button>
|
<el-button v-if=" mangeShowBtn" icon="el-icon-circle-close" plain size="small"
|
type="danger"
|
@click="addClickHandler">删除非系统模块
|
</el-button>
|
<el-button v-if="mangeShowBtn " icon="el-icon-circle-close" plain size="small"
|
type="danger"
|
@click="addClickHandler">删除业务模块
|
</el-button>
|
<el-button :disabled="!mangeShowBtn" icon="el-icon-upload2" plain size="small" type="primary"
|
@click="upLoadClickHandler">导入
|
</el-button>
|
<el-button :disabled="!mangeShowBtn" 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="sqlClickExportClick">导出sql
|
</el-button>
|
</div>
|
<div v-else-if="(form.childType || form.childType === 0) && (addStatus || editStatus)" class="btnBox">
|
<el-button v-if="addStatus" icon="el-icon-check" plain size="small"
|
type="success" @click="addSaveClickHandler">保存
|
</el-button>
|
<el-button v-if="editStatus" icon="el-icon-check" plain size="small"
|
type="success" @click="editSaveClickHandler">保存
|
</el-button>
|
<el-button icon="el-icon-close" plain size="small"
|
type="danger" @click="addStatus=false;editStatus=false;">取消
|
</el-button>
|
</div>
|
<div v-if="form.category === 1" class="btnBox">
|
<el-button icon="el-icon-edit" plain size="small" type="primary" @click="updataAliasClickHandler">修改别名
|
</el-button>
|
<el-button icon="el-icon-close" plain size="small" type="danger" @click="deleteOperationClickHandler">删除
|
</el-button>
|
</div>
|
<el-form ref="form" :model="form" label-width="100px" style="max-height: calc(100vh - 200px);overflow: auto;">
|
<span v-if="form.category !== 1">
|
<el-form-item class="is-required">
|
<span slot="label">模块名：</span>
|
<el-input v-model="form.name" :disabled="!editStatus && !addStatus" placeholder="请输入模块名"></el-input>
|
</el-form-item>
|
<el-form-item class="is-required">
|
<span slot="label">模块别名：</span>
|
<el-input v-model="form.alias" :disabled="!editStatus && !addStatus" placeholder="请输入模块别名"></el-input>
|
</el-form-item>
|
<el-form-item class="is-required">
|
<span slot="label">序号：</span>
|
<el-input-number v-model="form.sort" :disabled="!editStatus && !addStatus"></el-input-number>
|
<el-link :underline="false" style="margin-left: 20px" type="danger">数字，描述该模块在其父模块下的显示顺序</el-link>
|
</el-form-item>
|
<el-form-item v-if="form.functionType === 0" label="C/S：">
|
<el-input v-model="form.pathC" :disabled="!editStatus && !addStatus" :rows="2" placeholder="请输入C/S路径"
|
type="textarea"></el-input>
|
</el-form-item>
|
<el-form-item v-if="form.functionType === 0" label="B/S：">
|
<el-input v-model="form.path" :disabled="!editStatus && !addStatus" :rows="2" placeholder="请输入B/S路径"
|
type="textarea"></el-input>
|
</el-form-item>
|
<el-form-item v-if="form.functionType === 0" label=".NET：">
|
<el-input v-model="form.resourceDotNet" :disabled="!editStatus && !addStatus" :rows="2"
|
placeholder="请输入.NET" type="textarea"></el-input>
|
</el-form-item>
|
<el-form-item label="图标：">
|
<input-icon v-model="form.source" :disabled="!editStatus && !addStatus" placeholder="请选择图标">
|
</input-icon>
|
</el-form-item>
|
<el-form-item label="描述：">
|
<el-input v-model="form.remark" :disabled="!editStatus && !addStatus" :rows="3" placeholder="请输入描述"
|
type="textarea"></el-input>
|
</el-form-item>
|
<el-form-item label="是否菜单：">
|
<el-switch
|
v-model="form.functionType"
|
:active-value="0"
|
:disabled="!editStatus && !addStatus"
|
:inactive-value="1"
|
active-color="#13ce66"
|
inactive-color="#ff4949">
|
</el-switch>
|
</el-form-item>
|
<el-form-item label="是否有效：">
|
<el-switch
|
v-model="form.isValid"
|
:disabled="!editStatus && !addStatus"
|
active-color="#13ce66"
|
inactive-color="#ff4949">
|
</el-switch>
|
<el-link :underline="false" style="margin-left: 20px" type="danger">不生效（不选择）时，该模块在功能模块授权里不显示</el-link>
|
</el-form-item>
|
</span>
|
<span v-if="form.category === 1">
|
<el-form-item label="名称：" class="is-required">
|
<el-input v-model="form.name" :disabled="form.category === 1" placeholder="请输入名称"></el-input>
|
</el-form-item>
|
<el-form-item label="标识：" class="is-required">
|
<el-input v-model="form.code" :disabled="form.category === 1" placeholder="请输入标识"></el-input>
|
</el-form-item>
|
<el-form-item label="别名：" class="is-required">
|
<el-input v-model="form.alias" placeholder="请输入别名"></el-input>
|
</el-form-item>
|
<el-form-item label="图标：">
|
<input-icon v-model="form.source" placeholder="请选择图标">
|
</input-icon>
|
</el-form-item>
|
<el-form-item label="编号：" class="is-required">
|
<el-input-number v-model="form.sort" :disabled="form.category === 1" :max="63" :min="1"></el-input-number>
|
</el-form-item>
|
<el-form-item label="描述：">
|
<el-input v-model="form.remark" :disabled="form.category === 1" placeholder="请输入描述"></el-input>
|
</el-form-item>
|
<el-form-item label="是否有效：">
|
<el-switch
|
v-model="form.isValid"
|
active-color="#13ce66"
|
inactive-color="#ff4949">
|
</el-switch>
|
</el-form-item>
|
</span>
|
</el-form>
|
</basic-container>
|
</el-main>
|
<el-dialog
|
v-dialogDrag
|
:visible.sync="methodsVisble"
|
append-to-body="true"
|
class="avue-dialog"
|
title="操作分类"
|
width="900px"
|
>
|
<avue-crud
|
ref="methodsCrud"
|
:data="methodsData"
|
:option="methodsOption"
|
:table-loading="methodsLoading"
|
@row-click="rowMethodsClickHandler"
|
@selection-change="selectMethodsChange">
|
</avue-crud>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="methodsSaveClickHandler">保 存</el-button>
|
<el-button @click="methodsVisble = false">取 消</el-button>
|
</span>
|
</el-dialog>
|
<!--导入 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" fileName="files" title="导入"
|
@updata="resetFormValue"></upload-file>
|
</el-container>
|
</template>
|
|
<script>
|
//管理功能模块
|
import {
|
getSysModelTreeMenuByPID,
|
addModel,
|
updateModel,
|
delModule,
|
exportFunctionSql,
|
addOperationType,
|
exportModule,
|
updateAlias,
|
delFuncOperation
|
} from "@/api/systemModel/mangeModel/api"
|
import func from "@/util/func";
|
import basicOption from "@/util/basic-option";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
tipList: [],
|
upFileType: ['xls', 'xlsx'],
|
fileUrl: 'api/hmSysModConfigController/importModule',
|
createdLoading: false,
|
lastIndex: null,
|
methodsList: [],
|
methodsData: [],
|
methodsOption: {
|
...basicOption,
|
addBtn: false,
|
menu: false,
|
height: 500,
|
header: false,
|
column: [{
|
label: '名称',
|
prop: 'name',
|
width:180,
|
sortable: true,
|
}, {
|
label: '标识',
|
prop: 'code',
|
width:180,
|
}, {
|
label: '描述',
|
prop: 'remark'
|
}]
|
},
|
methodsLoading: false,
|
methodsVisble: false,
|
defalutName: ['name', 'alias', 'pathC', 'path', 'resourceDotNet', 'resourceMobile', 'sort', 'source', 'remark', 'code'],
|
refresh: Math.random(),
|
addStatus: false,
|
editStatus: false,
|
nodeRow: {},
|
currentClickNode: null,
|
form: {},
|
treeData: [],
|
treeOption: {
|
height: 'auto',
|
menu: false,
|
addBtn: false,
|
defaultExpandAll: false,
|
defaultExpandedKeys:['system'],
|
props: {
|
label: 'label',
|
value: 'id',
|
children: 'children',
|
},
|
lazy: true,
|
treeLoad: (node, resolve) => {
|
const params = {
|
parentId: node.level === 0 ? "system" : node.data.id,
|
modeType: node.level === 0 ? "firstNode" : node.data.modeType,
|
}
|
getSysModelTreeMenuByPID(params).then(res => {
|
resolve(res.data.data.map(item => {
|
return {
|
...item,
|
label: item.category!=1?item.name:item.alias,
|
leaf: !item.hasChildren,
|
icon: item.source || (node.level === 0?'el-icon-s-home':'el-icon-s-tools'),
|
iconType:item.source?'svg':'iconfont'
|
}
|
}))
|
})
|
}
|
},
|
}
|
},
|
created() {
|
},
|
computed: {
|
/**
|
* childType
|
* 为-1 全部按钮展示 禁用修改 删除 增加操作类型
|
* 不为-1 隐藏 删除非系统模块 删除业务模块
|
* 为1时 禁用操作类型、导入、导出
|
* 为2时 禁用增加 导入 导出
|
* mangeShowBtn 为 true 说明是顶层节点 全部按钮展示 禁用修改 删除 增加操作类型
|
* @returns {Number}
|
*/
|
mangeShowBtn() {
|
return this.form.childType === -1;
|
},
|
childTypeBtn() {
|
return this.form.childType === 1;
|
}
|
},
|
methods: {
|
// 树行点击
|
nodeClick(row, node) {
|
this.form = {...row};
|
this.nodeRow = {...row};
|
this.currentClickNode = node;
|
this.addStatus = false;
|
this.editStatus = false;
|
},
|
|
// 新增按钮
|
addClickHandler() {
|
// this.resetFormValue();
|
this.defalutName.forEach(key => {
|
this.form[key] = null;
|
})
|
this.form.isValid = false;
|
this.addStatus = true;
|
this.editStatus = false;
|
},
|
|
// 清空表单绑定值
|
resetFormValue() {
|
this.form = {};
|
this.refresh = Math.random(); // 刷新左侧树
|
},
|
|
// 新增保存按钮
|
addSaveClickHandler() {
|
if (!this.form.name) {
|
this.$message.error('模块名不能为空');
|
return
|
}
|
if (!this.form.alias) {
|
this.$message.error('菜单标识不能为空');
|
return
|
}
|
if (this.form.name.length > 128) {
|
this.$message.error('模块名长度不能超过128！');
|
return
|
}
|
if (this.form.remark && this.form.remark.length > 255) {
|
this.$message.error('描述长度不能超过255！');
|
return
|
}
|
if (this.form.resourceDotNet && this.form.resourceDotNet.length > 255) {
|
this.$message.error('.NET标识长度不能超过255！');
|
return
|
}
|
if (this.form.pathC && this.form.pathC.length > 255) {
|
this.$message.error('C/S标识长度不能超过255！');
|
return
|
}
|
if (this.form.resourceMobile && this.form.resourceMobile.length > 255) {
|
this.$message.error('Mobile标识长度不能超过255！');
|
return
|
}
|
this.form.parentId = this.form.id;
|
addModel(this.form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.msg);
|
this.addStatus = false;
|
// this.resetFormValue();
|
this.form.childType = null;
|
this.handleRefreshTree('add')
|
}
|
})
|
},
|
|
// 修改按钮
|
editClickHandler() {
|
this.editStatus = true;
|
this.addStatus = false;
|
},
|
|
// 修改保存
|
editSaveClickHandler() {
|
if (!this.form.name) {
|
this.$message.error('模块名不能为空');
|
return
|
}
|
if (!this.form.alias) {
|
this.$message.error('菜单标识不能为空');
|
return
|
}
|
if (this.form.name.length > 128) {
|
this.$message.error('模块名长度超过128！');
|
return
|
}
|
if (this.form.remark && this.form.remark.length > 255) {
|
this.$message.error('描述长度超过255！');
|
return
|
}
|
if (this.form.resourceDotNet && this.form.resourceDotNet.length > 255) {
|
this.$message.error('.NET标识长度不能255！');
|
return
|
}
|
if (this.form.pathC && this.form.pathC.length > 255) {
|
this.$message.error('C/S标识长度不能255！');
|
return
|
}
|
if (this.form.resourceMobile && this.form.resourceMobile.length > 255) {
|
this.$message.error('Mobile标识长度不能255！');
|
return
|
}
|
|
updateModel(this.form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.msg);
|
this.editStatus = false;
|
// this.resetFormValue();
|
this.form.childType = null;
|
this.handleRefreshTree('edit')
|
}
|
})
|
},
|
|
// 删除按钮
|
delClickHandler() {
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
delModule(this.form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.msg);
|
this.handleRefreshTree('del')
|
this.addStatus = false;
|
this.editStatus = false;
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 导出sql
|
sqlClickExportClick() {
|
exportFunctionSql({isFunction: true}).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
});
|
},
|
|
// 操作分类多选
|
selectMethodsChange(list) {
|
this.methodsList = list;
|
},
|
|
// 增加操作类型
|
addMethodsClickHandler() {
|
this.methodsLoading = true;
|
getSysModelTreeMenuByPID({parentId: 'operateNode'}).then(res => {
|
if (res.data.code === 200 && res.data.data.length > 0) {
|
this.methodsVisble = true;
|
const data = res.data.data;
|
this.methodsData = data;
|
this.methodsLoading = false;
|
} else {
|
this.$message.error('未找到可增加的操作类型');
|
}
|
})
|
},
|
|
// 增加操作类型保存
|
methodsSaveClickHandler() {
|
let list = this.methodsList.map(item => {
|
return {
|
funcId: this.nodeRow.id,
|
operId: item.id,
|
operName: item.name,
|
operIndentify: item.code,
|
operAlias: item.alias,
|
operDesc: item.remark
|
}
|
})
|
addOperationType(list).then(res => {
|
if (res.data.code === 200) {
|
this.methodsVisble = false;
|
this.$message.success(res.data.msg);
|
this.form.childType = null;
|
this.handleRefreshTree('add')
|
}
|
})
|
},
|
|
// 点击行
|
rowMethodsClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.methodsCrud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.methodsList = [row];
|
}
|
);
|
},
|
|
// 修改别名
|
updataAliasClickHandler() {
|
const params = {
|
id: this.form.id,
|
isValid: this.form.isValid,
|
source:this.form.source,
|
alias: this.form.alias
|
}
|
updateAlias(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.msg);
|
this.handleRefreshTree('edit')
|
}
|
})
|
},
|
|
// 删除模块下关联的操作类型
|
deleteOperationClickHandler() {
|
const params = {
|
funcId: this.form.funcId,
|
operId: this.form.operId
|
}
|
delFuncOperation(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.msg);
|
this.handleRefreshTree('del');
|
}
|
})
|
},
|
|
// 导出
|
exportClickHandler() {
|
this.createdLoading = true;
|
exportModule().then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.createdLoading = false
|
this.$message.success('导出成功');
|
})
|
},
|
|
// 导入
|
upLoadClickHandler() {
|
this.$refs.upload.visible = true;
|
},
|
|
handleRefreshTree(type) {
|
//type:add\edit\del
|
if (type == "del") {
|
this.$refs.tree.remove(this.currentClickNode);
|
this.currentClickNode = null;
|
this.form = {};
|
} else {
|
if (this.currentClickNode) {
|
let node = this.currentClickNode.parent;
|
node.loaded = false;
|
node.expand();
|
this.$nextTick(()=>{
|
this.$refs.tree.setCurrentKey(this.currentClickNode.data.id);
|
});
|
} else {
|
this.refresh = Math.random(); // 刷新左侧树
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-form-item .el-select {
|
width: 100%;
|
}
|
}
|
|
.btnBox {
|
display: flex;
|
justify-content: left;
|
margin-bottom: 15px;
|
}
|
</style>
|
