videoTree.vue 4.04 KB
<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">{{ data.vchan_name=="" ? '未命名' : data.vchan_name}}</span>
		      </span>
		      <span class="tree-btn" v-if="data.org_type">
		          <i class="el-icon-plus" @click.stop="nodeAddClick(node,data)"></i>
		      </span>
		  </span>
		</el-tree>
		<el-dialog
		  title="添加"
		  :visible.sync="addVisible"
		  width="450px">
		  <div>
			  <el-form label-position="left" label-width="120px">
			    <el-form-item label="添加录像">
					<el-upload
					  ref="upload"
					  action="uploadUrl"
					  :http-request="httpRequest"
					  multiple
					  name="file"
					  :auto-upload="false">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <!-- <div slot="tip" class="el-upload__tip">只能上传视频文件</div> -->
					</el-upload>
			    </el-form-item>
			  </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>
	</div>
</template>

<script>
	import baseUrl from '../../../api/baseUrl'
	export default{
		data(){
			return{
				uploadUrl: '',
				file:[],
				treeData: [
                    {
                        unid: '0',
                        org_pid: '0',
                        vchan_name: '手动添加录像资源',
                        org_type: 'video',
                        childs: []
                    }
                ],
				defaultProps:{
				  children: "childs",
				  disabled: "disabled",
				  label: "vchan_name"
				},
				addVisible:false,
			}
		},
		components:{
		},
		props:{
			filterText:{
				type:String,
				default:''
			},
			treeDatas:{
				type:Array,
			    defalut:[]
			},
			devsId:{
				type:String,
				default:''
			}
		},
		watch:{
			filterText(val) {
			   this.$refs.tree.filter(val);
			 },
			 treeDatas(val){
				 this.treeData[0].childs=val;
			 },
			 devsId(val){
				 this.devsId=val;
			 }
		},
		methods:{
			// 自定义的上传函数
			httpRequest(param) {
				this.file=[];
			// 一般情况下是在这里创建FormData对象,但我们需要上传多个文件,为避免发送多次请求,因此在这里只进行文件的获取,param可以拿到文件上传的所有信息
			  this.file.push(param.file)
			},
			handleNodeClick(data){
				this.$emit('clickHandle',data,'video');
				// this.$parent.$parent.getVideoTable(data,'video')
			},
			nodeAddClick(node,data){
					this.addVisible=true;
			},
			save(){
				this.$refs.upload.submit(); // 这里是执行文件上传的函数,其实也就是获取我们要上传的文件
				// 最重要的就是这段代码
				  var upData = new FormData() // 首先创建FormData对象
				    this.file.forEach(function (file) {
				      upData.append('file', file); // 因为要上传多个文件,所以需要遍历一下才行
					  upData.append('name', file.name);
					  upData.append('vchan_type', 'vfile');
					  upData.append('vchan_refid', new Date().getTime());
				    })
					const loading = this.$loading({
					          lock: true,
					          text: 'Loading',
					          spinner: 'el-icon-loading',
					          background: 'rgba(0, 0, 0, 0.7)'
					        });
				 this.$api.resource.uploadFile(upData,this.devsId).then(res=>{
					 if(res.enote==400){
						  this.$message.error(res.ecode);
					 }else{
						 this.$emit('getTree');
						   this.$message({
							   message: '添加成功',
							   type: 'success'
							 });
						 this.addVisible=false;
						  loading.close();
					 }
				  })
				
			},
			filterNode(value, data) {
			       if (!value) return true;
			       return data.org_name.indexOf(value) !== -1;
			     },
		}
	}
</script>

<style>
</style>