354 lines
9.6 KiB
Vue
354 lines
9.6 KiB
Vue
<template>
|
|
<div style="width: 100%" class="wrapper">
|
|
<el-input
|
|
placeholder="输入树状图体系"
|
|
v-model="filterText">
|
|
</el-input>
|
|
<div class="tree">
|
|
<el-card style="height: 100%;padding-right: 120px;overflow-y:auto">
|
|
<el-tree
|
|
ref="tree"
|
|
node-key="id"
|
|
class="tree-line"
|
|
icon-class="icon-tree"
|
|
:expand-on-click-node="false"
|
|
:indent="0"
|
|
:props="props"
|
|
:data="treeList"
|
|
:default-expanded-keys="['1716336011358269441']"
|
|
highlight-current
|
|
@node-click="treeClick"
|
|
:filter-node-method="filterNode">
|
|
<span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
|
|
<span :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
|
|
<span style="font-size:12px"> {{ node.label }} </span>
|
|
<span>
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
v-show="data.show"
|
|
v-btn-permission="'a7fee733685bf16abb9dffb4e423d632'"
|
|
@click="() => append(data)">
|
|
新增
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
v-show="data.show"
|
|
v-btn-permission="'1e96ef8234a8f7a50cafab999e2e7bdf'"
|
|
@click="() => update(data)">
|
|
编辑
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
size="mini"
|
|
v-show="data.showDel"
|
|
v-btn-permission="'b6fa8bd927d679c28109d1c72f0d1d72'"
|
|
@click="() => remove(node, data)">
|
|
删除
|
|
</el-button>
|
|
</span>
|
|
</span>
|
|
</el-tree>
|
|
</el-card>
|
|
</div>
|
|
<el-drawer
|
|
:wrapperClosable="false"
|
|
:title="DrawerTitle"
|
|
:visible.sync="DrawerVisible"
|
|
size="800px"
|
|
:before-close="handleCancel"
|
|
label-width="130px"
|
|
>
|
|
<div class="demo-drawer-content">
|
|
<el-form :model="DrawerModel"
|
|
ref="DrawerModelRef"
|
|
:rules="DrawerRules"
|
|
class="label-input-form"
|
|
label-width="130px">
|
|
<el-row>
|
|
<el-col>
|
|
<el-form-item label="目录名称" prop="name" class="add-form-item">
|
|
<el-input v-model.trim="DrawerModel.name" placeholder="请输入目录名称" clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col>
|
|
<el-form-item label="目录顺序" prop="sort" class="add-form-item">
|
|
<el-input v-model.number="DrawerModel.sort"
|
|
number
|
|
placeholder="请输入目录顺序"
|
|
:maxlength="4"
|
|
clearable></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
<div class="demo-drawer-footer">
|
|
<el-button
|
|
class="common-button-primary"
|
|
icon="el-icon-check"
|
|
type="primary"
|
|
:loading="loading"
|
|
@click="handleSubmit">提交
|
|
</el-button>
|
|
<el-button
|
|
class="common-button-default"
|
|
icon="el-icon-close"
|
|
:loading="loading"
|
|
@click="handleCancel">取消
|
|
</el-button>
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "RegulatoryMaterialsTree",
|
|
data(){
|
|
return {
|
|
treeList: [],
|
|
filterText: '',
|
|
props: {
|
|
label: 'name',
|
|
children: 'children'
|
|
},
|
|
|
|
// drawer
|
|
DrawerTitle: '',
|
|
DrawerVisible: false,
|
|
DrawerModel: {
|
|
name: '',
|
|
parentId: '',
|
|
sort: ''
|
|
},
|
|
DrawerRules: {
|
|
name: [
|
|
{required: true, message: '目录名称不能为空', trigger: 'change'},
|
|
{type: 'string', max: 100, message: '最多输入100位'}
|
|
],
|
|
sort: [
|
|
{required: true, message: '目录顺序不能为空且为正整数', trigger: 'change'},
|
|
{type: 'string', validator: this.verify.validStandNumInCompile2, trigger: 'blur'}
|
|
]
|
|
},
|
|
|
|
url: {
|
|
getTree: 'lawss/sarLawsInformation/tree/getTree',
|
|
addTreeNode: 'lawss/sarLawsInformation/tree/addTreeNode',
|
|
updateTreeNode: 'lawss/sarLawsInformation/tree/updateTreeNode',
|
|
deleteTreeNode: 'lawss/sarLawsInformation/tree/deleteTreeNode',
|
|
},
|
|
loading: false,
|
|
}
|
|
},
|
|
created() {
|
|
this.getMenuList()
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val);
|
|
},
|
|
},
|
|
methods: {
|
|
getMenuList () {
|
|
this.$http._getData(this.url.getTree).then(res => {
|
|
if (res.ok) {
|
|
this.treeList = res.data
|
|
this.$emit('treeClick', res.data[0])
|
|
}
|
|
})
|
|
},
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.name.indexOf(value) !== -1;
|
|
},
|
|
treeClick (treeNode) {
|
|
this.$emit('treeClick', treeNode)
|
|
},
|
|
append(data) {
|
|
this.DrawerTitle = '新增目录'
|
|
this.DrawerModel.name = ''
|
|
this.DrawerModel.parentId = data.id
|
|
this.DrawerVisible = true
|
|
},
|
|
update(data) {
|
|
this.DrawerModel = data
|
|
this.DrawerTitle = '编辑目录'
|
|
this.DrawerVisible = true
|
|
},
|
|
remove(node, data) {
|
|
this.$confirm(data.children.length > 0 ? '该节点下有记录，是否删除？' : '是否删除菜单', '提示', {
|
|
confirmButtonText: '确定',
|
|
confirmButtonClass: 'common-button-primary',
|
|
cancelButtonText: '取消',
|
|
roundButton: true,
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$http._deleteData(this.url.deleteTreeNode, { id: data.id }).then(res => {
|
|
if (res.ok) {
|
|
this.$message.success('删除成功')
|
|
this.getMenuList()
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
this.$message.info('已取消删除')
|
|
})
|
|
},
|
|
// 树节点鼠标移入移出
|
|
mouseenter(data){
|
|
this.$set(data, 'show', true)
|
|
if(data.parentId !== null){
|
|
this.$set(data, 'showDel', true)
|
|
}
|
|
},
|
|
mouseleave(data){
|
|
this.$set(data, 'show', false)
|
|
this.$set(data, 'showDel', false)
|
|
},
|
|
|
|
handleCancel () {
|
|
this.$refs.DrawerModelRef.resetFields()
|
|
this.DrawerModel = {
|
|
name: '',
|
|
parentId: '',
|
|
sort: ''
|
|
}
|
|
this.DrawerVisible = false
|
|
},
|
|
handleSubmit () {
|
|
this.$refs.DrawerModelRef.validate(valid => {
|
|
if (valid) {
|
|
let method = this.DrawerTitle === '新增目录' ? '_postData' : '_putData'
|
|
let url = this.DrawerTitle === '新增目录' ? this.url.addTreeNode : this.url.updateTreeNode
|
|
const config = {
|
|
_this: this,
|
|
loading: 'loading',
|
|
}
|
|
this.$http[method](url, this.DrawerModel, config).then(res => {
|
|
if (res.ok) {
|
|
this.$message.success('操作成功')
|
|
this.getMenuList()
|
|
this.handleCancel()
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
/deep/ .icon-tree {
|
|
margin:0 5px 0 10px;
|
|
position:relative;
|
|
background:url('~@/assets/images/shangqi/img/tree-add.png');
|
|
background-size:100% 100%;
|
|
}
|
|
/deep/ .expanded{
|
|
background:url('~@/assets/images/shangqi/img/tree-sub.png');
|
|
background-size:100% 100%;
|
|
}
|
|
/deep/ .is-leaf{
|
|
background-image:none;
|
|
background-size:100% 100%;
|
|
}
|
|
/deep/ .is-leaf-none{
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
background: url('~@/assets/images/shangqi/img/none-file-new.png');
|
|
background-size:100% 100%;
|
|
}
|
|
/deep/ .is-show{
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 15px;
|
|
height: 15px;
|
|
background:url('~@/assets/images/shangqi/img/tree.png');
|
|
background-size:100% 100%;
|
|
}
|
|
|
|
/deep/.tree-line{
|
|
.el-tree-node {
|
|
position: relative;
|
|
padding-left: 0px; // 缩进量
|
|
line-height: 30px;
|
|
}
|
|
.el-tree-node__children {
|
|
padding-left: 16px; // 缩进量
|
|
}
|
|
|
|
// 竖线
|
|
.el-tree-node::before {
|
|
content: "";
|
|
height: 100%;
|
|
width: 1px;
|
|
position: absolute;
|
|
left: -3px;
|
|
top: -26px;
|
|
border-width: 1px;
|
|
border-left: 1px dashed #858990e0;
|
|
}
|
|
// 当前层最后一个节点的竖线高度固定
|
|
.el-tree-node:last-child::before {
|
|
height: 38px; // 可以自己调节到合适数值
|
|
}
|
|
|
|
// 横线
|
|
.el-tree-node::after {
|
|
content: "";
|
|
width: 11px;
|
|
height: 20px;
|
|
position: absolute;
|
|
left: -3px;
|
|
top: 12px;
|
|
border-width: 1px;
|
|
border-top: 1px dashed #858990e0;
|
|
}
|
|
|
|
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
|
|
& > .el-tree-node::after {
|
|
border-top: none;
|
|
}
|
|
& > .el-tree-node::before {
|
|
border-left: none;
|
|
}
|
|
|
|
// 展开关闭的icon
|
|
.el-tree-node__expand-icon{
|
|
font-size: 16px;
|
|
// 叶子节点（无子节点）
|
|
&.is-leaf{
|
|
color: transparent;
|
|
// display: none; // 也可以去掉
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped lang="less">
|
|
.tree{
|
|
/deep/ .el-card__body {
|
|
padding: 0 !important;
|
|
}
|
|
.el-card {
|
|
width: 500px;
|
|
min-width: 2000px;
|
|
max-width: 100%;
|
|
/* min-width: min-content;*/
|
|
}
|
|
height: 95%;
|
|
width: 95%;
|
|
position: absolute;
|
|
left: 0;
|
|
|
|
}
|
|
|
|
</style>
|