提交 e2ff211f 编写于 作者: Skyeye云's avatar Skyeye云

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

上级 3853504f
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;
}
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;
}
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);
}
}
}
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);
}
}
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
SELECT SELECT
a.id, a.id,
a.`name`, a.`name`,
IFNULL(a.file_path, a.default_file_path) filePath, IF(ISNULL(a.file_path) || LENGTH(TRIM(a.file_path)) &lt; 1, a.default_file_path, a.file_path) filePath,
IFNULL(a.file_name, a.default_file_name) fileName IF(ISNULL(a.file_name) || LENGTH(TRIM(a.file_name)) &lt; 1, a.default_file_name, a.file_name) fileName
FROM FROM
sm_project_page a sm_project_page a
WHERE WHERE
......
<?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
...@@ -319,6 +319,13 @@ ...@@ -319,6 +319,13 @@
<url id="rmxcx035" path="/post/SmProjectPageController/deleteSmProjectPageMationById" val="删除小程序页面信息" allUse="1"> <url id="rmxcx035" path="/post/SmProjectPageController/deleteSmProjectPageMationById" val="删除小程序页面信息" allUse="1">
<property id="rowId" name="id" ref="required" var="页面id"/> <property id="rowId" name="id" ref="required" var="页面id"/>
</url> </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>
<!-- 小程序系列结束 --> <!-- 小程序系列结束 -->
......
...@@ -2744,13 +2744,20 @@ body .layer-ext-winconfirm { ...@@ -2744,13 +2744,20 @@ body .layer-ext-winconfirm {
.page-li{ .page-li{
width: 100%; width: 100%;
height: 50px; height: 80px;
line-height: 25px; line-height: 25px;
background-color: ghostwhite; background-color: ghostwhite;
margin-top: 10px; margin-top: 10px;
background: rgba(0.5,0.3,0.2,0.1) none repeat scroll !important; 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{ .page-li:HOVER{
cursor: pointer; cursor: pointer;
border: 1px #357ebd dashed; border: 1px #357ebd dashed;
......
...@@ -3,6 +3,9 @@ var proId = "";//项目id ...@@ -3,6 +3,9 @@ var proId = "";//项目id
var pageId = "";//页面id var pageId = "";//页面id
var editPageModelSelectId = "";//正在编辑模板中的页面id
var editPageModelSelectChange = false;//选中的页面,模板是否修改
layui.config({ layui.config({
base: basePath, base: basePath,
version: skyeyeVersion version: skyeyeVersion
...@@ -27,6 +30,40 @@ layui.config({ ...@@ -27,6 +30,40 @@ layui.config({
ajaxSendLoadBefore: function(hdb){ ajaxSendLoadBefore: function(hdb){
}, },
options: { 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){//重命名 'click .reName':function(index, row){//重命名
pageId = row.id; pageId = row.id;
_openNewWindows({ _openNewWindows({
...@@ -37,6 +74,16 @@ layui.config({ ...@@ -37,6 +74,16 @@ layui.config({
if (refreshCode == '0') { if (refreshCode == '0') {
refreshGrid("pageList", {params:{rowId: proId}}); refreshGrid("pageList", {params:{rowId: proId}});
top.winui.window.msg("操作成功", {icon: 1,time: 2000}); 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') { } else if (refreshCode == '-9999') {
top.winui.window.msg("操作失败", {icon: 2,time: 2000}); top.winui.window.msg("操作失败", {icon: 2,time: 2000});
} }
...@@ -50,6 +97,16 @@ layui.config({ ...@@ -50,6 +97,16 @@ layui.config({
AjaxPostUtil.request({url:reqBasePath + "rmxcx031", params:params, type:'json', callback:function(json){ AjaxPostUtil.request({url:reqBasePath + "rmxcx031", params:params, type:'json', callback:function(json){
if(json.returnCode == 0){ if(json.returnCode == 0){
refreshGrid("pageList", {params:{rowId: proId}}); 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{ }else{
top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000}); top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
} }
...@@ -63,6 +120,16 @@ layui.config({ ...@@ -63,6 +120,16 @@ layui.config({
AjaxPostUtil.request({url:reqBasePath + "rmxcx032", params:params, type:'json', callback:function(json){ AjaxPostUtil.request({url:reqBasePath + "rmxcx032", params:params, type:'json', callback:function(json){
if(json.returnCode == 0){ if(json.returnCode == 0){
refreshGrid("pageList", {params:{rowId: proId}}); 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{ }else{
top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000}); top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
} }
...@@ -80,6 +147,16 @@ layui.config({ ...@@ -80,6 +147,16 @@ layui.config({
if(json.returnCode == 0){ if(json.returnCode == 0){
top.winui.window.msg("删除成功", {icon: 1,time: 2000}); top.winui.window.msg("删除成功", {icon: 1,time: 2000});
refreshGrid("pageList", {params:{rowId: proId}}); 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{ }else{
top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000}); top.winui.window.msg(json.returnMessage, {icon: 2,time: 2000});
} }
...@@ -116,15 +193,20 @@ layui.config({ ...@@ -116,15 +193,20 @@ layui.config({
} }
}).on('drop', function (el, container) {//放置 }).on('drop', function (el, container) {//放置
if($(container).attr("id") == 'centerText'){//放置在手机里面 if($(container).attr("id") == 'centerText'){//放置在手机里面
el.className = 'layui-col-md12'; if(isNull(editPageModelSelectId)){
var content = '<div class="layui-col-md12 check-item">' + $(el).attr("htmlContent") + '</div>';//内容 top.winui.window.msg('请先选择要编辑的页面', {icon: 2,time: 2000});
var operationContent = '<div class="check-item-operation btn-group btn-group-xs btn-base">' + $("#centerText").empty();
'<button type="button" class="btn btn-primary" rel="editHandler" title="编辑"><i class="fa fa-edit"></i></button>' + }else{
'<button type="button" class="btn btn-danger" rel="removeHandler" title="删除"><i class="fa fa-trash"></i></button>' + el.className = 'layui-col-md12 import-item';
'</div>'; var content = '<div class="layui-col-md12 check-item">' + $(el).attr("htmlContent") + '</div>';//内容
var JsContent = '<script>layui.define(["jquery"], function(exports) {var jQuery = layui.jquery;(function($) {' + $(el).attr("htmlJsContent") + '})(jQuery);});</script>' var operationContent = '<div class="check-item-operation btn-group btn-group-xs btn-base">' +
$(el).html(content + operationContent + JsContent); '<button type="button" class="btn btn-primary" rel="editHandler" title="编辑"><i class="fa fa-edit"></i></button>' +
$(el).find(".check-item-operation").hide(); '<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({ ...@@ -245,6 +327,15 @@ layui.config({
$(this).parent().parent().remove(); $(this).parent().parent().remove();
}) })
//监听页面内容是否变化
$('body').on('DOMNodeInserted', '#centerText', function(){
if(isNull(editPageModelSelectId)){//如果没有选中页面,则不做任何操作
}else{
editPageModelSelectChange = true;
}
});
//添加页面按钮 //添加页面按钮
$('body').on('click', '#addPageBean', function(){ $('body').on('click', '#addPageBean', function(){
_openNewWindows({ _openNewWindows({
...@@ -261,5 +352,29 @@ layui.config({ ...@@ -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', {}); exports('mysmpropagelist', {});
}); });
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<div class="winui-toolbar"> <div class="winui-toolbar">
<div class="winui-tool"> <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="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>
</div> </div>
......
{{#each rows}} {{#each rows}}
<li class="page-li"> <li class="page-li page-click-item">
<div class="weui-flex layui-col-xs6"> <div class="weui-flex layui-col-xs6">
<span class="weui-flex__item">{{name}}</span> <span class="weui-flex__item">{{name}}</span>
</div> </div>
...@@ -10,5 +10,13 @@ ...@@ -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 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> <button class="layui-btn layui-btn-xs tab-btn-mar-left-3 delPage" title="删除页面"><i class="fa fa-trash"></i></button>
</div> </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> </li>
{{/each}} {{/each}}
\ No newline at end of file
{{#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
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册