|
@@ -0,0 +1,204 @@
|
|
|
+<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((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="
|
|
|
+ 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() {
|
|
|
+ let tran =
|
|
|
+ this.$store.getters.btnList.find(
|
|
|
+ (item) => item.menu_route == "goodsClass"
|
|
|
+ ) || {};
|
|
|
+ if (tran && tran.action && tran.action.length > 0) {
|
|
|
+ return tran.action;
|
|
|
+ } else {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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>
|