data-room/data-room-ui/packages/SourceMag/SideMenu.vue

<template>
  <div class="side-catalog-wrap">
    <el-scrollbar class="side-catalog-box">
      <div
        class="side-catalog-all side-catalog-item"
        :class="{ 'active-catalog': isAll }"
        @click="clickAllCatalog()"
      >
        全部
      </div>
      <div
        v-for="(catalog, index) in catalogList"
        :key="index"
        class="side-catalog-item"
        :class="{
          'active-catalog': activeCatalog.code === catalog.code && !isAll
        }"
        @mouseenter="mouseenter(catalog.code)"
        @mouseleave="mouseleave"
        @click="clickCatalog(catalog)"
      >
        <span class="catalog-name">{{ catalog.name }}</span>
        <el-dropdown
          :class="{
            'dropdown-show':
              (showDropdown && hoverItem === catalog.code) ||
              activeCatalog.code === catalog.code
          }"
          class="page-list-dropdown"
          placement="bottom-start"
          node-key="id"
          trigger="click"
        >
          <span class="el-dropdown-link menu-dropdown-link">
            <i
              class="el-icon-more"
              :class="{
                'active-icon-more':
                  activeCatalog.code === catalog.code && !isAll
              }"
            />
            <el-dropdown-menu
              slot="dropdown"
              class="dropdown-menu-box bs-el-dropdown-menu"
            >
              <el-dropdown-item @click.native="catalogEdit()">
                编辑
              </el-dropdown-item>
              <el-dropdown-item
                class="delete-item"
                @click.native="catalogDel(catalog)"
              >
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </span>
        </el-dropdown>
      </div>
    </el-scrollbar>
    <div
      class="add-catalog-box"
      @click="catalogAdd"
    >
      <i class="el-icon-plus" />
      <div>新建分组</div>
    </div>
    <!-- 新增或编辑目录弹窗 -->
    <el-dialog
      :title="groupForm.code ? '编辑分组' : '新建分组'"
      :visible.sync="catalogVisible"
      custom-class="bs-el-dialog"
      width="30%"
      class="bs-dialog-wrap bs-el-dialog"
      @close="handleClose"
    >
      <el-form
        ref="form"
        :model="groupForm"
        label-width="80px"
        :rules="formRules"
        class="bs-el-form"
      >
        <el-form-item
          label="分组名称"
          prop="name"
        >
          <el-input
            v-model.trim="groupForm.name"
            class="bs-el-input"
            clearable
          />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="groupForm.orderNum"
            :min="0"
            :max="30000"
            controls-position="right"
            class="bs-el-input-number"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          class="bs-el-button-default"
          @click="catalogVisible = false"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          @click="addOrEditCatalog"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash'
export default {
  components: {},
  data () {
    return {
      showDropdown: false,
      hoverItem: null,
      isAll: true,
      catalogList: [
        {
          name: 'LOGO',
          code: 'LOGO'
        },
        {
          name: '商务科技',
          code: '商务科技'
        },
        {
          name: '卡通手绘',
          code: '卡通手绘'
        },
        {
          name: '简约背景',
          code: '简约背景'
        },
        {
          name: '大屏背景',
          code: '大屏背景'
        }
      ],
      catalogVisible: false,
      activeCatalog: {
        // 激活的目录,点击其他非目录按钮时需要保持当前的菜单激活状态
        name: '',
        id: '',
        code: ''
      },
      currentCatalog: {
        // 选中目录
        name: '',
        id: '',
        code: ''
      },
      groupForm: {
        code: '',
        name: '',
        orderNum: ''
      },
      formRules: {
        name: [{ required: true, message: '分组名称不能为空', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    this.getCatalogList()
  },
  methods: {
    catalogAdd () {
      this.catalogVisible = true
      this.currentCatalog = {
        // 选中目录
        name: '',
        id: '',
        code: ''
      }
    },
    mouseenter (code) {
      this.showDropdown = true
      this.hoverItem = code
    },
    mouseleave () {
      this.showDropdown = false
    },
    // 点击全部
    clickAllCatalog () {
      this.isAll = true
      this.$emit('getPageInfo', {
        isAll: true,
        page: { id: '', code: '', name: '' }
      })
    },
    // 关闭目录弹窗
    handleClose () {
      this.catalogVisible = false
      this.$refs.form.clearValidate()
    },
    // 新增编辑目录（点击确定）
    addOrEditCatalog () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return
        }
        this.currentCatalog = {
          ...this.currentCatalog,
          ...this.groupForm
        }
        if (!this.currentCatalog.id) {
          this.$dataRoomAxios.post('/bigScreen/type/add', {
            ...this.currentCatalog,
            type: 'resourceCatalog'
          })
            .then((data) => {
              this.catalogVisible = false
              this.getCatalogList()
              this.flag = true
              // 关闭页面菜单的弹窗
              this.closePageMenuDialog()
            })
            .catch(() => {})
        } else {
          this.$dataRoomAxios.post('/bigScreen/type/update', {
            ...this.currentCatalog,
            type: 'resourceCatalog'
          })
            .then((data) => {
              this.catalogVisible = false
              this.getCatalogList()
            })
            .catch(() => {})
        }
      })
    },
    // 点击目录
    clickCatalog (catalog) {
      this.currentCatalog = cloneDeep(catalog)
      this.activeCatalog = cloneDeep(catalog)
      this.isAll = false
      this.$emit('getPageInfo', { isAll: false, page: catalog })
    },
    // 编辑目录
    catalogEdit () {
      this.groupForm = cloneDeep(this.currentCatalog)
      this.catalogVisible = true
    },
    // 删除目录
    catalogDel (catalog) {
      this.$confirm('确定删除该目录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'bs-el-message-box'
      })
        .then(async () => {
          this.$dataRoomAxios.post(`/bigScreen/type/delete/${catalog.id}`)
            .then(() => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.getCatalogList()
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            })
        })
        .catch()
    },
    // 获取目录的列表
    getCatalogList () {
      this.pageLoading = true
      this.$dataRoomAxios.get('/bigScreen/type/list/resourceCatalog')
        .then((data) => {
          this.catalogList = data
        })
        .catch(() => {})
        .finally(() => {
          this.pageLoading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../assets/style/bsTheme.scss';
.side-catalog-wrap {
  // padding-top: 16px;
  width: 220px;
  // height: 100%;
  // margin-bottom: 16px;
  box-sizing: border-box;
  color: var(--bs-el-title);
  background-color: var(--bs-background-2);
  .side-catalog-box {
    height: calc(100% - 50px);
    overflow-y: auto;
    .side-catalog-all {
      font-weight: bold;
    }
    .side-catalog-item {
      width: 100%;
      padding: 0px 16px;
      line-height: 36px;
      display: flex;
      justify-content: space-between;
      &:hover {
        cursor: pointer;
      }
      .el-icon-more {
        transform: rotate(90deg);
        color: var(--bs-el-title);
        font-weight: 400;
      }
      .active-icon-more {
        color: var(--bs-el-text);
      }
      .catalog-name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
      .page-list-dropdown {
        opacity: 0;
      }
      .dropdown-show {
        opacity: 1;
      }
    }
    /*菜单激活时的样式*/
    .active-catalog {
      position: relative;
      background-color: rgba(var(--bs-el-color-primary-active), 0.4);
      color: var(--bs-el-text);
      &::after{
          content: '';
          position: absolute;
          left: 0;
          width: 4px;
          height: 36px;
          background-color: var(--bs-el-color-primary);
        }
    }
  }
  .add-catalog-box {
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin: 0 8px;
    &:hover {
      background-color: var(--bs-background-1);
      cursor: pointer;
      color: var(--bs-el-text);
    }
    .el-icon-plus {
      padding: 0 5px;
    }
  }
}
.dropdown-menu-box {
  left: 50%;
  transform: translateX(-40%);
  width: 100px !important;
  ::v-deep.el-dropdown-menu__item {
    text-align: center;
    padding: 5px;
  }
  ::v-deep.popper__arrow {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}
</style>