springboot2+element ui 深度封装框架

本框架适合企业级管理系统(界面紧凑,美观就差些),演示demo: http://devpt.cn

前端基于element ui,但是用户用惯了客户端,提了想当多的需求,,因此对elementui做了许多扩展(如果你熟悉easyui,会发现相似性,因此框架也变得很重)

该框架,封装也重,才能让程序员更快速的开发:

• 布局支持拖动缩放加title
• 前后端统一命名:如前端grid与springboot,增删改查的代码全部实现

<pt-com-grid :pageSizes="[20,1000,10000]" :ptQuery="ptQuery" ref="grid" url="/login/demo/PtDemoTable"

• 列表实现excel导出导入,pdf打印等等 
• 列表自定义展示,冻结,排序
• 首页自定义布局
• 快速开发:一行代码实现文件上传

<PtFileUpload multiple ref="fileUpload"></PtFileUpload>

•  列表行内编辑(统一封装更少的代码实现增删改查):后端代码

public PtGrid find(PtQuery ptQuery) {
    String jpql = "select a from PtDemoTable a where 1=1 ";
    QueryParams params = new QueryParams();
    String anyQuery = ptQuery.getStr("anyQuery");
    if (PtUtil.strNotNull(anyQuery)) {
        jpql += " and a.name like :anyQuery";
        params.addParam("anyQuery", "%" + anyQuery + "%");
    }
    PtGrid list = JpaUtil.findAll(jpql, params, ptQuery);
    return list;
}

 

• 列表行内编辑前端

<pt-com-grid :pageSizes="[20,1000,10000]" :ptQuery="ptQuery" ref="grid" url="/login/demo/PtDemoTable"
             visualScroll>
  <div class="pt-query-container" slot="query">
    <el-input @keyup.enter.native="$refs.grid.doQuery()" class="filter-item" placeholder="名称"
              style="width: 200px;"
              v-model="ptQuery.query.anyQuery">
    </el-input>
     <pt-button @click="$refs.grid.doQuery()" class="filter-item" icon="search" keyType="query" ref="q"
               type="primary">搜索
    </pt-button>
    <pt-button @click="$refs.grid.doEdit('')" class="filter-item" icon="edit" keyType="add" ref="a"
               type="primary">新增
    </pt-button>
    <pt-button @click="editByForm()" class="filter-item" icon="edit" keyType="add" ref="a"
               type="primary">Form新增
    </pt-button>
    <pt-button @click="addManyData" class="filter-item" icon="edit" keyType="add" ref="a"
               type="primary" v-loading="isLoading">增加1000条数据
    </pt-button>
    <pt-button @click="$refs.grid.doRemoveAll()" class="filter-item" keyType="del" ref="d" type="danger">删除
    </pt-button>
  </div>
  <pt-table-column align="center" fixed="right" label="操作" width="100px">
    <template slot-scope="scope">
      <PtGridEditBtn :row="scope.row" gridRef="grid"></PtGridEditBtn>
    </template>
  </pt-table-column>
  <pt-table-column :inputFormat="(d,row)=>row.dropCodeStr" :inputProp="{ field:'DEMO_DROP'}" :rules="$r(1)"
                   align="center"
                   input="PtDrop" label="普通下拉" prop="dropCode" sortable txtVal="dropCodeStr" width="100px">
  </pt-table-column>
  <pt-table-column :input="require('./UserTableDrop').default" :inputFormat="(d,row)=>row.dropGridStr"
                   :rules="$r(0,0,50)" align="center"
                   idVal="dropGridId" label="列表下拉" prop="dropGridId" sortable
                   txtVal="dropGridStr" width="auto">
  </pt-table-column>
  <pt-table-column :inputProp="$time" :rules="$r(0)" align="center" input="el-date-picker" label="时间"
                   prop="dateTime"
                   sortable width="200px">
  </pt-table-column>
  <pt-table-column :rules="$r(1,3,10)" align="center" label="文本(3-10字符)" prop="name"
                   sortable width="auto">
  </pt-table-column>
  <pt-table-column :rules="$r(0,0,999999,'number',2)" align="center" input="PtNum" label="数字(2位小数)" prop="sorter"
                   sortable width="auto">
  </pt-table-column>
</pt-com-grid>