<template>
|
<div class="app-container">
|
<div class="filter-container">
|
<el-button class="filter-item" style="margin-left: 10px;" @click="newAdd">新增</el-button>
|
<el-button class="filter-item" style="margin-left: 10px;" @click="batchDelete">删除</el-button>
|
</div>
|
<el-row :gutter="24" style="margin-bottom: 20px;">
|
<el-col :span="6" style="margin-bottom: 20px;">
|
<el-tree
|
v-if="resourceTree"
|
ref="resourceTree"
|
:data="resourceTree"
|
:render-content="renderContent"
|
:props="defaultProps"
|
show-checkbox
|
highlight-current
|
clearable
|
node-key="id"
|
@node-click="handleNodeClick"/>
|
</el-col>
|
<el-col :span="18">
|
<el-card class="box-card">
|
<div class="text item">
|
<el-form ref="form" :model="form" :label-width="formLabelWidth">
|
<el-form-item label="父级"/>
|
<el-form-item label="名称">
|
<el-input v-model="form.name" auto-complete="off"/>
|
</el-form-item>
|
<el-form-item label="代码">
|
<el-input v-model="form.code" auto-complete="off"/>
|
</el-form-item>
|
<el-form-item label="类型">
|
<el-radio v-model="form.type" :label="1" class="radio">菜单</el-radio>
|
<el-radio v-model="form.type" :label="2" class="radio">按钮</el-radio>
|
<el-radio v-model="form.type" :label="3" class="radio">功能</el-radio>
|
</el-form-item>
|
<el-form-item label="是否生效">
|
<el-radio v-model="form.usable" class="radio" label="1">是</el-radio>
|
<el-radio v-model="form.usable" class="radio" label="0">否</el-radio>
|
</el-form-item>
|
<el-form-item label="排序">
|
<el-slider v-model="form.sort"/>
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input v-model="form.remarks" auto-complete="off"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit" v-text="form.id?'修改':'新增'"/>
|
<el-button v-show="form.id && form.id!=null" type="danger" icon="delete" @click="deleteSelected">删除
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
<div style="clear: both;"/>
|
</div>
|
|
</template>
|
<script>
|
import merge from 'element-ui/src/utils/merge'
|
export default {
|
components: {
|
'el-select-tree': selectTree
|
},
|
mixins: [treeter],
|
data() {
|
return {
|
formLabelWidth: '100px',
|
defaultProps: {
|
children: 'children',
|
label: 'name',
|
id: 'id'
|
},
|
resourceTree: [],
|
maxId: 700000,
|
form: {
|
id: null,
|
parentId: null,
|
name: '',
|
code: '',
|
type: 1,
|
sort: 0,
|
usable: '1',
|
remarks: ''
|
}
|
}
|
},
|
created() {
|
// this.load();
|
},
|
methods: {
|
newAdd() {
|
this.form = {
|
id: null,
|
parentId: null,
|
name: '',
|
code: '',
|
type: 1,
|
sort: 0,
|
usable: '1',
|
remarks: ''
|
}
|
},
|
renderContent(h, { node, data, store }) {
|
return (
|
<span>
|
<span>
|
<span>{node.label}</span>
|
</span>
|
</span>)
|
},
|
deleteSelected() {
|
this.$http.get(api.SYS_RESOURCE_DELETE + '?resourceIds=' + this.form.id)
|
.then(res => {
|
this.$message('操作成功')
|
this.deleteFromTree(this.resourceTree, this.form.id)
|
this.newAdd()
|
}).catch(e => {
|
this.$message('操作成功')
|
this.deleteFromTree(this.resourceTree, this.form.id)
|
this.newAdd()
|
})
|
},
|
batchDelete() {
|
var checkKeys = this.$refs.resourceTree.getCheckedKeys()
|
if (checkKeys == null || checkKeys.length <= 0) {
|
this.$message.warning('请选择要删除的资源')
|
return
|
}
|
this.$confirm('确定删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$http.get(api.SYS_RESOURCE_DELETE + '?resourceIds=' + checkKeys.join(','))
|
.then(res => {
|
this.$message('操作成功')
|
this.load()
|
}).catch(e => {
|
this.$message('操作成功')
|
console.log(checkKeys)
|
this.batchDeleteFromTree(this.resourceTree, checkKeys)
|
})
|
})
|
},
|
handleNodeClick(data) {
|
this.form = merge({}, data)
|
},
|
onSubmit() {
|
if (this.form.id == null) {
|
this.$http.post(api.SYS_RESOURCE_ADD, this.form)
|
.then(res => {
|
this.$message('操作成功')
|
this.form.id = res.data.id
|
this.appendTreeNode(this.resourceTree, res.data)
|
}).catch(e => {
|
this.maxId += 1
|
this.$message('操作成功')
|
this.form.id = this.maxId
|
var ddd = {
|
id: this.form.id,
|
name: this.form.name,
|
sort: this.form.sort,
|
type: this.form.type,
|
code: this.form.code,
|
remarks: this.form.remarks,
|
parentId: this.form.parentId,
|
usable: this.form.usable,
|
children: []
|
}
|
this.appendTreeNode(this.resourceTree, ddd)
|
this.resourceTree.push({})
|
this.resourceTree.pop()
|
})
|
} else {
|
this.$http.post(api.SYS_RESOURCE_UPDATE, this.form)
|
.then(res => {
|
this.$message('操作成功')
|
this.updateTreeNode(this.resourceTree, res.data)
|
}).catch(e => {
|
this.$message('操作成功')
|
this.updateTreeNode(this.resourceTree, merge({}, this.form))
|
})
|
}
|
},
|
load() {
|
sysApi.resourceList()
|
.then(res => {
|
this.resourceTree = []
|
this.resourceTree.push(...res)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.clearfix:before,
|
.clearfix:after {
|
display: table;
|
content: "";
|
}
|
|
.clearfix:after {
|
clear: both
|
}
|
|
</style>
|
