1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body="true" destroy-on-close width="30%"
        @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>
        <transfer v-model="transferValue" :data="newdata" :filter-method="filterMethod"
            :filter-placeholder="filterPlaceholder" :props="props"></transfer>
        <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: 'Integration',
    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'
                };
            }
        },
        // 查询文本框的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
            let objs = this.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, disabled: false, [name]: item[this.props.label], [key]: item[this.props.key] }
                return obj
            })
            console.log(objs)
            return objs
        }
    },
    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>