xiaoe/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

节点编辑

Browse Source
This commit is contained in:
赵昱涵
2025-02-12 10:56:29 +08:00
parent e74346c705
commit c8a854d89d
2 changed files with 69 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test-ui/src/api/test/api.js
View File

@@ -77,6 +77,6 @@ export function delGroup(id) {
return request({
url: '/test/group/del',
method: 'post',
params: {id}
data: {id}
})
}

115
test-ui/src/views/test/api/index.vue
View File

@@ -3,11 +3,11 @@
<el-container>
<el-aside>
<el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" style="margin-bottom: 10px"/>
<el-tree class="filter-tree" :data="groupList" node-key="id" highlight-current :expand-on-click-node="false" @node-click="nodeClick" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[0]">
<el-tree class="filter-tree" :data="groupList" @node-click="nodeClick" node-key="id" highlight-current :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[0]">
<span class="custom-tree-node" slot-scope="{ node, data }" v-if="groupState !== 'list' && editId === data.id">
<span>
<el-form ref="form" :model="form" :rules="rules">
<el-input v-model="form.name" placeholder="请输入节点名称" class="custom-tree-node-input" />
<el-input v-model="form.name" placeholder="请输入节点名称" class="custom-tree-node-input"/>
</el-form>
</span>
<span>
@@ -16,14 +16,14 @@
</span>
</span>
<span class="custom-tree-node" slot-scope="{ node, data }" v-else>
<span>{{ node.label }}</span>
<span @click="nodeSelected(data)" style="width: 100%;">{{ node.label }}</span>
<span v-if="data.id === 0">
<el-button type="text" size="mini" @click="nodeAdd(data)"><i class="el-icon-plus"/></el-button>
<el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
</span>
<span class="custom-tree-node-option" v-else>
<el-button type="text" size="mini" @click="nodeAdd(data)"><i class="el-icon-plus"/></el-button>
<el-button type="text" size="mini"><i class="el-icon-edit"/></el-button>
<el-button type="text" size="mini"><i class="el-icon-delete"/></el-button>
<el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
<el-button type="text" size="mini"><i class="el-icon-edit" @click="nodeEdit(node)"/></el-button>
<el-button type="text" size="mini"><i class="el-icon-delete" @click="nodeDelete(node)"/></el-button>
</span>
</span>
</el-tree>
@@ -71,7 +71,7 @@
</template>
<script>
import {listApi, delApi, addApi, updateApi, listGroup, delGroup, addGroup, updateGroup} from "@/api/test/api";
import {listApi, delApi, listGroup, delGroup, addGroup, updateGroup} from "@/api/test/api";
export default {
name: "Api",
@@ -90,7 +90,6 @@ export default {
showSearch: true,
total: 0,
apiList: [],
open: false,
queryParams: {
pageNum: 1,
pageSize: 10,
@@ -130,7 +129,7 @@ export default {
});
this.groupList[0].children = child;
this.queryParams.groupId = res.data[0].id;
this.$refs.tree.setCurrentKey(res.data[0].id);
this.nodeClick();
this.getList();
})
},
@@ -147,7 +146,10 @@ export default {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
nodeClick(data) {
nodeClick() {
this.$refs.tree.setCurrentKey(this.queryParams.groupId);
},
nodeSelected(data) {
if (data.id > 0 && this.queryParams.groupId !== data.id) {
this.queryParams.groupId = data.id;
this.getList();
@@ -155,46 +157,72 @@ export default {
this.$refs.tree.setCurrentKey(this.queryParams.groupId);
}
},
nodeAdd(data) {
nodeAdd(node) {
this.groupState = "add";
const newChild = {id: -1, label: '', children: []};
if (!data.children) {
this.$set(data, 'children', []);
if (!node.data.children) {
this.$set(node.data, 'children', []);
}
data.children.push(newChild);
this.$refs.tree.store.nodesMap[data.id].expanded = true;
node.data.children.push(newChild);
this.$refs.tree.store.nodesMap[node.id].expanded = true;
this.editId = -1;
},
submitNode(node) {
if (node.data.id === -1) {
this.$refs["form"].validate(valid => {
if (valid) {
if (node.data.id === -1) {
addGroup({
parentId: node.parent.data.id,
name: this.form.name,
}).then(res => {
this.$modal.msgSuccess("新增成功");
node.data = {
id: res.data.id,
label: res.data.name,
children: []
}
this.groupState = "list";
});
} else {
}
}
});
nodeEdit(node) {
this.groupState = "edit";
this.editId = node.data.id;
this.form.name = node.label;
},
nodeDelete(node) {
this.$refs.tree.setCurrentKey(this.queryParams.groupId);
if (node.data.children && node.data.children.length > 0) {
this.$message.error("包含子节点，无法删除")
return
}
this.reset()
this.$modal.confirm('是否确认删除？').then(function () {
return delGroup(node.data.id);
}).then(() => {
this.$modal.msgSuccess("删除成功");
this.$refs.tree.remove(node)
})
},
submitNode(node) {
this.$refs["form"].validate(valid => {
if (!valid) return
if (node.data.id === -1) {
addGroup({
parentId: node.parent.data.id,
name: this.form.name,
}).then(res => {
this.$modal.msgSuccess("新增成功");
node.data = {
id: res.data.id,
label: res.data.name,
children: []
}
this.cancelNode();
});
} else {
updateGroup({
id: node.data.id,
name: this.form.name,
}).then(res => {
this.$modal.msgSuccess("修改成功");
node.data.label = this.form.name
this.cancelNode();
});
}
});
},
cancelNode(node) {
if (node.data.id === -1) {
if (node && node.data.id === -1) {
this.$refs.tree.remove(node);
}
this.groupState = "list";
this.editId = null;
this.form = {
name: null,
};
this.resetForm("form");
},
/** 查询接口列表 */
getList() {
@@ -205,13 +233,6 @@ export default {
this.loading = false;
});
},
// 表单重置
reset() {
this.form = {
name: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;