<template>
|
<div class="editLaw">
|
<basic-container>
|
<el-row>
|
<el-col :span="15">
|
<div @click="resetTreeClick" :class="{titleCol:checkTitleCol}" class="editLawTitle">{{addDetailForm.lawName}}
|
</div>
|
<div class="editLaw-main-box">
|
<el-col :span="10">
|
<div class="editLaw-tree-box">
|
<!-- <div class="law-jiegou-box">-->
|
<!-- <div class="filter-container">-->
|
<!-- <el-button-group>-->
|
<!-- <el-button-->
|
<!-- style="margin-left:10px"-->
|
<!-- size="mini"-->
|
<!-- type="primary"-->
|
<!-- icon="plus"-->
|
<!-- @click="handlerAdd">添加-->
|
<!-- </el-button>-->
|
<!-- <el-button-->
|
<!-- style="margin-left:10px"-->
|
<!-- size="mini"-->
|
<!-- type="primary"-->
|
<!-- icon="delete"-->
|
<!-- @click="">删除-->
|
<!-- </el-button>-->
|
<!-- </el-button-group>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<el-tree
|
ref="tree"
|
:current-node-key="currentNodeKey"
|
:data="treeData"
|
:props="defaultProps"
|
class="filter-tree"
|
node-key="id"
|
highlight-current
|
:default-expanded-keys="idArr"
|
highlight-current
|
@node-click="getNodeData"
|
@node-contextmenu="modifyData"
|
/>
|
</div>
|
|
</el-col>
|
<el-col :span="12" :offset="1">
|
<div class="editor-form-box">
|
<h1 class="editor-title">操作区</h1>
|
<div class="caozuoqu-main">
|
<el-input v-model="addDetailForm.content" placeholder="示例：第X编/章/节 xxxxx"/>
|
<div class="caozuo-btns">
|
<el-button :disabled="isBianDisable" @click="bianHandleClick" style="margin-right: 10px" type="primary">创建编</el-button>
|
<el-button :disabled="iszhangisable" @click="zhangHandleClick" style="margin-right: 10px" type="primary">创建章</el-button>
|
<el-button :disabled="isJieDisable" @click="jieHandleClick" type="primary">创建节</el-button>
|
</div>
|
<el-input v-model="addDetailForm.tiaoContent" type="textarea" :rows="7" placeholder="示例：第x条 xxxxx"></el-input>
|
<div class="tiaoBTn">
|
<el-button :disabled="isTiaoDisable" @click="TiaoHandleClick" type="primary">自动识别条目内容</el-button>
|
</div>
|
</div>
|
<!-- <el-form :model="lawForm" label-width="80px">-->
|
<!-- <el-form-item-->
|
<!-- v-if="formEdit"-->
|
<!-- label="当前节点"-->
|
<!-- prop="deptId">-->
|
<!-- <el-input-->
|
<!-- v-model="lawForm.deptId"-->
|
<!-- :disabled="formEdit"-->
|
<!-- placeholder="当前节点"/>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item-->
|
<!-- label="父级节点"-->
|
<!-- prop="parentId">-->
|
<!-- <el-input-->
|
<!-- v-model="lawForm.parentId"-->
|
<!-- disabled-->
|
<!-- placeholder="请输入父级节点"/>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item-->
|
<!-- label="章节名称"-->
|
<!-- prop="deptId">-->
|
<!-- <el-input-->
|
<!-- v-model="lawForm.name"-->
|
<!-- placeholder="章节名称"/>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item-->
|
<!-- label="条目内容"-->
|
<!-- prop="deptId">-->
|
<!-- <el-input-->
|
<!-- type="textarea"-->
|
<!-- :rows="6"-->
|
<!-- :disabled="formEdit"-->
|
<!-- v-model="lawForm.text"-->
|
<!-- placeholder="条目内容"/>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label-width="0">-->
|
<!-- <div style="display: flex;justify-content: center">-->
|
<!-- <el-button type="primary">保存</el-button>-->
|
<!-- </div>-->
|
|
<!-- </el-form-item>-->
|
<!-- </el-form>-->
|
</div>
|
</el-col>
|
</div>
|
</el-col>
|
<el-col :span="9">
|
<div class="yulanqu-box">
|
<h1 class="yulansmall">预览区</h1>
|
<div class="yulanqu-content">
|
<h1 class="yulan-biaoti">{{addDetailForm.lawName}}</h1>
|
<h2 class="zhixing-time">{{this.place}} {{this.effectiveTime}}起执行</h2>
|
<div class="yuanlan-block" v-for="firstChild in treeData">
|
<h1 :class="classObj(firstChild)">{{firstChild.title}} {{firstChild.content}}</h1>
|
<div v-for="(secondChild) in firstChild.children">
|
<h1 :class="classObj(secondChild)">{{secondChild.title}} {{secondChild.content}}</h1>
|
<div v-for="(thirdChild) in secondChild.children">
|
<h1 :class="classObj(thirdChild)">{{thirdChild.title}} {{thirdChild.content}}</h1>
|
<div class="yulan-main">
|
<div :class="classObj(forthChild)" v-for="(forthChild) in thirdChild.children">
|
<h1>{{forthChild.title}} {{forthChild.content}}</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--<div class="yuanlan-block">
|
<h1 class="bian-title">第一编 总 则</h1>
|
<h1 class="zhang-title">第一章 基本规定</h1>
|
<h1 class="jie-title">第一节 民事权利能力和民事行为能力</h1>
|
<div class="yulan-main">
|
<div class="yulan-main-block">
|
<h1>第一条 为了加强城市生活垃圾管理，改善城市市容和环境卫生，根据《中华人民共和国固体废物污染环境防治法》、《城市市容和环境卫生管理条例》等法律、行政法规，制定本办法。</h1>
|
</div>
|
<div class="yulan-main-block">
|
<h1>第二条 为了加强城市生活垃圾管理，改善城市市容和环境卫生，根据《中华人民共和国固体废物污染环境防治法》、《城市市容和环境卫生管理条例》等法律、行政法规，制定本办法。</h1>
|
</div>
|
<div class="yulan-main-block">
|
<h1>第三条 为了加强城市生活垃圾管理，改善城市市容和环境卫生，根据《中华人民共和国固体废物污染环境防治法》、《城市市容和环境卫生管理条例》等法律、行政法规，制定本办法。</h1>
|
</div>
|
</div>
|
</div>-->
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</basic-container>
|
<modifyLawForm ref="modifyLawForm" v-if="modifyLawVisable" @callBack="callBack"></modifyLawForm>
|
</div>
|
</template>
|
|
<script>
|
import {getTree,addDetail} from '@/api/lawAndReg/lawAndReg'
|
import modifyLawForm from "./modifyLawForm";
|
export default {
|
name: "editLaw",
|
components: {
|
modifyLawForm
|
},
|
data() {
|
return {
|
currentLivingId:'' ,//选中的id
|
modifyLawVisable:false,
|
idArr:[],
|
currentNodeKey:null, //当前选中的节点
|
checkTitleCol:false, //法律标题颜色
|
isBianDisable:false, // 编
|
iszhangisable:false, // 章
|
isJieDisable:false, // 节
|
isTiaoDisable:false, //条
|
addDetailForm:{
|
pid:0, //tree的父级id
|
content:'',
|
lawName:'',
|
type:'',
|
tiaoContent:'', //操作区条内容
|
},
|
Namevalue:'', //操作区名字
|
formStatus:'', //判断当前是添加状态还是编辑状态 create/update
|
lawForm: { //
|
deptId:'', //本级节点
|
parentId:'', //父级节点
|
name:'',
|
text:''
|
},
|
currentId:'', //当前节点
|
formEdit:true, //条目内容
|
treeData: [],
|
defaultProps: {
|
children: 'children',
|
label:(a,b) => {
|
return a.title + '\xa0\xa0' + a.content
|
}
|
},
|
place:'', //颁发场合
|
effectiveTime:'', //颁发日期
|
}
|
},
|
computed: {
|
classObj() {
|
return (val) => {
|
if(val.type == 0) {
|
return 'bian-title'
|
}else if(val.type == 1) {
|
return 'zhang-title'
|
}else if(val.type == 2) {
|
return 'jie-title'
|
}else if(val.type == 3) {
|
return 'yulan-main-block'
|
}
|
}
|
}
|
},
|
watch: {
|
currentNodeKey(id) {
|
console.log(id)
|
if(id) {
|
this.$refs.tree.setCurrentKey(id)
|
}else {
|
this.$refs.tree.setCurrentKey(null);
|
}
|
}
|
},
|
methods: {
|
async callBack(id) {
|
console.log(id,'id===')
|
this.currentLivingId = id
|
await this.getTreeList()
|
await this.setIdArr()
|
// this.$refs.tree.setCurrentKey(id)
|
// this.idArr = [pid]
|
},
|
setIdArr() { //数据刷新以后原本展开的节点被收缩的问题
|
let tree = this.$refs["tree"]
|
let allNodes = tree.store._getAllNodes()
|
console.log(allNodes)
|
let defaultExpandedNodes = [];
|
allNodes.forEach(node => {
|
node.expanded && defaultExpandedNodes.push(node.data.id);
|
});
|
this.idArr = defaultExpandedNodes;
|
},
|
getTreeList() {
|
getTree(this.addDetailForm.lawName).then(response => {
|
this.treeData = response.data.data
|
let currentLivingId = this.currentLivingId ? this.currentLivingId : ''
|
this.$nextTick(() => {
|
this.$refs.tree.setCurrentKey(currentLivingId) //选中高亮
|
})
|
})
|
},
|
modifyData(event,data,node,root) { //右键修改节点内容
|
console.log(data,'data')
|
console.log(node,'node')
|
this.modifyLawVisable = true
|
this.$nextTick(() => {
|
this.$refs.modifyLawForm.init(data)
|
})
|
|
},
|
getNodeData(data,node,root) { // 点击当前节点
|
// console.log('node-------',node)
|
// console.log('root-------',root)
|
// if (!this.formEdit) {
|
// this.formStatus = 'update'
|
// }
|
// getObj(data.id).then(response => {
|
// this.lawForm = response.data.data
|
// })
|
// this.currentId = data.id
|
this.currentNodeKey = data.id;
|
this.checkTitleCol = false //法律标题颜色置空
|
this.addDetailForm.type = data.type
|
this.addDetailForm.pid = data.id
|
if(this.addDetailForm.type == 0) { //type 0编 1章 2节 3条
|
this.isBianDisable = true
|
this.iszhangisable = false
|
this.isJieDisable = false
|
this.isTiaoDisable = false
|
}else if(this.addDetailForm.type == 1) {
|
this.isBianDisable = true
|
this.iszhangisable = true
|
this.isJieDisable = false
|
this.isTiaoDisable = false
|
}else if(this.addDetailForm.type == 2) {
|
this.isBianDisable = true
|
this.iszhangisable = true
|
this.isJieDisable = true
|
this.isTiaoDisable = false
|
}else if(this.addDetailForm.type == 3) {
|
this.isBianDisable = true
|
this.iszhangisable = true
|
this.isJieDisable = true
|
this.isTiaoDisable = true
|
}
|
|
},
|
bianHandleClick() { //创建编
|
for(let i=0; i< this.treeData.length; i++) {
|
if(i == 0) {
|
if(this.treeData[i].type == 1 || this.treeData[i].type == 2) { //有编的话 不能直接添加章，需要再改编下面添加章
|
this.$message.error('已有一级目录')
|
return
|
}
|
}
|
}
|
this.addDetailForm.type = 0
|
addDetail(this.addDetailForm).then(res => {
|
this.$message.success(res.data.msg)
|
this.addDetailForm.content = ''
|
this.getTreeList()
|
setTimeout(() => {
|
this.currentNodeKey = res.data.data
|
this.$refs.tree.setCurrentKey(res.data.data)
|
},500)
|
this.idArr.push(res.data.data)
|
|
})
|
},
|
zhangHandleClick() { //创建章
|
for(let i=0; i< this.treeData.length; i++) {
|
if(i == 0) {
|
if(this.treeData[i].pid == 0 && this.treeData[i].type == 0 && this.addDetailForm.pid == 0) { //有编的话 不能直接添加章，需要再改编下面添加章
|
this.$message.error('请选择上级目录')
|
return
|
}
|
}
|
}
|
|
this.addDetailForm.type = 1
|
addDetail(this.addDetailForm).then(res => {
|
this.$message.success(res.data.msg)
|
this.addDetailForm.content = ''
|
this.getTreeList()
|
setTimeout(() => {
|
this.currentNodeKey = res.data.data
|
this.$refs.tree.setCurrentKey(res.data.data)
|
},500)
|
this.idArr.push(res.data.data)
|
console.log('this.$refs.tree---',this.$refs.tree)
|
console.log(' this.currentNodeKey---', this.currentNodeKey)
|
|
})
|
},
|
jieHandleClick() { //创建节
|
for(let i=0; i< this.treeData.length; i++) {
|
if(i == 0) {
|
if(this.treeData[i].pid == 0 && (this.treeData[i].type == 0 || this.treeData[i].type == 1) && this.addDetailForm.pid == 0) { //有编的话 不能直接添加章，需要再改编下面添加章
|
this.$message.error('请选择上级目录')
|
return
|
}
|
}
|
}
|
this.addDetailForm.type = 2
|
addDetail(this.addDetailForm).then(res => {
|
this.$message.success(res.data.msg)
|
this.addDetailForm.content = ''
|
this.getTreeList()
|
setTimeout(() => {
|
this.currentNodeKey = res.data.data
|
this.$refs.tree.setCurrentKey(res.data.data)
|
},500)
|
this.idArr.push(res.data.data)
|
})
|
},
|
TiaoHandleClick() { //创建条
|
for(let i=0; i< this.treeData.length; i++) {
|
if(i == 0) {
|
if(this.treeData[i].pid == 0 && (this.treeData[i].type == 0 || this.treeData[i].type == 1 || this.treeData[i].type == 2) && this.addDetailForm.pid == 0) { //有编的话 不能直接添加章，需要再改编下面添加章
|
this.$message.error('请选择上级目录')
|
return
|
}
|
}
|
}
|
this.addDetailForm.type = 3
|
addDetail(this.addDetailForm).then(res => {
|
this.$message.success(res.data.msg)
|
this.addDetailForm.tiaoContent = ''
|
this.getTreeList()
|
})
|
},
|
resetTreeClick() { //重置tree信息
|
this.addDetailForm.pid = 0
|
this.addDetailForm.type = ''
|
console.log('this.addDetailForm---',this.addDetailForm)
|
this.isBianDisable = false
|
this.iszhangisable = false
|
this.isJieDisable = false
|
this.isTiaoDisable = false
|
this.checkTitleCol = true // 法律标题名字添加颜色
|
this.getTreeList()
|
},
|
// handlerAdd() { //创建节
|
// this.resetForm()
|
// this.formStatus = 'create'
|
// this.formEdit = false //条目input可编辑
|
// },
|
resetForm() { //重置
|
this.lawForm = {
|
parentId : this.currentId
|
}
|
}
|
},
|
created() {
|
if(this.$route.query){
|
this.addDetailForm.lawName = this.$route.query.lawName
|
this.place = this.$route.query.place
|
this.effectiveTime = this.$route.query.effectiveTime
|
// this.addDetailForm.pid = Number(this.$route.query.id)
|
// console.log(this.addDetailForm.pid,'pid=======')
|
}
|
this.getTreeList()
|
console.log(this.$route.query)
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.editLaw-tree-box .el-tree{
|
background-color: transparent;
|
}
|
.editLaw-main-box .el-tree-node__label{
|
white-space: nowrap;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
}
|
.editLaw-main-box{
|
.el-col{
|
height: 100%;
|
}
|
}
|
</style>
|
<style scoped lang="scss">
|
h1,h2,h3,h4,h5{
|
font-weight: normal;
|
font-size: 12px;
|
}
|
.editLawTitle{
|
font-size: 16px;
|
padding:20px;
|
cursor: pointer;
|
}
|
.titleCol{
|
color:#409eff
|
}
|
.editLaw-tree-box{
|
background-color: #eff3fb;
|
padding:20px;
|
box-sizing: border-box;
|
min-height: 400px;
|
max-height: 100%;
|
overflow-y: auto;
|
}
|
.filter-container{
|
margin-bottom: 10px;
|
}
|
.editor-form-box{
|
background-color: #eff3fb;
|
min-height: 400px;
|
padding:20px 30px;
|
box-sizing: border-box;
|
}
|
.yulanqu-box{
|
padding:20px 40px;
|
box-sizing: border-box;
|
box-shadow: 0 0 5px rgba(172,189,221,0.6);
|
min-height: 400px;
|
max-height: 752px;
|
margin-top: 40px;
|
overflow-y: auto;
|
}
|
.yulansmall{
|
text-align: center;
|
}
|
.yulan-biaoti{
|
text-align: center;
|
font-size: 24px;
|
font-weight: 700;
|
}
|
.zhixing-time{
|
text-align: right;
|
color: #999999;
|
}
|
.bian-title{
|
color: #333333;
|
font-size: 16px;
|
margin-top: 20px;
|
font-weight: 700;
|
text-align: center;
|
}
|
.zhang-title{
|
color: #333333;
|
font-size: 14px;
|
margin-top: 20px;
|
text-align: center
|
}
|
.jie-title{
|
color: #666666;
|
font-size: 14px;
|
margin-top: 20px;
|
text-align: center
|
}
|
.yulan-main-block{
|
margin-top: 20px;
|
font-size: 14px;
|
line-height: 1.5;
|
color: #888888;
|
text-indent:28px;
|
}
|
.editor-title{
|
font-size: 16px;
|
font-weight: 700;
|
text-align: center;
|
}
|
.caozuoqu-main{
|
margin-top: 20px;
|
}
|
.caozuo-btns{
|
margin:20px 0;
|
}
|
.tiaoBTn{
|
display: flex;
|
justify-content: center;
|
margin-top: 20px;
|
}
|
.editLaw-main-box{
|
height: 77vh;
|
}
|
</style>
|
