order-ui-pc/src/components/globalComponents/goodsClass-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($event, 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((i) => i == '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((i) => i == '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((i)=> i == '006')"
              type="danger"
              size="mini"
              @click="
                detail(
                  $event,
                  item.id,
                  level === 3 ? item.menuid : item.pid,
                  level,
                  item.status
                )
              "
            >
              详情
            </el-button> -->
          </span>
        </div>
      </div>
    </div>
    <!--  -->
    <!-- vif{{ page }}--{{ page.total }}--{{}} -->
    <div
      class="Pagination"
      style="text-align: right; margin-top: 10px"
      v-if="page.total > 0"
    >
      <el-pagination
        :current-page="page.curr"
        :page-sizes="[15, 50, 100]"
        :page-size="page.size"
        :size="searchSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="$emit('page-size-change', $event)"
        @current-change="$emit('page-curr-change', $event)"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "goodsClassTree",
  props: ["list", "level", "page"],
  computed: {
    powers() {
      const tran =
        this.$store.getters.btnList.find((i) => i.menu_route == "goodsClass") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      newlist: "",
      index: 0, // icon 箭头
      // page: {
      //   type: [Boolean, Object],
      //   default: false,
      // },
    };
  },
  methods: {
    addEdit(e, id, pid, level, isDetail, isAdd, formData) {
      e.stopPropagation();
      this.$emit("addEdit", id, pid, level, isDetail, isAdd, formData);
    },
    openChildren(e, item) {
      e.stopPropagation();
      this.$emit("openChildren", item);
    },
    status(e, id, pid, level, status) {
      e.stopPropagation();
      this.$emit("status", id, pid, level, status);
    },
    // detail(e, id, pid, level, status) {
    //   e.stopPropagation();
    //   this.$emit("detail", 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;

    .btn-list {
      display: block;
      float: right;
    }
    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>