新增treeSelect

package.json

@@ -16,6 +16,7 @@
     "et:list": "gulp themes"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "^0.4.0",
     "@tinymce/tinymce-vue": "^4.0.4",
     "axios": "^0.19.0",
     "babel-eslint": "^8.0.1",

src/utils/treeSelect.js

@@ -0,0 +1,50 @@
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+ export function handleTree(data, id, parentId, children) {
+	let config = {
+		id: id || 'id',
+		parentId: parentId || 'parentId',
+		childrenList: children || 'children'
+	};
+
+	var childrenListMap = {};
+	var nodeIds = {};
+	var tree = [];
+
+	for (let d of data) {
+		let parentId = d[config.parentId];
+		if (childrenListMap[parentId] == null) {
+			childrenListMap[parentId] = [];
+		}
+		nodeIds[d[config.id]] = d;
+		childrenListMap[parentId].push(d);
+	}
+
+	for (let d of data) {
+		let parentId = d[config.parentId];
+		if (nodeIds[parentId] == null) {
+			tree.push(d);
+		}
+	}
+
+	for (let t of tree) {
+		adaptToChildrenList(t);
+	}
+
+	function adaptToChildrenList(o) {
+		if (childrenListMap[o[config.id]] !== null) {
+			o[config.childrenList] = childrenListMap[o[config.id]];
+		}
+		if (o[config.childrenList]) {
+			for (let c of o[config.childrenList]) {
+				adaptToChildrenList(c);
+			}
+		}
+	}
+	return tree;
+}

src/views/modules/plugins/power/poweraxis.vue

@@ -2,15 +2,10 @@
     <div>
         <el-form :model="queryParams" ref="queryForm" :inline="true">
             <el-form-item label="部门名称" prop="deptName">
-                <el-input
+                <el-input v-model="queryParams.axisName" placeholder="请输入部门名称" clearable size="small" />
-                v-model="queryParams.name"
-                placeholder="请输入部门名称"
-                clearable
-                size="small"
-                />
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="queryByName"
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="initTreeData"
                 >搜索</el-button
                 >
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button>
@@ -33,29 +28,21 @@
         <!-- 列表表格 -->
         <el-table
             height="500px"
-            :data="treeList"
+            :data="powerAxisTreeList"
             :default-expand-all="isExpandAll"
-            v-if="refreshTable"
+            v-if="refreshTable" row-key="id"
-            row-key="id"
             :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
             >
-            <el-table-column prop="name" label="部门名称" width="260"></el-table-column>
+            <el-table-column prop="name" label="动力主轴"></el-table-column>
-            <el-table-column prop="sort" label="排序" width="260"></el-table-column>
+            <el-table-column prop="sort" label="排序" ></el-table-column>
-            <el-table-column prop="agencyName" label="组织名称" width="260"></el-table-column>
+            <el-table-column prop="categoryCode" label="类别" ></el-table-column>
+            <el-table-column prop="leaderName" label="负责人"></el-table-column>
+            <el-table-column prop="leaderMobile" label="联系方式" ></el-table-column>
+            <el-table-column prop="sort" label="排序"></el-table-column>
             <el-table-column label="操作" align="center">
                 <template slot-scope="row">
-                    <el-button
+                    <el-button size="mini" type="text" icon="el-icon-edit">修改</el-button>
-                    size="mini"
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click="del(row)">删除</el-button>
-                    type="text"
-                    icon="el-icon-edit">
-
-                    修改</el-button>
-                    <el-button
-                    size="mini"
-                    type="text"
-                    icon="el-icon-edit"
-                    @click="del(row)">
-                    删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -134,7 +121,11 @@
 
 <script>
 import { requestPost } from "@/js/dai/request";
+import { handleTree } from "@/utils/treeSelect";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
+    components: { Treeselect },
     data(){
         return{
             // 删除标签
@@ -144,7 +135,12 @@ export default {
             agencyId:'',
             // 查询参数
             queryParams:{
-                name:''
+                // 组织ID
+                agencyId: '',
+                // 动力主轴节点名称
+                axisName: '',
+                // 动力主轴节点负责人
+                leaderName: ''
             },
             // 新增表单
             addOrgForm:{
@@ -158,7 +154,7 @@ export default {
                 sort:''
             },
             // 树状结构列表
-            treeList:[],
+            powerAxisTreeList: [],
             // 查询动力主轴机构标签
             listSimple:[],
             // 绑定组织列表
@@ -179,44 +175,14 @@ export default {
     },
     created(){
         // this.getTreeList()
-        this.getList4Tree()
+        this.initTreeData()
     },
     mounted(){
         this.customerId = localStorage.getItem('customerId')
         this.agencyId = localStorage.getItem('agencyId')
     },
     methods:{
-        // 查询按钮操作
-        async queryByName(){
-            const url = '/pli/power/axisStruct/queryDeptByName'
-
-            let params = {
-                name:this.queryParams.name
-            }
-
-            const { data, code, msg } = await requestPost(url,params)
-
-            if(code === 0){
-                this.treeList = data
-            } else {
-                this.$message.error(msg)
-            }
-        },
         
-        // 获取树状列表数据
-        // async getTreeList(){
-        //     const url = '/pli/power/axisStruct/getTreeList'
-
-        //     let params = {}
-
-        //     const { data,code,msg } = await requestPost(url)
-
-        //     if(code === 0){
-        //         this.treeList = data
-        //     } else {
-        //         this.$message.error(msg)
-        //     }
-        // },
         // 确定新增按钮
         async submitAddNewOrg(){
             const url = '/pli/power/axisStruct/addOrg'
@@ -237,7 +203,6 @@ export default {
                 this.$message.success("新增成功")
                 this.addDialogBox = false
                 this.addOrgFormRest()
-                this.getList4Tree()
             } else {
                 this.$message.error(msg)
             }
@@ -273,29 +238,26 @@ export default {
                 this.$message.error(msg)
             }
         },
-        // 获取组织树
+        // 获取上级网格党支部
-        async getList4Tree(){
+        async getGridPartyBranchList(){
-            const url = '/pli/power/axisStruct/list4Tree'
+            const url = '/pli/power/axisStruct/GridPartyBranchList'
 
             let params = {}
 
-            const { data, code, msg } = await requestPost(url,params)
+        },
+        // 初始化动力主轴组织树
+        async initTreeData () {
+            const url = '/pli/power/axisStruct/list4Tree'
+
+            const { data, code, msg } = await requestPost(url, this.queryParams)
 
             if (code === 0) {
-                this.treeList = data
+                this.powerAxisTreeList = handleTree(data, 'id', 'pid');
             } else {
                 this.$message.error(msg)
                 
             }
         },
-        // 获取上级网格党支部
-        async getGridPartyBranchList(){
-            const url = '/pli/power/axisStruct/GridPartyBranchList'
-
-            let params = {}
-
-            
-        },
 
         // 新增按钮
         addNewOrg(){
@@ -307,7 +269,7 @@ export default {
         /** 重置按钮操作 */
         resetQuery() {
             this.queryParams.name = ''
-            this.getList4Tree()
+            this.initTreeData()
         },
         /** 展开/折叠操作 */
         toggleExpandAll() {
@@ -376,7 +338,6 @@ export default {
             if (code === 0) {
                 this.$message.success("删除成功")
                 this.delWindow = false
-                this.getList4Tree()
             } else {
                 this.$message.error(msg)
             }