order-ui-pc/src/components/global/organize-tree/main.vue

<template>
  <div class="organize-tree">
    <div v-if="list && list.length > 0">
      <div
        v-for="item in list"
        :key="item.updatetime"
        class="organize-tree-node"
        @click="openChildren(item)"
      >
        <div class="organize-box">
          <span class="label">
            {{ item.name }}
          </span>
          <i class="el-icon-arrow-right"></i>
          <span class="btn-list" @click="(e) => e.stopPropagation()">
            <el-button
              v-if="powers.some((item) => item == '005')"
              type="warning"
              size="mini"
              @click="
                addEdit(
                  $event,
                  item.id,
                  level === 3 ? item.menuid : item.pid,
                  level,
                  false,
                  false,
                  item
                )
              "
            >
              修改
            </el-button>

            <el-button
              v-if="powers.some((item) => item == '004')"
              :type="item.status === '1' ? 'primary' : 'info'"
              size="mini"
              @click="
                status(
                  $event,
                  item.id,
                  level === 3 ? item.menuid : item.pid,
                  level,
                  item.status
                )
              "
            >
              {{ item.status === "1" ? "禁用" : "启用" }}
            </el-button>

            <el-button
              v-if="powers.some((item) => item == '006')"
              type="danger"
              size="mini"
              @click="
                del(
                  $event,
                  item.id,
                  level === 3 ? item.menuid : item.pid,
                  level,
                  item.status
                )
              "
            >
              删除
            </el-button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "organizeTree",
  props: ["list", "level"],
  computed: {
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "organize"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      newlist: "",
      index: 0, // icon 箭头
      iconFont: [
        {
          down: "el-icon-arrow-up",
          up: "el-icon-arrow-down",
        },
        {
          down: "el-icon-folder-status",
          up: "el-icon-folder-add",
        },
        {
          down: "el-icon-minus",
          up: "el-icon-plus",
        },
        {
          down: "iconfont icon-jiantouxia",
          up: "iconfont icon-up",
        },
      ],
    };
  },
  methods: {
    addEdit(e, id, pid, level, isDetail, isAdd, formData) {
      e.stopPropagation();
      this.$emit("addEdit", id, pid, level, isDetail, isAdd, formData);
    },
    openChildren(id) {
      this.$emit("openChildren", id);
    },
    status(e, id, pid, level, status) {
      e.stopPropagation();
      this.$emit("status", id, pid, level, status);
    },
    del(e, id, pid, level, status) {
      e.stopPropagation();
      this.$emit("del", id, pid, level, status);
    },
  },
};
</script>
<style lang="scss" >
.organize-tree {
  margin-left: 18px;
  cursor: pointer;
  .el-button--mini {
    padding: 6px 10px;
    margin-top: 5px;
  }
  .organize-tree-node:nth-of-type(odd) {
    background: rgba(75, 157, 177, 0.1);
  }
  .organize-tree-node:nth-of-type(even) {
    background: rgba(249, 168, 110, 0.1);
  }
  .organize-tree-node {
    display: block;
    margin: 5px 0 5px 5px;
    padding: 0 7px 2px 10px ;
    line-height: 35px;
    i.el-icon-arrow-right {
      font-size: 16px;
      width: 22px;
      height: 35px;
      line-height: 38px;
      vertical-align: top;
      margin: auto;
    }
    .label {
      font-size: 16px;
    }
   
    .staff {
      // padding:0 0 0 5px;
      // background: #eee;
      .user-box {
        display: inline-block;
        vertical-align: top;
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 15px;
        text-align: center;
        border-radius: 50%;
        overflow: hidden;
        background: #63cbe7;
        color: #fff;
        margin: 6px 5px 0 3px;
        small {
          font-size: 8px;
        }
      }
      .staff-name {
        display: inline-block;
        height: 38px;
        line-height: 38px;
        vertical-align: top;
      }
    }
  }
}
</style>