<template>
|
<el-container>
|
<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="nodeRow.childType === 0 || nodeRow.childType === -1" class="btnBox">
|
<el-button v-if="!addStatus && !editStatus" :disabled="nodeRow.childType === 0" icon="el-icon-plus" plain
|
size="small"
|
type="primary" @click="addClickHandler">增加
|
</el-button>
|
<el-button v-if="addStatus" icon="el-icon-check" plain size="small"
|
type="success" @click="addSaveClickHandler">保存
|
</el-button>
|
<el-button v-if="!addStatus && !editStatus" :disabled="nodeRow.childType === -1" icon="el-icon-edit" plain
|
size="small" type="primary"
|
@click="editClickHandler">修改
|
</el-button>
|
<el-button v-if="editStatus" icon="el-icon-check" plain size="small"
|
type="success" @click="editSaveClickHandler">保存
|
</el-button>
|
<el-button v-if="addStatus || editStatus" icon="el-icon-close" plain size="small"
|
type="danger" @click="addStatus=false;editStatus=false;">取消
|
</el-button>
|
<el-button v-if="!addStatus && !editStatus" :disabled="nodeRow.childType === -1" icon="el-icon-close" plain
|
size="small" type="danger"
|
@click="delClickHandler">删除
|
</el-button>
|
<el-button v-if="!addStatus && !editStatus" icon="el-icon-upload2" plain size="small" type="primary"
|
@click="sqlClickExportClick">导出sql
|
</el-button>
|
</div>
|
<el-form ref="form" :model="form" label-width="85px" style="max-height: calc(100vh - 180px);overflow: auto;">
|
<el-form-item label="名称：" class="is-required">
|
<el-input v-model="form.name" :disabled="!editStatus && !addStatus" placeholder="请输入名称"></el-input>
|
</el-form-item>
|
<el-form-item label="标识：" class="is-required">
|
<el-input v-model.trim="form.code" :disabled="!editStatus && !addStatus" placeholder="请输入标识"></el-input>
|
</el-form-item>
|
<el-form-item label="别名：" class="is-required">
|
<el-input v-model="form.alias" :disabled="!editStatus && !addStatus" placeholder="请输入别名"></el-input>
|
</el-form-item>
|
<el-form-item label="图标：" class="is-required">
|
<input-icon v-model="form.source" :disabled="!editStatus && !addStatus" placeholder="请选择图标">
|
</input-icon>
|
</el-form-item>
|
<el-form-item label="顺序：">
|
<el-input-number v-model="form.sort" :disabled="!editStatus && !addStatus" :max="63" :min="1"
|
label="顺序"></el-input-number>
|
</el-form-item>
|
<el-form-item label="描述：">
|
<el-input v-model="form.remark" :disabled="!editStatus && !addStatus" placeholder="请输入描述"></el-input>
|
</el-form-item>
|
</el-form>
|
</basic-container>
|
</el-main>
|
</el-container>
|
</template>
|
|
<script>
|
//管理功能模块
|
import {exportFunctionSql, getSysModelTreeMenuByPID} from "@/api/systemModel/mangeModel/api"
|
import {addOperationType, updateOperationType, delOperationType} from "@/api/systemModel/operateType/api"
|
import func from "@/util/func";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
refresh: Math.random(),
|
editStatus: false,
|
addStatus: false,
|
nodeRow: {},
|
currentClickNode: {},
|
form: {},
|
treeData: [],
|
treeOption: {
|
height: 'auto',
|
menu: false,
|
addBtn: false,
|
defaultExpandAll: false,
|
props: {
|
label: 'name',
|
value: 'id',
|
children: 'children',
|
},
|
lazy: true,
|
treeLoad: (node, resolve) => {
|
const params = {
|
parentId: node.level === 0 ? "operateNode" : node.data.id,
|
modeType: node.level === 0 ? 'firstNode' : "",
|
}
|
getSysModelTreeMenuByPID(params).then(res => {
|
resolve(res.data.data.map(item => {
|
return {
|
...item,
|
id: item.id,
|
name: item.name,
|
leaf: !item.hasChildren,
|
icon: item.source || (node.level === 0?'el-icon-s-home':'el-icon-s-tools'),
|
iconType:item.source?'svg':'iconfont'
|
}
|
}))
|
})
|
}
|
},
|
}
|
},
|
created() {
|
},
|
computed: {},
|
methods: {
|
// 树行点击
|
nodeClick(row, node) {
|
this.form = {...row};
|
this.nodeRow = {...row};
|
this.currentClickNode = node;
|
this.addStatus = false;
|
this.editStatus = false;
|
},
|
// 清空表单绑定值
|
resetFormValue() {
|
this.form = {};
|
this.refresh = Math.random(); // 刷新左侧树
|
},
|
|
|
// 新增按钮
|
addClickHandler() {
|
this.form = {};
|
this.addStatus = true;
|
this.editStatus = false;
|
},
|
|
// 保存按钮
|
addSaveClickHandler() {
|
if (!this.form.name) {
|
this.$message.error('名称不能为空');
|
return
|
}
|
if (!this.form.code) {
|
this.$message.error('标识不能为空');
|
return
|
}
|
if (!this.form.alias) {
|
this.$message.error('别名不能为空');
|
return
|
}
|
if (!this.form.sort) {
|
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.alias && this.form.alias.length > 255) {
|
this.$message.error('别名长度不能超过255！');
|
return
|
}
|
this.form.parentId = this.nodeRow.id;
|
const params = {
|
name: this.form.name,
|
identify: this.form.code,
|
alias: this.form.alias,
|
desc: this.form.remark,
|
seq: this.form.sort,
|
source: this.form.source,
|
}
|
addOperationType(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.msg);
|
this.handleRefreshTree('add');
|
this.addStatus = false;
|
}
|
})
|
},
|
|
// 修改按钮
|
editClickHandler() {
|
this.addStatus = false;
|
this.editStatus = true;
|
},
|
|
// 修改保存
|
editSaveClickHandler() {
|
console.log(this.form);
|
if (!this.form.name) {
|
this.$message.error('名称不能为空');
|
return
|
}
|
if (!this.form.code) {
|
this.$message.error('标识不能为空');
|
return
|
}
|
if (!this.form.alias) {
|
this.$message.error('别名不能为空');
|
return
|
}
|
if (this.form.sort == null || this.form.sort === '' || this.form.sort === undefined) {
|
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.alias && this.form.alias.length > 255) {
|
this.$message.error('别名长度不能超过255！');
|
return
|
}
|
|
const params = {
|
id: this.form.id,
|
name: this.form.name,
|
identify: this.form.code,
|
alias: this.form.alias,
|
desc: this.form.remark,
|
seq: this.form.sort,
|
source: this.form.source,
|
}
|
updateOperationType(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.msg);
|
this.handleRefreshTree('edit');
|
this.editStatus = false;
|
}
|
})
|
},
|
|
// 删除
|
delClickHandler() {
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
delOperationType(this.form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.msg);
|
this.handleRefreshTree('del')
|
this.addStatus = false;
|
this.editStatus = false;
|
this.nodeRow = {};
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 导出sql
|
sqlClickExportClick() {
|
exportFunctionSql({isFunction: false}).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
});
|
},
|
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();
|
if (type === 'edit') {
|
this.$refs.tree.setCurrentKey(null);
|
} else {
|
this.$refs.tree.setCurrentNode(this.nodeRow);
|
}
|
} 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>
|
