只需restful一份文档，即可完成数据的渲染，vue组件化之封

相对于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});
      }