|
|
|
@@ -1,27 +1,332 @@ |
|
|
|
<!-- |
|
|
|
* @Date: 2021-11-30 09:28:55 |
|
|
|
* @LastEditors: JinxuChen |
|
|
|
* @LastEditTime: 2021-11-30 16:47:31 |
|
|
|
* @LastEditTime: 2021-12-03 15:22:29 |
|
|
|
* @FilePath: \GpsCardAdmin\src\views\off-limits-manage\off-limits-main\off-limits-type\index.vue |
|
|
|
* @description: |
|
|
|
--> |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
禁用类别 |
|
|
|
<div class="custom-tree-container"> |
|
|
|
|
|
|
|
<div class="block"> |
|
|
|
|
|
|
|
<el-tree |
|
|
|
:data="data" |
|
|
|
node-key="id" |
|
|
|
:default-expand-all="false" |
|
|
|
:render-after-expand="true" |
|
|
|
:expand-on-click-node="false"> |
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
|
|
<span>{{ node.label }} ( {{ data.no }} )</span><span></span> |
|
|
|
|
|
|
|
<div class="Operation"> |
|
|
|
<span> |
|
|
|
<el-button v-if=" data.children" |
|
|
|
type="text" |
|
|
|
size="mini" |
|
|
|
@click="() => append(node,data)"> |
|
|
|
增加类别 |
|
|
|
</el-button> |
|
|
|
<el-button v-if="!data.children" |
|
|
|
type="text" |
|
|
|
size="mini" |
|
|
|
@click="() => modify(node, data)"> |
|
|
|
修改 |
|
|
|
</el-button> |
|
|
|
<el-button v-if="!data.children" |
|
|
|
type="text" |
|
|
|
size="mini" |
|
|
|
@click="() => remove(node, data)"> |
|
|
|
删除 |
|
|
|
</el-button> |
|
|
|
</span></div> |
|
|
|
</span> |
|
|
|
</el-tree> |
|
|
|
<el-row> |
|
|
|
|
|
|
|
<el-col :span="8"><div class="grid-content bg-purple-light add-btn" > |
|
|
|
<el-button type="text" @click="dialogVisible = true"> 增加场景</el-button> |
|
|
|
</div></el-col> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
title="新增场景" |
|
|
|
:visible.sync="dialogVisible" |
|
|
|
width="50%" |
|
|
|
> |
|
|
|
<el-form :model="currentAddScenes" ref="currentAddScenes"> |
|
|
|
<el-form-item label="场景" |
|
|
|
prop="inputNew" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '场景不能为空'} |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-input v-model="currentAddScenes.inputNew" placeholder="请输入场景"></el-input> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
|
|
|
|
<el-button type="primary" @click="submitScenesForm('currentAddScenes')">提交</el-button> |
|
|
|
<el-button @click="resetForm('currentAddScenes')">重置</el-button> |
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
</el-form> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<el-dialog |
|
|
|
:title="titleTypeAddorModify" |
|
|
|
:visible.sync="dialogVisibleType" |
|
|
|
width="50%" |
|
|
|
> |
|
|
|
<el-form :model="currentAddType" ref="currentAddType"> |
|
|
|
<el-form-item label="类别" |
|
|
|
prop="typeLabel" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '类别不能为空'} |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-input v-model="currentAddType.typeLabel" placeholder="请输入类别"></el-input> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
|
|
|
|
<el-button type="primary" @click="submitForm('currentAddType')">提交</el-button> |
|
|
|
<el-button @click="resetForm('currentAddType')">重置</el-button> |
|
|
|
<el-button @click="dialogVisibleType = false">取 消</el-button> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-form> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
|
|
<el-dialog |
|
|
|
title="修改类别" |
|
|
|
:visible.sync="dialogVisibleM" |
|
|
|
width="50%" |
|
|
|
> |
|
|
|
<el-input v-model="inputModify" placeholder="请输入类别"></el-input> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="dialogVisibleM = false">取 消</el-button> |
|
|
|
<el-button type="primary" @click="() => save()">确 定</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
let id = 1000; |
|
|
|
export default { |
|
|
|
name:'', |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
name: '' |
|
|
|
} |
|
|
|
} |
|
|
|
const data = [{ |
|
|
|
id: 1, |
|
|
|
no:101, |
|
|
|
label: '场景1', |
|
|
|
children: [{ |
|
|
|
id: 4, |
|
|
|
no:101001, |
|
|
|
label: '类别 1-1' |
|
|
|
}] |
|
|
|
}, { |
|
|
|
id: 2, |
|
|
|
no:102, |
|
|
|
label: '场景 2', |
|
|
|
children: [{ |
|
|
|
id: 5, |
|
|
|
no:102001, |
|
|
|
label: '类别 2-1' |
|
|
|
}, { |
|
|
|
id: 6, |
|
|
|
no:102002, |
|
|
|
label: '类别 2-2' |
|
|
|
}] |
|
|
|
} |
|
|
|
]; |
|
|
|
return { |
|
|
|
titleTypeAddorModify:"新增类别", |
|
|
|
inputNew: '', |
|
|
|
inputType:'', |
|
|
|
inputModify: '', |
|
|
|
parentNode:{}, |
|
|
|
dialogVisible: false, |
|
|
|
dialogVisibleType:false, |
|
|
|
dialogVisibleM: false, |
|
|
|
currentData:{}, |
|
|
|
currentParentData:{}, |
|
|
|
currentAddScenes:{ |
|
|
|
inputNew:"", |
|
|
|
}, |
|
|
|
currentAddType:{ |
|
|
|
typeLabel:"" |
|
|
|
}, |
|
|
|
|
|
|
|
data: JSON.parse(JSON.stringify(data)) |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
submitScenesForm(formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
//alert('submit!'); |
|
|
|
this.addScenes(); |
|
|
|
|
|
|
|
} else { |
|
|
|
console.log('error submit!!'); |
|
|
|
return false; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
submitForm(formName) { |
|
|
|
this.$refs[formName].validate((valid) => { |
|
|
|
if (valid) { |
|
|
|
//alert('submit!'); |
|
|
|
if(this.titleTypeAddorModify=="增加类别") |
|
|
|
{ |
|
|
|
this.addType(); |
|
|
|
} |
|
|
|
else |
|
|
|
{ |
|
|
|
this.save(); |
|
|
|
} |
|
|
|
|
|
|
|
} else { |
|
|
|
console.log('error submit!!'); |
|
|
|
return false; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
resetForm(formName) { |
|
|
|
this.$refs[formName].resetFields(); |
|
|
|
}, |
|
|
|
append(node,data) { |
|
|
|
const parent = node; |
|
|
|
this.currentParentData=parent.data; |
|
|
|
this.dialogVisibleType=true; |
|
|
|
this.titleTypeAddorModify="增加类别"; |
|
|
|
|
|
|
|
if(this.$refs['currentAddType']){ |
|
|
|
this.resetForm('currentAddType'); |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
addScenes(){ |
|
|
|
this.dialogVisible=false; |
|
|
|
let no=this.data[this.data.length-1].no+1; |
|
|
|
let id=this.data[this.data.length-1].id+1; |
|
|
|
|
|
|
|
this.data.push( { |
|
|
|
id: id, |
|
|
|
no:no, |
|
|
|
label: this.currentAddScenes.inputNew, |
|
|
|
children: [] |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
addType(){ |
|
|
|
|
|
|
|
this.dialogVisibleType=false; |
|
|
|
|
|
|
|
//模拟保存 |
|
|
|
this.data.forEach(i=>{ |
|
|
|
|
|
|
|
if(i.id==this.currentParentData.id) |
|
|
|
{ |
|
|
|
|
|
|
|
let no,id; |
|
|
|
if(i.children && i.children.length>0){ |
|
|
|
no=i.children[i.children.length-1].no+1; |
|
|
|
id=i.children[i.children.length-1].id+1; |
|
|
|
} |
|
|
|
else{ |
|
|
|
no=i.no+'001'; |
|
|
|
id=i.id+'001'; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
i.children.push({ |
|
|
|
id:id, |
|
|
|
label: this.currentAddType.typeLabel, |
|
|
|
no:no |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
//this.inputType |
|
|
|
}, |
|
|
|
remove(node, data) { |
|
|
|
const parent = node.parent; |
|
|
|
const children = parent.data.children || parent.data; |
|
|
|
const index = children.findIndex(d => d.id === data.id); |
|
|
|
children.splice(index, 1); |
|
|
|
}, |
|
|
|
modify(node,data){ |
|
|
|
this.titleTypeAddorModify="修改类别"; |
|
|
|
this.dialogVisibleType=true; |
|
|
|
this.currentData=data; |
|
|
|
//this.dialogVisibleM=true; |
|
|
|
//this.inputModify=data.label; |
|
|
|
this.currentAddType.typeLabel=data.label; |
|
|
|
}, |
|
|
|
save(){ |
|
|
|
|
|
|
|
//模拟保存： |
|
|
|
this.dialogVisibleType = false |
|
|
|
this.data.forEach(element => { |
|
|
|
if(element.children) |
|
|
|
{ |
|
|
|
element.children.forEach(i=>{ |
|
|
|
if(i.id===this.currentData.id) |
|
|
|
{ |
|
|
|
i.label=this.currentAddType.typeLabel; |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
renderContent(h, { node, data, store }) { |
|
|
|
return ( |
|
|
|
<span class="custom-tree-node"> |
|
|
|
<span>{node.label}</span> |
|
|
|
<span> |
|
|
|
<el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button> |
|
|
|
<el-button v-if="node.children.len==0" size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button> |
|
|
|
</span> |
|
|
|
</span>); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style> |
|
|
|
.custom-tree-node { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
font-size: 14px; |
|
|
|
padding-right: 8px; |
|
|
|
} |
|
|
|
.custom-tree-container .block{ |
|
|
|
width: 50%; |
|
|
|
margin-top: 5%; |
|
|
|
margin-left: 5%; |
|
|
|
} |
|
|
|
|
|
|
|
.add-btn { |
|
|
|
margin-left:10%; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
</style> |
