|
|
@@ -0,0 +1,393 @@ |
|
|
|
<template> |
|
|
|
<div class="box-center"> |
|
|
|
<div class="center"> |
|
|
|
|
|
|
|
<div style="display: flex;"> |
|
|
|
<div style="font-weight: 400;font-size: 20px"> |
|
|
|
系统默认节点 <span style="font-size: 16px">(提示:拖拽同级类可以排序)</span> |
|
|
|
</div> |
|
|
|
<div style="height: 30px;margin-left: 100px;"> |
|
|
|
<el-button style="" size="mini" type="primary" @click.stop="addBigNode">添加大类</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="margin-top: 16px;"> |
|
|
|
<el-tree ref="tree" :data="datalist" node-key="id" default-expand-all |
|
|
|
:allow-drop="allowDrop" @node-drop="Peerdrag" draggable> |
|
|
|
<span slot-scope="{ node, data }"> |
|
|
|
<span>{{ node.label }}</span> |
|
|
|
<span v-if="node.level==1"> |
|
|
|
<el-button style="color:red; margin-left: 20px;" type="text" size="mini" |
|
|
|
@click.stop="() => append(node,data)">添加二级</el-button> |
|
|
|
<el-button type="text" size="mini" @click.stop="() => remove(node,data)"> 删除 </el-button> |
|
|
|
<el-button type="text" size="mini" @click.stop="() => ddeditor(node,data)"> 编辑 </el-button> |
|
|
|
</span> |
|
|
|
|
|
|
|
<span v-if="node.level==2"> |
|
|
|
<el-button type="text" size="mini" style=" margin-left: 20px;" |
|
|
|
@click.stop="() => append1(node,data)"> 添加三级 </el-button> |
|
|
|
<el-button type="text" size="mini" @click.stop="() => remove(node,data)"> 删除 </el-button> |
|
|
|
<el-button type="text" size="mini" @click.stop="() => ddeditor(node,data)"> 编辑 </el-button> |
|
|
|
</span> |
|
|
|
<span v-if="node.level==3"> |
|
|
|
<el-button style=" margin-left: 20px;" type="text" size="mini" @click.stop="() => remove(node,data)"> 删除 </el-button> |
|
|
|
<el-button type="text" size="mini" @click.stop="() => ddeditor(node,data)"> 编辑 </el-button> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</el-tree> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- 删除确认弹框 --> |
|
|
|
<el-dialog title="提示" :visible.sync="dialogDelete" width="30%"> |
|
|
|
<span>确定删除该条内容吗</span> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="dialogDelete = false">取 消</el-button> |
|
|
|
<el-button type="primary" @click="checkDelete">确 定</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<!-- 新增弹框 --> |
|
|
|
<el-dialog title="新增大类" :visible.sync="dialogShow"> |
|
|
|
<el-form :model="addForm" label-position="left" label-width="80px"> |
|
|
|
<el-row :gutter="10"> |
|
|
|
<el-col :span="10"> |
|
|
|
<el-form-item label="一级大类名称:" v-if="level==0" :label-width="formLabelWidth"> |
|
|
|
<el-input v-model="addForm.name" autocomplete="off"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="二级小类名称:" v-if="level==1" :label-width="formLabelWidth"> |
|
|
|
<el-input v-model="addForm.name" autocomplete="off"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="三级小类名称:" v-if="level==2" :label-width="formLabelWidth"> |
|
|
|
<el-input v-model="addForm.name" autocomplete="off"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="dialogShow = false">取 消</el-button> |
|
|
|
<el-button type="primary" @click="onSubmit">确 定</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<!--?编辑弹框?--> |
|
|
|
<el-dialog title="编辑" :visible.sync="isshowage"> |
|
|
|
<div style="display: flex;align-items: center;height: 40px;"> |
|
|
|
<div style="margin-left: 160px;">类名:</div> |
|
|
|
<div> |
|
|
|
<input v-model="frosasd.name" style="width: 280px;" type="text"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="display: flex;justify-content: center;"> |
|
|
|
<button style="width: 100px;height: 40px;" @click="submicll()">取消</button> |
|
|
|
<button style="width: 100px;height: 40px;margin-left: 60px;" @click="submiadd()">提交</button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
datalist: [], |
|
|
|
drag: false, |
|
|
|
activeNames: ['1'], |
|
|
|
dialogShow: false, // 大类新增 |
|
|
|
addShow: false, // 小类新增 |
|
|
|
dialogDelete: false, //删除提示弹框 |
|
|
|
formLabelWidth: '120px', |
|
|
|
addItem: null, // 当前添加小类的项 |
|
|
|
addForm: { |
|
|
|
name: '', |
|
|
|
house: '', |
|
|
|
company: '' |
|
|
|
}, |
|
|
|
childDelete: null, |
|
|
|
level: 1, //操作节点的层级 |
|
|
|
pid:0, |
|
|
|
deleteId: null, // 要删除的表单节点的ID |
|
|
|
isshowage:false, |
|
|
|
frosasd:{ |
|
|
|
name: '', |
|
|
|
id:'' |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.templategetMarketingTree() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
templategetMarketingTree(){ |
|
|
|
this.$api.http.templategetMarketingTree({}).then((res) => { |
|
|
|
console.log(res); |
|
|
|
let data = res.data; |
|
|
|
data = JSON.stringify(data).replace(/name/g, "label"); |
|
|
|
data = JSON.parse(data); |
|
|
|
this.datalist = data; |
|
|
|
}) |
|
|
|
}, |
|
|
|
//编辑 |
|
|
|
ddeditor(node,data){ |
|
|
|
this.frosasd.name=data.label; |
|
|
|
this.frosasd.id=data.id; |
|
|
|
this.isshowage=true; |
|
|
|
}, |
|
|
|
submicll(){ |
|
|
|
this.isshowage=false; |
|
|
|
}, |
|
|
|
//编辑提交 |
|
|
|
submiadd(){ |
|
|
|
var that=this; |
|
|
|
this.$api.http.templategeupdate({ |
|
|
|
name: that.frosasd.name, |
|
|
|
id:that.frosasd.id |
|
|
|
}).then((res) => { |
|
|
|
that.datalist.forEach((item,index)=>{ |
|
|
|
if(item.id==that.frosasd.id){ |
|
|
|
that.datalist[index].label=that.frosasd.name; |
|
|
|
that.isshowage=false; |
|
|
|
that.$message({ |
|
|
|
message: '修改成功', |
|
|
|
type: 'success' |
|
|
|
}); |
|
|
|
return |
|
|
|
}else{ |
|
|
|
item.children.forEach((asd,indexesd)=>{ |
|
|
|
if(asd.id==that.frosasd.id){ |
|
|
|
that.datalist[index].children[indexesd].label=that.frosasd.name; |
|
|
|
that.isshowage=false; |
|
|
|
that.$message({ |
|
|
|
message: '修改成功', |
|
|
|
type: 'success' |
|
|
|
}); |
|
|
|
return |
|
|
|
}else{ |
|
|
|
asd.children.forEach((zxc,indexzxc)=>{ |
|
|
|
if(zxc.id==that.frosasd.id){ |
|
|
|
that.datalist[index].children[indexesd].children[indexzxc].label=that.frosasd.name; |
|
|
|
that.isshowage=false; |
|
|
|
that.$message({ |
|
|
|
message: '修改成功', |
|
|
|
type: 'success' |
|
|
|
}); |
|
|
|
return |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
//添加大类 |
|
|
|
addBigNode() { |
|
|
|
this.level=0; |
|
|
|
this.addForm.name = ''; |
|
|
|
this.dialogShow = true; |
|
|
|
}, |
|
|
|
// 添加二级小类节点入口 |
|
|
|
append(node, data) { |
|
|
|
this.level=1; |
|
|
|
this.addForm.name = ''; |
|
|
|
this.pid = data.id; |
|
|
|
this.dialogShow = true |
|
|
|
}, |
|
|
|
// 添加三级小类节点入口 |
|
|
|
append1(node, data) { |
|
|
|
this.level=2; |
|
|
|
this.addForm.name = ''; |
|
|
|
this.pid = data.id |
|
|
|
this.dialogShow = true |
|
|
|
}, |
|
|
|
// 大类保存 |
|
|
|
onSubmit() { |
|
|
|
if (this.addForm.name != "") { |
|
|
|
this.dialogShow = false |
|
|
|
this.addNode() |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
message: '内容不能为空', |
|
|
|
type: 'warning' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
}, |
|
|
|
// 新增的节点保存 |
|
|
|
addNode() { |
|
|
|
this.$api.http.templategeadd({ |
|
|
|
pid: this.pid, |
|
|
|
name: this.addForm.name, |
|
|
|
sign:0 |
|
|
|
}).then((res) => { |
|
|
|
if (this.level == 0) { // 大类 |
|
|
|
let newNode = { |
|
|
|
id: res.data, |
|
|
|
sign: 1, |
|
|
|
pid:0, |
|
|
|
sort: this.datalist.length + 1, |
|
|
|
label: this.addForm.name, |
|
|
|
fraction: '', |
|
|
|
children: [] |
|
|
|
} |
|
|
|
this.datalist.push(newNode); |
|
|
|
} else if(this.level == 1) { |
|
|
|
// 二级 |
|
|
|
let newChild = { |
|
|
|
id: res.data, |
|
|
|
pid:this.pid, |
|
|
|
sign: 1, |
|
|
|
fraction: '', |
|
|
|
sort: null, |
|
|
|
label: this.addForm.name, |
|
|
|
children: [] |
|
|
|
}; |
|
|
|
this.datalist.forEach((item,index)=>{ |
|
|
|
if(item.id==this.pid){ |
|
|
|
item.children.push(newChild) |
|
|
|
} |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
let newChilds = { |
|
|
|
id: res.data, |
|
|
|
sign: 1, |
|
|
|
fraction: '', |
|
|
|
pid:this.pid, |
|
|
|
sort: null, |
|
|
|
label: this.addForm.name |
|
|
|
}; |
|
|
|
this.datalist.forEach((item,index)=>{ |
|
|
|
item.children.forEach((ite,inde)=>{ |
|
|
|
if(ite.id==this.pid){ |
|
|
|
ite.children.push(newChilds) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
// 删除标签 |
|
|
|
remove(node, data) { |
|
|
|
this.deleteId = data.id |
|
|
|
this.dialogDelete = true; |
|
|
|
}, |
|
|
|
// 删除自定义的节点 |
|
|
|
checkDelete() { |
|
|
|
this.$api.http.templategedel({ |
|
|
|
id: this.deleteId |
|
|
|
}).then((res) => { |
|
|
|
this.datalist.forEach((item,index)=>{ |
|
|
|
if(item.id==this.deleteId){ |
|
|
|
this.datalist.splice(index,1) |
|
|
|
}else{ |
|
|
|
item.children.forEach((ite,inde)=>{ |
|
|
|
if(ite.id==this.deleteId){ |
|
|
|
this.datalist[index].children.splice(inde,1) |
|
|
|
}else{ |
|
|
|
ite.children.forEach((it,ine)=>{ |
|
|
|
if(it.id==this.deleteId){ |
|
|
|
this.datalist[index].children[inde].children.splice(ine,1) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.dialogDelete = false; |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//同级节点才可以拖拽 |
|
|
|
allowDrop(draggingNode, dropNode, type) { |
|
|
|
if (draggingNode.level === dropNode.level) { |
|
|
|
if (draggingNode.parent.id === dropNode.parent.id) { |
|
|
|
// 向上拖拽 || 向下拖拽 |
|
|
|
return type === "prev" || type === "next"; |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 不同级进行处理 |
|
|
|
return false; |
|
|
|
} |
|
|
|
}, |
|
|
|
//拖拽排序 |
|
|
|
Peerdrag(before) { |
|
|
|
let arr = []; |
|
|
|
|
|
|
|
this.datalist.forEach((item, index) => { |
|
|
|
if (before.data.pid == item.pid) { |
|
|
|
arr.push(item) |
|
|
|
} else { |
|
|
|
if (item.children.length == 0) { |
|
|
|
return |
|
|
|
} else { |
|
|
|
|
|
|
|
item.children.forEach((ite, inde) => { |
|
|
|
if (before.data.pid == ite.pid) { |
|
|
|
arr.push(ite) |
|
|
|
} else { |
|
|
|
if (ite.children.length == 0) { |
|
|
|
return |
|
|
|
} else { |
|
|
|
|
|
|
|
ite.children.forEach((it, ins) => { |
|
|
|
if (before.data.pid == it.pid) { |
|
|
|
arr.push(it) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
arr.forEach((item, index) => { |
|
|
|
item.sort = index |
|
|
|
}) |
|
|
|
|
|
|
|
let params = { |
|
|
|
list: [] |
|
|
|
} |
|
|
|
params.list = arr.map(item => { |
|
|
|
return { |
|
|
|
id: item.id, |
|
|
|
sort: item.sort |
|
|
|
} |
|
|
|
}) |
|
|
|
this.dragSort(params.list) |
|
|
|
}, |
|
|
|
dragSort(list){ |
|
|
|
this.$api.http.templategeupdateSort({children:list}).then((res) => { |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped="scoped" lang="scss" > |
|
|
|
.box-center { |
|
|
|
width: 100%; |
|
|
|
padding: 15px; |
|
|
|
padding-top: 0px; |
|
|
|
min-width: 1200px; |
|
|
|
padding-bottom: 100px; |
|
|
|
} |
|
|
|
.center{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
padding: 15px 15px; |
|
|
|
list-style: none; |
|
|
|
background: #ffffff; |
|
|
|
min-height: 80vh; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |