同步操作将从 eric.fang/easy-management 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Easy Management (EZM) 后台管理系统是一整套全栈前后分离的 免费开源 中后台框架,可快速实现后台系统的用户权限、CRUD表格操作,帮助开发人员快速搭建基础后台功能。
DEMO演示地址:http://ezm.demo.fangjc1986.com:8078
github:https://github.com/fangjc1986/easy-management.git
gitee:https://gitee.com/ericfang/easy-management.git
邮件交流:fangjc1986@qq.com
生成器位置: src/generator ;
配置需要生成的数据表以及不需要生成的字段:src/generator/GeneratorConfig.js
module.exports = {
excludeFields: ['id', 'tenant_id', 'create_user', 'create_time', 'update_time', 'update_user'],
models: [
{
// 数据库表名
tableName: 'sys_dict',
// api前缀
apiPrefix: 'sys/dict',
// 页面生成位置
pagePath: 'base/dict',
},
{
tableName: 'sys_dict_detail',
apiPrefix: 'sys/dict-detail',
pagePath: 'base/dict_detail',
},
],
};
运行生成CRUD页面:src/generator/CodeGenerator.js
let Mysql = require("./MysqlUtil");
let Config = require("./GeneratorConfig");
let Generator = require("./GeneratorPage");
// 数据库名称
const schema = 'ezmpro';
for (let model of Config.models) {
let mysql = new Mysql();
mysql.connection.query(
`select * from information_schema.COLUMNS where table_name = '${model.tableName}' and table_schema = '${schema}'`,
(error, results, fields) => {
let generator = new Generator(results, model);
generator.generatorPage();
generator.generatorApi();
generator.generatorEdit();
generator.generatorFilter();
generator.generatorConfigMixin();
generator.generatorSelector();
mysql.connection.end();
}
);
}
后端生成CRUD接口生成器:com.fangjc1986.generator.CodeGenerator
Controller 模板位置: template/code_generator/controller.java.vm
如需自定义其他 Service, Mapper, Model 等模板,请自行查看 Mybatis-Plus 手册;
用生成器生成一个 入库单 的 CRUD 页面:
生成 5 个文件: receipt.vue, receipt_edit.vue, receipt_filter.vue, receipt_selector.vue, ReceiptConfigMixin.js
只需编辑 ReceiptConfigMixin.js 即可完成大部分功能;
大多数参数可不用填写;
editSpan: {}, // 编辑窗口默认 span 值
defaultEditGroupName: '', // 默认编辑分组名称
defaultFilterPrefix: '', // 默认过滤前缀(数据库表前缀)
fields:[
{
// COMMENT: 订单号
prop: 'orderCode',
label: '订单号',
editRender: true,
filterRender: true,
rules: [commonValidate.required,],
},
{
prop: 'name', // 字段名
importProp: 'name', // 导入中的prop
label: '名称', // 名称
importLabel: '名称', //导入中的名称
tableEdit: true, // 是否允许在table中编辑
editLabel: true, // 在编辑窗口被显示的字段
editValue: '', // 新增默认值
filterValue: '', // 筛选默认值
width: 200, // 列宽
show: true, // 是否显示列
addDisabled:false, // 新增时不可编辑
editDisabled:true, // 修改时不可编辑
addShow: true, // 新增显示
editShow: true, // 编辑显示
filterDisabled:true, // 筛选不可编辑
filters: [{data: ""}], // 开启 table 中筛选
filterRender: true, // 过滤渲染配置
formatter: formatterByOptions, // 自动转换 options
editGroup:'基本信息', // 编辑分组
editRemarkText: '新增时密码必须填写', // 编辑时的字段备注内容
editRender: { // 编辑渲染方式
name: 'EzmTextInput', // 渲染组件
isLabelValue: '', // 是否将Label 作为 key 来操作
// 组件 在触发 $emit('input',v) 之前会执行此函数的返回, v 为原本要 input 的参数
outputFormatter(v){
return v + 1;
},
// 组件 value 变换时将自动通过此函数转换
inputFormatter(v){
return v + 2;
},
},
cellRender: true, // 内容渲染
editWidth: '20px', // 编辑窗口中的 input 或 select 的宽度
filterWidth: '200px', // 过滤窗口中的 input 或 select 的宽度
// 字段额外参数
params: {
filterField: 'prop', // 过滤使用字段名
// 表格中过滤字段追加后缀
filterSuffix: '_like',
filterPrefix: 't.',
// 默认筛选
defaultFilterOptions:[
{label: '选择全部', value: ''},
],
// 筛选选项
options: [
{label: '菜单页面', value: 1},
{label: 'API接口', value: 2},
],
// 过滤前缀
},
// 验证规则
rules: [
commonValidate.required,
],
// 编辑窗口中本字段所占用的宽度
editSpan:{
sm: 12, // >=768
md: 8, // >= 992
lg: 6, // >= 1200
xl: 4, // >= 1920
span: 12,
}
}
]
渲染组件可直接使用自定义组件并支持require写法:
require 方式加载的组件都会自动注册到 vxe-table 中
开发人员可自行写一个 带 value 和 $emit('input', v) 的组件即可,其他事情框架会自行装配。
editRender: {
name: require("@/views/wms/company/company-selector").default,
props: {
fieldValue: 'name',
fieldShow: 'name',
canEdit: true,
},
on: {
'on-change': list => {
this.editForm.companyId = list.length ? list[0].id : '';
}
}
},
其他更多内容与疑问请查看源码或 邮件(fangjc1986@qq.com) 交流,谢谢。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。