cameraTree.vue

<template>
	<div>
		<el-tree
		  class="filter-tree"
		  accordion
		  :data="treeData"
		  :props='defaultProps'
		  @node-click="handleNodeClick"
		  :expand-on-click-node="false"
		  :filter-node-method="filterNode"
		  ref="tree">
		  <span class="custom-tree-node" slot-scope="{ node, data }">
		      <span>
		          <span class="tree-label" v-if="data.org_name||data.org_name==''">{{ data.org_name=="" ? '未命名' : data.org_name}}</span>
				  <span class="tree-label" v-else-if="!data.org_name">{{ data.vchan_name=="" ? '未命名' : data.vchan_name}}</span>
		      </span>
		      <span class="tree-btn"  v-if="data.org_name||data.org_name==''">
		          <i class="el-icon-plus" @click.stop="nodeAddClick(node,data)"></i>
		          <i class="el-icon-edit" @click.stop="nodeEditClick(node,data)" v-if="data.org_type!='root'"></i>
		          <i class="el-icon-delete" @click.stop="nodeDelClick(node,data)" v-if="data.org_type!='root'"></i>
		      </span>
		  </span>
		</el-tree>
		<el-dialog
		  title="添加"
		  :visible.sync="addVisible"
		  width="450px">
		  <div>
			  <el-form label-position="left" label-width="120px" :model="formData">
			    <el-form-item label="添加目标类型">
					<el-select v-model="formData.targetType" placeholder="请选择" :popper-append-to-body=false>
					  <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in targetOpt"> </el-option>
					 </el-select>
			    </el-form-item>
				<div v-if="formData.targetType=='org'">
					<el-form-item label="组织编号">
					  <el-input v-model="formData.code"></el-input>
					</el-form-item>
					<el-form-item label="组织名称">
					  <el-input v-model="formData.name"></el-input>
					</el-form-item>
				</div>
				<div v-else-if="formData.targetType=='address'">
					<el-form-item label="地点编号">
					  <el-input v-model="formData.code"></el-input>
					</el-form-item>
					<el-form-item label="地点名称">
					  <el-input v-model="formData.name"></el-input>
					</el-form-item>
				</div>
			  </el-form>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addVisible=false">取 消</el-button>
		    <el-button type="primary" @click="save">确 定</el-button>
		  </span>
		</el-dialog>
		<!-- 编辑dialog -->
		<el-dialog
		  title="修改"
		  :visible.sync="editVisible"
		  width="450px">
		  <div>
			  <el-form label-position="left" label-width="120px" :model="editForm">
				<div v-if="editForm.targetType=='org'">
					<el-form-item label="组织编号">
					  <el-input v-model="editForm.code" disabled></el-input>
					</el-form-item>
					<el-form-item label="组织名称">
					  <el-input v-model="editForm.name"></el-input>
					</el-form-item>
				</div>
				<div v-else-if="editForm.targetType=='address'">
					<el-form-item label="地点编号">
					  <el-input v-model="editForm.code" disabled></el-input>
					</el-form-item>
					<el-form-item label="地点名称">
					  <el-input v-model="editForm.name"></el-input>
					</el-form-item>
				</div>
			  </el-form>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editVisible=false">取 消</el-button>
		    <el-button type="primary" @click="editFinish">确 定</el-button>
		  </span>
		</el-dialog>
		<addCamera ref="addCamera"></addCamera>
	</div>
</template>

<script>
	import addCamera  from './cameraDialog'
	export default{
		data(){
			return{
				formData:{
					targetType:'org'
				},
				editForm:{
					targetType:'',
					name:'',
					code:''
				},
				addVideoParam:{
					
				},
				treeData: [
                    {
                        unid: '0',
                        org_pid: '0',
                        org_name: '手动添加相机资源',
                        org_type: 'root',
                        childs: []
                    }
                ],
				currentNodeId:'',
				defaultProps:{
				  children: "childs",
				  disabled: "disabled",
				  label: "org_name"
				},
				addVisible:false,
				editVisible:false,
				targetOpt:[],
			}
		},
		components:{
			addCamera
		},
		props:{
			filterText:{
				type:String,
				default:''
			},
			treeDatas:{
				type:Array,
			    defalut:[]
			},
		},
		watch:{
			filterText(val) {
			   this.$refs.tree.filter(val);
			 },
			 treeDatas(val){
				 this.treeData[0].childs=val;
			 }
		},
		methods:{
			handleNodeClick(data){
				this.$emit('clickHandle',data,'camera');
			},
			nodeDelClick(node,data){
				 this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					let cate_unid = this.getCustomCate('组织', 'residence');
					this.$api.resource.getCode({
						limit:9999
					},cate_unid).then(res=>{
						let editObj=[];
						editObj=res.list_data.filter(item => item.code==data.org_code);
						this.$api.resource.delCode({},cate_unid,editObj[0].unid).then(res=>{
							
						})
						this.$api.resource.delOrg({},data.unid).then(res=>{
							if(!res.enote){
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.$parent.$parent.getCameraTree();
							}
						})
					})
				 
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			},
			nodeEditClick(node,data){
				this.editForm.targetType=data.org_type;
				this.editForm.code=data.org_code;
				this.editForm.name=data.org_name;
				this.editVisible=true;
			},
			editFinish(){
				let cate_unid = this.getCustomCate('组织', 'residence');
				this.$api.resource.getCode({
					limit:9999
				},cate_unid).then(res=>{
					let editObj=[];
					editObj=res.list_data.filter(item => item.code==this.editForm.code);
					this.$api.resource.editCamera({
						name:this.editForm.name,
						code:this.editForm.code
					},cate_unid,editObj[0].unid).then(data=>{
						if(res.ecode) {
							this.$message({
								type: 'error',
								message: res.enote
							})
						} else {
							this.editVisible=false;
							this.$parent.$parent.getCameraTree();
						}
					})
				})
			},
			nodeAddClick(node,data){
				if(data.org_type == 'address'){
					//添加视频
					this.$refs.addCamera.initDialog(node,'add',this.devsId)
				}else{
					//添加组织关系
					this.currentNodeId=data.unid;
					this.formData={
						targetType:'org',
						name:'',
						code:''
					}
					if(data.org_type === "root") {
					    this.targetOpt = [{
					        label: '组织',
					        value: 'org'
					    }];
					} else if(data.org_type === "org") {
					    this.targetOpt = [{
					        label: '组织',
					        value: 'org'
					    },{
					        label: '地点',
					        value: 'address'
					    }];
					} else {
					    this.targetOpt = [{
					        label: '地点',
					        value: 'address'
					    }];
					}
					this.addVisible=true;
				}
				
			},
			getCustomCate(name, cate) {
			    let localKey = name + '-' + cate;
			    return window.localStorage.getItem(localKey);
			},
			save(){
				let cate_unid = this.getCustomCate('组织', 'residence');
				// console.log('添加节点分类unid:', cate_unid);
				if(cate_unid) {
					this.$api.resource.addCode({
						code: this.formData.code,
						name: this.formData.name
					},cate_unid).then(res=>{
						if(res.ecode) {
							this.$message({
								type: 'error',
								message: res.enote
							})
						} else {
							this.orgServ();    // org service
						}
					})
				}
			},
			orgServ() {
				this.$api.resource.addNode({
			            org_pid: this.currentNodeId,
			            org_type: this.formData.targetType,
			            org_code: this.formData.code,
			            is_leaf: false
				}).then(res=>{
					if(res.ecode) {
					    this.$message({
					        type: 'error',
					        message: res.enote
					    })
					} else {
					    this.$message({
					        type: 'success',
					        message: '添加成功!'
					    })
					    this.addVisible = false;
					   this.$parent.$parent.getCameraTree();
					}
				})
			
			},
			filterNode(value, data) {
			       if (!value) return true;
			       return data.org_name.indexOf(value) !== -1;
			     },
		}
	}
</script>

<style>
</style>