app-autocomplete.tsx

import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import './app-autocomplete.less';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({})
export default class AppAutocomplete extends Vue {

    /**
     * 表单数据
     *
     * @type {*}
     * @memberof AppAutocomplete
     */
    @Prop() public data: any;

    /**
     * 是否启用
     *
     * @type {boolean}
     * @memberof AppAutocomplete
     */
    @Prop() public disabled?: boolean;

    /**
     * 属性项名称
     *
     * @type {string}
     * @memberof AppAutocomplete
     */
    @Prop() public name!: string;

    /**
     * 值项名称
     *
     * @type {string}
     * @memberof AppAutocomplete
     */
    @Prop() public valueitem?: string;

    /**
     * 值
     *
     * @type {*}
     * @memberof AppPicker
     */
    @Model('change') public value?: any;

    /**
     * 当前值
     *
     * @type {string}
     * @memberof AppPicker
     */
    public curvalue: string = '';

    /**
     * 远程请求url 地址
     *
     * @type {string}
     * @memberof AppAutocomplete
     */
    @Prop() public url?: string;

    /**
     * 数组
     *
     * @type {any[]}
     * @memberof AppAutocomplete
     */
    public items: any[] = [];

    /**
     * 输入状态
     *
     * @type {boolean}
     * @memberof AppAutocomplete
     */
    public inputState: boolean = false;

    /**
     * 值变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppPicker
     */
    @Watch('value')
    public onValueChange(newVal: any, oldVal: any) {
        this.curvalue = newVal;
    }

    /**
     * 执行搜索数据
     * @param query 
     * @param callback 
     */
    public onSearch(query: any, callback: any): void {
        query = !query ? '' : query;
        if (!this.inputState && Object.is(query, this.value)) {
            query = '';
        }
        this.inputState = false;
        const url = `${this.url}${this.name}/ac`;
        let param: any = {};
        Object.assign(param, this.data);
        // 清除值项
        if (this.valueitem) {
            delete param[this.valueitem];
        }
        Object.assign(param, { [this.name]: query });

        this.$http.post(url, param).then((response: any) => {
            if (!response || response.status !== 200) {
                this.$Notice.error({ title: '错误', desc: '请求异常' });
            } else {
                this.items = [...response.data];
            }
            if (callback) {
                callback(this.items);
            }
        }).catch((error: any) => {
            if (callback) {
                callback([]);
            }
        });
    }

    /**
     * 选中数据回调
     * @param item 
     */
    public onACSelect(item: any): void {
        if (this.name) {
            this.$emit('formitemvaluechange', { name: this.name, value: item.text });
        }
        if (this.valueitem) {
            this.$emit('formitemvaluechange', { name: this.valueitem, value: item.value });
        }

    }

    /**
     * 输入过程中
     *
     * @memberof AppAutocomplete
     */
    public onInput($event: any) {
        if (Object.is($event, this.value)) {
            this.inputState = true;
        }
    }

    /**
     * 失去焦点事件
     * @param e 
     */
    public onBlur(e: any): void {
        let val: string = e.target.value;
        if (!Object.is(val, this.value)) {
            this.onACSelect({ text: val, value: '' });
        }
        this.$forceUpdate();
    }

    /**
     * 清除
     */
    public onClear($event: any): void {
        if (this.name) {
            this.$emit('formitemvaluechange', { name: this.name, value: '' });
        }
        if (this.valueitem) {
            this.$emit('formitemvaluechange', { name: this.valueitem, value: '' });
        }
        this.$forceUpdate();
    }

    /**
     * 绘制内容
     *
     * @returns
     * @memberof AppAutocomplete
     */
    public render() {
        return (
            <el-autocomplete class='text-value' value-key='text' disabled={this.disabled} v-model={this.curvalue} size='small'
                trigger-on-focus={true} fetch-suggestions={(query: any, callback: any) => { this.onSearch(query, callback) }} on-select={(item: any) => { this.onACSelect(item) }}
                on-input={($event: any) => this.onInput($event)} on-blur={($event: any) => { this.onBlur($event) }} style='width:100%;'>
                <template slot='suffix'>
                    {(this.curvalue && !this.disabled) ? <i class='el-icon-circle-close' on-click={($event: any) => { this.onClear($event) }}></i> : ''}
                    <i class="el-icon-arrow-down"></i>
                </template >
            </el-autocomplete>
        );
    }
}