【IMWeb训练营作业】vue组件

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

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

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

template模版

< template>

< div >

< div class = "search clearfix mt20" >

< span >

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

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

</ span >

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

</ div >

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

< thead >

< tr >

< th >供应商 </ th >

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

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

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

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

</ tr >

</ thead >

< tbody >

< tr v-for = " item of dataIn . arrDataTable " >

< td >

{{ item. Name}}

</ td >

< td >

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

</ td >

< td >

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

</ td >

< td >

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

</ td >

< td >

< div class = "action" >

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

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

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

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

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

</ div >

</ td >

</ tr >

</ tbody >

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

< tr >

< td colspan =5>

< div class = "data-empty" >

< i class = "icon" ></ i >

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

</ div >

</ td >

</ tr >

</ tbody >

</ table >

< div class = "text-center" >

< div class = "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 addCash from './../popup/addCash.vue';

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

import tradeHistory from './../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>