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.在视图中定义事件

<el-form-item>
        <el-button type="primary" v-stream:click="searchData$">查询</el-button>
 </el-form-item>

b.在domStreams中定义

domStreams: ['searchData$']

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

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

全部代码如下：

//prod.vue
<template>
    <div style="padding: 15px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="出库单">
                <el-input v-model="formInline.so_id" placeholder="出库单"></el-input>
            </el-form-item>
            <el-form-item label="订单号">
                <el-input v-model="formInline.po_id" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="外部编码">
                <el-input v-model="formInline.out_id" placeholder="外部编码"></el-input>
            </el-form-item>
            <el-form-item label="客户">
                <el-input v-model="formInline.customer_id" placeholder="客户"></el-input>
            </el-form-item>

            <el-form-item label="开始时间">
                <el-date-picker v-model="formInline.st_time" type="datetime" placeholder="选择开始时间">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
                <el-date-picker v-model="formInline.end_time" type="datetime" placeholder="选择结束时间">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="制单人">
                <el-select v-model="formInline.maker_id" placeholder="制单人">
                    <el-option v-for="item in formInline.maker_id" label="区域一" value="shanghai"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="业务员">
                <el-select v-model="formInline.saler_id" placeholder="业务员">
                    <el-option label="区域一" value="shanghai"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-stream:click="searchData$">查询</el-button>
            </el-form-item>
        </el-form>

        <el-row class='btnGroup'>
            <el-button type="primary" size='mini' @click="showModal">添加</el-button>
            <el-button type="success" size='mini'>导出</el-button>
        </el-row>

        <el-table :data="tableData4" style="width: 100%" max-height="500" size="mini">
            <el-table-column fixed :prop="columns[0].prop" :label="columns[0].col" width="120">
            </el-table-column>

            <el-table-column v-for="(item, index) in columns" v-if='index!=0' :prop="item.prop" :label="item.col">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="updateRow(scope.$index, tableData4)" type="text" size="small">
                        编辑
                    </el-button>
                    <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">
                        删除
                    </el-button>
                    <el-button @click.native.prevent="checkRow(scope.$index, tableData4)" type="text" size="small">
                        审核
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import Prod from '@/views/prod/prod.component'

export default Prod
</script>
<style  src="./prod.scss" lang="scss" scoped>
</style>

//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 {

    }
}