相對于react,vue更具備的是靈活,對于vue的使用之前一直使用的是vue+vuex+vuex的組合,但是用起來,不是很方便,手動組合的代碼塊太多。聽到朋友的想法,是簡單的列表只需要很簡單的配置就可以完成組件的使用。
簡單的使用:需要三個屬性傳遞
注:案例是結合es6 +vue+vuex+typescript使用的
1.form
這個是列表的查詢formProp
formProp: {
type: Object,
default: function () {
return {};
}
}
//還需做屬性觀察,便于prop的雙向傳遞,傳遞到本地的model的form
watch: {
formProp (val) {
this.form = val;
}
},
2.需提供一個對于后端的BaseCURDServiceClient(此為抽象類)的實現
//屬性聲明
// 包含curd
httpClientService: {
type: Object,
default: function () {
return new BaseCURDServiceClient()
}
},
定義抽象類,定義三個操作方法 find delete action
/*
作為CURDService
*/
import {Feign, ResultDto} from "../../annotation/feign/Feign";
import {Pageable} from "./Pageable";
abstract class BaseCURDServiceClient extends Feign{
public abstract async find?(parameters:any):Promise<ResultDto<Pageable<object>>>
public abstract async delete?(id:number):Promise<ResultDto<object>>
public async action?(actionBody:object):Promise<ResultDto<object>>
}
export default BaseCURDServiceClient;
比如此處使用的案例是RoleService
@FeignClient({resourceName:"indexService", baseUrl:Applicaiton.applicaiton["domain"]["dfs"]})
export default class IndexService extends Feign{
@Get("/api/oauth/role",true)
public async find?(parameters:any):Promise<ResultDto<Pageable<Role>>>{return;}
@Delete("/api/oauth/role/:id")
public async delete?(id:number):Promise<ResultDto<object>>{return;}
@Post("/api/oauth/role")
public async action?(role:Role):Promise<ResultDto<object>>{return;}
}
使用者只需跟后端對應的path,就可靈活的使用了
3.columnsProp列屬性傳遞
使用者只需如下使用即可
<ui-rich-table :form="form" :columnsProp="columns" :httpClientService="httpClientService"></ui-rich-table>
至于內部組件構造,比較重要的是vuex的局部store,往常使用,項目里是把store作為一個集合放在一個包中,比如
圖片.png
但如此不易分離組件,所以需要分離出一個獨立的store,且該狀態管理依賴到組件內部vuex包內部
他的state定義如下
export default function store(client:BaseCURDServiceClient){
return new Vuex.Store({
state: {
dataSource: {
pageable: {
loading: true,
current: 0,
total: 100,
pageSize: 10
},
data: []
},
services:{
clientService: client
},
notice: {
code: '',
content: ''
}
}
此處的datasource就是與UI息息相關的數據綁定,clientService是與后端CRUD的交互服務,notice是各操作在UI體現的通知UI,至于分頁與掛載時機如下
methods: {
pageChange (page) {
this.store.dispatch('find', {...this.form, page: page, size: this.dataSource.pageable.pageSize});
},
pageSizeChange (size) {
this.store.dispatch('find', {...this.form, page: this.dataSource.pageable.current, size: size});
},
handleSubmit () {
this.find({...this.form, page: this.dataSource.pageable.current, size: this.dataSource.pageable.pageSize});
},
deleteRecord (deleteForm) {
// this.$emit('deleteById', deleteForm);
this.store.dispatch('delete', deleteForm);
},
// editRecord (editForm) {
// this.$emit('editRecord', editForm);
// }
},
mounted () {
this.store.dispatch('find', {...this.form, page: 1, size: 10});
}