hshansha
5 months ago
commit
e89e08d312
@ -0,0 +1,92 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tree-node">
|
||||||
|
<div class="node-content">
|
||||||
|
<el-input v-model="nodeData.hz_name" placeholder="请输入标题名称" style="width: 250px;" v-if="isRoot"/>
|
||||||
|
<el-input v-model="nodeData.title" placeholder="请输入标题名称" style="width: 250px;" v-if="nodeData.type===0"/>
|
||||||
|
|
||||||
|
<el-input placeholder="请选择引用考核任务" readonly v-if="nodeData.type===1" style="width: 250px;"
|
||||||
|
v-model="nodeData.pcTitle" @focus.stop="changeKaohe">
|
||||||
|
<i slot="suffix" class="el-input__icon el-icon-search" style="color: #1890ff; font-weight: bolder"></i>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
<!--评分占比-->
|
||||||
|
<el-input-number style="margin-left: 5px;" v-model="nodeData.zb" :precision="2" :step="0.01" :min="0.01"
|
||||||
|
:max="1" v-if="nodeData.type||nodeData.type===0"></el-input-number>
|
||||||
|
|
||||||
|
<el-button type="primary" icon="el-icon-plus" size="mini" @click.stop="addChild(0)"
|
||||||
|
v-if="isRoot||nodeData.type===0">子级标题</el-button>
|
||||||
|
<el-button type="primary" icon="el-icon-plus" size="mini" @click.stop="addChild(1)"
|
||||||
|
v-if="isRoot||nodeData.type===0">子级引用</el-button>
|
||||||
|
<el-button type="danger" icon="el-icon-delete" size="mini" @click.stop="removeNode" v-if="!isRoot"></el-button>
|
||||||
|
</div>
|
||||||
|
<div class="children" v-if="nodeData.data && nodeData.data.length">
|
||||||
|
<recursive-tree
|
||||||
|
v-for="(child, index) in nodeData.data"
|
||||||
|
:key="index"
|
||||||
|
:node-data="child"
|
||||||
|
@add-child="onAddChild"
|
||||||
|
@remove-node="onRemoveNode"
|
||||||
|
@change-kaohe="onChangeKaohe"
|
||||||
|
></recursive-tree>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'RecursiveTree',
|
||||||
|
props: {
|
||||||
|
nodeData: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isRoot: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选择引用考核任务
|
||||||
|
changeKaohe(){
|
||||||
|
this.$emit('change-kaohe', this.nodeData)
|
||||||
|
},
|
||||||
|
// 选择引用考核任务
|
||||||
|
onChangeKaohe(parentNode){
|
||||||
|
this.$emit('change-kaohe', parentNode)
|
||||||
|
},
|
||||||
|
addChild(type) {
|
||||||
|
this.$emit('add-child', this.nodeData, type)
|
||||||
|
},
|
||||||
|
removeNode() {
|
||||||
|
this.$emit('remove-node', this.nodeData)
|
||||||
|
},
|
||||||
|
onAddChild(parentNode, type) {
|
||||||
|
this.$emit('add-child', parentNode, type)
|
||||||
|
},
|
||||||
|
onRemoveNode(nodeToRemove) {
|
||||||
|
this.$emit('remove-node', nodeToRemove)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.tree-node {
|
||||||
|
margin-left: 35px;
|
||||||
|
padding: 5px 0px 5px 5px;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.node-content {
|
||||||
|
padding: 5px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-radio{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue