xps-web-csat/src/views/hos/components/ArtList.vue

<template>
  <div class="content-container">
    <div class="list-group">
      <el-row class="title-bar">
        <p class="page-title">{{ title }}</p>
      </el-row>
      <vuescroll :ops="ops" style="height: calc(100% - 90px);">
        <el-tree
          :expand-on-click-node="false"
          :default-expand-all="true"
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <template v-slot="{ node, data }">
            <span class="custom-tree-node">
              <span class="label">{{ node.label }}</span>
              <span class="right-icon" @click="event => clickItem(event,data)">
                <i class="icon el-icon-caret-bottom" />
              </span>
            </span>
          </template>
        </el-tree>
      </vuescroll>
    </div>
  </div>
</template>
<script>

import { getArtByList } from '@/api/system/artApi'
import { toTree } from '@/utils/build-tree'
import Vuescroll from 'vuescroll'

export default {
  name: 'ArtList',
  components: { Vuescroll },
  props: {
    artCatId: {
      type: Number,
      default: undefined
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'artTitle'
      },
      conditions: {
        artCatId: this.artCatId
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    loadData() {},
    getData() {
      getArtByList(this.conditions).then((resp) => {
        const { code, data } = resp
        if (code === 200) {
          const temp = toTree(data, {
            value: 'artId',
            name: 'artTitle',
            pValue: 'parentId'
          }, {
            value: 'artId',
            name: 'artTitle',
            pValue: 'parentId'
          })
          this.treeData = temp
          if (temp.length > 0) { this.handleTreeInit(temp[0]) }
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    handleNodeClick(data) {
      this.$emit('selectItem', data.artId)
    },

    handleTreeInit(data) {
      this.$emit('selectItem', data.artId)
    }
  }
}
</script>
<style lang="scss" scoped>
.content-container {
  margin: 10px 0 10px 10px;
  height: calc(100vh - 90px);

  .title-bar {
    position: relative;
    height: 40px;
    line-height: 40px;
    text-indent: 15px;
    background: #113849;
    margin-bottom: 0;

    .page-title {
      font-size: 16px;
      font-weight: bold;
      color: #FFF;
      margin: 0;
      background: linear-gradient(0deg, #FFFFFF 0%, #98A8B7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .right-icon {
      position: absolute;
      right: 15px;
      top: 14px;
      color: #5181A2;
      width: 14px;
      height: 14px;
      line-height: 14px;
      cursor: pointer;

      .icon {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
        font-weight: bolder;
      }
    }
  }

  .btn-group {
    width: 100%;
    margin-bottom: 15px;

    .send-menu {
      width: 100%;
      background: #3D5F76;
      color: #FFF;
      border-color: #3D5F76;

      &:hover {
        background: #283c4c;
        color: #FFF;
        border-color: #283c4c;
      }
    }
  }

  .list-group {
    height: calc(100vh - 110px);
    background: #193142;

    .list-item {
      height: 40px;
      line-height: 40px;
      color: #FFF;
      padding: 0 30px;
      font-size: 14px;

      &.active {
        color: #08A6DC;
        position: relative;

        &::after {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          top: calc(50% - 3.5px);
          right: -3px;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-bottom: 7px solid #08A6DC;
          transform: rotate(270deg);
        }
      }
    }
  }

  .custom-tree-node {
    position: relative;
    width: 100%;

    .right-icon {
      position: absolute;
      right: 10px;
      top: 14px;
      background: #5181A2;
      color: #FFFFFF;
      width: 14px;
      height: 14px;
      border: 1px solid #3D6F91;
      line-height: 14px;
      font-size: 10px;
      display: none !important;
      cursor: pointer;

      .icon {
        position: relative;
        top: -2px;
      }
    }

    // &:hover {
    //   .right-icon {
    //     display: block;
    //   }
    // }
  }
}
</style>