pinyin-match与pinyin-engine的区别

<template>

  <el-form ref="searchForm" :model="searchForm" inline :rules="rules">

    <el-form-item label="科室包干方案" prop="lngcontractplanid">

      <el-select v-model="searchForm.lngcontractplanid" filterable placeholder="请选择" :filter-method="filterFn" @focus="focusEvent" @change="changeDepart">

        <el-option

          v-for="item in contractplanList"

          :key="item.lngcontractplanid"

          :label="item.strintyearplanname"

          :value="item.lngcontractplanid"

        />

      </el-select>

    </el-form-item>

    <el-form-item label="科室">

      <department-tree-select

        v-model="searchForm.strdepartmentpath"

        :last-stage="false"

        tree-value="path"

      />

    </el-form-item>

    <el-form-item label="金额">

      <el-input v-model="searchForm.dblsamount" type="number" clearable style="width:150px" oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3').replace(/^0+(?=\d)/,'')" /> - <el-input v-model="searchForm.dbleamount" type="number" clearable style="width:150px" oninput="value=value.replace(/[^0-9.]/g,'').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3').replace(/^0+(?=\d)/,'')" />

    </el-form-item>

    <el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>

    </el-form-item>

  </el-form>

</template>

<script>

import { contractplanList, changeDep } from '@/api/cost-control/department-contract/department-contract-standard/index'

//注释的是pinyin-engine  没注释的是pinyin-match

// const PinyinEngine = require('pinyin-engine')

import pinyinMatch from 'pinyin-match'

export default {

  name: 'DepartmentContractStandardSearch',

  data() {

    return {

      searchForm: {

        lngcontractplanid: '',

        strdepartmentpath: '',

        dblsamount: '',

        dbleamount: ''

      },

      // pinyinEngine: null,

      rules: {

        lngcontractplanid: [

          { required: true, message: '必填项', trigger: 'change' }

        ]

      },

      contractplanList: [] // 科室包干方案共通接口

    }

  },

  created() {

    this.getContractplanList()

  },

  methods: {

    search() {

      this.$emit('search', this.searchForm)

    },

    filterFn(val) {

      // this.contractplanList = this.pinyinEngine.query(val)

      this.contractplanList = this.contractplanListCopy

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

        return pinyinMatch.match(item.strintyearplanname, val)

      })

    },

    focusEvent() {

      // this.contractplanList = this.pinyinEngine.query('')

      this.contractplanList = this.contractplanListCopy

    },

    getContractplanList() {

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

        if (res.code === 20000) {

          this.contractplanList = res.data

          // this.pinyinEngine = new PinyinEngine(this.contractplanList, ['strintyearplanname'])

          this.contractplanListCopy = res.data

          this.searchForm.lngcontractplanid = res.data[0].lngcontractplanid

          this.changeDepart(res.data[0].lngcontractplanid)

          this.search()

        }

      })

    },

    changeDepart(val) {

      changeDep(val)

      this.$emit('changeDepart', val)

    }

  }

}

</script>

<style scoped>

</style>