cd-work-flow-web/src/views/oa/mailList.vue

<template>
  <a-row :gutter="24">
    <!-- 左边 -->
    <a-col :span="6" style="padding:5px">
      <a-card>
        <a-input-search style="margin-bottom: 8px" placeholder="搜索" @change="onChange" />
        <a-tree
          :show-line="true"
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :tree-data="gData"
          @expand="onExpand"
        >
          <template slot="title" slot-scope="{ title }">
            <span v-if="title.indexOf(searchValue) > -1">
              {{ title.substr(0, title.indexOf(searchValue)) }}
              <span
                style="color: #f50"
              >{{ searchValue }}</span>
              {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
            </span>
            <span v-else>{{ title }}</span>
          </template>
        </a-tree>
      </a-card>
    </a-col>
    <!-- 右边 -->
    <a-col :span="18" style="padding:5px">
      <a-card>
        <a-table
          :columns="columns"
          :row-key="record => record.id"
          :data-source="dataPageList"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
        ></a-table>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
//递归找出搜索项的父级key
const getParentKey = (key, tree) => {
  let parentKey = ''
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      node.children.forEach(item => {
        if (parentKey == '' && item.key == key) {
          parentKey = node.key
        } else {
          parentKey = getParentKey(key, node.children)
        }
      })
    }
  }
  return parentKey
}
export default {
  name: 'mailList',
  data() {
    return {
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      //树形数据
      gData: [
        {
          key: '上海萃颠',
          title: '上海萃颠',
          scopedSlots: { title: 'title' },
          children: [
            {
              key: '开发部',
              title: '开发部',
              scopedSlots: { title: 'title' }
            },
            {
              key: '测试部',
              title: '测试部',
              scopedSlots: { title: 'title' }
            },
            {
              key: '实施部',
              title: '开发部',
              scopedSlots: { title: 'title' }
            },
            {
              key: '销售部',
              title: '销售部',
              scopedSlots: { title: 'title' }
            },
            {
              key: '行政部',
              title: '行政部',
              scopedSlots: { title: 'title' }
            },
            {
              key: '财务部',
              title: '财务部',
              scopedSlots: { title: 'title' }
            }
          ]
        }
      ],
      dataList: [],
      //表格标题
      columns: [
        {
          title: '#',
          dataIndex: 'index'
        },
        {
          title: '姓名',
          dataIndex: 'name',
          // sorter: true,
          width: '20%'
          // scopedSlots: { customRender: 'name' }
        },
        {
          title: '部门',
          dataIndex: 'gender',
          // filters: [
          //   { text: 'Male', value: 'male' },
          //   { text: 'Female', value: 'female' }
          // ],
          width: '20%'
        },
        {
          title: '职务',
          dataIndex: 'zhiwu'
        },
        {
          title: '手机',
          dataIndex: 'phone'
        },
        {
          title: '公司邮箱',
          dataIndex: 'email'
        }
      ],
      dataPageList: [{ id:"123",index: 1, name: '袁少华',gender:"开发部",zhiwu:"开发", phone:"12345697485"}], //表格数据集合
      loading: false, //表格加载
      pagination: {} //分页
    }
  },
  created() {
    this.generateList(this.gData)
  },
  computed: {},
  mounted() {},
  methods: {
    //把tree中的数据用list保存平级数据，用来查找搜索项
    generateList(data) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        const key = node.key
        this.dataList.push({ key, title: key })
        if (node.children) {
          this.generateList(node.children)
        }
      }
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    //搜索项初发事件
    onChange(e) {
      const value = e.target.value
      const expandedKeys = this.dataList
        .map(item => {
          if (item.title.indexOf(value) > -1) {
            return getParentKey(item.key, this.gData)
          }
          return null
        })
        .filter((item, i, self) => item && self.indexOf(item) === i)
      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true
      })
    },
    handleTableChange(pagination, filters, sorter) {
      // console.log(pagination)
      // const pager = { ...this.pagination }
      // pager.current = pagination.current
      // this.pagination = pager
      // this.fetch({
      //   results: pagination.pageSize,
      //   page: pagination.current,
      //   sortField: sorter.field,
      //   sortOrder: sorter.order,
      //   ...filters
      // })
    }
  }
}
</script>
<style lang="less" scoped>
</style>