<template>
|
<el-dialog :title="title" :visible.sync="dialogVisible" append-to-body="true" destroy-on-close width="50%"
|
@close="handelClose">
|
<el-form :model="form">
|
<el-form-item label="查询条件" label-width="70px" size="small">
|
<el-input v-model="inputVal" autocomplete="off" @change="handleQuery"></el-input>
|
</el-form-item>
|
</el-form>
|
<p class="text_tip">*选择分类进行属性过滤, 或者输入属性的全拼或者简拼进行查询! 如: 姓名 (可输入xm或xinming )</p>
|
<div style="width: 100%; display: flex; justify-content: space-around">
|
<transfer v-model="transferValue" :data="newdata" :filter-method="filterMethod"
|
:filter-placeholder="filterPlaceholder" :props="props"></transfer>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible = false">取 消</el-button>
|
<el-button type="primary" @click="handelTransferSave">保 存</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
<script>
|
import transfer from '@/components/transfer/index'
|
import pinyin from 'js-pinyin'
|
|
export default {
|
components: {
|
transfer
|
},
|
name: 'IntegrationTransfer',
|
props: {
|
// 是否打开
|
visible: {
|
typeof: Boolean,
|
default: false
|
},
|
// 弹窗标题
|
title: {
|
typeof: String,
|
default: '编码属性'
|
},
|
// 数据源
|
data: {
|
typeof: Array,
|
default: () => []
|
},
|
// 数据默认值得props
|
props: {
|
typeof: Object,
|
default: () => {
|
return {
|
label: 'label',
|
key: 'key',
|
disabled: 'disabled'
|
};
|
}
|
},
|
// 如果有特殊操作，一条数据只能用一次的操作，就需要把禁用的数据字段用lebel对应的值传递过来
|
disabledData: {
|
typeof: Array,
|
default: () => []
|
},
|
// 查询文本框的placeholder
|
filterPlaceholder: {
|
typeof: String,
|
default: '请输入拼音全拼或者拼音缩写'
|
}
|
},
|
data() {
|
return {
|
inputVal: '',
|
transferValue: this.value,
|
dialogVisible: this.visible,
|
}
|
},
|
watch: {
|
visible(n) {
|
this.dialogVisible = n;
|
},
|
dialogVisible(n) {
|
this.$emit('update:visible', n)
|
},
|
},
|
computed: {
|
newdata() {
|
pinyin.setOptions({checkPolyphone: false, charCase: 1});
|
|
let name = this.props.label;
|
let key = this.props.key;
|
|
if (Array.isArray(this.data)) {
|
let data = this.data.map(item => {
|
let objitem = {disabled: false, ...item};
|
if (this.disabledData.length !== 0) {
|
this.disabledData.forEach(element => {
|
if (objitem[name] === element) objitem.disabled = true;
|
});
|
}
|
return objitem;
|
});
|
return data.map(item => {
|
let pinYin = pinyin.getFullChars(item[this.props.label]);
|
let renPing = pinyin.getCamelChars(item[this.props.label]);
|
const obj = {
|
pinyins: pinYin,
|
renPing: renPing,
|
[name]: item[this.props.label],
|
[key]: item[this.props.key],
|
disabled: item.disabled,
|
id:item.id
|
};
|
return obj;
|
});
|
} else {
|
return []; // 在没有数据时返回一个空数组
|
}
|
}
|
},
|
methods: {
|
// 新增弹窗查询按钮
|
handleQuery(event) {
|
this.inputVal = event
|
},
|
// 穿梭框查询数据过滤（双条件）
|
filterMethod(query, item) {
|
return item.pinyins.indexOf(this.inputVal) > -1 || item.renPing.indexOf(this.inputVal) > -1
|
},
|
// 关闭清除所有数据
|
handelClose() {
|
this.transferValue = []
|
this.inputVal = ''
|
this.visible = false
|
},
|
// 确定按钮，返回当前数据和修改后的数据
|
handelTransferSave() {
|
let that = this
|
let datas = that.newdata
|
const findtra = datas.findIndex(item => item.oid === that.transferValue[0].oid)
|
datas[findtra].disabled = true
|
const obj = {
|
// 当前选择的数据
|
value: this.transferValue,
|
// 总数据
|
data: datas
|
}
|
that.$emit('save', obj)
|
that.transferValue = []
|
that.inputVal = ''
|
},
|
}
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
.text_tip {
|
padding: 10px 0;
|
color: #F56C6C;
|
}
|
</style>
|
