laws-sinotruk-client/src/views/businessSupport/standardizationActivity/StandardizationActivityPage.vue

<template>
  <internal-detail-page custom-icon
                        :title="$t('businessSupport.standardizationActivity.currentNode')"
                        :sub-title="currentNodeName"
                        sub-title-tooltip
                        :loading="loading"
                        :content-padding="0">
    <template v-slot:customIcon>
      <i class="iconfont icon-nav_apartment page-icon" />
    </template>

    <template v-slot:titleRightCustom>
      <!--新增-->
      <a-button type="primary" ghost icon="plus" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
      <!--编辑-->
      <a-button type="primary" ghost icon="edit" @click="handleEdit">{{ $t('edit') }}</a-button>
      <!--查看-->
      <a-button type="primary" ghost icon="eye" @click="handleDetail">{{ $t('view') }}</a-button>
      <!--会议统计列表-->
      <a-button type="primary" ghost icon="eye">{{
          $t('businessSupport.standardizationActivity.conferenceStatisticsList')
        }}
      </a-button>
    </template>
    <div class="table-page-search-wrapper search-box" :class="{'search-box-shadow': showSearch}">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="16" :sm="8">
            <!--            节点名称-->
            <a-form-item :label="$t('businessSupport.standardizationActivity.nodeName')">
              <a-input v-model="nodeName"
                       :placeholder="$t('pleaseEnter') + $t('businessSupport.standardizationActivity.nodeName')"
                       @input="handleSearch" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
              <a-button class="box-button" @click="searchReset">{{ $t('reset') }}</a-button>
              <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{
                  $t('query')
                }}
              </a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>

      <template>
        <!--点击查询后展示的列表-->
        <div class="search-node-list" :class="{'hide-search': !showSearch}">
          <div class="search-node-item" v-for="node in nodeNameList" @click="handleSearchNode(node)">
            <span v-if="hasSearchVal(node.name)">{{
                beforeSearchVal(node.name)
              }}<span class="highlight-text">{{ searchValInText(node.name) }}</span>{{ afterSearchVal(node.name) }}</span>
            <span v-else>{{ node.name }}</span>
          </div>
        </div>
        <!--遮罩-->
        <div class="search-overlay" v-show="showSearch" @click="hideSearch"></div>
      </template>
    </div>
    <!--思维导图部分-->
    <mind-map ref="mindMap" dom-id="mountNode" :map-data="data" map-data-key-field="name" @select="handleSelectNode" />

    <!--新增/编辑-->
    <standardization-activity-drawer ref="modalForm" @ok="modalFormOk" />
  </internal-detail-page>
</template>

<script>
import MindMap from '../../../components/MindMap.vue'
import InternalDetailPage from '../../../components/InternalDetailPage'
import { queryTreeList } from '../../../api/businessSupport'
import StandardizationActivityDrawer from './modules/StandardizationActivityDrawer'

export default {
  name: 'StandardizationActivityPage',
  components: { InternalDetailPage, MindMap, StandardizationActivityDrawer },
  data () {
    return {
      nodeName: '',
      nodeNameList: [], // 查询的下拉数据
      defaultNodeNameList: [], // 查询的下拉数据
      data: {},
      currentNodeName: '',
      showSearch: false,
      loading: false,
      selectedNodeId: null, // 选中节点的信息
      selectedNode: {}
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    /**
     * 获取数据
     */
    loadData () {
      this.loading = true
      queryTreeList().then(res => {
        if (res.success) {
          this.data = Object.assign({}, res.result)
          this.treeToArr([this.data], null, this.defaultNodeNameList)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleSearch () {
      if (!this.nodeName) {
        this.nodeNameList = []
        return
      }
      this.nodeNameList = this.defaultNodeNameList.filter(tt => tt.name.toLowerCase().indexOf(this.nodeName.toLowerCase()) !== -1)
    },
    searchReset () {

    },
    searchQuery () {
      this.showSearch = true
    },
    hideSearch () {
      this.showSearch = false
    },
    treeToArr (data, pid = null, res) {
      data.forEach(item => {
        res.push(item)
        if (item.children && item.children.length !== 0) {
          this.treeToArr(item.children, item.id, res)
        }
      })
      return res
    },
    /**
     * 是否包含搜索的文本
     * @param text
     * @returns {boolean}
     */
    hasSearchVal (text) {
      const filterText = text || ''
      const searchVal = this.nodeName || ''
      return text && filterText.toLowerCase().indexOf(searchVal.toLowerCase()) !== -1
    },
    /**
     * 查询关键字之前的
     * @param text
     * @returns {string}
     */
    beforeSearchVal (text) {
      const filterText = text || ''
      const searchVal = this.nodeName || ''
      const index = filterText.toLowerCase().indexOf(searchVal.toLowerCase())
      return filterText.substring(0, index)
    },
    /**
     * 为了保留大小写，需要吧查询的内容也特殊处理一下
     * @param text
     * @returns {string}
     */
    searchValInText (text) {
      const filterText = text || ''
      const searchVal = this.nodeName || ''
      const index = filterText.toLowerCase().indexOf(searchVal.toLowerCase())
      return filterText.substring(index, index + searchVal.length)
    },
    /**
     * 输入内容后面的部分
     * @param text
     * @returns {string}
     */
    afterSearchVal (text) {
      const filterText = text || ''
      const searchVal = this.nodeName || ''
      const index = filterText.toLowerCase().indexOf(searchVal.toLowerCase())
      return filterText.substring(index + searchVal.length)
    },
    handleSearchNode (node) {
      this.$refs.mindMap.searchNode(node.id)
    },
    /**
     * 选中/取消选中节点
     * @param node
     */
    handleSelectNode (node) {
      this.selectedNodeId = node.id
      this.selectedNode = Object.assign({}, node || {})
    },
    modalFormOk () {
      this.loadData()
    },
    handleAdd () {
      // 需要先选中一个节点
      if (!this.selectedNodeId) {
        this.$message.warning(this.$t('businessSupport.standardizationActivity.pleaseSelectNode'))
        return
      }
      this.$refs.modalForm.add({ pid: this.selectedNodeId, pName: this.selectedNode.name, level: this.selectedNode.level + 1 })
    },
    handleEdit () {
      // 需要先选中一个节点
      if (!this.selectedNodeId) {
        this.$message.warning(this.$t('businessSupport.standardizationActivity.pleaseSelectNode'))
        return
      }
      this.$refs.modalForm.edit(this.selectedNodeId)
    },
    handleDetail () {
      console.log(this.selectedNodeId)
      // 需要先选中一个节点
      if (!this.selectedNodeId) {
        this.$message.warning(this.$t('businessSupport.standardizationActivity.pleaseSelectNode'))
        return
      }
      this.$refs.modalForm.view(this.selectedNodeId)
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';

#mountNode {
  width: calc(100% - 48px);
  height: calc(100% - 56px - 48px);
  margin: 0 24px 24px 24px;
}

.search-box {
  width: 564px;
  padding: 24px 24px 0;
  box-sizing: border-box;
}

.search-box-shadow {
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 0 3.2px;
}

.page-icon {
  font-size: 21px;
  color: @primary-color;
  margin-right: 12px;
}

/deep/ .table-page-search-wrapper .ant-form-inline .ant-form-item > .ant-form-item-label {
  min-width: unset;
}

/deep/ .title-current-node {
  display: inline-block;
  font-size: 16px;
  font-family: PingFang SC-Regular, PingFang SC, sans-serif;
  color: #4E5969;
  margin-left: 12px;
}

/deep/ .page-title-sub-title {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-box {
  position: relative;
}

.search-node-list {
  position: absolute;
  width: 564px;
  transition: width .2s linear;
  top: 136px;
  left: 0;
  bottom: 0;
  background-color: #FFFFFF;
  box-shadow: 2.4px 1px 3.2px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  border-top: 1px solid #E5E6EB;
  padding: 8px;
  overflow: auto;
}

.hide-search {
  width: 0;
  display: none;
}

.search-node-item {
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  cursor: pointer;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC, sans-serif;
  color: #1D2129;
}

.search-node-item:hover {
  background: rgba(29, 33, 41, 0.06);
}

.highlight-text {
  color: @primary-color;
}

.search-overlay {
  position: absolute;
  top: 0;
  left: 564px;
  right: 0;
  bottom: 0;
}

.custom-operate {
  .ant-btn {
    margin-left: 12px;
  }

  .ant-btn:first-child {
    margin-left: 0;
  }
}
</style>