xps-web-csat/src/views/hos/data/components/LeftChecklist.vue

<template>
  <div class="content-container">
    <div class="tool-bar">
      <div class="content-title">
        <i class="el-icon-document-checked" /> 清单列表
      </div>
    </div>

    <div class="content-body">
      <vuescroll :ops="ops">
        <el-tree
          ref="leftChecklist"
          node-key="checklistId"
          :data="treeData"
          :expand-on-click-node="false"
          :default-expand-all="true"
          :props="defaultProps"
          :highlight-current="true"
          :default-expanded-keys="expandDefault"
          @node-click="handleNodeClick"
        />
      </vuescroll>
    </div>
  </div>
</template>
<script>

import Vuescroll from 'vuescroll'
import { getChecklistByList } from '@/api/system/checklistApi'

export default {
  components: {
    Vuescroll
  },
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      listLoading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'checklistTitle'
      },
      expandDefault: [],
      checkDefault: [],
      conditions: {
        checklistCatId: 3
      }
    }
  },
  watch: {
    checkDefault(val) {
      this.$nextTick(() => {
        document.querySelector('.el-tree-node__content').click()
      })
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.listLoading = true
      getChecklistByList(this.conditions).then((resp) => {
        this.listLoading = false
        const { code, data, msg } = resp
        if (code === 200) {
          this.treeData = data
          if (data.length > 0) {
            const node = data[0]
            this.handleTreeInit(node)
            this.checkDefault.push(node.checklistId)
          }
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    clickItem(event, data) {
      this.$contextmenu({
        items: [
        ],
        event,
        // x: event.clientX,
        // y: event.clientY,
        customClass: 'class-a',
        zIndex: 3,
        minWidth: 230
      })
      return false
    },

    handleNodeClick(data) {
      this.$emit('selectItem', data.checklistId)
    },
    handleTreeInit(data) {
      this.$emit('treeInit', data)
    }
  }
}
</script>
<style lang="scss" scoped>

.content-container {
  height: calc(100vh - 90px);

  .content-body {
    margin-top: 20px;

    .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;
        cursor: pointer;

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

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