<template> <div class="oran-wrapper height100"> <div class="org-tree-container"> <div class="org-tree-box"> <div class="org-tree-box-header">组织结构</div> <div class="org-tree-box-content"> <div class="tree-search party-form"> <el-input placeholder="请输入组织结构名称" v-model="name"> <i slot="suffix" class="el-input__icon el-icon-search" @click="getOrgTree()" > </i> </el-input> <div class="f0" style="display: flex"> <el-tooltip content="新建" placement="top"> <i class="icon-add party-icon-20" @click="handleAdd('add')" /> </el-tooltip> <el-tooltip content="导入" placement="top"> <el-upload action="" :http-request="handleRequest" :show-file-list="false" :before-upload="beforeAvatarUpload" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" > <i class="icon-import party-icon-20" /> </el-upload> </el-tooltip> </div> </div> <div class="tree-content"> <el-tree class="org-tree" :data="data" :props="defaultProps" @node-click="handleNodeClick" > <div class="custom-tree-node" slot-scope="{ node, data }" :class="'tree-node-level' + data.level" > <i class="icon-org" v-if="data.level === 1"></i> <span>{{ node.label }}</span> </div> </el-tree> </div> </div> </div> </div> <div class="org-detail"> <div class="org-detail-panel-box"> <span class="title">{{ currentInfo.name }}</span> <div class="icon-group"> <i class="icon-edit party-icon-24" @click="handleEdit()"> </i> <i class="icon-del party-icon-24" @click="handleDel()"> </i> </div> </div> <div class="org-detail-panel-box-content"> <div class="page-tip"> <p class="page-tip-title">页面说明:</p> <p class="page-tip-des"> 点击相应的机构名称,可查看该机构的详细信息。可新增机构、删除机构及批量导入机构信息。新增机构中“*”为必填项 </p> </div> <el-form label-position="top"> <el-form-item label="上级机构" class="w100"> <span> {{ currentInfo.parentName || "暂无上级机构" }} </span> </el-form-item> <el-form-item label="下级机构" class="w100"> <span> {{ currentInfo.childrenName || "暂无下级机构" }} </span> </el-form-item> <el-form-item label="地理位置" class="w100"> <span> {{ currentInfo.areaName || "暂无地理位置信息" }} </span> </el-form-item> <el-form-item label="备注信息" class="w100"> <span> {{ currentInfo.remarks || "暂无备注信息" }} </span> </el-form-item> </el-form> </div> <org-add ref="orgAdd" :parentId="currentInfo.id" :treeData="data" @success="getOrgTree()" /> <org-edit ref="orgEdit" :treeData="data" :currentInfo="currentInfo" @success="handleSuccessEdit()" /> </div> </div> </template> <script> import { orgAdd, orgEdit } from "./orgDialog"; export default { data() { return { name: "", data: [], defaultProps: { children: "children", label: "name", }, currentId: "", currentInfo: {}, }; }, components: { orgAdd, orgEdit }, mounted() { this.getOrgTree(); }, methods: { handleNodeClick(data) { this.currentId = data.id; this.getInfoById(); }, // 获取机构数详情 getInfoById() { this.$https( { method: "get", url: "organ/getById", authType: this.backToken, }, { id: this.currentId } ) .then((res) => { if (res.status == 200) { if (res.data.resultCode == 200) { if (res.data.data) { this.currentInfo = res.data.data; this.currentInfo.childrenName = this.currentInfo.children .map((v) => { return v.name; }) .join(" 、"); } else { this.currentInfo = {}; } } else { this.currentInfo = {}; } } else { this.currentInfo = {}; } }) .catch((err) => { console.log(res); }); }, // 获取机构树 getOrgTree() { this.$https( { method: "get", url: "organ/getTree", authType: this.backToken, }, { name: this.name } ) .then((res) => { if (res.status == 200) { if (res.data.resultCode == 200) { this.data = res.data.data; this.currentId = this.data[0] ? this.data[0].id : ""; this.getInfoById(); } else { this.data = []; } } else { this.data = []; } }) .catch((err) => { console.log(res); }); }, // 新增 handleAdd() { this.$refs.orgAdd.dialogVisible = true; }, //导入 handleImport() {}, handleEdit() { this.$refs.orgEdit.dialogVisible = true; }, // 删除 handleDel() { let _this = this; this.$confirm("此操作将永久删除, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { _this.delAction(); }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); }, delAction() { this.$https({ method: "delete", url: `organ/delete?id=${this.currentId}`, authType: this.backToken, }) .then((res) => { if (res.status == 200) { if (res.data.resultCode == 200) { this.$message({ type: "success", message: res.data.message, }); this.getOrgTree(); } else { this.$message.error(res.data.message); } } else { this.$message.error(res.data); } }) .catch((err) => { console.log(err); }); }, // 编辑成功 handleSuccessEdit() { this.getOrgTree(); this.getInfoById(); }, beforeAvatarUpload(file) { const isLt5M = file.size / 1024 / 1024 < 5; if (!isLt5M) { this.$message.error("上传文件大小不能超过 5MB!"); } return isLt5M; }, handleRequest(file) { let formData = new FormData(); formData.append("file", file.file); let _this = this; _this .$https( { method: "post", url: "organ/import", authType: this.backToken, }, formData ) .then((res) => { let resData = res.data; if (res.status == 200) { if (resData.resultCode == 200) { _this.$message({ type: "success", message: resData.message, }); _this.getOrgTree(); } else { _this.$message.error(resData.msg || resData.message || ""); } } else { _this.$message.error(resData.msg || resData.message || ""); } }) .catch((err) => { console.log(err); _this.$message.error(err.msg || err.message || ""); }); }, }, }; </script> <style lang="less" scoped> .oran-wrapper { display: flex; .org-tree-container { width: 420px; padding-right: 20px; height: 100%; .org-tree-box { height: 100%; background: @party-white; border: 1px solid @party-white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; .org-tree-box-header { height: 56px; line-height: 56px; background-color: @party-red; text-align: center; font-size: 16px; color: @party-white; } /deep/ .tree-search { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; .el-input__icon { width: 40px; font-size: 20px; color: @party-btn-color; } .icon-import { margin-left: 10px; } } .org-tree-box-content { padding: 20px; height: calc(100% - 56px); .tree-content { height: calc(100% - 60px); overflow-y: auto; } } } } .org-detail { width: calc(100% - 420px); height: 100%; background: @party-white; border: 1px solid @party-white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; .org-detail-panel-box { height: 64px; border-bottom: 1px solid @party-border-color; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; .title { font-size: 20px; font-weight: bold; color: @font-color; } .icon-del { margin-left: 30px; } } .org-detail-panel-box-content { height: calc(100% - 64px); padding: 20px; overflow-y: scroll; .page-tip { width: 648px; height: 72px; background: @party-bg-gray; border-radius: 8px; color: @font-color; display: flex; padding: 16px 20px; margin: 0 auto 40px; .page-tip-title { width: 100px; font-weight: bold; } } .el-form { width: 648px; margin: 0 auto; .w50 { width: calc(50% - 15px); } .w100 { width: 100%; } .el-form-item__content { span { color: @font-color; font-weight: bold; } } } } } } </style>