<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 class="transfer-panel">
<div class="transfer-panel-tit">未匹配数据</div>
<div class="transfer-panel-search">
<el-input
v-model="searchLeft"
placeholder="请输入"
@input="filterFn"
@focus="focusEvent"
/>
<span class="transfer-panel-search-icon"><i class="el-input__icon el-icon-search" /></span>
</div>
<div class="transfer-panel-list">
<ul>
<li v-for="(item,index) in data" :key="index" :class="{cur:index===currentIndex}" @click="currentDepartment(index,item)" @dblclick="dblcurrentDepartment(index,item)">{{ item.strdepartmentcodeandname }}</li>
</ul>
</div>
</div>
<div class="transfer__buttons">
<el-button :disabled="!toLeftBtn" type="primary" @click="toLeftFn"><span><i class="el-icon-arrow-left" /></span></el-button><br>
<el-button :disabled="!toRightBtn" type="primary" style="margin-top:10px" @click="toRightFn"><span><i class="el-icon-arrow-right" /></span></el-button>
</div>
<div class="transfer-panel" style="height:304px">
<div class="transfer-panel-tit">已匹配数据</div>
<div class="transfer-panel-search">
<!-- <el-input
v-model="searchRight"
placeholder="请输入"
/>
<span class="transfer-panel-search-icon"><i class="el-input__icon el-icon-search" /></span> -->
</div>
<div class="transfer-panel-list">
<ul>
<li :class="{cur:isRightListClick}" @click="rightListClick" @dblclick="dblrightListClick">{{ Matched.strdepartmentcodeandname }}</li>
</ul>
</div>
</div>
<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'
const PinyinEngine = require('pinyin-engine')
export default {
name: 'MatchDialog',
data() {
return {
data: [],
searchLeft: '', // 搜索左侧
searchRight: '', // 搜索右侧
dialog: {
isShow: false
},
lngdepartmentid: '',
pinyinEngine: null,
currentMatch: {}, // 临时存储单击选中的数据
Matched: { // 右侧数据
// 'lngdepartmentid': '',
// 'strdepartmentcodeandname': ''
},
toLeftBtn: false,
toRightBtn: false,
currentIndex: '', // 当前点击的索引
isRightListClick: false // 右侧列表是否点击
}
},
methods: {
show(row) {
this.dialog.isShow = true
this.lngdepartmentid = row.lngdepartmentid
this.Matched = {}
if (row.lngmatedepartmentid) {
this.Matched.lngdepartmentid = row.lngmatedepartmentid
this.Matched.strdepartmentcodeandname = row.strmatedepartmentcodeandname
}
},
openDialog() {
this.searchLeft = ''
this.searchRight = ''
this.currentIndex = ''
this.currentMatch = {}
this.toRightBtn = false
this.toLeftBtn = false
},
// 单击选中的数据
currentDepartment(index, item) {
this.currentIndex = index
this.currentMatch = item
this.toRightBtn = true
},
// 左侧双击选中的数据
dblcurrentDepartment(index, item) {
this.data.splice(index, 1)
if (this.Matched.lngdepartmentid) {
this.data.push(this.Matched)
}
this.Matched = item
this.toRightBtn = false
this.toLeftBtn = false
this.currentIndex = ''
this.isRightListClick = false
},
// 右侧双击选中的数据
dblrightListClick() {
this.data.push(this.Matched)
this.Matched = {}
this.currentMatch = {}
this.toRightBtn = false
this.toLeftBtn = false
this.currentIndex = ''
this.isRightListClick = false
},
// 向右按钮
toRightFn() {
this.data.splice(this.currentIndex, 1)
if (this.Matched.lngdepartmentid) {
this.data.push(this.Matched)
}
this.Matched = this.currentMatch
this.toRightBtn = false
this.toLeftBtn = false
this.currentIndex = ''
this.isRightListClick = false
},
// 向左按钮
toLeftFn() {
this.data.push(this.Matched)
this.Matched = {}
this.currentMatch = {}
this.toRightBtn = false
this.toLeftBtn = false
this.currentIndex = ''
this.isRightListClick = false
},
// 右侧列表选中
rightListClick() {
this.isRightListClick = true
this.toLeftBtn = true
},
save() {
if (!this.Matched.lngdepartmentid) {
this.$message.error('请选择一条数据')
return false
}
matching({
'lngdepartmentid': this.lngdepartmentid,
'lngmatedepartmentid': this.Matched.lngdepartmentid
}
).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
this.pinyinEngine = new PinyinEngine(this.data, ['strdepartmentcodeandname'])
}
})
},
filterFn() {
this.data = this.pinyinEngine.query(this.searchLeft)
},
focusEvent(e) {
if (!e.target.value) {
this.data = this.pinyinEngine.query('')
}
}
// 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}
.transfer-panel {
border: 1px solid #e6ebf5;
border-radius: 4px;
overflow: hidden;
background: #fff;
display: inline-block;
vertical-align: middle;
260px;
max-height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.transfer-panel-tit {
height: 40px;
line-height: 40px;
background: #F5F7FA;
margin: 0;
padding-left: 15px;
border-bottom: 1px solid #e6ebf5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #000;
font-size: 16px;
color: #303133;
font-weight: normal;
}
.transfer-panel-search{
text-align: center;
margin: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
auto;
position: relative;
}
.transfer-panel-search .el-input__inner {
border: none;
border-bottom: 1px solid #DCDFE6;
border-radius: 0;
height: 32px;
100%;
font-size: 12px;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 16px;
padding-right: 10px;
padding-left: 30px;
}
.transfer-panel-search-icon {
position: absolute;
height: 100%;
left: 5px;
top: 0;
text-align: center;
color: #C0C4CC;
-webkit-transition: all .3s;
transition: all .3s;
line-height:32px
}
.transfer-panel-search-icon .el-input__icon {
line-height:32px
}
.transfer-panel-list {
100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 24px;
line-height: 30px;
}
.transfer-panel-list ul {height:200px; overflow:auto}
.transfer-panel-list ul li {cursor:pointer;}
.transfer-panel-list ul li.cur{color:#00A99D}
.transfer__buttons{display:inline-block;margin:0px 20px}
</style>