SmartCommunity/userCenter/src/views/system/organs/index.vue

<template>
    <div class="main">
        <el-container>
            <el-aside width="500px">
                <el-input placeholder="请输入机构名称" class="search-input" v-model="treeSearch"></el-input>
                <div class="organ-wrap">
                    <div class="tree">
                        <el-tree
                            :data="organList"
                            ref="tree1"
                            node-key="id"
                            :props="defaultProps"
                            :highlight-current="highlightCurrent"
                            check-strictly
                            :expand-on-click-node="false"
                            @node-click="treeClick"
                            default-expand-all
                            accordion
                            :filter-node-method="filterNode"
                        >
                            <span class="ellipsis" slot-scope="{ node, data }">
                                {{ node.label }}
                                <img
                                    class="dmp-icon-btn"
                                    title="编辑"
                                    v-if="data.productCategoryId == -1 || (!data.productCategoryId && data.id !== 0)"
                                    @click.stop="editMenu(data)"
                                    src="@assets/img/newImg/icon_bianji.png"
                                    alt=""
                                />
                                <img
                                    class="dmp-icon-btn"
                                    title="删除"
                                    v-if="!data.productCategoryId && data.id !== 0"
                                    @click.stop="deleteMenus(data)"
                                    src="@assets/img/newImg/icon_shanjian.png"
                                    alt=""
                                />
                                <img
                                    class="dmp-icon-btn"
                                    title="添加"
                                    v-if="!data.productCategoryId && (node.level == 1 || node.level == 2) && data.id !== 0"
                                    @click.stop="addOrEdit(data)"
                                    src="@assets/img/newImg/icon_tianjia.png"
                                    alt=""
                                />
                            </span>
                        </el-tree>
                    </div>
                </div>
            </el-aside>
            <el-main>
                <h3>
                    <span v-if="isEdit == 'add'">添加</span>
                    <!-- <span v-else-if="isEdit == 'edit'">编辑-{{ title }}</span> -->
                    <span v-else>{{ title }}</span>
                </h3>
                <rightFrom :menuList="menuList" :formData="rightData" ref="form" :isEdit="isEdit" @getList="getList" />
            </el-main>
        </el-container>
    </div>
</template>

<script>
import list from '@utils/list.js';
import rightFrom from './popups/EditForm.vue';
export const familyTree = (arr1 = [], id) => {
    if (!(arr1 && arr1.length)) return [];
    const temp = [];
    const forFn = (arr, id1) => {
        for (let i = 0; i < arr.length; i += 1) {
            const item = arr[i];
            if (item.id == id1) {
                temp.push(item);
                forFn(arr1, item.parentId);
                break;
            } else if (item.orgs) {
                forFn(item.orgs, id1);
            }
        }
    };
    forFn(arr1, id);
    return temp.reverse();
};
export default {
    mixins: [list],
    components: {
        rightFrom
    },
    data() {
        return {
            organList: [],
            defaultProps: {
                children: 'orgs',
                label: 'orgName'
            },
            treeSearch: '',
            highlightCurrent: true,
            arr: [],
            isEdit: false,
            title: '',
            rightData: {
                id: '',
                orgType: '', //机构类型
                parentOrgId: '', //上级机构
                orgAreaId: '', //所属区域
                orgName: '', //机构名称
                orgState: 1, //状态
                orgLeaderName: '', //负责人
                orgLeaderPhone: '', //手机号
                orgLeaderSex: '', //性别
                orgLeaderEmail: '', //邮箱
                remark: '' //备注
            }
        };
    },
    watch: {
        treeSearch(val) {
            this.$refs.tree1.filter(val);
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            if (data.orgName.indexOf(value) !== -1) return data.orgName;
        },
        addOrEdit(params) {
            let data = JSON.parse(JSON.stringify(params));
            if (params.id == 0) {
                this.$message.error('组织机构不能编辑!');
                return;
            }
            new Promise((resolve, reject) => {
                if (this.isEdit) {
                    this.$msgBox('您编辑的内容尚未保存，是否继续？', ' ')
                        .then(() => {
                            resolve();
                        })
                        .catch(() => {
                            reject();
                        });
                } else {
                    resolve();
                }
            })
                .then(() => {
                    this.isEdit = 'add';
                    const params = JSON.parse(
                        JSON.stringify({
                            id: '',
                            orgType: '', //机构类型
                            parentOrgId: '', //上级机构
                            orgAreaId: '', //所属区域
                            orgName: '', //机构名称
                            orgState: 1, //状态
                            orgLeaderName: '', //负责人
                            orgLeaderPhone: '', //手机号
                            orgLeaderSex: '', //性别
                            orgLeaderEmail: '', //邮箱
                            remark: '' //备注
                        })
                    );
                    this.rightData = params;
                })
                .catch(() => {});
        },
        editMenu(data) {
            new Promise((resolve, reject) => {
                if (this.isEdit) {
                    this.$msgBox('您编辑的内容尚未保存，是否继续？', ' ')
                        .then(() => {
                            resolve();
                        })
                        .catch(() => {
                            reject();
                        });
                } else {
                    resolve();
                }
            })
                .then(() => {
                    this.title = data.orgName;
                    this.fun(data);
                    this.isEdit = 'edit';
                    this.$nextTick(() => {
                        this.$refs.tree1.setCurrentKey(data.id);
                    });
                })
                .catch(() => {});
        },
        deleteMenus(data) {
            const { id, orgName } = data;
            this.treeClick(data);
            this.$msgBox(`刪除机构 "${orgName}"`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.post('/org/deleteAll', [id]).then(({ status, data, msg }) => {
                        if (status === 0 && data) {
                            if (data.length) {
                                this.$message.error('删除失败，请先删除机构下的用户!');
                                return;
                            } else {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.getList();
                            }
                        }
                    });
                })
                .catch(() => {});
        },
        fun(params) {
            this.$refs['form'].$children[0].resetFields();
            const {
                id = '',
                orgType = '', //机构类型
                parentOrgId = '', //上级机构
                orgAreaId = '', //所属区域
                orgName = '', //机构名称
                orgState = 1, //状态
                orgLeaderName = '', //负责人
                orgLeaderPhone = '', //手机号
                orgLeaderSex = '', //性别
                orgLeaderEmail = '', //邮箱
                remark = '' //备注
            } = params;
            Object.assign(this.rightData, {
                id,
                orgType, //机构类型
                parentOrgId, //上级机构
                orgAreaId, //所属区域
                orgName, //机构名称
                orgState, //状态
                orgLeaderName, //负责人
                orgLeaderPhone, //手机号
                orgLeaderSex, //性别
                orgLeaderEmail, //邮箱
                remark //备注
            });
            this.$nextTick(() => {
                this.$refs.tree1.setCurrentKey(this.rightData.id);
            });
        },
        treeClick(params) {
            if (this.rightData.id == params.id) return;
            if (this.isEdit) {
                this.$msgBox('您编辑的内容尚未保存，是否继续？', ' ')
                    .then(() => {
                        this.title = params.orgName;
                        this.isEdit = false;
                        this.fun(params);
                    })
                    .catch(() => {});
                return;
            }
            this.isEdit = false;
            this.fun(params);
            this.title = params.orgName;
        },
        getList() {
            this.$http.postForm('/org/getOrgTree', { orgType: '' }).then(({ status, data, msg }) => {
                if (status === 0 && data) {
                    this.organList = [{ orgs: data, orgName: '组织机构', id: 0 }];
                    this.isEdit = false;
                    this.treeClick(data[0]);
                }
            });
        }
    },
    created() {
        this.getList();
    }
};
</script>

<style lang="scss" scoped>
.main {
    display: flex;
    flex-direction: column;
    height: 100%;
    .el-aside {
        background: white;
        /deep/ .el-tree--highlight-current {
            padding: 0 20px;
            .el-tree-node.is-current > .el-tree-node__content {
                // color: #1fcff5 !important;
                // background: #f8fcff !important;
            }
            .el-tree-node__content {
                margin-bottom: 10px;
            }
        }
    }
    .el-main {
        margin-left: 10px;
        background-color: #fff;
        border-radius: 0 6px 6px 0;
        overflow: hidden;
        padding: 20px;
        h3 {
            padding: 0 20px 20px 0;
        }
    }
    .dmp-icon-btn {
        margin-left: 10px;
        color: #0eaeff;
    }
    .search-input {
        padding: 20px;
    }
}
</style>