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)
          })
  • 相关阅读:
    图片验证码, 登录, 注销, 修改密码
    注册页面及注册功能实现
    高级配置文件, csrf, django settings源码, django auth模块, 文件配置的插拔式设计
    cookie操作, session操作, django中间件
    半自动创建多对多关系表, forms组件
    sweetalert, bulk_create, 分页器
    orm查询优化, MVC与MTV, choices参数, ajax
    聚合查询, 分组查询, F与Q查询, 常见字段及参数, 自定义Char字段, 事务操作
    Contest2058
    ACM版《孔乙己》
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/13845192.html
Copyright © 2011-2022 走看看