cbjsxt-front-master/src/views/appCenter/index.vue

<template>
  <!-- 应用中心 -->
  <el-container class="app-center">
    <div class="app-center__header">
      <!-- <el-input
        v-model="searchWord"
        placeholder="请输入关键词"
        clearable
        @change="loadAppData"
      >
        <i slot="suffix" class="iconfont-5039297 iconfont-5039297 icon-chaxun" @click="loadAppData"></i>
      </el-input> -->
      <header-search-input
        search-tips="请输入关键词"
        @search-by-key="searchChange"
      ></header-search-input>
    </div>
    <el-container class="app-center__container">
      <el-aside width="180px" class="app-center__aside">
        <ht-tree
          ref="tree"
          class="ht-tree treeCont"
          :tree-data="menus"
          node-key="id"
          default-expand-all
          highlight-current
          :show-checkbox="false"
          :support-filter="true"
          :expand-on-click-node="false"
          :props="{
            children: 'children',
            label: 'name',
          }"
          @node-click="menuNodeClick"
          @refresh="menuTreeRefresh"
        >
          <span slot-scope="{ node }">
            <span :title="node.label">
              {{ node.label }}
            </span>
          </span>
        </ht-tree>
      </el-aside>
      <el-main class="app-center_main">
        <div v-if="currentMenuId" class="app-center__main-header">
          <span class="label">标签:</span>
          <ul class="tag-wrap">
            <li
              class="tag-item all-tag"
              :class="{ 'tag-check': checkAll }"
              @click="allBtnClick"
            >
              <span class="tag-name">
                <template v-if="checkAll">
                  <ht-icon name="checked" class="tag-check"></ht-icon>
                </template>
                全部
              </span>
            </li>
            <li
              v-for="(tag, index) in curTagList"
              :key="index"
              class="tag-item"
              :class="{ 'tag-check': tag.check }"
              @click="tagClick(tag)"
            >
              <span class="tag-name">
                <template v-if="tag.check">
                  <ht-icon name="checked" class="tag-check"></ht-icon>
                </template>
                {{ tag.name }}
              </span>
            </li>
          </ul>
        </div>
        <div class="tab-container" :class="{ 'no-tags': !currentMenuId }">
          <div class="app-statistics">
            共
            <span class="app-total">{{ pageResult.total }}</span>
            个应用
          </div>
          <app-main v-if="apps && apps.length > 0" :apps="apps"></app-main>
          <el-empty
            v-else
            :image="noDataImg"
            :image-size="380"
            description="暂无应用哦~"
          ></el-empty>
        </div>
        <el-footer>
          <el-pagination
            background
            :page-sizes="[50, 100, 200, 300, 400]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageResult.total"
            :page-size="pageResult.pageSize"
            class="pagination"
            style="float: right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-footer>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import {
    getSubMenus,
    getValidMenu,
    getAppTagTypes,
    getSysTag,
    getSysAppList,
    queryByTagIds,
    queryByFilter,
    getSysMenuByAlias,
    getSysMenuByAuthApp,
  } from '@/api/appCenter.js'
  import appMain from './appMain/index.vue'
  import HeaderSearchInput from '../../components/searchInput/HeaderSearchInput.vue'
  export default {
    name: 'AppCenter',
    components: {
      appMain,
      HeaderSearchInput,
    },
    data() {
      return {
        apps: [],
        pageResult: {
          page: 1,
          pageSize: 50,
          total: 0,
        },
        checkAll: false,
        menus: [],
        tagMap: {},
        currentMenuId: '',
        searchWord: '',
        curTagList: [],
        menuAlias: 'app_menu',
        rootMenuId: '',
        noDataImg: require('@/assets/nodata_images/no-draft.png'),
      }
    },
    computed: {
      allButtonType: function (val) {
        let checkArr = this.curTagList.filter((e) => {
          if (e.check) {
            return e
          }
        })
        return this.curTagList.length === checkArr.length ? 'primary' : 'plain'
      },
    },
    mounted() {
      this.loadMenuData()
      this.loadAppData()
    },
    methods: {
      allBtnClick() {
        this.checkAll = !this.checkAll
        let check = this.allButtonType === 'primary' ? false : true
        for (let i = 0; i < this.curTagList.length; i++) {
          const element = this.curTagList[i]
          element.check = check
          this.curTagList.splice(i, 1, element)
        }
        this.loadAppData()
      },
      menuNodeClick(node) {
        if (node.id === this.rootMenuId) {
          this.currentMenuId = null
        } else {
          this.currentMenuId = node.id
        }
        this.loadMenuTagsData()
        this.loadAppData()
      },
      menuTreeRefresh(cb) {
        this.currentMenuId = null
        this.curTagList = []
        this.pageResult.page = 1
        this.loadMenuData(cb)
        this.loadAppData()
      },
      loadMenuData(cb) {
        getSysMenuByAlias(this.menuAlias).then((response) => {
          this.rootMenuId = response.id
          getSysMenuByAuthApp(this.menuAlias)
            .then((resp) => {
              response.children = resp.value
              this.menus = [response]
            })
            .finally(() => {
              cb && cb()
            })
        })
      },
      searchChange(searchKey) {
        this.searchWord = searchKey
        this.loadAppData()
      },
      //加载应用数据
      loadAppData() {
        let query = { pageBean: this.pageResult, params: {} }

        //如果没选中标签，则按菜单查找
        if (this.allButtonType === 'primary') {
          query.params.menuId = this.currentMenuId
        } else {
          //选中的标签
          let checkedTags = this.curTagList.filter((e) => {
            if (e.check) {
              return e
            }
          })
          if (!checkedTags || checkedTags.length == 0) {
            query.params.menuId = this.currentMenuId
          } else {
            //如果有选中的标签，则按标签精确查找
            let tagIds = checkedTags.map((e) => {
              return e.id
            })
            query.params.tagIds = tagIds.join(',')
          }
        }
        if (this.searchWord) {
          query.params.searchWord = this.searchWord
        }
        queryByFilter(query).then((resp) => {
          this.apps = resp.rows
          this.pageResult.page = resp.page
          this.pageResult.pageSize = resp.pageSize
          this.pageResult.total = resp.total
        })
      },
      tagClick(tag) {
        this.$set(tag, 'check', tag.check ? false : true)
        // let t = this.curTagList[index]
        // t.check = !t.check
        // this.curTagList.splice(index, 1, t)
        // this.$forceUpdate()
        this.loadAppData()
      },
      loadMenuTagsData() {
        if (!this.currentMenuId) {
          return
        }
        if (this.tagMap[this.currentMenuId]) {
          this.curTagList = [...this.tagMap[this.currentMenuId]]
          return
        }
        let querys = [
          {
            property: 'type_id_',
            value: this.currentMenuId,
            group: 'main',
            operation: 'EQUAL',
            relation: 'AND',
          },
        ]
        getSysTag({ querys: querys }).then((resp) => {
          this.curTagList = [...resp.rows]
          this.tagMap[this.currentMenuId] = resp.rows
          this.$forceUpdate()
        })
      },
      handleSizeChange(size) {
        this.pageResult.pageSize = size
        this.loadAppData()
      },
      handleCurrentChange(currentPage) {
        this.pageResult.page = currentPage
        this.loadAppData()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .app-center {
    flex-direction: column;
    // height: 100%;
    height: calc(100% - 24px);
    .app-center__header {
      // width: 288px;
      text-align: right;
      ::v-deep {
        .el-input__suffix {
          font-size: $base-font-size-big;
          line-height: 32px;
        }
      }
      .icon-chaxun {
        cursor: pointer;
      }
    }
    .app-center__container {
      height: calc(100% - 16px);
      padding-top: 16px;
      .app-center__aside {
        background-color: $base-color-white;
        ::v-deep {
          .tree-button-group {
            align-items: center;
          }
        }
      }
    }
    .app-center_main {
      padding: 0;
      margin-left: 1px;
      background: $base-color-white;
      .app-center__main-header {
        display: flex;
        align-items: center;
        padding: 24px 0;
        margin: 0 24px;
        border-bottom: 1px solid $base-content-border-color;
        .label {
          padding-right: 24px;
          color: $base-color-second-color;
        }
        .tag-wrap {
          display: flex;
          margin: 0;
          .tag-item {
            padding-right: 8px;
            color: $base-color-second-color;
            cursor: pointer;
            .tag-name {
              position: relative;
              padding: 4px 8px;
              border-radius: $base-border-radius;
              .tag-check {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 18px !important;
                height: 14px !important;
                color: var(--themeColor);
              }
            }
          }
          .all-tag {
            padding-right: 8px;
          }
          .tag-check {
            .tag-name {
              border: 1px solid var(--themeColor);
            }
          }
        }
      }
    }
  }
  .aside_top_title {
    font-size: 14px;
    color: #303133;
  }
  .el-card {
    background-color: transparent;
  }
  .el-card ::v-deep .el-card__header {
    height: 48px;
    color: #a2a2a2;
    border-bottom: 1.5px solid #dedede;
  }
  .el-card ::v-deep .el-card__body {
    padding: 0;
  }
  .tagList {
    display: flex;
    flex-direction: row;
  }
  .tab-container {
    height: calc(100% - 174px);
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    .app-statistics {
      padding-bottom: 24px;
      color: $base-color-second-color;
      .app-total {
        color: var(--themeColor);
      }
    }
    ::v-deep {
      .el-empty__description {
        margin-top: -38px;
        p {
          font-size: $base-font-size-big;
          color: $base-dark-title-color;
        }
      }
    }
  }
  .no-tags {
    height: calc(100% - 108px);
  }
  .ht-tree ::v-deep div[role='tree'] {
    background-color: #fff !important;
  }
  .tag-header {
    height: auto;
    padding: 10px;
    background-color: #fff;
  }
</style>