系统左侧分栏

<template>
  <div>
    <el-card shadow="never" :body-style="{ padding: '20px 10px 0px' }" class="left-card">
      <el-input prefix-icon="el-icon-search" placeholder="请输入名称" v-model="typeName" clearable style="margin-bottom: 20px" v-if="isSearch"></el-input>
      <div
        :style="{
          height: `${leftColumnHeight}px`,
          overflow: 'auto',
          paddingRight: '6px',
        }"
      >
        <div v-for="item in filterList" :key="item.typeId" class="left-column-name" :class="{ isActive: item.active }" @click="handleClick(item)">
          <div class="left-column-item">
            <div>
              <span>{{ item.typeName }}</span>
              <span v-if="item.count || item.count == 0" style="font-size: 12px">（{{ item.count }}）</span>
            </div>
            <div class="item-tips">
              <el-tooltip :content="item.typeName" placement="top" effect="light">
                <vab-icon icon="information-line" class="tips" />
              </el-tooltip>
            </div>
            <!-- isHideButton:是否隐藏每一项中的操作按钮 -->
            <el-popover trigger="hover" placement="right-start" popper-class="app-popper" v-if="isHandle && !item.isHideButton">
              <div style="margin: 0">
                <div>
                  <el-button type="text" @click="handleEdit(item)">编辑</el-button>
                </div>
                <div>
                  <el-button type="text" @click="handleDelete(item)" style="color: #ff3333" v-if="isDelete">删除</el-button>
                </div>
              </div>
              <div slot="reference">
                <vab-icon icon="more-fill" class="vab-popover" />
              </div>
            </el-popover>
          </div>
        </div>
      </div>
      <div class="left-column-bottom" v-if="isHandle">
        <div class="sort" v-if="isSort">
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建</el-button>
          <el-button icon="el-icon-d-caret" @click="handleSort">排序</el-button>
        </div>
        <div class="un-sort" v-else>
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
  export default {
    name: 'LeftColumn',
    props: {
      // 左侧栏目高度
      leftColumnHeight: {
        type: Number,
        default: 564,
      },
      // 是否需要操作按钮(新增/编辑/删除)
      isHandle: {
        type: Boolean,
        default: true,
      },
      // 是否需要删除
      isDelete: {
        type: Boolean,
        default: true,
      },
      // 是否需要输入框搜索
      isSearch: {
        type: Boolean,
        default: true,
      },
      // 是否需要排序
      isSort: {
        type: Boolean,
        default: false,
      },
      // 左侧栏目数据列表 需要字段 类型id:typeId,类型名称:typeName,数量：count
      leftColumnList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        // 标题名称
        typeName: '',
        timeout: null,
      }
    },
    computed: {
      // 过滤传入的list，前端查询
      filterList() {
        let arr = []
        if (this.leftColumnList.length > 0) {
          this.leftColumnList.forEach((item) => {
            // 处理列表数据,添加选择样式：active(true/false)
            this.$set(item, 'active', false)
            arr.push(item)
          })
          if (this.typeName) {
            arr = this.leftColumnList.filter((item) => item.typeName.includes(this.typeName))
          }
          if (arr.length > 0) {
            arr[0].active = true
          }
          return arr
        }
      },
    },
    created() {},
    mounted() {
      //初始化
      this.timeout = setTimeout(() => {
        this.$emit('handleClick', this.leftColumnList[0])
      }, 1000)
    },
    watch: {
      filterList(val) {},
    },
    methods: {
      // 点击分类
      handleClick(value) {
        this.filterList.forEach((item) => {
          item.active = false
        })
        value.active = true
        this.$emit('handleClick', value)
      },
      // 新建
      handleAdd() {
        this.$emit('handleAdd')
      },
      // 修改
      handleEdit(value) {
        this.$emit('handleEdit', value)
      },
      // 删除
      handleDelete(value) {
        this.$emit('handleDelete', value)
      },
      // 排序
      handleSort() {
        this.$emit('handleSort')
      },
    },
    beforeDestroy() {
      clearTimeout(this.timeout)
      this.timeout = null
    },
  }
</script>
<style lang="scss" scoped>
  .left-column-name {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 6px;
    color: #606266;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 6px;
  }

  .left-column-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > div:first-child {
      width: 86%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .item-tips {
      flex: 1;
      display: none;
      text-align: center;
    }
    & > span:last-child {
      display: inline-block;
      flex: 1;
      margin-left: 6px;
    }
  }

  .left-column-bottom {
    margin-bottom: 20px;

    .sort {
      display: flex;
      justify-content: space-between;
      align-items: center;

      ::v-deep .el-button {
        width: 48%;
      }
    }

    .un-sort {
      display: flex;
      justify-content: space-between;
      align-items: center;

      ::v-deep .el-button {
        width: 100%;
      }
    }
  }

  .vab-popover {
    display: none;
    font-size: 22px;
  }

  .app-popper {
    margin-left: -10px !important;
  }

  .left-column-name:hover {
    background-color: #eff0f0;
    .item-tips {
      flex: 1;
      display: block;
      text-align: center;
      color: #1684fc;
    }
    .vab-popover {
      display: block;
      color: #1684fc;
      cursor: pointer;
    }
  }

  .isActive {
    color: #fff !important;
    background-color: rgba(51, 148, 254) !important;
    .item-tips {
      flex: 1;
      display: block;
      text-align: center;
      color: #fff !important;
    }
    .vab-popover {
      display: block;
      color: #fff !important;
      cursor: pointer;
    }
  }

  ::v-deep .el-card {
    margin-bottom: 0px !important;
    border-bottom: none;
  }
</style>