穿梭框+pinyinMatch

<template>

  <el-dialog

    title="匹配"

    :visible.sync="dialog.isShow"

    width="730px"

    top="70px"

    :close-on-click-modal="false"

    @open="openDialog"

  >

    <el-transfer

      v-model="value"

      class="department-match"

      filterable

      :filter-method="filterData"

      :titles="['未匹配数据', '已匹配数据']"

      filter-placeholder="请输入"

      :props="{

        key: 'lngdepartmentid',

        label: 'strdepartmentcodeandname'

      }"

      :data="data"

    />

    <div slot="footer">

      <el-button type="primary" @click="save">确 定</el-button>

      <el-button @click="dialog.isShow = false">取 消</el-button>

    </div>

  </el-dialog>

</template>

<script>

import { searchunmate, matching } from '@/api/financial-management/basic-settings/financial-department-match'

import pinyinMatch from 'pinyin-match'

export default {

  name: 'MatchDialog',

  data() {

    return {

      data: [],

      value: [],

      dialog: {

        isShow: false

      },

      lngdepartmentid: ''

    }

  },

  methods: {

    show(row) {

      this.dialog.isShow = true

      this.lngdepartmentid = row.lngdepartmentid

    },

    openDialog() {

      this.value = []

    },

    save() {

      if (this.value.length !== 1) {

        this.$message.error('请选择一条数据')

        return false

      }

      matching({

        'lngdepartmentid': this.lngdepartmentid,

        'lngmatedepartmentid': this.value[0]

      }

      ).then(res => {

        if (res.code === 20000) {

          this.$message.success(res.message)

          this.$emit('refresh')

          this.dialog.isShow = false

        }

      })

    },

    // 未匹配数据

    searchunmateFn() {

      searchunmate({}).then(res => {

        if (res.code === 20000) {

          this.data = res.data

        }

      })

    },

    filterData(keyword, node) {

      return pinyinMatch.match(node.strdepartmentcodeandname, keyword)

    }

  }

}

</script>

<style>

.department-match .el-transfer__button:first-child{margin-bottom:0px}

.department-match .el-transfer-panel{width:260px}

.department-match .el-transfer-panel__header .el-checkbox__input {display:none}

</style>

///结束

//过滤

this.tableData = this.tableData.filter(item => {

        return pinyinMatch.match(item.strdepartmentname, this.form.departmentName)

      })