videoTree.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">{{
            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"
              :before-upload="beforeup"
              multiple
              :data="updata"
              name="file"
              :auto-upload="false"
              :on-success="upsuccess"
              :on-error="uperror"
            >
              <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: `${baseUrl}/api/v1/devconf_fx/devs/${this.devsId}/vfile_vchans`,
      file: [],
      updata: {},
      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) {
      setTimeout(() => {
        this.$refs.tree.filter(val);
      }, 100);
    },
    treeDatas(val) {
      this.treeData[0].childs = val;
    },
    devsId(val) {
      this.devsId = val;
    }
  },
  methods: {
    // 自定义的上传函数
    httpRequest(param) {
      this.file = [];
      // 一般情况下是在这里创建FormData对象，但我们需要上传多个文件，为避免发送多次请求，因此在这里只进行文件的获取，param可以拿到文件上传的所有信息
      this.file.push(param.file);
    },
    beforeup(file) {
      this.updata.name = file.name;
      this.updata.vchan_type = "vfile";
      this.updata.vchan_refid = new Date().getTime();
    },
    upsuccess(req) {
      if (req.ecode == 200) {
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.$parent.$parent.$parent.getVideoTree();
      } else {
        this.$message({
          message: req.enote,
          type: "error"
        });
      }
    },
    uperror(req) {
      console.log("error", req);
    },
    handleNodeClick(data) {
      this.$emit("clickHandle", data, "video");
      // this.$parent.$parent.getVideoTable(data,'video')
    },
    nodeAddClick(node, data) {
      this.addVisible = true;
    },
    save() {
      this.$refs.upload.submit(); // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.vchan_name.indexOf(value) !== -1;
    }
  }
};
</script>

<style></style>