organ.vue

<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>