静态版小程序页面和程序组件绑定完成

skyeye-dao/src/main/java/com/skyeye/smprogram/dao/SmProjectPageModeDao.java

+package com.skyeye.smprogram.dao;
+
+import java.util.List;
+import java.util.Map;
+
+public interface SmProjectPageModeDao {
+
+	public List<Map<String, Object>> queryProPageModeMationByPageIdList(Map<String, Object> map) throws Exception;
+
+	public int deletePageModelMationListByPageId(Map<String, Object> map) throws Exception;
+
+	public int editProPageModeMationByPageIdList(List<Map<String, Object>> beans) throws Exception;
+
+}

skyeye-service/src/main/java/com/skyeye/smprogram/service/SmProjectPageModeService.java

+package com.skyeye.smprogram.service;
+
+import com.skyeye.common.object.InputObject;
+import com.skyeye.common.object.OutputObject;
+
+public interface SmProjectPageModeService {
+
+	public void queryProPageModeMationByPageIdList(InputObject inputObject, OutputObject outputObject) throws Exception;
+
+	public void editProPageModeMationByPageIdList(InputObject inputObject, OutputObject outputObject) throws Exception;
+
+}

skyeye-service/src/main/java/com/skyeye/smprogram/service/impl/SmProjectPageModeServiceImpl.java

+package com.skyeye.smprogram.service.impl;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import com.skyeye.common.object.InputObject;
+import com.skyeye.common.object.OutputObject;
+import com.skyeye.common.util.ToolUtil;
+import com.skyeye.smprogram.dao.SmProjectPageModeDao;
+import com.skyeye.smprogram.service.SmProjectPageModeService;
+import net.sf.json.JSONArray;
+import net.sf.json.JSONObject;
+
+@Service
+public class SmProjectPageModeServiceImpl implements SmProjectPageModeService{
+	
+	@Autowired
+	private SmProjectPageModeDao smProjectPageModeDao;
+
+	/**
+	 * 
+	     * @Title: queryProPageModeMationByPageIdList
+	     * @Description: 根据项目页面获取该页面拥有的组件列表
+	     * @param @param inputObject
+	     * @param @param outputObject
+	     * @param @throws Exception    参数
+	     * @return void    返回类型
+	     * @throws
+	 */
+	@Override
+	public void queryProPageModeMationByPageIdList(InputObject inputObject, OutputObject outputObject) throws Exception {
+		Map<String, Object> map = inputObject.getParams();
+		List<Map<String, Object>> beans = smProjectPageModeDao.queryProPageModeMationByPageIdList(map);
+		if(beans != null && !beans.isEmpty()){
+			outputObject.setBeans(beans);
+			outputObject.settotal(beans.size());
+		}
+	}
+
+	/**
+	 * 
+	     * @Title: editProPageModeMationByPageIdList
+	     * @Description: 插入项目页面对应的模块内容
+	     * @param @param inputObject
+	     * @param @param outputObject
+	     * @param @throws Exception    参数
+	     * @return void    返回类型
+	     * @throws
+	 */
+	@Override
+	public void editProPageModeMationByPageIdList(InputObject inputObject, OutputObject outputObject) throws Exception {
+		Map<String, Object> map = inputObject.getParams();
+		smProjectPageModeDao.deletePageModelMationListByPageId(map);//根据页面id删除之前的页面和模块的绑定信息
+		JSONArray array = JSONArray.fromObject(map.get("jsonData").toString());//获取模板绑定信息
+		if(array.size() > 0){
+			Map<String, Object> user = inputObject.getLogParams();
+			List<Map<String, Object>> beans = new ArrayList<>();
+			for(int i = 0; i < array.size(); i++){
+				JSONObject object = (JSONObject) array.get(i);
+				Map<String, Object> bean = new HashMap<>();
+				bean.put("pageId", object.getString("pageId"));
+				bean.put("modelId", object.getString("modelId"));
+				bean.put("id", ToolUtil.getSurFaceId());
+				bean.put("createId", user.get("id"));
+				bean.put("createTime", ToolUtil.getTimeAndToString());
+				bean.put("sort", i);
+				beans.add(bean);
+			}
+			smProjectPageModeDao.editProPageModeMationByPageIdList(beans);
+		}
+	}
+
+}

skyeye-web/src/main/java/com/skyeye/smprogram/controller/SmProjectPageModeController.java

+package com.skyeye.smprogram.controller;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import com.skyeye.common.object.InputObject;
+import com.skyeye.common.object.OutputObject;
+import com.skyeye.smprogram.service.SmProjectPageModeService;
+
+@Controller
+public class SmProjectPageModeController {
+	
+	@Autowired
+	private SmProjectPageModeService smProjectPageModeService;
+	
+	/**
+	 * 
+	     * @Title: queryProPageModeMationByPageIdList
+	     * @Description: 根据项目页面获取该页面拥有的组件列表
+	     * @param @param inputObject
+	     * @param @param outputObject
+	     * @param @throws Exception    参数
+	     * @return void    返回类型
+	     * @throws
+	 */
+	@RequestMapping("/post/SmProjectPageModeController/queryProPageModeMationByPageIdList")
+	@ResponseBody
+	public void queryProPageModeMationByPageIdList(InputObject inputObject, OutputObject outputObject) throws Exception{
+		smProjectPageModeService.queryProPageModeMationByPageIdList(inputObject, outputObject);
+	}
+	
+	/**
+	 * 
+	     * @Title: editProPageModeMationByPageIdList
+	     * @Description: 插入项目页面对应的模块内容
+	     * @param @param inputObject
+	     * @param @param outputObject
+	     * @param @throws Exception    参数
+	     * @return void    返回类型
+	     * @throws
+	 */
+	@RequestMapping("/post/SmProjectPageModeController/editProPageModeMationByPageIdList")
+	@ResponseBody
+	public void editProPageModeMationByPageIdList(InputObject inputObject, OutputObject outputObject) throws Exception{
+		smProjectPageModeService.editProPageModeMationByPageIdList(inputObject, outputObject);
+	}
+	
+}

skyeye-web/src/main/resources/dbmapper/SmProjectPageMapper.xml

@@ -6,8 +6,8 @@
 		SELECT
 			a.id,
 			a.`name`,
-			IFNULL(a.file_path, a.default_file_path) filePath,
-			IFNULL(a.file_name, a.default_file_name) fileName
+			IF(ISNULL(a.file_path) || LENGTH(TRIM(a.file_path)) < 1, a.default_file_path, a.file_path) filePath,
+			IF(ISNULL(a.file_name) || LENGTH(TRIM(a.file_name)) < 1, a.default_file_name, a.file_name) fileName
 		FROM
 			sm_project_page a
 		WHERE

skyeye-web/src/main/resources/dbmapper/SmProjectPageModelMapper.xml

+<?xml version="1.0" encoding="UTF-8" ?>  
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
+<mapper namespace="com.skyeye.smprogram.dao.SmProjectPageModeDao">
+	
+	<select id="queryProPageModeMationByPageIdList" parameterType="java.util.Map" resultType="java.util.Map">
+		SELECT
+			b.id modelId,
+			b.html_content htmlContent,
+			b.html_js_content htmlJsContent
+		FROM
+			sm_project_page_mode a,
+			rm_group_member b
+		WHERE a.sm_project_page_id = #{pageId}
+		AND a.rm_group_member_id = b.id
+		ORDER BY a.sort ASC
+	</select>
+	
+	<delete id="deletePageModelMationListByPageId" parameterType="java.util.Map">
+		DELETE
+		FROM
+			sm_project_page_mode
+		WHERE
+			sm_project_page_id = #{pageId}
+	</delete>
+	
+	<insert id="editProPageModeMationByPageIdList" parameterType="java.util.Map">
+	     insert into sm_project_page_mode
+	     (id, rm_group_member_id, sm_project_page_id, sort, create_id, create_time)
+	     values
+		<foreach collection="list" item="item" index="index" separator="," >  
+			(#{item.id}, #{item.modelId}, #{item.pageId}, #{item.sort}, #{item.createId}, #{item.createTime})  
+		</foreach>  
+	</insert>
+	
+</mapper>
\ No newline at end of file

skyeye-web/src/main/resources/mapping/reqmapping.xml

@@ -319,6 +319,13 @@
 	<url id="rmxcx035" path="/post/SmProjectPageController/deleteSmProjectPageMationById" val="删除小程序页面信息" allUse="1">
 		<property id="rowId" name="id" ref="required" var="页面id"/>
 	</url>
+	<url id="rmxcx036" path="/post/SmProjectPageModeController/queryProPageModeMationByPageIdList" val="根据项目页面获取该页面拥有的组件列表" allUse="1">
+		<property id="pageId" name="pageId" ref="required" var="小程序页面id"/>
+	</url>
+	<url id="rmxcx037" path="/post/SmProjectPageModeController/editProPageModeMationByPageIdList" val="插入项目页面对应的模块内容" allUse="1">
+		<property id="pageId" name="pageId" ref="required" var="小程序页面id"/>
+		<property id="jsonData" name="jsonData" ref="required" var="小程序页面和模块绑定的json字符串"/>
+	</url>
 	
 	<!-- 小程序系列结束 -->
 	

skyeye-web/src/main/webapp/assets/lib/winui/css/winui.css

@@ -2744,13 +2744,20 @@ body .layer-ext-winconfirm {
 
 .page-li{
     width: 100%;
-    height: 50px;
+    height: 80px;
     line-height: 25px;
     background-color: ghostwhite;
     margin-top: 10px;
    	background: rgba(0.5,0.3,0.2,0.1) none repeat scroll !important;
 }
 
+.file-content{
+	font-size: 10px;
+    color: darkgoldenrod;
+    font-family: monospace;
+    margin-left: 20px;
+}
+
 .page-li:HOVER{
 	cursor: pointer;
 	border: 1px #357ebd dashed;

skyeye-web/src/main/webapp/js/rmmysmpropage/mysmpropagelist.js

@@ -3,6 +3,9 @@ var proId = "";//项目id
 
 var pageId = "";//页面id
 
+var editPageModelSelectId = "";//正在编辑模板中的页面id
+var editPageModelSelectChange = false;//选中的页面，模板是否修改
+
 layui.config({
 	base: basePath, 
 	version: skyeyeVersion
@@ -27,6 +30,40 @@ layui.config({
 	 	ajaxSendLoadBefore: function(hdb){
 	 	},
 	 	options: {
+	 		'click .page-click-item':function(index, row){//选择编辑模板中的页面
+	 			if(row.id == editPageModelSelectId){//如果选中的页面正是当前编辑模板中的页面，则不做任何操作
+	 				
+	 			}else{
+	 				if(editPageModelSelectChange == true){//编辑了页面但没有保存
+	 		 			layer.confirm('当前修改页面没有保存，是否继续吗？', { icon: 3, title: '小程序页面编辑通知' }, function (i) {
+	 		 				layer.close(i);
+	 		 				$(".page-click-item").removeClass("check-item-shoose");
+	 		 				$("#pageList>li:eq(" + index + ")").addClass("check-item-shoose");
+	 		 				editPageModelSelectId = row.id;
+	 		 				editPageModelSelectChange = false;
+	 			 			AjaxPostUtil.request({url:reqBasePath + "rmxcx036", params:{pageId: editPageModelSelectId}, type:'json', callback:function(json){
+	 			 	   			if(json.returnCode == 0){
+	 			 	   				showDataUseHandlebars("centerText", getFileContent('tpl/rmmysmpropage/pagemodelTemplate.tpl'), json);
+	 			 	   			}else{
+	 			 	   				top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
+	 			 	   			}
+	 			 	   		}});
+	 		 			});
+	 				}else{
+	 					$(".page-click-item").removeClass("check-item-shoose");
+	 					$("#pageList>li:eq(" + index + ")").addClass("check-item-shoose");
+	 					editPageModelSelectId = row.id;
+	 					editPageModelSelectChange = false;
+	 		 			AjaxPostUtil.request({url:reqBasePath + "rmxcx036", params:{pageId: editPageModelSelectId}, type:'json', callback:function(json){
+	 		 	   			if(json.returnCode == 0){
+	 		 	   				showDataUseHandlebars("centerText", getFileContent('tpl/rmmysmpropage/pagemodelTemplate.tpl'), json);
+	 		 	   			}else{
+	 		 	   				top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
+	 		 	   			}
+	 		 	   		}});
+	 				}
+	 			}
+	 		},
 	 		'click .reName':function(index, row){//重命名
 	 			pageId = row.id;
 	 			_openNewWindows({
@@ -37,6 +74,16 @@ layui.config({
 	 	                if (refreshCode == '0') {
 	 	                	refreshGrid("pageList", {params:{rowId: proId}});
 	 	                	top.winui.window.msg("操作成功", {icon: 1,time: 2000});
+	 	                	//重置中间模块
+	 	    				editPageModelSelectId = "";
+	 			 			editPageModelSelectChange = false;
+	 			 			AjaxPostUtil.request({url:reqBasePath + "rmxcx036", params:{pageId: editPageModelSelectId}, type:'json', callback:function(json){
+	 			 	   			if(json.returnCode == 0){
+	 			 	   				showDataUseHandlebars("centerText", getFileContent('tpl/rmmysmpropage/pagemodelTemplate.tpl'), json);
+	 			 	   			}else{
+	 			 	   				top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
+	 			 	   			}
+	 			 	   		}});
 	 	                } else if (refreshCode == '-9999') {
 	 	                	top.winui.window.msg("操作失败", {icon: 2,time: 2000});
 	 	                }
@@ -50,6 +97,16 @@ layui.config({
 	        	AjaxPostUtil.request({url:reqBasePath + "rmxcx031", params:params, type:'json', callback:function(json){
 	 	   			if(json.returnCode == 0){
 	 	   				refreshGrid("pageList", {params:{rowId: proId}});
+	 	   				//重置中间模块
+ 	    				editPageModelSelectId = "";
+ 			 			editPageModelSelectChange = false;
+ 			 			AjaxPostUtil.request({url:reqBasePath + "rmxcx036", params:{pageId: editPageModelSelectId}, type:'json', callback:function(json){
+ 			 	   			if(json.returnCode == 0){
+ 			 	   				showDataUseHandlebars("centerText", getFileContent('tpl/rmmysmpropage/pagemodelTemplate.tpl'), json);
+ 			 	   			}else{
+ 			 	   				top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
+ 			 	   			}
+ 			 	   		}});
 	 	   			}else{
 	 	   				top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
 	 	   			}
@@ -63,6 +120,16 @@ layui.config({
 	        	AjaxPostUtil.request({url:reqBasePath + "rmxcx032", params:params, type:'json', callback:function(json){
 	 	   			if(json.returnCode == 0){
 	 	   				refreshGrid("pageList", {params:{rowId: proId}});
+	 	   				//重置中间模块
+ 	    				editPageModelSelectId = "";
+ 			 			editPageModelSelectChange = false;
+ 			 			AjaxPostUtil.request({url:reqBasePath + "rmxcx036", params:{pageId: editPageModelSelectId}, type:'json', callback:function(json){
+ 			 	   			if(json.returnCode == 0){
+ 			 	   				showDataUseHandlebars("centerText", getFileContent('tpl/rmmysmpropage/pagemodelTemplate.tpl'), json);
+ 			 	   			}else{
+ 			 	   				top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
+ 			 	   			}
+ 			 	   		}});
 	 	   			}else{
 	 	   				top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
 	 	   			}
@@ -80,6 +147,16 @@ layui.config({
 	 	    			if(json.returnCode == 0){
 	 	    				top.winui.window.msg("删除成功", {icon: 1,time: 2000});
 	 	    				refreshGrid("pageList", {params:{rowId: proId}});
+	 	    				//重置中间模块
+	 	    				editPageModelSelectId = "";
+	 			 			editPageModelSelectChange = false;
+	 			 			AjaxPostUtil.request({url:reqBasePath + "rmxcx036", params:{pageId: editPageModelSelectId}, type:'json', callback:function(json){
+	 			 	   			if(json.returnCode == 0){
+	 			 	   				showDataUseHandlebars("centerText", getFileContent('tpl/rmmysmpropage/pagemodelTemplate.tpl'), json);
+	 			 	   			}else{
+	 			 	   				top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
+	 			 	   			}
+	 			 	   		}});
 	 	    			}else{
 	 	    				top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
 	 	    			}
@@ -116,15 +193,20 @@ layui.config({
 		}
 	}).on('drop', function (el, container) {//放置
 		if($(container).attr("id") == 'centerText'){//放置在手机里面
-			el.className = 'layui-col-md12';
-			var content = '<div class="layui-col-md12 check-item">' + $(el).attr("htmlContent") + '</div>';//内容
-			var operationContent = '<div class="check-item-operation btn-group btn-group-xs btn-base">' +
-								'<button type="button" class="btn btn-primary" rel="editHandler" title="编辑"><i class="fa fa-edit"></i></button>' + 
-								'<button type="button" class="btn btn-danger" rel="removeHandler" title="删除"><i class="fa fa-trash"></i></button>' + 
-								'</div>';
-			var JsContent = '<script>layui.define(["jquery"], function(exports) {var jQuery = layui.jquery;(function($) {' + $(el).attr("htmlJsContent") + '})(jQuery);});</script>'
-			$(el).html(content + operationContent + JsContent);
-			$(el).find(".check-item-operation").hide();
+			if(isNull(editPageModelSelectId)){
+				top.winui.window.msg('请先选择要编辑的页面', {icon: 2,time: 2000});
+				$("#centerText").empty();
+			}else{
+				el.className = 'layui-col-md12 import-item';
+				var content = '<div class="layui-col-md12 check-item">' + $(el).attr("htmlContent") + '</div>';//内容
+				var operationContent = '<div class="check-item-operation btn-group btn-group-xs btn-base">' +
+				'<button type="button" class="btn btn-primary" rel="editHandler" title="编辑"><i class="fa fa-edit"></i></button>' + 
+				'<button type="button" class="btn btn-danger" rel="removeHandler" title="删除"><i class="fa fa-trash"></i></button>' + 
+				'</div>';
+				var JsContent = '<script>layui.define(["jquery"], function(exports) {var jQuery = layui.jquery;(function($) {' + $(el).attr("htmlJsContent") + '})(jQuery);});</script>'
+				$(el).html(content + operationContent + JsContent);
+				$(el).find(".check-item-operation").hide();
+			}
 		}
 	});
     
@@ -245,6 +327,15 @@ layui.config({
     	$(this).parent().parent().remove();
     })
     
+    //监听页面内容是否变化
+    $('body').on('DOMNodeInserted', '#centerText', function(){
+    	if(isNull(editPageModelSelectId)){//如果没有选中页面，则不做任何操作
+    		
+    	}else{
+    		editPageModelSelectChange = true;
+    	}
+    });
+    
     //添加页面按钮
     $('body').on('click', '#addPageBean', function(){
 		_openNewWindows({
@@ -261,5 +352,29 @@ layui.config({
 			}});
     });
     
+    //保存页面
+    $('body').on('click', '#savePageModelBean', function(){
+    	if(!isNull(editPageModelSelectId)){//要编辑的模板页面id不为空
+    		editPageModelSelectChange = false;
+    		var list = [];//存储模板生成集合
+    		$('#centerText').find('.import-item').each(function() {
+    			var s = {
+    				modelId: $(this).attr("rowId"),
+    				pageId: editPageModelSelectId,
+    			};
+    			list.push(s);
+    		});
+    		AjaxPostUtil.request({url:reqBasePath + "rmxcx037", params:{jsonData: JSON.stringify(list), pageId: editPageModelSelectId}, type:'json', callback:function(json){
+    			if(json.returnCode == 0){
+    				top.winui.window.msg("保存成功", {icon: 1,time: 2000});
+    			}else{
+    				top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
+    			}
+    		}});
+    	}else{
+    		top.winui.window.msg('请先选择要编辑的页面', {icon: 2,time: 2000});
+    	}
+    });
+    
     exports('mysmpropagelist', {});
 });

skyeye-web/src/main/webapp/tpl/rmmysmpropage/mysmpropagelist.html

@@ -12,6 +12,7 @@
     <div class="winui-toolbar">
         <div class="winui-tool">
             <button type="button" id="addPageBean" class="winui-toolbtn"><i class="fa fa-plus" aria-hidden="true"></i>新增页面</button>
+            <button type="button" id="savePageModelBean" class="winui-toolbtn"><i class="fa fa-floppy-o" aria-hidden="true"></i>保存页面</button>
         </div>
     </div>
     

skyeye-web/src/main/webapp/tpl/rmmysmpropage/pageTemplate.tpl

 {{#each rows}}
-	<li class="page-li">
+	<li class="page-li page-click-item">
         <div class="weui-flex layui-col-xs6">
             <span class="weui-flex__item">{{name}}</span>
         </div>
@@ -10,5 +10,13 @@
         	<button class="layui-btn layui-btn-xs tab-btn-mar-left-3 copyPage" title="复制页面"><i class="fa fa-files-o"></i></button>
             <button class="layui-btn layui-btn-xs tab-btn-mar-left-3 delPage" title="删除页面"><i class="fa fa-trash"></i></button>
         </div>
+        <div class="layui-col-xs12">
+            <div class="layui-col-xs6">
+	            <span class="file-content">文件名：{{fileName}}</span>
+	        </div>
+	        <div class="layui-col-xs6">
+	            <span class="file-content">导出路径：page/{{filePath}}</span>
+	        </div>
+        </div>
     </li>
 {{/each}}
\ No newline at end of file

skyeye-web/src/main/webapp/tpl/rmmysmpropage/pagemodelTemplate.tpl

+{{#each rows}}
+	<div class="layui-col-md12 import-item" htmlContent="{{htmlContent}}" htmlJsContent="{{htmlJsContent}}" rowId="{{modelId}}">
+		<div class="layui-col-md12 check-item">
+			{{{htmlContent}}}
+		</div>
+		<div class="check-item-operation btn-group btn-group-xs btn-base" style="display: none;">
+			<button type="button" class="btn btn-primary" rel="editHandler" title="编辑"><i class="fa fa-edit"></i></button>
+			<button type="button" class="btn btn-danger" rel="removeHandler" title="删除"><i class="fa fa-trash"></i></button>
+		</div>
+		<script>
+			layui.define(["jquery"], function(exports) {
+				var jQuery = layui.jquery;
+				(function($) {
+					{{{htmlJsContent}}}
+				})(jQuery);
+			});
+		</script>
+    </div>
+{{/each}}
\ No newline at end of file