caseEditor/src/view/organization/index.vue

<template>
  <div class="organiza">
    <div class="title">组织架构</div>

    <div class="organiza-body">
      <div class="but">
        <el-button v-pdpath="'add'" type="primary" @click="addHandler">
          新增组织架构
        </el-button>
      </div>
      <div class="tree">
        <div class="treeTile">
          <span>组织架构</span>
          <span style="padding-right: 100px">操作</span>
        </div>
        <div class="treeList">
          <el-tree
            style="width: 100%"
            :props="{ children: 'children', label: 'name' }"
            :data="organTrees"
            node-key="id"
            :current-node-key="user.info.id"
            accordion
            default-expand-all
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ data.name }}</span>
                <div
                  class="butList oper-span"
                  v-if="!topDeptIds.includes(Number(data.id))"
                >
                  <a
                    @click.stop="showOrganizationDetail({ dept: data })"
                    v-pdpath="['view']"
                  >
                    查看
                  </a>
                  <a
                    @click.stop="setHandler(data)"
                    :class="{ disable: user.info.deptId === data.id }"
                    v-pdpath="['edit']"
                  >
                    编辑
                  </a>
                  <a
                    :class="{ disable: user.info.deptId === data.id }"
                    style="color: var(--primaryColor)"
                    @click.stop="delHandler(data.id)"
                    v-pdpath="['del']"
                  >
                    删除
                  </a>
                </div>
              </span>
            </template>
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { user } from "@/store/user";
import { Organization, delOrganization, getOrganizationTree } from "@/store/organization";
import { markRaw, onMounted, ref } from "vue";
import { addOrganization, showOrganizationDetail, editOrganization } from "./quisk";
import { confirm } from "@/helper/message";
import { ElMessage, ElMessageBox } from "element-plus";
import { RouteName, router } from "@/router";
import { SuccessFilled } from "@element-plus/icons-vue";
import { topDeptIds } from "@/constant/appDeptId";

const organTrees = ref<Organization[]>([]);

const addHandler = async () => {
  const data = await addOrganization({});
  if (data) {
    await refresh();
    const config = {
      icon: markRaw(SuccessFilled),
      confirmButtonText: "去创建",
      showClose: true,
      cancelButtonText: "我知道了",
    };
    if (await ElMessageBox.confirm("组织创建成功，快去创建用户吧", "温馨提示", config)) {
      router.push({ name: RouteName.user });
    }
  }
};
const setHandler = async (dept: Organization) => {
  if (await editOrganization({ dept })) {
    await refresh();
    ElMessage.success("操作成功");
  }
};
const delHandler = async (deptId: Organization["id"]) => {
  if (await confirm("确认要删除组织吗？")) {
    await delOrganization(deptId);
    ElMessage.success({ message: "删除成功", type: "success" });
    refresh();
  }
};

const refresh = async () => {
  organTrees.value = await getOrganizationTree("1");
};

onMounted(refresh);
</script>

<style lang="scss" scoped>
.organiza {
  .title {
    height: 56px;
    padding: 0 24px;
    color: #303133;
    font-size: 16px;
    line-height: 56px;
    height: 56px;
    font-weight: 500;
    background-color: #fff;
    border-bottom: 1px solid #e4e7ed;
  }
}

.but {
  padding: 0 16px 16px 16px;
  background-color: #fff;
  text-align: right;
}
.title {
  height: 56px;
  padding: 0 24px;
  color: #303133;
  font-size: 16px;
  line-height: 56px;
  height: 56px;
  font-weight: 500;
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
}
.organiza-body {
  margin-top: 15px;
  background-color: #fff;
  padding: 15px;
  .tree {
    border: 1px solid #ebeef5;
    // margin-top: 24px;
    .treeTile {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ebeef5;
      background-color: #fafafa;
      padding: 12px 20px;
    }
    .treeList {
      max-height: 500px;
      overflow-y: auto;
      display: flex;
      justify-content: space-between;
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        .butList {
          width: 140px;
          a {
            margin: 0 8px;
          }
          .disable {
            color: #bfbfbf !important;
            pointer-events: none;
          }
        }
      }
    }
  }
}
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.camera-from {
  margin: 0 50px;
}
.share-from {
  width: 500px;
  margin: 0 auto;
}
.maker {
  font-weight: 400;
  color: #969799;
  line-height: 20px;
}
.oper-user {
  height: 40px;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
  cursor: pointer;
}
</style>

<style>
.organiza .el-tree-node__content {
  padding: 12px 10px;
  border-bottom: 1px solid #ebeef5;
}
.camera-from .el-select,
.dispatch-file-from .el-select {
  width: 100%;
}

.el-textarea__inner {
  font-family: "Microsoft YaHei";
}
.dispatch-detial .el-form-item__content {
  color: #323233;
}
.dispatch-detial .el-form-item__label {
  color: #646566;
}
</style>