新增treeSelect

3 years ago · a2481ad34f
4 changed files with 86 additions and 74 deletions
--- a/package.json
+++ b/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",
--- a/src/utils/treeSelect.js
+++ b/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;
+}
--- a/src/views/modules/plugins/power/.gitkeep
+++ b/src/views/modules/plugins/power/.gitkeep
--- a/src/views/modules/plugins/power/poweraxis.vue
+++ b/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
-                v-model="queryParams.name"
-                placeholder="请输入部门名称"
-                clearable
-                size="small"
-                />
+                <el-input v-model="queryParams.axisName" 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"
-            row-key="id"
+            v-if="refreshTable" row-key="id"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            >
-            <el-table-column prop="name" label="部门名称" width="260"></el-table-column>
-            <el-table-column prop="sort" label="排序" width="260"></el-table-column>
-            <el-table-column prop="agencyName" label="组织名称" width="260"></el-table-column>
+            <el-table-column prop="name" label="动力主轴"></el-table-column>
+            <el-table-column prop="sort" label="排序" ></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
-                    size="mini"
-                    type="text"
-                    icon="el-icon-edit">
-
-                    修改</el-button>
-                    <el-button
-                    size="mini"
-                    type="text"
-                    icon="el-icon-edit"
-                    @click="del(row)">
-                    删除</el-button>
+                    <el-button size="mini" 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(){
-            const url = '/pli/power/axisStruct/list4Tree'
+        // 获取上级网格党支部
+        async getGridPartyBranchList(){
+            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)
            }