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
129
130
131
132
133
134
135
136
137
138
139
140
141
<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body="true" destroy-on-close width="35%"
        @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: '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
            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 }
                return obj
            })
        }
    },
    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>