# oui-auto-router-include

**Repository Path**: flyer555_admin/oui-auto-router-include

## Basic Information

- **Project Name**: oui-auto-router-include
- **Description**: 1、开发环境       只需nginx服务，将静态页面模板资源放入nignx静态路径位置即可2、前端自动路由机制3、前端include url机制4、无需任何编译环境，只需记事本即可完成开发5、支持vue模板组件6、支持artTemplate模板组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-10-04
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# oui-auto-router-include
## 项目目标
	# 前端组件自动化生产
	
	# 后端服务自动化生产
	
	# 业务系统自动化生产
	
	# 业务服务自动化测试
	
	# 业务服务自动化运维
	
	# 业务日志自动化分析
##

## 项目清单
	# 1.前端自动路由机制【2019-10-4】【已完成】
	
	# 2.前端vue组件include机制【2019-10-6】【已完成】
	
	# 3.前端vue组件与非vue组件混合开发机制【2019-10-6】【已完成】
	
	# 4.前端通用组件框架( 跨框架类型融合 vue、react、art.... )【2019-10-6】【已完成】
	
	# 5.前端-通用表单设计器-跨框架类型组件适配机制(支持vue、art)【2019-10-13】【已经完成】
	
	# 6.前端通用表单设计器-控件类型扩展机制【2019-10-16】【已经完成】
	
	# 7.前端通用表单设计器-控件的业务属性扩展机制【2019-10-16】【已经完成】
	
	# 8.前端通用表单设计器
		# 1).支持页面脚本自定义【2019-10-30】【已经完成】
		# 2).按钮事件自定义【2019-10-30】【已经完成】
		# 3).表格布局设计，支持合并、拆分、添加列，添加行，在设计态通过拖拽控制宽度，运行态则响应式百分比宽度【2019-10-30】【已经完成】
		# 4).数据表格设计，支持合并列头(复杂表头)，在设计态设计的最后一行的列作为数据呈现列【2019-10-30】【已经完成】
		# 5).主表数据编辑与回填，自定义脚本填充表单，自定义脚本获取表单数据【2019-10-30】【已经完成】
		# 6).表格数据编辑与回填,支持明细表数据的维护增 删 改 查【2019-10-30】【已经完成】
		# 7).表格数据-查询条件组件【TODO】
		# 8).表格数据-分页组件【TODO】
		前端通用表单设计器-对接后端运行态数据保存与回填【TODO】->需要前后端联调数据的维护

	# 9.前端通用表单设计器-前端和后端完善标准组件库的模板、完善标准组件库的业务属性模板【TODO】->前后端都需要完善的组件库，用于支撑业务引擎

	# 10.前端通用表单设计器-适配后端组织架构图【TODO】->建立或者导入组织机构信息

	# 11.前端通用表单设计器-适配后端人员、角色、权限【TODO】->用于建立业务系统核心参与者

	# 12.前端通用表单设计器-适配后端业务系统菜单设计【TODO】->用于建立系统功能菜单

	# 13.前端通用表单设计器-适配后端业务系统Portal设计【TODO】->portal是用于呈现业务系统登录后的入口页面

	# 14.前端通用表单设计器-适配后端数据模型设计【TODO】->数据模型是前后端交互、逻辑引擎的数据驱动

	# 15.前端通用表单设计器-适配后端逻辑图设计【TODO】->逻辑引擎

	# 16.前端通用表单设计器-适配后端业务系统原型设计【TODO】->绝对布局-用于快速绘制原型图设计、自动生成设计文档等

	# 17.前端通用表单设计器-适配后端业务系统非流程业务表单设计【TODO】->普通业务单维护

	# 18.前端通用表单设计器-适配后端流程图设计【TODO】->流程引擎驱动

	# 19.前端通用表单设计器-适配后端业务系统流程表单设计【TODO】->审批单

	# 20.前端通用表单设计器-适配后端业务关系图设计【TODO】->业务关系处理复杂业务

	# 21.前端通用表单设计器-适配后端业务系报表设计【TODO】->报表服务

	# 22.前端通用表单设计器-适配后端服务接口设计【TODO】->用于编排内外部接口服务调用，包装为服务接口

	# 23.前端通用表单设计器-适配后端服务消息设计【TODO】->用于编排消息输入、输出、服务消息收集与分析

	# 24.前端通用表单设计器-适配后端服务日志设计【TODO】->用于编排日志输入、输出、日志收集与分析

	# 25.前端通用表单设计器-适配后端服务缓存设计【TODO】->用于编排分布式数据缓存输入、输出、分布于分析

	# 26.前端通用表单设计器-适配后端任务设计【TODO】-> 用于编排定时任务、周期类任务、单次任务

	# 27.前端通用表单设计器-适配后端数据库架构设计【TODO】->用于编排 数据库部署、同步、读写等（跨数据库服务 如 mongoDB、mysql、oracle 等）

	# 28.前端通用表单设计器-适配后端服务器架构图设计【TODO】->用于自动化部署服务器

	# 29.前端通用表单设计器-适配后端各类服务的测试设计【TODO】 ->用于编排自动化服务测试

	# 30.前端通用表单设计器-适配后端各类服务的运维设计【TODO】 ->用于编排自动化服务运维

######
 


  	
## 软件架构
	# 一、前端
		# 1.nginx部署前端 
		# 2.轻量级自动路由，根据目录结构实现自动路由
		# 3.通过ajax获取组件资源文件内容，解析成组件实例,实现自动include引入
		# 4.通用建模设计器-构建常规核心业务系统应用场景
	# 二、后端
		# 1.Spring Cloud 、docker、微服务架构
		# 2.通用建模引擎适配器
		# 3.组织、人员、角色、岗位
		# 4.权限
		# 5.数据模型引擎
		# 6.逻辑引擎
		# 6.报表引擎
		# 7.流程引擎
		# 8.日志、消息、缓存
		# 9.通用数据库引擎 
 
############################################################################

## 安装教程
	## 一.前端
		# 1.安装nginx
		# 2.将auto-router-include项目web目录通过svn或者git检出到nginx静态资源目录下
	## 二.后端
		# TODO 
		# 
## 前端访问说明
	# 1.路由访问说明: 默认入口页面为 , http://flyer555.gitee.io/oui-auto-router-include/index.html?contextPath=/oui-auto-router-include/ 
		如果域名默认根路径为 / 则不用指定contextPath根路由 如 ：http://ip:port/index.html
		由于部署到gitte上的项目，需要指定项目名，这种情况下项目名就为访问路由的根路径 如我们的项目名为 oui-auto-router-include ,对应的根路径为 /oui-auto-router-include/ ,请注意前缀以/开始，后缀以/结尾
		
	# 2.测试默认入口 res_apps/test/index.html
	# 3.测试单文件路由机制 res_apps/test/index4single.html
	# 4.测试单文件内通过include引入多个单文件机制 res_apps/test/index4includeSingle.html
	# 5.测试组件与组件嵌套机制 res_apps/test/index4includeNext.html
	# 6.表单设计器路径 res_engine/page_design/pc/page-design.html
	# TODO 新功能入口待定
  
## 开发者说明
	# 1.自动路由扩展
		oui.router默认实例 res_common/oui/system/route.js
		
	# 2.前端组件模板类型扩展：
		文件路径：res_common/oui/system/component-adapter.js
		oui.componentAdapter 扩展模板类型和实现（目前已经实现了vue和art组件）
		
	# 3.通用表单设计器扩展-控件类型扩展 
		1)文件路径：res_engine/page_design/pc/js/page-controls.js
			扩展表单设计器待选控件类型
				方法一：内置默认控件列表 com.oui.absolute.AbsoluteDesign.defaultControls4Normal
				方法二：默认显示控件列表 com.oui.absolute.AbsoluteDesign.defaultControls
		2)文件路径：res_engine/page_design/common/page-design-tpl.html
			扩展表单设计器 生成设计态和运行态模板
			设计态的模板id命名规则：以 page_design_control_开始,拼接控件的主分类(htmlType) 如:page_design_control_textInput
			运行态的模板id命名规则：以 page_runtime_control_开始,拼接控件主分类(htmlType) 如：page_runtime_control_textInput
			由于设计态和运行态的组件显示使用的模板和模板参数是不同的，所以在这里分为两个模板来配置
			这里，我们在模板中 通过 <oui-include></oui-include> 实现动态引入该控件类型对应的模板路径即可；当然这个路径可以由开发者自由控制vue组件的路径或者art组件的路径
			
			参考：
			<!--文本输入类-->
			<!--<textarea  placeholder="请输入" class="control-field-value-abs" style="{{AbsoluteDesign.findFieldStyle4Dom(control)}}">{{AbsoluteDesign.startTemplateTag}}{{control.name}}{{AbsoluteDesign.endTemplateTag}}</textarea>-->
			<script type="text/html" id="page_design_control_textInput">
				<oui-include url="res_common/oui/ui/ui_pc/components/{{control.controlType}}.vue.html"
							 ref="{{control.id}}"
							 type="module"
							 data="__data().getControlRenderDataById('{{control.id}}')"></oui-include>
			</script>
			<script type="text/html" id="page_runtime_control_textInput">
				。。。。
			</script> 
	# 4.通用表单设计器-设计期与运行态共用的组件扩展 
	 
	由于我们在page-design-tpl.html中配置的组件模板路径 为res_common/oui/ui/ui_pc/components/{{control.controlType}}.vue.html
		所以我们需要在实际的目录下创建对应的控件的组件模板 如 res_common/oui/ui/ui_pc/components/textfield.vue.html
				
		<template >
			<el-input :style="style" :id="id" :name="name" :bindProp="bindProp" :class="cls" v-model="value" @change="_controlOnUpdate" :placeholder="placeholder"></el-input>
		</template>

		<script>
			exports = {
				templateType:'vue', //vue模板类型
				data: function () {
					return {
						id:'',
						name:'',
						data:{},
						bindProp:'',
						value: '',
						style:'',
						cls:'',
						placeholder:''
					}
				},
				methods:{
					_controlOnUpdate:function(v,ov){
						var key = this.bindProp;
						this.onUpdate&&this.onUpdate(key,v,ov); //外部构造的方法调用
					}
				}
			}
		</script>
		
		当然如果page-design-tpl.html中配置的组件模板路径为 art的组件，则可以需要配置art的组件文件
		<template >
			<input type="text" id="{{id}}" name="{{name}}" bindPropAfter="_controlOnUpdate" bindProp="{{bindProp}}" value="{{value}}" style="{{style}}" class="{{cls}}"/>
		</template>

		<script>
			exports = {
				templateType:'art', //art模板类型
				data: function () {
					return {
						id:'',
						name:'',
						data:{},
						bindProp:'',
						value: '',
						style:'',
						cls:'',
						placeholder:''
					}
				},
				mounted:function(){
					this.refresh();//内置刷新函数
				},
				methods:{
					_controlOnUpdate:function(cfg){
						var key = this.bindProp;
						var ov = this.value;
						this.value = $(cfg.el).val();
						this.onUpdate&&this.onUpdate(key,this.value,ov); //外部构造的方法调用
					}
				}
			}
		</script>	
		
	# 5.通用表单设计器-表单业务属性扩展
	
	方法一：修改 表单业务属性的默认模板,模板id为absoluteProps-pageProps-biz-tpl ,在 res_engine/page_design/pc/page-design.html 中已经配置，调整即可
	<!--页面的业务属性扩展配置-->
	<script type="text/html" id="absoluteProps-pageProps-biz-tpl">
		<div class="design-attribute-item">
			<div class="design-set-attribute-tit attribute-tit-active">业务属性<i class="retract-arrow-icon"></i></div>
			<div class="design-set-area">
				<!--此处可以扩展多个配置项-->
				<div class="design-field ">
					<div class="fieldname">业务描述</div>
					<div class="fieldblock">
					<textarea bindPropAfter="changed4props" placeholder="业务描述"
							  bindProp="otherAttrs.bizDes"
							  value="{{otherAttrs.bizDes}}">{{otherAttrs.bizDes}}</textarea>
					</div>
					<div class="fielderror" id="check_controls_{{currentControl.id}}_otherAttrs_bizDes">
						{{if AbsoluteDesign.findCheckMessage("otherAttrs.bizDes")}}
						<div class="fielderror-info">{{AbsoluteDesign.findCheckMessage("otherAttrs.bizDes")}}</div>
						{{/if}}
					</div>
				</div>

				<!--在这里扩展自定义业务设置-->
			</div>
		</div>
	</script>
	方法二：指定设计器的url参数 pageBizPropsUrl即可，设计器加载时会根据指定的表单业务属性模板的路径加载到absoluteProps-pageProps-biz-tpl模板进行替换
	 
	 

	# 6.通用表单设计器-控件的业务属性扩展(支撑不同控件类型具备不同业务属性配置)
	
	方法一：修改 控件业务属性的默认模板,模板id为 current-control-biz-props-tpl,在 res_engine/page_design/pc/page-design.html 中已经配置，调整即可
	
	<!--控件业务属性扩展模板-->
	<script type="text/html" id="current-control-biz-props-tpl">
		{{if currentControl &&currentControl.controlType && currentControl.id && (currentControl.htmlType!='tableLine') }}
		<oui-include url="res_engine/page_design/pc/components-biz-prop-art-tpl/{{currentControl.controlType}}.art.html" ref="current_prop" type="module" data="__data().getCurrentBizConfig()"></oui-include>
		{{else}}
		<!--<oui-include url="res_engine/page_design/pc/components-biz-prop-tpl/{{currentControl.controlType}}.vue.html" ref="current_prop" type="module" data="__data().getCurrentBizConfig()"></oui-include>-->
		{{/if}}
	</script>
	方法二：指定设计器的url参数 controlBizPropsUrl即可，设计器加载时会根据指定的表单业务属性模板的路径加载到current-control-biz-props-tpl模板进行替换
#TODO 持续更新与 后端各种引擎的适配机制	 
	 
	
	
##################################################################################################
  

##参与合作

	# 1.寻志同道合的前端或者后端，请联系QQ：944811924; 微信：13808071246; qq群：644212342 ;
	# 2.立志为应用系统工程化、自动化、智能化、轻量化的开发架构而努力奋斗
	# 3.不断改进前后端框架易用性和颠覆前后端开发模式