xps-web_qhpt-v5/src/views/system/art/leftCat.vue

<template>
  <div class="content-container">
    <div class="list-group">
      <el-row class="title-bar">
        <p class="page-title">信息中心</p>
        <span class="right-icon" @click="handleAddTop">
          <i class="icon el-icon-plus" />
        </span>
      </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>

    <art-cat ref="AddTopArtCat" title="添加分类" @formSuccess="getData" />
    <art-cat ref="AddArtCat" title="添加分类" @formSuccess="getData" />
    <art-cat ref="UpdateArtCat" title="修改类别" @formSuccess="getData" />
  </div>
</template>
<script>

import { getArtCatByList, deleteArtCatById } from '@/api/system/artCatApi'
import { toTree } from '@/utils/build-tree'
import ArtCat from './artCat'
import Vuescroll from 'vuescroll'

export default {
  components: { Vuescroll, ArtCat },
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      listLoading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'artCatTitle'
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {

    getData() {
      this.listLoading = true
      getArtCatByList().then((resp) => {
        this.listLoading = false
        const { code, data } = resp
        if (code === 0) {
          const temp = toTree(data, {
            value: 'artCatId',
            name: 'artCatTitle',
            pValue: 'parentId'
          }, {
            value: 'artCatId',
            name: 'artCatTitle',
            pValue: 'parentId'
          })
          this.treeData = temp
          if (temp.length > 0) { this.handleTreeInit(temp[0]) }
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    clickItem(event, data) {
      this.$contextmenu({
        items: [
          {
            label: '添加类别', divided: true, onClick: () => {
              this.handleAdd(data)
            }
          },
          {
            label: '修改类别', divided: true, onClick: () => {
              this.handleUpdate(data)
            }
          },
          {
            label: '删除', divided: false, onClick: () => {
              this.handleDelete(data)
            }
          }
        ],
        event,
        // x: event.clientX,
        // y: event.clientY,
        customClass: 'class-a',
        zIndex: 3,
        minWidth: 230
      })
      return false
    },

    // 添加一线
    handleAddTop() {
      this.$refs['AddTopArtCat'].showAddModel(0)
    },

    // 添加
    handleAdd(data) {
      const { artCatId } = data
      this.$refs['AddArtCat'].showAddModel(artCatId)
    },

    // 更新
    handleUpdate(data) {
      const { artCatId } = data
      this.$refs['UpdateArtCat'].showEditModel(artCatId)
    },

    // 删除
    handleDelete(data) {
      this.$confirm(`此操作将删除该数据${data.artCatTitle}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteArtCatById(data.artCatId).then((resp) => {
          const { code, msg } = resp
          if (code === 0) {
            this.getData()
            this.$message.success(msg)
          } else {
            this.$message.error(msg)
          }
        }).catch((error) => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },

    // Click
    handleNodeClick(data) {
      this.$emit('nodeClick', data)
    },

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

      .title-bar {
        position: relative;
        border-left: 6px solid #36556B;
        height: 40px;
        line-height: 40px;
        text-indent: 15px;
        background: #113849;
        margin-bottom: 0px;

        .page-title {
          font-size: 16px;
          font-width: 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;
          cursor: pointer;

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

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