|
@@ -1,11 +1,10 @@
|
|
|
<template>
|
|
|
<!-- 架构主页面 -->
|
|
|
<div class="framework">
|
|
|
-
|
|
|
<el-container>
|
|
|
<el-header>
|
|
|
<div>
|
|
|
- <p style="margin-left: 10px;">产品名称:Header</p>
|
|
|
+ <p style="margin-left: 10px;">产品名称:{{ row.productName }}</p>
|
|
|
</div>
|
|
|
</el-header>
|
|
|
<el-container>
|
|
@@ -16,7 +15,7 @@
|
|
|
<el-button type="primary" size="small" @click="handleAppend">新增分类节点</el-button>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
|
|
|
+ <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :default-expanded-keys="expandedKeys">
|
|
|
<!-- <el-tree ref="tree" :data="treeData" :props="treeProps" :current-node-key="parentId" @node-click="handleNodeClick" node-key="id" :default-checked-keys="expandedKeys" :highlight-current="true" :default-expanded-keys="expandedKeys" :expand-on-click-node="false"> -->
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
<span>{{ node.label }}</span>
|
|
@@ -58,7 +57,7 @@
|
|
|
</el-container>
|
|
|
</el-container>
|
|
|
|
|
|
- <classifyNode ref="classifyNode"></classifyNode>
|
|
|
+ <classifyNode ref="classifyNode" :treeDataPath="treeDataPath"></classifyNode>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -66,6 +65,9 @@
|
|
|
import frameworkTable from './view/table.vue'
|
|
|
import classifyNode from '../dialog/classifyNode.vue';
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ row:Object,
|
|
|
+ },
|
|
|
components: {
|
|
|
frameworkTable,
|
|
|
classifyNode
|
|
@@ -170,10 +172,13 @@ export default {
|
|
|
}
|
|
|
|
|
|
],
|
|
|
+ // 树形组件的显示及其子级
|
|
|
defaultProps: {
|
|
|
children: 'children',
|
|
|
label: 'structureName'
|
|
|
},
|
|
|
+ // 架构路径数组
|
|
|
+ treeDataPath:[],
|
|
|
// 查询架构表格数据字段
|
|
|
queryParams: {
|
|
|
current: 1,
|
|
@@ -209,57 +214,133 @@ export default {
|
|
|
"createTime": "2023-05-11 17:28:06"
|
|
|
}
|
|
|
],
|
|
|
+ expandedKeys:[],
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
+ // 请求数据(左侧tree)
|
|
|
+ // this.getList()
|
|
|
+ // 请求架构路径
|
|
|
+ // this.getPath()
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleNode() {//请求新数据后保持刷新前所点击的节点高亮并展开
|
|
|
+ this.expandedKeys = []
|
|
|
+ if (sessionStorage.getItem('parentId')) {
|
|
|
+ this.parentId = JSON.parse(sessionStorage.getItem('parentId'))
|
|
|
+ this.expandedKeys.push(this.parentId)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.tree.setCurrentKey(this.parentId)
|
|
|
+ this.queryParams.structureId = this.parentId
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
// 子组件传来的值
|
|
|
handleOption({ val, row }) {
|
|
|
console.log(val, row);
|
|
|
switch (val) {
|
|
|
case '0'://编辑
|
|
|
- row.isAppend=2
|
|
|
- this.$refs.classifyNode.open(row)
|
|
|
+ this.$refs.classifyNode.open(row,this.row.productName)
|
|
|
+ break;
|
|
|
+ case '1'://预览图片
|
|
|
+
|
|
|
+ break;
|
|
|
+ case '2'://删除
|
|
|
+ this.deleNode(row)
|
|
|
break;
|
|
|
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
+ // 删除
|
|
|
+ deleNode(row) {
|
|
|
+ this.$confirm('此操作将删除当前节点及其下属节点, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ // 调用接口
|
|
|
+ this.deleData.push(row)
|
|
|
+ let params = [ row.id ]
|
|
|
+ this.$api.deleteEvent(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.getList()
|
|
|
+ this.$message.success('删除该当前分类节点及所属子级分类节点成功!');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.info('已取消删除');
|
|
|
+ });
|
|
|
+ },
|
|
|
// 按钮新增分类节点/树节点新增
|
|
|
handleAppend() {
|
|
|
- this.$refs.classifyNode.open({isAppend:1})
|
|
|
+ // console.log(this.row);
|
|
|
+ this.$refs.classifyNode.open(null,this.row.productName)
|
|
|
},
|
|
|
// 根据产品名称查询产品
|
|
|
handleQuery() {
|
|
|
-
|
|
|
+ this.getList()
|
|
|
},
|
|
|
+ // 树节点上的新增
|
|
|
append(data, node) {
|
|
|
- data.isAppend = 1
|
|
|
- this.$refs.classifyNode.open(data)
|
|
|
+ this.$refs.classifyNode.open(data,this.row.productName)
|
|
|
// console.log(data, node);
|
|
|
},
|
|
|
- // 树节点编辑
|
|
|
+ // 树节点上的编辑
|
|
|
edit(data, node) {
|
|
|
- data.isAppend = 2
|
|
|
- this.$refs.classifyNode.open(data)
|
|
|
+ this.$refs.classifyNode.open(data,this.row.productName)
|
|
|
// console.log(data, node);
|
|
|
},
|
|
|
- // 树节点删除
|
|
|
+ // 树节点上的删除
|
|
|
remove(data, node) {
|
|
|
+ this.deleNode(data)
|
|
|
// console.log(data, node);
|
|
|
},
|
|
|
// 树节点点击事件
|
|
|
handleNodeClick(data, node) {
|
|
|
// console.log(data, node);
|
|
|
if (data.children && data.children.length>0) {
|
|
|
- this.tableData=data.children
|
|
|
+ this.tableData = data.children
|
|
|
+ this.handleCurrent(data.children)
|
|
|
}
|
|
|
},
|
|
|
+ // 请求数据(tree)
|
|
|
+ getList() {
|
|
|
+ let params = {
|
|
|
+ productName:this.productName,//事件名称
|
|
|
+ }
|
|
|
+ this.$api.queryList(params).then(res => {
|
|
|
+ if (res.code == 200 ) {
|
|
|
+ this.treeData = res.data
|
|
|
+ this.tableData = res.data.children
|
|
|
+ this.handleCurrent(res.data.children)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 请求架构路径
|
|
|
+ getPath() {
|
|
|
+ let params = {
|
|
|
+
|
|
|
+ }
|
|
|
+ this.$api.path(params).then(res => {
|
|
|
+ if (res.code == 200 ) {
|
|
|
+ this.treeDataPath = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
// 分页
|
|
|
- handleCurrentChange(val) { },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryParams.current = val;
|
|
|
+ },
|
|
|
+ // 分页处理
|
|
|
+ handleCurrent(nodeData) {
|
|
|
+ this.total=nodeData.length
|
|
|
+ let start = this.queryParams.size * (this.queryParams.current - 1)
|
|
|
+ let end =this.queryParams.size * this.queryParams.current
|
|
|
+ this.tableData = nodeData.slice(start, end)
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|