zoukankan      html  css  js  c++  java
  • 穿梭框+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{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)
          })
  • 相关阅读:
    Windows下安装使用OpenLDAP
    LDAP安装配置(windows)
    LDAP概念和原理介绍
    JDK自带的keytool证书工具详解
    递归算法讲解
    Creating an archive from a directory without the directory name being added to the archive
    Overview of the M&A Process
    Make sure base method gets called in C#
    How to delete specific nodes from an XElement?
    如何学习数据结构?
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/13845192.html
Copyright © 2011-2022 走看看