【IMWeb训练营作业】vue组件

官方语：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

而其中：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

以下就是在学习了IMWeb vue课程结合自己的工作写的小组件

template模版

<template>

<div>

<divclass="search clearfix mt20">

<span>

<spanclass="mr5">供应商</span>

<inputtype="search"class="com-ipt width"placeholder="输入关键字"v-model="dataOut.search.SupplierName" @keydown.enter="initPageData(1)"maxlength="50">

</span>

<buttonclass="btn btn-primary ml10" @click="initPageData(1)">搜索</button>

</div>

<tableclass="table text-center table-hover table-odd table-bordered datalist">

<thead>

<tr>

<th>供应商</th>

<thstyle="width:15%;">余额（元）</th>

<thstyle="width:15%;">返利（元）</th>

<thstyle="width:15%;">额度（元）</th>

<thstyle="width:25%">操作</th>

</tr>

</thead>

<tbody>

<trv-for="itemof dataIn.arrDataTable">

<td>

{{item.Name}}

</td>

<td>

<pclass="text-nowrap">{{item.CashAmount}}</p>

</td>

<td>

<pclass="text-nowrap">{{item.RebateAmount}}</p>

</td>

<td>

<pclass="text-nowrap">{{item.CreditAmount}}</p>

</td>

<td>

<divclass="action">

<ahref="javascript:;"class="item" @click="addCash_Click(item,1)">充值</a>

<ahref="javascript:;"class="item" @click="checkCash_Click(item,1)">付款</a>

<av-link="{name:'supplierAmountCheck',params:{supplierName:item.Name}}"class="item">对账</a>

<ahref="javascript:;"class="item">账户名细</a>

<ahref="javascript:;"class="item" @click="th_Click(item)">交易历史</a>

</div>

</td>

</tr>

</tbody>

<tbodyv-if="dataIn.inited&&!dataIn.arrDataTable.length>0">

<tr>

<tdcolspan=5>

<divclass="data-empty">

<iclass="icon"></i>

<pclass="font-big text">暂无相关数据</p>

</div>

</td>

</tr>

</tbody>

</table>

<divclass="text-center">

<divclass="pageBox"></div>

</div>

<add-cash :show.sync="isShowAddCash" :obj-cur-item="objCurItem" :is-supplier="isSupplier" @on-add-ok="dispatchAddOk()"></add-cash>

<check-cash :show.sync="isShowCheckCash" :obj-cur-item="objCurItem" :is-supplier="isSupplier" @on-Check-ok="dispatchCheckOk()"></check-cash>

<trade-history :show.sync="isShowTradeHistory"type="supplier" :obj="objCurItem"></trade-history>

</div>

</template>

js

<script>

import addCashfrom './../popup/addCash.vue';

import checkCashfrom './../popup/checkCash.vue';

import tradeHistoryfrom './../popup/tradeHistory.vue';

export default {

data() {

return {

isShowAddCash: false,

isShowCheckCash: false,

isShowTradeHistory: false,

isSupplier: 0,

objCurItem: {},

APILIST: {

LIST: '/Api/Finance/SupplierListAccount',

},

dataIn: {

inited: false,

arrDataTable: []

},

dataOut: {

search: {

SupplierName: '',

BranchName: '',

}

}

}

},

components: {

addCash,

checkCash,

tradeHistory

},

methods: {

initPageData(pageIndex= 1) {

this.pageIndex= pageIndex;

var me= this;

var para= this.dataOut.search;

para.PageIndex= pageIndex;

para.PageSize= 15;

fetchData({

API: this.APILIST.LIST,

para,

callback(data) {

me.dataIn.inited= true;

me.dataIn.arrDataTable= data.Data;

initPage(me.$el,data.TotalPages,data.TotalRows,me.initPageData,pageIndex);

}

})

},

th_Click(item) {

this.objCurItem= item;

this.isShowTradeHistory= true;

},

//充值

addCash_Click(item,isSupplier) {

this.objCurItem= item;

this.isSupplier= isSupplier|| 0;

this.isShowAddCash= true;

},

//充完操作

dispatchAddOk() {

this.initPageData(this.pageIndex);

},

//核算，收款

checkCash_Click(item,isSupplier) {

this.objCurItem= item;

this.isSupplier= isSupplier|| 0;

this.isShowCheckCash= true;

},

//核完操作

dispatchCheckOk() {

this.initPageData(this.pageIndex);

},

},

ready() {

this.initPageData(1);

}

}

</script>