elementUI Tree 树形控件 动态加载数据&&进行操作后局部刷新树结构——结合codemirror
//el-tree<el-tree :data="list" :props="props" :load="loadNode" lazy @node-click="handleBucketClick"></el-tree> //codemirror <textarea ref="code" class="codesql public_text" v-model="code"></textarea>
<!-- import Vue before Element --><script src="/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="/element-ui/lib/index.js"></script><style type=text/css> /* hover*/.el-tree-node__content:hover,.el-upload-list__item:hover {background-color: #e8f2ff;color: rgb(96, 98, 102);} /* 当前选中高亮 */.el-tree-node:focus>.el-tree-node__content {background-color: #1e9fff;color: #fff;}.is-expanded .is-current>.el-tree-node__content {background-color: #1e9fff;color: #fff;}</style>
//scriptnew Vue({el: '#app',data: function () {return {code: '', //codemirror值editor: '',//codemirrorcodeType: '',//代码类型list: [],//树结构--数组props: {label: 'name',//指定节点标签为节点对象的某个属性值children: 'zones',//指定子树为节点对象的某个属性值isLeaf: 'leaf',//指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效},prev_path: '',// 预览路径curr_clickData: {},//当前点击数据curr_node: {},//当前点击节点curr_file: '',//当期那编辑器内的文件}},methods: {//当点击的是最末级节点的时候，获取此节点的id赋值给列表对象的属性，再调用load方法来实现过滤查询的功能。handleBucketClick: function (data, node) {console.log('点击节点', data, node, this.list);//dir:定义的是否是文件夹类型（DIR：文件夹，FILE：文件）if (!data.dir) {this.getTreeData(node, "FILE", data.pathName, "",); // 这里返回的是子节点childens集合 this.codeType = data.id.split('.')[data.id.split('.').length - 1];//判断当前代码文件是什么类型this.curr_file = data.pathName;this.prev_path = data.pathName;// 预览this.curr_clickData = data;//当前点击数据this.curr_node = node;//当前点击数据}},//loadNode(node, resolve) {// console.log('loadNode', node.level);// 初始状态0---第一次触发if (node.level === 0) {this.getTreeData('L0', "DIR", "", "", resolve); // 这里返回的格式为 [{...}] } else {if (!node.data.dir) {// 不是根节点return resolve([]);//返回[]停止转圈} else {//如果是根节点 if (node.level > 0) {setTimeout(() => {this.getTreeData(node, "DIR", node.data.pathName, "", resolve); // 这里返回的是子节点childens集合}, 200);}}}},// 初始getTreeData: function (node, opt, path, content, resolve) {var that = this;// console.log(node); var loadIcon1 = layer.load(2);var d = {"opt": opt,"path": path,"content": content};$.ajax({type: 'POST',url: '/FileEdit',data: JSON.stringify(d),contentType: "application/json; utf-8",timeout: 10000,success: function (data1) {// console.log(data1);layer.close(loadIcon1);var res = $.parseJSON(data1);// console.log(res);if (res.rt == 0) {if (opt === 'DIR') {//第一级if (node === 'L0') {var arr1 = [];var arr2 = [];for (var i = 0; i < res.data.length; i++) {//根据是否文件夹拼接数组：目的文件夹排在上面；文件排在下面（美观）；没有这个需求可以不分开拼接，直接pushif (res.data[i].dir) {arr1.push({'name': res.data[i].fileName,//文件名'label': res.data[i].fileName,//文件名'id': res.data[i].pathName,'pathName': res.data[i].pathName,//路径// 'level': 0,//等级'dir': res.data[i].dir,//是否目录'read': res.data[i].read,//是否可读'children': [],leaf: false,});} else {arr2.push({'name': res.data[i].fileName,//文件名'title': res.data[i].fileName,//文件名'spread': false,//默认展开'id': res.data[i].pathName,'pathName': res.data[i].pathName,//路径// 'level': 0,//等级'dir': res.data[i].dir,//是否目录'read': res.data[i].read, //是否可读'children': [],leaf: true, //TRUE：叶子结点（没有子节点）});}}that.list = (that.list.concat(arr1)).concat(arr2); return resolve(that.list);} else {//递归查找到当前元素--插入childrenvar result = null;// 再去查找当前元素的子元素插入for (let obj of that.list) {result = that.dfs(obj, node.data.id); //调用函数查找if (result) {break}}// console.log(result); var arr1 = [];var arr2 = [];for (var i = 0; i < res.data.length; i++) {if (res.data[i].dir) {arr1.push({'name': res.data[i].fileName,//文件名'label': res.data[i].fileName,//文件名'id': res.data[i].pathName,'pathName': res.data[i].pathName,//路径// 'level': 0,//等级'dir': res.data[i].dir,//是否目录'read': res.data[i].read,//是否可读'children': [],leaf: false,});} else {arr2.push({'name': res.data[i].fileName,//文件名'title': res.data[i].fileName,//文件名'spread': false,//默认展开'id': res.data[i].pathName,'pathName': res.data[i].pathName,//路径// 'level': 0,//等级'dir': res.data[i].dir,//是否目录'read': res.data[i].read, //是否可读'children': [],leaf: true, //TRUE：叶子结点（没有子节点）});}}result.children = (result.children.concat(arr1)).concat(arr2);return resolve(result.children); } }if (opt === 'FILE') {//如果是文件类型，直接赋值给编辑器that.editor.setValue(unescape(decodeURI(res.data)));}} else if (res.rt == -1) {//错误信息layer.open({title: '错误信息',icon: 2,content: data.msg});}},error: function (xhr, type) {layer.close(loadIcon1);layer.msg('错误', {icon: 0, skin: 'error_msg', time: 3000 });// success_msg; error_msg;warn_msg;}});},// 动态操作--时获取数据（去掉了resolve（不知道是干什么的，不加有问题，））getTreeData1: function (node, opt, path, content) {var that = this; var loadIcon1 = layer.load(2);var d = {"opt": opt,"path": path,"content": content};$.ajax({type: 'POST',url: '/FileEdit',data: JSON.stringify(d),contentType: "application/json; utf-8",timeout: 10000,success: function (data1) {// console.log(data1);layer.close(loadIcon1);var res = $.parseJSON(data1);// console.log(res);if (res.rt == 0) {if (opt === 'DIR') {if (node === 'L0') {that.list = [];//清空list数组：因为操作第一级数据之后需要重新获取var arr1 = [];var arr2 = [];for (var i = 0; i < res.data.length; i++) {if (res.data[i].dir) {arr1.push({'name': res.data[i].fileName,//文件名'label': res.data[i].fileName,//文件名'id': res.data[i].pathName,'pathName': res.data[i].pathName,//路径// 'level': 0,//等级'dir': res.data[i].dir,//是否目录'read': res.data[i].read,//是否可读'children': [],leaf: false,});} else {arr2.push({'name': res.data[i].fileName,//文件名'title': res.data[i].fileName,//文件名'spread': false,//默认展开'id': res.data[i].pathName,'pathName': res.data[i].pathName,//路径// 'level': 0,//等级'dir': res.data[i].dir,//是否目录'read': res.data[i].read, //是否可读'children': [],leaf: true, //TRUE：叶子结点（没有子节点）});}}that.list = (that.list.concat(arr1)).concat(arr2);return that.list;} else {//这里不能再去递归到当前元素了，因为动态增加和删除后需要给当前元素的父级的children清空，所以去递归父级// var result = null;// // 再去查找当前元素的子元素插入// console.log(that.list);// for (let obj of that.list) {//result = that.dfs(obj, node.data.id); //调用函数查找//if (result) {// break//}// }// console.log(result);//这个是当前文件//调用函数---找出父级（数组：[父级1，父级2，父级3，...当前元素的父级，当前元素];）//清空时给倒数第二个当前元素的父级children清空；var arr = that.searchParent(that.list, node.data.id);// console.log(arr);arr[arr.length - 2].children = []; var arr1 = [];var arr2 = [];for (var i = 0; i < res.data.length; i++) {if (res.data[i].dir) {arr1.push({'name': res.data[i].fileName,//文件名'label': res.data[i].fileName,//文件名'id': res.data[i].pathName,'pathName': res.data[i].pathName,//路径// 'level': 0,//等级'dir': res.data[i].dir,//是否目录'read': res.data[i].read,//是否可读'children': [],leaf: false,});} else {arr2.push({'name': res.data[i].fileName,//文件名'title': res.data[i].fileName,//文件名'spread': false,//默认展开'id': res.data[i].pathName,'pathName': res.data[i].pathName,//路径// 'level': 0,//等级'dir': res.data[i].dir,//是否目录'read': res.data[i].read, //是否可读'children': [],leaf: true, //TRUE：叶子结点（没有子节点）});}}arr[arr.length - 2].children = (arr[arr.length - 2].children.concat(arr1)).concat(arr2);return arr[arr.length - 2].children; } }if (opt === 'FILE') {that.editor.setValue(unescape(decodeURI(res.data)));}} else if (res.rt == -1) {//错误信息layer.open({title: '错误信息',icon: 2,content: data.msg});}},error: function (xhr, type) {layer.close(loadIcon1);layer.msg('错误', {icon: 0, skin: 'error_msg', time: 3000 });// success_msg; error_msg;warn_msg;}});},// 递归查找dfs: function (obj, targetId) {if (obj.id == targetId) {return obj}if (obj.children) {for (let item of obj.children) {let check = this.dfs(item, targetId)if (check) {return check}}}return null},// 递归查找父级searchParent(map, id) {var that = this;let t = []for (let i = 0; i < map.length; i++) {const e = map[i]if (e.id === id) {//若查询到对应的节点，则直接返回t.push(e)break} else if (e.children && e.children.length !== 0) {//判断是否还有子节点，若有对子节点进行循环调用let p = that.searchParent(e.children, id)//若p的长度不为0，则说明子节点在该节点的children内，记录此节点，并终止循环if (p.length !== 0) {p.unshift(e)t = pbreak}}}return t},// 刷新树节点refreshTreeNode: function (node) {let id = node.parent.id; if (id && id !== '0') {// 新增或修改时,更新当前节点node.loaded = falsenode.loadData() // 重新查询当前节点的所有子元素// 删除时, 更新父级节点node.parent.loaded = falsenode.parent.loadData();this.getTreeData1(node, "DIR", node.parent.data.pathName, ""); // 这里返回的是子节点childens集合 } else {// L0节点 this.getTreeData1('L0', "DIR", "", ""); // 这里返回的格式为 [{...}] }},// 新增add() {layer.open({title: '新增',type: 2,// shade: 0.2,// maxmin: true,shadeClose: true,area: ['50%', '80%'],content: './add.html',end: function () {location.reload();}});},// 保存文件saveFile() {if (JSON.stringify(this.curr_clickData) !== "{}") {if (this.curr_clickData.dir) {layer.msg('不能保存文件夹！', {icon: 0, skin: 'warn_msg', time: 3000 });// success_msg; error_msg;warn_msg;} else {var loadIcon1 = layer.load(2);var d = {"opt": 'SAVE_FILE',"path": this.prev_path,"content": encodeURIComponent(this.editor.getValue()),};// console.log(d);$.ajax({type: 'POST',url: '/FileEdit',data: JSON.stringify(d),contentType: "application/json",timeout: 10000,success: function (data1) {// console.log(data1);layer.close(loadIcon1);var res = $.parseJSON(data1);// console.log(res);if (res.rt == 0) {layer.msg('保存成功！', {icon: 0, skin: 'success_msg', time: 3000 });// success_msg; error_msg;warn_msg; } else if (res.rt == -1) {//错误信息layer.open({title: '错误信息',icon: 2,content: data1.msg});}},error: function (xhr, type) {layer.close(loadIcon1);layer.msg('错误', {icon: 0, skin: 'error_msg', time: 3000 });// success_msg; error_msg;warn_msg;}});}}},// 备份backups() {var that = this;// console.log(that.curr_clickData);// console.log(that.curr_node);if (JSON.stringify(this.curr_clickData) !== "{}") {if (this.curr_clickData.dir) {layer.msg('不能备份文件夹！', {icon: 0, skin: 'warn_msg', time: 3000 });// success_msg; error_msg;warn_msg;} else {var loadIcon1 = layer.load(2);var d = {"opt": 'BACKUP_FILE',"path": this.prev_path,};$.ajax({type: 'POST',url: '/FileEdit',data: JSON.stringify(d),contentType: "application/json",timeout: 10000,success: function (data1) {// console.log(data1);layer.close(loadIcon1);var res = $.parseJSON(data1);// console.log(res);if (res.rt == 0) {layer.msg('备份成功！', {icon: 0, skin: 'success_msg', time: 3000 });// success_msg; error_msg;warn_msg;that.refreshTreeNode(that.curr_node) ;//动态操作完成需要刷新节点&&更新数据} else if (res.rt == -1) {//错误信息layer.open({title: '错误信息',icon: 2,content: data1.msg});}},error: function (xhr, type) {layer.close(loadIcon1);layer.msg('错误', {icon: 0, skin: 'error_msg', time: 3000 });// success_msg; error_msg;warn_msg;}});}}},// 删除delFile() {var that = this; if (JSON.stringify(that.curr_clickData) !== "{}") {if (that.curr_clickData.dir) {layer.msg('不能删除文件夹！', {icon: 0, skin: 'warn_msg', time: 3000 });// success_msg; error_msg;warn_msg;} else {layer.confirm('确定要删除文件吗？', function (index) {var loadIcon1 = layer.load(2);var d = {"opt": 'DEL_FILE',"path": that.prev_path,};// console.log(d);$.ajax({type: 'POST',url: '/FileEdit',data: JSON.stringify(d),contentType: "application/json",timeout: 10000,success: function (data1) {// console.log(data1);layer.close(loadIcon1);var res = $.parseJSON(data1);// console.log(res);if (res.rt == 0) {layer.msg('删除成功！', {icon: 0, skin: 'success_msg', time: 3000 });// success_msg; error_msg;warn_msg;that.refreshTreeNode(that.curr_node);//动态操作完成需要刷新节点&&更新数据 } else if (res.rt == -1) {//错误信息layer.open({title: '错误信息',icon: 2,content: data1.msg});}},error: function (xhr, type) {layer.close(loadIcon1);layer.msg('错误', {icon: 0, skin: 'error_msg', time: 3000 });// success_msg; error_msg;warn_msg;}});layer.close(index);})}}},// 预览preview() {if (this.prev_path.indexOf('.html') === -1) {layer.msg('只能预览html页面！', {icon: 0, skin: 'warn_msg', time: 3000 });// success_msg; error_msg;warn_msg;} else {layer.open({title: '预览界面',// title: false, // 不显示标题栏type: 2,scrollbar: true,area: ['98%','98%'],content: '/' + this.prev_path,// end: function () {// location.reload();}});}},},watch: {codeType: {handler(newVal, oldVal) {// console.log(`新的值: ${newVal}`);// console.log(`旧的值: ${oldVal}`);// console.log("------------------");// 更改模式 //根据type 不同，动态设置 文件类型// 修改编辑器的语法配置 if (newVal == 'js') {this.editor.setOption('mode', 'text/javascript');} else if (newVal == 'css' || newVal == 'less' || newVal == 'map') {this.editor.setOption('mode', 'text/css');} else if (newVal == 'html') {this.editor.setOption('mode', 'htmlmixed');}},}},mounted() {this.editor = CodeMirror.fromTextArea(this.$refs.code, {// mode: "text/javascript",// theme: "ambiance",// readOnly: true,lineNumbers: true,mode: "text/html",matchBrackets: true,// theme: "night",styleActiveLine: true,//代码行点击高亮// matchTags: { bothTags: true },//点击标签高亮})}})
