上一篇文章中说了如何在项目中引用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 {
}
}
