vue+vue-rx+rxjs实现一个简单的查询功能

上一篇文章中说了如何在项目中引用vue-rx和rxjs， 今天来讲一下如何实现一个简单的查询功能，废话不多说直接上代码。
这里主要讲一个运用vue-rx+rxjs+element-ui实现的一个查询功能：

1、项目中集成了vue-rx的时候会在vue中新增一个钩子函数subscriptions,和之前的data类似的使用。

2、domStreams是一个数组用来存放事件。

3、属性的使用。

subscriptions: function () {
        return {
            tableData4: Observable.of([]),  //定义发送一个数组
            formInline: Observable.of({  // 定义发送一个查询对象
                so_id: '',
                po_id: '',
                out_id: '',
                customer_id: '',
                st_time: '',
                end_time: '',
                maker_id: '',
                saler_id: ''
            })
        }
    }

4、事件的使用
a.在视图中定义事件

        查询
 

b.在domStreams中定义

domStreams: ['searchData$']

c.在subscriptions定义事件赋值给哪个变量

 sd$: me.searchData$.map(function (e: any) {
         me.getInfo()
 })

全部代码如下：

//prod.vue

//prod.component.ts 文件

import { Component, Vue, Model, Provide } from 'vue-property-decorator';
import { Observable, interval, fromEvent, merge, Subject } from 'rxjs'
import httpServer from '../axios/http'
import ProdModal from '@/views/prod/components/prodAdd.modal.vue'
import moment from 'moment'

@Component({
    name: 'prod',
    components: {
    },
    domStreams: ['searchData$'],
    subscriptions: function () {
        const me = this;
        return {
            tableData4: Observable.of([]),
            formInline: Observable.of({
                so_id: '',
                po_id: '',
                out_id: '',
                customer_id: '',
                st_time: '',
                end_time: '',
                maker_id: '',
                saler_id: ''
            }),
            sd$: me.searchData$.map(function (e: any) {
                me.getInfo()
            }),
        }
    }
})

export default class Prod extends Vue {
    columns: any = [{
        col: '电芯出库单',
        prop: 'BILL_ASM_CELL'
    },
    {
        col: '出库日期',
        prop: 'BILL_DATE'
    },
    {
        col: '客户',
        prop: 'NAME'
    },
    {
        col: '客户ID',
        prop: 'BIZ_ID'
    },
    {
        col: '业务员',
        prop: 'ORDER_NAME'
    }, {
        col: '业务员ID',
        prop: 'BILL_ORDER_USER'
    }, {
        col: '订单号',
        prop: 'BILL_PROD_REQ'
    }, {
        col: '备注',
        prop: 'EVT_CMT'
    }, {
        col: '制单人',
        prop: 'BIZ_NAME'
    }, {
        col: '制单人ID',
        prop: 'BILL_ORDER_USER'
    }, {
        col: '是否审核',
        prop: 'BILL_AUDIT_FLAG'
    }]

    created(): void {
        this.getInfo();
    }

    getInfo() {
        let me = this;
        let st = this.formInline.st_time == '' ? '' : moment(this.formInline.st_time).format('YYYY-MM-DD hh:mm:ss')
        let ed = this.formInline.end_time == '' ? '' : moment(this.formInline.end_time).format('YYYY-MM-DD hh:mm:ss')
        httpServer({
            method: 'get',
            url: `/api/query/page/getBillListByCond/1.01/param;pageSize=30;pageNo=1;state=N;so_id=${me.formInline.so_id};po_id=${me.formInline.po_id};rets_name=${me.formInline.out_id};biz_id=${me.formInline.customer_id};start_date=${st};end_date=${ed};bill_user=${me.formInline.saler_id};order_user=${me.formInline.maker_id};`,
            timeout: 100000,
            params: '',
            data: '',
        }).then((data: any) => {
            me.tableData4 = data['result'];
        });
    }

    mounted(): void {

    }
}