上一篇文章中說了如何在項(xiàng)目中引用vue-rx和rxjs挖炬， 今天來講一下如何實(shí)現(xiàn)一個(gè)簡單的查詢功能，廢話不多說直接上代碼峡捡。
這里主要講一個(gè)運(yùn)用vue-rx+rxjs+element-ui實(shí)現(xiàn)的一個(gè)查詢功能：
1型诚、項(xiàng)目中集成了vue-rx的時(shí)候會(huì)在vue中新增一個(gè)鉤子函數(shù)subscriptions,和之前的data類似的使用。
2认烁、domStreams是一個(gè)數(shù)組用來存放事件。
3介汹、屬性的使用却嗡。
subscriptions: function () {
return {
tableData4: Observable.of([]), //定義發(fā)送一個(gè)數(shù)組
formInline: Observable.of({ // 定義發(fā)送一個(gè)查詢對(duì)象
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定義事件賦值給哪個(gè)變量
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="訂單號(hào)">
<el-input v-model="formInline.po_id" placeholder="訂單號(hào)"></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="開始時(shí)間">
<el-date-picker v-model="formInline.st_time" type="datetime" placeholder="選擇開始時(shí)間">
</el-date-picker>
</el-form-item>
<el-form-item label="結(jié)束時(shí)間">
<el-date-picker v-model="formInline.end_time" type="datetime" placeholder="選擇結(jié)束時(shí)間">
</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="區(qū)域一" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item label="業(yè)務(wù)員">
<el-select v-model="formInline.saler_id" placeholder="業(yè)務(wù)員">
<el-option label="區(qū)域一" 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'>導(dǎo)出</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: '業(yè)務(wù)員',
prop: 'ORDER_NAME'
}, {
col: '業(yè)務(wù)員ID',
prop: 'BILL_ORDER_USER'
}, {
col: '訂單號(hào)',
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 {
}
}
