父组件
<template>
<div class="treeBox">
<vxe-table ref="mytable" :data="tableData" style="width: 100%; margin-bottom: 20px" row-id="id"
highlight-current-row border
:tree-config="{ children: 'children', hasChild: 'isParent', lazy: true, loadMethod: load }">
<vxe-column field="name" title="目录名称" sortable width="700" tree-node />
<vxe-column field="date" title="序号" sortable />
<vxe-column title="操作" align="center" header-align="center" width="600">
<template slot-scope="scope">
<el-button plain type="primary" @click="addTree(scope.row)">
添加下级
</el-button>
<el-button type="primary" plain @click="updateTree(scope.row)">
修改
</el-button>
</template>
</vxe-column>
</vxe-table>
<!-- 分页 -->
<div class="row" style="width: 100%; float: left; text-align: center; margin-top: 5px" />
<!-- 弹框 -->
<el-dialog :title="form.treeTitle" :fullscreen="dialogFullscree" :visible.sync="dialogVisible" width="40%"
class="showDialogClass" :close-on-click-modal="false" :before-close="handleClose">
<el-form ref="form" :model="form" label-width="190px">
<el-form-item label="选择目录">
<el-input placeholder="单击此处选择发布目录" style="max-width: 70%" readonly v-model="treeIndexDesc" />
<el-button @click="openDrawer" type="primary" style="margin-left: 5px">
选择目录
</el-button>
<el-input v-show="false" v-model="treeIndex" />
</el-form-item>
<el-form-item :label="form.treeLabel">
<el-input :disabled="false" v-model="form.name" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="onSubmit">
保存
</el-button>
<el-button @click="handleClose">
取消
</el-button>
</span>
</el-dialog>
<Pid ref="Pid" @onChange="handlePid" />
</div>
</template>
<script>
import Pid from '../components/Pid.vue'
export default {
name: `templateName`,
components: { Pid },
data() {
return {
tableData: [],
// 表格数据
dataList: [],
dialogVisible: false,
dialogFullscree: false,
// 表单变量
form: {
treeLabel: ``,
treeTitle: ``,
id: null,
code: ``,
name: ``,
type: ``,
level: 0,
sort: null,
state: ``,
},
addRow: ``,
updateRow: ``,
fileBussinessTypeCode: `111`,
maps: new Map(),
updateSortFlag: false,
subTreeData: [], // 子节点数据
cascadrValue: [],
treeIndex: "",
cascaderList: [],
treeIndexDesc: "",
};
},
created() {
this.getDataList();
this.init();
},
watch: {
},
//方法集合
methods: {
init() {
this.updateSortFlag = true;
},
// 樹的選擇
handlePid(data) {
this.treeIndexDesc = data.name
this.treeIndex = data.id;
},
load({ row }) {
return new Promise((resolve) => {
setTimeout(() => {
const params = {
userId: store.getters.user_id.toString(),
token: store.getters.token.toString(),
userName: store.getters.userName.toString(),
data: {
fileBussinessTypeCode: this.fileBussinessTypeCode,
fileDiretoryId: row.id,
},
};
getLazyTreeList(params).then((data) => {
if (data.result === true) {
// 新增：将数据存储到 maps 属性中
this.maps.set(row.id, { row, children: data.resultdata.data });
resolve(data.resultdata.data);
} else {
this.$message({
type: `warning`,
message: `获取信息出错`,
});
}
});
}, 1000);
});
},
getDataList() {
const params = {
fileDiretoryId: null,
};
getLazyTreeList(params).then((data) => {
if (data.result === true) {
this.tableData = data.resultdata.data;
}
else {
this.$message({
type: `warning`,
message: `获取信息出错`,
});
}
});
},
//点击tree树进行选择
handleNodeClick(data, b, c) {
this.treeIndexDesc = data.name;
this.$refs.tclb.closeDrawer();
},
openDrawer() {
this.$refs.Pid.open()
},
getAllParents(id) {
let list = this.tableData
function getParentTree(id, tree) {
let arr = [];
for (let i = 0; i < tree.length; i++) {
let item = tree[i];
arr = [];
arr.push(item);
if (id == item.id) {
return arr;
} else {
if (item.children && item.children.length > 0) {
arr = arr.concat(getParentTree(id, item.children ? item.children : []));
if (arr.map((item2) => (item2 ? item2.id : "")).includes(id)) {
return arr;
}
}
}
}
}
return getParentTree(id, list)
},
addTree(row) {
this.addRow = row;
this.dialogVisible = true;
this.form.treeTitle = `新增`
this.form.treeLabel = `新增`
this.form.name = ``;
this.cascadrValue = [];
this.treeIndexDesc = ''
this.treeIndex = '';
if (row.ParentId === '0') {
this.cascadrValue = [row.id]
} else {
let arr = this.getAllParents(row.id)
this.cascadrValue = arr.map(e => e.id)
}
},
updateTree(row) {
this.updateRow = row;
this.dialogVisible = true;
this.form.name = row.name;
this.form.treeTitle = `修改`
this.form.treeLabel = `修改`
this.treeIndexDesc = row.name
this.treeIndex = row.pid;
if (row.ParentId === '0') {
this.cascadrValue = [row.id]
} else {
let arr = this.getAllParents(row.ParentId)
this.cascadrValue = arr.map(e => e.id)
}
},
onSubmit() {
const params = {
name: this.form.name,
//父级id
parentId: this.treeIndex ? this.treeIndex : this.addRow.id,
}
if (this.form.treeTitle === `新增`) {
let parentId = this.cascadrValue[this.cascadrValue.length - 1]
parentId = this.treeIndex ? this.treeIndex : this.addRow.id,
add(params).then((data) => {
if (data.result === true) {
this.$message({
type: `success`,
message: `操作成功`,
})
this.dialogVisible = false;
this.getList();//数据重新获取
}
else {
this.$message({
type: `warning`,
message: `操作失败`,
})
}
})
}
else if (this.form.treeTitle === `修改`) {
const param = {
id: this.updateRow.id,
name: this.form.name,
parentId: this.treeIndex ? this.treeIndex : this.updateRow.id,
}
let parentId = this.cascadrValue[this.cascadrValue.length - 1]
parentId = this.treeIndex ? this.treeIndex : this.updateRow.id,
update(param).then((data) => {
if (data.result === true) {
this.$message({
type: `success`,
message: `修改成功`,
})
this.dialogVisible = false;
this.getList();//数据重新获取
}
else {
this.$message({
type: `warning`,
message: `修改失败`,
})
}
})
}
},
handleClose() {
this.dialogVisible = false;
},
},
};
</script>
子组件的弹框抽屉
<template>
<el-drawer title="目录" :visible.sync="drawer" direction="ltr" ref="tclb" width="20%" :before-close="close"
:append-to-body="true">
<el-button style="float:right;margin-right: 10px;" @click="refsh" type="primary" size="medium" plain>刷新</el-button>
<div class="tree-container mt10">
<el-tree :data="treedata" :props="treeProps" :load="loadNode" lazy v-model="checkedNodes"
@node-click="handleNodeClick" />
</div>
<div class="demo-drawer__footer">
<el-button @click="drawer = false">取 消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</el-drawer>
</template>
<script>
import { getLazyTreeList } from "@/api";
export default {
name: 'DiretorySelect',
props: {},
data() {
return {
drawer: false,
curItem: null,
treedata: [],
checkedNodes: [],
treeProps: {
label: `name`,
children: `children`, // 显示子节点的字段名
isLeaf: (node) => !node.isParent && !node.children,
},
}
},
mounted() {
this.curItem = null;
this.getLazyTreeList();
},
methods: {
open() {
this.drawer = true;
},
close() {
this.drawer = false;
this.curItem = null
},
handleConfirm() {
if (!this.curItem) {
this.$message.error('请选择一条数据')
return
}
this.$emit('onChange', { ...this.curItem })
this.close()
},
handleNodeClick(data, b, c) {
this.curItem = data;
},
getLazyTreeList() {
const params = {
fileDiretoryId: null,//默认一开始传""或者null
};
getLazyTreeList(params).then((data) => {
if (data.result === true) {
this.treedata = data.resultdata.data;
const [treeItem] = this.treedata
const items = [];
data.resultdata.data.forEach(function (obj) {
items.push({
label: obj.name,
id: obj.id,
});
});
}
else {
this.$message({
type: `warning`,
message: `获取信息出错`,
});
}
});
},
// 懒加载树
// tree的懒加载数据
loadNode(node, resolve) {
this.isLeaf = node.isLeaf;
if (node.level === 0) {
return resolve(this.treedata);
}
if (node.level > 9999) return resolve([]);
// 请求子节点数据
const params = {
fileDiretoryId: node.data.id,//懒加载接收的id
};
getLazyTreeList(params).then((data) => {
if (data.result === true) {
// 将新获取的数据合并到当前节点的children中
node.childNodes = [...node.childNodes, ...data.resultdata.data];
// 返回updatedChildren用于更新节点的children字段
const updatedChildren = node.childNodes.map((child) => {
child.checked =
this.checkable &&
this.checkedNodes.some((node) => node.id === child.id);
return child;
});
resolve(updatedChildren);
}
else {
this.$message({
type: `warning`,
message: `获取信息出错`,
});
}
});
},
refsh() {
this.$nextTick(() => {
this.treedata = [];
})
this.getLazyTreeList();
},
},
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
