66

src/views/dialogs-components/global/file-tree/index.js

+import main from './main.vue'
+export default main
\ No newline at end of file

src/views/dialogs-components/global/file-tree/main.vue

+<template>
+  <div>
+    <!-- 浏览 -->
+    <el-dialog
+      title="文件夹浏览器"
+      :visible.sync="fileDialogVisible" 
+      width="650px"
+      top="15%"
+      :close-on-click-modal="false"
+      :before-close="handleClose"
+    v-if="fileDialogVisible">
+      <!-- 文件夹区域start-->
+      <el-tree
+        :data="fileTreeList"
+        lazy
+        :load="loadDataTree"
+        :auto-expand-parent="true"
+        :default-expand-all="false"
+        node-key="id"
+        ref="tree"
+        :props="defaultProps"
+        :highlight-current="true"
+       @node-click="handleNodeClick">
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span style="display: flex; align: center">
+            <div
+              :class="data.iconCls"
+              style="
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                background-repeat: no-repeat;
+                background-position: center;
+              "
+              width=""
+              alt=""
+            ></div>
+            {{ node.label }}
+          </span>
+        </span>
+      </el-tree>
+      <!-- 文件夹区域end -->
+      <!-- <el-select v-model="allValue" style="width: 100%">
+        <el-option v-for="(item,index) in allTreeList" :key="index" :label="item.desc" :value="item.type"></el-option>                       
+      </el-select> -->
+      <span slot="footer" class="dialog-footer" style="display:flex;">
+        <el-select v-model="allValue" style="width: 100%;margin-right:15px;">
+          <el-option v-for="(item,index) in allTreeList" :key="index" :label="item.desc" :value="item.type"></el-option>                       
+        </el-select>
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="confirmChoose()">确 定</el-button>
+      </span>
+    </el-dialog>
+    
+  </div>
+</template>
+
+<script>
+
+import { getFileexplorer,getFilextension } from "@/api/kettle/file";
+
+export default {
+  name: "file-tree",
+  data() {
+    return {
+      allValue:'',
+      allTreeList:[],//所有文件
+      defaultProps: {
+        label: "text",
+        children: "children",
+      },
+      checkedArr:[],
+      fileTreeList:[],//文件树列表
+      fileTreeListResolve:[],//
+      curChooseNode:null,//当前选择的节点
+    }
+      
+  },
+  props: {
+    fileDialogVisible: Boolean,
+    excelForm:Object,
+    formName:String,
+    // listNames: Function, //父传过来的方法
+  },
+  created() {
+    this.getFilextension();//获取所有文件
+  },
+  methods: {
+    // 获取文件树
+    getFileTreeList(path,node){
+       var formData = new FormData();
+        formData.append("path",path);
+        formData.append("extension", 0);
+        formData.append("node", node);
+        getFileexplorer(formData).then((res) => {
+          if (res) {
+            if(path==''){
+              console.log('1111111111111111');
+              this.fileTreeList = res;
+            }else{
+              console.log('222222222222');
+              this.fileTreeListResolve=res
+            }
+         
+          } else {
+            this.$message.error(res.errMsg);
+          }
+        });
+
+    },
+
+    loadDataTree(node, resolve) {
+      console.log("node====", node, "resolve-----------", resolve);
+      if (node.level === 0) {
+        var par='';
+        this.getFileTreeList(par,'xnode-5140');
+        return resolve(this.fileTreeList);
+      } else {
+        var path = node.data.id;
+        var node= node.data.id;;
+        this.getFileTreeList(path,node);
+        resolve(this.fileTreeListResolve);
+  
+      }
+    },
+
+    // 获取所有文件
+    getFilextension(){
+       var formData = new FormData();
+        formData.append("query",'');
+        formData.append("extension", 0);
+        getFilextension(formData).then((res) => {
+          if (res) {
+              this.allTreeList = res;      
+          } else {
+            this.$message.error(res.errMsg);
+          }
+        });
+
+    },
+
+     // 点击选择当前节点
+    handleNodeClick(data,node){
+        console.log('点击当前节点node===',node);
+        console.log('点击当前节点data===',data);
+        // var arr=[{node:node}]
+        this.curChooseNode=node;
+        // this.$emit("getSonValue", this.curChooseNode); //组件要传回父组件的值,关闭弹窗
+   
+    },
+    confirmChoose() { 
+        var curName=this.formName;  
+        this.excelForm[curName]=this.curChooseNode.data.id;
+        this.$emit("excelForm",this.excelForm);
+        this.$emit("update:fileDialogVisible", false);
+      
+    },
+
+ 
+    handleClose() {
+      this.$emit("update:fileDialogVisible", false);
+    },
+  },
+};
+</script>
+<style>
+.type-checked {
+  background-color: #8888ff;
+  color: #fff;
+}
+</style>
\ No newline at end of file